@charset "utf-8";
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2023-03-20
Modify Date : 2023-03-20
File : /event/2020/hanjinoneclick
*******************************************/

img {max-width:100%;}
#event_header {position:relative; background:#fff; z-index:5;}
#event_footer {border-color:#f0f0f0; background:#fff;}
#wrap {position:relative; overflow:hidden; background:#fff; opacity:0;}
.top_btn {background:#2989e1;}
.section > .inner, .scrollex > .inner {opacity:1; transition:opacity 0.5s ease;}
.section.active > .inner, .scrollex.active > .inner {opacity:1;}
.section {position:relative; height:auto; padding:120px 0 140px; text-align:center;}
.section h3 {margin-bottom:50px; font-size:66px; font-weight:400; color:#333; letter-spacing:-5px; line-height:1.4;}
.section h3 strong {font-family:inherit; font-weight:500;}
.section h3 p {font-family:inherit;}
.section h2, .section h3, .section h4, #section1 .price strong {font-family:"Noto Sans KR", sans-serif;}
.section .inner {position:relative; width:1180px; margin:auto; text-align:center;}
.show_mot {position:relative; opacity:0; top:20px;}
.show_mot2 {position:relative; opacity:0;}

/* #section_top */
body {background:#00a1ec;}
#section_top {background:#00a1ec; padding-bottom:70px; overflow:hidden;}
#section_top h2 {margin-bottom:50px; text-align:left;}
#section_top h2 .txt1 {margin-bottom:30px;}
#section_top h3 {text-align:left; font-size:32px; font-weight:300; color:#fff; line-height:1.6;}
#section_top h3 strong {font-family:inherit; font-weight:600;}
#section_top h3 .cross {vertical-align:middle; margin:20px 0 0 60px;}
#section_top .img1 {position:absolute; top:0; right:-150px;}
#section_top .img2 {position:absolute; top:60px; right:-20px;}

/* #section0 */
#section0 {background:#fff;}
#section0 .step {margin-bottom:70px;}
#section0 h3 {font-size:58px;}
#section0 h3 strong {font-weight:700;} 
#section0 h3 strong em {font-family:'Spoqa Han Sans Neo', sans-serif; font-size:1.1em; font-weight:inherit; letter-spacing:-3px;}
#section0 h3 .blue {color:#00a1ec !important;}
#section0 h3 .cross {vertical-align:middle; margin-bottom:10px;}

/* #section1 */
#section1 {background:#eff2f9;}
#section1 h3 br {display:none;}
#section1 .txt1 {width:1100px; margin:auto; text-align:right; font-size:16px; color:#777; line-height:1.4;}
#section1 .txt2 {position:relative; width:1100px; margin:auto;}
#section1 .txt2 li {text-align:left; font-size:18px; color:#777; line-height:1.4;}
#section1 .txt2 .info {margin-bottom:3px; vertical-align:middle; cursor:pointer;}
#section1 .txt2 .view {display:none; position:absolute; top:70px; left:50%; transform:translateX(-50%); z-index:1;}
#section1 .txt2 .view .wrap {position:relative; width:750px; box-shadow:0 1px 30px rgba(0,0,0, 0.15); border-radius:10px; background:#fff; padding:25px 30px 30px;}
#section1 .txt2 .view .wrap:after {display:none; content:''; position:absolute; left:11.5%; top:-14px; width:25px; height:18px; background:url('https://esellersPromotionalMail.esellersimg.co.kr/img/event/20230320/event_arrow.png') no-repeat;}
#section1 .txt2 .view .wrap .close {display:block; position:absolute; right:30px; top:30px; width:13px; height:13px; background:url('https://esellersPromotionalMail.esellersimg.co.kr/img/event/20230320/event_close.png') no-repeat; cursor:pointer;}
#section1 .txt2 .view .wrap h1 {margin-bottom:10px; font-size:18px; font-weight:600; color:#222;}
#section1 .txt2 .view .wrap table {width:100%; border-top:1px solid #dde4e8;}
#section1 .txt2 .view .wrap th {border-left:1px solid #dde4e8; border-bottom:1px solid #dde4e8; background:#e7f5ff; padding:8px; text-align:center; font-size:14px; color:#313131;}
#section1 .txt2 .view .wrap td {border-left:1px solid #dde4e8; border-bottom:1px solid #dde4e8; background:#fff; padding:8px; text-align:center; font-size:14px; color:#313131;}
#section1 .txt2 .view .wrap th.first,
#section1 .txt2 .view .wrap td.first {border-left:none;}
#section1 .txt2 .view .wrap p {margin-top:10px; font-size:14px; color:#949494;}
@media only screen and (max-width:750px) {
	#section1 .txt2 .view {left:0; right:0; transform:translateX(0);}
	#section1 .txt2 .view .wrap {width:100%;}
	#section1 .txt2 .view .wrap:after {left:50%; margin-left:-22px;}
}
@media only screen and (max-width:500px) {
	#section1 .txt2 .view .wrap {padding:15px 20px 20px;}
	#section1 .txt2 .view .wrap .close {right:20px; top:20px;}
	#section1 .txt2 .view .wrap h1 {font-size:15px;}
	#section1 .txt2 .view .wrap th {padding:2px 0; font-size:11px;}
	#section1 .txt2 .view .wrap td {padding:2px 0; font-size:11px;}
	#section1 .txt2 .view .wrap p {font-size:11px;}
}
@media only screen and (max-width:425px) {
	#section1 .txt2 .view {top:85px;}
}

/* #section2 */
#section2 {background:#fff;}
#section2 .box {display:inline-block; margin:10px;}

/* #section3, #section4 */
#section3 {background:#eff2f9; padding-bottom:90px;}
#section4 {background:#eff2f9; padding-top:0;}
#section3 .box,
#section4 .box {display:inline-block; margin:-8px;}
#section3 h4,
#section4 h4 {margin-bottom:20px; font-size:45px; font-weight:500; color:#000; letter-spacing:-2px;}
#section3 h4 .step,
#section4 h4 .step {margin-bottom:20px;}
#section3 p,
#section4 p {margin-bottom:50px; font-size:22px; color:#4d4d4d;}
#section3 .btn,
#section4 .btn {margin-top:70px;}
#section3 .btn:hover img,
#section4 .btn:hover img {opacity:0.8;}
#section3 .btn p,
#section4 .btn p {padding-top:15px; font-size:15px; color:#888;}

/* #section5 */
#section5 {background:url('/images/event/20200428/sec5_bg.png') center no-repeat; background-size:cover; padding:70px 0;}
#section5 .step {margin-bottom:30px;}
#section5 .box {display:inline-block; margin:10px;}
#section5 .btn {margin-bottom:40px;}
#section5 .btn:hover img {opacity:0.8;}
#section5 .list {width:660px; margin:auto;}
#section5 .list li {margin-top:20px; padding-left:23px; text-indent:-23px; text-align:left; font-size:22px; font-weight:300; color:#fff; letter-spacing:-2px;}

/* #section6 */
#section6 {background:#eff2f9; padding:70px 0;}
#section6 .inner {width:950px;}
#section6 h4 {margin-bottom:10px; background:url('/images/event/20200428/sec6_icon.png') left no-repeat; padding-left:25px; text-align:left; font-size:20px; font-weight:500; color:#333; letter-spacing:-2px;}
#section6 .list li {margin-top:5px; background:url('/images/event/20200428/sec6_list.png') left 12px no-repeat; padding-left:10px; text-align:left; font-size:16px; color:#666;}

@media only screen and (max-width:1180px) {
	.section {padding:80px 0 100px;}	
	.section .inner {width:100%; padding:0 20px;}
	.section .box_wrap {padding:0 10px;}
	#section3 {padding-bottom:60px;}
}
@media only screen and (max-width:1100px) {
	#section1 .txt1 {width:95%; padding-bottom:10px;}
	#section1 .txt2 {width:95%; padding-top:10px;}
}
@media only screen and (max-width:1000px) {
	.section h3,
	#section0 h3 {font-size:50px;}
	#section3 h4, #section4 h4 {font-size:40px;}
	#section3 .box, #section4 .box {}
}
@media only screen and (max-width:900px) {
	#section6 .inner {width:100%;}
}
@media only screen and (max-width:768px) {
	#section_top h2 .txt1 {max-width:60%; margin-bottom:20px;}
	#section_top h2 .txt2 {max-width:80%;}
	#section_top .img1 {margin-top:180px; max-width:80%;}
	#section_top .img2 {right:-40px; margin-top:180px; max-width:60%;}	
}
@media only screen and (max-width:720px) {
	#section5 .list {width:100%;}
	#section5 .list br {display:none;}
}
@media only screen and (max-width:526px) {
	#section1 .txt2 li {font-size:15px;}
}
@media only screen and (max-width:500px) {
	.section, #section5, #section6 {padding:60px 0 70px;}
	.section h3,
	#section0 h3 {margin-bottom:30px; font-size:34px;}
	#section_top {padding-bottom:40px;}
	#section_top h2 {margin-bottom:30px;}	
	#section_top h3 {font-size:28px;}
	#section_top h3 .cross {margin-left:50px;}
	#section_top .img1 {}
	#section_top .img2 {right:-60px;}
	#section0 .step {margin-bottom:30px;}
	#section0 h3 .cross {width:25px; margin-bottom:5px;}
	#section1 .price {margin:5px -5px;}
	#section1 .txt1,
	#section1 .txt2 {width:100%;}
	#section1 .txt1,
	#section1 .txt2 li {font-size:15px;}
	#section3 {padding-bottom:60px;}
	#section3 h4, #section4 h4 {font-size:28px;}
	#section3 p, #section4 p {font-size:18px;}
	#section3 .btn img, 
	#section4 .btn img, 
	#section5 .btn img {max-width:80%;}
	#section5 .list li {background-position:left 12px; font-size:18px;}
	#section6 .list li {background-position:left 10px; font-size:15px;}
}
@media only screen and (max-width:429px) {
	.section, #section5, #section6 {padding:50px 0;}
	.section h3,
	#section0 h3 {margin-bottom:20px; line-height:1.3;}
	#section1 h3 br {display:block;}
	#section3 {padding-bottom:40px;}
}