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

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2020-12-16
Modify Date : 2021-01-26
File : /event/2021/livecommerce
*******************************************/

body {min-width:360px;}
img {max-width:100%;}
body, div, dl, dt, li, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, button {font-family:"Noto Sans KR", sans-serif; letter-spacing:-1px;}
#section0 .txt4,
#section7 .link em {font-family:"Spoqa Han Sans", sans-serif;}
#event_header {position:relative; background:#fff; z-index:5;}
#event_footer {border-color:#f0f0f0;}
#wrap {position:relative; overflow:hidden; background:#fff; opacity:0;}
.top_btn {background:#2989e1;}
.section {position:relative; height:auto; padding:100px 0; text-align:center;}
.section .inner {position:relative; width:1180px; margin:auto; text-align:center;}
.section .inner {opacity:1; /*transition:opacity 0.5s ease;*/}
.section.active .inner {opacity:1;}
.show_mot {position:relative; opacity:0; top:20px;}
.section h3 {margin-bottom:50px; font-size:50px; font-weight:100; color:#000; letter-spacing:-3px; line-height:1.3;}
.section h3 strong {font-weight:600;}

/* section0 */
#section0 {background:#6075f3 url('/images/event/20201222/live0_bg.jpg') no-repeat center top; background-size:cover;}
#section0 .txt {float:left; width:50%; text-align:left;}
#section0 .txt1 {margin:50px 0 20px;}
#section0 .txt4 {margin:20px 0 40px; font-size:20px;}
#section0 .txt4 em {color:#fff; letter-spacing:0;}
#section0 .txt4 p {color:#bdbfff;}
#section0 .btn > div {display:inline-block; vertical-align:top; margin:0 5px;}
#section0 .btn a {display:inline-block; border-radius:50px; background:#fff; padding:18px 20px 20px; text-align:center; font-size:17px; font-weight:500; color:#222; transition:all 0.5s ease;}
#section0 .btn a:hover {box-shadow:0 0 10px #fff; background:#faf9ff;}
#section0 .btn a.startBtn {padding:18px 30px 20px; background:linear-gradient(to right, #f34b47 50%, #ff693b 100%); color:#fff;}
#section0 .btn a.startBtn:hover {border-color:transparent; background:linear-gradient(to right, #ff693b 50%, #f34b47 100%);}
#section0 .btn p {padding-top:5px; text-align:center; font-size:15px; font-weight:100; color:#c5c5ff;}
#section0 .img {float:right; position:relative; width:50%; text-align:right; z-index:1;}
#section0 .img1 {margin:-50px -50px -300px 0;}
#section0 .video {position:absolute; top:45px; right:27px; width:330px; overflow:hidden;}

/* section1 */
#section1 {background:#2e2f33 url('/images/event/20201222/live1_bg.jpg') no-repeat center top;}
#section1 h3 {margin-top:70px; color:#fff;}
#section1 .img > div {float:left; width:33.33%; box-sizing:border-box;}
#section1 .img > div:hover {transform:translate(0, -10px);}
#section1 h4 {margin:30px 0 5px; font-size:28px; font-weight:600; color:#6b6cf6;}
#section1 p {font-size:18px; color:#b7b7b7;}

/* section2 */
#section2 {background:#faf9ff url('/images/event/20201222/live2_bg.jpg') no-repeat center top;}
#section2 .img {position:relative; margin:0 -12px -30px; text-align:left; z-index:1;}
#section2 .img1 {margin-top:160px;}
#section2 .img2 {margin-top:0;}
#section2 .img3 {margin-top:120px;}
#section2 .img4 {margin-top:160px;}
#section2 .img5 {margin-top:20px;}
#section2 .img6 {margin-top:-130px; margin-left:298px;}
#section2 .img7 {margin-top:-30px;}

/* section3 */
#section3 {background:#5d7bfc url('/images/event/20201222/live3_bg.jpg') no-repeat center top; padding-bottom:40px;}
#section3 h3 {margin-top:180px; color:#fff;}
#section3 .img {float:left; width:50%;}
#section3 .txt {float:right; width:50%; text-align:left;}
#section3 .txt .txt1 {margin-bottom:20px;}
#section3 .txt p.txt2 {font-size:17px; font-weight:100; color:#fff;}

/* section4 */
#section4 {background:#f4f5f9;}
#section4 .txt {float:left; width:50%; text-align:left;}
#section4 .txt .txt1 {margin:60px 0 20px;}
#section4 .txt p.txt2 {font-size:17px; color:#565a67;}
#section4 .img {float:right; width:50%;}

/* section5 */
#section5 {background:#2e2f33;}
#section5 h3 {color:#fff;}
#section5 .img1 {float:left; width:50%;}
#section5 .img1 img {margin-right:-70px;}
#section5 .img2 {float:right; width:50%;}
#section5 .img2 img {margin-left:-70px;}
#section5 .img1 img:hover,
#section5 .img2 img:hover {transform:translate(0, -10px);}
#section5 p {margin:10px 0 50px; font-size:20px; color:#9497bc;}
#section5 p em {border-bottom:1px solid #9497bc;}
#section5 .startBtn {display:inline-block; margin:0; box-shadow:0 0 10px #7f5ef1; border-radius:50px; border:1px solid transparent; background:linear-gradient(to right, #7d60f1 50%, #6075f3 100%); padding:13px 80px 15px; font-size:32px; color:#fff; transition:all 0.5s ease;}
#section5 .startBtn:hover {border-color:transparent; background:linear-gradient(to right, #6075f3 50%, #7d60f1 100%);}

/* section6 */
#section6 {background:#f5f5f5;}
#section6 h3 {margin-bottom:60px;}
#section6 dl {width:48%; margin-bottom:30px; box-sizing:border-box; box-shadow:5px 5px 20px #e0e0e0; border-top-left-radius:50px; border-top-right-radius:20px; border-bottom-left-radius:20px; border-bottom-right-radius:50px; background:#fff; padding:30px 40px; text-align:left;}
#section6 dl.box1 {float:left;}
#section6 dl.box2 {float:right;}
#section6 dl.first {margin-top:80px;}
#section6 dt {background:url('/images/event/20201222/live6_icon.png') no-repeat left 4px; padding-left:30px; font-size:20px; font-weight:500; color:#2e2f33; letter-spacing:-1.5px; line-height:1.3;}
#section6 dd {padding-top:15px; font-size:15px; color:#86878c;}
#section6 dd em, #section6 dd a {color:#5c68f1;}
#section6 h4 {border-top:1px solid #dcdcdc; padding:20px 0 5px; text-align:left; font-size:20px; font-weight:500; color:#2e2f33;}
#section6 li {padding:5px 0 0 10px; text-indent:-10px; text-align:left; font-size:15px; color:#86878c;}

/* section7 */
#section7 {background:url('/images/event/20201222/live7_bg.jpg') no-repeat center top; background-size:cover; padding:70px 0;}
#section7 h3 {margin:0 auto 30px; font-size:45px; font-weight:100; color:#fff; letter-spacing:-3px; line-height:1.2;}
#section7 h3 strong {font-weight:500;}
#section7 ul {display:inline-block;}
#section7 li {font-size:19px; color:#7978d8; letter-spacing:-1px;}
#section7 li .icon {display:inline-block; vertical-align:middle; width:16px; height:12px; margin-bottom:3px; background:url('/images/event/20201222/live7_icon.png') no-repeat;}
#section7 .startBtn {display:inline-block; margin:40px 5px 40px; box-shadow:0 0 10px #7f5ef1; border-radius:50px; border:1px solid transparent; background:linear-gradient(to right, #7d60f1 50%, #6075f3 100%); padding:13px 50px 15px; font-size:18px; font-weight:100; color:#fff; transition:all 0.5s ease;}
#section7 .startBtn:hover {border-color:transparent; background:linear-gradient(to right, #6075f3 50%, #7d60f1 100%);}
#section7 .guideBtn {display:inline-block; margin:40px 5px 40px; border-radius:50px; border:1px solid #fff; padding:13px 50px 15px; font-size:18px; font-weight:100; color:#fff; transition:all 0.5s ease;}
#section7 .guideBtn:hover {border-color:transparent; background:#7d60f1;}
#section7 p {font-size:14px; font-weight:100; color:#8d8d8d;}
#section7 .link {border-bottom:1px solid #8d8d8d; color:inherit;}

/* section8 */
#section8 {background:#eff0ff;}
#section8 table {width:100%;}
#section8 table thead th {background:#90a5ff; padding:10px 0; font-size:18px; font-weight:500; color:#fff;}
#section8 table tbody th, #section8 table tbody td {border-bottom:1px solid #d5d5d6; background:#fff; padding:25px 0;}
#section8 table tbody th {padding-left:10px; font-size:18px; font-weight:400; color:#2e2f33;}
#section8 table tbody td {padding-right:25px; text-align:left; font-size:16px; color:#2e2f33;}
#section8 table tbody td li {padding-left:15px; text-indent:-14px; font-weight:300;}
#section8 table tbody td li a {border-bottom:1px solid #5c68f1; color:#5c68f1;}

/* 신청하기 팝업 */
.ui-dialog .ui-dialog-content .reseller_wrap + p {padding-top:10px; font-size:15px; color:#3090d6;}
.ui-dialog .ui-button {width:auto !important;}

/* 뷰레이어 */
.view_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:2;}
.view_layer {letter-spacing:0px; display:none; position:fixed; top:50%; left:50%; margin:-320px 0 0 -350px; width:700px; 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:3;}
.view_layer h5 {padding-bottom:10px; font-size:20px; font-weight:600; color:#e35926;}
.view_layer li em {color:#fff;}
.view_layer .close {position:absolute; top:30px; right:30px; width:20px; height:20px; background:url('/images/event/20210104/layer_close.png') no-repeat; background-size:cover; cursor:pointer;}
.view_layer dl {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 {position:relative; width:90px; font-weight:500;}
.view_layer dl dd {width:calc(100% - 90px); color:#666;}
.view_layer dl a.link {color:#13759c; text-decoration:underline;}
.view_layer dl a.link em {font-family:'Spoqa Han Sans', sans-serif;}
.view_layer p {padding-left:20px; text-indent:-20px; font-size:16px; color:#888; line-height:1.4;}
.view_layer .table_layer {width:100%; border-collapse:collapse; border-top:1px solid #e35926; border-bottom:1px solid #ccc;}
.view_layer .table_layer > thead > tr > th {border-bottom:1px solid #ccc; border-left:1px solid #e4e4e4; background:#f9fafc; padding:10px 0; text-align:center; font-size:16px; font-weight:normal; color:#333; line-height:1.6;}
.view_layer .table_layer > tbody > tr > th {border-top:1px solid #e4e4e4; background:#f9fafc; padding:10px 20px; font-size:16px; font-weight:normal; color:#333; line-height:1.6;}
.view_layer .table_layer > tbody > tr > td {border-top:1px solid #e4e4e4; border-left:1px solid #e4e4e4; padding:10px 20px; text-align:center; font-size:16px; color:#333; line-height:1.6;}
.view_layer .table_layer > thead > tr > th:first-child,
.view_layer .table_layer > tbody > tr > td:first-child {border-left:none;}
.view_layer .table_layer > tbody > tr:first-child > th, 
.view_layer .table_layer > tbody > tr:first-child > td {border-top:none;}
.view_layer .table_layer > tbody > tr > td a {border-bottom:1px solid #333; font-size:16px; color:#333;}
.view_layer .table_layer > tbody > tr > td a.blue {border-color:#3090d6; color:#3090d6;}
.view_layer .table_layer > tbody > tr > td a.btn_blue {margin-top:5px; border:none; min-width:50px; height:25px; line-height:24px; padding:0 10px; font-size:12px; color:#fff;}

@media only screen and (max-width:1180px) {
	.section .inner {width:100%; padding:0 20px;}
	#section1 .img {margin-left:-20px;}
	#section1 .img > div {padding-left:20px;}	
	#section2 .img1,
	#section2 .img2,
	#section2 .img3,
	#section2 .img4,
	#section2 .img5,
	#section2 .img6,
	#section2 .img7 {margin:0 -1px;}
	#section2 .img img {width:25%;}
	#section3 .txt p.txt2 br,
	#section4 .txt p.txt2 br {display:none;}
	#section5 .img1 img {margin-right:0;}
	#section5 .img2 img {margin-left:0;}
	#section5 p {margin-top:20px;}
	#section6 dd br {display:none;}
}
@media only screen and (max-width:900px) {
	#section0 {padding-bottom:20px;}
	#section0 .txt,
	#section0 .img {width:100%;}
	#section0 .txt1 {margin-top:0;}
	#section0 .img {padding-top:20px; text-align:center;}
	#section0 .img1 {margin:0;}
	#section0 .video {top:50%; right:50%; margin:-300px -164px 0 0;}
	#section2 .img img {width:33.33%;}
}
@media only screen and (max-width:768px) {	
	.section {padding:80px 0;}
	.section h3 {font-size:38px !important; letter-spacing:-2px !important;}	
	#section0 .txt {text-align:center;}	
	#section0 .txt4 {margin-bottom:30px;}
	#section0 .btn > div {width:calc(50% - 12px); margin:0 5px;}
	#section0 .btn a, #section0 .btn a.startBtn {width:100%; padding-left:0; padding-right:0;}	
	#section1 .img > div {width:50%;}
	#section1 .img > div.img3 {margin-top:30px;}
	#section1 h4 {margin-top:20px;}
	#section1 p br {display:none;}	
	#section2 .img {margin-bottom:0;}
	#section2 .img img {width:50%;}
	#section3 {padding-bottom:80px;}
	#section3 .img,
	#section3 .txt {width:100%;}
	#section3 .txt h3 {margin:0 0 10px;}
	#section3 .txt .txt1 {margin-bottom:10px;}
	#section4 .txt,
	#section4 .img {width:100%;}
	#section4 .txt .txt1 {margin:0 0 10px;}
	#section4 .txt h3 {margin-bottom:15px;}
	#section4 .img {margin-top:40px;}
	#section8 table tbody td {font-size:15px;}
}
@media only screen and (max-width:500px) {
	.section {padding:60px 0;}	
	.section h3 {font-size:34px !important;}
	#section0 .txt1 img {max-width:80%;}
	#section0 .img1 > img {max-width:140%; margin-left:-20%; margin-right:-20%;}
	#section1 .img > div {width:100%;}
	#section1 .img > div.img2 {margin-top:30px;}	
	#section5 .img1,
	#section5 .img2 {width:100%;}
	#section5 .img1 > img, 
	#section5 .img2 > img {max-width:110%; margin-left:-5%; margin-right:-5%;}
	#section6 h3 {margin-bottom:40px;}
	#section6 dl {width:100%;}
	#section6 dl.first {margin-top:0;}	
}
@media only screen and (max-width:400px) {
	.section h3 {font-size:30px !important;}
	#section2 .img img {width:100%;}
	#section5 .startBtn {font-size:24px;}
	#section7 li {font-size:16px;}
	#section7 .startBtn,
	#section7 .guideBtn {width:calc(50% - 12px); padding-left:0; padding-right:0;}
}
@media only screen and (max-width:375px) {
	#section0 .video {margin-top:-295px;}
	#section0 .txt4 em {letter-spacing:-0.5px;}	
}
@media only screen and (max-width:360px) {
	#section0 .video {margin-top:-280px;}
	#section0 .video > video {max-width:100%; padding-left:10px; padding-right:10px;}
}