@charset "utf-8";

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2018-12-01
Modify Date : 2018-12-10
File : /event/landing/free
*******************************************/

/* pc */
@media (min-width:641px) {
	.wrap_pc {display:block; width:100%; font-size:24px; font-weight:200; color:#767676; line-height:1.3; letter-spacing:-1px; overflow-x:hidden;}
	.wrap_m {display:none;}
	
	.wrap { width:1180px; margin:0 auto; position:relative; }
	.ani_free { display:inline-block; }
	.scrollex.active .ani_free { animation-name:ani-free; animation-duration:0.8s; animation-timing-function:linear; animation-iteration-count:infinite; }
	@keyframes ani-free {
		60% { transform:rotate(0deg) }
		65% { transform:rotate(-10deg) }
		75% { transform:rotate(10deg) }
		85% { transform:rotate(-10deg) }
		95% { transform:rotate(10deg) }
		100% { transform:rotate(0deg) }
	}
	.free_event_top { height:640px; background:url('/images/event/20190808/img_top.jpg') 50% 0 no-repeat; background-size:cover; }
	.free_event_top .txt1 { padding-top:110px; font-size:64px; line-height:1.2; color:#000; font-weight:400; transition:all 0.5s ease-out 0.3s; opacity:0;}
	.free_event_top .txt1::after { display:block; content:''; width:60px; padding-top:3px; background:#000; margin:35px 0 0 1px; }
	.free_event_top .txt2 { margin-top:45px; font-size:28px; font-weight:300;color:#202020; letter-spacing:-2px; transition:all 0.5s ease-out 0.5s; opacity:0; }
	.free_event_top .evt_icon { position:absolute; top:30px; right:30px; width:120px; height:120px; background:#0097fa; border-radius:50%; padding-top:25px; box-sizing:border-box; text-align:center; font-size:16px; color:#fff; transition:all 0.5s ease-out 0.8s; transform:scale(0.5); opacity:0; }
	.free_event_top .evt_icon p {font-size:24px;}
	
	.free_event_top.active .txt1 { transform:translateY(-10px); opacity:1; }
	.free_event_top.active .txt2 { transform:translateY(-10px); opacity:1; }
	.free_event_top.active .evt_icon { transform:scale(1); opacity:1; }

	.event_container { padding:100px 0; }
	.tle_event_01 { padding-bottom:15px; font-size:50px; font-weight:100; color:#000; line-height:1.2; letter-spacing:-2px; }
	.tle_event_01::before { display:block; content:''; margin-bottom:34px; width:50px; padding-top:1px; background:#000; }
	.free_contents { padding-top:90px; text-align:center; font-size:16px; font-weight:300; }
	.free_contents>li { float:left; margin-left:20px; }
	.free_contents>li:first-child { margin-left:0; }
	.free_contents .txt { padding-top:15px; }
	.btn_d1 { display:inline-block; text-align:center; height:36px; line-height:32px; padding:0 30px; border:1px #8EACB9 solid; font-size:14px; font-weight:300; color:#6990a2; transition:all 0.3s; }
	.btn_d1>b { font-family:dotum; font-weight:normal; }
	.btn_d1:hover, .btn_d1:focus { border-color:#6990a2; color:#4F6C7A; background:rgba(255,255,255,0.3); }

	.txt_area p { font-weight:300; }
	.event_container.sec1 { padding-bottom:60px; }
	.event_container.sec1 .txt_area { position:absolute; top:40px; right:0; width:306px; }
	.event_container.sec2 { padding-bottom:0; background:#e0e5ee; }
	.event_container.sec2 .txt_area { text-align:center; }
	.event_container.sec2 .tle_event_01::before { margin-left:auto; margin-right:auto; }
	.event_container.sec2 .img_area { position:relative; min-height:620px; margin-top:60px; }
	.event_container.sec2 .img_div {position:relative; width:100%; height:630px; margin-top:50px;}
	.event_container.sec2 .img_div img {position:absolute; max-width:none; transform:translateX(0);}
	.event_container.sec2 .img_div .mac {opacity:0; left:0; transition:all 0s;}
	.event_container.sec2 .img_div .ipad {opacity:0; left:-130px; margin-top:90px; transition:all 0s;}
	.event_container.sec2 .img_div .iphone {opacity:0; left:-270px; margin-top:200px; transition:all 0s;}
	.event_container.sec2 .img_div .foldable_phone {opacity:0; right:-20px; margin-top:140px; transition:all 0s;}
	.event_container.sec2 .img_div .foldable_phone_mess {opacity:0; right:-110px; bottom:68px; transition:all 0s;}
	.event_container.sec2.active .img_div img {transform:translateX(40px);}
	.event_container.sec2.active .img_div .mac {opacity:1; transition:all 0.5s ease-out 0.3s;}
	.event_container.sec2.active .img_div .ipad {opacity:1; transition:all 0.5s ease-out 0.5s;}
	.event_container.sec2.active .img_div .iphone {opacity:1; transition:all 0.5s ease-out 0.8s;}
	.event_container.sec2.active .img_div .foldable_phone {opacity:1; transition:all 0.6s ease-out 0.8s;}
	.event_container.sec2.active .img_div .foldable_phone_mess {opacity:1; transition:all 0.4s ease-out 1.5s; animation:moveSlideshow 0.7s linear infinite .3s;}
	@keyframes moveSlideshow {
		0% {transform: translateX(0px);}
		50% {transform: translateX(-10px);}
		100% {transform: translateX(0px);}
	}
	.event_container.sec2 .evt_icon { position:absolute; top:20px; left:40px; width:100px; height:100px; background:#0097fa; border-radius:50%; padding-top:16px; box-sizing:border-box; text-align:center; font-size:16px; color:#fff; transition:all 0.5s ease-out 1.0s; transform:scale(0.5); opacity:0; }
	.event_container.sec2.active .evt_icon { transform:scale(1); opacity:1; }
	.event_container.sec3 .txt_area { position:absolute; top:50px; right:0; width:578px; }
	.event_container.sec3 .evt_icon { position:absolute; bottom:40px; left:40px; width:100px; height:100px; background:#0097fa; border-radius:50%; padding-top:30px; box-sizing:border-box; text-align:center; font-size:16px; color:#fff; transition:all 0.5s ease-out 0.5s; transform:scale(0.5); opacity:0; }
	.event_container.sec3.active .evt_icon { transform:scale(1); opacity:1; }
	.event_container.sec4 { padding-bottom:0; background:#f3eeed; }
	.event_container.sec4 .wrap { min-height:740px; }
	.event_container.sec4 .txt_area { /*position:absolute; left:0;*/ }
	.event_container.sec4 .img_area { position:relative; margin-top:-100px; /*position:absolute; top:180px; right:0;*/ }
	.free_event_btm { height:716px; color:#fff; background:url('/images/event/20180406/img_bottom.jpg') 50% 0 no-repeat; background-size:cover; }
	.free_event_btm .txt1 { padding-top:110px; font-size:28px; color:#fff; }
	.free_event_btm .txt2 { padding-top:20px; font-size:76px; color:#fff; line-height:1.2; }
	.free_event_btm .txt2:after { display:block; content:''; margin-top:34px; width:60px; padding-top:3px; background:#fff; }
	.free_event_btm .txt3 { position:absolute; top:580px; right:0; font-size:36px; font-weight:100; color:#fff; }
	.free_event_btm .btn_area { position:absolute; top:540px; left:0; }
	a.btn_apply { display:inline-block; height:88px; padding:0 45px 0 50px; border:1px #d4dbdf solid; border-radius:45px; font-size:28px; line-height:88px; font-weight:300; color:#fff; transition:all 0.3s; }
	a.btn_apply>b { display:inline-block; font-family:dotum; font-weight:100; }
	a.btn_apply:hover, a.btn_apply:focus { background:rgba(255,255,255,0.3); }

	.event_container.sec1 .img_area img { transform:translateX(40px) translateY(-40px); opacity:0.2; animation-name:ani-101a; animation-duration:1.2s; }
	.event_container.sec1.active .img_area img { transform:translateX(0px) translateY(0px); opacity:1; animation-name:ani-101b; }
	.event_container.sec2 .img1 { position:absolute; top:0; left:700px; transform:translateX(40px) translateY(-10px); opacity:0; animation-name:ani-201a; animation-duration:0.5s; }
	.event_container.sec2 .img2 { position:absolute; top:25px; left:500px; transform:translateX(40px) translateY(-10px); opacity:0; animation-name:ani-201a; animation-duration:1s; }
	.event_container.sec2 .img3 { position:absolute; top:50px; left:300px; transform:translateX(40px) translateY(-10px); opacity:0; animation-name:ani-201a; animation-duration:1.5s; }
	.event_container.sec2 .img4 { position:absolute; top:75px; left:100px; transform:translateX(40px) translateY(-10px); opacity:0; animation-name:ani-201a; animation-duration:1.5s; }
	
	.event_container.sec2.active .img1, .event_container.sec2.active .img2, .event_container.sec2.active .img3, .event_container.sec2.active .img4 {  transform:translateX(0px) translateY(0px); opacity:1; animation-name:ani-201b; }
	.event_container.sec3 .img_area img { transform:translateX(40px) translateY(-40px); opacity:0.2; animation-name:ani-101a; animation-duration:1.2s; }
	.event_container.sec3.active .img_area img { transform:translateX(0px) translateY(0px); opacity:1; animation-name:ani-101b; }
	.event_container.sec4 .img1 { position:absolute; top:110px; right:80px; transform:translateX(40px) translateY(-10px); opacity:0; animation-name:ani-201a; animation-duration:1s; }
	.event_container.sec4 .img2 { position:absolute; top:0; right:0; transform:translateX(40px) translateY(-10px); opacity:0; animation-name:ani-201a; animation-duration:0.5s; }
	.event_container.sec4.active .img1, .event_container.sec4.active .img2 {  transform:translateX(0px) translateY(0px); opacity:1; animation-name:ani-201b; }

	@keyframes ani-101a {
		0% { transform:translateX(0px) translateY(0px); opacity:1; }
		100% { transform:translateX(40px) translateY(-40px); opacity:0.2; }
	}
	@keyframes ani-101b {
		0% { transform:translateX(40px) translateY(-40px); opacity:0.2; }
		100% { transform:translateX(0px) translateY(0px); opacity:1; }
	}
	@keyframes ani-201a {
		0% { transform:translateX(0px) translateY(0px); opacity:1; }
		20% { transform:translateX(0px) translateY(0px); opacity:1; }
		100% { transform:translateX(40px) translateY(-10px); opacity:0; }
	}
	@keyframes ani-201b {
		0% { transform:translateX(40px) translateY(-10px); opacity:0; }
		20% { transform:translateX(40px) translateY(-10px); opacity:0; }
		100% { transform:translateX(0px) translateY(0px); opacity:1; }
	}
	/* //pc */
}
/* //pc */

/* mobile */
@media (min-width:0) and (max-width:640px) {
	.wrap_pc {display:none;}
	.wrap_m { display:block; min-width:360px; max-width:640px; margin:0 auto; text-align:center; }
	.wrap_m img { max-width:100%; }
	
	.contents_m>li { position:relative; }
	.btn_m_area { position:absolute; left:0; bottom:0; width:100%; padding-bottom:7%; }
	a.btn_m1 { display:inline-block; text-align:center; height:36px; line-height:36px; padding:0 20px 0 30px; border:1px #c8d1d5 solid; font-size:14px; font-weight:300; color:#93a3ad; text-decoration:none; transition:all 0.3s; }
	.btn_m1>b { font-family:dotum; font-weight:normal; }
	a.btn_apply_m { display:inline-block; height:88px; padding:0 45px 0 50px; border:1px #d4dbdf solid; border-radius:45px; font-size:28px; line-height:88px; color:#fff; text-decoration:none; }
	.btn_apply_m>b { display:inline-block; font-family:dotum; font-weight:100; }
	.txt_mf_area { position:absolute; left:0; bottom:0; width:100%; padding-bottom:6%; color:#fff; font-size:calc(16px + 2vw); }
	.txt_mf_area >a { color:#fff; }
}

@media only screen and (max-width:520px) {
	a.btn_apply_m { height:66px; padding:0 25px 0 30px; border-radius:34px; font-size:20px; line-height:66px; }
}
@media only screen and (min-width:980px) {
	.txt_mf_area { font-size:36px; }
}
/* //mobile */