@charset "utf-8";

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

/* 다음 & 네이트 쇼핑박스 PC/MObile */
.event_top {background:#ebf2f8; text-align:left;}
.event_top .inner {position:relative; height:530px;}
.event_top h2 {position:absolute; top:100px; left:0}
.event_top .img {position:absolute; top:0; right:-150px; width:862px; height:530px;}	

/* 다음&네이트 쇼핑박스란? */
.event01 {background:#fff; padding:70px 0; text-align:center;}	
.event01 h3 {margin-bottom:50px; font-size:42px; font-weight:500; color:#333; letter-spacing:-2px; line-height:1.0;}	
.event01 .detail_tab {margin-bottom:40px; zoom:1;}
.event01 .detail_tab:after {clear:both; display:block; content:'';}
.event01 .detail_tab li {float:left; width:50%; height:60px; overflow:hidden;}
.event01 .detail_tab li a {display:block; border:1px solid #e5e5e5; border-left:0; background:#f5f5f5; height:58px; line-height:58px; text-align:center; font-size:20px; font-weight:300; color:#737373; text-decoration:none;}
.event01 .detail_tab li:first-child a {border-left:1px solid #e5e5e5;}
.event01 .detail_tab li.active a {background:#fff; font-weight:700; color:#333;}
.event01 p {font-size:18px; font-weight:300; color:#5f5f5f; letter-spacing:-1px;}
.event01 .icon_pc {margin:40px auto 30px;}
.event01 .icon_mo {margin:80px auto 30px;}
.event01 .mobile_bg {display:inline-block; margin-bottom:30px; border-radius:50px; background:#ed8b00; height:45px; line-height:45px; padding:0 60px; font-size:16px; font-weight:300; color:#fff;}

.event01 .mobile_box ul {width:1008px; margin:0 auto;}
.event01 .mobile_box li {float:left; margin-left:95px; width:270px;}
.event01 .mobile_box li:first-child {margin-left:0;}
.event01 .mobile_box .img {margin-bottom:20px;}
.event01 .mobile_box p {font-size:16px; font-weight:300; color:#333;}
.event01 .mobile_box p span {font-family:'dotum', sans-serif !important;}

/* 5월 신규/기존 광고주 혜택 */
.event02 {background:#ebf2f8; padding:70px 0; text-align:center;}
.event02 .round {position:relative; border-radius:20px; background:#fff; padding:50px;}
.event02 h3 {margin-bottom:40px; font-size:42px; font-weight:500; color:#333; letter-spacing:-2px; line-height:1.0;}
.event02 h3 span {color:#0081cc;}	
.event02 .list_table_style {width:100%; border-collapse:separate; border-top:1px solid #7d7d7d; border-bottom:1px solid #7d7d7d;}
.event02 .list_table_style > thead > tr > th {border-left:none; border-left:1px solid #cbcbcb; background:#dcdcdc; height:30px; padding:10px 0; font-size:13px; font-weight:400; color:#333;}
.event02 .list_table_style > thead > tr > th:first-child {border-left:none;}
.event02 .list_table_style > tbody > tr > th {border-top:1px solid #e0e0e0; border-left:1px solid #e0e0e0; background:#f4f4f4; height:30px; padding:10px 0; font-size:13px; font-weight:400; color:#666;}
.event02 .list_table_style > tbody > tr > th.fir {border-left:none; background:#f2f2f2;}
.event02 .list_table_style > tbody > tr > td {border-top:1px solid #e0e0e0; border-left:1px solid #e0e0e0; background:#fff; height:30px; padding:10px 0; text-align:center; font-size:13px; font-weight:400; color:#666;}
.event02 .list_table_style > tbody > tr > td.price {padding-right:10px;}
.event02 .list_table_style > tbody > tr > td.blue {padding-right:10px; color:#0367a1;}
.event02 .list_table_style > tbody > tr > td.red {padding-right:10px; color:#ed8b00 !important;}
.event02 .plus {display:block; height:200px; background:#fff url('/images/event/20170424/event02_plus.png') no-repeat center;}
.event02 .plus.before {height:300px;}
.event02 p {margin:30px 0 0 50px; text-align:left; font-size:14px; color:#848484;}

/* 쇼핑박스 신청 전 必 체크리스트 */
.event03 {background:#fff url('/images/event/20170424/event03_bg.png') no-repeat center; padding:70px 0; text-align:center;}
.event03 h3 {margin-bottom:40px; font-size:42px; font-weight:500; color:#006dba; letter-spacing:-2px; line-height:1.0;}
.event03 h4 {margin-bottom:20px; font-size:24px; font-weight:500; color:#333; letter-spacing:-2px; line-height:1.0;}
.event03 p {margin-bottom:40px; font-size:16px; font-weight:300; color:#848484;}
/*.event03 a.btn {display:inline-block; background:#7c87a4; padding:0 30px; height:45px; line-height:45px; font-size:16px; font-weight:300; color:#fff; transition:all linear 0.5s; text-decoration:none;}
.event03 a.btn span {font-family:'dotum', sans-serif !important;}
.event03 a.btn:hover {background:#596a96;}*/

/* 쇼핑박스 진행 절차 */
.event04 {background:#e9edf7; padding:70px 0; text-align:center;}
.event04 h3 {margin-bottom:40px; font-size:42px; font-weight:500; color:#333; letter-spacing:-2px; line-height:1.0;}
.event04 ul {width:1006px; margin:0 auto 40px;}	
.event04 li {float:left; position:relative; width:254px; height:234px; margin-left:122px; padding:40px 0 0 90px; text-align:left;}
.event04 li:first-child {margin-left:0; padding-left:70px;}
.event04 li h4 {margin-bottom:25px; font-size:24px; font-weight:500; color:#333; letter-spacing:-2px; line-height:1.4;}
.event04 li p {font-size:16px; font-weight:300; color:#555; letter-spacing:-2px; line-height:1.4;}
.event04 li.fir {background:url('/images/event/20170424/event04_bg_1.png') no-repeat;}
.event04 li.sec {background:url('/images/event/20170424/event04_bg_2.png') no-repeat;}
.event04 li.thr {background:url('/images/event/20170424/event04_bg_3.png') no-repeat;}
.event04 li.sec:before,
.event04 li.thr:before {display:block; content:''; position:absolute; top:50%; margin-top:-35px; left:-122px; width:77px; height:70px; background:url('/images/event/20170424/event04_bg_arr.png') no-repeat;}
.event03 a.btn, .event04 a.btn {display:inline-block; border-radius:50px; background:#7c87a4; padding:0 40px; height:70px; line-height:68px; font-size:20px; font-weight:500; color:#fff; transition:all linear 0.5s; text-decoration:none;}
.event03 a.btn span, .event04 a.btn span {font-family:'dotum', sans-serif !important; font-size:20px; font-weight:300;}
.event03 a.btn:hover, .event04 a.btn:hover {background:#596a96;}

/* 꼭 알아두세요! */
.event05 {background:#f9f9f9; padding:70px 0; text-align:left;}
.event05 h3 {margin-bottom:20px; font-size:24px; font-weight:500; color:#333; letter-spacing:-2px; line-height:1.0;}
.event05 .list {margin-bottom:40px;}
.event05 .list li {padding-left:10px; text-indent:-10px; font-size:14px; color:#555; line-height:2.0;}
.event05 .inquiry {margin-bottom:20px; border:1px solid #dcdcdc; background:#fff;}
.event05 .inquiry li {float:left; width:50%;}
.event05 .inquiry li > div {position:relative; border-left:1px solid #dcdcdc; padding:40px 30px;}
.event05 .inquiry li:first-child > div {border-left:none;}
.event05 .inquiry li h4 {font-size:18px; font-weight:600; color:#333;}
.event05 .inquiry li p {text-align:left; font-size:18px; font-weight:600; color:#7c87a4;}
.event05 .inquiry li p span {font-size:13px; font-weight:300; color:#606060;}
.event05 .inquiry li .tel {position:absolute; top:43px; right:30px; font-size:45px; font-weight:300; color:#333; letter-spacing:-2px;}
.event05 p {text-align:center; font-size:14px; color:#555;}

.wrap_pc {text-align:center; overflow:hidden;}
.wrap_pc .inner {width:1180px; margin:0 auto; min-width:320px;}
img {max-width:100%;}

@media (min-width:0) and (max-width:1024px) {
.wrap_pc .inner {width:auto; padding:0 20px;}
.event02 .scroll {overflow-x:auto;}
.event02 .list_table_style {width:1000px;}
.event05 .inquiry li .tel {position:relative; font-size:40px; top:0; right:0;}
}
@media (min-width:0) and (max-width:640px) {
p br {display:none;}
.event_top .inner {height:400px;}
.event_top .img {max-width:130%; right:-10%; height:100%;}
.event_top h2 {top:50%; margin-top:-65px; left:5%; width:90%; background:rgba(255,255,255,0.8); padding:20px;}
.event_top .txt {width:100%;}
.event01 p {font-size:16px;}	
.event01 .detail_tab li a {font-size:18px;}	
.event01 .mobile_box ul {width:auto;}
.event01 .mobile_box li {width:100%; margin-left:0; padding-top:30px;}
.event01 .mobile_box li:first-child {padding-top:0;}
.event02 p {margin-left:0; text-align:center;}
.event01 h3,
.event02 h3,
.event03 h3,
.event04 h3 {font-size:30px;}
.event04 ul {width:100%;}
.event04 li {width:100%; height:170px; margin-left:0; margin-top:80px; padding-left:0; text-align:center;}
.event04 li:first-child {margin-top:0; padding-left:0;}
.event04 li.fir, .event04 li.sec, .event04 li.thr {background-size:cover;}
.event04 li.sec:before,
.event04 li.thr:before {top:0; margin-top:-76px; left:50%; margin-left:-35px; transform:rotate(90deg);}
.event04 li h4 br {display:none;}
.event03 a.btn, .event04 a.btn {height:60px; line-height:58px; padding:0 30px; font-size:20px;}
.event05 .inquiry li {width:100%;}
.event05 .inquiry li > div {border-top:1px solid #dcdcdc; border-left:0; padding:20px; text-align:center;}
.event05 .inquiry li:first-child > div {border-top:0;}
.event05 .inquiry li > div p {text-align:center;}
.event05 .inquiry li .tel {font-size:36px;}
}
@media (min-width:0) and (max-width:360px) {
.event_top .inner {height:300px;}	
.event_top h2 {left:auto; width:90%;}
}