@charset "UTF-8";

* { box-sizing: border-box; }
body, div, ul, li, dl, dd, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form, figure, figcaption { margin: 0; padding: 0; }

.mo { display: none !important; }
@media(max-width:960px){
 .pc { display: none !important; }
 .mo { display: block !important; }
}

a { color: #121212; text-decoration: none; }
body, input, textarea, select, button, table {color: #121212; font-size: 14px; line-height: 1; letter-spacing: -0.5px; font-weight: 400; border:0; outline: 0; }
em, address { font-style: normal; }
ul, li, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 14px; font-weight: normal; }
img, fieldset { border: 0 none; }
button { border: 0; background: transparent; outline: none; cursor: pointer; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
caption, legend { display: none; }

.ir { position:absolute; left:-9999px; opacity:0; display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; }
.ir_pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } /* 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) */
.ir_wa { display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%; } /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */
.ir_so { overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px; } /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { /* .icon { background-image: url(../img/icon@2.png); background-size: 500px; } */}
input[type=text]:-ms-clear { display: none; }
textarea, input { -webkit-appearance: none; appearance: none; border-radius: 0; background: transparent; outline: none; border: 0; }

.clearfix { zoom:1; }
.clearfix:before, .clearfix:after { display: block; content: ''; line-height: 0; }
.clearfix:after { clear:both; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

input::-webkit-input-placeholder { color: #aaa; }
input:-ms-input-placeholder { color: #aaa; }
textarea::-webkit-input-placeholder { color: #aaa; }
textarea:-ms-input-placeholder { color: #aaa; }
label { cursor: pointer; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; border: 0; outline: none; background: transparent; }
select::-ms-expand { display: none; } /* IE 10, 11의 네이티브 화살표 숨기기 */
input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.before_hyphen { position: relative; padding-left: 9px; }
.before_hyphen::before { content: '-'; position: absolute; left: 0; top: 0px; }
.before_star { position: relative; padding-left: 15px; }
.before_star::before { content: '※'; position: absolute; left: 0; top: 0px; }

/* layout */
body { color:#333333;}
.visible_mo { display:none; }
.visible_pc { display:block; }
#wrap { overflow:hidden; width:100%; max-width:1920px; margin:0 auto; }
#container { position:relative; width:100%; /* min-height:700px; */padding-bottom: 0; margin:0 auto; }
#wrap .inner_wrap { max-width: 1200px; }

@media(max-width:767px) {
  #header .assist { display: none; }
  .headFix header { position:fixed; margin-top:0; }
  .head_banner { width:100%; height:100px; font-size: 26px; background: #f0518a; background-image: none !important; /*background-image: url('/static/img/common/header_banner_m.png'); background-size:100% auto; background-repeat:no-repeat; */ }
  .head_banner .inner { width:100%; display:block; }
  .head_banner .inner img { width: 25.13vw; }
  .head_banner p { padding-left:380px; display:block; }
  .head_banner p::after { display:inline-block; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 10px solid #333333; margin:0 0 0 15px; }
  .popup-open:not(.vid-popup-open) header { margin-top:0; }
}

header .head_top .search_box { display:flex; position: absolute; right:0; top: 27px; justify-content:flex-end; align-items:center; }
header .head_top .search_box input { width:160px; height:36px; font-size:14px; line-height:36px; padding:0 18px; border-radius:18px; outline:none; background:#f3f3f3; color:#333; }
header .head_top .search_box input::placeholder { color:#333; opacity:0.3; }
header .head_top .search_box .btn_search { width:24px; height:24px; display:block; margin-left:10px; }
header .head_top .search_box .btn_search img { width:100%; }
header .head_top .search_box .btn_close { width:48px; height:48px; display:flex; justify-content:center; align-items:center; /* margin-left: 32px; */position: absolute; top: 36px; right: 40px; display:none; }
header .head_top .search_box .btn_close img { width:38px; height:38px; }

.inner_wrap { margin: 0 auto; }

/* float pc */
.fixed_wrap { opacity:0; transition:opacity 0.3s; }
.fixed_wrap.show { opacity:1; }
.fixed_wrap { position: absolute; top: auto; bottom: 380px; right:30px; z-index: 1007; }
.fixed_wrap.fixed { position:fixed; bottom: 32px; top: auto; }
.fixed_wrap button { display:block; width:48px; height:48px; background-size:contain; border-radius:50%; transition:all 0.3s; }
.fixed_wrap .btn_float_open { display:block; background-color:#f0386c; background-image: url('../../img/common/ico_open.html'); margin-bottom:10px; }
.fixed_wrap .btn_float_open.show { background-color:#333; transform:rotate(45deg); }
.fixed_wrap .btn_top { background-color:rgba(0,0,0,0.5); background-image:url('../img/ico_top.html'); }
.fixed_wrap .btn_top:hover { background-color:rgba(0,0,0,1); }

/* [e] header */


/* [s] footer */
/* section banner */
.sec_banner { margin:80px 0 }
.sec_banner .sec_inner { width:100%; max-width:1200px; margin:0 auto; }
.sec_banner .sec_inner .banner { display:block; max-width: 1200px; height: 200px; border-radius: 24px; background-size: cover; background-position: center; }
.kgs .sec_banner .sec_inner .banner { margin-top:0; }
.banner_slider { overflow:hidden; margin-top: 0; position:relative; width:100%; max-width: 1200px; margin: 78px auto 90px; padding: 0 40px; }
.banner_slider .swiper-slide { display:inline-block; width: auto; }
.banner_slider .swiper-slide.swiper-slide-prev { opacity:0; }
.banner_slider .swiper-slide.swiper-slide-next+.swiper-slide + .swiper-slide { opacity:0; }
.banner_slider .swiper-slide a { margin: 0 20px; overflow: hidden; display: block; height: 64px; float: left; }
.banner_slider .swiper-slide a img { height: 64px; }
.banner_slider .swiper-button-prev,
.banner_slider .swiper-button-next { width:15px; height:25px; background-size:contain; background-repeat: no-repeat; top:calc(50% - 12px); margin:0; z-index: 10; }
.banner_slider .swiper-button-prev { background-image:url('../img/common/ico_arrow_prev_bk.html'); left: 0; }
.banner_slider .swiper-button-next { background-image:url('../img/common/ico_arrow_next_bk.html'); right: 0; }
.banner_slider .swiper-button-prev::after,
.banner_slider .swiper-button-next::after { font-size:0; }

/* banner fix */
.banner_slider .swiper-wrapper .swiper-slide:nth-child(1) { padding-left: 132px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(3) { padding-right: 132px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(4) { padding-left: 145px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(6) { padding-right: 145px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(7) { padding-left: 208px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(9) { padding-right: 208px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(10) { padding-left: 93px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(12) { padding-right: 93px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(13) { padding-left: 98px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(15) { padding-right: 98px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(16) { padding-left: 196px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(18) { padding-right: 196px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(19) { padding-left: 261px; }
.banner_slider .swiper-wrapper .swiper-slide:nth-child(21) { padding-right: 261px; }


@media(min-width:768px) and (max-width:1280px){
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(1) { padding-left: 10.3125vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(3) { padding-right: 10.3125vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(4) { padding-left: 11.3281vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(6) { padding-right: 11.3281vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(7) { padding-left: 16.2500vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(9) { padding-right: 16.2500vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(10) { padding-left: 7.2656vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(12) { padding-right: 7.2656vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(13) { padding-left: 7.6563vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(15) { padding-right: 7.6563vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(16) { padding-left: 15.3125vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(18) { padding-right: 15.3125vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(19) { padding-left: 20.3906vw; }
 .banner_slider .swiper-wrapper .swiper-slide:nth-child(21) { padding-right: 20.3906vw; }

}





/*[e] mobile vw */



/* 상단 띠배너 */
#wrap.top_banner { padding-top:221px; }
.top_banner header { margin-top: 60px; }

.headFix .head_banner { opacity:0; pointer-events:none; }
.head_banner { width:100%; max-width: 1920px; height:60px; background-color: #e40076; font-size: 18px; display:flex; justify-content:left; align-items:center; position: fixed; top:0; z-index: 0; }
.head_banner .inner { width:1200px; margin:0 auto; display:flex; justify-content: center; align-items: center; color: #fff; }
.head_banner p { display:flex; align-items:center; }
.head_banner p::after { content:''; display:block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #ffffff; margin:2px 0 0 10px; }

.popup-open .head_banner { padding-right:17px; }

@media(min-width:768px) and (max-width:1280px){
 #wrap.top_banner { padding-top:17.2656vw; }
 .top_banner header { margin-top: 4.6875vw; }

 .head_banner { width:100%; height:4.6875vw; font-size: 1.4063vw; }
 .head_banner .inner { width:93.7500vw; margin:0 auto; }
 .head_banner .inner img { width:auto; height:4.6875vw; }
 .head_banner p::after { /* border-top: 0.3906vw solid transparent; *//* border-bottom: 0.3906vw solid transparent; *//* border-left: 0.3906vw solid #333333; */border-width: 0.3906vw 0 0.3906vw 0.3906vw; margin:0.1563vw 0 0 0.7813vw; }
 }

@media(max-width:767px) {
 #wrap.top_banner { padding-top:218px!important; }
 #wrap.top_banner { padding-top:30.2778vw!important; }


 .top_banner header { margin-top: 100px; }
 .top_banner header { margin-top: 13.8889vw; }

 .headFix header { margin-top:0; }
 .main.headFix header { border-color:#fff; }
 .headFix.calendar .sort_area { position:fixed; top:16.3889vw; }
 .head_banner { width:100%; height:13.8889vw; font-size: 3.6111vw; background-image: url('../../img/common/header_banner_m.html'); background-size: auto 100%; }
 .head_banner { /* background: rgb(255,140,179); *//* background: linear-gradient(90deg, rgba(255,140,179,1) 10%, rgba(174,105,199,1) 60%, rgba(108,210,225,1) 100%); */ }
 .head_banner .inner { width:100%; justify-content: left; padding-left:5%; }
 .head_banner p { padding-left:52.7778vw; }
 .head_banner p::after { /* border-top: 1.1111vw solid transparent; *//* border-bottom: 1.1111vw solid transparent; *//* border-left: 1.3889vw solid #333333; */border-width: 1.1111vw 0 1.1111vw 1.3889vw; margin:0 0 0 2.0833vw; }

 .popup-open .head_banner { padding-right:0; }


 /*211230 수정*/
 .head_banner p { padding: 0 2vw 0 0; display:inline-block; letter-spacing: -0.02em; }
 .head_banner p::after { display:inline-block; content: none; }
 }

/* lottie */
.lottie { display:none; }
/* .lottie { display:none; width: 792px; height: 160px; position:absolute; top: 0; margin:0 auto; z-index:-1; left: calc(50% - 396px); }
@media(max-width:1200px){
 .lottie { width: 66.333vw; height:13.34vw; left: 17vw; }
 }
@media(max-width:767px){
 .lottie { width:100%; height: 16.3889vw; left: 0; }
 }*/

:root { --scrollbar-size: calc(52.7343vw - 52.7343%);}

/* note editor section */
.detail .sec_cont .sec_inner img { max-width:100%; border:0; margin:0; padding:0; margin-top:-1px }
.detail .sec_cont .sec_inner .note-video-clip { width:100%; height:55vw; max-width:996px; max-height:560px; }

@media (min-width: 768px) and (max-width: 1280px){
 .detail .sec_cont .sec_inner .note-video-clip { height:52.7343vw }
}


/* 웹에디터 폼 스타일(admin과 동일하게 유지) */
.sec_cont .sec_inner { line-height:normal; word-wrap:break-word; word-break:break-all; font-size:18px; }
.sec_cont .sec_inner h1 { font-size:24px; }
.sec_cont .sec_inner h2 { font-size:22px }
.sec_cont .sec_inner ol { list-style: decimal; padding-left:25px }
.sec_cont .sec_inner ol li { list-style: decimal; }
.sec_cont .sec_inner ul { list-style: disc; padding-left:25px }
.sec_cont .sec_inner ul li { list-style: disc; }
.sec_cont .sec_inner blockquote { padding-left:1em; border-left:3px solid #f86466 }
.sec_cont .sec_inner img { width:auto; }
.sec_cont .sec_inner hr { display: block; border: 0; height: 0; border-top: 1px solid #e6e6e6; }



@media(max-width:767px){
 .detail .sec_cont .sec_inner { width: 88.88vw; }
 .detail .sec_cont .sec_inner .note-video-clip { height:49.995vw }
 }


@media(max-width:959px) { footer .sns_area { position: relative; left:auto; right:auto; top:auto; margin-top:20px; gap:3px }
 footer .sns_area a { width:40px; height:40px; }
 }