@charset "utf-8";

::-webkit-scrollbar { display: none; }

:root {
    --primary: #6839DC;
    --secondary : #EB158D;
    --gray: #787878;
    --bg: #F6F8FA;
    --line: #CCCCCC;

    --maxWidth: 56rem;
    --headerH: 6rem;
    --footerH: 7rem;
    --inpH: 5.5rem;
    --inPd: 1.5rem;
    --subPd: 5rem;

    --mainTit: 2.8rem;
    --tit: 2rem;
    --tit2: 1.8rem;
    --subTit: 1.6rem;

    --txt: 1.4rem; /* 본문 14px */
    --subTxt: 1.2rem;
    --smTxt: 1.1rem; /* 시안 10px */

    --secPd: 6rem;
} 





html{font-size: 10px;}
body{background:#f9f9f9;}

.root{display: flex; justify-content: center;}
.app{position:relative; display: flex; flex-direction: column; min-height: 100dvh; width: var(--maxWidth); max-width: 100%; margin: 0 auto; background-color: #fff; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
.in{padding: 0 var(--inPd);}
.container{min-height: 100dvh;}
.page {padding-top: calc(env(safe-area-inset-top) + var(--headerH)); padding-bottom: calc(env(safe-area-inset-bottom) + var(--footerH)); min-height: 100dvh;} 
.page .page_bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.page .page_bg > *{width: 100%; height: 100%; object-fit: cover;}

.pc_aside{display: none;}
.scroll_none { overflow: hidden; }

.preloader { width: var(--maxWidth); height: 100%; position: fixed; top: 0; opacity: 1;  margin: 0 auto; visibility: visible; pointer-events: none; background-color: #fff; z-index: 9999999; transition: opacity 0.8s ease-in-out;}
.preloader.hide{opacity: 0;}

.sr_only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.pc_only{display: none !important;}
.pc_only.flex{display: none !important;}
.mo_only{display: block !important;}
.mo_only.flex{display: flex !important;}


/* ---------- Btn ---------- */
.basic_btn{display: flex; align-items: center; justify-content: center; margin: 0 auto; min-width: 25rem; max-width: max-content; height: 5.5rem; padding: 1rem 2rem; font-size:1.5rem; font-weight: 600; background-color:#000; color: #fff; border-radius: 1rem;}
.basic_btn.color{background-color: var(--primary);}
.round_btn{display: flex; align-items: center; justify-content: center; max-width: fit-content; min-width: 10rem; height: 5.5rem;  padding: 1rem; font-size:var(--txt); font-weight: 500; background-color:#000; color: #fff; border-radius: 10rem;}
.round_btn.wh{background-color: #fff; color: var(--gray); border: 1px solid var(--line);}
.new_btn{display: flex; align-items: center; padding:0 1.6rem; height: 4.5rem; font-size:var(--txt); background-color: var(--bg); border-radius: 0.7rem; color: #101010;} 
.new_btn .ico{margin-left: 0.5rem; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 12 12" fill="none"><path d="M7.90003 1.0249C9.40878 1.88553 10.4 3.53865 10.4 5.3999C10.4 6.38881 10.1068 7.35551 9.55737 8.17775C9.00797 9 8.22707 9.64086 7.31344 10.0193C6.39981 10.3977 5.39448 10.4968 4.42457 10.3038C3.45467 10.1109 2.56376 9.6347 1.86449 8.93544C1.16523 8.23617 0.689026 7.34526 0.4961 6.37535C0.303174 5.40545 0.402191 4.40012 0.780629 3.48648C1.15907 2.57285 1.79993 1.79196 2.62218 1.24255C3.44442 0.693147 4.41112 0.399902 5.40003 0.399902" stroke="black" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.90002 3.5249V1.0249H10.4" stroke="black" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;}

.new_badge{position: absolute; top: 0; right: 0; width: 5px; height: 5px; border-radius: 100%; background-color: var(--secondary);}



/* ---------- Header ---------- */
.header {position: fixed; background-color: #fff; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); top: 0; width: var(--maxWidth); height: var(--headerH); max-width: 100%; margin: 0 auto; z-index: 300; transition: background 0.3s ease;}
.header.top{background-color: transparent; box-shadow: none;}
/* .header.down, .header.up{ box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);} */
.header.light{background-color: transparent; box-shadow: none;}
/* .header.light.down, .header.light.up{background-color: #fff;} */


.header .basic{display: flex; justify-content: space-between; align-items: center; padding: 0 var(--inPd); height: 100%;}
.header .basic .logo{width: 14.4rem;}
.header .basic .logo img{width: 100%;}
.header .basic .logo .symbol{width: 4.1rem;}

.header .basic .utils .item_box{display: flex; align-items: center;}
.header .basic .utils .item_box .item{position: relative;}
.header .basic .utils .item_box .item + .item{margin-left: 1rem;}
.header .basic .utils .item_box .item a{display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 1.5rem; width: 4.5rem; height: 4.5rem; border-radius: 100%;}
.header .basic .utils .item_box .item a svg{display: block; width: 2.5rem; height: auto;}

.header.down .basic .utils .item_box .item a,
.header.up .basic .utils .item_box .item a{background-color: var(--bg);}
.header.top .basic .utils .item_box .item a{background-color: #fff;}

.header .basic .utils .item_box .item.alert_item.line a{background-color: transparent; border-radius: 0; width: auto; border-radius: 0;}
.header .basic .utils .item_box .item.alert_item.line a svg{width: 3.4rem; height: auto;}
.header .basic .utils .item_box .item.alert_item.line a svg path{transition: stroke 0.3s ease;}
.header.down .basic .utils .item_box .item.alert_item.line a svg path,
.header.up .basic .utils .item_box .item.alert_item.line a svg path{stroke: #000;}

.header .basic .utils .item_box .item.alert_item .new_badge{top: 0.7rem; right: 0.8rem;}

/* .header .basic .utils .item_box .item.login_item a{background-color: #fff; border-radius: 1.5rem; width: 4.1rem; height: 4.1rem; border-radius: 1.5rem;}
.header .basic .utils .item_box .item.login_item a svg{width: 1.7rem; height: auto;}
.header.down .basic .utils .item_box .item.login_item a,
.header.up .basic .utils .item_box .item.login_item a{border: 1px solid var(--line);} */

.header .basic .utils .item_box .item .pop_msg{position: absolute; right: 0; font-size:1rem; width: 100%; min-width: max-content; padding-top:0.5rem; margin-top: 0.5rem; transition: opacity 0.3s ease;}
.header .basic .utils .item_box .item .pop_msg:before{content:''; position: absolute; display: block; top: 0; right: 1.7rem; width:0.9rem; height: 0.6rem; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="44" height="27" viewBox="0 0 8.66 5.198" fill="none"><path d="M2.629 0.9478C3.411 -0.3161 5.249 -0.3161 6.031 0.9478L8.66 5.1978L0 5.1978Z" fill="black"/></svg>') no-repeat center / contain;}
.header .basic .utils .item_box .item .pop_msg .txt{background-color: #000; color: #fff; padding: 0.6rem; border-radius: 0.5rem; line-height: 1.2;}
.header.down .basic .utils .item_box .item .pop_msg,
.header.up .basic .utils .item_box .item .pop_msg{opacity: 0; visibility: hidden;}


/* Header_Gnb */
.header .gnb {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: 0 var(--inPd); transition: background 0.1s ease-in-out}
/* .header.top .gnb{background-color: transparent;} */
/* .header.up .gnb, .header.down .gnb{background-color: #fff;} */

.header .gnb .center{position: absolute; left: 50%; transform: translateX(-50%); max-width: 75%;}
.header .gnb .left, .gnb .right{width: 2rem;}

.header .gnb .btn{height: 100%;}
.header .gnb .btn svg{display: block; width: auto; height: 1.7rem;}
.header .gnb .txt{font-size: var(--subTit); font-weight: 500; margin-top: 0.1em; white-space: nowrap; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;}


/* Header_light type */
.header.light .gnb .btn svg path{stroke: #fff}
.header.light .gnb .btn.more_btn svg {fill: #fff}
.header.light .gnb .txt{color: #fff;}
.header.light .gnb .txt{color: #fff;}
/* .header.light.down .gnb .btn svg path, .header.light.up .gnb .btn svg path{stroke: #1a1a1a;}
.header.light.down .gnb .btn.more_btn svg, .header.light.up .gnb .btn.more_btn svg{fill: #1a1a1a;} */
/* .header.light.down .gnb .txt, .header.light.up .gnb .txt{color: #1a1a1a;} */

.header.bg .gnb{background-color: transparent;}


/* header 알림 */
.alert_panel {position: fixed; display: flex; justify-content: flex-end; width: var(--maxWidth); max-width: 100%; top: var(--headerH); z-index: 350; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease;}
.alert_panel.open{opacity: 1; visibility:visible; pointer-events: inherit;}
.alert_panel .alert_cont{ width: 25rem; max-width: 100%; border-radius: 1.5rem; overflow: hidden; margin-right: var(--inPd); box-shadow: 0 5px 10px 0 rgba(31, 38, 135, 0.1);}
.alert_panel .alert_header{background-color: #000; color: #fff; display: flex; justify-content: space-between; padding: 1rem 2rem;}
.alert_panel .alert_header .tit{font-size: var(--txt); font-weight: 700;}
.alert_panel .alert_header .close_btn svg{height: 1.2rem;}
.alert_panel .alert_body{background-color: #fff; max-height: 21rem; overflow: auto;}


.alert_panel .alert_list{padding: 0.5rem 0;}
.alert_panel .alert_list .item a{position: relative; display: block; padding: 1rem 0; margin: 0 1rem 0 1.5rem; transition: background 0.3s ease;}
/* .alert_panel .alert_list .item a:hover{background-color: var(--bg);} */
.alert_panel .alert_list .item.new a:before{content:''; position: absolute; top: 1rem; right: 5px; width: 5px; height: 5px; border-radius: 100%; background-color: var(--secondary);}
.alert_panel .alert_list .item + .item a{ border-top: 1px solid var(--line);}

.alert_panel .alert_list .item a .top_box{display: flex; align-items: center;}
.alert_panel .alert_list .item .profile{display: none; width: 1.8rem; height: 1.8rem; border-radius: 10rem; margin-right: 0.5rem; background: linear-gradient(180deg, #C1C1F3 0%, #AF6BC3 100%); overflow: hidden; }
.alert_panel .alert_list .item .profile img{width: 100%; display: none;}
.alert_panel .alert_list .item .name{font-size: var(--subTxt); font-weight: 600; display: none;}

.alert_panel .alert_list .item .time_stamp{position: relative; color: #B4B4B4; font-size: var(--subTxt); padding-left: 0.5rem; margin-left: 0.5rem; line-height: 1;}
.alert_panel .alert_list .item .time_stamp{margin-left: 0; padding-left: 0;}
/* .alert_panel .alert_list .item .time_stamp:before{content:''; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 3px; height: 3px; background-color: #D9D9D9; border-radius: 50%;} */

.alert_panel .alert_list .item .txt{font-size: calc(var(--subTxt) + 1px); font-weight: 500; margin-top: 0.3rem; color: #1a1a1a; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;} 
.alert_panel .alert_list .item.new .txt{color: #1a1a1a;}




/* ---------- Footer ---------- */
.footer{position:fixed; bottom:0; width: var(--maxWidth); max-width: 100%; background-color: #fff; border-top: 1px solid rgba(0, 0, 0, 0.10); padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); z-index: 100;}


.sticky_nav{width:100%; height: var(--footerH);}
.sticky_nav .nav_list{display: flex; height: 100%; align-items: center;}
.sticky_nav .nav_list .nav_item{flex:1; text-align: center;} /* max-width: 25%;*/
.sticky_nav .nav_list .nav_item span{display: block; }
.sticky_nav .nav_list .nav_item a{display: flex; flex-direction: column; align-items: center;}
.sticky_nav .nav_list .nav_item a .ico{height: 3rem;}
.sticky_nav .nav_list .nav_item a .ico img{height: 100%;}
.sticky_nav .nav_list .nav_item a .label{font-size:var(--subTxt); color: rgba(2, 2, 2, 0.30); margin-top: 0.5rem; line-height: 1.3;}
.sticky_nav .nav_list .nav_item.active .label{color: var(--primary);}




/* ---------- modal ---------- */

/* 기본 알림 모달 */
.modal { position: fixed; display: flex; align-items: center; justify-content: center; z-index: 20000000; width: var(--maxWidth); height: 100%; max-width: 100%; margin: 0 auto; background: rgba(0, 0, 0, 0.70); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in-out;}
.modal.open {opacity: 1; pointer-events: inherit; }
.modal .modal_wrap{display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%;}
.modal .modal_cont{width: 30rem; max-width: 100%; background-color: #fff; padding: 5rem 1.7rem calc(env(safe-area-inset-bottom) + 3rem); border-radius: 1.5rem; margin: 1rem var(--inPd); overflow: hidden;}
.modal .modal_header {display: flex; justify-content: flex-end;}
.modal .modal_header .close_btn svg{display: block;}

.modal .modal_body{max-height: 60vh; overflow: auto;}

.modal .modal_cont .txt_box{text-align: center;}
.modal .modal_cont .txt_box .tit .name{color: var(--primary);}
.modal .modal_cont .txt_box .txt{ margin-top: 1rem; color: var(--gray);}
.modal .modal_cont .txt{font-size: var(--txt); font-weight: 500; text-align: center; line-height: 1.5;}

.modal .modal_cont .img_box{margin: 0 auto; width: 9rem; max-width: 100%; margin-top: 3rem;}
.modal .modal_cont .img_box img{width: 100%;}

.modal .modal_cont .btn_box{display: flex; gap: 0.5rem; margin-top: 4rem;}
.modal .modal_cont .btn_box .btn{display: flex;align-items: center; justify-content: center; font-size: var(--txt); font-weight: 500 ; flex: 1; min-width: 0; max-width: 100%; border-radius: 0.7rem; height: 4.5rem; background-color: var(--primary); color: #fff;} 
.modal .modal_cont .btn_box .btn.gy{background-color: #EBEBEB; color: #000;}
.modal .modal_cont .btn_box .btn.only{width: 18rem; max-width: 100%; min-width: 0; flex: unset; margin: 0 auto;}

.modal .modal_cont.beta .img_box{width: 11rem; margin-top: 2.5rem;}
.modal .modal_cont.beta .btn_box .btn{background-color: #EBEBEB; color: #000;}

.modal .modal_cont.server{padding: 5rem 1.7rem calc(env(safe-area-inset-bottom) + 5rem);}
.modal .modal_cont.server .btn_box{margin-top: 3rem;}

.modal .modal_cont.login_modal .img_box{width: 8rem;}




/* 다시 보지 않기*/
.modal_check{width: 30rem;} /* modal_cont width */
.modal_check > label {position: relative; display: flex; align-items: center; cursor: pointer; color: #fff; opacity: 0.8; font-size: var(--txt); transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out}
.modal_check > label:hover { opacity: 1;}
.modal_check > label > input {margin-right: 3px;}
.modal_check > label > .svg {position: relative; width: 1.2em; fill: #fff;  height: 1.2em; margin: 0 7px 1px 0; z-index: 1;transition: fill 0.3s ease-in-out}
.modal_check > label > .svg svg {position: absolute; top: 0; width: 100%;height: 100%;}
.modal_check > label > .svg .on {  opacity: 0;}
.modal_check > label > .svg.popup_chk .on { opacity: 1}
.modal_check > label > .svg.popup_chk .off {opacity: 0}


/* over_modal */
.over_modal { position: fixed; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 30000000; width: var(--maxWidth); height: 100%; max-width: 100%; margin: 0 auto; background: rgba(0, 0, 0, 0.50); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in-out;}
.over_modal.open {opacity: 1; pointer-events: inherit; }
.over_modal .modal_wrap{display: flex; justify-content: center; flex-direction: column;}
.over_modal .modal_cont{width: 30rem; max-width: 100%; background-color: #fff; padding: 3rem 1.7rem calc(env(safe-area-inset-bottom) + 2rem); border-radius: 1.5rem; margin: 1rem 0; overflow: hidden;}
.over_modal .modal_cont .btn_box{display: flex; gap: 0.5rem; margin-top: 2rem;}
.over_modal .modal_cont .btn_box .btn{display: flex;align-items: center; justify-content: center; font-size: var(--txt); font-weight: 500 ; flex: 1; min-width: 0; max-width: 100%; border-radius: 0.7rem; height: 4.5rem; background-color: var(--primary); color: #fff;} 
.over_modal .modal_cont .btn_box .btn.gy{background-color: #EBEBEB; color: #000;}

/* 알랏레이어 */
.alert_modal { position: fixed; display: flex; align-items: center; justify-content: center; z-index: 20000000; width: var(--maxWidth); height: 100%; max-width: 100%; margin: 0 auto; background: rgba(0, 0, 0, 0.70); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in-out;}
.alert_modal.open {opacity: 1; pointer-events: inherit; }
.alert_modal .modal_cont{ width: 30rem; max-width: 100%; background-color: #fff; padding: 2.8rem 1.5rem 1.5rem; border-radius: 1.5rem; margin: 1rem var(--inPd);}
.alert_modal .modal_cont .txt{font-size: var(--txt); font-weight: 500; text-align: center;}
.alert_modal .modal_cont .btn_box{display: flex; gap: 0.5rem; margin-top: 2.4rem;}
.alert_modal .modal_cont .btn_box .basic_btn{height: 4.8rem;}

.alert_modal.toast {background-color: transparent;}
.alert_modal.toast .modal_cont{width: auto; background-color: rgba(0, 0, 0, 0.80); border-radius: 1rem; padding: 1.5rem 4rem; max-width: 100%;}
.alert_modal.toast .txt_box{display: flex; flex-direction: column; align-items: center;} 
.alert_modal.toast .ico svg{display: block; width: 2.8rem; height: auto;}
.alert_modal.toast .txt{color: #fff; font-size: var(--txt); font-weight: 500; margin-top: 0.4rem;}



/* 슬라이드 모달 */
/* .slide_modal { position: fixed; z-index: 400; display: flex; flex-direction: column; justify-content: flex-end; bottom: 0; width: var(--maxWidth); max-width: 100%; height: 100%; margin: 0 auto; background: rgba(0, 0, 0, 0.70); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in-out;}
.slide_modal.open {opacity: 1; pointer-events: inherit; }
.slide_modal .modal_cont{display: flex; flex-direction: column; max-height: 70vh; transform: translateY(100%); transition: transform 0.5s ease-in-out;}
.slide_modal.open .modal_cont{transform: translateY(0);} */
.slide_modal { position: fixed; z-index: 20000000; display: block; width:var(--maxWidth); max-width: 100%; height: 100dvh; opacity: 0; background: rgba(0,0,0,0.7); pointer-events: none; transition: 0.3s ease-in-out 0.3s;}
.slide_modal.open {opacity: 1; pointer-events: inherit; transition: 0.3s ease-in-out;}
.slide_modal .modal_wrap { margin: 0 auto; width: 100%; height: 100%; position: relative; padding: 0; display: flex; align-items: flex-end; transform: translateY(100%); transition: 0.5s ease-in-out 0.3s;}
.slide_modal.open .modal_wrap { transform: translateY(0%); transition-delay: 0s;}

.slide_modal .modal_cont {position: relative; width: 100%; max-width: 100%; margin: 0 auto; height: auto; background-color: transparent; overflow: hidden; padding-bottom: env(safe-area-inset-bottom); }
.slide_modal .modal_cont .modal_header{display: flex; justify-content: space-between; align-items: center; color: #fff; background-color: #000; padding: 2rem 3rem 1.9rem; border-radius: 3rem 3rem 0 0;}
.slide_modal .modal_cont .modal_header .tit {font-size:var(--tit2); font-weight: 600;}
.slide_modal .modal_cont .modal_header .close_btn svg{display: block;}
.slide_modal .modal_cont .modal_header .close_btn svg path{stroke:#fff;}
.slide_modal .modal_cont .modal_body{background-color: #fff; padding-bottom: 5rem; min-height: 0; overflow-y: auto; max-height: 60vh;}
.slide_modal .modal_cont .modal_body::-webkit-scrollbar{display:inherit; width: 10px;}
.slide_modal .modal_cont .modal_body::-webkit-scrollbar-thumb{background: #BFBFBF; border-right: 5px solid #fff; border-radius: 3px; border-top-right-radius: 8px 3px; border-bottom-right-radius: 8px 3px;}
.slide_modal .modal_cont .modal_body::-webkit-scrollbar-track{background: #fff;}
.slide_modal .modal_cont .modal_body::-webkit-scrollbar-button:vertical:decrement{height: 10px;}
.slide_modal .modal_cont .modal_body::-webkit-scrollbar-button:vertical:increment{height: 10px;}


/* 알림 배너 */
.noti_banner_modal{position: fixed; z-index: 20000000; top: var(--headerH); width: var(--maxWidth); max-width: 100%; margin: 0 auto; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;}
.noti_banner_modal.open {transform: unset; opacity: 1; visibility: visible;}

.noti_banner_modal .modal_cont{display: flex; justify-content: space-between; align-items: center; background-color: #fff; padding: 2rem 1.5rem; border-radius: 1.5rem; margin: 1rem var(--inPd); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);}
.noti_banner_modal .modal_cont .msg_box{display: flex; align-items: center;}
.noti_banner_modal .modal_cont .msg_box .profile{position: relative; width: 4.8rem; height: 4.8rem; margin-right:1rem;}
.noti_banner_modal .modal_cont .msg_box .profile .img_box{display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 100%; border-radius: 1.5rem; background: linear-gradient(180deg, #C1C1F3 0%, #AF6BC3 100%); overflow: hidden;}
.noti_banner_modal .modal_cont .msg_box .profile .img_box img{width: 80%;}
.noti_banner_modal .modal_cont .msg_box .profile .new_badge{top: 0.2rem; right: 0.2rem;}
.noti_banner_modal .modal_cont .msg_box .msg_txt{font-size: var(--txt); }

.noti_banner_modal .modal_cont .btn_box{display: flex; align-items: center;}
.noti_banner_modal .modal_cont .btn_box .go_btn{display: block; background:rgba(237, 237, 237, 1); border-radius: 0.7rem; padding: 0.8rem; margin-right: 0.7rem; font-weight: 600;}
.noti_banner_modal .modal_cont .btn_box .close_btn{padding: 0.2rem; width: 2.2rem; height: 2.2rem;}
.noti_banner_modal .modal_cont .btn_box .close_btn svg{display: block; width:100%; height: 100%;}


/* 페이지 모달 (한자선택, 마이페이지_다시보기) */
.page_modal {position: fixed; top: 0; opacity: 0; visibility: hidden; pointer-events: none; max-width: 100%; z-index: 20000000; transition: 0.3s ease;}
.page_modal.open { opacity: 1; visibility: inherit; pointer-events: inherit;}
.page_modal .modal_cont { margin: 0 auto; width: var(--maxWidth); max-width: 100%; height: 100%; min-height: 100dvh; background-color: #fff; }
.page_modal .modal_cont .modal_header{position: sticky; background-color: #fff;}
.page_modal .modal_cont .modal_body{width: 100%; overflow-y: auto; max-height: calc(100dvh -  var(--headerH));}
.page_modal .modal_cont .modal_body::-webkit-scrollbar{display: none;}


/* 공유하기 모달 */
.modal_cont.share .modal_body{padding: 4rem 0 5rem;}
.modal_cont.share .btn_list{display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:2rem; max-width: max-content; margin: 0 auto;}
.modal_cont.share .btn_list button{display: flex; flex-direction: column; align-items: center; text-align: center;}
.modal_cont.share .btn_list button .ico{ display: flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; border-radius: 50%; background-color: #EFEFEF;}
.modal_cont.share .btn_list .naver_btn .ico{background-color: #67B863;}
.modal_cont.share .btn_list .naver_btn .ico svg{height: 2.6rem;}
.modal_cont.share .btn_list .facebook_btn .ico{background-color: #295BCF;}
.modal_cont.share .btn_list .facebook_btn .ico svg{height: 2.5rem;}
.modal_cont.share .btn_list .kakao_btn .ico{background-color: #F8E531;}
.modal_cont.share .btn_list .kakao_btn .ico svg{height: 2.4rem;}
.modal_cont.share .btn_list .x_btn .ico{background-color: #040404;}
.modal_cont.share .btn_list .x_btn .ico svg{height: 2.1rem;}
.modal_cont.share .btn_list .copy_btn .ico svg{height: 2.1rem;}
.modal_cont.share .btn_list button .txt{font-size:var(--subTxt); margin-top: 1rem; color: #1a1a1a;}


/* 출석체크 모달 */
.modal_cont.attend_status .modal_header{background-color: #000;}
.modal_cont.attend_status .modal_body{max-height: 80dvh; padding-bottom: 0;}
.modal_cont.attend_status .modal_body .cont{padding: 0 var(--inPd) 4.5rem; text-align: center;}
.modal_cont.attend_status .modal_body .cont .complete_info{display: none; margin-top: 5rem;}
.modal_cont.attend_status .modal_body .cont.complete .complete_info{display: block;}
.modal_cont.attend_status .modal_body .cont .complete_info .img_box{width: 16rem; margin: 0 auto;}
.modal_cont.attend_status .modal_body .cont .complete_info .txt_box{margin-top: 2rem;}
.modal_cont.attend_status .modal_body .cont .complete_info .txt_box .txt{color:var(--gray); margin-top: 0.5rem;}
.modal_cont.attend_status .modal_body .cont .stamp_list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; margin-top: 4rem;}
.modal_cont.attend_status .modal_body .cont .stamp_list .item .stamp {width: 8rem; height: 8rem; margin: 0 auto; border-radius: 50%; background:url('data:image/svg+xml,<svg width="80" height="79" viewBox="0 0 80 79" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="39.5" cy="39.5" r="39.5" fill="%23EBEBEB"/><circle cx="40" cy="40" r="33" fill="%23EBEBEB" stroke="white" stroke-width="2"/><path d="M44.7573 25.0079H35.521C28.1592 25.0079 22.1392 30.9855 22.1392 38.2866C22.1392 42.4678 24.1138 46.2078 27.1819 48.6481L27.242 48.6918C27.5384 48.9223 27.8428 49.1449 28.1592 49.3516L40.1392 58V51.5574H44.7573C52.1151 51.5574 58.1392 45.5838 58.1392 38.2787C58.1392 30.9776 52.1191 25 44.7573 25V25.0079Z" fill="white"/><path d="M40.1629 28.3214C40.0227 33.7028 35.5808 38.2734 30.1255 38.2695C35.6649 38.2695 40.1549 42.7328 40.1509 48.2295C40.291 42.848 44.733 38.2734 50.1922 38.2774C44.6529 38.2774 40.1629 33.8141 40.1669 28.3174L40.1629 28.3214Z" fill="%23EBEBEB"/></svg>') no-repeat center / cover}
.modal_cont.attend_status .modal_body .cont .stamp_list .item .stamp.on{background: url('data:image/svg+xml,<svg width="80" height="79" viewBox="0 0 80 79" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="39.5" cy="39.5" r="39.5" fill="%23E7DEFF"/><circle cx="40" cy="40" r="33" fill="%23E7DEFF" stroke="white" stroke-width="2"/><path d="M44.9005 25.0079H35.6057C28.1973 25.0079 22.1392 30.9855 22.1392 38.2866C22.1392 42.4678 24.1263 46.2078 27.2138 48.6481L27.2743 48.6918C27.5725 48.9223 27.8789 49.1449 28.1973 49.3516L40.2531 58V51.5574H44.9005C52.3049 51.5574 58.367 45.5838 58.367 38.2787C58.367 30.9776 52.3089 25 44.9005 25V25.0079Z" fill="url(%23paint0_linear_2060_1596)"/><path d="M40.2767 28.3218C40.1356 33.7033 35.6656 38.2739 30.1758 38.2699C35.7502 38.2699 40.2686 42.7333 40.2646 48.23C40.4057 42.8485 44.8757 38.2739 50.3695 38.2779C44.7951 38.2779 40.2767 33.8146 40.2807 28.3179L40.2767 28.3218Z" fill="white"/><defs><linearGradient id="paint0_linear_2060_1596" x1="29.0155" y1="49.3675" x2="51.3657" y2="26.7011" gradientUnits="userSpaceOnUse"><stop offset="0.01" stop-color="%234D25AF"/><stop offset="0.53" stop-color="%23B70E9A"/><stop offset="0.78" stop-color="%23D30894"/><stop offset="1" stop-color="%23F0028F"/></linearGradient></defs></svg>') no-repeat center / cover;}
.modal_cont.attend_status .modal_body .cont .stamp_list .item .txt{font-size: var(--subTit); font-weight: 500; margin-top: 0.5rem; color: var(--gray);}
/* .modal_cont.attend_status .modal_body .cont.complete .stamp_list {opacity: 0.4;} */
.modal_cont.attend_status .modal_body .cont .stamp_list .item .stamp{opacity: 0.4;}
.modal_cont.attend_status .modal_body .cont .stamp_list .item .stamp.on{opacity: 1;}


/* 출석체크 완료 모달 */
.modal_cont.attend_event_complete{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0; background-color: rgba(0,0,0,0.3); color: #fff; margin: 0; border-radius: 0;}
.modal_cont.attend_event_complete .img_box{width: 22rem; max-width: 100%;}
.modal_cont.attend_event_complete .txt_box .tit{font-size: 2.5rem;}
.modal_cont.attend_event_complete .btn_box{width: 17rem; margin: 3rem auto 0;}
.modal_cont.attend_event_complete .btn_box .btn{ background-color: #fff; color: #1a1a1a;}
.modal_cont.attend_event_complete .close_btn{display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border: 1px solid #fff; border-radius: 50%; margin: 3rem auto 0;}
.modal_cont.attend_event_complete .close_btn svg{display: block; width: 39%; height: 39%;}

.modal .modal_cont.attend_event_complete .modal_body{max-height: unset;}

/* 단어설명 모달 */
.modal_cont.word_mean{padding: 0; width: 32rem;}
.modal_cont.word_mean .modal_header{display: flex; justify-content: space-between; align-items: center; color: #fff; background-color: #000; padding: 1.5rem 2rem 1.5rem; }
.modal_cont.word_mean .modal_header .tit {font-size:var(--tit2); font-weight: 600;}
.modal_cont.word_mean .modal_body{padding: 2rem 2rem 3rem;}
.modal_cont.word_mean .modal_body .txt{text-align: left; color: #000; margin-top: 0; font-weight: 400;}
.modal_cont.word_mean .modal_body .txt + .txt{margin-top: 1rem;}
.modal_cont.word_mean .modal_body .mean_txt_list{margin-top: 2.5rem;}
.modal_cont.word_mean .modal_body .mean_txt_list .mean_txt {display: flex; align-items: flex-start;}
.modal_cont.word_mean .modal_body .mean_txt_list .mean_txt + .mean_txt{margin-top: 0.5rem;}
.modal_cont.word_mean .modal_body .mean_txt_list .mean_txt .label{font-weight: 600; flex-shrink: 0; margin-right: 0.4em;}
.modal_cont.word_mean .modal_body .mean_txt_box{text-align: left; margin-top: 1.5rem;}
.modal_cont.word_mean .modal_body .mean_txt_box .mean_txt .label{font-weight: 600; }
.modal_cont.word_mean .modal_body .mean_txt_box .mean_txt + .mean_txt{margin-top: 1rem;}

.modal_cont.word_mean .modal_body .mean_txt_box .tit{font-size:1.05em;}
.modal_cont.word_mean .modal_body .mean_hyphen_list{margin-top: 0.3rem;}
.modal_cont.word_mean .modal_body .mean_hyphen_list .item{position: relative; padding-left: 0.8em;}
.modal_cont.word_mean .modal_body .mean_hyphen_list .item:before{content: '-'; position: absolute; left: 0;}



/* ---------- tab ---------- */
.com_tab_wrap{ width: calc(100% + var(--inPd) * 2); margin-left: calc(var(--inPd) * -1); border-bottom: 0.05rem solid rgba(0, 0, 0, 0.25);}
.com_tab_wrap .scroll_tab{overflow-x: auto;}
.com_tab_wrap .scroll_tab::-webkit-scrollbar{display: none;}
.com_tab_wrap .com_tab_box{display: flex; height: 4rem;}
.com_tab_wrap .com_tab_box .tab{flex-shrink: 0; min-width: 8rem; padding: 0 2rem; font-size:var(--txt); color: #B9B9B9; font-weight: 500; border-bottom: 1px solid #fff; }
.com_tab_wrap .com_tab_box .tab.active{border-bottom: 1px solid #000; color: #000;}

.tab_cont{display: none;}
.tab_cont.active{display: block;}


/* ---------- banner ---------- */
.com_banner a{display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2.5rem; width: 100%; height: 7.5rem; min-height: max-content; background-color: #EBE3FF; border-radius: 1rem;}
.com_banner.gy a{background-color: var(--bg);}
.com_banner a .cont{display: flex; align-items: center;}
.com_banner a .cont .ico{height: 3.5rem; margin-right: 1rem;}
.com_banner a .cont .ico img{ height: 100%; object-fit: contain;}
.com_banner a .cont .txt_box .desc{color: rgba(104, 57, 220, 0.60); font-size:var(--subTxt);}
.com_banner a .cont .txt_box .txt{font-size:var(--txt); font-size:1.5rem; font-weight: 600;}
.com_banner .ing_txt{text-align: center; margin-top: 1rem; font-size:var(--subTxt); font-weight: 500; color: var(--gray);}


/* ---------- 게시판 ---------- */
.com_tag_board .item a{display: flex; align-items: flex-start; padding: 2rem 0; border-bottom: 1px solid var(--line);}
.com_tag_board .item .tag{font-size:var(--subTxt); flex-shrink: 0; color: #9C72C6; width: 5.5rem; padding: 0.3em 0.2em; margin-right: 1rem; background-color: var(--bg); border-radius: 0.3rem; font-weight: 700; text-align: center;}
.com_tag_board .item .txt{font-size:1.7rem; font-weight: 600; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;}

.com_thum_board .item a{display: flex; }
.com_thum_board .item + .item a{margin-top: 1.5rem;}
.com_thum_board .item .img{position: relative; width: 38%; flex-shrink: 0; padding-top: 28%; border-radius: 0.8rem; overflow: hidden; margin-right: 1rem;}
.com_thum_board .item .img img{position: absolute; width: 100%; height: 100%; top: 0; left: 0; transform: scale(1); object-fit: cover; background-color: #f9f9f9;}
.com_thum_board .item .txt_wrap{display: flex; flex-direction: column; justify-content: space-between; padding: 0;}
.com_thum_board .item .txt_wrap .txt_box .tit{font-size: var(--subTit); font-weight: 600; line-height: 1.5; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}
.com_thum_board .item .txt_wrap .txt_box .txt{font-size: var(--subTxt); color: var(--gray); margin-top: 0.2rem; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis;}
.com_thum_board .item .txt_wrap .view_wrap{display: flex; margin-top: auto;}
.com_thum_board .item .txt_wrap .view_wrap > div{display: flex; align-items: center;}
.com_thum_board .item .txt_wrap .view_wrap > div + div{margin-left: 1rem;}
.com_thum_board .item .txt_wrap .view_wrap .credit_box{display: none;}
.com_thum_board .item .txt_wrap .view_wrap .txt{font-size: var(--subTxt); }
.com_thum_board .item .txt_wrap .view_wrap .ico{margin-right: 0.25em;}
.com_thum_board .item .txt_wrap .view_wrap .ico svg{display: block; width: auto; height: 1em;} 
.com_thum_board .item .txt_wrap .view_wrap .view_box .txt{color: var(--primary);}



#ch-plugin{z-index: 500 !important;}
#plugin div[data-testid="img-custom-btn"]{background-color: red;}
.ImageCustomButtonView__CustomImageBg-ch-front__sc-1s91m5o-1{box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0, 0.15) 0px 8px 30px !important;}




/* ---------- 애니메이션 ---------- */
/* .float { animation: floatY 3s ease-in-out infinite; will-change: transform; }  */

@keyframes floatY { 
    0% { transform: translateY(0); } 
    50% { transform: translateY(15px); } 
    100% { transform: translateY(0); } 
}

@keyframes floatTopY { 
    0% { transform: translateY(0); } 
    50% { transform: translateY(-15px); } 
    100% { transform: translateY(0); } 
}







/* ---------- 반응형 ---------- */

/* 560~ */
@media screen and (min-width: 560px) {
    .sticky_nav .nav_list .nav_item{max-width: unset;}
}

/* 721~ */
@media screen and (min-width: 721px) {
    html{font-size: 11px;}

    /* tab */
    .com_tab_wrap .com_tab_box .tab{font-size:var(--txt); min-width: 10rem;}

    /* 게시판 */
    .com_thum_board .item + .item a{margin-top: 2.2rem;}
    .com_thum_board .item .txt_wrap{padding: 0.5rem 0 0;}
    .com_thum_board .item .txt_wrap .txt_box .tit{font-size: 1.7rem;}
    .com_thum_board .item .txt_wrap .txt_box .txt{font-size: var(--txt);}
    .com_thum_board .item .txt_wrap .view_wrap .txt{font-size: var(--subTxt);}
    .com_thum_board .item .img{margin-right: 1.5rem; width: 25%; padding-top: 19%;}

    
    .alert_panel .alert_list .item .profile{width: 2.2rem; height: 2.2rem;}
    /* .alert_panel .alert_list .item .name{font-size: var(--txt);} */
    /* .alert_panel .alert_list .item .time_stamp,
    .alert_panel .alert_list .item .txt{font-size: var(--subTxt);} */
    .alert_panel .alert_list .item .profile img{margin-top: 0.2rem;}

    .new_badge{width: 6px; height: 6px;}

    .sticky_nav .nav_list .nav_item a .ico{height: 3.3rem;}


}


/* 1241~ */
@media screen and (min-width: 1241px) {
    html{font-size: 11.5px;}

    :root {

        --inPd: 2rem;

        --subTxt: 1.25rem;
        --smTxt: 1.1rem;

        --footerH: 8rem;
    }


    .app::-webkit-scrollbar{display: none;}
    .pc_aside + .app{margin: unset;}

    .pc_only{display: block !important;}
    .pc_only.flex{display: flex !important;}
    .mo_only{display: none !important;}
    .mo_only.flex{display: none !important;}

    .sticky_nav .nav_list .nav_item .label{font-size: var(--subTxt);}

    /* Aside */
    .pc_aside{position: sticky; top: 0; display: block; margin-right: 2rem; height: 100vh; min-height: max-content;}
    .pc_aside_inner{display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 4rem var(--inPd) 6rem;}

    .pc_aside .top_area .logo{width: 19rem;}
    .pc_aside .top_area .logo img{width: 100%;}

    .pc_aside .top_area .txt_box{margin-top: 10vh;}
    .pc_aside .top_area .txt_box .desc{font-size:var(--txt); background-color: #4D25AF; color: #fff; padding: 0.5em 2rem; border-radius: 10rem; max-width: max-content; font-weight: 700;}
    .pc_aside .top_area .txt_box .tit{font-size: 3.5rem; line-height: 1.4; margin-top: 2rem; color: #474747;}
    .pc_aside .top_area .txt_box .txt{font-size: var(--subTit); margin-top: 1rem; color: #474747;}

    .pc_aside .btm_area {margin-top: 5rem; }
    .pc_aside .btm_area .txt_box{margin-top: 2rem; color: #747580;}
    .pc_aside .btm_area .txt_box .tit{font-size:1.6rem; font-weight: 600;}
    .pc_aside .btm_area .txt_box .txt{font-size:var(--txt); font-weight: 400; margin-top: 0.8rem; display: none;}

    .pc_aside .notice_btn{margin-top: 2rem;}
    .pc_aside .notice_btn a{border:1px solid #bebebe; max-width: max-content; color: #474747; display: flex; align-items: center; border-radius: 10rem; padding: 0.5em 1.2em 0.5em 1em; transition: background 0.3s ease, color 0.3s ease}
    .pc_aside .notice_btn a:hover{background-color: #000; color: #fff;}
    .pc_aside .notice_btn a .arr{margin-left: 1rem;}
    .pc_aside .notice_btn a .arr svg{display: block; height: 0.8em;}
    .pc_aside .notice_btn a .arr svg path{transition: stroke 0.3s ease;}
    .pc_aside .notice_btn a:hover .arr svg path{stroke:#fff;}

    /* header */
    .header .gnb .txt{font-size: 1.6rem;}

    /* modal */
    .modal .modal_cont .btn_box .btn{transition: background-color 0.3s ease, color 0.3s ease;}
    .modal .modal_cont .btn_box .btn:hover{background-color: #000; color: #fff;}

    .alert_panel .alert_body::-webkit-scrollbar{display: inherit; width: 10px;}
    .alert_panel .alert_body::-webkit-scrollbar-thumb{background: #BFBFBF; border-right: 5px solid #fff; border-radius: 3px; border-top-right-radius: 8px 3px; border-bottom-right-radius: 8px 3px;}
    .alert_panel .alert_body::-webkit-scrollbar-track{background: #fff;}
    .alert_panel .alert_body::-webkit-scrollbar-button:vertical:decrement{height: 10px;}
    .alert_panel .alert_body::-webkit-scrollbar-button:vertical:increment{height: 10px;}

    .modal_cont.word_mean .modal_body::-webkit-scrollbar{display: inherit; width: 10px;}
    .modal_cont.word_mean .modal_body::-webkit-scrollbar-thumb{background: #BFBFBF; border-right: 5px solid #fff; border-radius: 3px; border-top-right-radius: 8px 3px; border-bottom-right-radius: 8px 3px;}
    .modal_cont.word_mean .modal_body::-webkit-scrollbar-track{background: #fff;}
    .modal_cont.word_mean .modal_body::-webkit-scrollbar-button:vertical:decrement{height: 10px;}
    .modal_cont.word_mean .modal_body::-webkit-scrollbar-button:vertical:increment{height: 10px;}


    /* btn*/
    .basic_btn,
    .round_btn{transition: background-color 0.3s ease, color 0.3s ease;;}
    .basic_btn:hover{background-color:var(--primary); color: #fff;}
    .round_btn:hover{background-color: var(--primary); color: #fff;}
    .round_btn.wh:hover{background-color: #000; color: #fff;}

    /* 게시판 */
    .com_tag_board .item a .txt{transition: color 0.3s ease;}
    .com_tag_board .item a:hover .txt{color: var(--primary);}
    
    .com_thum_board .item .img img{transition: transform 0.2s linear;}
    .com_thum_board .item:hover .img img{transform: scale(1.1);}

    .modal_cont.attend_event_complete .btn_box .btn:hover{background-color: var(--primary);}
    .modal_cont.attend_event_complete .close_btn{transition: background 0.3s ease;}
    .modal_cont.attend_event_complete .close_btn:hover{background-color: #fff;}
    .modal_cont.attend_event_complete .close_btn svg path{transition: stroke 0.3s ease}
    .modal_cont.attend_event_complete .close_btn:hover svg path{stroke:#000}

    
}


/* 1641~ */
@media screen and (min-width: 1641px) {

    html{font-size: 12px;}


    .pc_aside{margin-right: 15rem;}


}


/* 2000~ */
@media screen and (min-width: 2000px) {

    html{font-size: 13px;}


    .pc_aside{margin-right: 22rem;}
    .pc_aside_inner{padding: 10rem var(--inPd);}



}


/* 3000~ */
@media screen and (min-width: 3000px) {

    html{font-size: 14px;}


    .pc_aside_inner{padding: 12rem var(--inPd);}



}