@charset "utf-8";

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2020-02-27
Modify Date : 2020-02-28
File : /event/2020/support
*******************************************/

body {min-width:360px;}
.top_btn {background:#82acc0;}
#event_header {position:relative; background:#fff; z-index:5;}
#wrap {opacity:0; background:#a3ccdf /*linear-gradient(90deg, #a6d3e7 30%, #a6d3e7 30%)*/; position:relative; overflow:hidden;}
#wrap .arrow {z-index:2; display:inline-block; position:absolute; top:0; left:200px; width:164px;  background:url('/images/event/20200301/back1.jpg') no-repeat, url('/images/event/20200301/back2.jpg'); background-position:center top, center top; height:100%;}
#wrap .arrow .ar {position:absolute; left:45px; top:0;}
#wrap .arrow .bar {width:35px; height:0; display:inline-block; margin-left:110px; margin-top:30px; height:0; top:0;
background:rgb(255,222,104); /* Old browsers */
background:-moz-linear-gradient( rgb(255,222,104) 0%, rgba(255,71,107,1) 100%); /* FF3.6-15 */
background:-webkit-linear-gradient( rgb(255,222,104) 0%, rgba(255,71,107,1) 100%); /* Chrome10-25,Safari5.1-6 */
background:linear-gradient( rgb(255,222,104) 0%, rgba(255,71,107,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffde68', endColorstr='#ff4c6b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.link {border-bottom:1px solid #1498dc; color:#1498dc; display:inline-block;}
.link2 {border-bottom:1px solid #999897; display:inline-block;}
.show_mot {opacity:0; top:20px; position:relative;}
.show_mot2 {opacity:0; position:relative;}
.step {z-index:10; position:absolute; top:85px; }
.section > .inner, .scrollex > .inner {opacity:1; transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease;}
.section.active > .inner, .scrollex.active > .inner {opacity:1;}
.section {position:relative;  height:auto;}
.section .inner {position:relative; padding:100px 0px 30px 130px; width:1180px; margin:auto; text-align:left; background:#a3ccdf;}
.section .inner .view {margin-top:0px; display:inline-block;}
.section .inner .view .helper {cursor:pointer; display:inline-block; margin:0 0 0 5px; background:url('/images/event/20200301/icon.png') no-repeat; background-size:18px 18px; width:18px; height:18px;}
.section .inner .view .txt { font-size:16px; color:#707c8e; border-bottom:1px solid #707c8e;}
.section .inner .text_dvs h3 {font-size:53px; font-weight:200; line-height:1.2;  letter-spacing:-3px;}
.section .inner .text_dvs h3 > span {font-weight:600;}
.section .con_dvs {padding:80px 0 40px;}
.section .con_dvs .list{display:inline-block; }
.section .con_dvs .list > li{display:inline-block;  margin-right:70px; text-align:center;}
.section .con_dvs .list .txt {margin-top:30px; font-size:23px; font-weight:600; line-height:1.2; letter-spacing:-1px;}
.section .con_dvs .list .txt.gap{margin-left:-15px; margin-right:-15px;}

/* 뷰레이어 */
.view_layer {letter-spacing:0px; display:none; position:absolute; margin-top:20px; left:0; box-shadow:0 0 10px rgba(0,0,0,0.05); border-radius:10px; border:1px solid #aaa; background:#fff; padding:25px 30px; text-align:left; z-index:20; width:750px;}
.view_layer h5 {margin-bottom:10px; font-size:20px; font-weight:600; color:#1a2e51;}
.view_layer li em {color:#fff;}
.view_layer .close {position:absolute; top:20px; right:20px; width:30px; height:30px; background:url('/images/event/20191001/icon_close_layer.png') no-repeat; background-size:cover; cursor:pointer;}
.view_layer dl {display:inline-block; font-size:16px; line-height:1.8;}
.view_layer dl dt, .view_layer dl dd {display:inline-block; float:left;}
.view_layer dl dt {width:85px; }
.view_layer dl dd {width:calc(100% - 85px);}

/* #section_top */
.icon_dday {left:50%; margin-left:20%;}
#section_top {position:relative; height:958px; background:#b3dcee url('/images/event/20200301/section_top_bg.jpg') no-repeat center top; background-size:cover; text-align:center;}
#section_top .inner {height:100%; background:transparent;}
#section_top .img1 {position:absolute; bottom:0; left:18px;}
#section_top .img2 {position:absolute; bottom:100px; right:100px;}
#section_top .img3 {display:none; position:absolute; bottom:0; left:0;}
#section_top .ball1 {position:absolute; top:1%; left:2%;}
#section_top .ball2 {position:absolute; bottom:20%; left:5%;}
#section_top .ball3 {position:absolute; bottom:40%; right:20%;}
#section_top .ball4 {position:absolute; top:4%; right:-2%;}
#section_top .txt {position:absolute; top:0; right:20px;}
@media ( max-width: 1660px ) {
	#section_top .txt {right:-100px;}
	#section_top .img2 {right:18px;}
}
@media ( max-width: 1280px ) {
	#section_top .txt {right:-200px;}
}
@media ( max-width: 1180px ) {
	#section_top .txt {right:-300px;}
	#section_top .img1 {left:0;}
}
@media ( max-width: 1024px ) {
	#section_top .ball3 {right:2%;}
	#section_top .txt {right:-400px;}
	#section_top .img2 {right:-50px;}
}
@media ( max-width: 768px ) {
	#section_top .ball2,
	#section_top .ball4 {display:none;}
	#section_top .txt {right:-300px;}
	#section_top .img1, #section_top .img2 {display:none;}
	#section_top .img3 {display:block;}
}
@media ( max-width: 640px ) {
	#section_top {height:800px;}
	#section_top .ball1 img,
	#section_top .ball3 img {width:80%;}
	#section_top .txt {right:-50px;}
	#section_top .txt img {max-width:150%;}
}
@media ( max-width: 540px ) {
	#section_top {height:700px;}
	#section_top .ball1 img,
	#section_top .ball3 img {width:65%;}
}
@media ( max-width: 480px ) {
	#section_top {height:600px;}
	#section_top .ball1 img,
	#section_top .ball3 img {width:50%;}
}
@media ( max-width: 375px ) {
	
	#section_top {height:500px;}
}

/* #section0 */
#section0 {overflow:hidden;}
#section0, #section0 .inner {background-color:#b3dcee;}
#section0 .inner {padding:70px 0 60px;}
#section0 .inner .text_dvs, #section0 .inner .text_dvs h2 {color:#FFF; }
#section0 .inner .text_dvs h2 {position:relative; font-weight:600; font-size:110px; line-height:1.2; letter-spacing:10px; text-align:justify;}
#section0 .inner .text_dvs h2 .txt1 { font-size:125px; letter-spacing:12px; color:#758895;}
#section0 .inner .text_dvs h2 .txt2 { font-size:135px; letter-spacing:32px;}
#section0 .inner .text_dvs{padding:90px 50px 130px;}
#section0 .img0 {z-index:2; opacity:0; position:absolute; bottom:0; right:0;}
#section0.active .img0{opacity:1;  transition:opacity 1s ease 2.5s; -webkit-transition:opacity 1s ease 2.5s;}
#section0 .img1 { opacity:0; position:absolute; bottom:322px; right:0;}
#section0.active .img1{opacity:1;  bottom:342px;  transition:opacity 0.5s ease 3s, bottom 0.5s ease 3s; -webkit-transition:opacity 0.5s ease 3s, bottom 0.5s ease 3s;}
#section0 .line {z-index:1; left:150%; border-top:13px solid #000; width:calc(100% - 300px); position:absolute; bottom:335px; width:0; margin-left:60px;}
#section0.active .line{left:0; width:150%; transition:width 1.1s ease 1.5s, left 1.1s ease 1.5s; -webkit-transition:width 1.1s ease 1.5s left, 1.1s ease 1.5s;} 

/* #section1 */
#section1 .img_box {margin-top:50px;}
#section1 .box {display:inline-block;  }
#section1 .box:first-child{margin-right:40px;}
#section1 .box a{display:inline-block;  width:450px; box-shadow:0 0 10px rgba(0,0,0,0.01);  border-radius:20px; background:#fff; padding:60px;}
#section1 .box h4 {font-size:40px; font-weight:400; color:#333;}
#section1 .box .before {position:relative; font-size:35px; font-weight:400; color:#afafaf;}
#section1 .box .before:before {display:block; content:''; position:absolute; top:50%; left:50%; margin-left:-70px; width:140px; height:1px; background:#afafaf;}
#section1 .box .price {font-size:40px; font-weight:400; color:#333;line-height:1.2; }
#section1 .box .price strong {font-size:55px;}

/* #section2 */
#section2 .inner .text_dvs {padding:0 0 200px;}
#section2 .back {z-index:3; position:absolute; background:url('/images/event/20200301/section2_img.jpg') no-repeat; top:50%; left:50%; width:494px; height:175px;}

/* #section3 */
#section3 .con_dvs .list {width:1200px;}
#section3 .con_dvs .list > li img{ box-shadow:20px 40px 20px rgba(0,0,0,0.1);}
#section3 .con_dvs .list > li:nth-child(2n) img{margin-top:80px;}
#section3 .con_dvs .list > li{margin-right:20px; }
#section3 .con_dvs .more {margin-top:110px;}
#section3 .con_dvs .more a {display:inline-block; border:2px solid #666668; border-radius:5px; padding:10px 60px; font-size:18px; color:#666668; }

/* #section4 */
#section4 .back {position:absolute; top:100px; right:0; width:312px; height:310px; background:url('/images/event/20200301/section4_img.png') no-repeat;}

/* #section8 */
#section8 .inner {padding-bottom:90px;}

/* #section9 */
#section9 {z-index:3; position:relative; height:722px; overflow:hidden;}
#section9 .back {position:absolute; background:url('/images/event/20200101/section9_bg.jpg') no-repeat; top:0; left:calc(50% - 960px); width:1920px; height:722px;}
#section9 .inner {background: transparent; color:#FFF;  padding:100px 40px 30px 40px;}
#section9 .inner .text_dvs {padding:40px 0;}
#section9 .inner .text_dvs h3 {color:#FFF; letter-spacing:-3px; font-size:70px;}
#section9 .inner .startBtn {display:inline-block; width:500px; margin-bottom:60px; box-shadow:0 10px 10px rgba(0,0,0,0.2); border-radius:10px; padding:30px; font-size:25px; font-weight:500;}
#section9 .inner .startBtn {background: #ffc468; /* Old browsers */
background: -moz-linear-gradient(left,  #ffc468 1%, #ff466b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #ffc468 1%,#ff466b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #ffc468 1%,#ff466b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc468', endColorstr='#ff466b',GradientType=1 ); /* IE6-9 */}
#section9 .inner > p {color:#999897; font-size:15px;}

/* 모바일 반응형 */
@media ( max-width: 1668px ) {
	#section0 .img0, #section0 .img1 {right:0;}
	#section3 .con_dvs .list {width:100%;}
	#section3 .con_dvs .list > li {width:22.5%;}
}
@media ( max-width: 1024px ) {
	img {max-width:100%;}
	.section .inner {width:100%; padding:85px 20px 50px 180px;}
	#section3 .con_dvs .list > li{width:45%; margin-right:0;}
	#section5 .con_dvs .list > li {width:28%; margin-right:25px;}
	#section0 .img0, #section0 .img1 {right:-5%;}
	#section1 .box a{width:400px;}
	#section1 .box:first-child {margin-right:0; margin-bottom:20px;}
}
@media ( max-width: 768px ) {
	.view_layer {left:0; right:0; margin-left:0 !important; width:auto;}
	.section .inner .text_dvs h3 {font-size:45px;}
	.section .con_dvs .list > li {margin-right:10px;}
	.section .con_dvs .list .txt {font-size:18px;}
	.section .inner {width:100%; padding:75px 20px 40px 180px;}
	.section .inner .view .helper {margin-bottom:-3px;}
	#section1 .box { margin-right: 20px;}
	#section1 .box a{width: 260px; padding:50px 40px;}
	#section1 .box .price strong {font-size:38px;}
	#section1 .box .price {font-size:30px}
	#section2 .inner{overflow:hidden;}
	#section3 .con_dvs .list > li:nth-child(2n) img {margin-top: 20px;}
	#section3 .con_dvs .list > li {margin-right:20px;}
	#section0 .inner .text_dvs h2 {font-size:90px; letter-spacing:10px; line-height:1.3;}
	#section0 .inner .text_dvs h2 .txt1 { font-size:105px; letter-spacing:12px;}
	#section0 .inner .text_dvs h2 .txt2 { font-size:115px; letter-spacing:32px;}
	#section0 .img0 {width:70%;}
	#section0 .img1 {height:45%; bottom: 400px;}
	#section0.active .img1 {bottom: 418px; }
	#section0.active .line { bottom: 418px;}
	#section0 .inner {padding-bottom:150px; padding-top:100px;}	
}
@media ( max-width: 600px ) {
	#section9 .inner .startBtn {width:100%;}
}
@media ( max-width: 480px ) {
	.section .inner .view {position:static;}
	#section2 .inner {overflow:visible;}
	#section2 .back {left: auto;width: calc(100% - 40px);  background-size: 100%;}
	.view_layer {padding:20px;}
	.view_layer li em {display:none;}
	.view_layer li em + span {padding-left:10px;}
	#wrap {background:#a3ccdf;}
	#wrap .arrow {display:none;}
	.step {position:relative; left:0; }
	.section {text-align:center;}
	.section .inner {padding:70px 20px 0px; text-align:center;}
	.section .inner .text_dvs h3 {font-size: 40px;}
	.section .con_dvs .list > li, 	#section5 .con_dvs .list > li{width:45%; padding:10px 5px; margin-right:0;}
	.section .con_dvs .list .txt {font-size: 15px;}
	.section .con_dvs { padding: 30px 0 20px;}	
	#section1 .box {margin-right: 0; margin-bottom:20px}
	#section3 .con_dvs .list > li {width: 49%; margin-right: 0; padding: 0 10px;}	
	#section9 .inner .text_dvs h3 {font-size:40px;}
	#section9 .inner {padding: 100px 20px 30px 20px}   
	#section0 .inner {padding:50px 0 90px;}
	#section0 .inner .text_dvs {text-align:center;  padding: 30px 30px 50px;}
	#section0 .inner .text_dvs h2 {font-size:60px; letter-spacing:5px; line-height:1.3;}
	#section0 .inner .text_dvs h2 .txt1 { font-size:67px; letter-spacing:7px; }
	#section0 .inner .text_dvs h2 .txt2 { font-size:77px; letter-spacing:18px; }
	#section0 .img1 {height:45%; bottom: 233px; }
	#section0.active .img1{bottom: 243px; }
	#section0.active .line { bottom: 230px; border-top:10px solid; margin-left:30px;}
	#section0 .img0 {width:80%; right:-12%}
	#section0 .img1 {right:-12%}
}
@media ( max-width: 375px ) {
	.section .inner .text_dvs h3,
	#section9 .inner .text_dvs h3 {font-size: 30px;}
}