@charset "utf-8";

:root{
    --var-transition-time: .25s;
}

body.cn-scroll-block{overflow: hidden;}
body.cn-scroll-block-2{overflow: hidden; padding-right: 17px;}
body.cn-dropdown-opened{position: relative;}
.cn-scroll-box{position: relative;}

.cn-nav, .cn-tab{margin: 0; padding: 0;}
.cn-nav{width: 100%;display:flex;}
/* .cn-nav::after{content: ""; display: block; width: 100%; clear: both; float: none;} */
.cn-nav > *{user-select: none; cursor: pointer; box-sizing: border-box;}
.cn-tab > *{display: none;} 
.cn-tab > *.active{display: block;} 

.cn-stickybar{position: relative; z-index: 10;}
.cn-stickybar:not(.cn-stickybar-btm){position: sticky; top: 0;}

.cn-dropdown-wrap:not(.cn-dropdown){display: none;}
.cn-dropdown{position: absolute; list-style: none; background: #FFFFFF; width: 94px; border: 1px solid #E3E6EC; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04); border-radius: 4px; margin: 0; padding: 3px 0; display: block !important; opacity: 0 !important; transition: 0s; pointer-events: none; z-index: 100;top: -999px;}
.cn-dropdown > li{height: 34px; line-height: 34px;}
.cn-dropdown > li > a{display: block; text-align: left; width: 100%; height: 100%; color: #121212; font-size: 12px; padding: 0 10px; box-sizing: border-box;}
.cn-dropdown > li > a:hover{background: #FAFAFC; text-decoration: none;}
.cn-dropdown.active{opacity: 1 !important; pointer-events: all;}

.cn-bottom-wrap:not(.modal-bottom-wrap){display: none;}
.cn-modal-wrap:not(.cn-modal){display: none;}
.cn-modal{background: rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; display:inline-block;text-align:center;font-size:0; z-index: 100; overflow: auto;
	--modal-width:750px;
}
.cn-modal.active{opacity: 1 !important; pointer-events: all;}
.cn-modal-fade{transition: var(--var-transition-time);}
.cn-modal-scale{transition: var(--var-transition-time);}
.cn-modal-scale .cn-modal-main{transform: scale(.9); transition: var(--var-transition-time);}
.cn-modal-scale.active .cn-modal-main{transform: scale(1);}
.cn-modal-close{display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; line-height: 50px; position: absolute; top: 0; right: 0; font-size: 0;}
.cn-modal-close i{display: inline-block; width:24px; height: 24px; vertical-align: middle;}
.cn-modal-span{display: inline-block; vertical-align: middle; height: 100%}
.cn-modal-main{display: inline-block; width: var(--modal-width, 750px); vertical-align: middle; background: #fff; margin: 50px 0;}
.cn-modal-main .cn-modal-head{height: 50px; line-height: 50px; font-size: 18px; font-weight: 700; color: #121212; text-align: center; position: relative; user-select: none;display:inline-flex;max-width:100%;width:100%;}
.cn-modal-main .cn-modal-head strong{font-size: 16px;width:90%;margin:0 auto;}
.cn-modal-main .cn-modal-body{position: relative;text-align:left;font-size:13px;}

.cn-modal .modal_info{padding:20px 16px 30px;background: var(--gray-5, #FAFAFC);display:flex;flex-direction: column;gap:10px 0;}
.cn-modal .modal_info .info_box p{color: var(--gray-60, #7E8B9A);font-size: 12px;font-weight: 700;line-height: 140%;letter-spacing: -0.24px;margin-bottom:6px;}
.cn-modal .modal_info li{color: var(--gray-60, #7E8B9A);font-size: 12px;line-height: 150%;letter-spacing: -0.36px;display:flex;gap:0 4px;}
.cn-modal .modal_conts{margin:26px auto 30px;padding:0 16px;}
.cn-modal .type_column_cont{gap:24px 0;}

.cn-modal .type_input .label_txt{color: var(--gray-100, #121212);font-size: 14px;font-weight: 500;line-height: 150%;letter-spacing: -0.56px;margin-bottom:8px;}
.cn-modal .type_input label select{width:100%;height:50px;}
.cn-modal .type_input input[type="text"]{border: 1px solid var(--gray-30, #E0E3EB);width:100%;height:50px;padding:15px 20px;}
.cn-modal .type_input textarea{width:100%;border: 1px solid var(--gray-30, #E0E3EB);width:100%;height:150px;padding:15px 20px;}
.cn-modal .type_input textarea::placeholder{font-size:13px;}
.cn-modal .type_input .file-box{border:0 none; padding:0;}
.cn-modal .type_input .file-box .add_file{padding:10px 12px;}
.cn-modal .type_input .file-box .add_file span{font-size:12px;}
.cn-modal .type_input .file-box .add_file label{background-size:16px 16px;padding-left: 20px;}
.cn-modal .type_input .upload_list ul{display:flex;flex-direction:column;}
.cn-modal .type_input .upload_list ul li{flex:1;}
.cn-modal .type_input .upload_list ul li i{width:22px;}
.cn-modal .type_input .upload_list ul li .del{float:none;margin-left:8px;}
.cn-modal .type_input .upload_list ul li .vol{text-align:right;width:58px;}
.cn-modal .type_input .upload_list ul li .file_name{display:inline-flex;width:80%;}
.cn-modal .type_input .upload_list ul li .file_name a{width:100%;padding-left:0;}
.cn-modal .modal_btn{display:flex;flex-wrap: wrap;gap:8px;}
.cn-modal .modal_btn a{flex:1;}

.cn-movie-modal iframe{border: 0;}

/* 닫기버튼이 이미지 일때 */
.cn-modal .modal_close{display: flex;justify-content: flex-end;height: 50px;}
.cn-modal .modal_close .ico.ico_close{width: 50px;}
.cn-modal .modal_close .ico.ico_close::before{content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; display: inline-block; width: 24px; height: 100%; background-color: #000; -webkit-mask-size: 100%; mask-size: cover; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center;}

/* 닫기버튼이 텍스트 일때 */
.cn-modal .modal_close.type_txt{gap: 5px;margin-bottom: .3rem;width: 100%;height: 100%;}
.cn-modal .modal_close.type_txt li a{border: 1px solid #fff;color: #fff;font-size: var(--fz-13);display: block;padding: 2px 10px;}

.cn-modal-mobile{background: #000; z-index: 10000;}
.cn-modal-mobile:has(.cn-modal-head-mobile){padding-top: 5rem;}
.cn-modal-mobile video{height: 100%; margin: 0 auto;}
.cn-modal-mobile .cn-modal-main{margin: 0; width: 100%}
.cn-modal-mobile .cn-modal-body{position: static;}
.cn-modal-mobile .cn-modal-close{position: fixed; width: 5rem; height: 5rem; right: auto; left: 0; z-index: 1;}
.cn-modal-mobile .cn-modal-close i{width: 2.4rem; height: 2.4rem;}
.cn-modal-mobile .cn-modal-close i::before{background: #fff;}
.cn-modal-mobile .cn-modal-image{text-align: center;}
.cn-modal-mobile .cn-modal-image img{display: inline-block;}
.cn-modal-mobile .cn-modal-head-mobile{display: flex; align-items: center; justify-content: center; background: #fff; height: 5rem; position: relative; position: fixed; left: 0; top: 0; width: 100%; z-index: 1; border-bottom: 0.1rem solid var(--gray-20);}
.cn-modal-mobile .cn-modal-head-mobile strong{font-size: 1.6rem;}
.cn-modal-mobile .cn-modal-head-mobile .cn-modal-close{position: absolute;}
.cn-modal-mobile .cn-modal-head-mobile .cn-modal-close i::before{background: #000;}
    

/* S: 반응형 공통 */
/* 중복생성되는 닫기버튼 제거 */
.cn-modal-responsive > .cn-modal-close{display: none !important;} 
.cn-modal-responsive .modal_inner{padding: 50px 24px;background: #fff;}

/* head true, video */
.cn-modal-responsive iframe{height: 450px;}

/* head false, video */
.cn-modal-responsive .cn-modal-body > .cn-modal-close .ico.ico_close::after{background: #fff;}

@media screen and (max-width:800px){
    
    .cn-modal-responsive.cn-modal{background: rgba(0,0,0,.8);}
    .cn-modal-responsive .cn-modal-main{margin: 5rem 0; width: 90% !important; }
    .cn-modal-responsive .cn-modal-main iframe{width: 100%;height: 50vw}
    .cn-modal-responsive .modal_inner{padding: 5rem 2.4rem;}

    /* 닫기버튼이 이미지 일때 */
    .cn-modal-responsive .modal_close{height: 5rem;}
    .cn-modal-responsive .modal_close .ico.ico_close{width: 5rem;}    
    
    /* head가 있을 경우 */
    .cn-modal-responsive .cn-modal-main .cn-modal-head{height: auto;line-height: normal;padding:1rem 0;}
    .cn-modal-responsive .cn-modal-main .cn-modal-head .txt_hide{font-size: 1.6rem;width: 95%;white-space: normal;overflow: auto;}
    .cn-modal-responsive .cn-modal-head .cn-modal-close{top: -30px;width: 30px; line-height: 30px; height: 30px;}
    .cn-modal-responsive .cn-modal-head .cn-modal-close .ico.ico_close::after{background: #fff;}
}
@media screen and (max-width:576px){
    .cn-modal-responsive .cn-modal-main .cn-modal-head .txt_hide{font-size: 1.3rem;}
}
/* E: 반응형 공통 */