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

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2020-06-15
Modify Date : 2020-06-16
File : /event/2020/google
*******************************************/

body {min-width:360px;}
img {max-width:100%;}
#event_header {position:relative; background:#fff; z-index:5;}
#wrap {position:relative; overflow:hidden; opacity:0;}
.top_btn {display:none !important; background:#4385F5;}
.link {display:inline-block; border-bottom:1px solid #1498dc; color:#1498dc;}
.show_mot {position:relative; opacity:0; top:20px;}
.section {position:relative; padding:100px 0 120px; text-align:center; overflow:hidden;}
.section > .inner, .scrollex > .inner {opacity:0; transition:opacity 0.5s ease;}
.section.active > .inner, .scrollex.active > .inner {opacity:1;}
.section .inner {position:relative; width:1180px; margin:auto; text-align:center;}
.section .helper {display:inline-block; vertical-align:middle; width:22px; height:22px; margin:0 0 5px 5px; background:url('/images/event/20200413/sec_icon.png') no-repeat; background-size:cover; cursor:pointer;}
.section h2, .section h3, .section h4, .section strong, .section p {font-family:"Noto Sans KR", sans-serif;}
.section h2 {font-size:68px; font-weight:300; color:#333; letter-spacing:-5px; line-height:1.2;}
.section h2 strong {font-weight:600;}
.section h2 + p {margin:10px 0 50px; font-size:30px; font-weight:100; color:#000; letter-spacing:-2px; line-height:1.2;}
.section h2 + p em { font-weight:inherit; letter-spacing:-1px;}
.section h3 {margin-bottom:50px; font-size:54px; font-weight:300; color:#363636; letter-spacing:-5px; line-height:1.2;}
.section h3 strong {font-weight:500;}
.section h4 {font-size:32px; font-weight:300; letter-spacing:-2px;}
.section p {letter-spacing:-1px; line-height:1.4;}
.section h3 + p {margin:-30px 0 50px; font-size:22px; font-weight:300; color:#91979f;}

/* 뷰레이어 */
.view_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:5;}
.view_layer {letter-spacing:0px; display:none; position:fixed; margin-top:20px; top:50%; left:50%; margin:-110px 0 0 -340px; width:680px; 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:5;}
.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:20px; height:20px; background:url('/images/event/20191001/icon_close_layer.png') no-repeat; background-size:cover; cursor:pointer;}
.view_layer dl, .view_layer ul {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);}
#layer1 {margin-top:-270px;}
#layer2 {margin-top:-178px;}

/* #section_top */
#section_top {background:#fff url('/images/event/20200617/sec_bg.jpg') no-repeat center bottom; background-size:cover; padding-bottom:80px;}
#section_top .circle1 {position:absolute; top:25%; left:6%; width:50px; height:50px; border-radius:50%; background:#4285f4;}
#section_top .circle2 {position:absolute; top:20%; left:20%; width:40px; height:40px; border-radius:50%; background:#ea4335;}
#section_top .circle3 {position:absolute; top:47%; left:14%; width:200px; height:200px; border-radius:50%; background:#34a853;}
#section_top .circle4 {position:absolute; top:62%; left:58%; width:340px; height:340px; border-radius:50%; background:#fcd050;}
#section_top .circle5 {position:absolute; top:75%; left:84%; width:70px; height:70px; border-radius:50%; background:#4285f4;}
#section_top .circle6 {position:absolute; top:55%; left:93%; width:50px; height:50px; border-radius:50%; background:#ea4335;}
#section_top .img1 {margin-top:-20px; text-align:center;}
#section_top .img2 {/*position:absolute; margin-top:-50px; left:50%; margin-left:-224px;*/}

/* #section0 */
#section0 {background:#eff6ff;}
#section0 .img1 {position:absolute;}
#section0 .img2 {position:absolute; margin:90px 0 0 220px;}
#section0 .img3 {position:relative; margin:0 -40px -40px 390px; padding-top:220px;}
#section0 .img1 .btn {bottom:40px; left:40px;}
#section0 .img2 .btn {bottom:40px; left:40px;}
#section0 .img3 .btn {bottom:70px; right:80px;}
#section0 .btn {position:absolute; border:1px solid #c0c0c0; background:#fff; padding:10px 25px 12px 30px; text-align:center; font-size:15px; font-weight:400; color:#666; transition:all 0.5s ease;}
#section0 .btn:hover {border-color:#000; background:rgba(255,255,255,0.8); color:#000;}
#section0 .inner {position:relative; box-shadow:0 10px 50px rgba(206,218,235,0.5); border-radius:10px; background:#fff;}
#section0 .box {padding:30px;}
@media only screen and (max-width:500px) {
	#section0 .box {padding:20px;}
}

/* #section1 */
#section1 {background:#dae8fd url('/images/event/20200617/sec1_bg.jpg') no-repeat center bottom; background-size:cover;}
#section1 .img1 {position:absolute; left:50%; margin-left:-421px; margin-top:-80px;}
#section1 .img2 {margin:80px 0 0 -350px;}
#section1 .arr1 {position:absolute; right:30px; margin-top:120px;}
#section1 .arr2 {position:absolute; right:30px; margin-top:120px;}
#section1 .arr1 img, 
#section1 .arr2 img {/*animation:ani-arr 5s linear infinite;*/}
@keyframes ani-arr {
	100% {transform:rotate(360deg);}
}

/* #section2 */
#section2 {background:#6997e4;}
#section2 h3 {color:#fff;}
#section2 .inner {position:relative; border-radius:10px; background:#f8f9f9;}
#section2 .inner:before {display:block; content:''; position:absolute; left:50%; top:60px; bottom:60px; width:1px; background:#dadbdb;}
#section2 .box {float:left; width:50%; padding:70px 0;}
#section2 .box h4 {font-size:32px; font-weight:300; line-height:1.4;}
#section2 .box h4 strong {font-weight:500;}
#section2 .box .img {padding:30px 0 20px;}
#section2 .box p {font-size:24px; color:#4285f4;}

/* #section3 */
#section3 {background:url('/images/event/20200617/sec3_bg.jpg') no-repeat center bottom; background-size:cover;}
#section3 .box {position:relative; float:left; width:50%; text-align:left;}
#section3 .box2 {padding-left:60px;}
#section3 h3 {font-weight:200;}
#section3 h3 strong {font-weight:500;}
#section3 .btn {display:inline-block; border-radius:2px; border:1px solid #a0a0a0; padding:20px 50px; text-align:center; font-size:24px; font-weight:300; color:#333; transition:all 0.3s ease;}
#section3 .btn:hover {border-color:#4285f4; background:rgba(255,255,255,0.95); font-weight:400; color:#4285f4;}
#section3 .desc {padding-top:20px; font-size:16px; font-weight:300; color:#888;}
@media only screen and (max-width:480px) {
	#section3 .desc {font-size:14px;}
}

/* #section4 */
#section4 {background:#2f3243; padding:0;}
#section4 > div {display:table;}
#section4 > div > div {display:table-cell; vertical-align:middle;}
#section4 > div > div.fl {padding:70px 0; text-align:left;}
#section4 > div > div.fr {text-align:right;}
#section4 .tit {margin:0; font-size:34px; font-weight:100; color:#fff; letter-spacing:-3px; line-height:1.2;}
#section4 .tit em {font-weight:inherit; color:#4285f4;}
#section4 .arr1 {position:absolute; margin-top:-25px; bottom:-25px; right:230px;}
#section4 .arr2 {position:absolute; margin-top:-25px; bottom:-25px; right:0;}

/* section5 */
#section5 {background:#3a3d4e; padding:30px 20px 0; text-align:center; font-size:13px; color:#86899c; line-height:1.8;}
#event_footer {border-color:transparent; background:#3a3d4e; padding:5px 20px 30px; font-size:13px; color:#86899c; line-height:1.8;}

@media only screen and (max-width:1180px) {	
	.section {padding:80px 20px;}
	#section4 {padding:0 20px;}
	.section .inner {width:100%;}
	.section h2 {font-size:60px;}
	.section h2 + p {font-size:24px;}
	.section h3 {font-size:50px;}
	.section h3 + p {font-size:20px;}
	/*#section0 .img3 {margin-left:0;}*/
}
@media only screen and (max-width:768px) {
	.section {padding:60px 20px !important;}
	#section4 {padding:0 20px !important;}
	#section5 {padding:30px 0 0 !important;}
	.view_layer {width:auto; left:10px; right:10px; margin-left:0;}
	.section h2 {font-size:50px; letter-spacing:-3px;}
	.section h3 {font-size:40px; letter-spacing:-2px;}
	.section h3 + p {margin-bottom:30px;}

	#section_top .circle1 {top:25%; left:-2%; width:30px; height:30px;}
	#section_top .circle2 {top:10%; left:10%; width:20px; height:20px;}
	#section_top .circle3 {top:47%; left:0%; width:100px; height:100px;}
	#section_top .circle4 {top:62%; left:80%; width:150px; height:150px;}
	#section_top .circle5 {top:75%; left:90%; width:40px; height:40px;}
	#section_top .circle6 {top:55%; left:93%; width:30px; height:30px;}
	
	/*#section_top .img1 {margin-top:50px;}	
	#section_top .img2 {margin-top:-20px;}*/
	#section_top .img2 img {max-width:60%;}

	#section0 .img1 {position:relative;}
	#section0 .img2 {position:relative; margin:40px 0 0 0;}
	#section0 .img1 img, #section0 .img2 img {max-width:92%;}
	#section0 .img3 {position:relative; margin:0; padding-top:0;}
	#section0 .img1 .btn {bottom:50px; left:50%;}
	#section0 .img2 .btn {bottom:50px; left:50%;}
	#section0 .img3 .btn {bottom:80px; left:50%; right:auto;}
	#section0 .btn {min-width:210px; margin-left:-105px;}

	#section1 .img1 {position:relative; left:0; margin:-45px 0 0 0;}
	#section1 .img2 {margin:-20px 0 -20px 0;}
	#section1 .img1 img,
	#section1 .img2 img {max-width:114%; margin-left:-7%;}
	
	#section1 .arr1,
	#section1 .arr2 {margin-top:50%; right:20%;}
	#section1 .arr1 img,
	#section1 .arr2 img {max-width:60%;}
	
	#section2 .inner:before {top:50%; bottom:auto; left:30px; right:30px; width:auto; height:1px;}
	#section2 .box {width:100%; padding:40px 30px;}
	/*#section2 .box .img img {max-width:80%;}*/
	#section2 .box h4 {font-size:30px;}
	#section2 .box p {font-size:20px;}
	
	#section3 .box {width:100%; text-align:center;}
	#section3 .box2 {margin-top:50px; padding-left:0;}	
	#section3 .btn {margin-top:0; padding:10px 50px; font-size:18px;}
	
	#section4 > div > div.fl {width:100%; text-align:center;}
	#section4 > div > div.fr {display:none;}
}

@media only screen and (max-width:480px) {
	.section h2 {font-size:40px;}
	.section h2 + p {font-size:20px;}
	.section h3 {font-size:30px;}
	.section h3 + p {font-size:16px;}
	
	#section_top .img1 img {max-width:110%; margin-left:-5%;}
	#section0 .img2 {margin-top:20px;}
	#section0 .img1 .btn {bottom:20px;}
	#section0 .img2 .btn {bottom:20px;}
	#section0 .img3 .btn {bottom:30px;}
	#section1 .arr1,
	#section1 .arr2 {right:0;}
	#section1 .arr1 img,
	#section1 .arr2 img {max-width:40%;}
	#section2 .box h4 {font-size:26px;}
	#section2 .box p {font-size:18px;}
}

@media only screen and (max-width:375px) {
	.view_layer h5 {font-size:16px; font-weight:600; color:#1a2e51;}
	.view_layer dl, .view_layer ul {font-size:14px; line-height:1.4;}
	#layer1 {margin-top:-310px;}
	#layer2 {margin-top:-200px;}

	/*#section_top .img2 {margin-top:-20px; margin-left:-50%;}
	#section_top .img2 img {max-width:50%;}*/
	#section0 p br {display:none;}
	#section4 .tit {font-size:30px;}
}