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

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2022-08-29
Modify Date : 2022-08-31
File : /event/2022/clickn
*******************************************/

/* 공통 */
body, div, dl, dt, li, ul, ol, li, h1, h2, h1, h2, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, button {font-family:"Noto Sans KR", sans-serif; /*transition:all 0.3s ease;*/}
body {min-width:320px; letter-spacing:-1px;}
img {max-width:100%;}
#header {position:relative; background:#fff; z-index:100;}
#footer {border-color:#d0d0d0; background:#fff;}
#wrap {position:relative; overflow:hidden; opacity:0;}
/*.top_btn {background:#333;}*/
/*.show_mot {position:relative; opacity:0; top:100px;}*/
.show_mot {transform:translateY(100px); opacity:0; transition:transform 1s cubic-bezier(0.15, 0.85, 0.45, 1), opacity 1s cubic-bezier(0.32, 0.94, 0.6, 1);}
.show_mot.on {transform:translateY(0); opacity:1;}
.section {position:relative; overflow:hidden; transition:all 0.3s ease;}
.section .inner {position:relative; width:auto; max-width:1180px; margin:auto;}
.section > .inner {opacity:0;}
.section.active > .inner {opacity:1;}

/* #section0 */
#section0 {background:url('/images/event/20220829/sec0_bg.jpg') repeat center top; padding:110px 0 0; text-align:center;}
#section0 .txt {margin-bottom:10px; font-size:24px; font-weight:300; color:#fff; letter-spacing:-0.5px; transition-delay:0.2s;}
#section0 .tit {margin-bottom:70px; font-size:60px; font-weight:300; color:#fff; letter-spacing:-4px; line-height:1.3; transition-delay:0.4s;}
#section0 .img {position:relative;}
#section0 .img1 {transition-delay:0.6s;}
#section0 .img2 {position:absolute; left:15%; bottom:240px; text-align:left; transition-delay:0.8s;}
#section0 .img3 {position:absolute; right:21%; bottom:180px; text-align:right; transition-delay:1.0s;}
@keyframes trxShwAnm { 0% {transform:translateY(100px); opacity:0;} 100% {transform:translateY(0); opacity:1;} }

/* #secTab */
#secTab {position:relative; background:#434551; z-index:99; opacity:0.95; white-space:nowrap; transition:all 0.5s ease;}
#secTab.flying {position:fixed; top:-58px; left:0; right:0; width:100%; transform:translateY(116px);}
#secTab span {position:relative; display:inline-block; padding:17px 20px 17px; font-size:16px; font-weight:300; color:#aaa; cursor:pointer;}
#secTab span strong {font-weight:500;}
#secTab span:first-child {padding-left:0;}
#secTab span:before {display:block; content:''; position:absolute; left:0; top:50%; margin-top:-6px; width:1px; height:15px; background:#aaa;}
#secTab span:first-child:before {display:none;}
#secTab span.current {color:#fff;}
#secTab span.current:after {display:block; content:''; position:absolute; left:20px; right:20px; bottom:16px; height:2px; background:#fff;}
#secTab span:first-child:after {left:0;}
#secTab span:nth-child(1).current {color:#fdc580;}
#secTab span:nth-child(1).current:after {background:#fdc580;}
#secTab span:nth-child(2).current {color:#8fd1fd;}
#secTab span:nth-child(2).current:after {background:#8fd1fd;}

