@charset "utf-8";
/*
 * Dependency : zReset.css, zCommon.css
 *
 * summary:
 * 01) button
 * 02) tooltip
 * 03) dialog
 * 04) count
 * 05) switch
 * 06) alert
 * 06) js tooltip
 * 07) js select
 * 08) js toggle
 * 09) js more read
 * 10) js trans y0
 * --) icon
 */

/* **************************************** *
 * button
 * **************************************** */
.comp-button{margin-top:12rem; font-size: 0;}
.button {overflow:hidden; display: inline-block; display:inline-flex; flex:1 1 0; justify-content: center; align-items: center; text-align: center;}
.button .ico + span{line-height:1;}
.button-ico {width: 56rem; height: 56rem; padding: 3rem;}
.button-ico .ico{width:100%; height:100%; border:1rem solid #D9D9D9; border-radius:50%;}
.button-box {min-width:210rem; height: 60rem; padding:0 10rem; line-height:58rem; gap: 4rem; border: 1rem solid rgba(7, 64, 228, 0.1); border-radius:5rem; background-color: rgba(7, 64, 228, 0.03); font-weight: 600; font-size: 17rem; color: var(--primary800);}
.button-box .ico{top: -.5rem;}
.button-box.default {border-color: var(--grayBorderTertiary); background-color: var(--backgroundSecondary); color: var(--textTertiary);}
.button-box.primary {border-color: var(--primary800); background-color: var(--primary800); color: var(--textOn);}
.button-box.button-sm{min-width:138rem; height:46rem; line-height:44rem; font-size:15rem;}
.button-box.button-sm[lang=kr]{font-weight:500}
.button-box.button-sm + .button-box.button-sm{margin-left: 8rem;}
.button-text{display: flex; gap:2rem; font-size:15rem; color: var(--textSecondary);}
.button-text.button-sm{font-size:13rem;}
.button-position{position: absolute; top: 0; left: 0; width: 100%; height: 100%; color:currentColor;}
.button[disabled]{touch-action:none; cursor: initial !important;}
.button-box:not([disabled]):hover{border-color:rgba(7, 64, 228, 0.4);}
.button-ico:not([disabled]):hover .ico{border-color:#3C3C3C;}
.button-box.default:not([disabled]):hover{border-color: #C2C2C2;}
.button-ico + .button-ico{margin-left: 8rem;}
.button-box + .button-box{margin-left: 12rem;}
.button-ico + .button-box{margin-left: 24rem;}


/* **************************************** *
 * tooltip
 * **************************************** */
.comp-tooltip{display: inline-block; position: relative;}
.comp-tooltip.animation .tooltip-expand{top: 100%; bottom: auto; margin-bottom: 0; margin-top: 21rem;}
.comp-tooltip.animation .tooltip-expand:before{top: auto; bottom: 100%; margin-top:0; margin-bottom:-1rem; transform: rotate(180deg);}
.comp-tooltip:hover .tooltip-expand{opacity: 1; visibility: visible;}

.tooltip-expand{opacity: 0; visibility: hidden; position: absolute; z-index:10; bottom: 100%; left: 50%; width: 408rem; padding: 24rem; margin-bottom: 21rem; border: 1px solid #D9D9D9; border-radius:5rem; background: #fff; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1); transform:translateX(-50%);}
.tooltip-expand:before{content:""; display: block; position: absolute; top: 100%; left: 50%; margin-left:-11rem; margin-top:-1rem; width: 22rem; height: 17rem; background:url(/pc/images/icon-etc-tail-WH.svg) no-repeat 50% 50%; background-size:auto 100%;}
.tooltip-expand .tooltip-img{width: 100%; height: 0; padding-top: 67.04%; background:no-repeat 50% 50%; background-size:cover;}
.tooltip-expand .tooltip-img + .tooltip-detail{margin-top: 16rem;}
.tooltip-expand .tooltip-detail .tit{display:block; margin-bottom: 8px; color:#101010;}
.tooltip-expand .tooltip-detail .desc{display: block; margin-bottom: 16rem; line-height:22rem; color:#939393;}
.tooltip-expand .tooltip-detail .desc:last-child{margin-bottom: 0;}

.tooltip-default{margin-top:4rem;}
.tooltip-default .inbox{position: relative; padding: 24rem; line-height:1.45; font-size:15rem; font-weight:400; color:#fff; background-color: #3c3c3c; border-radius: 5rem;}
.tooltip-default .inbox .tail{display: block; position: absolute; bottom:100%; width:8rem; height:5rem; background:url(/pc/images/icon-etc-tail.svg) no-repeat 50% 50%; background-size:auto 100%;}
.tooltip-default .inbox p{white-space: nowrap;}
.tooltip-default.optional .inbox p{white-space: normal !important;}
/* version2 */
/* 20230110, OP21-1007, 홈서비스 관련 툴팁 업데이트(1) */
.comp-tooltip-tip{overflow: visible; position: relative;}
.comp-tooltip-tip:after {opacity: 0; visibility: hidden; content:""; display: block; position: absolute; top:100%; left: 50%; margin-left: -4rem; width:8rem; height:5rem; background:url(/pc/images/icon-etc-tail.svg) no-repeat 50% 50%; background-size:auto 100%;}
.comp-tooltip-tip .tooltip-icon-close{margin-left:6rem;}
.comp-tooltip-tip .tooltip-default{opacity: 0; visibility: hidden; position: absolute; z-index:-1; max-width: 600rem;}
.comp-tooltip-tip .tooltip-default.max{width:600rem;}
.comp-tooltip-tip .tooltip-default.optional{width:500rem!important;
    /*right: -290px!important;*/
}
.comp-tooltip-tip .tooltip-default.max .inbox p{white-space: revert;}
.comp-tooltip-tip.js-active:after{opacity: 1; visibility: visible;}
.comp-tooltip-tip.js-active .tooltip-default{opacity: 1; visibility: visible; z-index:98;}

/* vertion3 */
/* 20230110, OP21-1007, 홈서비스 관련 툴팁 업데이트(2) */
.comp-tooltip-tip.ver3:after{margin-top: 2rem;}
.comp-tooltip-tip.ver3 .tooltip-default{margin-top: 6rem;}
.comp-tooltip-tip.ver3 .tooltip-default .inbox {padding: 12rem 14rem; line-height:22rem; background: #101010;}

/* vertion4 */
/* 230125, OP21-843, 프런트 > 보험료 계산 버튼 개선 */
.comp-tooltip-tip-expand:after{z-index:99; width: 22px; height: 17px; margin-left: -11px; margin-top: 2px; background-image:url(/pc/images/icon-etc-tail-WH.svg); transform: rotate(180deg); pointer-events: none;}
.comp-tooltip-tip-expand .inbox-position{padding-top: 15rem;}
.comp-tooltip-tip-expand .tooltip-default{top: 100%; margin-top: 2px; filter: drop-shadow(0 0 12px rgb(0 0 0 / 10%));}
.comp-tooltip-tip-expand .tooltip-default .inbox{padding: 18px 25px; color:#ccc; border:1px solid #d9d9d9; background-color: #ffffff;}
.comp-tooltip-tip-expand .tooltip-default .inbox p{white-space: nowrap;}

/* **************************************** *
 * table
 * **************************************** */
.comp-table{border-top:2px solid #A7A7A7;}
.comp-table th,
.comp-table td{padding: 15rem 22rem; border:1px solid #D9D9D9; border-width:0 1rem 1rem 0; vertical-align: middle;}
.comp-table th:last-child,
.comp-table td:last-child{border-right-width:0;}
.comp-table th{background:#F8F8F8; color:#101010; font-weight:500; text-align: left; word-break: keep-all; Letter-spacing: -2%}
.comp-table td{color:#101010; text-align: left; word-break: keep-all;}



/* **************************************** *
 * js tooltip
 * **************************************** */
.js-tooltip-button{position: relative;}
.js-tooltip-default{opacity: 0; visibility: hidden; position: absolute; z-index:-1;}
.js-tooltip-default.js-active{opacity: 1; visibility: visible; z-index:100;}


/* **************************************** *
 * dialog
 * **************************************** */
.comp-dialog-wrap ._dimmed{background: rgba(0,0,0,0.4)}
/* 0525 */
.comp-dialog{position: absolute; top: 50%; left: 50%; z-index:110; width: 500rem; max-height:96vh; transform: translate(-50%,-50%);}
/* 0525 end */
.comp-dialog .dialog__header{position: relative;}
.comp-dialog .dialog__header .close{position: absolute;}
.comp-dialog .dialog__content{position: relative; text-align: center;}
.comp-dialog .dialog__content .close-text{font-weight:600; color:#707070;}
.comp-dialog .dialog__content .close-text.-primary{color:#0740E4;}
.comp-dialog .dialog-tit{line-height:36rem; font-size: 25rem; font-weight: 600;}
.comp-dialog .dialog-tit + * {margin-top: 16rem;}
.comp-dialog .dialog-vn {display:flex; align-items:center; justify-content: center; gap: 2rem; margin-bottom: 8rem; color: #101010; font-size: 15rem; font-weight: 600;}
.comp-dialog .dialog-vn .ico:after {background: #101010;}
.comp-dialog .dialog-txt{line-height:22rem; font-size: 15rem; word-break: break-word;}
.comp-dialog .comp-button{margin-top: 48rem;}
.comp-dialog .close:hover{transform:scale(1.05)}
.comp-dialog .close-text:hover{opacity: .5;}

#dialogShare .comp-dialog{position: relative; width:463rem; min-height:290rem; padding:36rem 0 38rem; border-radius:10rem; background: #fff; text-align: center;}
#dialogShare .comp-dialog .close{top: 50%; right: 48rem; margin-top: -18rem;}
#dialogShare .comp-dialog .close .ico{width:32rem; height:32rem;}
#dialogShare .comp-dialog .dialog__header{position: relative; margin-bottom: 32rem; padding: 0 64rem;}
#dialogShare .list-sns[data-css-layout]{justify-content: space-between;}
#dialogShare .list-sns{max-width:344rem; margin:-2rem auto 16rem; text-align: center;}
#dialogShare .list-sns .urlInput{position: fixed; left: -99999rem; top: -99999rem; opacity: 0;}
#dialogShare .list-sns span{display: block; color:#3c3c3c; font-weight: 600;}
#dialogShare .dialog-txt{color:#a7a7a7;}

#dialogShare .dialogAlert.comp-dialog{width:312rem; min-height: initial; padding: 0;}
#dialogShare .dialogAlert.comp-dialog .dialog__content{padding: 24rem 24rem 20rem; background-color: #fff; border-radius:5rem; text-align: left;}
#dialogShare .dialogAlert.comp-dialog .dialog-txt{font-size:17rem; font-weight:500; color:#101010;}
#dialogShare .dialogAlert.comp-dialog .comp-button{margin-top:28rem; text-align: right;}
#dialogShare .dialogAlert.comp-dialog .close-text{margin-right:-8rem; padding:3rem 8rem 4rem;}
#dialogShare .comp-dialog.hidden {display: none};

#dialogAlert .comp-dialog{width:312rem;}
#dialogAlert .comp-dialog .dialog__content{padding: 24rem 24rem; background-color: #fff; border-radius:5rem; text-align: left;}
#dialogAlert .comp-dialog .dialog-txt{font-size:17rem; font-weight:500; color:#101010;}
#dialogAlert .comp-dialog .comp-button{margin-top:28rem; text-align: right;}
#dialogAlert .comp-dialog .close-text{margin-right:-8rem; padding:3rem 8rem 4rem;}

.dialog-alert .comp-dialog{width:312rem;}
.dialog-alert .comp-dialog .dialog__content{padding: 24rem 24rem 20rem; background-color: #fff; border-radius:5rem; text-align: left;}
.dialog-alert .comp-dialog .dialog-txt{font-size:15rem; font-weight:500; color:#101010;}
.dialog-alert .comp-dialog .comp-button{margin-top:28rem; text-align: right;}
.dialog-alert .comp-dialog .close-text{transform: translateX(12rem); padding:3rem 12rem 4rem; font-size: 15rem; white-space: nowrap;}

#dialogDesc .comp-dialog {width:1100rem; border-radius:10rem; background: #fff;}
#dialogDesc .comp-dialog .dialog__header {padding:32rem 48rem 32rem; text-align: center;}
#dialogDesc .comp-dialog .dialog__content {padding:0rem 48rem 47rem;}
#dialogDesc .comp-dialog .close{top: 50%; right: 48rem; margin-top: -18rem;}
#dialogDesc .comp-dialog .close .ico{width:32rem; height:32rem;}

#dialog-optional-tooltip .comp-dialog{position: relative; width:463rem; min-height:auto; padding:32rem 0; border-radius:10rem; background: #fff; overflow-y: auto;}
#dialog-optional-tooltip .comp-dialog .close{top: 3px; right: 32rem;}
#dialog-optional-tooltip .comp-dialog .close .ico{width:24rem; height:24rem;}
#dialog-optional-tooltip .comp-dialog .dialog__header{position: relative; padding: 0 32rem;}
#dialog-optional-tooltip .comp-dialog .dialog-tit{font-size: 20px;font-style: normal;font-weight: 700;color: #000;line-height: normal;margin-right: 30px;}
#dialog-optional-tooltip .comp-dialog .dialog__contents{margin-top: 14px; padding: 0 32px;}
#dialog-optional-tooltip .comp-dialog .dialog__contents .p{font-size: 17px;font-style: normal;font-weight: 500;}
#dialog-optional-tooltip .list-sns[data-css-layout]{justify-content: space-between;}
#dialog-optional-tooltip .list-sns{max-width:344rem; margin:-2rem auto 16rem; text-align: center;}
#dialog-optional-tooltip .list-sns .urlInput{position: fixed; left: -99999rem; top: -99999rem; opacity: 0;}
#dialog-optional-tooltip .list-sns span{display: block; color:#3c3c3c; font-weight: 600;}
#dialog-optional-tooltip .dialog-txt{color:#a7a7a7;}

#dialog-optional-tooltip .dialogAlert.comp-dialog{width:312rem; min-height: initial; padding: 0;}
#dialog-optional-tooltip .dialogAlert.comp-dialog .dialog__content{padding: 24rem 24rem 20rem; background-color: #fff; border-radius:5rem; text-align: left;}
#dialog-optional-tooltip .dialogAlert.comp-dialog .dialog-txt{font-size:17rem; font-weight:500; color:#101010;}
#dialog-optional-tooltip .dialogAlert.comp-dialog .comp-button{margin-top:28rem; text-align: right;}
#dialog-optional-tooltip .dialogAlert.comp-dialog .close-text{margin-right:-8rem; padding:3rem 8rem 4rem;}
#dialog-optional-tooltip .comp-dialog.hidden {display: none}

/* content : 문자상담 */
#wrap.eco-sell-view .flexibleDig .button-box.primary {border-color: #0740E4; background-color: #0740E4;}

.flexibleDig .button-box {height: 52rem; font-size: 15rem; font-weight: 500; line-height: 50rem;}
.flexibleDig.comp-dialog {position: relative; width:500rem; height:780rem; border-radius:5rem; background: #fff; overflow: hidden;}
.flexibleDig.comp-dialog.hidden {display: none}
.flexibleDig.comp-dialog .comp-button{margin-top: 48rem;}
.flexibleDig.comp-dialog .dialog__header {padding:32rem; text-align: left;}
.flexibleDig.comp-dialog .dialog__scroll {overflow-y: auto; height: 680rem; padding-bottom: 16rem;}
.flexibleDig.comp-dialog .close:not(.close-text){display: flex; align-items: center; justify-content: center; margin: 0; top: 50%; right: 16rem; transform: translateY(-50%); width: 64rem; height: 64rem;}
.flexibleDig.comp-dialog .close:not(.close-text) .ico{width:64rem; height:64rem;}
.flexibleDig.comp-dialog .dialog-tit{line-height:36rem; font-size: 25rem; font-weight: 600; color: #101010;}
.flexibleDig.comp-dialog .dialog__content {position: relative; padding:16rem 32rem; border: initial; background: initial; text-align: left;}

.flexibleDig.comp-dialog .dialog__content.flex-between {display: flex; align-items: center; justify-content: space-between;}
.flexibleDig.comp-dialog .dialog__content .tooltip-title {display: flex; align-items: center; gap: 2rem;}
.flexibleDig.comp-dialog .dialog__content .tooltip-title .comp-tooltip {height: 22rem;}
.flexibleDig.comp-dialog .dialog__content .tooltip-title .comp-tooltip .tooltip__button,
.flexibleDig.comp-dialog .dialog__content .tooltip-title .comp-tooltip .tooltip__button .ico-ms{width: 22rem; height: 22rem;}
.flexibleDig.comp-dialog .dialog__content .alarm-title > p {font-size: 15rem; font-weight: 400; color: #101010; line-height: 22rem;}
.flexibleDig.comp-dialog .dialog__content .files-title {margin-bottom: 10rem;}
.flexibleDig.comp-dialog .dialog__content .files-title > p {font-size: 13rem; font-weight: 500; color: #a7a7a7; line-height: 19rem;}
.flexibleDig.comp-dialog .dialog__content .comp-tooltip-tip + .tooltip-default {display: none;}
.flexibleDig.comp-dialog .dialog__content .comp-tooltip-tip.js-active + .tooltip-default {display: block; position: absolute; top: 39rem; z-index: 1; margin-left: 32rem; max-width: calc(100% - 64rem);}
.flexibleDig.comp-dialog .dialog__content .comp-tooltip-tip + .tooltip-default .inbox {padding: 16rem;}
.flexibleDig.comp-dialog .dialog__content .comp-tooltip-tip + .tooltip-default .inbox .txt {white-space: nowrap; text-align: left; font-size: 11rem;}

.flexibleDig.comp-dialog .dialog__content.position-center {position: absolute; width: 100%; top: 50%; transform: translateY(-50%); text-align: center;}  }
.flexibleDig.comp-dialog .dialog__content.position-center b {display: block; margin-bottom: 6rem; font-size: 25rem; color: #101010; line-height: 36rem;}
.flexibleDig.comp-dialog .dialog__content.position-center p {font-size: 17rem; color: #a7a7a7; line-height: 25rem;}
.flexibleDig.comp-dialog .dialog__content.carInfo {background: #f8f8f8;}
.flexibleDig.comp-dialog .dialog__content.carInfo h2{margin-bottom: 24rem; font-size: 17rem; color: #101010; font-weight: 700; text-align: left;}
.flexibleDig.comp-dialog .dialog__content.carInfo ul .dl {display: flex; align-items: center; justify-content: space-between; gap: 5rem;}
.flexibleDig.comp-dialog .dialog__content.carInfo ul .dl + .dl {margin-top: 5rem;}
.flexibleDig.comp-dialog .dialog__content.carInfo ul .dl .dl__dt {font-size: 15rem; line-height: 22rem; color: #939393; white-space: nowrap;}
.flexibleDig.comp-dialog .dialog__content.carInfo ul .dl .dl__dd {font-size: 15rem; line-height: 22rem; font-weight: 500; color: #101010;}
.flexibleDig.comp-dialog .dialog__content.fixed {position: absolute; bottom:0; left:0; width:100%; z-index:100; padding-top: 32rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 11.82%, rgba(255, 255, 255, 0.8) 19.81%, #FFFFFF 29.02%); border-radius: 0 0 5rem 5rem;}
.flexibleDig.comp-dialog .dialog__content.fixed.-transparent {background: transparent;}
.flexibleDig.comp-dialog .dialog__content.fixed .button_wrap:first-child{margin: 0;}
.flexibleDig.comp-dialog .dialog__content .lottie-container .lottie {width: 120rem; margin-bottom: 16rem;}
.flexibleDig.comp-dialog .dialog__content.agree {display: flex; flex-direction: column; gap: 12rem;}
.flexibleDig.comp-dialog .switch-box {position: absolute; top: 50%; transform: translateY(-50%); right: 32rem;}

.flexibleDig .dialog__porfile{display: flex; align-items: center; gap: 16rem; color: #101010;}
.flexibleDig .dialog__porfile .thumb .img{overflow:hidden; display: inline-block; position: relative; width:64rem; height:64rem; border-radius:50%; vertical-align: top;}
.flexibleDig .dialog__porfile .thumb .img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; width: 100%; height: 100%; aspect-ratio: auto 100 / 100;}
.flexibleDig .dialog__porfile .name{display:block; font-size: 17rem; text-align: left;}
.flexibleDig .dialog__porfile .contact{margin-top:2rem;}
.flexibleDig .dialog__porfile .contact b{margin-top:2rem; font-size:17rem; font-weight: 600; white-space: nowrap;}
.flexibleDig .select-form .txtCount {margin-top: 8rem; text-align: right; font-size: 13px; font-weight: 400; color: #c2c2c2;}
.flexibleDig .select-form .txtCount span {color: inherit;}
.flexibleDig .selection {position: relative; display: block; text-align: left;}
.flexibleDig .selection+.selection {margin: initial;}
.flexibleDig .selection label {padding-left: 28rem; font-size: 15rem; color: #555555;}
.flexibleDig .selection input+label:before {width: 20rem; height: 20rem; top: 50%; transform: translateY(-50%);}
.flexibleDig .selection [type=checkbox]:checked+label:before {background: url(/mo/images/icon_checkbox_small_blue.svg);background-position: initial;}
.flexibleDig .selection [type=checkbox]+label:before {background: url(/mo/images/icon_checkbox_large_gray.svg);background-position: initial;}
.flexibleDig .selection [type=checkbox]:hover:not(:checked):not(:disabled)+label:before {background: url(/mo/images/icon_checkbox_large_gray.svg);background-position: initial;}
.flexibleDig .selection .link-btn {position: absolute; right: -8rem; top: 50%; display: flex; align-items: center; justify-content: center; width: 24rem; height: 24rem; transform: translateY(-50%);}

.flexibleDig .ico-chevron-right:after {-webkit-mask-image: url(/mo/images/ico_right_m_GR.svg); mask-image: url(/mo/images/ico_right_m_GR.svg);}
.flexibleDig .ico-close:after {-webkit-mask-image: url(/mo/images/ico_close.svg); mask-image: url(/mo/images/ico_close.svg);}

/* 첨부파일 */
.flexibleDig.comp-dialog .hiddenFile {display: block; width: 0; height: 0;}
.flexibleDig.comp-dialog .dialog__content .upload-images {overflow-x: auto; display: flex;}
.flexibleDig.comp-dialog .dialog__content .upload-images .upload {flex-shrink: 0; width: 72rem; height: 72rem; background: #fff; border-radius: 2rem; border: 2px solid #ededed; float: left;}
.flexibleDig.comp-dialog .dialog__content .upload-images .upload button {width: 100%; height: 100%; position: relative;}
.flexibleDig.comp-dialog .dialog__content .upload-images .upload button span {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.flexibleDig.comp-dialog .dialog__content .upload-images .upload button .xBar {width: 14rem; height: 2rem; border-radius: 2rem; background: #d9d9d9;}
.flexibleDig.comp-dialog .dialog__content .upload-images .upload button .yBar {width: 2rem; height: 14rem; border-radius: 2rem; background: #d9d9d9;}
.flexibleDig.comp-dialog .dialog__content .upload-images .images-wrap {flex-shrink: 0;}
.flexibleDig.comp-dialog .dialog__content .upload-images .images-wrap .frame {width: 72rem; height: 72rem; margin-left: 8rem; position: relative; border-radius: 2rem; overflow: hidden; float: left;}
.flexibleDig.comp-dialog .dialog__content .upload-images .images-wrap .frame .img{width: 100%; height: 100%;}
.flexibleDig.comp-dialog .dialog__content .upload-images .images-wrap .frame .img img {width: 100%; height: 100%; object-fit: cover;}
.flexibleDig.comp-dialog .dialog__content .upload-images .images-wrap button {position: absolute; right: 2rem; top: 4rem;}

/* 레이어 alert */
.flexibleDig .dialog-alert {display: none; position: fixed; top: 0; left: 0; z-index: 101; width: 100%; height: 100%;}
.flexibleDig .dialog-alert.-active {display: block;}
.flexibleDig .dialog-alert .layerDimmed {position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background: rgba(0,0,0,.1);border-radius: 5rem;}
.flexibleDig .dialog-alert .comp-dialog{width:312rem;}
.flexibleDig .dialog-alert .comp-dialog .dialog__header{display: none;}
.flexibleDig .dialog-alert .comp-dialog .dialog__content{display: block; padding: 24rem 24rem 20rem; background-color: #fff; border-radius:5rem; text-align: left;}
.flexibleDig .dialog-alert .comp-dialog .dialog-txt{font-size:15rem; font-weight:500; color:#101010;}
.flexibleDig .dialog-alert .comp-dialog .comp-button{margin-top:28rem; text-align: right;}
/*.flexibleDig .dialog-alert .comp-dialog .close-text{margin-right:-8rem; padding:3rem 8rem 4rem;}*/

/* bottom sheet */
.-none_scroll {overflow: hidden !important; overscroll-behavior: revert !important;}
.bottom-sheet {overflow: hidden; overflow-y: auto; position: fixed; bottom: -200%; left: 0; z-index: 202; width: 100%; max-height: calc(100vh - 56rem); padding: 16rem 0 8rem; background-color: #ffffff; transition: all .3s;}
.bottom-sheet.-open {bottom: -1rem;}
.bottom-sheet .sheet__handlebar{padding-bottom: 32rem;}
.bottom-sheet .sheet__handlebar .handlebar {display: block; width: 40rem; height: 4rem; margin: 0 auto; border-radius: 5rem; background-color: #C2C2C2;}
.bottom-sheet .sheet__inner {overflow: auto;}
.bottom-sheet .sheet__foot {position: relative; padding:0 24rem; text-align: right;}
.bottom-sheet .sheet__foot .switch-box {position: absolute; top: 50%; transform: translateY(-50%); left: 24rem;}
.bottom-sheet .sheet__foot .switch-box.active .nudge {background-color:#0740e4;}
.bottom-sheet .sheet__foot .switch-box.active .nudge:after {left:11rem;}
.bottom-sheet .sheet__fold {display: inline-block; min-width: 75rem; height: 54rem; line-height: 54rem; margin-right:-24rem; text-align: center; font-weight: 600;}

.bottom-sheet.-half{display: flex; flex-direction: column; max-height:390rem;}
.bottom-sheet.-long .sheet__inner,
.bottom-sheet.-half .sheet__inner{height: 100%; padding-bottom: 70rem;}
.bottom-sheet.-long .sheet__foot,
.bottom-sheet.-half .sheet__foot{position: absolute; bottom: 8rem; left: 0; width: 100%; height: 70rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 11.82%, rgba(255, 255, 255, 0.8) 19.81%, #FFFFFF 29.02%);}
.bottom-sheet.-long .sheet__fold,
.bottom-sheet.-half .sheet__fold{position: absolute; bottom: 0; right:0; margin:0;}
.bottom-sheet.-half .sheet__foot .switch-box{margin-top:8rem;}
.bottom-sheet.-long{display: flex; flex-direction: column; max-height: calc(100% - 56rem);}

.-none_scroll .js-scrime {display: block;}

.js-scrime {display: none; position: fixed; top: 0; left: 0; z-index: 110; width: 100%; height: 100%; background: rgba(0, 0, 0, .1); }
.bottom-sheet .btns ul {display: flex; flex-direction: column; gap: 8rem;}
.bottom-sheet .btns ul li {padding: 0 16rem; border-bottom: 0;}
.bottom-sheet .btns ul li {padding: 16rem 24rem; border-bottom: 1px solid #ededed; font-size: 15rem; font-weight: 500; color: #101010;}
.bottom-sheet .btns ul li:last-child {border-bottom: 0;}
.bottom-sheet .js-select-ul {display: block;}
.bottom-sheet .js-select-ul li{border-bottom: 1rem solid #EDEDED; font-weight:500;}
.bottom-sheet .js-select-ul li:last-child{border-bottom:0;}
.bottom-sheet .js-select-ul li.-empty{pointer-events: none;}
.bottom-sheet .sheet__footer .switch-box {position: absolute; left: 24rem; top: 50%; transform: translateY(-50%);}

/* **************************************** *
* toast
* **************************************** */
.toast-wrapper {display: flex; align-items: center; justify-content: center; position: absolute; z-index: 999; top: 0; left: 0; right: 0; bottom: 0;}
.toast-notification {position: relative; padding: 8rem 24rem 8rem 24rem; max-width: 328rem; border-radius: 5rem; background: rgba(0,0,0,.6); backface-visibility: hidden; animation: flipInX 1s both; backface-visibility: visible;}
.complete .toast-notification{backface-visibility: hidden; animation: flipOutX 1s both; backface-visibility: visible;}
.toast-notification p {font-size: 15rem; font-weight: 500; color: #fff; text-align: center;}
.toast-notification p img {display: inline-block; position: absolute; top: 11rem; left: 24rem; width: 16rem; height: 16rem;}

/* **************************************** *
 * new input ?
 * **************************************** */
.select-form._lock:not(._unlock) {pointer-events: none; opacity: .2;}
.select-form._lock:not(._unlock) .select-form__select{background-image:none;}
.flexibleDig .select-form__label {position: relative; display: inline-block; margin-bottom: 6rem; font-size: 13rem; line-height: 19rem; font-weight: 400; color: #a7a7a7; text-align: left;}
.flexibleDig .select-form__label .-required{position: absolute; right: -5rem; top: 4rem; margin: 0; width: 3rem; height: 3rem; border-radius: 50%; background: #FF673E;}
.flexibleDig .select-form__multi {display: flex; gap: 18rem; flex-direction: column;}
.flexibleDig .select-form {position: relative;}
.flexibleDig .select-form * {color: #101010;}
.flexibleDig .select-form input {width: 100%; padding: 6rem 32rem 6rem 0; border-bottom: 2rem solid #ededed; border-radius: 0; font-size: 17rem; line-height: 22rem; font-weight: 600; color: #101010; text-overflow: ellipsis;}
.flexibleDig .select-form .select-form__select { background-color: transparent; background-image: url(/pc/images/icon-angle-down-L-GY.svg); background-position: right 8rem center; background-repeat: no-repeat; background-size: 16rem; cursor: pointer;}
.flexibleDig .tiny_tip {position: absolute; top: 50%; right:0; font-size:11rem; line-height:15.93rem; color:#c2c2c2; transform:translateY(-50%)}
.flexibleDig .form-wrap:focus-within .select-form__label {color: #101010;}
.flexibleDig .select-form__input:focus,
.flexibleDig .select-form__select:focus,
.flexibleDig .select-form__textarea:focus {border-color: #101010;}
.flexibleDig .select-form__textarea {resize: none; height: 182rem; padding: 2rem 0 4rem; width: 100%; border-bottom: 2rem solid #ededed; font-size: 17rem; font-weight: 500;}
.flexibleDig input::placeholder,
.flexibleDig textarea::placeholder{color: #939393; font-weight: 300;}
.helper_txt{position: absolute; left: 0; display: none; font-size:11rem; line-height:18rem;}
.helper_txt.-active {display: block;}
.flexibleDig .select-form__input + .helper_txt,
.flexibleDig .select-form__select + .helper_txt,
.flexibleDig .upload-images + .helper_txt{bottom: -22px;}
.flexibleDig .select-form__textarea + .helper_txt{bottom: 5px;}


/* **************************************** *
 * count
 * **************************************** */
.comp-count{position:relative;}
/* 0603 */
/*.comp-count .count-shadow{position:relative; z-index:-1; opacity:0; color:transparent;}*/
/*.comp-count .count{position:absolute; top:0; left:0; z-index:1;}*/
/* 0603 end */


/* **************************************** *
 * switch
 * **************************************** */
.comp-switch{font-weight:500; font-size:15rem;}
.comp-switch.switch-box .nudge,
.comp-switch .nudge{display:inline-block; position:relative; width:32rem; height:19rem; margin:0 8rem; border-radius:20rem; background-color:#555555;}
.comp-switch.switch-box .nudge:after,
.comp-switch .nudge:after{content:""; display:block; position:absolute; top:1rem; left:1rem; width:17rem; height:17rem; border-radius:17rem; background-color:#fff;}
.comp-switch.switch-box.active .nudge,
.comp-switch .nudge.on{background-color:#0740e4;}
.comp-switch.switch-box.active .nudge:after,
.comp-switch .nudge.on:after{left:14rem; left:calc(50% - 2rem);}
.comp-switch.switch-box { float: right; padding: 0; background: none; border: 0; cursor: pointer; }
.comp-switch.switch-box .nudge { margin: 0 !important; }
.comp-switch.switch-box .nudge:after { transition: all .3s; }

.switch-box {display: flex; align-items: center; gap: 4rem;}
.switch-box span {display: inline-block; font-size: 15rem; font-weight: 500; color: #101010; vertical-align: middle;}
.switch-item input {display: none;}
.switch-item input:checked + .switch-round {background: #0740E4;}
.switch-item input:checked + .switch-round .switch-circle {left: 11rem;}
.switch-item .switch-round {position: relative; width: 26rem; height: 16rem; -webkit-border-radius: 9rem; -moz-border-radius: 9rem; border-radius: 9rem; background: #555555;}
.switch-item .switch-round .switch-circle {position: absolute; top: 1rem; left: 1rem; width: 14rem; height: 14rem; border-radius: 50%; background: #fff; transition: all .3s;}


/* **************************************** *
 * img
 * **************************************** */
.comp-img img{max-width: 100%;}


/* **************************************** *
 * alert
 * **************************************** */
.comp-alert{position: relative; color: var(--textAlternative);}
.comp-alert .alert{position: relative; display: block; padding-left: 28rem;}
.comp-alert .alert .ico{display: block; position: absolute; top: -1rem; left:0rem; margin:0;}


/* **************************************** *
 * js select
 * **************************************** */
.js-hidden{opacity: 0; visibility: visible; overflow:hidden; position:absolute; margin:-1rem; width:1rem; height:1rem; clip:rect(0,0,0,0);}
.js-select-value{display: block;}
.js-select-value-text{cursor:pointer;}
.js-select{ width: 100%; height: 100%;}
.js-select-ul-div{position: relative;}
.js-select-ul{display:none; overflow:hidden; overflow-y: auto; position: absolute; z-index:10; top: 100%; left: 0; z-index:10; width: 100%; max-height:441rem; margin-top: 6rem; border-radius: 5rem; background: #fff; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.1);}
.js-select-ul.-max198 {max-height: 198rem;} /* 0804 */
.js-select-ul.active{display: block;}
.js-select-ul > li{padding: 16rem 24rem; color:#101010; cursor:pointer; transition:background .35s ease;}
.js-select-ul > li[rel='']{display: none;}
.js-select-ul > li:hover,
.js-select-ul > li.active{background-color: rgba(7, 64, 228, 0.03); font-weight: 600; color:#0740e4;}

/* flexible */
.flexibleDig .js-select-ul{display: block; overflow: initial; overflow-y: initial; position: initial; width: 100%; max-height: 390rem; margin-top: initial; border-radius: initial; background: #fff; box-shadow: initial;}
.flexibleDig .js-select-ul > li:hover,
.flexibleDig .js-select-ul > li.active{background-color: initial; font-weight: 700; color:#0740e4;}

/* **************************************** *
 * js toggle
 * **************************************** */
.js-toggle{position: relative;}
.js-toggle-title + .js-toggle-button{position: absolute; top:0; right: 0;}
.js-toggle-button.active .ico:after{transform:rotate(180deg)}


/* **************************************** *
 * js more read
 * **************************************** */
.js-read{overflow:hidden;}
.js-read-btn.expand .ico{transform:rotate(180deg)}


/* **************************************** *
 * js trans y0
 * **************************************** */
.js-trans-y{transform:translateY(0) !important;}


/* **************************************** *
 * transition`
 * **************************************** */
/* button */
.button:hover{transition:border .35s ease, background .35s ease, color .35s ease;}
.button .ico{transition:border .35s ease;}

/* tooltip */
.comp-tooltip:hover .tooltip-expand{transition:opacity .35s ease .5s, visibility .35s ease .5s;}
.comp-tooltip:hover .tooltip-expand:hover{transition:opacity .35s ease 0s, visibility .35s ease 0s;}

/* dialog */
.comp-dialog .close{transition: transform .35s ease;}

/* js-toggle */
/*.js-toggle-button .ico:after{transition:transform .35s ease;}*/

/* js-tooltip-default */
.js-tooltip-default{transition:opacity .35s ease, visibility .35s ease;}


/* **************************************** *
 * icon
 * **************************************** */
.ico {display: inline-block; position: relative; width: 38rem; height: 38rem; font-size: 0;}
.ico svg{display: block; position: relative; top: -0.1rem; width: 100%; height: 100%;}
.ico:after {content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color:transparent; background-repeat: no-repeat; background-position:  50% 50%; background-size: contain; mask-size: 100% auto; -webkit-mask-size: 100% auto; mask-size:100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;}
.ico.ico-xsm {width: 8rem; height: 8rem;}
.ico.ico-ssm {width: 14rem; height: 14rem;}
.ico.ico-sm {width: 16rem; height: 16rem;}
.ico.ico-ms {top:-1rem; width: 24rem; height: 24rem; vertical-align: middle;}
.ico.ico-mms {width: 32rem; height: 32rem;}
.ico.ico-mm {width: 36rem; height: 36rem;}
.ico.ico-md {width: 56rem; height: 56rem;}
.ico.ico-lg {width: 64rem; height: 64rem;}
.ico.ico-xlg {width: 72rem; height: 72rem;}
.ico.ico-xxlg {width: 104rem; height: 104rem;} /* 230203, OP21-1040 */
/*.ico:last-child{margin-left: 2rem;}*/

.ico.hex-primary:after{background-color:#0740E4;}
.ico.hex-ff:after{background-color:#ffffff;}
.ico.hex-10:after{background-color:#101010;}
.ico.hex-a7:after{background-color:#A7A7A7;}
.ico.hex-55:after{background-color:#555555;}
.ico.hex-c2:after{background-color:#C2C2C2;}
.ico.hex-93:after{background-color:#939393;}
.ico.hex-d9:after{background-color:#d9d9d9;}
.ico.hex-ed:after{background-color:#ededed;} /* 230203, OP21-1040 */
.eco-sell-view .ico:not(.ico-origin).hex-primary:after{background-color:#83b100;}

.ico-angle-down-L:after      {-webkit-mask-image: url(/pc/images/icon-angle-down-L.svg); mask-image: url(/pc/images/icon-angle-down-L.svg);}
.ico-angle-down-M:after      {-webkit-mask-image: url(/pc/images/icon-angle-down-M.svg); mask-image: url(/pc/images/icon-angle-down-M.svg);}
.ico-angle-left-S:after      {-webkit-mask-image: url(/pc/images/icon-angle-left-S.svg); mask-image: url(/pc/images/icon-angle-left-S.svg);}
.ico-angle-right:after       {-webkit-mask-image: url(/pc/images/icon-angle-right.svg); mask-image: url(/pc/images/icon-angle-right.svg);}
.ico-angle-right-S:after     {-webkit-mask-image: url(/pc/images/icon-angle-right-S.svg); mask-image: url(/pc/images/icon-angle-right-S.svg);}
.ico-angle-right-M:after     {-webkit-mask-image: url(/pc/images/icon-angle-right-M.svg); mask-image: url(/pc/images/icon-angle-right-M.svg);}
.ico-angle-right-L:after     {-webkit-mask-image: url(/pc/images/icon-angle-right-L.svg); mask-image: url(/pc/images/icon-angle-right-L.svg);}
.ico-angle-up-L:after        {-webkit-mask-image: url(/pc/images/icon-angle-up-L.svg); mask-image: url(/pc/images/icon-angle-up-L.svg);}
.ico-arrow-right:after       {-webkit-mask-image: url(/pc/images/icon-arrow-right.svg); mask-image: url(/pc/images/icon-arrow-right.svg);}
.ico-battery-bolt:after      {-webkit-mask-image: url(/pc/images/icon-battery-bolt.svg); mask-image: url(/pc/images/icon-battery-bolt.svg);}
.ico-bolt:after              {-webkit-mask-image: url(/pc/images/icon-bolt.svg); mask-image: url(/pc/images/icon-bolt.svg);}
.ico-check:after             {-webkit-mask-image: url(/pc/images/icon-check.svg); mask-image: url(/pc/images/icon-check.svg);}
.ico-chevron-right:after     {-webkit-mask-image: url(/pc/images/icon-chevron-right.svg); mask-image: url(/pc/images/icon-chevron-right.svg);}
.ico-chevron-right-S:after   {-webkit-mask-image: url(/pc/images/icon-chevron-right-S.svg); mask-image: url(/pc/images/icon-chevron-right-S.svg);}
.ico-clear-chevron-right:after{-webkit-mask-image: url(/pc/images/icon-clear-chevron-right.svg); mask-image: url(/pc/images/icon-clear-chevron-right.svg);}
.ico-chevron-left:after      {-webkit-mask-image: url(/pc/images/icon-chevron-left.svg); mask-image: url(/pc/images/icon-chevron-left.svg);}
.ico-chevron-left-S:after    {-webkit-mask-image: url(/pc/images/icon-chevron-left-S.svg); mask-image: url(/pc/images/icon-chevron-left-S.svg);}
.ico-clear-chevron-left:after{-webkit-mask-image: url(/pc/images/icon-clear-chevron-left.svg); mask-image: url(/pc/images/icon-clear-chevron-left.svg);}
.ico-circle-exclamation:after{-webkit-mask-image: url(/pc/images/icon-circle-exclamation.svg); mask-image: url(/pc/images/icon-circle-exclamation.svg);}
.ico-circle-profile:after    {-webkit-mask-image: url(/pc/images/icon-circle-profile.svg); mask-image: url(/pc/images/icon-circle-profile.svg);}
.ico-circle-question:after   {-webkit-mask-image: url(/pc/images/icon-circle-question.svg); mask-image: url(/pc/images/icon-circle-question.svg);}
.ico-circle-question-S:after {-webkit-mask-image: url(/pc/images/icon-circle-question-S.svg); mask-image: url(/pc/images/icon-circle-question-S.svg);}
.ico-circle-blog:after       {-webkit-mask-image: url(/pc/images/icon-circle-blog.svg); mask-image: url(/pc/images/icon-circle-blog.svg);}
.ico-circle-facebook:after   {-webkit-mask-image: url(/pc/images/icon-circle-facebook.svg); mask-image: url(/pc/images/icon-circle-facebook.svg);}
.ico-circle-insta:after      {-webkit-mask-image: url(/pc/images/icon-circle-insta.svg); mask-image: url(/pc/images/icon-circle-insta.svg);}
.ico-circle-youtube:after    {-webkit-mask-image: url(/pc/images/icon-circle-youtube.svg); mask-image: url(/pc/images/icon-circle-youtube.svg);}
.ico-close:after             {-webkit-mask-image: url(/pc/images/icon-close.svg); mask-image: url(/pc/images/icon-close.svg);}
.ico-comment:after           {-webkit-mask-image: url(/pc/images/icon-comment.svg); mask-image: url(/pc/images/icon-comment.svg);}
.ico-file-magnifying:after   {-webkit-mask-image: url(/pc/images/icon-file-magnifying.svg); mask-image: url(/pc/images/icon-file-magnifying.svg);}
.ico-location:after          {-webkit-mask-image: url(/pc/images/icon-location.svg); mask-image: url(/pc/images/icon-location.svg);}
.ico-network:after           {-webkit-mask-image: url(/pc/images/icon-network.svg); mask-image: url(/pc/images/icon-network.svg);}
.ico-phone:after             {-webkit-mask-image: url(/pc/images/icon-phone.svg); mask-image: url(/pc/images/icon-phone.svg);}
.ico-print:after             {-webkit-mask-image: url(/pc/images/icon-print.svg); mask-image: url(/pc/images/icon-print.svg);}
.ico-siren:after             {-webkit-mask-image: url(/pc/images/icon-siren.svg); mask-image: url(/pc/images/icon-siren.svg);}
.ico-toggle:after            {-webkit-mask-image: url(/pc/images/icon-toggle.svg); mask-image: url(/pc/images/icon-toggle.svg);}
.ico-traffic-cone:after      {-webkit-mask-image: url(/pc/images/icon-traffic-cone.svg); mask-image: url(/pc/images/icon-traffic-cone.svg);}
.ico-won-sign:after          {-webkit-mask-image: url(/pc/images/icon-won-sign.svg); mask-image: url(/pc/images/icon-won-sign.svg);}
.ico-circle-play:after       {-webkit-mask-image: url(/pc/images/icon-circle-play.svg); mask-image: url(/pc/images/icon-circle-play.svg);}
.ico-digt-plus:after         {-webkit-mask-image: url(/pc/images/icon-digt-plus.svg); mask-image: url(/pc/images/icon-digt-plus.svg);}
.ico-digt-equal:after        {-webkit-mask-image: url(/pc/images/icon-digt-equal.svg); mask-image: url(/pc/images/icon-digt-equal.svg);}

.ico-share-kakao:after      {background-image:url(/pc/images/icon-share-kakao.svg);}
.ico-share-facebook:after   {background-image:url(/pc/images/icon-share-facebook.svg);}
.ico-share-url:after        {background-image:url(/pc/images/icon-share-url.svg);}

.ico-heart:after            {background-image: url(/pc/images/icon-heart.svg);}
.ico-share:after            {background-image: url(/pc/images/icon-share.svg);}
.-active .ico-heart:after   {background-image: url(/pc/images/icon-heart-fill.svg);}
.-active .ico-share:after   {background-image: url(/pc/images/icon-share.svg);}

.ico-circle-delete:after    {background-image: url(/mo/images/icon_circle_delete.svg);}

.ico_question_large_gray:after    {-webkit-mask-image: url(/pc/images/icon_question_large_gray.svg); mask-image: url(/pc/images/icon_question_large_gray.svg);}