@charset "utf-8";

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2019-12-19
Modify Date : 2019-12-23
File : /event/2019/cloud
*******************************************/

#event_header {position:relative; background:#fff; z-index:5;}
#wrap{background:url('/images/event/20191223/section_bg.jpg') no-repeat; background-position:center top;}

.show_mot {opacity:0; top:20px; position:relative;}
.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; padding:80px 0; overflow:hidden;}
.section .inner {position:relative; width:1180px; margin:auto; text-align:left; }
.section .inner .view {margin-top:0px; position:relative; z-index:3;}
.section .inner .view .img {display:inline-block; vertical-align:middle; width:133px; height:20px; background:url('/images/event/20191201/sec1_img03.png') no-repeat; cursor:pointer; text-indent:-9999px; cursor:pointer;}
.section .inner .view .img:hover {background:url('/images/event/20191201/sec1_img03_over.png') no-repeat;}
.section .inner .view .txt { font-size:16px; color:#707c8e; border-bottom:1px solid #707c8e;}
.section .inner .text_dvs h2 {position:relative; font-size:42px; line-height:1.2; letter-spacing:-2.5px; font-weight:300;}
.section .inner .text_dvs h2 > p {position:relative; font-size:58px; line-height:1.2; font-weight:600;}
.section .inner .text_dvs > p {font-size:18px; margin-top:50px; letter-spacing:-0.5px;}
.section .inner .text_dvs > em {margin-bottom:30px; display:inline-block; font-size:20px; font-family:'Roboto'; letter-spacing:1px; }

/* 뷰레이어 */
.view_layer {display:none; position:absolute; top:30px; 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:10;}
.view_layer h5 {margin-bottom:10px; font-size:20px; font-weight:600; color:#1a2e51;}
.view_layer li {padding-left:10px; text-indent:-10px; font-size:16px; line-height:1.8;}
.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;}

/* #section0 */
#section0 {height:694px;}
#section0 .inner .text_dvs, #section0 .inner .text_dvs h2 {color:#FFF;}
#section0 .inner .text_dvs{padding:80px 0 150px;}
#section0 .back {position:absolute; top:0; width:100%; height:665px; background:url('/images/event/20191223/section0_img.png') no-repeat; background-position:100% 50px; right:6%; }
 
/* #section1 */
#section1 .inner .text_dvs{padding:200px 0px 100px; }
#section1 .inner {background:url('/images/event/20191223/section1_img.png') no-repeat; background-position:left top;}

/* #section2 */
#section2 .inner .text_dvs{padding:180px 0px 200px; }
#section2 .inner {background:url('/images/event/20191223/section2_img.png') no-repeat; background-position:100% -40px;}

/* #section3 */
#section3 .inner .text_dvs{padding:110px 0px 200px; }
#section3 .back {position:absolute; top:0; left:calc(50% - 960px); width:1920px; height:662px; background:url('/images/event/20191223/section3_img.png') no-repeat; background-position:center top;}

/* #section4 */
#section4 {padding-top:0; margin-top:-50px;}
#section4 .inner .text_dvs{padding:250px 0px 200px; }
#section4 .inner {background:url('/images/event/20191223/section4_img.png') no-repeat; background-position:100% 0;}

/* #section5 */
#section5 {height:569px;}
#section5 .text_dvs, #section5 .text_dvs h2 {color:#FFF; font-size:48px;}
#section5 .inner .text_dvs{}
#section5 .back {position:absolute; top:0; left:calc(50% - 960px); width:1920px; height:569px; background:url('/images/event/20191223/section5_img.jpg') no-repeat; background-position:center top;}

/* #section6 */
#section6 {background:#e2e5eb;}
#section6 .img_box {margin-top:50px;}
#section6 .box {display:inline-block; width:450px; margin:40px 40px; box-shadow:0 0 10px rgba(0,0,0,0.01);  border-radius:20px; background:#fff; padding:50px;}
#section6 .box h4 {font-size:40px; font-weight:400; color:#333;}
#section6 .box .before {position:relative; font-size:25px; font-weight:400; color:#afafaf;}
#section6 .box .before:before {display:block; content:''; position:absolute; top:50%; left:50%; margin-left:-70px; width:140px; height:1px; background:#afafaf;}
#section6 .box .price {font-size:34px; font-weight:300; color:#333;line-height:1.2; }
#section6 .box .price strong {font-size:45px;}
#section6 .box .btn {display:inline-block; width:80%; margin-top:40px; box-shadow:0 5px 5px rgba(0,0,0,0.1); border-radius:50px; border:1px solid transparent; 
background:rgb(107,137,248); /* Old browsers */
background:-moz-linear-gradient(90deg, rgba(107,137,248,1) 0%, rgba(142,217,236,1) 100%); /* FF3.6-15 */
background:-webkit-linear-gradient(90deg, rgba(107,137,248,1) 0%, rgba(142,217,236,1) 100%); /* Chrome10-25,Safari5.1-6 */
background:linear-gradient(90deg, rgba(107,137,248,1) 0%, rgba(142,217,236,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b89f8', endColorstr='#8ed9ec',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
padding:13px 0 15px; text-align:center; font-size:18px; color:#fff; transition:all ease 0.5s;}
#section6 .box .txt {font-size:18px;}
#section6 .box .btn:hover {border:1px solid #333; background:#fff; color:#333;}
#section6 .view_layer {left:50%; margin-left:-360px; width:700px;}
#section6 {overflow:visible;}
/* #section7 */
#section7 .call  {display:table;  margin:30px auto;}
#section7 .call > li {display:table-cell; vertical-align:middle; }
#section7 .call .tit{ font-size:28px; font-weight:300; color:#6b6b6b; padding-right:10px; } 
#section7 .call .num {font-size:40px; color:#1d7abc;}
#section7 .btn a{display:inline-block; padding:10px 30px; border:1px solid;font-size:18px;}
#section7 .logo{display:table; margin:70px auto 30px;}
#section7 .logo > li{display:table-cell; vertical-align:middle; padding:0 40px;}
#section7 .logo + p {text-align:center; font-size:16px; color:#666;}
#section7 .section_faq {border-top:0; padding-bottom:0;}

/* 모바일 반응형 */
@media (max-width:1180px) {
	img {max-width:100%;}
	.section .inner {width:100%; padding:0 20px;}
	#section0 .back {right:-15%;}
}

@media (max-width:919px) {
	.section{padding:0 0;}
	.section .inner .view {margin-top:20px;}

	#section0 .back { top:-10%; right:-10%; background-size:80%;}
	#section0 .inner .text_dvs{padding:280px 0 150px;}	
	#section1 .inner {background-position:-100px top; }
	
	#section2 .inner .text_dvs{padding:160px 0px 260px; }
	#section2 .inner {background-position:150% top; }

	#section3 .inner .text_dvs{padding:170px 0px 160px; }
	
	#section4 {margin-top:50px;}
	#section4 .inner .text_dvs{padding:30px 0px 430px; }

	#section5, #section6, #section7{padding:30px 0;}

	#section6 .box {margin:10px;}	
}

@media (max-width:640px) {
	.view_layer {left:0 !important; right:0; margin-left:0 !important; width:auto !important;}
}

@media (max-width:480px) {
	.view_layer {padding:20px;}
	.view_layer li em {display:none;}
	.view_layer li em + span {padding-left:10px;}
	#section0 .back { top:10px; right:0; background-size:100%;}

	.section .inner {background-size:80% !important; background-position:center top !important;}
	.section .inner .text_dvs > p br {display:none;}

	.section .inner .text_dvs {text-align:center !important;}
	.section .inner .text_dvs h2 {font-size:34px; line-height:1.2; letter-spacing:-2.5px; text-align:center !important;}
	.section .inner .text_dvs h2 > p {font-size:40px; line-height:1.2; }
	.section .inner .text_dvs > p {font-size:16px; margin-top:20px; letter-spacing:-0.5px; text-align:center !important;}
	.section .inner .text_dvs > em {font-size:20px; }

	#section6 .box {width:calc(100% - 20px);}
	#section6 .box .price strong {font-size:37px;}
	#section0 .inner .text_dvs {padding: 390px 0 0px;}
	#section1 .inner .text_dvs {padding: 280px 0px 10px;}
	#section2 .inner .text_dvs {padding: 420px 0px 70px;}
	#section3 .inner .text_dvs {padding: 370px 0px 0px;}
	#section4 .inner .text_dvs {padding: 370px 0px 50px;}
	#section3 .back {left: calc(50% - 800px); background-size: 50%;}
	#section7 .logo > li {padding:0 5px;}

	#section5 .text_dvs, #section5 .text_dvs h2 {font-size:33px;}
	#section5 .back {background-size: 60%;}
	#section5 {height: 329px;}



}