/* #section1, #section2 */
.section {background:#fff;}
.section .hg {vertical-align:middle; padding:130px 0;}
.section .hg .inner .img {display:inline-block; vertical-align:middle; width:50%;}
.section .hg .inner hgroup {display:inline-block; vertical-align:middle; margin-bottom:0;}
.section .hg .inner hgroup > span {display:block; margin-bottom:10px; font-size:32px; font-weight:300; color:#333; letter-spacing:-1px; line-height:1.2;}
.section .hg .inner hgroup > h1 {margin-bottom:30px; font-size:60px; font-weight:600; color:#333; letter-spacing:-4px; line-height:1.2;}
.section .hg .inner hgroup > h1 > em {font-weight:inherit; color:#3395d6;}
#section1 .hg .inner hgroup > h1 > em,
#section1.section .bg .inner h2 > em {color:#f58800;}
.section .hg .inner hgroup > p {font-size:20px; font-weight:300; color:#333; letter-spacing:-1px; line-height:1.5;}
.section .bg {background:#f8f8f8; padding:80px 0 40px;}
.section .bg .inner + .inner {margin-top:20px; border-top:1px solid #e7e7e7; padding-top:60px;}
.section .bg .inner h2 {display:inline-block; vertical-align:middle; width:25%; font-size:28px; font-weight:600; color:#333; letter-spacing:-2px; line-height:1.4;}
.section .bg .inner h2 > em {font-weight:inherit; color:#3395d6;}
.section .bg .inner .icon {display:inline-block; vertical-align:top; width:calc(75% - 4px);}
.section .bg .inner dl {display:inline-block; vertical-align:top; width:33%; margin-bottom:40px;} 
.section .bg .inner dt {margin:8px 0 5px; font-size:20px; color:#333; line-height:1.8;}
.section .bg .inner dd {font-size:16px; color:#777; line-height:1.4;}
.section .bg .inner .anim {position:relative; display:inline-block; vertical-align:top; width:calc(75% - 4px); margin:10px 0 0 0;}
.section .bg .inner .anim > span { transition:all 0.1s ease;}
.section .bg .inner .anim img {margin-top:-30px;}
.section .bg .inner .anim .anim_img1 {display:block; /*position:absolute; top:0; left:-26px; right:0;*/ margin-left:-30px; text-align:left;}
.section .bg .inner .anim .anim_img2 {display:block; position:absolute; top:40px; left:0; right:0; text-align:right;}
.section .bg .inner .anim .anim_img3 {display:block; /*position:absolute; top:0; left:-26px; right:0;*/ margin-top:30px; margin-left:-30px; text-align:left;}
.section .bg .inner .anim .anim_img4 {display:block; /*position:absolute; top:0; left:0; right:-44px;*/ margin-right:-50px; text-align:right;}
.section .bg .inner .anim .anim2_img1 {display:block; /*position:absolute; top:0; left:-26px; right:0;*/ margin-left:-30px; text-align:left;}
.section .bg .inner .anim .anim2_img2 {display:block; /*position:absolute; top:0; left:0; right:-44px;*/ margin-right:-50px; text-align:right;}
.section .bg .inner .anim .anim2_img3 {display:block; /*position:absolute; top:0; left:-26px; right:0;*/ margin-left:-30px; text-align:left;}
.section .bg .inner .anim .anim2_img4 {display:block; /*position:absolute; top:0; left:-26px; right:0;*/ margin-left:-30px; text-align:left;}
/*#section1 .bg .inner .anim {height:400px;}
#section2 .bg .inner .anim {height:500px;}*/

/* #section3, #section4 */
.section hgroup {margin-bottom:50px;}
.section hgroup > h1 {margin-bottom:30px; font-size:50px; font-weight:600; color:#333; letter-spacing:-4px; line-height:1.2;}
.section hgroup > h1 > em {font-weight:inherit; color:#3395d6;}
.section hgroup > p {font-size:20px; font-weight:400; color:#333; letter-spacing:-1px; line-height:1.5;}
.section hgroup > h1 > em.clickn {color:#f58800;}
.section hgroup > h1 > em.firstamll {color:#3395d6;}

/* #section3 */
#section3 {background:#fff; padding:110px 0 120px; text-align:center;}
#section3 hgroup > h1 br {display:none;}
#section3 .tabs {width:320px; margin:0 auto 20px;}
#section3 .tabs li {display:inline-block; width:calc(50% - 8px); border-radius:50px; background:#e2e7ea; padding:10px; font-size:20px; font-weight:600; color:#939a9e; cursor:pointer;}
#section3 .tabs li.active {background:#3395d6; color:#fff;}
/*#section3 .tabs li:nth-child(1).active {background:#f58800; color:#fff;}
#section3 .tabs li:nth-child(2).active {background:#3395d6; color:#fff;}*/
#section3 .tabs li + li {margin-left:10px;}
#section3 .tabs_wrap {position:relative; height:570px;}
#section3 .tabs_wrap .tabs_box {position:absolute; left:0; right:0; top:0;}
#section3 .swiper-container {padding-top:30px;}
#section3 .swiper-container .swiper-slide a {display:inline-block; position:relative; border:1px solid #e0e0e0; overflow:hidden;}
#section3 .swiper-container .swiper-slide a span {display:none;}
#section3 .swiper-container .swiper-slide a:hover span {display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5) url('/images/event/20220829/sec3_icon.png') no-repeat right 30px bottom 30px; text-align:right;}
#section3 .swiper-container .swiper-slide a:hover span em {position:absolute; right:70px; bottom:30px; font-size:20px; font-weight:600; color:#fff;}
#section3 .swiper-container .swiper-slide a:hover img {filter:blur(5px); -webkit-filter:blur(5px);}
#section3 .swiper-container .swiper-wrapper {/*transition-timing-function: linear !important;*/}
#section3 .swiper1 .swiper-wrapper {animation:left_flow 50s linear infinite;}
#section3 .swiper1:hover .swiper-wrapper {animation-play-state:paused;}
#section3 .swiper2 .swiper-wrapper {animation:right_flow 50s linear infinite;}
#section3 .swiper2:hover .swiper-wrapper {animation-play-state:paused;}
@keyframes left_flow {from {transform:translateX(0)} to {transform:translateX(-2610px)}}
@keyframes right_flow {from {transform:translateX(-2610px)} to {transform:translateX(0)}}

/* #section4 */
#section4 {background:url('/images/event/20220829/sec4_bg.jpg') repeat center top; padding:110px 0 120px; text-align:center;}
#section4 hgroup > h1 {color:#fff;}
#section4 hgroup > h1 br {display:none;}
#section4 a.link {display:inline-block; vertical-align:middle; width:calc(50% - 14px); background:rgba(255,255,255,0.85); padding:20px 25px 20px 30px; text-align:left; transition:all 0.5s ease;}
#section4 a.link:hover {box-shadow:0 0 20px rgba(2,91,163,0.9);}
#section4 a.link + a.link {margin-left:20px;}
#section4 a.link .img {display:inline-block; vertical-align:middle; width:50%;}
#section4 a.link .arrow {display:inline-block; vertical-align:middle; width:49%; background:url('/images/event/20220829/sec4_icon.png') no-repeat right center; padding-right:60px; text-align:right; line-height:normal;}
#section4 a.link .arrow span {display:block; font-size:28px; font-weight:300;}
#section4 a.link .arrow strong {display:block; font-size:23px;}
#section4 a.link .arrow strong > em {font-weight:inherit; color:#2383d1;}
/*#section4 a.link .arrow.clickn strong > em {font-weight:inherit; color:#f58800;}
#section4 a.link .arrow.firstmall strong > em {font-weight:inherit; color:#2383d1;}*/

/* 반응형 처리 */
@media only screen and (max-width:1180px) {	
	.section .inner {padding:0 20px;}
	#section4 a.link .img {display:block; width:100%; text-align:center;}
	#section4 a.link .img img {max-width:50%;}
	#section4 a.link .arrow {display:block; width:100%; padding-right:0; text-align:center;}
	/*#section1 .bg .inner .anim {height:250px;}
	#section2 .bg .inner .anim {height:400px;}*/
	#section3 .tabs_wrap {height:400px;}
}
@media only screen and (max-width:1024px) {
	.section .bg .inner dl {width:49%;}	
	.section .hg .inner .img {display:block; width:100%; text-align:center; padding-right:0;}
	.section .hg .inner hgroup {display:block; width:100%; text-align:center;}
	#section2 .hg .inner hgroup > span {margin-top:40px;}
	/*#section1 .bg .inner .anim {height:250px;}
	#section2 .bg .inner .anim {height:400px;}*/
	#section3 .tabs_wrap {height:430px;}
}
@media only screen and (max-width:768px) {	
	.section .bg .inner h2 {display:block; width:100%; margin-bottom:30px; text-align:center;}
	.section .bg .inner h2 br {display:none;}
	.section .bg .inner .icon {display:block; width:100%;}	
	.section .bg .inner .anim {display:block; width:100%; margin-left:0;}		
	#section1 .bg .inner .anim,
	#section2 .bg .inner .anim {height:auto;}	
	/*.section .bg .inner .anim .anim_img2 {}
	.section .bg .inner .anim .anim_img1,
	.section .bg .inner .anim .anim_img3,
	.section .bg .inner .anim .anim_img4,
	.section .bg .inner .anim .anim2_img1,
	.section .bg .inner .anim .anim2_img2,
	.section .bg .inner .anim .anim2_img3,
	.section .bg .inner .anim .anim2_img4 {position:relative; left:0; right:0;}*/

	.section .bg .inner .anim .anim_img1 {margin-left:-20px;}
	.section .bg .inner .anim .anim_img3 {margin-left:-20px;}
	.section .bg .inner .anim .anim_img4 {margin-right:-30px;}

	.section .bg .inner .anim .anim2_img1 {margin-left:-20px;}
	.section .bg .inner .anim .anim2_img2 {margin-right:-30px;}
	.section .bg .inner .anim .anim2_img3 {margin-left:-20px;}
	.section .bg .inner .anim .anim2_img4 {margin-left:-20px;}

	.section .bg .inner .anim img {margin-top:0;}
	.section .hg {padding:80px 0;}
	.section .hg .inner .img img {max-width:70%;}
	.section .hg .inner hgroup > span {font-size:24px;}	
	.section .hg .inner hgroup > p {font-size:18px;}
	.section hgroup h1 {font-size:42px;}
	#section0 {padding-top:80px;}
	#section3, #section4 {padding:80px 0;}
	#section0 .img1 {margin:0 -100px;}
	#section0 .img2 {left:0;}
	#section0 .img3 {right:0;}
	#section0 .img2 img,
	#section0 .img3 img {max-width:80%;}
	#section0 .tit, #section1 hgroup > h1,
	#section2 hgroup > h1 {font-size:50px;}
	#section3 hgroup > h1 br,
	#section4 hgroup > h1 br {display:block;}	
	#section4 a.link {display:block; width:100%;}
	#section4 a.link + a.link {margin:20px 0 0 0;}
	#section3 .tabs_wrap {height:550px;}
}
@media only screen and (max-width:500px) {
	.section .bg .inner dd {padding-right:12px;} 
	.section .bg .inner dd br {display:none;}
	#section0 .txt {font-size:20px;}
	#section0 .tit, #section1 hgroup > h1,
	#section2 hgroup > h1 {font-size:42px;}
	#section3 .tabs_wrap {height:500px;}
}
@media only screen and (max-width:480px) {
	#section3 .tabs_wrap {height:680px;}
}
@media only screen and (max-width:400px) {	
	#section0 {padding-top:60px;}
	#section3, #section4 {padding:60px 0;}
	.section .hg {padding:60px 0;}
	.section .bg {padding:60px 0 40px;}
	.section hgroup h1,
	#section0 .tit, 
	#section1 hgroup > h1, 
	#section2 hgroup > h1 {font-size:35px;}
	.section hgroup > h1,
	.section .hg .inner hgroup > h1 {margin-bottom:20px;}
	.section .hg .inner hgroup > p br {display:none;}
	.section .bg .inner dl {width:100%; margin-bottom:20px;}
	#section0 .img2 {bottom:220px; left:-50px;} 
	#section0 .img3 {right:-10px;}
	#section3 .tabs_wrap {height:600px;}
}
@media only screen and (max-width:375px) {
	.section hgroup > p br {display:none;}
	.section .bg .inner h2 {font-size:23px;}
	.section hgroup h1,
	#section0 .tit, 
	#section1 hgroup > h1, 
	#section2 hgroup > h1 {font-size:32px;}
	#section3 .tabs {width:100%;}		
	#section0 .txt {font-size:18px;}
	#section0 .img2 {bottom:190px;}	
	#section3 .tabs_wrap {height:530px;}
	#section4 a.link .arrow {background:none; padding-top:10px;}
	#section4 a.link .arrow span {font-size:24px;}
}
@media only screen and (max-width:350px) {
	#section3 .tabs_wrap {height:500px;}
}