@charset "utf-8";

/*********************************************/
/************ REUSABLE COMPONENTS ************/
/*********************************************/


/* sliderController */
.sliderController{display: flex; flex-wrap: wrap; align-items: center; gap: 52px; margin: 49px auto 0;}
.sliderController .progress{flex: 1; position: relative; display: inline-block; vertical-align: middle; height: 2px; margin: 0 auto 0; background: rgba(255,255,255,0.3);}
.sliderController .progress .bar{position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #fff}
.sliderController .progress .bar.play{animation: width 4s linear; /* js : autoPlaySpeed 와 동일하게 맞추기 */}
.sliderController .progress .bar.pause{animation-play-state: paused;}
.sliderController .progress .slick-dots{position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; width: 100%; display: flex;}
.sliderController .progress .slick-dots > li{flex: 1; opacity: 0;}
.sliderController .progress .slick-dots > li:hover{opacity: 0.025;}
.sliderController .progress .slick-dots > li button{background: none; border: 1px solid #111; display: block; width: 100%; color: transparent; background-color: #111; border-radius: 5px;}

.sliderController .control{display: flex; gap: 12px;}
.sliderController .control .btn_slide{display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; font-size: 0; background-color: transparent;}
.sliderController .control .btn_slide:before{content: ""; width: 12px; height: 12px;}
.sliderController .control .btn_prev:before{border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(-45deg); margin: 0 -7px 0 0;}
.sliderController .control .btn_next:before{border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); margin: 0 7px 0 0;}
.sliderController .control .btn_stop{position: relative; gap: 3.5px;}
.sliderController .control .btn_stop:before,
.sliderController .control .btn_stop:after{content: ""; display: block; width: 2px; height: 15px; background: #fff;}
.sliderController .control .btn_stop.on:before{width: auto; height: auto; border-width: 9px; border-style: solid; border-color: transparent transparent transparent #fff; background: transparent;  margin-left: 15px;}
.sliderController .control .btn_stop.on:after{display: none;}

.sliderController.dark .progress{background: rgba(17,17,17,0.1);}
.sliderController.dark .progress .bar{background: var(--main);}
.sliderController.dark .control .btn_prev:before{border-color: var(--main);}
.sliderController.dark .control .btn_next:before{border-color: var(--main);}
.sliderController.dark .control .btn_stop:before,
.sliderController.dark .control .btn_stop:after{background: var(--main);}
.sliderController.dark .control .btn_stop.on:before{border-color: transparent transparent transparent var(--main); background: transparent;}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .sliderController{gap: 30px;}

    .transform_slider_wrap.under860 .sliderController{gap: 21px; display: flex !important;}
    .transform_slider_wrap.under860 .sliderController .control{gap: 6px;}
    .transform_slider_wrap.under860 .sliderController .control .btn_ks{width: 20px; height: 20px;}
    .transform_slider_wrap.under860 .sliderController .control .btn_ks:before{width: 9px; height: 9px;}
    .transform_slider_wrap.under860 .sliderController .control .btn_ks_prev:before{margin: 0 -5px 0 0;}
    .transform_slider_wrap.under860 .sliderController .control .btn_ks_next:before{margin: 0 5px 0 0;}
    .transform_slider_wrap.under860 .sliderController .control .btn_ks_stop{gap: 2.5px;}
    .transform_slider_wrap.under860 .sliderController .control .btn_ks_stop:before,
    .transform_slider_wrap.under860 .sliderController .control .btn_ks_stop:after{width: 2px; height: 12px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .sliderController{gap: 21px; display: flex !important;}
    .sliderController .control{gap: 6px;}
    .sliderController .control .btn_ks{width: 20px; height: 20px;}
    .sliderController .control .btn_ks:before{width: 9px; height: 9px;}
    .sliderController .control .btn_ks_prev:before{margin: 0 -5px 0 0;}
    .sliderController .control .btn_ks_next:before{margin: 0 5px 0 0;}
    .sliderController .control .btn_ks_stop{gap: 2.5px;}
    .sliderController .control .btn_ks_stop:before,
    .sliderController .control .btn_ks_stop:after{width: 2px; height: 12px;}
}


/* chkbox2 */
.chkbox2{padding: 0 0 0 3px;}
.chkbox2 input{position: absolute; left: -9999px; padding: 0; margin: 0; width: 0; height: 0;}
.chkbox2 input + label{display: inline-flex; gap: 4px; align-items: center; font-size: 14px; font-weight: var(--fwm); color: var(--gray_dark); line-height: 1; text-transform: uppercase;}
.chkbox2 input:checked + label{font-weight: var(--fwb); color: var(--main);}
.chkbox2 input + label span{position: relative; display: inline-block; margin: -1px 0 0; width: 20px; height: 20px; border-radius: 50%; background-color: var(--white); border: 2px solid var(--main);}
.chkbox2 input + label span.theme_yellow{background-color: var(--theme_yellow) !important; border-color: transparent !important;}
.chkbox2 input + label span.theme_mint{background-color: var(--theme_mint) !important; border-color: transparent !important;}
.chkbox2 input + label span.theme_navy{background-color: var(--theme_navy) !important; border-color: transparent !important;}
.chkbox2 input:checked + label span{background-color: var(--main); border-color: transparent;}
.chkbox2 input + label span:before{content: ""; position: absolute; top: 5px; left: 4px; width: 8px; height: 5px; border-left: 2px solid var(--main); border-bottom: 2px solid var(--main); transform: rotate(-45deg);}
.chkbox2 input:checked + label span:before{border-color: var(--white);}

.chkbox2 input:checked + label span.theme_yellow{border-color: var(--main) !important;}
.chkbox2 input + label span.theme_yellow:before{border-color: transparent !important;}
.chkbox2 input:checked + label span.theme_yellow:before{border-color: var(--main) !important;}

.chkbox2 input:checked + label span.theme_mint{border-color: var(--main) !important;}
.chkbox2 input + label span.theme_mint:before{border-color: transparent !important;}
.chkbox2 input:checked + label span.theme_mint:before{border-color: var(--main) !important;}

.chkbox2 input:checked + label span.theme_navy{border-color: var(--main) !important;}
.chkbox2 input + label span.theme_navy:before{border-color: transparent !important;}
.chkbox2 input:checked + label span.theme_navy:before{border-color: var(--white) !important;}

.chkbox2.gray input + label span{border-color: var(--gray_dark);}
.chkbox2.gray input:checked + label span{background-color: var(--gray_dark);}
.chkbox2.gray input + label span:before{border-color: var(--gray_dark);}
.chkbox2.gray input:checked + label span:before{border-color: var(--white);}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .chkbox2 input + label{font-size: 16px;}
}


/* chk_area */
.chk_area{padding: 54px 0 0;}
.chk_area .chkbox2 input + label{vertical-align: middle; font-size: 1rem; font-weight: var(--fwm); color: var(--main); gap: 8px;}
.chk_area .chkbox2 input + label span{margin: 0 0 0;}


/* lineup_badge */
.lineup_badge{position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; justify-content: center; text-align: center; width: auto; height: 23px; padding: 0 10.5px; font-size: 13px; font-weight: var(--fweb_en);}
.lineup_badge.light{background-color: var(--theme_yellow); color: var(--main);}
.lineup_badge.basic{background-color: var(--theme_mint); color: var(--main);}
.lineup_badge.plus{background-color: var(--theme_navy); color: var(--white);}
.lineup_badge.plus:after{content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 0 0 1px; background: url("../img/main/type_plus_s.svg") no-repeat center;}
.lineup_badge em{visibility: hidden; font-size: 0; transition: 0.1s;}
.lb_trigger:hover .lineup_badge em,
.lb_trigger:focus .lineup_badge em{visibility: visible; font-size: inherit;}


/* lineup_list */
.lineup_list{display: flex;}
.lineup_list > li{flex: 1; transition: 0.2s;}
.lineup_list > li:hover,
.lineup_list > li:focus{flex: 1.05;}
.lineup_list > li > a{display: flex; flex-direction: column; gap: 60px; padding: 38px 42px 40px; height: 100%;}
.lineup_list > li > a.light{background-color: var(--theme_yellow);}
.lineup_list > li > a.basic{background-color: var(--theme_mint);}
.lineup_list > li > a.plus{background-color: var(--theme_navy); color: #fff;}
.lineup_list > li .title{display: flex; justify-content: space-between; align-items: center; line-height: 1;}
.lineup_list > li .title strong{flex: 0 0 auto; font-size: 18px; font-weight: var(--fwb_en);}
.lineup_list > li .title strong .plus{display: inline-block; width: 13px; height: 13px; margin: 0 0 0 2px; background: url("../img/main/type_plus.svg") no-repeat center}
.lineup_list > li .title p{font-size: 14px; padding: 2px 0 0; text-align: right;}
.lineup_list > li .title p br{display: none;}
.lineup_list > li > a.light .title p{color: var(--theme_yellow_sub);}
.lineup_list > li > a.basic .title p{color: var(--theme_mint_sub);}
.lineup_list > li > a.plus .title p{color: var(--theme_navy_sub);}
.lineup_list > li .des{position: relative; font-size: 15px; font-weight: var(--fwm_en); line-height: 1.2; padding: 0 31px 0 0;}
.lineup_list > li .des em{font-size: 30px; font-weight: var(--fwb_en); padding: 0 2px 0 1px;}
.lineup_list > li .des .unit{font-size: 13px; font-weight: var(--fwr);}
.lineup_list > li .des .sig{display: inline-block; vertical-align: top; margin: 8px 0 0 1px; font-size: 10px; font-weight: var(--fwb_en); line-height: 21px; border-radius: 21px; box-shadow: inset 0 0 0 1px #000; padding: 0 12px; color: #000; letter-spacing: 0.01em;}
.lineup_list > li .des .arr{position: absolute; top: 9px; right: 0; width: 21px; height: 21px; background: url("../img/contents/lineup/lineup_list_arr.svg") no-repeat center; background-size: contain;}
.lineup_list > li .des .arr.white{filter: brightness(0) invert(1);}

.lineup_list.vertical{flex-direction: column; gap: 12px;}

#side.large .lineup_list.vertical{margin-top: calc( var(--between_sec) * 0.5 );}
@media (max-width: 1500px), (min-width: 1080px) and (orientation: portrait) {
    .lineup_list > li > a{padding: 35px 30px 40px;}
}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .lineup_list > li:hover,
    .lineup_list > li:focus{flex: 1;}
    .lineup_list > li > a{padding: 30px 25px 40px;}

    #side.large .lineup_list.vertical{flex-direction: row; gap: 0; display: none !important;}
}
@media (max-width: 1200px), (min-width: 1080px) and (orientation: portrait) {
    .lineup_list > li .title{align-items: flex-start; line-height: 1.2;}
    .lineup_list > li .title p br{display: block;}
}
@media (max-width: 1040px), (min-width: 1080px) and (orientation: portrait) {
    #side.large .lineup_list.vertical{flex-direction: column;}
}
@media (max-width: 960px), (min-width: 1080px) and (orientation: portrait) {
    .lineup_list{flex-direction: column;}
    .lineup_list > li .title p br{display: none;}
}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .lineup_list > li .des{font-size: 14px;}
    .lineup_list > li .des em{font-size: 27px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .lineup_list > li > a{padding: 24px 24px; gap: 42.5px;}
    .lineup_list > li .title p{line-height: 1.4;}
    .lineup_list > li .title p br{display: block;}
}


/* ban */
.ban{display: flex; flex-wrap: wrap; color: #fff;}
.ban > li{width: 50%;}
.ban > li > a{position: relative; display: block; width: 100%; height: 100%; padding: 46px 42px 43px 42px; background-color: var(--theme_navy);}
.ban .top{position: relative; font-size: 12px; font-weight: var(--fwb); letter-spacing: 1px; color: var(--theme_mint); line-height: 1.2;}
.ban .title{position: relative; font-size: 26px; font-weight: var(--fwb); line-height: 1.3; padding: 18px 0 0;}
.ban .sub{position: relative; font-size: 14px; font-weight: var(--fwm); color: #f5f5f5; padding: 10px 0 0;}

.ban > li > a:before{content: ""; position: absolute; z-index: 0; bottom: 0; right: 0; height: 100%; /* height: 260px; */ /* width: 48.612%; */ aspect-ratio: 541 / 200; background-repeat: no-repeat; background-size: contain; background-position: bottom center; transition: 0.25s ease-out;}
.ban > li > a.openhouse:before{background-image: url("../img/main/ban_material_bg_1.png");}

.ban > li > a.event:before {width: 350px; height:auto; aspect-ratio: 350 / 260;}
.ban > li > a.event{background-color: #f5f5f5; color: var(--theme_navy);}
/* .ban > li > a.event:before{background-image: url("../img/main/chimsan_banner.png"); width: 500px; aspect-ratio: 500 / 234;} */
.ban > li > a.event:before{background-image: url("../img/main/ban_andaward_bg.png");}
.ban > li > a.event .top{color: #a6a6a6;}
.ban > li > a.event .sub {color: var(--gray_dark);}
@media (max-width: 1500px), (min-width: 1080px) and (orientation: portrait) {
    .ban > li > a{padding: 40px 30px;}
}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .ban > li > a{padding: 40px 25px;}
    .ban > li > a.event:before{width: 53%; max-width: 350px;}
    .ban .title{font-size: 22px;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .ban > li{width: 100%;}
    .ban > li + li{margin-top: 40px;}
    .ban > li > a.event:before{width: 300px; max-width: none;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .ban > li + li{margin-top: 40px;}
    .ban > li > a{padding: 24px 24px 24px; overflow:hidden;}
    .ban > li > a.event:before{width: 40%;}
    .ban .title{font-size: 17px; padding: 10px 0 0;}
    .ban .sub{font-size: 13px;}
    .ban .sub span {display:none;}
}
@media (max-width: 460px), (min-width: 1080px) and (orientation: portrait) {
    .ban > li + li{margin-top: 20px;}
}


/* sns_list */
.sns_list{display: flex; flex-wrap: wrap; gap: 8px;}
.sns_list > li{line-height: 0;}
.sns_list > li a{display: block; width: 24px; height: 24px; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: cover;}
.sns_list > li a.instagram{background-image: url("../img/common/ico_sns_instagram_nobd.svg");}
.sns_list > li a.naverblog{background-image: url("../img/common/ico_sns_naverblog_nobd.svg");}
.sns_list > li a.youtube{background-image: url("../img/common/ico_sns_youtube_nobd.svg");}
.sns_list > li a.kakaotalk{background-image: url("../img/common/ico_sns_kakaotalk_nobd.svg");}


/* btn_wrap */
.btn_wrap{display: flex; justify-content: center;}
.btn_wrap.left{justify-content: flex-start;}


/* btn */
.btn{display: block; font-size: 1rem; font-weight: var(--fwb); padding: 18px 10px; width: 210px; text-align: center; box-shadow: inset 0 0 0 1px var(--gray); background-color: var(--white);}

.btn_radius{border-radius: 100px;}

.btn_sky{background-color: var(--theme_sky); box-shadow: inset 0 0 0 1px var(--theme_sky); color: var(--theme_navy);}
.btn_mint{background-color: var(--theme_mint); box-shadow: inset 0 0 0 1px var(--theme_mint); color: var(--main);}
.btn_yellow{background-color: var(--theme_yellow); box-shadow: inset 0 0 0 1px var(--theme_yellow); color: var(--theme_navy);}
.btn_black{background-color: var(--main); box-shadow: inset 0 0 0 1px var(--main); color: var(--white);}
.btn_theme_mint{background-color: var(--theme_mint); box-shadow: inset 0 0 0 1px var(--theme_mint); color: var(--white);}
.btn.bd_black{box-shadow: inset 0 0 0 1px var(--main);}
.btn.hasArr > span{display: inline-block; align-items: center; gap: 4px;}
.btn.hasArr > span:after{content: ""; display: inline-block; vertical-align: middle; margin: -4px 0 0 3px; width: 9px; height: 9px; border-top: 2px solid #111; border-right: 2px solid #111; transform: rotate(45deg);}
.btn.hasArr.btn_black > span:after{border-color: var(--white);}
.btn.hasBeforeIco{}
.btn.hasBeforeIco > span{}
.btn.hasBeforeIco > span:before{content: ""; display: inline-block; vertical-align: middle; margin: -4px 6px 0 0; width: 16px; height: 16px; background: url("../img/contents/hasBeforeIcoList.png") no-repeat center;}
.btn.wa{width: auto; padding-left: 20px; padding-right: 20px;}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .btn{padding: 15px 10px;}
    .btn.hasArr > span:after{margin: -2px 0 0 3px;}
}


/* round_btn */
.round_btn{display: inline-block; padding: 0 64px; line-height: 60px; border-radius: 60px; font-weight: var(--fwb); border: 1px solid #222; color: #222; transition: 0.1s;}
.round_btn span{display: flex; align-items: center;}
.round_btn span:after{content: ""; display: inline-block; vertical-align: middle; margin: 0 0 0 5px; width: 10px; height: 10px; border-top: 2px solid #222; border-right: 2px solid #222; transform: rotate(45deg);}

.round_btn.transparent{color: #fff; background-color: transparent; border-color: rgba(255,255,255,0.3);}
.round_btn.transparent span:after{border-color: #fff;}
.round_btn.transparent:hover{background-color: #fff; color: var(--theme_mint);}
.round_btn.transparent:hover span:after{border-color: var(--theme_mint);}

.round_btn.black{color: #fff; background-color: #222; border-color: #222;}

.round_btn.white{color: #2b334d; background-color: #fff; border-color: #fff;}
.round_btn.white span:after{border-color: #2b334d;}
.round_btn.white:hover{color: var(--theme_mint);}
.round_btn.white:hover span:after{border-color: var(--theme_mint);}

.round_btn.navy{color: #fff; background-color: #0d1b2c; border-color: #0d1b2c;}
.round_btn.navy span:after{border-color: #fff;}
.round_btn.navy:hover{color: var(--theme_mint);}
.round_btn.navy:hover span:after{border-color: var(--theme_mint);}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .round_btn{line-height: 52px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .round_btn{line-height: 44px; padding: 0 40px; font-size: 14px;}
}


/* note_list */
.note_list{padding: 24px 0 0;}
.note_list > li{position: relative; padding: 0 0 0 17px; color: var(--gray_darkest); line-height: 1.3; font-size: 13px;}
.note_list > li:before{content: "※"; position: absolute; top: 0; left: 0;}
.note_list > li + li{margin-top: 5px;}


/* dot_list */
.dot_list{padding: 4px 0 0;}
.dot_list > li{position: relative; padding: 0 0 0 11px; color: var(--gray_darkest); line-height: 1.45; font-size: 13px;}
.dot_list > li:before{content: "·"; position: absolute; top: 0; left: 2.5px;}
.dot_list > li + li{margin-top: 3.5px;}


/* circle_list */
.circle_list{padding: 10px 0 0;}
.circle_list > li{position: relative; padding: 0 0 0 14px; color: var(--main); line-height: 1; font-size: 1rem; font-weight: var(--fwm);}
.circle_list > li:before{content: ""; position: absolute; top: 5px; left: 0; width: 6px; height: 6px; border-radius: 50%; background-color: var(--main);}
.circle_list > li + li{margin-top: 12px;}


/* chkShape_list */
.chkShape_list{}
.chkShape_list > li{position: relative; padding: 0 0 0 30px; font-size: 17px; font-weight: var(--fwm); line-height: 1.3;}
.chkShape_list > li + li{margin-top: 16px;}
.chkShape_list > li .shape{position: absolute; top: 6px; left: 0; display: inline-block; width: 20px; height: 7px; background-color: transparent; transform: rotate(-45deg);}
.chkShape_list > li .shape:before{content: ""; position: absolute; top: 0; left: 0; height: 0%; width: 2px; background-color: var(--main); transition: 0.1s;}
.chkShape_list > li .shape:after{content: ""; position: absolute; bottom: -1px; left: 0; height: 2px; width: 0%; background-color: var(--main); transition: 0.1s; transition-delay: 0.1s;}
.chkShape_list.on > li .shape:before{height: 100%;}
.chkShape_list.on > li .shape:after{width: 100%;}

.chkShape_list > li:nth-child(2) .shape:before{transition: 0.1s; transition-delay: 0.2s;}
.chkShape_list > li:nth-child(2) .shape:after{transition: 0.1s; transition-delay: 0.3s;}

.chkShape_list > li:nth-child(3) .shape:before{transition: 0.1s; transition-delay: 0.3s;}
.chkShape_list > li:nth-child(3) .shape:after{transition: 0.1s; transition-delay: 0.4s;}

.chkShape_list > li:nth-child(4) .shape:before{transition: 0.1s; transition-delay: 0.4s;}
.chkShape_list > li:nth-child(4) .shape:after{transition: 0.1s; transition-delay: 0.5s;}

.chkShape_list > li:nth-child(5) .shape:before{transition: 0.1s; transition-delay: 0.5s;}
.chkShape_list > li:nth-child(5) .shape:after{transition: 0.1s; transition-delay: 0.6s;}

.chkShape_list > li:nth-child(6) .shape:before{transition: 0.1s; transition-delay: 0.6s;}
.chkShape_list > li:nth-child(6) .shape:after{transition: 0.1s; transition-delay: 0.7s;}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .chkShape_list > li{padding: 0 0 0 20px;}
    .chkShape_list > li + li{margin-top: 10px;}
    .chkShape_list > li .shape{width: 9px; height: 5px; top: 5px;}
}


/* chkShape_small */
.chkShape_small{padding: 10px 0 0;}
.chkShape_small > li{position: relative; padding: 0 0 0 20px;}
.chkShape_small > li:before{content: ""; position: absolute; top: 4px; left: 0; display: block; width: 16px; height: 16px; background: url("../img/contents/chkShape_small.svg") no-repeat center / contain;}
.chkShape_small > li + li{margin: 6px 0 0;}


/* grid_wrap */
.grid_wrap{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(auto-fill, minmax(10px, auto)); grid-row-gap: 44px; grid-column-gap: var(--gap); margin: 0 !important;}
.grid_wrap.col2{grid-template-columns: repeat(2, 1fr); grid-row-gap: 48px; grid-column-gap: 36px;}
.grid_wrap.col3{grid-template-columns: repeat(3, 1fr);}
.grid_wrap.col4{grid-template-columns: repeat(4, 1fr); grid-row-gap: 48px; grid-column-gap: 28px;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .grid_wrap.xm_col1{grid-template-columns: repeat(1, 1fr);}
    .grid_wrap.xm_col2{grid-template-columns: repeat(2, 1fr);}
    .grid_wrap.xm_col3{grid-template-columns: repeat(3, 1fr); grid-row-gap: 44px; grid-column-gap: var(--gap);}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .grid_wrap.mm_col1{grid-template-columns: repeat(1, 1fr);}
    .grid_wrap.mm_col2{grid-template-columns: repeat(2, 1fr);}
    .grid_wrap.mm_col3{grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .grid_wrap{grid-row-gap: 29px;}
    .grid_wrap.s_col1{grid-template-columns: repeat(1, 1fr);}
    .grid_wrap.s_col2{grid-template-columns: repeat(2, 1fr); grid-row-gap: 29px;  grid-column-gap: 15px;}
    .grid_wrap.s_col3{grid-template-columns: repeat(3, 1fr);}
}


/* case_list */
.case_list{display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto-fill, minmax(10px, auto)); grid-row-gap: 44px; grid-column-gap: 21px; margin: 0 !important;}
.case_list .card .img{aspect-ratio: 344 / 211;}
.case_list .card .txt{padding: 24px 0 0;}
.case_list .card .txt .price{font-size: 28px;}
.case_list .card .txt .price .unit{font-size: 0.54em;}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .case_list{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .case_list{grid-template-columns: repeat(1, 1fr);}
}


/* case_list2 */
.case_list2{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(auto-fill, minmax(20px, auto)); grid-row-gap: 48px; grid-column-gap: var(--gap);}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .case_list2{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .case_list2{grid-template-columns: repeat(1, 1fr); grid-row-gap: 29px;}
}


/* grid_merge */
.grid_merge{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-row-gap: var(--gap); grid-column-gap: var(--gap);}
.grid_merge.left{}
.grid_merge.left .card:nth-child(1){grid-column: 1 / 2; grid-row: 1 / 3;}
.grid_merge.left .card:nth-child(1) a{height: 100%; display: flex; flex-direction: column;}
.grid_merge.left .card:nth-child(1) .img{flex: 1;}
.grid_merge.left .card:nth-child(1) .txt{flex: 0 0 auto; margin-top: auto;}
.grid_merge.right{}
.grid_merge.right .card:nth-child(3){grid-column: 3 / 4; grid-row: 1 / 3;}
.grid_merge.right .card:nth-child(3) a{height: 100%; display: flex; flex-direction: column;}
.grid_merge.right .card:nth-child(3) .img{flex: 1;}
.grid_merge.right .card:nth-child(3) .txt{flex: 0 0 auto; margin-top: auto;}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .grid_merge{grid-template-columns: repeat(2, minmax(0, 1fr));}

    .grid_merge.right .card:nth-child(3){grid-column: 2 / 3; grid-row: 1 / 3;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .grid_merge{grid-template-columns: repeat(1, minmax(0, 1fr));}

    .grid_merge.right .card:nth-child(3){grid-column: initial; grid-row: initial;}
}


/* card */
.card{/* width: auto !important; */ container-name: div-container; container-type: inline-size; background: var(--white);}
.card.hasPadding{}
.card > a{display: block;}
.card .img{position: relative; display: block; aspect-ratio: 464 / 286; overflow: hidden;}
.card .img.bdbg{background-color: #f5f5f5; border: 1px solid var(--gray);}
.card .img.rate2{aspect-ratio: 336 / 400;}
.card .img.rate3{aspect-ratio: 339 / 286;}
.card .img.rate4{aspect-ratio: 702 / 400;}
.card .img.rate5{aspect-ratio: 460 / 294;}
.card .img img{width: 100%; height: 100%; object-fit: cover;}
.card:has(.txt.hasPad){border-bottom: 1px solid var(--gray);}

.card .ytb_frame{position: relative; padding-bottom: 100%; /* width: 100%; */ /* 여백 때문에 너비 늘리고 마진레프트 음수로 가운데 정렬 ▶ */ width: 114%; margin-left: -7%; margin-top: -18.1%; height: 0; overflow: hidden;}
.card .ytb_frame iframe{position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%;}
.card .ytb_frame:after{content: ""; position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; /* 유튜브 영역이 클릭되지 않도록 덮는 용도 */}

.card .upper_layer{}
.card .upper_layer img{}
.card .upper_layer img.upper_layer_img{transform: none; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.card .txt{position: relative; padding: 29px 0 0;}
.card.hasPadding .txt{padding: var(--card_in_pad_sero) var(--card_in_pad_garo);}
.card .txt.hasPad{padding: 36px clamp(20px,2vw,36px);}
.card .txt .sup{color: var(--gray_dark); font-weight: var(--fwr); font-size: 14px; line-height: 1.4; padding: 0 0 6px;}
.card .txt .sup br{display: none;}

.card .txt .title{}
.card .txt .title.hasSide{display: flex; align-items: center; gap: 12px;}
.card .txt .title h5{display: flex; font-size: 20px; font-weight: var(--fwb); line-height: 1.35;}
.card .txt .title.fzs h5{font-size: 19px;}
.card .txt .title h5 .size{margin-left: auto; line-height: 1; font-size: 23px; font-weight: var(--fwb_en);}
.card .txt .title h5 .size .unit{font-size: 0.65em; font-weight: var(--fwm_en); padding: 0 0 0 1px;}
.card .txt .title h5 .badge{display: inline-block; font-size: 12px; font-weight: var(--fwb_en); padding: 0 13px 1px; box-shadow: inset 0 0 0 1px var(--main); line-height: 24px; border-radius: 26px; text-transform: uppercase; vertical-align: middle; margin: -3px 0 0 0;}
.card .txt .title h5 .badge.bold_badge{box-shadow: inset 0 0 0 2px var(--main); margin-left: 6px; line-height: 21px; padding: 0 12px 1px;}
.card .txt .title .badge_list{display: flex; flex-wrap: wrap; gap: 6px;}
.card .txt .title .badge_list .btn_badge{line-height: 28px; background-color: var(--main); font-size: 12px; font-weight: var(--fwb); color: var(--white); padding: 0 10.5px;}
.card .txt .title .badge_list .btn_badge.white{background-color: var(--white); color: var(--main); box-shadow: inset 0 0 0 1px #111;}

.card.hasPadding .title h5{position: relative; display: block; padding: 0 70px 0 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.card.hasPadding .title h5 .size{position: absolute; top: 0; right: 0;}

.card .txt .tags{display: flex; flex-wrap: wrap; padding: 8px 0 0; margin: 0; font-family: 'Pretendard';}
.card .txt .tags > li{font-size: 14px; color: #777; font-weight: var(--fwr); width: auto !important; float: none; line-height: 21px;}
.card .txt .tags > li.noneData{font-size: 0;}
.card .txt .tags > li + li{}
/* .card .txt .tags > li + li:before{content: ""; display: inline-block; vertical-align: middle; margin: -3px 11px 0 13px; width: 1px; height: 16px; background-color: var(--gray);} */
.card .txt .tags > li:not(.noneData) + li:before{content: ""; display: inline-block; vertical-align: middle; margin: -3px 11px 0 13px; width: 1px; height: 16px; background-color: var(--gray);}
.card .txt .tags > li strong{font-weight: var(--fwsb_en);}

.card .txt .price{position: relative; font-size: 30px; font-weight: var(--fwb_en); line-height: 1; padding: 24px 0 0;}
.card .txt .price .unit{font-size: 0.6em; font-weight: var(--fwm); margin-left: 2px;}
.card .txt .priceHidden{position: relative; font-size: 15px; font-weight: var(--fwr); color: var(--gray_hide); line-height: 1.8; padding: 27px 0 0 0; font-family: 'Pretendard';}
.card .txt .priceHidden.icoHide{padding-left: 30px;}
.card .txt .priceHidden.icoHide:before{content: ""; position: absolute; top: 28px; left: 0; width: 22px; aspect-ratio: 1 / 1; background: url("../img/common/ico_hide.svg") top left no-repeat; background-size: contain;}
.card .txt .price span.view-guide:before {content:''; width:10px; height:10px; background:#f3eae5; transform:rotate(45deg); position:absolute; top:10px; left:-5px;}
.card .txt .price span.view-guide {position:absolute; top:50%; transform:translateY(-50%); right:0; display:block; line-height:30px; height:30px; vertical-align: middle; border-radius:4px; width:auto; padding:0 10px; background:#f3eae5; font-size: 13px; display: none !important;}
.card .txt .price span.view-guide lord-icon {margin-right:3px; margin-top: -6px; vertical-align: middle;}
.card .txt .price span.view-guide em {}

.card .txt .info_list{display: flex; flex-direction: column; gap: 8px; padding: 18px 0 0; font-size: 15px; line-height: 1.4;}
.card .txt .info_list > div{display: flex;}
.card .txt .info_list dt{flex: 0 0 auto; width: 80px; color: var(--gray_dark);}
.card .txt .info_list dd{flex: 1; font-weight: var(--fwm); color: var(--gray_darkest);}
.card .txt .info_list dd em{}
.card .txt .info_list dd .m_lineChange > li{display: inline;}

.card .txt .desc{font-size: 16px; font-weight: var(--fwl); font-family: 'Pretendard'; color: #666; line-height: 1.5; padding: 12px 0 0;}
.card .txt.hasPad .desc{color: var(--main); padding: 8px 0 0; word-break: break-all;}

.card .txt .btn_wrap{display: flex; flex-wrap: wrap; gap: 4px; margin: 20px 0 0;}
.card .txt .btn_wrap .btn{flex: 1;}

.card .txt .pjt_hash{position: absolute; bottom: 2px; right: 0;}
.card.hasPadding .txt .pjt_hash{display: none !important; bottom: calc( var(--card_in_pad_sero) + 2px ); right: calc( var(--card_in_pad_garo) );}

.card > a:has(.full){width: 100%; height: 100%;}
.card .full{width: 100%; height: 100%; overflow: hidden;}
.card .link{}
.card .full.link{}
.card .full img{width: 100%; height: 100%; object-fit: cover;}
@media (max-width: 1400px), (min-width: 1080px) and (orientation: portrait) {
    
}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .card .txt{padding: 17px 0 0;}
    .card .txt .title.hasSide{flex-direction: column; align-items: flex-start; gap: 8px;}
    .card .txt .title h5{font-size: 18px;}
    .card .txt .title h5 .size{font-size: 21px;}
    .card .txt .price{font-size: 27px;}
    .card .txt .priceHidden{padding: 24px 0 0 0;}
    .card .txt .info_list{font-size: 14px; padding: 5px 0 0;}
    .card .txt .desc{font-size: 14px; padding: 5px 0 0; word-break: break-all;}
}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .card:has(.txt.hasPad){border-bottom: none;}
    .card .txt.hasPad{padding: 20px 0 0;}
    .card .txt .sup{font-size: 13px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .card .txt .priceHidden{font-size: 16px;}
    .card .txt .sup{display: none;}
    .card .txt .title h5 .size{font-size: 21px;}
    .card .txt .title h5 .badge{padding: 1px 13px 0;}
    .card .txt .tags{padding: 8px 0 0;}
    .card .txt .price{padding: 9px 0 0;}
    .card .txt .priceHidden{padding: 9px 0 0;}
    .card .txt .priceHidden.icoHide:before{top: 11px;}
    .card .txt .info_list dd .m_lineChange > li{display: block;}
    .card .txt .info_list dd .m_lineChange > li .m_none{display: none;}
}
@media (max-width: 460px), (min-width: 1080px) and (orientation: portrait) {

}
@container div-container (max-width: 400px) {
    /* 컨테이너 = .card , 컨테이너 쿼리를 적용하는 컨테이너 자체에는 스타일 적용 불가 */
    .card .txt .pjt_hash{position: static; bottom: auto; right: auto; padding: 10px 0 0;}
}



/* design_card */
.design_card{
    background-color: var(--gray); color: #fff;

    &.theme_mint{background-color: var(--theme_mint);}
    &.theme_skyblue{background-color: var(--theme_skyblue);}
    &.theme_pastelblue{background-color: var(--theme_pastelblue);}
    &.theme_violet{background-color: var(--theme_violet);}
    &.theme_mander{background-color: var(--theme_mander);}
    &.theme_greeny{background-color: var(--theme_greeny);}

    & > a{display: flex; flex-direction: column; width: 100%; height: 100%;}

    & .img{flex: 0 0 auto; background-color: #ddd; aspect-ratio: 464 / 286; overflow: hidden;}
    & .img img{width: 100%; height: 100%; object-fit: cover;}
    & .txt{flex: 1; padding: 40px 40px; display: flex; flex-direction: column; aspect-ratio: 464 / 446; width: 100%;}
    & .txt .des{}
    & .txt .des .sup{padding: 0 0 17px; font-size: 12px; font-weight: var(--fwb); text-transform: uppercase;}
    & .txt .des .tle{font-size: clamp(24px,2vw,36px); font-weight: var(--fwel);}
    & .txt .des .tle b{font-weight: var(--fwb);}
    & .txt .des .sub{padding: 23px 0 0; font-weight: var(--fwr); font-family: 'Pretendard';}
    & .txt .des .sub p{padding: 0 0 5px; font-size: 18px; font-weight: var(--fwb); font-family: 'SCDream';}
    & .txt .des .sub p .lc{display: none;}
    & .txt .bot{margin-top: auto;}
    & .txt .bot .view{display: flex; flex-wrap: wrap; align-items: center; padding: 0 0 14px; border-bottom: 1px solid #fff;}
    & .txt .bot .view:after{content: ""; display: inline-block; width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); margin-left: auto; margin-right: 12px;}
    & .txt .bot .view .name{font-size: 15px; font-weight: var(--fwb);}

    @media (max-width: 1500px), (min-width: 1080px) and (orientation: portrait) {

        & .txt{padding: 30px;}
        & .txt .des .sup{padding: 0 0 3%;}
        & .txt .des .sub br{display: none;}
        & .txt .des .sub p{font-size: 16px;}
    }
    @media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
        & .txt{aspect-ratio: 464 / 400;}
        & .txt .des .sub p{font-size: 15px;}
    }
    @media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
        & .txt{padding: 20px; aspect-ratio: 464 / 480;}
        & .txt .des .sub p .lc{display: block;}
    }
    @media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
        & .txt{aspect-ratio: 464 / 420;}
        & .txt .des .tle{font-size: 20px;}
        & .txt .des .sup{font-size: 12px;}
        & .txt .des .sub{font-size: 14px;}
        & .txt .des .sub p{font-size: 12px;}
        & .txt .des .sub p .lc{display: none;}
        & .txt .bot .view .name{font-size: 14px;}
    }
}


/* 무한스크롤 */
.infinite-more-link{display: none !important;}


/* estim */
.estim{flex: 0 0 auto; width: 320px;}
.estim .total{display: flex; align-items: center; border-bottom: 2px solid var(--main); font-size: 1rem; font-weight: var(--fwm); line-height: 1; padding: 0 0 10px;}
.estim .total .kor{line-height: 1; margin-top: 13px;}
.estim .total .eng{line-height: 1; margin-top: 13px; font-weight: var(--fwb_en);}
.estim .total .amount{margin-left: auto; font-size: 2.25em; font-weight: var(--fwb_en); line-height: 1;}
.estim .total .amount .unit{font-size: 1rem; margin-left: 4px;}
.estim .total .btn_toggle_estim{display: none; position: relative; vertical-align: top; margin: 1px 0 0 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--gray); font-size: 0;}
.estim .total .btn_toggle_estim:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -28%) rotate(-225deg); width: 8px; height: 8px; border-left: 2px solid var(--main); border-bottom: 2px solid var(--main); transition: 0.2s;}
.estim .total .btn_toggle_estim.on:after{transform: translate(-50%, -72%) rotate(-45deg);}
.estim .total .btn_toggle_estim:before{content: ""; position: absolute; top: 50%; left: 50%; width: 190%; height: 200%; background: transparent; transform: translate(-50%, -50%); z-index: 0;}
.estim .list{position: relative; /* padding: 49px 0 0; */}
.estim .list > div{display: flex; align-items: center; border-bottom: 1px solid var(--gray); padding: 13px 0; font-size: 14px;}
.estim .list dt{font-size: 1em; font-weight: var(--fwm); color: var(--gray_dark);}
.estim .list dd{font-size: 1.125em; margin-left: auto; font-weight: var(--fwb_en);}
.estim .list dd .unit{font-size: 0.826em; font-weight: var(--fwm); margin-left: 2px;}
.estim .note_list{padding: 44px 0 120px;}
.estim .note_list > li{position: relative; padding: 0 0 0 11px; font-size: 12px; color: #888;}
.estim .note_list > li+li{margin-top: 8px;}
.estim .note_list > li:before{content: ""; position: absolute; top: 7px; left: 2px; width: 2px; height: 2px; background-color: var(--gray_dark);}
.estim > .empty{border-top: 1px solid var(--main); border-bottom: 1px solid var(--gray); padding: 140px 20px; font-size: 15px; font-weight: var(--fwr); color: var(--gray_hide); text-align: center;}
.estim > .empty p{position: relative; padding: 42px 0 0;}
.estim > .empty p br{display: none;}
.estim > .empty p:before{content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30px; height: auto; aspect-ratio: 1 / 1; background: url("../img/common/ico_hide.svg") no-repeat center; background-size: contain;}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .estim > .empty{font-size: 16px; padding: 40px 20px; border-top-width: 1px;}
    .estim > .empty p br{display: block;}
}


/* figure */
.figure{font-size: 14px;}
.figure .object{position: relative; aspect-ratio: 320 / 565; background-color: #0d1b2d; overflow: hidden;}
.figure .object > a{display: block; width: 100%; height: 100%;}
.figure .object > img{width: 100%; height: 100%; object-fit: cover;}
.figure .object > a > .justImg{width: 100%; height: 100%; object-fit: cover;}
.figure .object .txt{text-align: center; padding: 3.322em 2.715em 0;}
.figure .object .txt .sup{font-size: 1em; font-weight: var(--fwb); letter-spacing: 3px;}
.figure .object .txt .tit{font-size: 3em; font-weight: var(--fwl); letter-spacing: 2px; display: block; margin: 0 auto; line-height: 1.2; padding: 18px 0 0;}
.figure .object .txt .sub{font-size: 1em; font-weight: var(--fwr); color: #3d3d3d; padding: 12px 0 0; line-height: 1.4;}
.figure .object .image{position: absolute; top: 50%; left: 50%; transform: translateX(-50%); width: 70%; animation: mockup_moveup 1s forwards;}
.figure .object .image img{width: 100%; height: auto;}
.figure .des{}
.figure .des .dot_list{padding: 44px 0 180px;}
.figure .des .dot_list > li{color: var(--gray_dark);}
.figure .des .dot_list > li + li{margin-top: 9.5px;}


/* spec */
.spec{display: flex; flex-direction: column; gap: 52px; max-width: 600px; margin: 0 auto 52px; line-height: 1.4;}
.spec > dt{}
.spec > dt .img{background-color: var(--gray); aspect-ratio: 1 / 1;}
.spec > dt .img img{width: 100%; height: 100%; object-fit: cover;}
.spec > dd{}
.spec > dd .spec_table{}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .spec{gap: 30px;}
}


/* spec_table */
.spec_table{width: 100%; font-size: 17px; margin: 0 auto; border-top: 1px solid var(--main); border-bottom: 1px solid var(--main);}
.spec_table > div{display: flex; border-bottom: 1px solid var(--gray); padding: 10px 24px; gap: 12px;}
.spec_table dt{font-weight: var(--fwb); flex: 0 0 auto; width: 124px;}
.spec_table dd{font-weight: var(--fwm); flex: 1; word-break: break-all;}
@media (max-width: 800px), (min-width: 1080px) and (orientation: portrait) {
    .spec_table{font-size: 15px;}
    .spec_table > div{padding: 10px 20px;}
    .spec_table dt{width: 80px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .spec_table{font-size: 14px;}
    .spec_table > div{padding: 10px 20px;}
    .spec_table dt{width: 60px;}
    .spec_table dd{font-weight: var(--fwr);}
}


/* bygrid_list */
.bygrid_list{display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto-fill, minmax(20px, auto)); grid-row-gap: 4px; grid-column-gap: 4px; transition: 0.2s ease-out;}
.bygrid_list br{display: none !important;}
.bygrid_list > li{position: relative;}
.bygrid_list > li a{display: block; aspect-ratio: 1 / 1;}
.bygrid_list > li a[data-fancybox]:hover{cursor: zoom-in;}
.bygrid_list > li a[href*="https://www.youtube.com"]{position: relative;}
.bygrid_list > li a[href*="https://www.youtube.com"]:before{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: auto; aspect-ratio: 36 / 64; background: url("../img/contents/bygrid_item_video_overlay.svg") no-repeat center; background-size: contain;}
.bygrid_list > li a img{object-fit: cover; width: 100%; height: 100%;}
.bygrid_list > li .img{}
.bygrid_list > li .txt{position: absolute; bottom: 10px; left: 20px; color: var(--white);}
.bygrid_list > li .txt .title{}
.bygrid_list.view_byeach{grid-template-columns: repeat(1, 1fr); grid-row-gap: 18px; grid-column-gap: 18px;}
.bygrid_list.view_byeach > li{text-align: center;}
.bygrid_list.view_byeach > li a{display: inline-block; aspect-ratio: initial;}
.bygrid_list.view_byeach > li a img{object-fit: initial; width: auto; height: auto;}
.bygrid_list .each_view { display: none; }
.bygrid_list .grid_view { display: block; }
.bygrid_list.view_byeach .each_view { display: block; }
.bygrid_list.view_byeach .grid_view { display: none; }
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .bygrid_list{grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .bygrid_list{width: calc(100% + 40px); margin-left: -20px; grid-row-gap: 2px; grid-column-gap: 2px;}
    .bygrid_list > li a[href*="https://www.youtube.com"]:before{width: 20px;}
    .bygrid_list.view_byeach{grid-row-gap: 2px;}
    .bygrid_list.view_byeach > li{text-align: left;}
    .bygrid_list.view_byeach > li a{display: block; aspect-ratio: 1 / 1;}
    .bygrid_list.view_byeach > li a img{object-fit: cover; width: 100%; height: 100%;}
}


/* pictogram */
.pictogram{background-color: #f5f5f5;}
.picto_list{display: flex; flex-wrap: wrap; gap: 32px; padding: 32px 0;}
.picto_list > div{position: relative; flex: 1; padding: 32px 24px; text-align: center;}
.picto_list > div + div:before{content: ""; position: absolute; top: 0; left: -16px; width: 1px; height: 100%; background-color: var(--gray);}
.picto_list dt{}
.picto_list dt img{}
.picto_list dt h5{font-size: 20px; font-weight: var(--fwb); padding: 15px 0 0;}
.picto_list dd{font-size: 15px; color: var(--gray_darkest); line-height: 1.6; padding: 7px 0 0;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .picto_list{gap: var(--gap);}
    .picto_list > div + div:before{left: calc( (var(--gap) / 2) * -1 );}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .picto_list{gap: 0; padding: 20px 0;}
    .picto_list > div{flex: 0 0 auto; width: 50%; padding: 32px 20px;}
    .picto_list > div + div:before{display: none;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .picto_list > div{position: relative; padding: 20px 10px;}
    .picto_list > div:nth-child(n+3){border-top: 1px solid var(--gray);}
    .picto_list > div:nth-child(odd){border-right: 1px solid var(--gray);}
    .picto_list > div:nth-child(odd):before{content: ""; position: absolute; display: block; top: -2px; right: auto; left: 0; width: 20px; height: 4px; background-color: #f5f5f5;}
    .picto_list > div:nth-child(even):before{content: ""; position: absolute; display: block; top: -2px; left: auto; right: 0; width: 20px; height: 4px; background-color: #f5f5f5;}
    .picto_list dt .img{width: 32px;}
    .picto_list dt .title{font-size: 16px; padding: 10px 0 5px;}
    .picto_list dd{font-size: 13px;}
}


/* showroom_visual */
.showroom_visual{position: relative; padding: 255px 52px 71px; margin: 298px 0 0; background-color: #f5f5f5; font-size: 17px; line-height: 1.52;}
.showroom_visual .img{position: absolute; overflow: hidden; top: -298px; left: 50%; transform: translateX(-50%); width: 890px; height: 501px; /* 맥북 safari 에서 높이값 없으면 overflow hidden 동작하지 않아서 높이값 강제 작성 */ aspect-ratio: 890 / 501; background-color: var(--gray); margin: 0 0 0 0;}
.showroom_visual .img img{width: 100%; height: 100%; object-fit: cover;}
.showroom_visual .img .ytb_frame{position: relative; padding-bottom: 89.26%; width: 100%; height: 0; margin-top: -16.5%; overflow: hidden;}
.showroom_visual .img .ytb_frame iframe{position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%;}
.showroom_visual .img .ytb_frame:after{content: ""; position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; /* 유튜브 영역이 클릭되지 않도록 덮는 용도 */}
.showroom_visual .txt{}
.showroom_visual .txt p + p{margin-top: 12px;}
.showroom_visual .btn_wrap{padding: 36px 0 0;}
.showroom_visual .btn_wrap .btn{display: inline-block; width: auto; padding: 18px 75px;}

.showroom_visual.novisual{margin: 0; padding: 70px 52px 71px;}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .showroom_visual{padding: 0; background: transparent; margin: 0 auto;}
    .showroom_visual .img{position: relative; z-index: 2; top: auto; left: auto; width: calc(100% - 40px); height: auto; margin: 0 auto; transform: none; background: transparent;}
    .showroom_visual .txt{background: #f5f5f5; padding: 20% 20px 0; margin-top: calc(-20% + 20px); font-size: 16px;}
    .showroom_visual .txt:not(:has(.btn_wrap)){padding-bottom: 40px;}
    .showroom_visual .btn_wrap{background: #f5f5f5; padding: 0 20px 40px 20px; justify-content: center;}
    .showroom_visual .btn_wrap .btn{width: 100%; line-height: 52px; padding: 0 10px;}

    .showroom_visual.novisual{background: #f5f5f5; padding: 0;}
    .showroom_visual.novisual .txt{padding: 40px 20px; margin: 0;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .showroom_visual{width: calc(100% + 40px); margin-left: -20px;}
    .showroom_visual .img{width: 100%;}
    .showroom_visual .btn_wrap{background: #f5f5f5; padding: 0 20px 30px 20px;}
    .showroom_visual .txt{font-size: 14px;}
    .showroom_visual .txt:not(:has(.btn_wrap)){padding-bottom: 30px;}

    .showroom_visual.novisual .txt{padding: 30px 20px;}
}


/* do_list */
.do_list{display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 33.5px;}
.do_list > div{flex: 1; max-width: 336px; text-align: center; padding: 32px 24px;}
.do_list dt{}
.do_list dt{}
.do_list dt img{display: block; margin: 0 auto; opacity: 0; transform: translateX(50%) rotate(45deg); transition: 0.5s;}
.do_list dt.on img{opacity: 1; transform: translateX(0%) rotate(0deg);}
.do_list dt .title{display: block; font-size: 20px; font-weight: var(--fwb); padding: 13px 0 0;}
.do_list dd{font-size: 15px; color: var(--gray_darkest); line-height: 1.6; word-break: break-all; padding: 6px 0 0;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .do_list{gap: var(--gap);}
    .do_list > div{padding: 20px 10px;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .do_list{gap: 40px 40px; justify-content: center;}
    .do_list > div{flex: 0 0 auto; width: calc( (100% - 40px) / 2 ); max-width: none; padding: 0;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .do_list{gap: 30px 20px;}
    .do_list > div{position: relative; width: calc( (100% - 20px) / 2 );}
    .do_list dt img{width: 50%;}
    .do_list dt .title{font-size: 16px; padding: 10px 0 5px;}
    .do_list dd{font-size: 13px;}
}


/* keyword_filter */
.keyword_filter{display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 0 10px;}
.keyword_filter::-webkit-scrollbar{height: 4px; /*display: none;*/}
.keyword_filter::-webkit-scrollbar-thumb{border-radius: 10px; background-color: #ddd;}
.keyword_filter::-webkit-scrollbar-track{border-radius: 10px; background-color: rgba(193,193,193,0.2);}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .keyword_filter{margin-left: 0; flex-wrap: nowrap; width: auto;  overflow-x: auto; text-align: center; padding-left: 20px; padding-right: 20px;}
    .keyword_filter{overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;}
    .keyword_filter::-webkit-scrollbar{display: none;}
    .keyword_filter > li{flex: 0 0 auto; display: inline-block; width: auto;}
}


/* sort_top */
.sort_top{display: flex; gap: 20px; margin: 0 0 32px;}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .sort_top{position: relative; flex-direction: row-reverse; margin: 0 0 18px;}
    .sort_top .keyword_filter{position: absolute; top: 0; left: 91px; right: -20px; padding: 0 20px 0 0; margin-top: 2px;}
    .sort_top .keyword_filter .chkbox input + label{line-height: 28px; font-size: 13px; font-weight: var(--fwb); padding: 2px 14.5px 0; box-shadow: inset 0 0 0 1px var(--gray);}
    .sort_top .keyword_filter .chkbox input:checked + label{box-shadow: inset 0 0 0 1px var(--main);}
    .sort_top .keyword_filter .chkbox input + label span{font-weight: var(--fwr); margin-left: 1px; font-family: 'SCDream'; font-size: 13px;}
    .sort_top .viewby{margin-right: auto; margin-left: initial;}
}


/* viewby */
.viewby{margin-left: auto; margin-top: 4px; display: flex; gap: 12px;}
.viewby > li{}
.viewby > li a{display: block; width: 28px; height: 28px; background-repeat: no-repeat; background-position: center; background-size: contain; font-size: 0;}
.viewby > li a.bygrid{background-image: url("../img/contents/viewby_grid.svg");}
.viewby > li a.bygrid.on{background-image: url("../img/contents/viewby_grid_on.svg");}
.viewby > li a.byeach{background-image: url("../img/contents/viewby_each.svg");}
.viewby > li a.byeach.on{background-image: url("../img/contents/viewby_each_on.svg");}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .viewby{gap: 0; margin-top: 0;}
    .viewby > li + li{margin-left: -1px;}
    .viewby > li a{width: 34px; height: 34px; border: 1px solid var(--gray); background-size: auto;}
    .viewby > li a.on{background-color: var(--main); border-color: var(--main); z-index: 1; position: relative;}

    .viewby > li a.bygrid{background-image: url("../img/contents/viewby_grid_mobile.svg");}
    .viewby > li a.bygrid.on{background-image: url("../img/contents/viewby_grid_mobile_on.svg");}
    .viewby > li a.byeach{background-image: url("../img/contents/viewby_each_mobile.svg");}
    .viewby > li a.byeach.on{background-image: url("../img/contents/viewby_each_mobile_on.svg");}
}


/* location_box */
.location_box{display: flex; flex-wrap: wrap;}
.location_box .info{flex: 0 0 auto; width: 480px; padding: 60px 48px 20px; aspect-ratio: 48 / 52; background-color: #f5f5f5;}
.location_box .info .title{font-size: 20px; font-weight: var(--fwb); padding: 0 0 13px;}
.location_box .info .list{font-size: 15px;}
.location_box .info .list > div{display: flex; color: var(--gray_darkest); line-height: 1.4;}
.location_box .info .list > div + div{margin-top: 8px;}
.location_box .info .list dt{flex: 0 0 auto; width: 80px; color: var(--gray_dark); font-weight: var(--fwr);}
.location_box .info .list dd{flex: 1; font-weight: var(--fwm);}
.location_box .info .list dd a{}
.location_box .info .list dd p{}
.location_box .info .desc{font-size: 14px; color: var(--gray_dark); padding: 17px 0 0;}
.location_box .info .mapBtn_wrap{display: flex; gap: 8px; padding: 17px 0 0;}
.location_box .info .mapBtn_wrap .mapBtn{display: flex; flex: 1; width: 100%; align-items: center; line-height: 54px; font-size: 1rem; font-weight: var(--fwb); background-color: var(--gray); color: var(--main); padding: 0 5px 0 25px;}
.location_box .info .mapBtn_wrap .mapBtn.naver{color: var(--white); background-color: var(--vandor_naver);}
.location_box .info .mapBtn_wrap .mapBtn.kakao{background-color: var(--vandor_kakao);}
.location_box .info .mapBtn_wrap .mapBtn span{display: inline-flex; align-items: center;}
.location_box .info .mapBtn_wrap .mapBtn span:before{content: ""; display: inline-block; width: 44px; height: 44px; background-repeat: no-repeat; background-position: center; background-size: contain;}
.location_box .info .mapBtn_wrap .mapBtn.naver span:before{background-image: url("../img/common/vandor_ico_navermap.svg");}
.location_box .info .mapBtn_wrap .mapBtn.kakao span:before{background-image: url("../img/common/vandor_ico_kakaomap.svg");}
.location_box .info .pakingBtn{display: block; background-color: var(--main); line-height: 54px; margin-top: 8px; text-align: center; color: #fff; font-weight: var(--fwb);}

.location_box .mapArea{flex: 1; background-color: #f5f5f5; overflow: hidden;}
.location_box .root_daum_roughmap{width: 100% !important; height: 100% !important;}
.location_box .root_daum_roughmap .map_border{display: none !important;}
.location_box .root_daum_roughmap .wrap_controllers{display: none !important;}
.location_box .root_daum_roughmap .wrap_map{height: 100%;}
@media (max-width: 1680px), (min-width: 1080px) and (orientation: portrait) {
    .location_box .info{aspect-ratio: initial; padding: 60px 48px 60px;}
}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .location_box .info{padding: 40px; width: 440px;}
    .location_box .info .mapBtn_wrap .mapBtn{padding: 0 10px 0 0; justify-content: center; text-align: center;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {

}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .location_box{flex-direction: column-reverse;}
    .location_box .info{flex: initial; width: 100%;}
    .location_box .mapArea{flex: initial; width: 100%; aspect-ratio: 2 / 1;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .location_box .info{padding: 20px;}
    .location_box .info .title{font-size: 17px;}
    .location_box .info .list{font-size: 14px;}
    .location_box .info .list dt{width: 70px;}
    .location_box .info .mapBtn_wrap{gap: 5px;}
    .location_box .info .mapBtn_wrap .mapBtn{line-height: 52px;}
    .location_box .info .mapBtn_wrap .mapBtn span:before{width: 28px; height: 28px;}
    .location_box .mapArea{aspect-ratio: 2 / 1.2;}
    .location_box .info .pakingBtn{margin-top: 5px; line-height: 52px;}
}


/* form_wrap */
.form_wrap{padding: 80px 0 0;}
.form_wrap > .btn_wrap{margin-top: 80px;}
.form_wrap > .btn_wrap .btn{width: 349px;}
.form_wrap .fsec{}
.form_wrap .fsec + .fsec{border-top: 1px solid var(--gray); margin: 80px 0 0; padding: 80px 0 0;}

.form_wrap .ftit{display: flex; align-items: flex-start; gap: 8px; padding: 0 0 33px;}
.form_wrap .ftit h4{font-size: 20px; font-weight: var(--fwb);}
.form_wrap .ftit .des{font-size: 14px; color: var(--gray_dark); line-height: 1.35; padding: 8px 0 0;}

.form_wrap .ftr{display: flex; gap: 26px; flex-wrap: wrap;}
.form_wrap .ftr + .ftr{margin-top: 51px;}

.form_wrap .ftr .fcon{flex: 1; font-size: 0; /* 인라인블럭 extra-margin 제거용 */}
.form_wrap .ftr .fcon input::placeholder{color: rgba(17,17,17,0.3);}
.form_wrap .ftr .fcon input[type="text"]{width: 100%; height: 52px; margin: 0; padding: 0; border: 1px solid var(--gray); border-radius: 2px; padding: 0 24px; outline: none; font-size: 17px; font-weight: var(--fwm); font-family: inherit; color: var(--main);}
.form_wrap .ftr .fcon .hasUnit{position: relative;}
.form_wrap .ftr .fcon .hasUnit:before{content: attr(data-unit); position: absolute; top: 0; right: 24px; font-size: 17px; font-weight: var(--fwm); color: var(--main); line-height: 52px;}
.form_wrap .ftr .fcon .hasUnit input[type="text"]{padding: 0 50px 0 24px;}
.form_wrap .ftr .fcon select{width: 100%;}
.form_wrap .ftr .fcon .chkbox2{margin-top: 15px;}
.form_wrap .ftr .fcon .textWrap{}
.form_wrap .ftr .fcon .textWrap textarea{width: 100%; height: 104px; min-height: 104px; max-height: 350px; border-radius: 2px; border: 1px solid var(--gray); font-family: 'SCDream'; font-size: 17px; font-weight: var(--fwr); padding: 12px 24px; letter-spacing: inherit; outline: none; resize: vertical;}
.form_wrap .ftr .fcon .textWrap textarea::-webkit-scrollbar{width: 10px; /*display: none;*/}
.form_wrap .ftr .fcon .textWrap textarea::-webkit-scrollbar-thumb{border-radius: 10px; background-color: #ddd;}
.form_wrap .ftr .fcon .textWrap textarea::-webkit-scrollbar-track{border-radius: 10px; background-color: rgba(193,193,193,0.2);}
.form_wrap .ftr .fcon .textWrap textarea::placeholder{color: rgba(17,17,17,0.3); font-weight: var(--fwr);}
.form_wrap .ftr .fcon .email{display: flex; gap: 4px;}
.form_wrap .ftr .fcon .email input{flex: 6;}
.form_wrap .ftr .fcon .email select{flex: 3;}
.form_wrap .ftr .fcon .addressWrap{display: flex; flex-direction: column; gap: 8px; width: 100%;}
.form_wrap .ftr .fcon .addressWrap .postcode{display: flex; flex-wrap: wrap; width: 100%; max-width: 438px;}
.form_wrap .ftr .fcon .addressWrap .postcode input{flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0;}
.form_wrap .ftr .fcon .addressWrap .postcode .search_btn{flex: 0 0 auto; width: 162px; text-align: center; background-color: var(--gray); color: var(--main); font-size: 17px; font-weight: var(--fwm); line-height: 52px; cursor: pointer; border-radius: 0 2px 2px 0;}
.form_wrap .ftr .fcon .addressWrap .address{display: flex; flex-direction: column; width: 100%; gap: 8px;}
.form_wrap .ftr .fcon .addressWrap .address #daum_zipcode {display:none;border:1px solid;width:100%;height:400px;margin:5px 0;position:relative; overflow:auto;}

.form_wrap .ftr .fcon > .note_list{padding: 10px 0 0 0;}
.form_wrap .ftr .fcon > .note_list > li{font-size: 15px; padding: 0 0 0 19px; color: var(--gray_dark);}

.form_wrap .contit{display: inline-block; font-size: 16px; font-weight: var(--fwm); line-height: 1.25; padding: 0 0 12px;}
.form_wrap .contit.must{position: relative;}
.form_wrap .contit.must span{position: relative;}
.form_wrap .contit.must span:after{content: ""; display: inline-block; vertical-align: middle; margin: -3px 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background-color: var(--theme_mint);}
.form_wrap .contit .sub{display: inline-block; vertical-align: middle; margin: -3px 0 0; font-size: 14px; font-weight: var(--fwr); color: var(--theme_greeny2); padding: 0 0 0 9px; font-family: 'SCDream';}

.btn_radio{display: flex; flex-wrap: wrap; gap: 5px;}
.btn_radio .item{flex: 1;}
.btn_radio .item input{position: absolute; left: -9999em;}
.btn_radio .item input + label{display: block; border: 1px solid var(--gray); border-radius: 2px; line-height: 50px; font-size: 17px; font-weight: var(--fwm); text-align: center; background-color: var(--white); color: var(--main);}
.btn_radio .item input:checked + label{background-color: var(--main); border-color: var(--main); color: var(--white); font-family: 'SCDream' !important;}
.btn_radio .item input:checked + label.lineup_light{background-color: var(--theme_yellow); border-color: var(--theme_yellow); color: var(--main);}
.btn_radio .item input:checked + label.lineup_basic{background-color: var(--theme_mint); border-color: var(--theme_mint); color: var(--main);}
.btn_radio .item input:checked + label.lineup_plus{background-color: var(--theme_navy); border-color: var(--theme_navy); color: var(--white);}
.btn_radio .item input[disabled] + label{color: rgba(17,17,17,0.3);}
.btn_radio .item input[disabled] + label:hover{cursor: not-allowed;}

.btn_radio .item:first-child:nth-last-child(10),
.btn_radio .item:first-child:nth-last-child(10) ~ .item {flex: 0 0 auto; width: calc((100% - 20px) / 5);}

.btn_radio.grid{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(auto-fill, minmax(10px, auto)); grid-row-gap: 4px; grid-column-gap: 5px;}
.btn_radio.grid .item{width: 100% !important;}

.btn_radio.grid_col4{display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto-fill, minmax(10px, auto)); grid-row-gap: 4px; grid-column-gap: 5px;}
.btn_radio.grid_col4 .item{width: 100% !important;}

.form_wrap .ftr.byState,
.form_wrap .fsec.byState{display: none;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .form_wrap .ftr .fcon .addressWrap .postcode{max-width: none;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .form_wrap .ftr .fcon select{font-size: 15px;}

    .form_wrap .ftr{gap: 0;}
    .form_wrap .ftr + .ftr{margin-top: 40px;}
    .form_wrap .ftr .fcon{flex: 0 0 auto; width: 100%; gap: 0;}
    .form_wrap .ftr .fcon + .fcon{margin-top: 40px;}
    .form_wrap .ftr .fcon input[type="text"]{height: 46px; font-size: 14px;}
    .form_wrap .ftr .fcon .addressWrap .postcode .search_btn{line-height: 46px; font-size: 15px;}

    .btn_radio{}
    .btn_radio .item input + label{font-size: 15px;}
    .btn_radio .item:has(select){flex: 0 0 auto; width: 100%;}

    .btn_radio .item:first-child:nth-last-child(5),
    .btn_radio .item:first-child:nth-last-child(5) ~ .item {flex: 0 0 auto; width: calc((100% - 10px) / 3);}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .btn_radio .item input + label{line-height: 44px;}
    .form_wrap .ftr .fcon .hasUnit:before{line-height: 46px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .form_wrap > .btn_wrap .btn{width: 100%;}

    .form_wrap .fsec + .fsec{padding: 50px 0 0; margin: 50px 0 0;}
    .form_wrap .ftit .des{font-size: 13px;}
    .form_wrap .ftr + .ftr{margin-top: 30px;}
    .form_wrap .ftr .fcon + .fcon{margin-top: 30px;}
    .form_wrap .ftr .fcon select{font-size: 14px;}
    .form_wrap .ftr .fcon input{padding: 0 20px;}
    .form_wrap .ftr .fcon input[type="text"]{padding: 0 20px;}
    .form_wrap .ftr .fcon .addressWrap .postcode .search_btn{font-size: 13px; width: 100px;}
    .form_wrap .ftr .fcon .email{flex-direction: column;}
    .form_wrap .ftr .fcon .email input{flex: initial;}
    .form_wrap .ftr .fcon .email select{flex: initial;}
    .form_wrap .ftr .fcon .hasUnit:before{line-height: 46px; right: 13px; font-size: 14px;}
    .form_wrap .ftr .fcon .hasUnit input[type="text"]{padding: 0 35px 0 20px;}
    .form_wrap .ftr .fcon .textWrap textarea{padding: 12px 20px; font-size: 14px;}
    .form_wrap .ftr .fcon > .note_list > li{font-size: 13px; padding: 0 0 0 17px;}
    .form_wrap .contit{font-size: 15px; padding: 0 0 10px;}
    .form_wrap .contit .sub{font-size: 11px; margin: 0 0 0;}

    .btn_radio{}
    .btn_radio .item:first-child:nth-last-child(10),
    .btn_radio .item:first-child:nth-last-child(10) ~ .item{width: calc((100% - 15px) / 4);}
    .btn_radio .item input + label{font-size: 14px;}

    /* #estim_total .ftr:nth-child(2) .btn_radio .item{flex: 0 0 auto; width: calc((100% - 5px) / 2);} */
    #estim_total .ftr:nth-child(11) .btn_radio .item{flex: 0 0 auto; width: calc((100% - 5px) / 2);}

    #estim_bath .ftr:nth-child(5) .btn_radio.grid{grid-template-columns: repeat(2, 1fr);}
    #estim_bath .ftr:nth-child(5) .btn_radio.grid .item{flex: initial; width: auto !important;}

    #consult_type .ftr:nth-child(1) .btn_radio .item{flex: 0 0 auto; width: calc((100% - 5px) / 2);}

    #consult_content .ftr:nth-child(4) .btn_radio .item{flex: 0 0 auto; width: calc((100% - 5px) / 2);}

    .form_wrap > .btn_wrap{margin-top: 50px;}
}


/* shadow_box */
.shadow_box{padding: 77px 52px 0; box-shadow: 0px -4px 12px rgba(0,0,0,0.04); background-color: var(--white);}
.shadow_box .top{padding: 0 0 35px;}
.shadow_box .top .cont{display: flex; align-items: flex-start; gap: 15px;}
.shadow_box .top .cont .title{font-size: 20px; font-weight: var(--fwm);}
.shadow_box .top .cont .title br{display: none;}
.shadow_box .top .cont .type{flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 8px;}
.shadow_box .top .cont .type .lineup_badge{position: static;}
.shadow_box .top .cont .type .text{font-size: 20px; font-weight: var(--fweb);}
.shadow_box .top .cont .type .text span{font-weight: var(--fwb_en); text-transform: uppercase;}
.shadow_box .mid{border-top: 1px solid var(--gray); padding: 25px 0 0;}
.shadow_box .mid .bill{padding: 0 20px 24px;}
.shadow_box .mid .bill > div{display: flex; align-items: center;}
.shadow_box .mid .bill dt{}
.shadow_box .mid .bill dt .name{font-size: 20px; font-weight: var(--fwr);}
.shadow_box .mid .bill dt .name span{font-size: 15px; font-weight: var(--fwr); color: var(--gray_dark);}
.shadow_box .mid .bill dd{margin-left: auto;}
.shadow_box .mid .bill dd .price{font-size: 48px; font-weight: var(--fwb_en); line-height: 1;}
.shadow_box .mid .bill dd .price .unit{display: inline-block; vertical-align: middle; margin: 4px 0 0; font-family: 'SCDream'; font-size: 0.5em; font-weight: var(--fwm);}
.shadow_box .mid .bill_detail{color: var(--main); letter-spacing: -0.02em;}
.shadow_box .mid .bill_detail_d1{border-top: 1px solid var(--gray);}
.shadow_box .mid .bill_detail_d1 > dt{background-color: #f5f5f5; font-weight: var(--fwm); padding: 10px 20px;}
.shadow_box .mid .bill_detail_d1 > dt span{}
.shadow_box .mid .bill_detail_d1 > dd{}
.shadow_box .mid .bill_detail_d2{font-size: 1.125em; display: flex; flex-wrap: wrap; padding: 9.5px 20px; align-items: center;}
.shadow_box .mid .bill_detail_d2 + .bill_detail_d2{border-top: 1px dashed var(--gray);}
.shadow_box .mid .bill_detail_d2 > dt{flex: 0 0 auto; font-weight: var(--fwm);}
.shadow_box .mid .bill_detail_d2 > dt .small{font-size: 0.834em; font-weight: var(--fwr); color: var(--gray_dark); margin-left: 8px;}
.shadow_box .mid .bill_detail_d2 > dd{flex: 1; max-width: 65%; margin-left: auto; display: flex; flex-wrap: wrap; color: var(--gray_dark); justify-content: flex-end; text-align: right;}
.shadow_box .mid .bill_detail_d2 > dd span{}
.shadow_box .mid .bill_detail_d2 > dd span + span{}
.shadow_box .mid .bill_detail_d2 > dd span + span:before{content: ""; display: inline-block; vertical-align: top; margin: 7px 12px 0; width: 1px; height: 14px; background-color: var(--gray);}
.shadow_box .bot{border-top: 1px solid var(--gray); padding: 23px 0 0;}
.shadow_box .bot .dot_list{}
.shadow_box .bot .dot_list > li{font-size: 15px; color: var(--gray_dark);}
.shadow_box .bot .dot_list > li b{font-weight: var(--fwm); color: var(--main);}
.shadow_box .bot .btn_wrap{gap: 4px; padding: 47px 0 0;}
.shadow_box .bot .btn_wrap .btn{flex: 1; max-width: 349px;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .shadow_box{padding: 70px 40px 0;}
    .shadow_box .top .cont .type .text{font-size: 18px;}

    .shadow_box .mid .bill_detail_d2 > dd span + span:before{margin: 5px 12px 0;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .shadow_box{padding: 50px 40px 0;}
    .shadow_box .top .cont{flex-direction: column-reverse; gap: 50px;}
    .shadow_box .top .cont .title{font-size: 2.7vw;}
    .shadow_box .top .cont .type .text{font-size: 15px;}

    .shadow_box .mid .bill dt .name{font-size: 2.7vw;}
    .shadow_box .mid .bill dd .price{font-size: 4.5vw;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .shadow_box{padding: 40px 20px 0;}
    .shadow_box .top{padding: 0 0 20px;}
    .shadow_box .top .cont{gap: 30px;}
    .shadow_box .top .cont .title{font-size: 18px;}
    .shadow_box .top .cont .title br{display: block;}
    .shadow_box .top .cont .type .text{font-size: 14px;}

    .shadow_box .mid{padding: 20px 0 0;}
    .shadow_box .mid .bill{padding: 0 10px 24px;}
    .shadow_box .mid .bill dt .name{font-size: 14px;}
    .shadow_box .mid .bill dt .name span{font-size: 0.8em;}
    .shadow_box .mid .bill dd .price{font-size: 24px;}

    .shadow_box .mid .bill_detail{font-size: 14px;}
    .shadow_box .mid .bill_detail_d1 > dt{padding: 10px 10px;}
    .shadow_box .mid .bill_detail_d2{padding: 8px 10px; font-size: 1em;}
    .shadow_box .mid .bill_detail_d2 > dd span + span:before{height: 10px; margin: 5px 7px 0;}
    .shadow_box .mid .bill_detail_d2 > dt .small{font-size: 11px; margin-left: 5px;}

    .shadow_box .bot{padding: 20px 0 0;}
    .shadow_box .bot .dot_list > li{font-size: 14px;}
}
@media (max-width: 460px), (min-width: 1080px) and (orientation: portrait) {
    .shadow_box .top .cont .title{font-size: 16px;}
    .shadow_box .top .cont .type .text{font-size: 13px;}

    .shadow_box .mid .bill dt .name{font-size: 13px;}
}


/* empty_result */
.empty_result{font-size: 15px; font-weight: var(--fwm); color: var(--gray_hide); text-align: center; padding: 5% 0; background-color: #f5f5f5; border-radius: 5px;}
.empty_result span{}


/* related_project */
.related_project{margin: 0 auto; padding: 48px 60px; background-color: var(--white); border: 1px solid var(--gray);}
.related_project .card.horizon{}
.related_project .card.horizon > a{display: flex; flex-direction: row; align-items: center; gap: 28px;}
.related_project .card.horizon .img{flex: 1.09; aspect-ratio: 339 / 208; max-width: 339px;}
.related_project .card.horizon .txt{flex: 1; padding: 0;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .related_project{padding: 40px 50px; margin: 40px auto 0;}
}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .related_project{padding: 5%;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .related_project{margin: 30px auto 0; padding: 15px;}
    .related_project .card.horizon > a{gap: 4%;}
    .related_project .card.horizon .img{aspect-ratio: 1 / 1; flex: 0 0 auto; width: 35%;}
    .related_project .card.horizon .txt{flex: initial; width: 61%;}
    .related_project .card.horizon .txt .title h5{font-size: 14px;}
    .related_project .card.horizon .txt .title h5 .size{font-size: 1.1em;}
    .related_project .card.horizon .txt .price{font-size: 19px;}
    .related_project .card.horizon .txt .tags > li{font-size: 13px;}
    .related_project .card.horizon .txt .tags > li + li:before{margin: -3px 6px 0 8px; height: 12px;}
}


/* content_visual */
.content_visual{display: flex; gap: 52px; align-items: center;}
.content_visual .img{flex: 4.87; aspect-ratio: 676 / 534; overflow: hidden;}
.content_visual .img img{width: 100%; height: 100%; object-fit: cover;}
.content_visual .txt{flex: 5.12; padding: 5.8% 0 0;}
.content_visual .txt .title{font-size: 24px; font-weight: var(--fwb);}
.content_visual .txt .des{margin: 48px 0 0;}
.content_visual .txt .des p{font-size: 17px;}
.content_visual .txt .des p + p{padding: 25px 0 0;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .content_visual{gap: 40px;}
    .content_visual .txt{flex: 5.12; padding: 0 0;}
    .content_visual .txt .des{margin: 5% 0 0;}
    .content_visual .txt .des p{font-size: 16px;}
    .content_visual .txt .des p + p{padding: 10px 0 0;}
}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .content_visual{flex-direction: column; align-items: initial; gap: 0;}
    .content_visual .img{flex: initial; /* width: calc(100% + 40px); margin-left: -20px; */ aspect-ratio: 2 / 1;}
    .content_visual .txt{padding: 20px 0 0;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .content_visual .txt .title{font-size: 20px;}
    .content_visual .txt .des p{font-size: 14px;}
}


/* wide_visual */
.wide_visual{display: flex; flex-wrap: wrap;}
.wide_visual .v{flex: 1; overflow: hidden;}
.wide_visual .v.v1{}
.wide_visual .v.v2{}
.wide_visual .v.v_single{flex: 0 0 auto; width: 100%;}
.wide_visual .v img{display: block; width: 100%; height: auto;}
.hanging{/* margin-top: 50px; */ transform: translateY(50px); opacity: 0; transition: 0.5s;}
.hanging.on{/* margin-top: -18px; */ transform: translateY(-60px); opacity: 1;}
.hanging .tit{display: block !important; margin: 0 0 !important;}
.hanging .tit h4{}
.hanging .tit .btn_wrap{margin-top: 20px;}
.hanging .tit .btn_wrap .btn{width: 305px;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .wide_visual .v.v_single{aspect-ratio: 2 / 0.65;}
    .wide_visual .v.v_single img{width: 100%; height: 100%; object-fit: cover;}
    .hanging.on{transform: translateY(-43px);}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .wide_visual .v.v2{display: none;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .wide_visual .v.v2{display: none;}
    .hanging.on{transform: translateY(-21px);}
    .hanging .tit .btn_wrap .btn{width: 100%;}
    .hanging .tit .des{font-size: 16px !important;}
}


/* value_list */
.value_list{display: flex; flex-wrap: wrap; gap: 28px;}
.value_list > li{flex: 1; padding: 3.612%; background-color: #f5f5f5; font-size: 15px;}
.value_list > li:nth-child(1){background-color: var(--theme_navy); color: var(--white);}
.value_list > li:nth-child(2){background-color: var(--theme_mint);}
.value_list > li:nth-child(3){background-color: var(--theme_yellow);}
.value_list > li:nth-child(4){background-color: var(--theme_pink);}
.value_list > li img{width: 52.344%; opacity: 0; transform: translateX(50%) rotate(45deg); transition: 0.5s;}
.value_list > li.on img{opacity: 1; transform: translateX(0%) rotate(0deg);}
.value_list .txt{padding: 63.83% 0 0;}
.value_list .txt .title{font-size: 1.34em; font-weight: var(--fwb); line-height: 1.2;}
.value_list .txt .des{line-height: 1.65; padding: 9px 0 0; word-break: break-all;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .value_list{gap: var(--gap);}
    .value_list .txt{padding: 32% 0 0;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .value_list > li{flex: initial; width: calc( (100% - (var(--gap) * 2)) / 2 ); padding: 30px;}
    .value_list > li img{margin-left: auto; display: block; width: 30%;}
    .value_list .txt{padding: 0 0 0;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .value_list > li{width: 100%; padding: 20px;}
    .value_list .txt .title{font-size: 17px;}
    .value_list .txt .des{font-size: 14px;}
}


/* horizon_slide */
.horizon_slide{overflow: hidden;}
.horizon_slide .list{margin: 0 0 0 calc((100% - 1440px) / 2); overflow: hidden;}
.horizon_slide .list .slick-list{/* margin-left: -64px; */}
.horizon_slide .item{width: 280px; margin-left: 64px;}
.horizon_slide .item .title{font-size: 48px; font-weight: var(--fwb_en); line-height: 1.2;}
.horizon_slide .item .des{font-size: 17px; color: var(--main); padding: 25px 0 10px;}
.horizon_slide .item .des > li{font-size: inherit; color: inherit; padding: 0 0 0 12px; line-height: 1.5;}
.horizon_slide .item .des > li:before{color: var(--main);}
.horizon_slide .item .des > li + li{margin-top: 7.5px;}

.horizon_slide > .wrap{ margin: 29px auto 0;}

.horizon_slide .slick-dots{position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; width: 100%; display: flex;}
.horizon_slide .slick-dots > li{flex: 1; opacity: 0;}
.horizon_slide .slick-dots > li:hover{opacity: 0.025;}
.horizon_slide .slick-dots > li button{background: none; border: 1px solid #111; display: block; width: 100%; color: transparent; background-color: #111; border-radius: 5px;}
@media (max-width: 1500px), (min-width: 1080px) and (orientation: portrait) {
    .horizon_slide .list{margin: 0 0 0 20px}
}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .horizon_slide .item{margin-left: 30px; width: 240px;}
    .horizon_slide .item .title{font-size: clamp(20px,4vw,50px);}
    .horizon_slide .item .des{font-size: 16px;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .horizon_slide .item{margin-left: 30px; width: 210px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .horizon_slide{display: block; overflow: hidden;}
    .horizon_slide .list{margin: 0;}
    .horizon_slide .slick-list{padding: 0 10.3% 0; margin-left: -20px;}
    .horizon_slide .item{margin-left: 20px; float: left; overflow: hidden; width: auto;}
    .horizon_slide .item .title{font-size: 19px;}
    .horizon_slide .item .des{font-size: 15px; padding: 15px 0 0;}
}


/* layer */
.layer_opener{display: inline-block; vertical-align: middle; margin: 1px 0 0; line-height: 21px; padding: 1px 10px 1px; font-size: 12px; font-weight: var(--fwm); color: var(--white); background-color: var(--gray_dark);}
.layer_opener.arrow_shape{position: relative; font-size: 0; width: 20px; height: 20px; line-height: 1; margin: 0 0 0 -2px; padding: 0; background: transparent;}
.layer_opener.arrow_shape:before{content: ""; position: absolute; top: 50%; left: 50%; display: inline-block; width: 11px; height: 11px; border-top: 2px solid #000; border-right: 2px solid #000; transform: translate(-65%, -50%) rotate(45deg);}

.layer{visibility: hidden; opacity: 0; position: fixed; z-index: 1001 !important; top: 40% !important; left: 50% !important; transform: translate(-50%, -50%); width: 75vw; height: calc(100vh - 120px);
    overflow-y: auto; overscroll-behavior: contain; background-color: var(--white); box-sizing: border-box;}
.layer::-webkit-scrollbar{width: 6px; /*display: none;*/}
.layer::-webkit-scrollbar-thumb{border-radius: 6px; background-color: #ddd;}
.layer::-webkit-scrollbar-track{border-radius: 6px; background-color: rgba(193,193,193,0.2);}
.layer.on{visibility: visible; opacity: 1; top: 50% !important; transition: all 0.25s ease;}

.layer .l_wrap{width: 100%; height: 100%; padding: 52px 52px;}

.layer .l_head{}
.layer .l_head .title{font-size: 30px; font-weight: var(--fwb); line-height: 1.2; padding-bottom: 50px;}
.layer .l_body{overflow: hidden; overflow-y: auto; overscroll-behavior: contain; height: calc(100% - 86px); /* 100% - l_head 높이 */ padding-right: 5px;}
.layer .l_body::-webkit-scrollbar{width: 6px;}
.layer .l_body::-webkit-scrollbar-thumb{border-radius: 0px; background-color: #ddd;}
.layer .l_body::-webkit-scrollbar-track{border-radius: 0px; background-color: rgba(193,193,193,0.2);}
.layer .l_foot{}

.layer_closer{visibility: hidden; opacity: 0; position: fixed; z-index: 5; top: 56px; right: 56px; width: 32px; height: 32px; background: url("../img/common/layer_closer.svg") no-repeat center; background-size: contain; font-size: 0;}
.layer_closer.on{visibility: visible; opacity: 1;}


/* layer.type2 */
.layer.type2{display: flex; width: 1440px;}
.layer.type2 .l_side{flex: 0 0 auto; width: 451px; height: 100%; overflow: hidden;}
.layer.type2 .l_side .l_visual{height: 100%; background: #fff;}
.layer.type2 .l_side .l_visual .ytb_frame{position: relative; padding-bottom: calc(177.383% + 200px); margin-top: -100px; width: 100%; height: auto; overflow: hidden;}
.layer.type2 .l_side .l_visual .ytb_frame:after{content: "클릭 터치 방지"; position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent;}
.layer.type2 .l_side .l_visual .ytb_frame iframe{position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%;}
.layer.type2 .l_side .l_visual .ytb_frame iframe:before{content: "";}
.layer.type2 .l_wrap{flex: 1;}

.layer.type2 .l_head{}
.layer.type2 .l_head .tit{display: block; font-size: 24px;}
.layer.type2 .l_head .tit .sup{font-weight: var(--fwm);}
.layer.type2 .l_head .tit .title{display: flex; align-items: center; gap: 11px; font-size: 1.667em; font-weight: var(--fwb); line-height: 1.2; padding: 7px 0 0;}
.layer.type2 .l_head .tit .title span{}
.layer.type2 .l_head .tit .title img{width: 52px; vertical-align: top;}
.layer.type2 .l_body{height: calc(100% - 102px);}
.layer.type2 .l_body .con_wrap{padding: 34px 0 0;}
.layer.type2 .l_body .des{font-size: 17px;}
.layer.type2 .l_body .des p{}
.layer.type2 .l_body .des p + p{padding: 10px 0 0;}
.layer.type2 .l_body .des p br{}
.layer.type2 .l_body .value_list{gap: 20px; padding: 3% 0 0;}
.layer.type2 .l_body .value_list .txt{padding: 50% 0 0;}
.layer.type2 .l_body .value_list .txt .des{font-size: inherit;}
@media (max-width: 1700px), (min-width: 1080px) and (orientation: portrait) {
    .layer_closer{top: 20px; right: 20px;}
}
@media (max-width: 1600px), (min-width: 1080px) and (orientation: portrait) {
    .layer.type2{width: calc(100vw - 170px);}
    .layer.type2 .l_body .value_list{gap: 0;}
    .layer.type2 .l_body .value_list .txt{padding: 25% 0 0;}
    .layer.type2 .l_body .des{font-size: 1rem;}
}
@media (max-width: 1420px), (min-width: 1080px) and (orientation: portrait) {
    .layer.type2 .l_body .value_list > li{flex: initial; width: 50%;}
    .layer.type2 .l_body .value_list > li img{width: 35%;}
    .layer.type2 .l_body .value_list .txt{padding: 30px 0 0;}
}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .layer{width: calc(100vw - 140px); }
    .layer .l_wrap{padding: 40px;}
    .layer .l_head .title{font-size: 26px; padding-bottom: 25px;}
    .layer .l_body{height: calc(100% - 57px);}
    .layer_closer{width: 26px; height: 26px;}

    .layer.type2 .l_head .tit{font-size: 20px;}
    .layer.type2 .l_head .tit .title{display: flex; align-items: center; gap: 15px;}
    .layer.type2 .l_body .des p + p{display: none;}
}
@media (max-width: 1200px), (min-width: 1080px) and (orientation: portrait) {
    .layer.type2 .l_body .value_list > li{width: 100%;}
    .layer.type2 .l_body .value_list > li img{width: 60px; display: block; margin-left: auto;}
    .layer.type2 .l_body .value_list .txt{padding: 10px 0 0;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .layer.type2 .l_body,
    .layer.type2 .l_foot{display: none;}

    .layer.type2{flex-direction: column; aspect-ratio: 451 / 800; width: auto; height: calc(100% - 120px);}
    .layer.type2 .l_side{flex: initial; width: 100%; height: 100%;}
    .layer.type2 .l_wrap{flex: initial; position: absolute; bottom: 0; left: 0; z-index: 2; width: 100%; height: auto; background-color: #fff; border-top: 1px solid #ddd; padding: 20px 20px;}
    .layer.type2 .l_head .tit{font-size: 16px; text-align: center;}
    .layer.type2 .l_head .tit .title{display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 1.15em; padding: 10px 0 0;}
    .layer.type2 .l_head .tit .title img{width: 40px;}
}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .layer{width: calc(100vw - 30px); height: calc(100vh - 240px); }
    .layer .l_wrap{padding: 30px 25px;}
    .layer .l_head .title{font-size: 21px;}
    .layer .l_body{height: calc(100% - 51px);}
    .layer_closer{width: 20px; height: 20px;}

    .layer.type2 .l_head .tit{font-size: 14px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .layer_opener{padding: 2px 10px 1px;}
}


/* fancybox 커스텀 */
.fancybox__backdrop{/* background-color: rgba(0, 0, 0, 0.8) !important; */ /* backdrop-filter: blur(4px); */}


/* hasDatepicker */
.hasDatepicker{background: url("../img/common/hasCalender.svg") no-repeat right 23px center; background-size: 20px auto;}
.hasDatepicker[disabled]{opacity: 0.65; background-color: #f5f5f5; cursor: no-drop;}

/* datepicker */
.datepicker{margin-top: -70px; /* 헤더 fixed 스타일로 높이 계산값 오차 발생하는 만큼 위로 올려주기 */ font-family: inherit !important;}
.datepicker--nav-title,
.datepicker--day-name{font-weight: var(--fwm);}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .datepicker{margin-top: -60px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .datepicker{margin-top: -52px;}
}



/* accordion */
.accordion{border-top: 1px solid var(--main);}
.accordion dl{border-bottom: 1px solid var(--gray);}
.accordion dl dt{position: relative;}
.accordion dl dt.over{}
.accordion dl dt button{position: relative; display: block; width: 100%; line-height: 1.2; padding: 31px 90px 27px 116px; text-align: left; background: #fff;}
.accordion dl dt button:before{content: "Q"; position: absolute; top: 50%; transform: translateY(-56%); /* top: 36px; */ left: 48px; text-transform: uppercase; font-size: 40px; font-weight: var(--fwb_en); font-family: 'Montserrat'; color: var(--gray); line-height: 1;}
.accordion dl dt button:after{content: ""; position: absolute; top: 50%; transform: translateY(-68%) rotate(225deg); right: 55px; width: 14px; height: 14px; box-sizing: border-box; border-top: 2px solid #111; border-left: 2px solid #111; transition: transform 0.1s;}
.accordion dl.on dt button:after{top: 50%; transform: translateY(-25%) rotate(45deg);}
.accordion dl dt button:focus{outline: none;}
.accordion dl dt button .topic{display: inline-block; font-size: 13px; font-weight: var(--fwm); background-color: var(--white); border-radius: 26px; line-height: 26px; padding: 0 14px; box-shadow: inset 0 0 0 1px var(--main); margin: 0 0 10px;}
.accordion dl.on dt button .topic{background-color: #111; color: #fff;}
.accordion dl dt button p{font-size: 20px; font-weight: var(--fwm); text-align: left;}
.accordion dl.on dt button p{font-weight: var(--fwb);}
.accordion dl dd{position: relative; padding: 24px 3rem 23px 116px; border-top: 1px solid #ddd; background-color: #fbf8f2;}
.accordion dl.on dd{}
.accordion dl dd:before{content: "A"; position: absolute; top: 50%; transform: translateY(-56%); /* top: 43px; */ left: 48px; text-transform: uppercase; font-size: 40px; font-weight: var(--fwb_en); font-family: 'Montserrat'; color: var(--main); line-height: 1;}
.accordion dl dd p{font-size: 1rem; font-weight: var(--fwm); line-height: 1.75;}
.accordion dl dd .editorWrap{font: inherit;}
.accordion dl dd .editorWrap > *{font: inherit; margin-bottom: 10px;}
.accordion dl dd .editorWrap ul{}
.accordion dl dd .editorWrap ul > li{position: relative; padding: 0 0 0 20px;}
.accordion dl dd .editorWrap ul > li:before{content: ""; position: absolute; top: 4px; left: 0; display: block; width: 16px; height: 16px; background: url("../img/contents/chkShape_small.svg") no-repeat center / contain;}
.accordion dl dd .editorWrap ul > li + li{margin: 6px 0 0;}
.accordion dl dd .editorWrap ol{counter-reset: number_list}
.accordion dl dd .editorWrap ol > li{position: relative; padding: 0 0 0 20px;}
.accordion dl dd .editorWrap ol > li:before{content: counter(number_list)". "; counter-increment: number_list 1; position: absolute; top: 0; left: 0;}
.accordion dl dd .editorWrap ol > li + li{margin: 6px 0 0;}

.accordion.type2{word-break: break-all; counter-reset: num_list; letter-spacing: -1px;}
.accordion.type2 dl.on{border-bottom-color: transparent;}
.accordion.type2 dl dt button{padding: 27px 80px 26px 76px; letter-spacing: inherit;}
.accordion.type2 dl dt button p{font-size: 18px; font-weight: var(--fwm);}
.accordion.type2 dl.on dt button p{font-weight: var(--fwb);}
.accordion.type2 dl dt button:before{content: "Q"counter(num_list); counter-increment: num_list 1; left: 24px; top: 18px; transform: none; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; font-size: 15px; font-weight: var(--fwb_en); color: var(--main); background-color: #f5f5f5;}
.accordion.type2 dl dt button:after{right: 34px;}
.accordion.type2 dl dd{font-weight: var(--fwm); line-height: 1.5; padding: 38px 80px 38px 76px;}
.accordion.type2 dl dd:before{left: 24px; top: 32px; transform: none; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; font-size: 15px; font-weight: var(--fwb_en); color: var(--main); background-color: #f6efdf;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .accordion dl dt button{padding: 30px 60px 30px 90px;}
    .accordion dl dt button:before{left: 30px;}
    .accordion dl dt button:after{right: 30px;}
    .accordion dl dd{padding: 30px 60px 30px 90px;}
    .accordion dl dd:before{left: 30px;}

    .accordion.type2 dl dt button{padding: 26px 60px 26px 76px;}
    .accordion.type2 dl dt button:before{left: 20px;}
    .accordion.type2 dl dt button:after{right: 24px;}
    .accordion.type2 dl dd{padding: 26px 60px 26px 76px;}
    .accordion.type2 dl dd:before{left: 20px; top: 18px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .accordion dl dt button{padding: 20px 30px 20px 50px;}
    .accordion dl dt button:before{left: 10px; font-size: 24px;}
    .accordion dl dt button p{font-size: 16px;}
    .accordion dl dt button .topic{font-size: 11px; line-height: 20px; padding: 0 10px; margin: 0 0 6px;}
    .accordion dl dt button:after{width: 10px; height: 10px; right: 10px;}

    .accordion dl dd{padding: 20px 30px 20px 50px;}
    .accordion dl dd:before{left: 10px; font-size: 24px;}
    .accordion dl dd p{line-height: 1.5; font-size: 14px;}

    .accordion.type2{}
    .accordion.type2 dl dt button{padding: 18px 40px 18px 45px;}
    .accordion.type2 dl dt button p{font-size: 1rem;}
    .accordion.type2 dl dt button:before{top: 12px; left: 5px; font-size: 12px; width: 30px; height: 30px;}
    .accordion.type2 dl dt button:after{right: 7px;}
    .accordion.type2 dl dd{padding: 18px 40px 18px 45px;}
    .accordion.type2 dl dd:before{top: 16px; left: 5px; font-size: 12px; width: 30px; height: 30px;}
    .accordion.type2 dl dd .chkShape_small{font-size: 14px;}
}


/* stat */
.stat{}
.stat > .wrap{}
.stat .tit{}
.stat .tit h4{}

.stat_list{display: flex; flex-wrap: wrap; padding: 70px 0 0;}
.stat_list > div{flex: 1; text-align: center; padding: 0 10px;}
.stat_list dt{line-height: 1; letter-spacing: 0;}
.stat_list dt .ico{}
.stat_list dt .ico img{}
.stat_list dt .name{font-size: 20px; font-weight: var(--fwb); padding: 24px 0 5px;}
.stat_list dt .amount{position: relative; display: inline-block; font-family: 'Montserrat'; font-weight: var(--fwb_en); font-size: 56px; color: var(--main); line-height: 1;}
.stat_list dt .amount span{position: relative; z-index: 1; display: inline-block; line-height: 1;}
.stat_list dt .amount em{position: absolute; top: 4px; left: 4px; z-index: 0; display: inline-block; line-height: 1; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--gray);}
.stat_list dd{font-size: 16px; font-weight: var(--fwr); line-height: 1.6; padding: 22px 0 0;}
.stat_list dd .fc_theme_mint{font-weight: var(--fwsb_en);}
.stat_list dd br{}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .stat{}
    .stat_list{gap: 20px; justify-content: space-between;}
    .stat_list dt{}
    .stat_list dt .ico img{width: 6.5vw; height: auto;}
    .stat_list dt .name{font-size: clamp(10px,2vw,20px);}
    .stat_list dt .amount{font-size: clamp(10px,5.35vw,64px);}
}
@media (max-width: 800px), (min-width: 1080px) and (orientation: portrait) {
    .stat{}
    .stat_list{gap: 10px;}
    .stat_list > div{padding: 0;}
    .stat_list dt{}
    .stat_list dt .name{font-size: 16px;}
    .stat_list dt .amount{font-size: clamp(10px,4.5vw,42px);}
    .stat_list dd{font-size: 14px; padding: 20px 0 0;}
}
@media (max-width: 700px), (min-width: 1080px) and (orientation: portrait) {
    .stat_list{flex-direction: column; padding: 30px 0 0; gap: 40px; max-width: 240px; margin: 0 auto;}
    .stat_list > div{}
    .stat_list dt .ico img{width: 40px;}
    .stat_list dt .name{font-size: 16px; padding: 10px 0;}
    .stat_list dt .amount{font-size: 36px;}
}


/* stat_cards */
.stat_cards{display: flex; flex-wrap: wrap; justify-content: center; gap: 60px; padding: 100px 0 var(--between_sec); border-bottom: 1px solid #e8e8e8;}
.stat_cards .item{flex: 1; max-width: 440px; text-align: center; padding: 40px 20px; background-color: #f7fafc; border-radius: 7px;}
.stat_cards .item dt{}
.stat_cards .item dt .ico{}
.stat_cards .item dt .ico img{width: 53px; height: auto;}
.stat_cards .item dt .name{font-size: 20px; font-weight: var(--fwb); padding: 26px 0 0;}
.stat_cards .item dd{font-size: 17px; font-family: 'Pretendard'; padding: 11px 0 0;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait){
    .stat_cards .item dt .ico img{width: 5vw;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait){
    .stat_cards{gap: var(--gap); padding: calc( var(--between_sec) * 0.5 ) 0;}
    .stat_cards .item{max-width: none;}
    .stat_cards .item dt .name{font-size: clamp(10px,2vw,20px); padding: 5% 0 0;}
    .stat_cards .item dd{font-size: 16px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait){
    .stat_cards{padding: 40px 0;}
    .stat_cards .item{flex: 0 0 auto; width: 100%; padding: 30px 20px;}
    .stat_cards .item dt .ico img{width: 40px;}
    .stat_cards .item dt .name{font-size: 16px; padding: 10px 0 0;}
}


/* stat_display */
.stat_display{display: flex; flex-wrap: wrap; padding: 80px 0 0; color: #fff;}
.stat_display > div{flex: 1; position: relative; text-align: center; padding: 0 10px;}
.stat_display > div + div{}
.stat_display > div + div:before{content: ""; position: absolute; top: 7px; left: 0; height: 147px; border-left: 1px solid rgba(255,255,255,0.1);}
.stat_display dt{}
.stat_display dt .amount{position: relative; display: inline-block; font-size: 80px; font-weight: var(--fwb_en); line-height: 1;}
.stat_display dt .amount span{position: relative; z-index: 1; display: inline-block; color: var(--theme_mint); line-height: 1;}
/* .stat_display dt .amount span:before{content: attr(data-stat); position: absolute; z-index: -1; top: 4px; left: 4px; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--theme_hotpink);} */
.stat_display dt .amount em{position: absolute; z-index: 0; top: 4px; left: 4px; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--theme_hotpink); line-height: 1;}
.stat_display dd{line-height: 1.75; padding: 21px 0 0;}
.stat_display dd strong{font-weight: var(--fwb); color: var(--theme_mint);}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .stat_display > div{}
    .stat_display dt .amount{font-size: clamp(10px,6vw,80px);}
}
@media (max-width: 800px), (min-width: 1080px) and (orientation: portrait) {
    .stat_display{max-width: 360px; margin: 0 auto; padding: 30px 0 0 3.5%; flex-direction: column; gap: 30px; justify-content: flex-start; align-items: flex-start;}
    .stat_display > div{flex: 0 0 auto; width: 100%; text-align: left; display: flex; align-items: flex-start; padding: 20px;}
    .stat_display > div + div:before{display: none;}
    .stat_display dt{order: 2;}
    .stat_display dt .amount{font-size: clamp(50px,6vw,60px);}
    .stat_display dd{padding: 0; flex: 0 0 auto; width: 190px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .stat_display{gap: 15px;}
    .stat_display dt .amount{font-size: 40px;}
    /* .stat_display dt .amount span:before{top: 2px; left: 2px;} */
    .stat_display dt .amount em{top: 2px; left: 2px;}
}


/* chatBox */
.chatBox{
    --bubblePadding: 14px 28px;
    --bubbleGap: 12px;
    --bubbleRadius: 28px;
    --bubbleRadiusSmall: 4px;

    display: flex; flex-direction: column; flex-wrap: wrap; width: 100%; gap: var(--bubbleGap); padding: 6px 0 0 0;
}
.chatBox > div{display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; width: 100%; gap: var(--bubbleGap); font-size: 15px; line-height: 1.55;}
.chatBox dt{margin-right: auto; max-width: 82%; background-color: #f0f0f0; color: var(--gray_dark); font-weight: var(--fwr_en); padding: var(--bubblePadding); border-radius: var(--bubbleRadius); border-bottom-left-radius: var(--bubbleRadiusSmall);}
.chatBox dt div{position: relative; padding: 0 0 0 26px;}
.chatBox dt div:before{content: "Q."; position: absolute; top: 0; left: 0; font-size: 20px; font-family: 'Montserrat'; font-weight: var(--fwb_en); color: var(--theme_mint); line-height: 1;}
.chatBox dd{margin-left: auto; max-width: 82%; background-color: var(--gray_dark); color: var(--white); font-weight: var(--fwr_en); padding: var(--bubblePadding); border-radius: var(--bubbleRadius); border-bottom-right-radius: var(--bubbleRadiusSmall);}
.chatBox dd div{position: relative; padding: 0 0 0 26px;}
.chatBox dd div:before{content: "a."; position: absolute; top: 0; left: 0; font-size: 20px; font-family: 'Montserrat'; font-weight: var(--fwb_en); color: var(--theme_mint); line-height: 1;}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {

}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .chatBox{
        --bubblePadding: 14px 20px;
        --bubbleRadius: 20px;
        --bubbleRadiusSmall: 4px;
    }
    .chatBox > div{font-size: 14px;}
    .chatBox dt div,
    .chatBox dd div{padding: 0 0 0 23px;}
    .chatBox dt div:before,
    .chatBox dd div:before{font-size: 16px;}
}


/* sch_ui */
#sch_ui{background-color: var(--white); position: fixed; z-index: 5; top: 0; left: 0; width: 100%; height: 100vh; transform: translateY(-100%); transition: all 0.25s ease-in-out; overflow: hidden;}
#sch_ui.on{transform: translateY(0%);}
#sch_ui .top{display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--main);}
#sch_ui .top .title{font-size: 18px; font-weight: var(--fwb); line-height: 60px; padding: 0 0 0 20px;}
#sch_ui .top .btn_close_sch{margin-left: auto; display: inline-block; width: 60px; height: 60px; background: var(--theme_navy) url("../img/common/btn_mm_close.svg") no-repeat center; background-size: 55% auto; font-size: 0;}
#sch_ui .top .sch_ip{position: relative; width: 100%;}
#sch_ui .top .sch_ip input{display: block; width: 100%; height: 60px; padding: 0 55px 0 20px; border: none; font-size: 16px; font-weight: var(--fwb); background: #f5f5f5; color: var(--main); font-family: inherit; outline: none;}
#sch_ui .top .sch_ip input::placeholder{color: rgba(17,17,17,0.3); font-weight: var(--fwr);}
#sch_ui .top .sch_ip button{position: absolute; top: 20px; right: 22px; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: #ccd2d2; font-size: 0;}
#sch_ui .top .sch_ip button:before,
#sch_ui .top .sch_ip button:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 10px; height: 2px; background: var(--main);}
#sch_ui .top .sch_ip button:after{transform: translate(-50%, -50%) rotate(-45deg);}
#sch_ui .top .sch_ip button[disabled]{visibility: hidden; opacity: 0; pointer-events: none;}

#sch_ui .mid{padding: 0 20px; overflow-y: auto; height: calc(100% - 121px); /* 높이 : 100% - 상단 */}
#sch_ui .mid .list_ver{font-family: 'SCDream'; font-size: 12px; font-weight: var(--fwr); color: #888; padding: 16px 0 14px;}
#sch_ui .mid .sch_list{display: flex; flex-direction: column; gap: 43px; width: 100%; padding: 0 0 30px;}
#sch_ui .mid .sch_list > div{}
#sch_ui .mid .sch_list dt{font-size: 16px; font-weight: var(--fwb); padding: 0 0 5px;}
#sch_ui .mid .sch_list dd{}
#sch_ui .mid .sch_list dd .sch_list_depth{counter-reset: num_list;}
#sch_ui .mid .sch_list dd .sch_list_depth li{position: relative; padding: 0 0 0 32px; font-weight: var(--fwm); line-height: 1.3;}
#sch_ui .mid .sch_list dd .sch_list_depth li:before{content: counter(num_list); counter-increment: num_list 1; position: absolute; top: 15px; left: 0; width: 18px; height: 18px; line-height: 18px; border-radius: 50%; text-align: center; background-color: var(--theme_mint); color: var(--white); font-size: 10px; font-weight: var(--fwb_en); font-family: 'Montserrat';}
#sch_ui .mid .sch_list dd .sch_list_depth li + li{border-top: 1px solid #e9e9e9;}
#sch_ui .mid .sch_list dd .sch_list_depth li a{display: block; padding: 15.5px 0;}
#sch_ui .mid .sch_list dd .sch_list_depth li:nth-child(n+4):before{background-color: #999;}
#sch_ui .mid .sch_list dd .sch_list_depth li:nth-child(n+4) a{font-weight: var(--fwr);}
#sch_ui .bot{}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    #sch_ui .top .title{line-height: 52px;}
    #sch_ui .top .btn_close_sch{width: 52px; height: 52px;}
    #sch_ui .top .sch_ip input{height: 52px;}
    #sch_ui .top .sch_ip button[type="reset"]{top: 16px;}
    #sch_ui .mid{height: calc(100% - 125px);}
}


/* transform_slider */
.transform_slider_wrap > .wrap{display: none;}
.transform_slider_wrap .sliderController{display: none;}
.transform_slider{overflow: hidden;}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .transform_slider_wrap.under860{}

    .transform_slider_wrap.under860 .transform_slider{display: block; width: calc(100% + 40px); margin-left: -20px !important;}
    .transform_slider_wrap.under860 .transform_slider > .slick-list{padding: 0 10.3% 0; margin-left: -20px;}
    .transform_slider_wrap.under860 .transform_slider .card{margin-left: 20px; float: left; overflow: hidden;}
    .transform_slider_wrap.under860 .transform_slider .card .img{aspect-ratio: 313 / 218 !important;}
    .transform_slider_wrap.under860 .transform_slider .card .img.rate5{aspect-ratio: 460 / 294 !important;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .transform_slider_wrap{}

    .transform_slider{display: block; width: calc(100% + 40px); margin-left: -20px !important;}
    .transform_slider > .slick-list{padding: 0 10.3% 0; margin-left: -20px;}
    .transform_slider .card{margin-left: 20px; float: left; overflow: hidden;}
    .transform_slider .card .img{aspect-ratio: 313 / 218 !important;}
    .transform_slider .card .img.rate5{aspect-ratio: 460 / 294 !important;}
}


/* 파일첨부 */
.custom-file{position: relative; width: 100%; height: 52px; min-width: 0;}
.custom-file label{position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; height: 52px; line-height: 52px; border: 1px solid var(--gray); box-sizing: border-box; text-align: left; padding: 0 50px 0 24px; cursor: pointer; background-color: #fff; color: rgba(17,17,17,0.3); font-size: 17px; font-weight: var(--fwm);}
.custom-file label:before{content: ""; position: absolute; right: 24px; top: 15px; display: inline-block; vertical-align: middle; margin: 0 0 0 0; width: 20px; height: 20px; background: url("../img/common/ico_upload.svg") repeat-y; background-position: top 20px center;}
.custom-file label:hover:before{transition: 0.3s ease-out; background-position: top 0px center;}

.custom-file input[type="file"]{position: absolute; left: 0; top: 0; width: 0; height: 0; line-height: 0; margin: 0; border: none; padding: 0; overflow: hidden;}
.custom-file input[type="file"]:focus + label{border: 1px solid #111;}
.custom-file .uploaded_file{position: absolute;}
.custom-file .upload_files_del{position: absolute; top: 0; right: 0; color: #fff; background: #111; width: 140px; line-height: 44px; text-align: center; font-size: 1rem; margin: 0; padding: 0; border: none; background-color: #e23131;}
.custom-file img{position: absolute; z-index: 1; width: 40px; height: 30px; left: 65px; top: 50%; transform: translateY(-50%); object-fit: scale-down;}
.custom-file-btn{position: absolute; top: 0; right: 0; color: #fff; background: #111; width: 140px; line-height: 44px; text-align: center; pointer-events: none; font-size: 1rem;}

.info_list{width: 100%; margin: 10px 0 0;}
.info_list > li{position: relative; box-sizing: border-box; padding: 0 0 0 10px; font-size: 0.9rem;}
.info_list > li:before{content: "*"; position: absolute; top: 2px; left: 0;}
.add_fileform button{
    background: #111; color: #fff;
    width: 30px; height: 30px; box-sizing: border-box; padding: 0 0 2px 1px;
    font-size: 1.5rem; line-height: 1; cursor: pointer; text-align: center;
    display: inline-block; vertical-align: middle; margin-right: 0.4rem;
}
.add_fileform span{
    display: inline-block; vertical-align: middle; color: #888; letter-spacing: -0.3px;
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .custom-file label{height: 46px; line-height: 46px; font-size: 14px; padding: 0 42px 0 24px;}
    .custom-file label:before{right: 13px; top: 12px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .custom-file label{padding: 0 38px 0 20px;}
}


/* comboWrap */
.comboWrap{display: flex; flex-wrap: wrap; gap: 5px;}
.comboWrap > *{width: auto; flex: 1;}
.comboWrap .btn_radio{flex: 0.665;}
.comboWrap .url{}
.comboWrap .url input{font-family: 'SCDream' !important;}


/* complete_message */
.complete_message{text-align: center; padding: 100px 0 0;}
.complete_message .tit{display: block !important; margin: 0 auto !important; font-size: 32px; font-weight: var(--fwb);}
.complete_message .r_step{display: flex; flex-wrap: wrap; justify-content: center; padding: 33px 0 0; font-family: 'Pretendard';}
.complete_message .r_step > li{font-size: 20px; font-weight: var(--fwb);}
.complete_message .r_step > li + li{}
.complete_message .r_step > li + li:before{content: ""; display: inline-block; vertical-align: middle; margin: -4px 19px 0 13px; width: 10px; height: 10px; border-top: 2px solid var(--main); border-right: 2px solid var(--main); transform: rotate(45deg);}
.complete_message .r_step > li b{font-weight: var(--fwb); color: var(--theme_mint);}
.complete_message .des{font-size: 18px; padding: 26px 0 0; font-family: 'Pretendard';}
.complete_message .des p{}
.complete_message .des p + p{margin-top: 25px;}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .complete_message .tit{font-size: 20px;}
    .complete_message .des{padding: 15px 0 0;}
    .complete_message .des{font-size: 14px;}
    .complete_message .des p + p{margin-top: 10px;}
    .complete_message .r_step{padding: 20px 0 0;}
    .complete_message .r_step > li{font-size: 17px;}
    .complete_message .r_step > li + li:before{margin: -5px 10px 0 4px;}
}


/* box_slider */
.box_slider_wrap{position: relative; background-color: #f5f5f5; padding: 56px 60px 54px; margin-bottom: 34px;}
.box_slider_wrap .top{display: flex; align-items: center; padding: 0 0 21px;}
.box_slider_wrap .top .title{font-size: 24px; font-weight: var(--fwb); line-height: 1.2;}
.box_slider_wrap .top .info{margin-left: auto; font-size: 13px; font-weight: var(--fwr); color: var(--gray_dark); display: inline-flex; align-items: center; gap: 3px;}
.box_slider_wrap .top .info:before{content: ""; width: 18px; height: 18px; background: url("../img/contents/ico_caution_gray.svg") no-repeat center;}
.box_slider{}
.box_slider .list{overflow: hidden;}
.box_slider .list .slick-list{margin-left: -24px;}
.box_slider .list .card{margin-left: 24px;}
.box_slider .list .card .img{aspect-ratio: 312 / 236;}
.box_slider .btn_bs{position: absolute; top: 46%; transform: translateY(-50%); display: inline-block; width: 48px; height: 48px; background-color: rgba(17,17,17,0.05); font-size: 0;}
.box_slider .btn_bs:before{content: ""; position: absolute; top: 50%; left: 50%; display: inline-block; width: 25%; height: 25%;}
.box_slider .btn_bs_prev{left: 0;}
.box_slider .btn_bs_prev:before{border-top: 2px solid var(--main); border-left: 2px solid var(--main); transform: translate(-38%, -50%) rotate(-45deg);}
.box_slider .btn_bs_next{right: 0;}
.box_slider .btn_bs_next:before{border-top: 2px solid var(--main); border-right: 2px solid var(--main); transform: translate(-62%, -50%) rotate(45deg);}
.box_slider_wrap .m_info{display: none; width: 100%; margin-left: auto; font-size: 12px; font-weight: var(--fwr); color: var(--gray_dark); align-items: center; gap: 3px; padding: 30px 20px 0;}
.box_slider_wrap .m_info:before{content: ""; width: 18px; height: 18px; background: url("../img/contents/ico_caution_gray.svg") no-repeat center;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .box_slider .list .slick-list{margin-left: -20px;}
    .box_slider .list .card{margin-left: 20px;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .box_slider_wrap{padding: 40px 50px;}
    .box_slider_wrap .top .title{font-size: 20px;}
    .box_slider_wrap .top .info{font-size: 12px;}
    .box_slider .btn_bs{width: 40px; height: 40px;}

}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .box_slider_wrap{width: calc(100% + 40px); margin-left: -20px; padding: 40px 0;}
    .box_slider_wrap .top{padding: 0 20px 20px;}
    .box_slider .list .slick-list{padding: 0 12% 0;}
    .box_slider .btn_bs{display: none !important;}
    .box_slider_wrap .top .info{display: none;}
    .box_slider_wrap .m_info{display: inline-flex;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .box_slider_wrap .top{flex-direction: column; align-items: initial;}
    .box_slider_wrap .top .info{margin-left: 0; padding: 5px 0 0;}
    .box_slider .list .slick-list{margin-left: -15px;}
    .box_slider .list .card{margin-left: 15px;}

}


/* sub_main_visual */
.sub_main_visual{position: relative;}
.sub_main_visual .obje{position: relative; aspect-ratio: 1920 / 580; background-color: #ddd; overflow: hidden;}
.sub_main_visual .obje:has(video):before{content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: #111; mix-blend-mode: multiply; opacity: 0.4;}
.sub_main_visual .obje img{width: 100%; height: auto;}
.sub_main_visual .obje .ytb_frame{position: relative; padding-bottom: 57%; padding-bottom: 65%; width: 100%; height: 0; margin-top: -4.5%; overflow: hidden;}
.sub_main_visual .obje .ytb_frame:after{content: ""; position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent;}
.sub_main_visual .obje .ytb_frame iframe{position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%;}
.sub_main_visual .obje video{position: absolute; width: 100%; height: 100%; object-fit: cover;}
.sub_main_visual > .wrap{position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);}
.sub_main_visual > .wrap .txt{height: 100%; display: flex; flex-direction: column; justify-content: center; font-size: 18px; color: var(--white); line-height: 1.325;}
.sub_main_visual > .wrap .txt .title{font-size: 40px; font-weight: var(--fwb);}
.sub_main_visual > .wrap .txt .desc{padding: 19px 0 0;}
@media (max-width: 1500px), (min-width: 1080px) and (orientation: portrait){
    .sub_main_visual > .wrap .txt .title{font-size: 2.5vw;}
}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait){
    .sub_main_visual > .wrap .txt{font-size: 16px;}
    .sub_main_visual > .wrap .txt .title{font-size: 2.8vw;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait){
    .sub_main_visual .obje{aspect-ratio: initial; height: calc(60vh - 60px);}
    .sub_main_visual > .wrap .txt .title{font-size: clamp(22px,3vw,32px);}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait){
    .sub_main_visual .obje{aspect-ratio: initial; height: auto; padding-bottom: 56.5%;}
    .sub_main_visual > .wrap .txt{font-size: 15px; padding: 30% 0 0; line-height: 1.4;}
    .sub_main_visual > .wrap .txt .title{font-size: 18px; font-weight: var(--fwm);}
    .sub_main_visual > .wrap .txt .desc{display: none;}
}


/* thumb_grid_con */
.thumb_grid_con{display: grid; grid-template-columns: 47.223% 1fr; grid-template-rows: repeat(auto-fill, minmax(50px, auto)); grid-row-gap: 36px; grid-column-gap: 54px;}
.thumb_grid_con .thumb_area{background-color: #ddd; grid-column: 1 / 2; grid-row: 1 / 3;}
.thumb_grid_con .thumb_area .thumb_area_list{position: relative; height: 100%;}
.thumb_grid_con .thumb_area .thumb_area_list > li{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: 0.5s;}
.thumb_grid_con .thumb_area .thumb_area_list > li.on{opacity: 1; pointer-events: initial;}
.thumb_grid_con .thumb_area .thumb_area_list > li img{position: absolute; top: 0; left: 0; object-fit: cover; width: 100%; height: 100%;}
.thumb_grid_con .thumb_area .thumb_area_list > li .txt{position: absolute; bottom: 37px; left: 40px; color: var(--white); line-height: 1;}
.thumb_grid_con .thumb_area .thumb_area_list > li .txt .name{font-size: 15px; font-weight: var(--fwm);}
.thumb_grid_con .thumb_area .thumb_area_list > li .txt .name .py{font-size: 1.2em; font-weight: var(--fwsb_en);}
.thumb_grid_con .thumb_area .thumb_area_list > li .txt .name .py em{font-size: 0.723em; font-weight: var(--fwm_en); text-transform: uppercase;}
.thumb_grid_con .thumb_area .thumb_area_list > li .txt .sub{font-weight: var(--fwb_en); font-size: 24px; padding: 11px 0 0;}
.thumb_grid_con .thumb_area .thumb_area_list > li .txt .sub .unit{font-weight: var(--fwm); font-size: 0.625em;}
.thumb_grid_con .tit{}
.thumb_grid_con .tit h3{margin: 0;}
.thumb_grid_con .tit .keyword_filter{order: 3; flex: 0 0 auto; width: 100%; margin: 36px 0 0; padding: 0 0;}
.thumb_grid_con .tit .more{}
.thumb_grid_con .grid_wrap{grid-template-rows: initial; grid-column-gap: 28px;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait){
    .thumb_grid_con{grid-column-gap: 40px;}
    .thumb_grid_con .thumb_area .thumb_area_list > li .txt{bottom: 27px; left: 7%;}
}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait){
    .thumb_grid_con{grid-template-columns: 1fr;}
    .thumb_grid_con .thumb_area{grid-column: initial; grid-row: initial; display: none;}
    .thumb_grid_con .thumb_area .thumb_area_list{aspect-ratio: 680 / 918; height: auto; width: 100%;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait){
    .thumb_grid_con .grid_wrap{grid-column-gap: 15px;}
    .thumb_grid_con .tit .keyword_filter{margin: 24px 0 0;}
}


/* insert_visual */
.insert_visual{position: relative;}
.insert_visual > a{display: block;}
.insert_visual .img{position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.insert_visual .img img{width: 100%; height: 100%; object-fit: cover;} 
.insert_visual .img video{width: 100%; height: 100%; object-fit: cover; object-position: center;}
.insert_visual > a .wrap{padding-top: var(--between_sec); padding-bottom: var(--between_sec);}
.insert_visual .txt{display: flex; flex-direction: column; width: 100%; height: 100%; justify-content: center; color: var(--white);}
.insert_visual .txt .title{font-weight: var(--fwb); margin: 0;}
.insert_visual .txt .sub{font-size: 19px; font-weight: var(--fwb); padding: 30px 0 0;}
.insert_visual .txt .des{font-size: 15px; padding: 10px 0 0;}
.insert_visual .txt .des .lc{}
@media (max-width: 1500px), (min-width: 1080px) and (orientation: portrait){
    .insert_visual > a .wrap{padding-top: 100px; padding-bottom: 100px;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait){
    .insert_visual > a .wrap{padding-top: 10%; padding-bottom: 10%;}
    .insert_visual .txt .title{}
    .insert_visual .txt .sub{font-size: 17px;}
    .insert_visual .txt .des .lc{display: none;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait){
    .insert_visual > a .wrap{padding-top: 50px; padding-bottom: 50px;}
    .insert_visual .txt .title{line-height: 1.4;}
    .insert_visual .txt .sub{font-size: 15px; padding: 20px 0 0;}
    .insert_visual .txt .des{font-size: 14px;}
}


/* bycategoty_slide */
.bycategoty_slide{width: calc(100% + 500px);}
.bycategoty_slide .list{}
.bycategoty_slide .list .slick-list{margin-left: -24px; padding: 0 25.9% 0 0;}
.bycategoty_slide .design_card{margin-left: 24px;}
@media (max-width: 1500px), (min-width: 1080px) and (orientation: portrait) {
    .bycategoty_slide .list .slick-list{padding: 0 32% 0 0;}
}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .bycategoty_slide .list .slick-list{margin-left: -20px; padding: 0 18% 0 0;}
    .bycategoty_slide .design_card{margin-left: 20px;}
}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .bycategoty_slide .list .slick-list{padding: 0 41% 0 0;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .bycategoty_slide .list .slick-list{padding: 0 28% 0 0;}
}


/* ctrlwrap */
.ctrlwrap{display: flex; gap: 15px;}
.ctrlwrap .ctrl{display: inline-block; width: 28px; height: 28px; filter: brightness(0) saturate(100%); font-size: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain;}
.ctrlwrap .ctrl:hover{filter: invert(52%) sepia(43%) saturate(2454%) hue-rotate(142deg) brightness(102%) contrast(102%);}
.ctrlwrap .ctrl_prev{background-image: url("../img/main/ico_arrow_prev.svg");}
.ctrlwrap .ctrl_next{background-image: url("../img/main/ico_arrow_next.svg");}


/* pjt_hash */
.pjt_hash{display: flex; gap: 4px; font-family: 'Pretendard';}
.pjt_hash > li{}
.pjt_hash > li span{display: inline-block; color: var(--white); background-color: var(--gray); font-size: 12px; font-weight: var(--fwb); text-align: center; padding: 0 8px; line-height: 22px; border-radius: 30px;}
.pjt_hash > li span.hash_design{background-color: var(--theme_mint);}
.pjt_hash > li span.hash_branding{background-color: var(--theme_skyblue);}


/* oval */
.oval{font-family: "Pretendard"; padding: 20px;}
.oval > a{display: flex; flex-direction: column; width: 100%; height: 519px; box-shadow: 4px 4px 19px 0px rgba(0,0,0,0.06); padding: 32px 32px 60px; border: 1px solid #ececec; border-radius: 326px; background-color: #fff;}
.oval .top{}
.oval .top .img{/* width: 260px; */ /* height: 208px; */ aspect-ratio: 260 / 208; border-radius: 260px 260px 15px 15px; background-color: #ddd; overflow: hidden;}
.oval .top .img img{width: 100%; height: 100%; object-fit: cover;}
.oval .mid{}
.oval .mid .des{color: #666; text-align: center; padding: 13px 5px 5px; text-overflow: ellipsis; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 5; -webkit-box-orient: vertical; height: 136px;}
.oval .bot{margin-top: auto; display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 10px 0 0;}
.oval .bot .thum{width: 50px; height: 50px; border-radius: 50%; overflow: hidden; background-color: #ddd;}
.oval .bot .thum img{}
.oval .bot .name{font-size: 14px; line-height: 1.2; text-align: center; color: #999;}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait){
    .oval{padding: 0 0 20px;}
    .oval > a{ padding: 20px 20px 30px; height: auto;}
    .oval .top .img{aspect-ratio: 260 / 170;}
}


/* demical_slide */
.demical_slide{}
.demical_slide .list{overflow: hidden; margin-left: -20px;}
.demical_slide .list .slick-list{padding: 0 25% 0 0;}
.demical_slide .list .oval{}
.demical_slide .list .oval + .oval{}
@media (max-width: 1500px), (min-width: 1080px) and (orientation: portrait){
    .demical_slide .list .slick-list{padding: 0 22% 0 0;}
}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait){}
    .demical_slide .list{margin-left: -15px;}
    .demical_slide .list .oval{padding: 15px;}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait){
    .demical_slide .list{margin-left: -20px; margin-right: -20px;}
    .demical_slide .list .slick-list{padding: 0 28% 0 0;}
    .demical_slide .list .oval{margin-left: 20px; padding: 0 0 20px;}
}


/* row_list_wrap */
.row_list_wrap{display: flex; width: 100%; flex-direction: column; gap: 90px;}


/* row_item */
.row_item{display: flex; flex-wrap: wrap; width: 100%;}

.row_item .ri_item_con{flex: 0 0 auto; width: 50%;}

.row_item .ri_item_con.ri_item_thumb{position: relative; aspect-ratio: 720 / 400; overflow: hidden;}
.row_item .ri_item_con.ri_item_thumb.video_type{}
.row_item .ri_item_con.ri_item_thumb > img{width: 100%; height: 100%; object-fit: cover;}
.row_item .ri_item_con.ri_item_thumb > .ytb_frame{position: relative; padding-bottom: 88.26%; width: 100%; height: 0; margin-top: -16.5%; overflow: hidden;}
.row_item .ri_item_con.ri_item_thumb > .ytb_frame iframe{position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%;}
.row_item .ri_item_con.ri_item_thumb > .ytb_frame:after{content: ""; position: absolute; z-index: 3; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; background-repeat: no-repeat; background-position: center; /* background-image: url("../img/contents/bygrid_item_video_overlay.svg"); */ /* 유튜브 영역이 클릭되지 않도록 덮는 용도 */}

.row_item .ri_item_con.ri_item_text{padding: 36px 0 0;}
.row_item .ri_item_con.ri_item_text .title{line-height: 1;}
.row_item .ri_item_con.ri_item_text .title h5{display: inline; font-size: 28px; font-weight: var(--fwb);}
.row_item .ri_item_con.ri_item_text .title .sub{display: inline; font-size: 12px; font-weight: var(--fwr_en); text-transform: uppercase; color: #999; margin: 0 0 0 5px;}
.row_item .ri_item_con.ri_item_text .ri_info{display: flex; flex-wrap: wrap; gap: 30px; padding: 27px 0 0;}
.row_item .ri_item_con.ri_item_text .ri_info > li{}
.row_item .ri_item_con.ri_item_text .ri_info > li a{display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 15px; font-weight: var(--fwb);}
.row_item .ri_item_con.ri_item_text .ri_info > li a:before{content: ""; display: inline-block; width: 23px; height: 23px; background-repeat: no-repeat; background-position: center; background-size: 100% auto;}
.row_item .ri_item_con.ri_item_text .ri_info > li a.bul_consult:before{background-image: url("../img/contents/showroom/bul_consult.svg");}
.row_item .ri_item_con.ri_item_text .ri_info > li a.bul_map:before{background-image: url("../img/contents/showroom/bul_map.svg");}
.row_item .ri_item_con.ri_item_text .ri_list{display: flex; flex-direction: column; gap: 10px; width: 100%; font-size: 15px; font-weight: var(--fwm);}
.row_item .ri_item_con.ri_item_text .ri_list > div{line-height: 1.5; display: flex;}
.row_item .ri_item_con.ri_item_text .ri_list > div dt{flex: 0 0 auto; width: 100px; color: #999;}
.row_item .ri_item_con.ri_item_text .ri_list > div dd{flex: 1;}
@media (max-width: 800px), (min-width: 1080px) and (orientation: portrait) {
    .row_item{flex-direction: column;}
    .row_item .ri_item_con{width: 100%;}
    .row_item .ri_item_con.ri_item_thumb{}
    .row_item .ri_item_con.ri_item_thumb.video_type{margin-top: 10px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .row_item .ri_item_con.ri_item_thumb.video_type{margin-top: 10px;}
    .row_item .ri_item_con.ri_item_text{padding: 20px 0 0;}
    .row_item .ri_item_con.ri_item_text .title h5{font-size: 18px;}
    .row_item .ri_item_con.ri_item_text .ri_info{padding: 18px 0 0;}
    .row_item .ri_item_con.ri_item_text:nth-child(4){}
    .row_item .ri_item_con.ri_item_text .ri_list{font-size: 14px;}
    .row_item .ri_item_con.ri_item_text .ri_list > div dt{width: 80px;}
}


/* introduce_list */
.introduce_list{display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(auto-fill, minmax(10px, auto)); row-gap: 65px; column-gap: var(--gap_large); padding: 20px 0 0;}
.introduce_list > li{}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .introduce_list{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .introduce_list{grid-template-columns: repeat(1, 1fr); row-gap: 60px;}
}


/* introduce_card */
.introduce_card{}
.introduce_card .img{aspect-ratio: 440 / 520;}
.introduce_card .img img{width: 100%; height: 100%; object-fit: cover;}
.introduce_card .txt{font-family: 'Pretendard'; padding: 10% 0 0;}
.introduce_card .txt .title{font-size: 22px; font-weight: var(--fwb);}
.introduce_card .txt .desc{font-size: 16px; padding: 13px 0 0;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .introduce_card .txt{padding: 8% 0 0;}
    .introduce_card .txt .title{font-size: 20px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .introduce_card .txt{padding: 17px 0 0;}
    .introduce_card .txt .title{font-size: 18px;}
    .introduce_card .txt .desc{font-size: 15px; padding: 5px 0 0;}
}


/* divide_ban */
.divide_ban{position: relative; background-color: var(--theme_navy2);}
.divide_ban > .wrap{}
.divide_ban > .wrap .con{width: 50%; padding: 116px 20px 113px 0;}
.divide_ban .img{position: absolute; top: 0; bottom: 0; left: 50%; right: 0;}
.divide_ban .img img{width: 100%; height: 100%; object-fit: cover;}

.divide_ban.gray{background-color: #f8f8f8;}
.divide_ban.gray .large_tit .tle{color: var(--theme_navy);}
@media (max-width: 1500px), (min-width: 1080px) and (orientation: portrait) {
    .divide_ban > .wrap .con{padding: 7% 20px 7% 0;}
}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .divide_ban > .wrap .con{padding: 10% 20px 10% 0;}
    .divide_ban .large_tit .btn_wrap{margin-top: 20%;}
}
@media (max-width: 500px), (min-width: 1080px) and (orientation: portrait) {
    .divide_ban .large_tit .tle{font-size: clamp(16px,4.2vw,36px);}
    .divide_ban .large_tit .btn_wrap .round_btn{padding: 0 20px;}
}


/* col2_table */
.col2_table{border-top: 1px solid #111; font-size: 15px; font-weight: var(--fwr);}
.col2_table > div{display: flex; flex-wrap: wrap; border-bottom: 1px solid #eee;}
.col2_table dt{flex: 0 0 auto; width: 200px; padding: 13px 10px 13px 0; font-weight: var(--fwm);}
.col2_table dd{flex: 1; padding: 13px 10px 13px 0;}
.col2_table .list_dot{}
.col2_table .list_dot > li{position: relative; padding: 0 0 0 10px;}
.col2_table .list_dot > li:before{content: "·"; position: absolute; top: 0; left: 0; width: 10px;}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .col2_table dt{width: 150px;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .col2_table{font-size: 13px;}
    .col2_table dt{width: 105px; padding: 10px 10px 10px 0;}
    .col2_table dd{padding: 10px 10px 10px 0;}
}


/* cp_info */
.cp_info{display: flex; flex-wrap: wrap; align-items: flex-start;}
.cp_info .tit{flex: 1;}
.cp_info .col2_table{flex: 0 0 auto; width: 720px;}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    /* .cp_info .tit{flex: 0 0 auto; width: 100%;} */
    .cp_info .tit{flex: 0.5; padding: 0 50px 0 0;}
    .cp_info .col2_table{flex: 1;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .cp_info .tit{flex: 0 0 auto; width: 100%; padding: 0;}
    .cp_info .tit br{display: none;}
    .cp_info .col2_table{flex: 0 0 auto; width: 100%;}
}


/* demical_slide */
.demical_slide{}
.demical_slide .list{overflow: hidden; margin-left: -20px;}
.demical_slide .list .slick-list{padding: 0 25% 0 0;}
.demical_slide .list .oval{}
.demical_slide .list .oval + .oval{}
@media (max-width: 1500px), (min-width: 1080px) and (orientation: portrait) {
    .demical_slide .list .slick-list{padding: 0 22% 0 0;}
}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait){}
    .demical_slide .list{margin-left: -15px;}
    .demical_slide .list .oval{padding: 15px;}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait){
    .demical_slide .list{margin-left: -20px; margin-right: -20px;}
    .demical_slide .list .slick-list{padding: 0 28% 0 0;}
    .demical_slide .list .oval{margin-left: 20px; padding: 0 0 20px;}
}


/* insec_slide */
.insec_slide{position: relative;}
.insec_slide .btn_insec_slide{position: absolute; z-index: 2; top: 50%; display: inline-block; width: 28px; height: auto; aspect-ratio: 1 / 1; background: url("../img/contents/ico_arrow_2.svg") no-repeat center; background-size: 100% auto; font-size: 0;}
.insec_slide .btn_insec_slide_prev{right: calc(100% + 40px); transform: translateY(-50%) rotate(180deg);}
.insec_slide .btn_insec_slide_next{left: calc(100% + 40px); transform: translateY(-50%);}
.insec_slide .btn_insec_slide:hover{filter: invert(52%) sepia(43%) saturate(2454%) hue-rotate(142deg) brightness(102%) contrast(102%);}
.insec_slide .list{overflow: hidden;}
.insec_slide .list .slick-list{margin-left: calc( var(--gap) * -1 );}
.insec_slide .list .card{margin: 0 0 0 var(--gap);}
.insec_slide .list .card + .card{}
@media (max-width: 1640px), (min-width: 1080px) and (orientation: portrait) {
    /* .insec_slide{padding: 0 50px;} */
    /* .insec_slide .btn_insec_slide_prev{right: auto; left: 0;} */
    /* .insec_slide .btn_insec_slide_next{left: auto; right: 0;} */
    .insec_slide{width: calc(100% + 180px); margin-left: -90px;}
    .insec_slide .btn_insec_slide{display: none !important;}
    .insec_slide .list .slick-list{padding: 0 9% 0;}
}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .insec_slide .list .slick-list{padding: 0 12% 0;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {

}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .insec_slide .list .slick-list{padding: 0 18% 0;}
}
@media (max-width: 640px), (min-width: 1080px) and (orientation: portrait) {
    .insec_slide{width: calc( 100% + 40px ); margin-left: -20px;}
    .insec_slide .list .slick-list{padding: 0 10.3% 0;}
}


/* css animations - TARGET Class */
.fx_zoomOut{transform: scale(1.05); animation: zoomOut 1.5s cubic-bezier(0.25,1,0.5,1) forwards;}


/* css animations */
@keyframes zoomOut{
    0%   {transform:scale(1.05)}
    100% {transform:scale(1.0)}
}
@keyframes mockup_moveup{
    0%   {top: 100%;}
    100% {top: 50%;}
}
@keyframes hanging{
    0%   {transform: translateY(100px); opacity: 0;}
    100% {transform: translateY(-18px); opacity: 1;}
}