@charset "utf-8";
/* ======================================== Reset ======================================== */

*{-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(255,255,255,0);box-sizing:border-box;}
html,body{width:100%;height:100%;-webkit-font-smoothing:antialiased;font-size:16px;color:#222;}
body,p,h1,h2,h2,h3,h4,h6,ul,ol,li,div,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,pre{margin:0;padding:0;letter-spacing:-1px;font-family:"NanumSquare";font-size:16px;font-weight:400;}
ul,ol,li{display:block;list-style:none;}
fieldset, button,img, input[type='submit']{border:0px none;}
button,input[type='submit']{background:none;cursor:pointer;}
img,input,button,label,select{vertical-align:middle;}
b{font-weight:700;}
i,em,address{font-style:normal;}
a{text-decoration:none;color:#222;}
a:hover{text-decoration:none;}
table{border-spacing:0;table-layout:fixed;width:100%;}
article,aside,hgroup,header,footer,figure,figcaption,nav,section{display:block;}
legend,caption,.soundonly{ position:absolute; overflow:hidden; clip:rect(0,0,0,0); border:0; width:1px; height:1px; padding:0; margin:-1px; text-indent:-10000px;}
input::-webkit-input-placeholder { color:#a0a0a0; }
textarea::-webkit-input-placeholder { color:#a0a0a0;}
select::-ms-expand { display:none; }
/* ==============================================================================================================
= Div Group
= 화면 분할을 위해서 사용함
= 사용방법 : cols2(개수) 클래스를 통해서 개수만큼 균등분할하거나 w20(%)p 클래스를 통해서 분할 사이즈 조정
============================================================================================================== */
.divGroup{margin:0 -10px;}
.divGroup:after{display:block;content:'';clear:both;}
.divGroup > div{float:left;padding:0 10px;}
.divGroup.cols2 > div{width:50%;}
.divGroup.cols3 > div{width:33.3333%;}
.divGroup.cols4 > div{width:25%;}
.divGroup.cols5 > div{width:20%;}


/* ==============================================================================================================
= 폼 아이템별 기본스타일 지정
============================================================================================================== */
input[type='text'],input[type='password'],input[type='tel'],input[type='number'],select{width:100%;height:20px;padding:0 5px;border:1px #c3c3c3 solid;-webkit-appearance: none;-webkit-border-radius: 0;}
input[type='reset']{-webkit-appearance: none;-webkit-border-radius: 0;}
select{background:#fff; -webkit-appearance:none;}
textarea{padding:5px;border:1px #ddd solid;resize:vertical;}
input[readonly],
input[readonly="readonly"],
input[disabled],
input[disabled="disabled"] { background:#f5f5f5; color:#000;}
input[type='checkbox'],input[type='radio']{margin-right:5px;}

.radio_wrap { position:relative; display:inline-block;vertical-align:middle;padding-left:20px;}
.radio_wrap input[type="radio"] {position:absolute; top:0; left:0; width:15px;height:15px; -webkit-appearance:none;background:url("/images/n21/lvt/radio_off.png") left 50% no-repeat; background-size:auto 100%;}
.radio_wrap input[type="radio"]:checked{background:url("/images/n21/lvt/radio_on.png") left 50% no-repeat; background-size:auto 100%;}
.radio_wrap label{display:inline-block;line-height:15px;}

.check_wrap { position:relative; display:inline-block;vertical-align:middle;padding-left:20px; }
.check_wrap input[type="checkbox"] { position:absolute; top:2px; left:0; width:15px;height:15px; -webkit-appearance:none;background:url("/images/n21/lvt/check_off.png") left 50% no-repeat; background-size:auto 100%;}
.check_wrap input[type="checkbox"]:checked{background:url("/images/n21/lvt/check_on.png") left 50% no-repeat;  background-size:auto 100%;}
.check_wrap label{display:inline-block;line-height:15px;}
.check_wrap.off input[type="checkbox"]{background:#ccc;}
.check_wrap.off label{color:#666;}
.check_wrap.off label strong{color:#666;}


/* ==============================================================================================================
= Paging 기본스타일 지정
============================================================================================================== */
.paging{margin-bottom:30px;min-height:38px;text-align:center;}
.paging > a{display:inline-block;vertical-align:middle;min-width:38px;height:38px;line-height:38px;font-size:16px;text-align:center;color:#333333;}
.paging > a.active{background-color:#7257d7;color:#fff;border-radius:50%;}
.paging > a.first_prev{background:url("/images/n21/lvt/icon_first_prev.png") no-repeat center center;text-indent:-9999px;}
.paging > a.f_prev{margin-right:10px;background:url("/images/n21/lvt/icon_f_prev.png") no-repeat center center;text-indent:-9999px;}
.paging > a.l_next{margin-left:10px;background:url("/images/n21/lvt/icon_l_next.png") no-repeat center center;text-indent:-9999px;}
.paging > a.last_next{background:url("/images/n21/lvt/icon_last_next.png") no-repeat center center;text-indent:-9999px;}

.mobile_paging{display:none;margin-bottom:30px;min-height:38px;text-align:center;}
.mobile_paging > a{display:inline-block;vertical-align:middle;min-width:38px;height:38px;line-height:38px;font-size:16px;text-align:center;color:#333333;}
.mobile_paging > a.active{background-color:#333;color:#fff;border-radius:50%;}
.mobile_paging > a.first_prev{background:url("/images/n21/lvt/m_icon_first_prev.png") no-repeat center center;text-indent:-9999px;background-size:35px !important;}
.mobile_paging > a.f_prev{margin-right:10px;background:url("/images/n21/lvt/m_icon_f_prev.png") no-repeat center center;text-indent:-9999px;background-size:35px !important;}
.mobile_paging > a.l_next{margin-left:10px;background:url("/images/n21/lvt/m_icon_l_next.png") no-repeat center center;text-indent:-9999px;background-size:35px !important;}
.mobile_paging > a.last_next{background:url("/images/n21/lvt/m_icon_last_next.png") no-repeat center center;text-indent:-9999px;background-size:35px !important;}
.mobile_paging span{display:inline-block;vertical-align:middle;margin:0 10px;}
.mobile_paging span b{display:inline-block;margin-right:10px;}
.mobile_paging span i{display:inline-block;margin-left:10px;}


/* ==============================================================================================================
= Tab 기본스타일 지정
============================================================================================================== */
.tabBar{text-align:center;}
.tabBar:after{display:block;content:"";clear:both;}
.tabBar > li{position:relative;float:left;}
.tabBar > li.active{z-index:2;}
.tabBar.cols2 li{width:50%;}
.tabBar.cols3 li{width:33.33%;}
.tabBar.cols4 li{width:25%;}
.tabPage{display:none;}
.tabPage.active{display:block;}


/* ==============================================================================================================
= Button 기본스타일 지정
= 사이즈 : btn_ss < btn_s < btn_inline < btn_m < btn_l
============================================================================================================== */
.btnArea{margin:16px 0;text-align:center;}
.btnArea:after{display:block;clear:both;content:'';}
.btnArea li{position:relative;float:left;}
.btnArea li:first-child:nth-last-child(1){width:100%;}
.btnArea li:first-child:nth-last-child(2),
.btnArea li:first-child:nth-last-child(2) ~ li{width:50%;}
.btnArea li:first-child:nth-last-child(3),
.btnArea li:first-child:nth-last-child(3) ~ li{width:33.33%;}

/* ==============================================================================================================
= Modal 기본스타일 지정
= 사이즈 : btn_ss < btn_s < btn_inline < btn_m < btn_l
============================================================================================================== */
.modalWrap{position:fixed;top:0;left:-100%;bottom:0;width:100%;background:#fff;opacity:0;z-index:-1;transition-duration:0.5s;}
.modalWrap.active{opacity:1;z-index:101;}
.modalWrap.small{margin-left:-250px;width:500px;}
.modalWrap.wide{width:100%;left:0;}
.modalWrap .modalTitle{position:relative;padding:0 16px;height:35px;background:#484c51;}
.modalWrap .modalTitle h2{display:block;font-size:16px;font-weight:bold;color:#fff;line-height:46px;}
.modalWrap .modalTitle .btn_modalClose{display:block;position:absolute;top:0;right:0;width:46px;height:46px;text-indent:-9999em;background:url("/images/n21/lvt/btn_modalClose.png") no-repeat center center;}
.modalWrap .modalContent{overflow-y:auto;height:100%;padding:16px;}
.modalWrap .modalContent .btnArea{margin:0;}
.modalWrap .modalContent .btnArea + *{margin-top:20px;}

/* ==============================================================================================================
= Datepicker를 사용중인 입력박스, 달력형태 스타일 지정
= 사용방법 : 입력박스에 useDatepicker / useMonthpicker 클래스를 추가하여 사용함
============================================================================================================== */
input.useDatepicker{background:#fff url("/images/n21/lvt/caleandar_icon.png") right 10px center / 18px auto no-repeat ;}
input.useMonthpicker{background:#fff url("/images/n21/lvt/caleandar_icon.png")  right 10px center / 18px auto no-repeat ;}
#ui-datepicker-div{display:none;width:180px;background:#fff;border:1px #ccc solid;z-index:102 !important;}
.ui-datepicker{position:relative;padding:5px;}
.ui-datepicker table{width:100%;font-size:12px;}
.ui-datepicker table thead th{height:24px;color:#777;line-height:24px;text-align:center;}
.ui-datepicker table tbody td{width:14.2857%;text-align:center;height:22px;}
.ui-datepicker table tbody td a{display:block;height:22px;color:#4b4b4b;line-height:22px;text-align:center;font-size:13px;}
.ui-datepicker table tbody td span{color:#aaa;}
.ui-datepicker table tbody td.date-holiday a{color:#eb3c3c;}
.ui-datepicker tr td:first-child *{color:#eb3c3c;}
.ui-datepicker tr td:last-child *{color:#4084d2;}
.ui-datepicker th{padding:0;}
.ui-datepicker td a.ui-state-active{color:#fff;background:#4b4b4b;}
.ui-datepicker td a.ui-state-highlight{color:#4b4b4b;background:#dfdfdf;}
.ui-datepicker .ui-datepicker-header{position:relative;padding:0;}
.ui-datepicker .ui-datepicker-title{margin:0;height:30px;line-height:30px;font-size:14px;font-weight:normal;color:#242424;letter-spacing:-1px;text-align:center;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{position:absolute;left:50%;top:5px;width:20px;height:20px;line-height:26px;border-radius:2px;border:1px solid #d9d9d9;text-indent:-9999em;cursor:pointer;}
.ui-datepicker .ui-datepicker-prev{margin-left:-66px;background:url("/images/n21/lvt/btn_calendarPrev.png") no-repeat center center;}
.ui-datepicker .ui-datepicker-next{margin-left:44px;background:url("/images/n21/lvt/btn_calendarNext.png") no-repeat center center;}
#ui-monthpicker-div.ui-datepicker{display:none;width:200px;background:#fff;border:1px #ccc solid;z-index:10 !important;box-sizing:border-box;}
#ui-monthpicker-div.ui-datepicker td{height:28px;}
#ui-monthpicker-div.ui-datepicker td a{cursor:pointer;}
#ui-monthpicker-div.ui-datepicker td a.ui-state-active{background:#4b4b4b;color:#fff;}
#ui-monthpicker-div.ui-datepicker tr td:first-child *{color:#4b4b4b;}
#ui-monthpicker-div.ui-datepicker tr td:last-child *{color:#4b4b4b;}
#ui-monthpicker-div.ui-datepicker .ui-datepicker-header{margin-bottom:8px;}
#ui-monthpicker-div.ui-datepicker .ui-datepicker-title select::-ms-expand{display:none;}
#ui-monthpicker-div.ui-datepicker .ui-datepicker-title .ui-datepicker-year{min-width:75px;padding:0 0 0 10px;}

@media all and (max-width:768px){
	input.useDatepicker{background-image:url("/images/n21/lvt/caleandar_icon_2x.png");}
	input.useMonthpicker{background-image:url("/images/n21/lvt/caleandar_icon_2x.png");}
}
@media all and (max-width:280px){
	input.useDatepicker{background-position:right 5px center;}
	input.useMonthpicker{background-position:right 5px center;}
}


/* ==============================================================================================================
= Slider 기본스타일 지정
============================================================================================================== */
.bx-wrapper{position:relative;}
.bx-wrapper .bx-viewport img{width:100%;}
.bx-wrapper .bx-controls div{}
.bx-wrapper .bx-viewport li a{display:block;margin-right:150px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:84%;}
.bx-prev{position:absolute;top:50%;right:50px;width:8px;height:13px;margin-top:-7px;background:url("/images/n21/lvt/usebx_prev.png") no-repeat 50% 50%;text-indent:-9999em;}
.bx-next{position:absolute;top:50%;right:0;width:8px;height:13px;margin-top:-7px;background:url("/images/n21/lvt/usebx_next.png") no-repeat 50% 50%;text-indent:-9999em;}

.bx-controls-auto{text-align:center;} /* 스톱플레이 */

.bx-wrapper .bx-pager{position:absolute;top:0;right:85px;font-size:20px;font-weight:700;}


.bx-start{display:none;position:absolute;top:50%;right:25px;width:8px;height:14px;margin-top:-7px;background:url("/images/n21/lvt/usebx_play.png") no-repeat 50% 50%;text-indent:-9999em;z-index:10}
.bx-stop{position:absolute;top:50%;right:25px;width:9px;height:13px;margin-top:-7px;background:url("/images/n21/lvt/usebx_stop.png") no-repeat 50% 50%;text-indent:-9999em;z-index:10}


.all_view{position:absolute;bottom:9px;right:15px;height:30px;line-height:30px;border-radius:15px;text-align:center;color:#fff; padding:0 15px; background-color:rgba(0,0,0,0.15); font-size:15px; text-shadow:1px 2px 5px rgb(0 0 0 / 60%);}


.useSlick .slick-slider{position:relative;display:block;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}
.useSlick .slick-list{position:relative;display:block;overflow:hidden;margin:0 -10px;padding:30px 0;}
.useSlick .slick-list:focus{}
.useSlick .slick-list.dragging{cursor:pointer;}
.useSlick .slick-slider .slick-track,
.useSlick .slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.useSlick .slick-track{position:relative;top:0;left:0;display:block;}
.useSlick .slick-track:before,.slick-track:after{display:table;content:'';}
.useSlick .slick-track:after{clear:both;}
.useSlick .slick-loading .slick-track{visibility:hidden;}
.useSlick .slick-slide{margin:0 10px;display:none;float:left;height:100%;min-height:1px;box-sizing:border-box;text-align:center;}

.useSlick .slick-slide a{position:relative;display:block; }
.useSlick .slick-slide a:hover img{transform:scale(1.1);transition-duration:0.3s;}
.useSlick .slick-slide img{display:block;height:320px;width:280px;border-radius:10px;box-shadow:1px 5px 10px rgba(0,0,0,.45);margin:0 auto;}
.useSlick .slick-slide.slick-loading img{display:none;}
.useSlick .slick-initialized .slick-slide{display:block;}
.useSlick .slick-loading .slick-slide{visibility:hidden;}
.useSlick .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;}
.useSlick .slick-arrow.slick-hidden{display:none;}

.useSlick .slick-prev{position:absolute;top:50%;left:-68px;width:48px;height:48px;margin-top:-24px;text-indent:-9999px;border-radius:50%;background:#fff url("/images/n21/lvt/icon_mainPopSlider_prev.png") 50% 50% no-repeat;z-index:1;}
.useSlick .slick-next{position:absolute;top:50%;right:-68px;width:48px;height:48px;margin-top:-24px;text-indent:-9999px;border-radius:50%;background:#fff url("/images/n21/lvt/icon_mainPopSlider_next.png") 50% 50% no-repeat;z-index:1;}

.useSlick .slick-dots{position:absolute; bottom:-21px;right:135px;width:80px; height:30px;line-height:30px;background:rgba(0,0,0,0.15);padding:0 15px; border-radius:15px;}
.useSlick .slick-dots li.slick-active button{width:40px;background:#fff;border-radius:4px;}
.useSlick .slick-dots li{display:none;margin:0 auto 0;height:30px;line-height:30px;text-align:center;font-size:18px;font-weight:700;color:#fff;text-shadow:1px 2px 5px rgb(0 0 0 / 60%);}
.useSlick .slick-dots li.slick-active{display:block;}
.useSlick .slick-dots li b{color:#fff;}
.useSlick .slick-dots li em{display:inline-block;margin:0 5px;}

.useSlick_stop{position:absolute;bottom:9px;right:100px;width:30px;height:30px;text-indent:-9999px;border-radius:15px;background:rgba(0,0,0,0.15) url("/images/n21/lvt/icon_mainPopSlider_stop.png") 50% 50% no-repeat;z-index:1;}
.useSlick_start{display:none;position:absolute;bottom:10px;right:100px;width:30px;height:30px;text-indent:-9999px;border-radius:15px; background:rgba(0,0,0,0.15) url("/images/n21/lvt/icon_mainPopSlider_start.png") 50% 50% no-repeat;z-index:1;}

.useSlick2{position:relative;}
.useSlick2 .slick-slider{position:relative;display:block;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}
.useSlick2 .slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0;}
.useSlick2 .slick-list:focus{}
.useSlick2 .slick-list.dragging{cursor:pointer;}
.useSlick2 .slick-slider .slick-track,
.useSlick2 .slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.useSlick2 .slick-track{position:relative;top:0;left:0;display:block;}
.useSlick2 .slick-track:before,.slick-track:after{display:table;content:'';}
.useSlick2 .slick-track:after{clear:both;}
.useSlick2 .slick-loading .slick-track{visibility:hidden;}
.useSlick2 .slick-slide{margin:0;display:none;float:left;height:100%;min-height:1px;box-sizing:border-box;overflow:hidden;border-radius:10px;}

.useSlick2 .slick-slide a{display:block;border-radius:10px;}
.useSlick2 .slick-slide img{display:block;width:100%;}
.useSlick2 .slick-slide a:hover img{transform:scale(1.1);transition:0.3s;}
.useSlick2 .slick-slide.slick-loading img{display:none;}
.useSlick2 .slick-initialized .slick-slide{display:block;}
.useSlick2 .slick-loading .slick-slide{visibility:hidden;}
.useSlick2 .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;}
.useSlick2 .slick-arrow.slick-hidden{display:none;}
.useSlick2 .slick-prev{position:absolute;top:-30px;right:56px;width:7px;height:13px;text-indent:-9999px;background:url("/images/n21/lvt/slide2_prev.png") 50% 50% no-repeat;z-index:1;}
.useSlick2 .slick-next{position:absolute;top:-30px;right:7px;width:7px;height:13px;text-indent:-9999px;background:url("/images/n21/lvt/slide2_next.png") 50% 50% no-repeat;z-index:1;}

.useSlick2 .slick-dots{position:absolute;top:-34px;right:90px;}
.useSlick2 .slick-dots li.slick-active button{width:40px;background:#fff;border-radius:4px;color:#333;}
.useSlick2 .slick-dots li{display:none;width:auto;text-align:center;font-size:20px;font-weight:700;}
.useSlick2 .slick-dots li.slick-active{display:block;}
.useSlick2 .slick-dots li b{}
.useSlick2 .slick-dots li em{display:inline-block;margin:0 4px 0 1px;color:#333;}
.useSlick2_stop{position:absolute;top:-30px;right:30px;width:10px;height:13px;text-indent:-9999px;background:url("/images/n21/lvt/slide2_stop.png") 50% 50% no-repeat;z-index:1;}
.useSlick2_start{display:none;position:absolute;top:-30px;right:30px;width:8px;height:13px;text-indent:-9999px;background:url("/images/n21/lvt/slide2_start.png") 50% 50% no-repeat;z-index:1;}


/* ==============================================================================================================
= Overlay 효과 배경 기본스타일 지정
============================================================================================================== */
#overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);}
#overlay.active{display:block;}
#overlay2{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:11;}



/* 팝업 */
.mainPop{display:none;position:fixed;left:-1000px;top:-1000px;z-index:999;max-width:1000px;}
.mainPop .title{padding:0 20px;background:#3e35aa;border-top-left-radius:15px;border-top-right-radius:15px;}
.mainPop .title b{display:block;line-height:50px;color:#fff;font-size:18px;}
.mainPop .popImg img,
.mainPop .popImg iframe{display:block;max-width:100%;}
.mainPop .closeDay{padding:0 15px;background:#393939;border-bottom-left-radius:15px;border-bottom-right-radius:15px;color:#fff;font-weight:500;line-height:36px;}
.mainPop .closeDay .inputSet input{margin-top:-3px;}
.mainPop .closeDay .btnClose{display:block;position:absolute;right:15px;bottom:11px;width:15px;height:15px;background:url(/images/n21/main/icon_mainPop_close.png) no-repeat;text-indent:-9999em;}

/*메인팝업 유튜브 스트리밍용 */
/* .mainPop{width:1000px;} */
.popImg {position:relative;  overflow:hidden;}
.popImg iframe,
.popImg object,
.popImg embed {position:absolute; top:0; left:0; width:100%; height:100%;}

/* 팝업내링크 */
.pop-links{}
.pop-links ul{display:flex;width:100%;}
.pop-links ul li{width:25%;text-align:center;}
.pop-links ul li a{display:block;height:50px; color:#fff; font-size:20px;font-weight:500; letter-spacing:-1px; display:flex;width:100%; justify-content:center;align-items:center;transition:all 0.2s;}
.pop-links ul li a:hover{font-size:20px;}
.pop-links .link1{background-color:#008b95;}
.pop-links .link2{background-color:#4351b7;}
.pop-links .link3{background-color:#6ca907;}
.pop-links .link4{background-color:#cf6100;}

@media all and (max-width:640px){
	.pop-links ul{flex-wrap:wrap;}
	.pop-links ul li{width:50%;}
	.pop-links ul li a{font-size:16px;}
}