@charset "utf-8";

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

/* 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; }
	.wrap_m {display:none;}

	html {-webkit-text-size-adjust:none; overflow-x:hidden;}
	/* 상단 비주얼 변경 (18-08-08) */
	.free_event_top {position:relative; height:1049px; background:url('/images/event/20180701/bg_top.jpg') fixed center top no-repeat; background-size:cover; text-align:center; overflow:hidden;}
	.free_event_top .txt1 {padding-top:135px; font-size:29px; font-weight:900; color:#323031; letter-spacing:5px; line-height:1.2;}
	.free_event_top .txt1 p {opacity:0; padding-bottom:30px;}
	.free_event_top .txt1 strong {opacity:0; font-size:60px; font-weight:500; letter-spacing:-5px;}
	.free_event_top .txt2 {opacity:0; padding-top:30px; font-size:22px; font-weight:300; color:#323031; letter-spacing:-2px;}

	.free_event_top .minishop {opacity:0; position:absolute; top:430px; left:50%; margin-left:-540px;}
	.free_event_top.active .txt1 p {opacity:1; animation:ani_top 1s;}
	.free_event_top.active .txt1 strong {opacity:1; animation:ani_top2 1.5s;}
	.free_event_top.active .txt2 {opacity:1; animation:ani_top3 2s;}
	.free_event_top.active .minishop {opacity:1; animation:ani_top4 2s;}
	@keyframes ani_top {
		0% {opacity:0;}
		50% {opacity:0;}
		100% {opacity:1;}
	}
	@keyframes ani_top2 {
		0% {opacity:0;}
		50% {opacity:0;}
		100% {opacity:1;}
	}
	@keyframes ani_top3 {
		0% {opacity:0;}
		50% {opacity:0;}
		100% {opacity:1;}
	}
	@keyframes ani_top4 {
		0% {opacity:0; transform:translateY(500px);}
		50% {opacity:0; transform:translateY(300px);}
		100% {opacity:1; transform:translateY(0px);}
	}

	.event_container {padding:100px 0; text-align:center;}
	.wrap {width:1080px; margin:0 auto; position:relative;}
	.txt_1 {padding-bottom:50px; font-size:60px; font-weight:100; color:#333; line-height:1.2; letter-spacing:-3px;}
	.txt_1 strong {font-weight:500;}

	.sec1 .wrap {width:1085px;}
	.sec1 .txt_area {}
	.sec1 .txt_area .txt_1 {font-size:40px; line-height:1.3;}		
	.sec1 .img_area ul {overflow:hidden; margin:-1px 0 0 -1px;}
	.sec1 .img_area li {float:left; margin:1px 0 0 1px;}
	.sec1 #fade {margin-bottom:100px; position:relative; width:1085px; height:723px; overflow:hidden;}	
	.sec1 #fade .img2 {position:absolute; top:0; left:0; opacity:1; cursor:pointer;}
	.sec1 #fade .img1 {position:absolute; top:0; left:0; opacity:0; animation:ani_fade 2s linear 1s}
	@keyframes ani_fade {
		0% {opacity:1;}
		100% {opacity:0;}
	}
	.sec1 #video_wrap {position:relative; width:1085px; height:727px; }
	.sec1 #video_wrap #play {position:absolute; top:50%; left:50%; margin:-40px 0 0 -40px; width:80px; height:80px;}
	.sec1 #video_wrap:hover #play {opacity:1 !important;}

	.sec2 {position:relative; background:#f6f6f6;}
	.sec2:after {display:block; content:'Admin'; position:absolute; bottom:0px; right:30px; font-size:128px; font-weight:100; color:rgba(0,0,0,0.05); letter-spacing:-5px;}
	.sec2 .txt_area {text-align:right;}
	.sec2 .img_area {position:relative; min-height:700px;}
	.sec2 .img1 {position:absolute; top:0; left:50%; margin-left:-30px; transform:translateX(40px) translateY(-10px); opacity:0; animation-name:ani-201a; animation-duration:0.5s;}
	.sec2 .img2 {position:absolute; top:0; right:50%; transform:translateX(40px) translateY(-10px); opacity:0; animation-name:ani-201a; animation-duration:1s;}
	.sec2.active .img1, .sec2.active .img2 {transform:translateX(0px) translateY(0px); opacity:1; animation-name:ani-201b;}
	@keyframes ani-201a {
		0% {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;}
		100% {transform:translateX(0px) translateY(0px); opacity:1;}
	}

	.sec3 {position:relative; background:#ececee;}
	.sec3:after {display:block; content:'Minishop'; position:absolute; bottom:0px; left:30px; font-size:128px; font-weight:100; color:rgba(0,0,0,0.05); letter-spacing:-5px;}
	.sec3 .txt_area {text-align:left;}
	.sec3 .img_area {position:relative; min-height:700px;}
	.sec3 .img1 {position:absolute; top:-50px; left:50%; margin-left:-500px; transform:translateX(0px) translateY(-40px); opacity:0; animation-name:ani-101a; animation-duration:1.2s; z-index:1;}
	.sec3.active .img1 {transform:translateX(0px) translateY(0px); opacity:1; animation-name:ani-101b;}
	@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;}
	}

	.sec4 {position:relative; background:#71777a; /*padding-top:250px;*/}
	.sec4:after {display:block; content:'Calculate'; position:absolute; bottom:0px; right:30px; font-size:128px; font-weight:100; color:rgba(255,255,255,0.05); letter-spacing:-5px;}
	.sec4 .txt_area {text-align:right;}
	.sec4 .txt_area .txt_1 {color:#fff;}
	.sec4 .img_area {position:relative; min-height:800px;}
	.sec4 .img1 {position:absolute; top:150px; right:50%; margin-right:-550px; transform:translateX(40px) translateY(-10px); opacity:0; animation-name:ani-201a; animation-duration:1s;}
	.sec4 .img2 {position:absolute; top:-100px; right:50%; margin-right:-320px; transform:translateX(40px) translateY(-10px); opacity:0; animation-name:ani-201a; animation-duration:0.5s;}
	.sec4.active .img1, .sec4.active .img2 { transform:translateX(0px) translateY(0px); opacity:1; animation-name:ani-201b;}

	.sec5 {position:relative; padding-top:150px; padding-bottom:50px;}
	.sec5 .txt_area {text-align:center;}
	.sec5 .txt_area .txt_1 {font-size:40px; line-height:1.3;}
	.sec5 .thumb {margin-left:63px; overflow:hidden;}
	.sec5 .thumb > li {float:left; width:432px; height:334px; margin:0 0 30px 30px;}
	.sec5 .thumb > li a {display:block; position:relative; width:432px; height:334px;}
	.sec5 .thumb > li .bg {display:none; position:absolute; top:0; left:0; width:432px; height:334px; background:#000; opacity:0.4;}
	.sec5 .thumb > li .txt {display:none; position:absolute; top:0; left:0; width:432px; height:334px;}
	.sec5 .thumb > li .txt li {text-align:center; font-weight:400; color:#fff;}
	.sec5 .thumb > li .txt li.txt0 {padding-top:150px; font-size:26px; font-weight:500;}
	.sec5 .thumb > li .txt li.txt1 {position:relative; padding-top:15px; font-size:13px;}
	.sec5 .thumb > li .txt li.txt1:after {position:absolute; bottom:-5px; left:50%; margin-left:-30px; display:block; content:''; width:60px; height:1px; background:#fff;}
	.sec5 a.more {display:block; margin-top:30px; height:100px; background:url('/images/event/20180701/btn_more.png') no-repeat center 30px; font-size:18px; color:#333; text-decoration:none; animation:ani-more 0.5s infinite;}
	.sec5 a.more:hover {animation:ani-more 0.5s infinite;}
	@keyframes ani-more {
		0% {transform:translateY(0px);}
		50% {transform:translateY(-10px);}
		100% {transform:translateY(0px);}
	}

	.sec6 {position:relative; background:#2c2b2e; padding:100px 0 0;}
	.sec6 .txt_area {text-align:center;}
	.sec6 .txt_area .txt_1 {padding-bottom:60px; font-size:40px; color:#fff; line-height:1.3;}
	.sec6 .list_sec {zoom:1;}
	.sec6 .list_sec:after {clear:both; display:block; content:'';}
	.sec6 .list_sec > li {float:left; width:46%; margin:0 2%;}
	.sec6 .list_sec > li > div {position:relative; box-shadow:0 0 100px rgba(0,0,0,0.2); background:#353436; text-align:center; transition:box-shadow .3s, transform .3s;}
	.sec6 .list_sec > li > div:hover {box-shadow:0 0 100px rgba(0,0,0,0.5);  transform:translate(0, -10px);}
	.sec6 .list_sec .title {position:relative; padding:50px 0 30px; font-size:40px; font-weight:100; color:#3cdd7f;}
	.sec6 .list_sec .title:before {display:block; content:''; position:absolute; bottom:32px; left:50%; margin-left:-72px; width:145px; height:40px; background:url('/images/event/20180701/sec6_title.png') no-repeat;}
	.sec6 .list_sec .txt {font-size:50px; font-weight:600; color:#3cdd7f; letter-spacing:-3px;}
	.sec6 .list_sec .sale {position:absolute; top:215px; right:92px; background:#7773ef; padding:0 5px 2px; font-size:16px; font-weight:400; color:#fff; letter-spacing:0;}
	.sec6 .list_sec .price1 {position:relative; padding-top:20px; font-size:40px; font-weight:600; color:#606060;}
	.sec6 .list_sec .price1:before {display:block; content:''; position:absolute; bottom:5px; left:50%; margin-left:-67px; width:185px; height:19px; background:url('/images/event/20180701/sec6_price1.png') no-repeat right;}
	.sec6 .list_sec .price1._2:before {display:block; content:''; position:absolute; bottom:5px; left:50%; margin-left:-103px; width:260px; height:19px; background:url('/images/event/20180701/sec6_price2.png') no-repeat right;}
	.sec6 .list_sec .price2 {padding-bottom:40px; font-size:26px; font-weight:100; color:#3cdd7f;}
	.sec6 .list_sec .price2 .num {font-family:arial, sans-serif !important; font-size:54px; font-weight:600;}
	.sec6 .list_sec a.btn {display:block; height:88px; line-height:88px; background:#35cb73; text-align:center; font-size:30px; font-weight:500; color:#2c2b2e; letter-spacing:-3px; text-decoration:none; transition:all 0.5s 0.1s;}
	.sec6 .list_sec a.btn:hover {background:#52e48e;}
	.sec6 .list_sec a.btn span {display:inline-block; vertical-align:middle; margin:0 0 7px 10px; width:12px; height:22px; background:url('/images/event/20180701/sec6_btn.png') no-repeat; text-indent:-9999px; transition:transform 0.3s;}
	.sec6 .list_sec .btn:hover span {transform:translateX(10px);}
	.sec6 .list_add {margin-top:60px; color:#fff; line-height:1.6;}
	.sec6 .list_add p {margin-bottom:40px; font-size:28px; font-weight:500; line-height:1.8;}
	.sec6 .list_add p .more {display:inline-block; width:100px; margin-left:10px; border:1px solid #ccc; padding-bottom:3px; text-align:center; vertical-align:middle; font-size:16px; font-weight:300; transition:all 0.5s 0.1s; cursor:pointer;}
	.sec6 .list_add p .more:hover {border-color:#fff; background:rgba(255,255,255,0.2);}
	.sec6 .list_add  .more_cont {display:none; width:50%; margin:0 auto 0; box-shadow:0 0 100px rgba(0,0,0,0.2); background:#353436; padding:40px 0; text-align:center; transition:box-shadow .3s, transform .3s;}
	.sec6 .list_add  .more_cont:hover {box-shadow:0 0 100px rgba(0,0,0,0.5);  transform:translate(0, -10px);}
	.sec6 .list_add  .more_cont a {border-bottom:1px solid #fff; color:#fff;}
	.sec6 .expert {margin-top:100px; padding:80px 0; background:url('/images/event/20180701/img_601.jpg') no-repeat center top; background-size:cover;}
	.sec6 .expert .txt_1 {padding-bottom:40px; font-size:40px; font-weight:500; color:#fff;}
	.sec6 .expert .txt {font-size:32px; font-weight:100; color:#fff;}
	.sec6 .expert .phone {padding-bottom:40px; font-size:50px; font-weight:500; color:#fff; letter-spacing:0;}
	.sec6 .expert .btn {display:inline-block; margin:0 5px; width:277px; height:67px; line-height:65px; border:1px solid #fff; text-align:center; font-size:22px; font-weight:400; color:#fff; letter-spacing:-3px; text-decoration:none; transition:all 0.5s 0.1s;}
	.sec6 .expert .btn:hover {background:rgba(255,255,255,0.2);}
}
/* //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%; }	

	/* bxslider */
	.bx-wrapper {position:relative; margin-bottom:0;}
	.bx-wrapper .bx-controls {display:none;}
	.bx-wrapper .bx-prev, 
	.bx-wrapper .bx-prev:hover {left:15px; background:url('/images/event/20180220/m_left.png') no-repeat; background-size:cover;}
	.bx-wrapper .bx-next, 
	.bx-wrapper .bx-next:hover {right:15px; background:url('/images/event/20180220/m_right.png') no-repeat; background-size:cover;}
	.bx-wrapper .bx-controls-direction a {position:absolute; top:50%; margin-top:-20px; outline:0; width:20px; height:40px; text-indent:-9999px; z-index:9999;}
	.bx-wrapper .bx-controls-direction a.disabled {display:none;}
	.bx-pager {padding-top:0; text-align:center; font-size:.85em; font-family:'Arial'; font-weight:bold; color:#646475;}
	.bx-pager a {display:inline-block; background:#ccc; width:12px; height:12px; margin:0 3px; outline:0; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; text-indent:-9999px;}
	.bx-pager a:hover, .bx-pager a.active {background:#888;}
	.bx-pager a.disabled {display:none;}

	/* section */
	#m_section2 .bx-relative {position:relative;}
	#m_section2 .bx-relative .bx-pager {position:absolute; bottom:30px; left:50%; margin-left:-35px;}
	#m_section3 .bx-pager {margin:20px auto 30px;}
	#m_section4 .btn {width:100%;}
	#m_section4 .btn li {float:left; width:50%;}
}
/* //mobile */