@font-face {
	font-family: Gmarket Sans;
	src: local("Gmarket Sans Bold"), local("GmarketSans-Bold"), url(https://script.ebay.co.kr/fonts/GmarketSansBold.woff2) format("woff2"), url(https://script.ebay.co.kr/fonts/GmarketSansBold.woff) format("woff");
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: Gmarket Sans;
	src: local("Gmarket Sans Medium"), local("GmarketSans-Medium"), url(https://script.ebay.co.kr/fonts/GmarketSansMedium.woff2) format("woff2"), url(https://script.ebay.co.kr/fonts/GmarketSansMedium.woff) format("woff");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: Gmarket Sans;
	src: local("Gmarket Sans Light"), local("GmarketSans-Light"), url(https://script.ebay.co.kr/fonts/GmarketSansLight.woff2) format("woff2"), url(https://script.ebay.co.kr/fonts/GmarketSansLight.woff) format("woff");
	font-weight: 300;
	font-style: normal;
}
* {
	font-family: "Gmarket Sans";
}
body {
	background-position: 0px -109px; margin: 0px; left: 0px; top: 0px; right: 0px; bottom: 0px; position: fixed; background-image: url("../img/bg4.jpg");
}
.clearfix::after {
	clear: both; display: table; content: "";
}
.logo {
	left: 45px; top: 10px; width: 170px; height: 35px; text-indent: -9999em; display: block; position: absolute; z-index: 99999; background-image: url("../img/white_logo.png"); background-repeat: no-repeat; background-size: 100%;
}
.section {
	background: rgb(39, 155, 207); transition:0.2s; width: 30%; height: 100%; border-right-color: rgba(255, 255, 255, 0.1); border-right-width: 1px; border-right-style: solid; float: left; position: relative; box-sizing: border-box;
}
.section::before {
	background: rgb(39, 155, 207); transition:top 0.2s ease-in-out; left: 0px; top: -30px; width: 100%; height: 30px; position: absolute; content: ""; opacity: 0;
}
.section.section:hover::before {
	top: 0px; opacity: 1;
}
.section .rounded {
	transition:0.2s; height: 100%; position: relative; min-height: 500px; box-sizing: border-box; border-top-left-radius: 8px; border-top-right-radius: 8px;
}
.section .rounded .link {
	width: 100%; height: 100%; padding-top: 31%; text-decoration: none; display: block;
}
.section:hover {
	background: rgba(255, 255, 255, 0.96); border-right-color: currentColor; border-right-width: medium; border-right-style: none; box-shadow: 5px -7px 20px rgba(0,0,0,0.4);
}
.section:hover .rounded {
	transform: translateY(-10px);
}
.section:hover h1 {
	color: rgb(39, 155, 207);
}
.section:hover .last_info p {
	color: rgb(102, 102, 102);
}
.section:hover ul li {
	color: rgb(167, 167, 167);
}
.section h1 {
	text-align: center; color: rgb(255, 255, 255);
}
.section h1 span {
	margin-top: 5px; display: block;
}
.section em {
	text-align: center; color: rgb(0, 0, 0); font-size: 20px; font-weight: bold; margin-bottom: 20px; display: block;
}
.section ul {
	list-style: none; margin: 0px; padding: 0px; text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 18px;
}
.section ul li:first-of-type {
	margin-bottom: 10px;
}
.section ul li ul {
	margin-top: 10px; margin-left: 12px;
}
.last_info p {
	margin: 0px 26px 10px; color: rgba(255, 255, 255, 0.8); font-size: 18px;
}
.last_info ul {
	margin: 0px 20px 25px 39px; text-align: left;
}
.btn {
	background: rgb(51, 51, 51); padding: 17px 0px; transition:0.1s; text-align: center; bottom: 0px; color: rgb(255, 255, 255); font-size: 19px; text-decoration: none; display: none; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;
}
.btn:hover {
	background: rgb(39, 155, 207);
}
.ico {
	margin: 0px auto 30px; width: 100px; height: 100px; display: block; background-size: 213px;
}
.ico_1.ico {
	background-image: url("../img/ico6.png");
}
.ico_2.ico {
	background-image: url("../img/ico7.png");
}
.ico_3.ico {
	background-image: url("../img/ico8.png");
}
.ico_4.ico {
	background-image: url("../img/ico5.png");
}
.section:hover .ico {
	background-position: 100% 0px;
}
.modal {
	background: rgba(0, 0, 0, 0.4); left: 0px; top: 0px; right: 0px; bottom: 0px; position: fixed;
}
.modal .modal-content {
	background: rgba(0, 0, 0, 0.7); left: calc(50% - 350px); top: calc(50% - 173px); position: absolute;
}
.modal .modal-btn {
	padding: 8px 15px; text-align: right; color: rgb(255, 255, 255); box-sizing: border-box;
}
.modal .modal-btn span {
	line-height: 1; font-size: 18px; cursor: pointer;
}
@media screen and (max-width:900px)
{
body {
	background-position: 98% 0px; margin: 40px auto; width: 95%; position: relative; background-repeat: no-repeat; background-size: cover;
}
.section {
	background: rgb(255, 255, 255); border-radius: 5px; width: 49%; height: auto; margin-bottom: 20px; border-right-color: currentColor; border-right-width: medium; border-right-style: none; float: left;
}
.section .rounded {
	padding: 20px 0px; height: auto; min-height: auto;
}
.section .rounded .link {
	padding-top: 0px;
}
.section:hover {
	box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.25);
}
.section::before {
	display: none;
}
:nth-of-type(2n).section {
	margin-left: 2%;
}
.section h1 {
	margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-size: 20px;
}
.section em {
	display: none;
}
.section .ico {
	background-position: 100% 0px;
}
.section ul {
	display: none;
}
.last_info {
	display: none;
}
.btn {
	background: rgb(39, 155, 207); padding: 12px 0px;
}
.modal .modal-content {
	left: calc(50% - 45%); width: 90%;
}
.modal .modal-content img {
	width: 100%;
}
}