@charset "utf-8";

/* global*/
html{font-size:62.5%; -webkit-font-smoothing: antialiased; height:100%;}
@media screen and (max-width:1024px){
	html{font-size:60%; overflow-x:hidden}
}
/* @media screen and (max-width:768px){html{font-size:56%}} */
body{height:100%; font-family: 'Pretendard', sans-serif; color:#263446; font-size:1.6rem; line-height: 1.2; background:#F5F7FB;}
main{display:block;}
html.lock{overflow:hidden;}

i.sub { font-size:80%; color:#999; }

#app{width:100%;}
#yt_wrapper{background:#F5F7FB; min-width:0; min-height:100vh; width:100%; padding-top:15.2rem; padding-left:30rem;}

/* header fold ui*/
#yt_wrapper .header_fold_btn{display:none; position: absolute; right:2rem; bottom:-14px; background:#263446; color:#fff; font-size:12px; width:70px; height:14px; line-height:14px; border-radius:0 0 5px 5px; text-align: center; }
#yt_wrapper.fold .header_fold_btn{display:block;}
#yt_wrapper.fold.on #yt_header{top:-15.2rem;}
#yt_wrapper.fold.on{padding-top:0;}

/* header - top zone */
#yt_header{padding-left:30rem; position: fixed; top:0; left:0; z-index:998; width:100%; background:#fff; box-shadow: 0 10px 30px rgba(0,0,0,0.04); transition:top 0.2s}
#yt_header .header_top{border-bottom:1px solid #eee; height:7.6rem; display:flex; justify-content: space-between;}
#yt_header .menu_btn{display:inline-block; padding:2.9rem 3rem; border-right:1px solid #eee;}
#yt_header .menu_btn:after, #yt_header .menu_btn:before{content:""; display:block; width:100%; height:2px; background:#000;}
#yt_header .menu_btn .bar{display:block; width:24px; height:2px; background:#000; margin:6px 0;}

/* header - bottom zone */
#yt_header .header_bottom{height:7.6rem;}
#yt_header .header_user{display: flex; border-left:1px solid #eee;}
#yt_header .header_user .user_info{border-right:1px solid #eee; display:flex; align-items: center; padding:0 2.4rem; font-size:1.5rem; font-weight:600}
#yt_header .header_user .user_info .user_pic{margin-right:1.6rem; width:3rem; height:3rem; border-radius: 50% 50%; overflow: hidden;}
#yt_header .header_menu{display:flex; align-items: center; padding:0 2rem;}
#yt_header .header_menu > * + * {margin-left:4px}
#yt_header .header_title{font-size:1.8rem; font-weight:800; display:flex; align-items: center; padding:0 2rem 0 2rem;}
#yt_header .header_title:before{content:""; display:block; width:4px; height:2rem; background:#49C496; border-radius: 9999px; margin-right:12px; margin-top:1px; }
#yt_header .header_title .right_btn{flex:none; margin-left:auto;}
#yt_header .mo-home-btn{display:none; width:40px; height:40px; align-items:center; justify-content:center; font-size:20px; margin-left:auto; margin-right:10px; background:#eee; border-radius:9999px;}

/* aside - logo zone */
#yt_aside{width:30rem; height:100%; background:#263446;position: fixed; left:0; top:0; z-index: 999; display: flex; flex-direction: column;  transition:left 0.2s, width 0.2s}
#yt_aside .yt_logo{width:100%; height:7.6rem; flex:0 0 auto; background:url('../img/yt_logo.png') no-repeat left top / 30rem auto; border-bottom:1px solid #374455;}

/* aside - user zone */
#yt_aside .header_user{padding:22px 20px; background:rgba(0,0,0,0.5); display:none;}
#yt_aside .header_user .user_info{text-align:center; margin-bottom:20px; color:#fff;}
#yt_aside .header_user .user_info .user_pic{margin-bottom:10px;}
#yt_aside .header_user .header_menu{ display:flex; gap:3px; justify-content:center;}

/* aside - bottom unit zone */
#yt_aside .utill{flex:none; margin-top:auto; padding:0 3rem;}
#yt_aside .utill .utill_item{margin-bottom:1.6rem; padding-bottom:1.6rem; border-bottom:1px solid #374455;}
#yt_aside .utill .utill_item:last-child{border:none;}
#yt_aside .utill .utill_item a{color:rgba(255,255,255,0.7); display:flex; align-items: center; white-space: nowrap;}
#yt_aside .utill .item_icon{font-size:2rem; margin-right:9px;}
#yt_aside .utill .item_name{font-size:1.5rem;}

/* content zone */
#yt_content{padding:2rem; min-width:1400px;}

@media screen and (max-width:1024px){
	#yt_wrapper{padding-left: 0; padding-top:calc(12rem + 6px);}
	#yt_wrapper.fold .header_fold_btn{display:none;}
	#yt_wrapper.fold.on #yt_header{top:0 !important;}
	#yt_wrapper.fold.on{padding-top:calc(12rem + 6px);}

	#yt_aside{left:-100%;}
	

	.mo_open #yt_aside{left:0; width:254px; overflow-y:auto;}
	.mo_open #yt_aside::-webkit-scrollbar {width: 4px;}
	.mo_open #yt_aside::-webkit-scrollbar-thumb {background-color: hsla(0, 0%, 42%, 0.49); border-radius: 100px;}
	#yt_header{padding-left:0 !important; box-shadow:none; border-bottom:1px solid #eee;}
	#yt_header .header_user{border-left:none;}
	#yt_header .header_user .user_info{display:none}
	#yt_header .header_top{height:6rem; justify-content:flex-start; align-items:center;}
	#yt_header .menu_btn{padding: 2.2rem 1.8rem; border:none;}
	#yt_header .menu_btn .bar{width:20px; margin:4px 0;}
	#yt_header .header_bottom{height:6rem}
	#yt_header .header_title{font-size:1.4rem;}
	#yt_header .header_title:before{height:10px; width:2px; margin-right:8px; margin-top:0;}
	
	#yt_header .header_menu{padding:0 10px; display:none;}
	#yt_header .mo-home-btn{display:flex; transform:scale(0.8); transform-origin:right center;}

	#yt_content{min-width:0; width:100%; padding:0;}

	#yt_aside .header_user{display:block;}
	#yt_aside .yt_logo{background-position:-16px top;}
	#yt_aside .utill{display:none;}
}

/* aside - gnb zone */
.gnb{font-weight:500; color:#fff; transition:width 0.2s}
.gnb .gnb_d1{position: relative;}
.gnb .gnb_d1_a{height:5.4rem; display:flex; align-items: center; position: relative; padding:0 3.2rem; white-space: nowrap; transition: padding 0.2s;}
.gnb .gnb_d1_a > * {opacity: 0.4; transition: opacity 0.2s;}
.gnb .gnb_d1_a .d1_icon{margin-right:1.6rem; font-size:2rem; transition:margin 0.2s}
.gnb .gnb_d1_a .d1_arrow{position: absolute; right:2rem; top:50%; transform: translateY(-50%); font-size:2rem; transition: transform 0.2s;}
.gnb .gnb_d2_wrapper{display:none; background:#212E3E; padding:2.6rem 1rem 3rem 6.8rem; font-size:1.5rem;}
.gnb .gnb_d1.active{background:#334051}
.gnb .gnb_d1.active .gnb_d1_a > *{opacity: 1;}
.gnb .gnb_d1.active .d1_arrow{transform: translateY(-50%) rotate(90deg);}
.gnb .gnb_d2_a{display:flex; align-items: center; padding:0.6em 0; white-space: nowrap; transition: color 0.2s;}
.gnb .gnb_d2_a.active{color:#1CD892; position: relative;}
.gnb .gnb_d2_a.active:before{content:""; display:block; width:4px; height:4px; border-radius: 50%; background:#1CD892; position: absolute; left:-0.8em; top:50%; transform: translateY(-50%);}
.gnb .gnb_d2_a[data-num]:after{content:attr(data-num); display:inline-block; color:#fff; font-size:1.2rem; font-weight:700; border-radius: 9999px 9999px; padding:0 0.9rem; background:#2BC189; line-height:24px; margin-left:9px; margin-top:-2px}
@media screen and (min-width:1025px){
	.gnb .gnb_d1 .gnb_d1_a:hover > *{opacity: 1;}
	.gnb .gnb_d2_a:hover{color:#1CD892}
}
@media screen and (max-width:1024px){
	.gnb .gnb_d1_a{padding:0 16px}
	.gnb .gnb_d2_wrapper{padding:0;}
	.gnb .gnb_d2_a{padding:18px 30px}
	.gnb .gnb_d2 + .gnb_d2{border-top:1px solid rgba(255,255,255,0.05)}
}




/* shrink mode css */
.shrink #yt_aside{width:7.6rem; overflow: hidden; transition: width 0.2s;}
.shrink #yt_aside .yt_logo{width:7.6rem; background:url('../img/yt_logo_m.png') no-repeat center / 7.6rem auto;}
.shrink .gnb .gnb_d1_a{padding:0}
.shrink .gnb .gnb_d1_a .d1_icon{margin:0 auto;}
.shrink .gnb .gnb_d1_a .gnb_d1_name, .shrink .gnb .gnb_d1_a .d1_arrow{display: none;}
.shrink .gnb .gnb_d2_wrapper{display:none !important;}
.shrink .utill{display:none;}
.shrink_mode #yt_wrapper{padding-left:7.6rem;}
.shrink_mode #yt_header{padding-left:7.6rem;}
.shrink.open #yt_aside{width:30rem; }



/* button*/
.yt_btn{color:#fff; font-size:1.4rem; font-weight:500; min-width:6rem; padding:0 1.2rem; border-radius: 2px; display:inline-flex; align-items: center; justify-content:center; height:3.2rem; transition: background 0.2s; white-space:nowrap;}
.yt_btn:hover, .yt_btn:focus{color:#fff;}

.yt_btn .icon{margin-right:6px; font-size:1.8rem; padding-top:1px;}
.yt_btn .drop{display:flex; align-items:center; justify-content:center; width:3.2rem; height:100%; border-left:1px solid rgba(255,255,255,0.2); margin-left:1.2rem; border-radius: 0 2px 2px 0;}
.yt_btn .drop i{font-size:2.4rem; margin:0;}
.yt_btn.lg{width:100%; padding:0; display:flex; align-items: center; justify-content: center; height:5.4rem; font-size:1.6rem; border-radius: 4px;}
.yt_btn.md{height:4.6rem; border-radius: 4px; min-width:8.6rem; font-size:1.5rem;}
.yt_btn.ss{min-width:3.2rem; height:3.2rem; padding:0;}
.yt_btn.ss .icon{margin:0;}
.yt_btn.sss{height:2.4rem; padding:0 12px; min-width:0; font-size:13px; border-radius: 4px;}
.yt_btn.sss .icon{display:none;}

.yt_btn.b_white{background:#fff; color:#000}

.yt_btn.b_blue,
.yt_btn.b_black,
.yt_btn.b_orange,	
.yt_btn.b_sky,
.yt_btn.b_gray,
.yt_btn.b_yellow,
.yt_btn.b_red,
.yt_btn.b_green{border:none; color:#fff;}
.yt_btn.b_white{border:1px solid #eee; color:#263446}

button.yt_btn.b_blue:hover, a.yt_btn.b_blue:hover{background:#004CFF}
button.yt_btn.b_black:hover, a.yt_btn.b_black:hover{background:#1A2737}
button.yt_btn.b_orange:hover, a.yt_btn.b_orange:hover{background:#FF5E0A}
button.yt_btn.b_sky:hover, a.yt_btn.b_sky:hover{background:#1ABAEC}
button.yt_btn.b_gray:hover, a.yt_btn.b_gray:hover{background:#4A5D74}
button.yt_btn.b_yellow:hover, a.yt_btn.b_yellow:hover{background:#EEB707}
button.yt_btn.b_red:hover, a.yt_btn.b_red:hover{background:#F17373}
button.yt_btn.b_green:hover, a.yt_btn.b_green:hover{background:#06b675}

/*업체별, 서비스별 색 추가*/
.yt_btn.b_plat{background:#0068FF}
.yt_btn.b_part{background:#FF850A}
.yt_btn.b_same{background:#3EDDF6}
.yt_btn.b_etc{background:#263446}
.yt_btn.b_htel{background:#F8C82C}
.yt_btn.b_tvag{background:#A683F8}
.yt_btn.b_public{background:#0068FF}
.yt_btn.b_private{background:#FF850A}

.drop_btn{position: relative; display:inline-block;}
.drop_btn .yt_btn{padding-right:0}
.drop_btn .drop_menu{position: absolute; top:3.4rem; right:0; z-index: 10; background:#fff; border:1px solid #eee; box-shadow: 0 10px 40px rgba(0,0,0,0.04); visibility: hidden; left:auto !important;}
.drop_btn .drop_menu_item{display:block; line-height: 4rem; text-align: center; font-size:1.4rem; color:#3A3A3A; padding:0 1.6rem; white-space: nowrap; font-weight: 500; letter-spacing: -0.04em;}
.drop_btn .drop_menu_item.left{text-align: left;}
.drop_btn .drop_menu_item + .drop_menu_item{border-top:1px solid #eee;}
.drop_btn .drop_menu_item:hover{background:#F5F6F8}
.drop_btn .drop_menu_item:first-child:before{content:""; border-left:1px solid #eee; border-top:1px solid #eee; width:6px; height:6px; position: absolute; left:auto; right:12px; top:-4px; transform: rotate(45deg); background:#fff;}
.drop_btn .drop_menu_item:first-child:hover:before{background:#F5F6F8}
.drop_btn.active .drop_menu{visibility: visible;}
.drop_btn.active .drop{background:rgba(0,0,0,0.3)}

.ui_table .drop_btn .drop_menu{left:auto !important;}
.ui_table .drop_btn .drop_menu_item:first-child:before{left:auto; right:24px;}



@media screen and (max-width:768px){	

	.yt_btn.lg{height:4.6rem}
	.drop_btn .drop_menu{left:auto !important; right:0;}
	.drop_btn .drop_menu_item:first-child:before{left:auto; right:10px}

}	

/**
* 로그인 영역
*/

.yt_login{margin:0 auto; padding:10vw 1.5rem;}
.yt_login.login{max-width:35rem;}
.yt_login.login input{font-size:16px;}
.yt_login.term{max-width:47rem; padding-top:5vw;}
.yt_login.join{max-width:63rem; padding-top:5vw;}
.yt_login .logo{text-align: center; margin-bottom:2.2rem; padding-bottom:2.2rem; border-bottom:1px solid #E0E3E9}
.yt_login .login_btn{display:flex; margin:10px 0 0 -6px; width:calc(100% + 6px)}
.yt_login .login_btn > *{margin:6px 0 0 6px}
.yt_login .login_footer{padding-top:2rem; margin-top:2rem; border-top:1px solid #E0E3E9; display:flex; justify-content: space-between;}
.yt_login .login_footer .footer_btn{display:flex; align-items: center; letter-spacing: -0.05em; transition: all 0.2s;}
.yt_login .login_footer .footer_btn:hover{color:#0068FF; text-shadow: 0 0 6px rgba(0,104,255,0.3);}
.yt_login .login_footer .footer_btn .icon{margin-right:6px; font-size:1.8rem;}
.yt_login .login_footer .join .icon{font-weight:700}
.yt_login .term_item{background:#fff; border-radius: 4px; padding:2rem; box-shadow: 0 0 20px rgba(0,0,0,0.04); margin-bottom:12px;}
.yt_login .term_item .item_title{font-size:1.6rem; font-weight:500; display:flex; align-items: center;}
.yt_login .term_item .icon{margin-right:8px;}
.yt_login .term_item .item_content{height:14rem; overflow-y:scroll; padding:1em; color:#707070; font-size:1.6rem; font-weight:300; border:1px solid #eee; margin:14px 0; border-radius: 4px;}
.yt_login .term_item .term_area{white-space: pre-wrap;  overflow-wrap: break-word;}
.yt_login .final_msg{text-align: center; padding:4em 0;}
.yt_login .final_msg .msg_title{font-weight:800; font-size:1.8rem; margin-bottom:0.8em;}
.yt_login .final_msg .msg_desc{font-weight:400; font-size:1.6rem;}
.yt_login .final_msg .name{color: #0068FF; font-weight:700;}

.info_msg{color:#fff; padding:1.6rem; border-radius: 4px; margin-bottom:2em;}
.info_msg.warning{background:#EF4040}
.info_msg.guide{background:#2BC189}
.info_msg .icon{float:left; font-size:1.8rem;}
.info_msg .msg_content{padding-left:2em; font-size:1.5rem; text-align: left;}

/**
* form ui
*/

/*input default*/
[class^="ui_"]{position: relative;}
[class^="ui_"] .field{background:#fff; height:4.6rem; border-radius: 4px; position: relative; border:1px solid #ddd;}
[class^="ui_"] .field_btn{display:flex;}
[class^="ui_"] .field_btn .field{flex:1; /* margin-right:4px; */}
[class^="ui_"] select,
[class^="ui_"] input[type="text"],
[class^="ui_"] input[type="password"],
[class^="ui_"] input[type="email"],
[class^="ui_"] input[type="date"],
[class^="ui_"] input[type="url"]
{width:100%; height:100%; padding:0 1.2em; letter-spacing: -0.03em; border-radius: 4px; font-size:15px;}
[class^="ui_"] input::placeholder{color:#8A919B; font-weight: 300;}
[class^="ui_"] .title{display:inline-block; margin-bottom:0.9em; font-size:1.6rem; font-weight: 600;}
[class^="ui_"] .ui_icon{position: absolute; right:1.3rem; top:50%; transform: translateY(-50%); font-size:2rem; pointer-events: none;}
[class^="ui_"] .desc{font-size:1.5rem; color:#8E8F8F; padding-top:0.7em; letter-spacing: -0.04em;line-height:1.4em;}
[class^="ui_"] input:disabled, [class^="ui_"] input:read-only{background:#eee}
[class^="ui_"] input.right{text-align: right;}
[class^="ui_"] .field_group{flex:1; display:flex; margin:-6px 0 0 -6px;}
[class^="ui_"] .field_group .field{margin:3px 0 0 3px;}
[class^="ui_"] .field_group .text{background:#fff; height:4.6rem; line-height:4.6rem; position: relative; margin:6px 0 0 6px;}
[class^="ui_"] .field [disabled="disabled"]{background:#eee}
[class^="ui_"] .field.cost:before, [class^="ui_"] .field.percentage:before{content:"￦"; display:flex; align-items: center; justify-content: center; width:4.8rem; height:1.8rem; position:absolute; right:0; top:50%; transform: translateY(-50%); border-left:1px solid #ddd; font-weight:700; font-size:1.4rem;}
[class^="ui_"] .field.cost:before{content:"￦"}
[class^="ui_"] .field.percentage:before{content:"%"}

/*input ui size*/
[class^="ui_"].lg .field{height:5.5rem; box-shadow:0 0 20px rgba(0,0,0,0.04); border:none;}
[class^="ui_"].md .field{box-shadow:0 0 20px rgba(0,0,0,0.04); border:none;}
[class^="ui_"].md .label{margin-bottom:0.9em; font-size:1.6rem; font-weight: 500;}

/*input ui layout*/
.ui_input, .ui_time, .ui_date, .ui_calendar{margin-bottom:2rem;}
.ui_textarea{margin-bottom:2rem;}

/*row input ui*/
[class^="ui_"].row{display:flex; flex-wrap: wrap;}
[class^="ui_"].row .title{width:14.4rem; padding-top:1.4rem;}
[class^="ui_"].row .field{width:calc(100% - 14.4rem);}
[class^="ui_"].row label.field{width:auto;}
[class^="ui_"].row .desc{width:calc(100% - 14.4rem); flex:none; margin-left:auto; }

[class^="ui_"].mo{display:none}

@media screen and (max-width:1024px){
	[class^="ui_"].row{display:block;}
	[class^="ui_"].row .title{width:100%;}
	[class^="ui_"].row .field{width:100%;}
	[class^="ui_"].row .desc{width:100%; margin:0}

	[class^="ui_"].pc{display:none}
	[class^="ui_"].mo{display:block}
}

/*input btn*/
[class^="ui_"] .btn{position: absolute; top:50%; right:0.6rem; transform: translateY(-50%); height:calc(100% - 1.2rem); border-radius: 4px; background:#263446; color:#fff; font-size:1.4rem; font-weight:500; display:flex; align-items: center; justify-content: center; min-width:7.2rem; padding:0 0.6em;}

/*input group*/
.ui_group{padding:1em 0; border-bottom:1px solid #eee; margin-bottom:1em}
.ui_group .group_title{border-bottom:1px solid #eee; padding-bottom:1em; margin-bottom:1.5em; font-size:1.6rem; font-weight:700;}

/*radio, check group ui*/
.ui_pick { display:flex; flex:1; flex-wrap: wrap; padding-top:1.2rem; margin:-1.5rem 0 0 -3rem; width:calc(100% + 3rem)}
.ui_pick > *{margin:1.5rem 0 0 3rem}

/*check unit*/
.ui_check{position: relative;}
.ui_check.row{margin-bottom:1em;}
.ui_check label{display:inline-flex; align-items: center; cursor: pointer;}
.ui_check label input[type="checkbox"]{display:none}
.ui_check .check_box{width:2.4rem; height:2.4rem; border:1px solid #ccc; border-radius: 2px; box-shadow: 0 0 10px rgba(0,0,0,0.04); background:#fff; display:flex; align-items: center; justify-content: center;}
.ui_check .check_box i{opacity: 0; font-size:2rem; color:#0068FF}
.ui_check input:checked ~ .check_box{border:2px solid #0068FF;}
.ui_check input:checked ~ .check_box i{opacity: 1;}
.ui_check .check_label{font-weight:500; font-size:1.6rem; transition: color 0.2s; padding-left:1.3rem; margin-top:-1px;}
.ui_check:hover .check_label{color:#0068FF}
.ui_check .field{background:none; box-shadow: none; border:none;}

/*radio unit*/
.ui_radio label{display:inline-flex; align-items: center; cursor: pointer;}
.ui_radio .radio_box{width:2.4rem; height:2.4rem; border-radius: 50% 50%; border:1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.04); background:#fff; margin-right:1.2rem; display:flex; align-items: center; justify-content: center; position: relative;}
.ui_radio .radio_label{font-weight:500; font-size:1.6rem; transition: color 0.2s;}
.ui_radio:hover .radio_label{color:#0068FF}
.ui_radio input:checked ~ .radio_box{border:2px solid #0068FF;}
.ui_radio input:checked ~ .radio_box:after{content:""; width:1.2rem; height:1.2rem; display:block; background:#0068FF; border-radius: 50% 50%;}



/*input required alert*/
[class^="ui_"] label.error{padding:0.4em 0.6em; background:#1A2737; color:#fff; border-radius: 6px; white-space: nowrap; position: absolute; left:-0.3rem; top:3rem; font-size:1.4rem;  z-index: 1}
[class^="ui_"] label.error:after{content:""; display:block; width:6px; height:6px; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:7px solid #1A2737; position: absolute; left:0.65rem; top:-0.5rem; z-index: 1}
.captcha-area{margin-bottom:1.2rem;}
[class^="ui_"].row .captcha-area ~ .field{flex:none; margin-left:auto;}

[class^="ui_"] input[type="text"] ~ label.error,
[class^="ui_"] input[type="password"] ~ label.error,
[class^="ui_"] input[type="date"] ~ label.error{left:1rem; top:4rem;}

/* favor checkbox */
[class^="ui_"] .favor_btn{position: absolute; right:0.8rem; top:50%; }
[class^="ui_"] .favor_btn .check_box{width:3.2rem; height:3.2rem; background:#CECECE; color:#fff; border-radius: 2px; transform: translateY(-50%); display:flex; align-items: center; justify-content: center; padding-top:2px; cursor: pointer;}
[class^="ui_"] .favor_btn input:checked ~ .check_box{background:#0068ff}

/* input file */
.ui_file .preview{margin-bottom:12px;}
.ui_file .preview_img{border:1px solid #eee; max-width: 45rem; overflow: hidden; margin-bottom:4px;}
.ui_file .preview_img img{max-width: 100%; height:auto;}
.ui_file .preview_img.full{max-width: 100%;}
.ui_file .preview_img.full img{width:100%;}
.ui_file input[type="file"]{position: absolute; width:0; height:0; padding:0; overflow:hidden; border:0;}
.ui_file input[type="text"]{background:#fff;}
.ui_file .file_btn{position: absolute; right:6px; top:50%; transform: translateY(-50%); cursor: pointer;}
@media screen and (max-width:1024px){
	.ui_file .preview_img{width:100%; max-width:100%; text-align:center;}
}

/* inline calendar ui*/
.ui_calendar{height:100%; display: flex; flex-direction: column;}
.ui_calendar .field{height: 100%;}

/* textarea ui */
.ui_textarea .field{height:auto; overflow: hidden;}
.ui_textarea textarea{resize:none; width:100%; height:200px; border:none; font-family: inherit; padding:1.2em; overflow-y: auto;}

/* input toggle */
.ui_toggle .toggle_btn{border:1px solid #ddd; display:inline-flex; cursor: pointer; padding:4px; position: relative; border-radius: 4px;}
.ui_toggle .toggle_btn:after{content:""; width:6.8rem; height:3.2rem; display:block; border-radius: 2px; background:#263446; box-shadow: 0 0 10px rgba(0,0,0,0.1); position:absolute; left:calc(6.8rem + 4px); top:4px; transition: all 0.2s; }
.ui_toggle .toggle_btn .on{width:6.8rem; height:3.2rem; line-height:3.2rem; text-align: center; font-size:1.4rem; color:#B4B4B4; position: relative; z-index: 1;}
.ui_toggle .toggle_btn .off{width:6.8rem; height:3.2rem; line-height:3.2rem; text-align: center; font-size:1.4rem; color:#fff; position: relative; z-index: 1;}
.ui_toggle input[type="checkbox"]:checked ~ .toggle_btn .on{color:#fff;}
.ui_toggle input[type="checkbox"]:checked ~ .toggle_btn:after{left:4px; background:#2BC189; }
.ui_toggle input[type="checkbox"]:checked ~ .toggle_btn .off{color:#B4B4B4}
.ui_toggle ~ .desc{border-bottom:1px solid #eee; padding-bottom:1.2em;}

/* custom select */
.custom_select .selected{pointer-events: none; position: absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items: center; padding:0 1em;}
.custom_select .selected .badge{margin-right:16px; padding:0 0.6em; height:24px; line-height:24px; border-radius: 4px; color:#fff; font-size:1.3rem; font-weight: 500;}
div.event_detail .status_0, .custom_select .selected .badge.status_0{background:#ff850a}
div.event_detail .status_1, .custom_select .selected .badge.status_1{background:#ff850a}
div.event_detail .status_2, .custom_select .selected .badge.status_2{background:#2bc189}
div.event_detail .status_6, .custom_select .selected .badge.status_6{background:#ef4040}
div.event_detail .status_7, .custom_select .selected .badge.status_7{background:#ddd; color:#666}
div.event_detail .status_8, .custom_select .selected .badge.status_8{background:#263446}
div.event_detail .status_9, .custom_select .selected .badge.status_9{background:#ddd; color:#666}
div.event_detail .status_99, .custom_select .selected .badge.status_99{background:#ddd; color:#666}
.custom_select .selected .name{font-size:1.5rem; font-weight: 500;;}
.custom_select select{opacity: 0;}

/* ui color pallet */
.ui_color .color_pallet{display:flex; flex-wrap: wrap; margin:-4px 0 0 -4px;  width:100%;}
.ui_color .color_btn{display:block; width:calc(16.667% - 4px); margin:4px 0 0 4px; cursor: pointer;}
.ui_color .color_btn:nth-child(6n){margin-right:0}
.ui_color .color_btn .color{display:block; width:100%; padding-bottom:55%; border-radius: 4px; position: relative;}
.ui_color .color_btn input[type="radio"]:checked ~ .color:after{content:""; display:block; width:3rem; height:3rem; background: url("data:image/svg+xml,%3Csvg id='check' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath id='check_2' d='M0,0H24V24H0Z' fill='none'/%3E%3Cpath id='check_1' d='M12,22A10,10,0,1,1,22,12,10,10,0,0,1,12,22Zm-1-6,7.07-7.071L16.659,7.515,11,13.172,8.174,10.343,6.76,11.757Z' fill='%23fff'/%3E%3C/svg%3E%0A") no-repeat center / 3rem 3rem; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);}

/* ui tag */
.ui_tag .tag_field{display:inline-block; word-break: break-all; background: #F2F4F8; border:1px solid #D7DCE5; padding:1em; font-size:1.6rem; border-radius:4px; font-weight: 500; font-family: inherit;}
.ui_tag .icon{position: absolute; right:10px; top:calc(50% - 2px); transform: translateY(-50%); font-size:2rem; font-weight:600; width:4rem; height:4rem; display:flex; align-items: center; justify-content: center;}

/* table - info 간략정보*/
.ui_info .info_row{display:flex; justify-content: space-between; align-items:center; padding:0.4rem 2rem; min-height:4.6rem; border:1px solid #D7DCE5; background:#F2F4F8; font-size:1.6rem; position: relative;}
.ui_info .info_row + .info_row{margin-top: -1px;}
.ui_info .info_row:first-child{border-radius: 4px 4px 0 0;}
.ui_info .info_row:last-child{border-radius: 0 0 4px 4px;}
.ui_info .row_title{display:flex; font-weight:700; flex-shrink: 0; padding-right:1em;}
.ui_info .row_title .icon{margin-right:6px;}
.ui_info .row_content{font-weight:500; text-align: right;}
.ui_info .info_row.weekend:after{content:""; width:calc(100% - 10px); height:calc(100% - 10px); background:#EF4040; border:1px solid #CE3737; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); border-radius: 4px;}
.ui_info .info_row.weekend .row_title, .ui_info .info_row.weekend .row_content{color:#fff; position: relative; z-index: 1;}

/* table - common*/
.yt_section .section_body.full{padding:0;}
.ui_table{table-layout: fixed; width:100%; font-size:1.4rem; }

.ui_table th{background:#F8FAFC; border-bottom:1px solid #eee; border-right:1px solid #eee; height:5.4rem; padding:0 2rem;}
.ui_table.narrow th{padding:0 1rem}
.ui_table th:last-child{border-right:0}
.ui_table td{background:#fff; border-bottom:1px solid #eee; border-top:1px solid #eee; border-right:1px solid #eee; min-height:5.4rem; text-align: center; font-weight:500; min-height: 7.2rem; padding:2rem;}
.ui_table td:last-child{border-right:0}
.ui_table.pd_sm td{padding:0.2rem;}
.ui_table td .th-label{display:none;}
.ui_table td.left{text-align: left;}
.ui_table td.right{text-align: right;}
.ui_table th.right{text-align: right;}
.ui_table tr.active td{background:#F8FAFC}
.ui_table .info_msg{margin-bottom:0;}
.ui_table .strong_name{font-weight:700}
#sort_table{position:static}
#sort_table .mobile-sortable-handle{display:none;}
#sort_table .drag_handle_td{padding:0; position:relative;}
#sort_table .drag_handle_td .drag_handle{position:absolute; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center;}
.ui-sortable-handle{cursor: pointer;}
.ui-sortable-handle .icon_drag{font-size:1.8rem; font-weight: 700;}
.drag_highlight td{background:#f8f9fa; border:#eee}
.table_caption{font-size:1.5rem; color:#888; padding:0.4em 1.6rem; margin:10px 0; position:sticky;  left:0;}
/* table - modal*/
.ui_table.small{border:1px solid #eee;}
.ui_table.small td{padding:10px;}
.ui_table.small [class^="ui_"]{margin:0;}
.section_body > .ui_table.small{border-top:none;}
/* table - btn group*/
.ui_table .btn_group{display:flex;}
.ui_table .btn_group > *{margin:0 4px}
.ui_table.rspn_table .m-row-title{display:none;}

.pc-result td{background:#f8f9fa; font-weight:700}
.mobile-result{display:none;}
.mo-hidden{}


@media screen and (max-width:1024px){
	.ui_table.rspn_table{display:block;padding-top:0}
	.scroll-table:before{display:block;}
	.ui_table.rspn_table colgroup,
	.ui_table.rspn_table thfead th,
	.ui_table.rspn_table thead tr{display:none}
	.ui_table th{font-size:1.3rem;}
	.ui_table.rspn_table tbody{display:block;background:#D7DCE5; padding-top:5px}
	.ui_table.rspn_table.pd_sm tbody{padding:0;}
	.ui_table.rspn_table tbody tr{display:flex; flex-wrap:wrap; margin-bottom:5px; background:#fff; padding:8px 0;} 
	.ui_table.rspn_table tbody tr:has(> .m-row.last){padding:8px 0 0;}
	.ui_table.rspn_table tbody tr.continue{margin-top:-5px; border-top:1px solid #000}
	.ui_table.rspn_table tbody tr.continue td{width:100%}
	.ui_table.rspn_table tbody td{display:block;}
	.ui_table.rspn_table tbody td.m-row.last{padding-bottom:12px; padding-top:12px; border-top:1px solid #eee; margin-top:12px;}
	.ui_table.rspn_table tbody td.m-row{min-height:4rem; padding:8px 1.6rem 8px; border:none; width:100%;}
	.ui_table.rspn_table tbody td.m-row.half{width:50%;}
	.ui_table.rspn_table tbody td.m-row.hide{display:none;}
	.ui_table.rspn_table tbody td.m-row.one-line{display:flex; align-items:center;}
	.ui_table.rspn_table tbody td.m-row.no-rspn{display:block;}
	.ui_table.rspn_table tbody td.m-row.no-rspn .m-row-title{margin-bottom:15px;}
	.ui_table.rspn_table .m-row-title{display:block; flex:0 0 140px; text-align:left; font-weight:700; position:relative; margin-bottom:8px; color:#888; letter-spacing:-0.04em; font-weight:500; font-size:13px;}
	.ui_table.rspn_table .m-row-title br{display:none;}
	.ui_table.rspn_table .m-row-title.empty{padding:0; margin:0; height:0; display:none;}
	/* .ui_table.rspn_table .m-row-title:before{content:""; display:block; width:2px; height:10px; background:#1A2737; position:absolute; left:0; top:3px;} */
	.ui_table.rspn_table .m-row-title.empty:before{display:none;}
	.ui_table.rspn_table .m-row-content{flex:1; text-align:left; font-size:1.6rem; font-weight:600}
	.ui_table.rspn_table tbody .empty-row .m-row-title{display:none;}
	.ui_table.rspn_table tbody .empty-row td{width:100%; text-align:center; display:flex; align-items:center; justify-content:center; margin:0; border:none;}
	.ui_table .btn_group{justify-content:flex-start; flex-wrap:wrap;}
	.ui_table .btn_group > *{margin:2px}
	.ui_table.rspn_table tbody tr.pc-result{display:none}
	.ui_table.rspn_table tbody tr.empty-row{margin:0;}

	.rspn_table:not(.no_heading) tbody tr{border-top:3px solid #000}

	/****** Added By cskms@naver.com */
	.rspn_table.first_m_row_hide .m-row:first-child > * { display:none; position:absolute; }
	.rspn_table.first_m_row_hide .m-row:first-child{width:100%; height:3px; position:absolute; left:0; padding:0; background: transparent; border-bottom:0; }
	.rspn_table.last_m_row_no_heading .m-row:last-child .m-row-title { display:none; }
	/********************************/
	
	.ui_table.rspn_table .m-row:first-child .m-row-title:before{}
	.mobile-result{display:block;}
	#sort_table .drag_handle_td{padding: 8px 1.6rem;}
	#sort_table .drag_handle_td .m-row-title{display:none;}
	#sort_table .drag_handle_td .drag_handle{display:none;}
	#sort_table .mobile-sortable-handle{display:flex;}
	#sort_table .mobile-sortable-handle i{color:#000;}
	#sort_table .mobile-sortable-handle button{font-size:24px; margin-right:4px; width:24px; height:24px; line-height:24px;}

	.yt_section .section_body.scroll-table{overflow-x:auto ;}
	.scroll-table.alone{overflow-x:auto;}
	.scroll-table:before{content:"↔ 양옆으로 드래그해주세요"; display:bloack; width:100%; background:#E5F5F0; padding:14px 10px; font-size:1.4rem; text-align: center; color:#71C5AE; font-weight:500; position:sticky; left:0;}
	.scroll-table .ui_table{min-width:1024px;}
	.scroll-table.small .ui_table{min-width:768px}

	.mo-hidden-label{display:none;}
	.mo-hidden{display:none !important;}

	.ui_table.task tbody{display:flex; flex-direction:column;}
	.ui_table.task .mobile-result{order:-1; margin-bottom:10px;}
	
	.ui_table.task .strong_name{font-size:1.7rem; font-weight:700}
	.ui_table.rspn_table.task tbody td.m-row.mo-title{border-bottom:1px solid #eee; padding-bottom:14px; margin-bottom:10px;}
	.ui_table.rspn_table.task tbody tr.mobile-result td.m-row.mo-title{border-bottom:1px solid #eee; margin-bottom:6px; padding-bottom:0;}
}

/* pagination */
.ui_pagination{display:flex; align-items: center; justify-content: center;}
.ui_pagination .page_number a{display:flex; align-items: center; justify-content: center; width:4rem; height:4rem; background:#fff; box-shadow: 0 0 10px rgba(0,0,0,0.04); margin:0 2px; border-radius: 4px; font-size:1.5rem; font-weight:500; transition:all 0.3s}
.ui_pagination .page_number.arrow a{font-size:2rem;}
.ui_pagination .page_number a:hover{background:#2BC189; color:#fff;}
.ui_pagination .page_number.active a{background:#1A2737; color:#fff;}
@media screen and (max-width:1024px){
	.ui_pagination{padding:20px 0; flex-wrap:wrap;}
	.ui_pagination .page_number a{margin:3px}
}

/* 데이트피커 커스텀 */
input.datepicker{width:180px;padding-right:calc(2rem + 30px) !important; background:#fff !important;}
#ui-datepicker-div {box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); border:none; padding:0px; border-radius:5px; width:auto;background:#fff !important;z-index:9999 !important;}
#ui-datepicker-div .ui-datepicker-title {font-size:14px;}
#ui-datepicker-div .ui-datepicker-header {background:#467be1 !important; border:none !important; border-radius:5px 5px 0 0 !important; padding:12px 12px 0 10px !important;color:#fff !important;}
#ui-datepicker-div .ui-datepicker-header select {width:43% !important;font-size:14px !important;background:url(../img/datepicker/datepicker_select.svg) no-repeat right 10px center #2559c4;border:none; vertical-align:middle; height:30px; margin:0 2px !important; color:#fff; border-radius:3px !important; padding:0 20px 0 10px !important;}
#ui-datepicker-div .ui-datepicker-header select option {color:#fff;}
#ui-datepicker-div .ui-datepicker-month {color:#fff; margin-left:5px; vertical-align:middle;}
#ui-datepicker-div .ui-datepicker-calendar thead {background:#467be1; color:#fff;}
#ui-datepicker-div .ui-datepicker-calendar thead th {padding:12px;font-size:1.3rem !important;}
#ui-datepicker-div .ui-datepicker-calendar thead th span {color:rgba(255, 255, 255, 0.8);}
#ui-datepicker-div .ui-datepicker-calendar td {text-align:center;}
#ui-datepicker-div .ui-datepicker-calendar td a {display:block;font-size:1.4rem;width:3rem;height:3rem;line-height:3rem;padding:0;margin:0 auto;border:none !important; background:none !important; text-align:center !important; color:#333 !important; border-radius:50%;font-weight:bold !important;}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day a {background:#2263e7 !important; color:#fff !important;}
#ui-datepicker-div .ui-datepicker-calendar thead th span {display:block;}
#ui-datepicker-div .ui-datepicker-calendar thead th:nth-child(1) {padding-left:12px;}
#ui-datepicker-div .ui-datepicker-calendar thead th:nth-child(7) {padding-right:12px;}
#ui-datepicker-div .ui-datepicker-calendar tbody tr:first-child td {padding-top:12px;}
#ui-datepicker-div .ui-datepicker-calendar tbody tr:last-child td {padding-bottom:5px;}
#ui-datepicker-div .ui-datepicker-calendar td:nth-child(7n+1) {padding-left:12px;}
#ui-datepicker-div .ui-datepicker-calendar td:nth-child(7n) {padding-right:12px;}
#ui-datepicker-div .ui-datepicker-prev {width:auto !important;height:auto !important;top:12px !important;left:7px !important;cursor:pointer;}
#ui-datepicker-div .ui-datepicker-next {width:auto !important;height:auto !important;top:12px !important;right:7px !important;cursor:pointer;}
#ui-datepicker-div .ui-datepicker-prev span {position:static !important;width:30px;height:30px;margin:0 !important;background:url(../img/datepicker/datepicker_mprev.svg) no-repeat center center !important;transition:all 0.3s;}
#ui-datepicker-div .ui-datepicker-next span {position:static !important;width:30px;height:30px;margin:0 !important;background:url(../img/datepicker/datepicker_mnext.svg) no-repeat center center !important;transition:all 0.3s;}
#ui-datepicker-div .ui-datepicker .ui-datepicker-buttonpane button{font-size:1.4rem;}
#ui-datepicker-div .ui-datepicker-calendar td a:hover,
#ui-datepicker-div .ui-datepicker-calendar td a:focus {background:#2263e7 !important; color:#fff !important;}
#ui-datepicker-div .ui-datepicker-prev:hover span,
#ui-datepicker-div .ui-datepicker-prev:focus span {background-image:url(../img/datepicker/datepicker_mprev.svg) !important;}
#ui-datepicker-div .ui-datepicker-next:hover span,
#ui-datepicker-div .ui-datepicker-next:focus span {background-image:url(../img/datepicker/datepicker_mnext.svg) !important;}
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-prev:focus,
#ui-datepicker-div .ui-datepicker-next:hover,
#ui-datepicker-div .ui-datepicker-next:focus {background:none !important; border:none !important;}

.ui-datepicker-inline.ui-datepicker{width:100%; height:100%; padding:2rem; font-family: inherit;}
.ui-datepicker-inline .ui-widget-header a{color:#263446;}
.ui-datepicker-inline.ui-widget.ui-widget-content{border:none;}
.ui-datepicker-inline.ui-datepicker .ui-datepicker-title{color:#263446;}
.ui-datepicker-inline.ui-datepicker td span, .ui-datepicker-inline.ui-datepicker td a{height:42px; display:flex; align-items: center; justify-content: center; font-size:1.8rem; font-weight: 800;}
.ui-datepicker-inline .ui-widget-header{background:none; border:none; font-size:1.8rem;}
.ui-datepicker-inline.ui-datepicker .ui-datepicker-prev, .ui-datepicker-inline.ui-datepicker .ui-datepicker-next{border:1px solid #ddd; width:32px; height:32px; display:flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(0,0,0,0.02);}
.ui-datepicker-inline .ui-state-hover, 
.ui-datepicker-inline .ui-widget-content .ui-state-hover, 
.ui-datepicker-inline .ui-widget-header .ui-state-hover, 
.ui-datepicker-inline .ui-state-focus, 
.ui-datepicker-inline .ui-widget-content .ui-state-focus, 
.ui-datepicker-inline .ui-widget-header .ui-state-focus, 
.ui-datepicker-inline .ui-button:hover, .ui-button:focus{background:none; color:initial}
.ui-datepicker-inline.ui-datepicker .ui-datepicker-next-hover{right:2px; top:2px}
.ui-datepicker-inline.ui-datepicker .ui-datepicker-prev-hover{left:2px; top:2px}
.ui-datepicker-inline.ui-datepicker  .ui-datepicker-prev, .ui-datepicker-inline.ui-datepicker  .ui-datepicker-next{cursor: pointer;}
.ui-datepicker-inline.ui-datepicker  .ui-datepicker-prev span,
.ui-datepicker-inline.ui-datepicker  .ui-datepicker-next span {display:block; width:24px; height:24px; background-position: center; position: relative; left:auto; margin:0; top:auto;}
.ui-datepicker-inline.ui-datepicker  .ui-datepicker-prev span {	
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6.482' height='10.607' viewBox='0 0 6.482 10.607'%3E%3Cpath id='ar_left' d='M10.579,10.939,14.7,6.814,13.525,5.636l-5.3,5.3,5.3,5.3L14.7,15.064Z' transform='translate(-8.222 -5.636)'/%3E%3C/svg%3E%0A") !important;
}
.ui-datepicker-inline.ui-datepicker  .ui-datepicker-next span {
	margin-left:2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6.482' height='10.607' viewBox='0 0 6.482 10.607'%3E%3Cpath id='ar_right' d='M12.347,10.939,8.222,6.814,9.4,5.636l5.3,5.3-5.3,5.3L8.222,15.064Z' transform='translate(-8.222 -5.636)'/%3E%3C/svg%3E%0A") !important;
}
.ui-datepicker-inline.ui-datepicker th{font-size:1.8rem; color:#263446; border-bottom:1px solid #eee;}
.ui-datepicker-inline.ui-state-default, 
.ui-datepicker-inline.ui-widget-content .ui-state-default, 
.ui-datepicker-inline.ui-widget-header .ui-state-default{border:none;background: none; border-radius: 4px;}
.ui-datepicker-inline.ui-datepicker .ui-state-highlight{color:#263446; background: #FFFADF}
.ui-datepicker-inline.ui-datepicker .ui-state-active{color:#fff; background: #0068FF !important; box-shadow: 0 0 20px rgba(0,104,255,0.2);}
.ui-datepicker-inline.ui-datepicker td{padding:0 5px;}
.ui-datepicker-inline.ui-widget-content .ui-state-default:hover{background:#DAE9FF;}

.table-condensed>tbody>tr>td, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>thead>tr>th{padding:6px;}
.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active{background-color: #0068FF;}

/* 캘린더 상단 월선택 박스*/
.ui_search_date{flex:1; display:flex; align-items: center;}
.ui_search_date.day{flex:1;}
.ui_search_date .btn_date{display:block; flex:1; height:4.6rem; background:#fff; line-height:4.6rem; text-align: center; font-size:1.4rem; font-weight:700; position: relative; cursor:pointer; }
.ui_search_date .btn_date + .btn_date{border-left:1px solid #eee; }
.ui_search_date .current{background:#0068FF; color:#fff;}
.ui_search_date .btn_date:first-child{border-radius: 4px 0 0 4px;}
.ui_search_date .btn_date:last-child{border-radius:0 4px 4px 0;}
.ui_search_date .btn_date[data-search-count]:after{content:attr(data-search-count); display:block; padding:0 0.4em; white-space: nowrap; min-width:22px; text-align: center; height:20px; line-height: 20px; background:#FF850A; color:#fff; font-weight:500; font-size:14px; border-radius: 9999px; position: absolute; right:10%; top:2px; transform: translateX(-50%);}
.ui_search_date .select_search_month { display:none; }
#ui_search_date_select { width:48%; height:100%; display:inline-block; height:4.6rem; background:#0068FF; color:#fff; line-height:4.6rem; text-align: center; font-size:1.4rem; font-weight:700; position: relative; align-items: center; display:none; }
@media screen and (max-width:1024px){
	.ui_search_date.month{width:100%; display:none; position: absolute; right:0px; margin-top:5px; z-index:100; background:#fff; border-bottom:1px solid #ccc; border-right:1px solid #ccc;}
	.ui_search_date.month .btn_date{width:calc(33%); display:block; float:left; border-top:1px solid #ccc; border-left:1px solid #ccc; }
	#ui_search_date_select { display:inline-block; }
}

/* 2022.04.04 클릭 활성화 표시 */
.btn_date.active {background-color: #0068FF; color: #fff;}
.ui_arrows {display:flex;}
.ui_arrows .arrow{display:flex; width:4.6rem; height:4.6rem; align-items: center; justify-content: center; font-size:2rem; background:#fff; border-radius: 4px; overflow: hidden; transition:all 0.2s}
.ui_arrows .arrow + .arrow{margin-left:6px;}
.ui_arrows .arrow:hover, .ui_arrows .arrow:active {background:#263446; color:#fff;}

/* counter ui */
.ui_counter .counter{width:100%; height:100%;display:flex; overflow: hidden;}
.ui_counter .count_input{flex:1; text-align: center;}
.ui_counter .count_btn{width:46px; display:flex; align-items: center; justify-content:center; font-size:2rem; font-weight:700; color:#000}
.ui_counter .count_btn:hover, .ui_counter .count_btn:active{background:#F8FAFC;}
.ui_counter .count_btn.up{border-left:1px solid #eeddde;}
.ui_counter .count_btn.down{border-right:1px solid #ddd;}

/* modal css */
.modal{position: fixed; top:0; right:0; bottom:0; left:0; z-index: 9999; overflow-x:hidden; overflow-y:scroll; background:rgba(0,0,0,0.5); display:none;}
.modal.middle .modal_inner{height:100%;}
.modal.middle .modal_inner{display:flex; align-items: center; justify-content: center;}
.modal.top{padding-top:3vw}
.modal .modal_container{max-width:60rem; width:calc(100% - 2rem); margin:0 auto 40px; background:#fff; padding:3rem 4rem; border-radius: 8px; transform:translateY(-20px); transition: all 0.2s; opacity: 0;}
.modal .modal_container.on{transform:translateY(0); opacity: 1;}
.modal .modal_header{display:flex; justify-content: space-between; padding-top:1rem; padding-bottom:2.4rem; margin-bottom:2.4rem; border-bottom:1px solid #eee;}
.modal .modal_title .title{font-size:2rem; font-weight:700; margin-bottom:0.5em;}
.modal .modal_title .desc{font-size:1.6rem; font-weight:500; color:#8A919B;}
.modal .modal_close_btn{width:4rem; height:4rem; display:flex; align-items:center; justify-content:center; font-size:2.4rem; font-weight:500; margin-top:-1rem; border-radius: 50% 50%; transition: background 0.2s;}
.modal .modal_close_btn:hover{background:#eee;}
.modal .message_field{background: #F2F4F8; border: 1px solid #D7DCE5; padding:2em; font-size:1.5rem; font-weight:500; border-radius: 4px; margin-bottom:20px;}
.modal .message_field .ui_input{margin:10px 0;}
@media screen and (max-width:1024px){
	.modal .modal_container{padding:3rem 2rem;}
}

/* modal 캘린더 이벤트 */
.modal.event .modal_container{padding:0;}
.modal.event .modal_header{padding:0 3rem; border-bottom: none; margin-bottom:0; align-items: center;}
.modal.event  .modal_title .title{margin:0; line-height:7.2rem;}
.modal.event  .modal_close_btn{margin:0;}
.modal.event .modal_info{padding:3rem; background: #ddd;}
.modal.event .info_card{padding:2.4rem; background:#fff;box-shadow: 0 3px 0 rgba(0,0,0,0.02); border-radius: 4px; overflow: hidden; position: relative;}
.modal.event .info_card:after{content:""; display:block; width:100%; height:3px; position: absolute; left:0; top:0;}
.modal.event .info_card[data-color="#0068FF"]:after{background:#0068FF}
.modal.event .info_card[data-color="#49C496"]:after{background:#49C496}
.modal.event .info_card[data-color="#F8C82C"]:after{background:#F8C82C}
.modal.event .info_card[data-color="#EF4040"]:after{background:#EF4040}
.modal.event .info_card[data-color="#596D86"]:after{background:#596D86}
.modal.event .info_card[data-color="#263446"]:after{background:#263446}
.modal.event .info_card[data-color="#D000DF"]:after{background:#D000DF}
.modal.event .info_card[data-color="#649AE8"]:after{background:#649AE8}
.modal.event .info_card[data-color="#A683F8"]:after{background:#A683F8}
.modal.event .info_card[data-color="#7700FF"]:after{background:#7700FF}
.modal.event .info_card .info_header{margin-bottom:20px; display:flex; gap:5px;}
.modal.event .info_card .info_header .etc{flex:none; margin-left:auto;}
.modal.event .event_info{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.modal.event .event_detail{display:flex;align-items: center; width:100%;padding-bottom: 18px; margin-bottom: 12px; border-bottom:1px solid #ccc; font-weight:700; font-size:1.4rem;letter-spacing: -0.03em;}
.modal.event .event_detail.no_brd{margin:0; padding:0; border:none;}
.modal.event .event_detail .icon{font-size:1.7rem; margin-right:6px; font-weight:normal;}
.modal.event .event_detail .item{display:flex;align-items: center;position: relative; padding-right:12px; margin-right:10px;font-size: 1.9rem;}
.modal.event .event_detail .item:last-child{padding-right:0; margin-right:0;}
.modal.event .event_detail .item:last-child:after{display:none;}
.modal.event .event_detail .item:after{content:""; display:block; width:1px; height:10px; background:#ccc; position: absolute; right:0; top:50%; margin-top:-5px;}
.modal.event .event_detail .item .name{font-weight:800}
.modal.event .event_detail .item .desc{color:#888; font-weight:400; font-size:1.6rem;padding-left: 4px;letter-spacing: -0.04em;}
.modal.event .person_detail{display:flex; margin:-4px 0 0 -4px; width:100%;}
.modal.event .person_detail .item{width:100%; margin:4px 0 0 4px; border:1px solid #ccc; border-radius: 2px; display:flex; justify-content: space-between; align-items: center; font-size:1.4rem; height:34px; line-height:34px; padding:0 12px; border-radius: 4px;}
.modal.event .person_detail .item .age{font-weight:700}
.modal.event .person_detail .item .count{font-weight:500}
.modal.event .modal_body{padding:2.4rem 3rem 0;}
.modal.event .person_header{display:flex; align-items: center; justify-content: space-between; ; border-bottom:1px solid #ccc; padding-bottom:10px; margin-bottom:16px;}
.modal.event .person_header .title{font-size:1.6rem; font-weight:700;}
.modal.event .person_card{border-radius: 4px; border:1px solid #ccc; padding:2.4rem; background:#fff}
.modal.event .person_card + .person_card{margin-top:8px;}
.modal.event .person_card .card_header{display:flex; justify-content: space-between; padding-bottom:9px; margin-bottom:20px; border-bottom:1px solid #ccc;}
.modal.event .person_card .card_header .control{white-space:nowrap;}
.modal.event .person_card .card_header .status-wrapper{display:flex; gap:4px;}
.modal.event .person_card .user .name{display:flex; align-items:center;font-size: 2.4rem; font-weight:800; margin-bottom:8px; word-break:keep-all;}
.modal.event .person_card .user .name .user_exceptions{margin-right:10px; display: flex;}
.modal.event .person_card .user .name .user_exceptions > * + *{margin-left:5px;}
.modal.event .person_card .user .name .star{display:flex; justify-content: center; align-items: center; font-size:10px; width:20px; height:20px; background:#F8C82C; border-radius:4px; color:#fff; padding-left:1px;}
.modal.event .person_card .user .name .won{display:flex; justify-content: center; align-items: center; font-size:10px; width:20px; height:20px; background:#596D86; border-radius:4px; color:#fff; font-family: '맑은고딕'; text-align: center; padding-left:1px;}
.modal.event .person_card .user .contact{color:#596D86; font-weight:500; font-size:1.64rem;}
.modal.event .person_card .card_body > .event_detail{display:block;}
.modal.event .person_card .card_body .user{margin-bottom:20px}
.modal.event .person_card .event_detail .event_detail{margin:0; padding:0; border:none;}
.modal.event .person_card .control .yt_btn {min-width:0;}
.modal.event .person_card .control .yt_btn .icon{margin:0;}
.modal.event .info_card .btn_wrapper{display:block;}
.modal.event .modal_footer{padding:2rem 3rem;}

/* modal 캘린더 이벤트 모바일 */
@media screen and (max-width:281px){	/* 갤럭시 폴드 수정 */
	.modal.event .person_card .card_header { display:block; }
	.modal.event .person_card .card_header .control { margin-top: 5px; }
}

/* 캘린더 작성 서비스금액 입력 */
@media screen and (max-width:1024px){
	.ui_table.service_price{display:block;}
	.ui_table.service_price colgroup{display:none;}
	.ui_table.service_price th .ui_input{width:100%;}
	.ui_table.service_price tr{display:flex; width:100%;}
	.ui_table.service_price th{flex:0 0 33.333%; height:auto; min-height:3.5rem; display:flex; align-items:center; justify-content:center;}
	.ui_table.service_price th[colspan="2"]{flex:0 0 66.666%;}
	.ui_table.service_price th[colspan="3"]{flex:0 0 100%;}
	.ui_table.service_price thead,
	.ui_table.service_price tbody{display:flex; flex-direction:column;}
	.ui_table.service_price tbody tr{display:flex; flex-wrap:wrap;}
	.ui_table.service_price tbody tr td{margin-top:-1px;}
	.ui_table.service_price tbody tr td:nth-child(1){width:33.333%;}
	.ui_table.service_price tbody tr td:nth-child(2){width:66.666%; flex:1; border-right:none;}
	.ui_table.service_price tbody tr td:nth-child(3){width:100%;}
}

/* 페이지 상단 필터 바*/
.filter_group{display:flex; align-items: start; margin:-6px 0 20px -6px}
.filter_group > *{margin:6px 0 0 6px}
.filter_group .btn_radio_group{margin-left:20px;}
.btn_radio_group{display:flex; border-radius: 4px; box-shadow:0 0 20px rgba(0,0,0,0.04); overflow: hidden;}
.btn_radio_group .btn_radio{width:100%; height:4.6rem; cursor:pointer;}
.btn_radio_group .btn_radio_label{display:flex; align-items:center; justify-content:center; background:#fff; width:100%; min-width:8.6rem; height:100%; font-weight:700; font-size:1.4rem;}
.btn_radio_group input:checked ~ .btn_radio_label{background:#0068FF; color:#fff;}
.btn_radio_group .btn_radio + .btn_radio{border-left:1px solid #eee;}
.filter_group .search-unit{display:flex; gap:4px; flex:none; margin-left:auto;}

.week-control{display:none;}
@media screen and (max-width:1024px){
	.filter_group.pc{display:none;}
	.filter_group{padding:16px 10px; display:flex; flex-wrap:wrap; margin:0 0 4px 0; background:#fff; gap:4px;}
	.filter_group.alone{margin:0;}
	.filter_group > .ui_input {width:100% ; margin:0 0 2px 0;}
	.filter_group > .ui_mobile_half, .filter_group > .ui_time, .filter_group > .ui_calendar, .filter_group > .ui_input{width:calc(50% - 2px) !important; display:inline-block; margin:0 0 2px 0;}
	.filter_group > .ui_date { width: 100%; display: inline-block; margin:0 0 2px 0; }
	.filter_group > .ui_mobile_full{width:100% !important;}
	.filter_group [class^="ui_"].md .field{box-shadow:none; border:1px solid #ddd}
	.filter_group .btn_radio_group{margin-left:0;}
	.btn_radio_group{width:100%; margin-top:10px; box-shadow:none; border:1px solid #eee;}
	.week-control{display:flex; flex-wrap:wrap; background:#fff; margin-bottom:10px; border-top:1px solid #eee;}
	.week-control .week-item{width:25%; border-right:1px solid #eee; border-bottom:1px solid #eee; flex:0 0 25%; display:flex;  align-items:center; justify-content:center;}
	.week-control .week-item:nth-child(4n){border-right:none;}
	.week-control .week-item a{width:100%; height:44px; display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:-0.05em; font-size:14px}
	.week-control .week-item a.current{background:#0068FF; color:#fff;}
	.week-control .week-item .arrow{font-size:20px; width:32px; height:32px; background:#1A2737; margin:6px 2px; color:#fff; border-radius:4px; font-weight:400;}

	.week-control.mobile .week-item{width:100%; flex:0 0 100%; border:none; justify-content:space-between; padding:0 16px}

	.modal.event .modal_info { padding:0; }
	.modal.event .info_card { border-radius:0; background-color:#dedede; border-bottom: 1px solid #ccc;  }

	.filter_group .yt_btn { width:100%; margin:6px 0 0 0; margin-right:0 !important; }
	.filter_group .ui_half { width:49.2% !important; display:inline-block; margin:0 0 2px 0; }
}

@media screen and (max-width:768px){
	.modal.event .modal_header{padding:0 1.6rem;}
	.modal.event .modal_title .title{line-height:5rem; font-size:1.6rem;}
	.modal.event .modal_footer{padding:0 1.6rem 1.6rem;}
	.modal.event .info_card{padding:1.6rem}
	.modal.event .info_card .info_header .etc .yt_btn{min-width:auto;}
	.modal.event .info_card .info_header .etc .icon{margin:0;}
	.modal.event .info_card .info_header .etc span{display:none;}
	.modal.event .event_detail .item{font-size:1.8rem}
	.modal.event .modal_body{padding:2.4rem 1.6rem}
	.modal.event .event_detail{flex-wrap:wrap; white-space:nowrap; justify-content:flex-start}
	.modal.event .event_detail .item{margin-bottom:4px;}
	.modal.event .event_detail .item:after{display:none}
	.modal.event .person_detail{flex-wrap:wrap}
	.modal.event .person_detail .item{width:calc(50% - 4px);}
	.modal.event .person_card{padding:2rem 1.8rem;}



}
@media screen and (max-width:340px){
	.modal.event .person_header{display:block;}
	.modal.event .person_header .btn_group{justify-content:flex-end; margin-top:6px;}
}
/* 페이지 상단 카드 그룹 6px gap*/
.page_top_group{display:flex; align-items: stretch; margin-bottom:10px; margin:-6px 0 0 -6px}
.page_top_group > *{margin:6px 0 0 6px}
@media screen and (max-width:1024px){
	.page_top_group{display:block;}
	.page_top_group > *{width:100%;}
	.page_top_group .yt_section .section_header{position:relative; top:auto; left:auto;}
}

/*공통 섹션 css*/
.yt_section{width:100%; background:#fff;border-radius: 4px; box-shadow:0 0 20px rgba(0,0,0,0.04); margin-bottom:20px;}
.yt_section .section_header{height:7.2rem; padding:0 2.4rem; border-bottom:1px solid #eee; display:flex; align-items: center; justify-content: space-between; overflow-x:hidden;}
.yt_section .section_title{font-size:1.8rem; font-weight: 800;}
.yt_section .section_control{margin-left:auto; display:flex; align-items:center; gap:4px}
.yt_section .section_control.mobile{display:none;}
.yt_section .section_count{padding:0 1.2rem; line-height: 3.2rem; border-radius: 9999px 9999px; background:#263446; font-size:1.4rem; font-weight:600; color:#fff;}
.yt_section .section_filter{padding:0 1.2rem; line-height: 3.2rem; border-radius: 9999px 9999px; font-size:1.4rem; font-weight:600;}
.yt_section .section_body{padding:3rem; overflow:hidden; width:100%;}
.yt_section.small .section_header{padding-bottom:0; margin-bottom:0; border:none;}
.yt_section.small .section_body{padding-top:0;}
.yt_section.folding .fold-btn{display:none;}
.yt_section.filter{background:none;}
.yt_section.filter .section_header{display:none;}
.yt_section.filter .section_body{background:none; padding:0;}
.yt_section.filter .filter_group{margin-bottom:0;}

/* Table Search */
.table_search_result tr[visible='false'], .no-result{ display:none; }
.table_search_result tr[visible='true']{ display:table-row; }

@media screen and (max-width:1024px){

	.yt_section{border-radius:0; margin-bottom:2px;}
	.yt_section .section_header{padding:0 1.6rem; height:6rem; background:#fff; position:sticky; top:9rem; z-index:22;}
	.yt_section .section_header .section_desc{padding-right:2rem;}
	.yt_section .section_title{font-size:1.48rem;}
	.yt_section .section_filter {display:none;}
	.yt_section .section_body{padding:1.6rem 1.6rem}

	.yt_section.folding .section_body{display:none;}
	.yt_section.folding.on .section_body{display:block;}
	.yt_section.folding .fold-btn{display:flex; align-items:center; justify-content:center; font-size:20px; color:#000; border:1px solid #eee; border-radius:4px; width:3.2rem; height:3.2rem;}
	.yt_section.folding.on .fold-btn i{transform:rotate(180deg)}
	.yt_section .section_control.mobile{display:flex;}

	.yt_section .section_count{ padding:0 1rem; line-height: 3.5rem; border-radius: 9999px 9999px; background:#263446; font-size:1.2rem; color:#fff; word-break: keep-all; }
}
@media screen and (max-width:768px){
	.yt_section.filter .section_header{display:flex;}
}

/*차트 - 지도*/
.map {position: relative; z-index: 1; margin:0 auto}
.map.map_korea {max-width:300px;}
.map.map_world > div > div{margin:auto}
.map svg .municipality {fill: #f7fbff; stroke: #e2e2e2;}
.map svg .municipality:hover {stroke: #0EA46C;}
.map svg .municipality.p0 {fill: #E8F8F2;}
.map svg .municipality.p1 {fill: #D3F2E7;}
.map svg .municipality.p2 {fill: #BEECDB;}
.map svg .municipality.p3 {fill: #A9E6CF;}
.map svg .municipality.p4 {fill: #7FD9B8;}
.map svg .municipality.p5 {fill: #69D3AC;}
.map svg .municipality.p6 {fill: #55CDA0;}
.map svg .municipality.p7 {fill: #3FC794;}
.map svg .municipality.p8 {fill: #2BC189;}
.map svg text {font-size: 10px}
.map .tooltip{position: absolute;}

/*차트 상단 요약 카드*/
.chart_group{display:flex; }
.chart_card{width:100%; min-height:14.5rem; background:#fff; border-radius: 4px; box-shadow:0 0 20px rgba(0,0,0,0.04); padding:2.6rem 3rem;}
.chart_card + .chart_card{margin-left:1rem;}
.chart_card .card_title{font-size:1.8rem; font-weight:800; display:flex; align-items: center; margin-bottom:2rem;}
.chart_card .card_title i{font-size:2.4rem; margin-right:8px;}
.chart_card .card_content{display:flex; align-items: baseline;}
.chart_card .card_data{font-size:3.6rem; font-weight:800; margin-right:1.2rem;}
.chart_card .card_increase{font-size:1.8rem; font-weight:800; margin-right:0.6rem;}
.chart_card .card_increase.up{color:#0068FF;}
.chart_card .card_increase.down{color:#EF4040;}
.chart_card .card_standard{font-size:1.6rem; font-weight:500; color:#c9c9c9}
@media only screen and (max-width: 1024px) {
	.chart_group{flex-wrap: wrap;margin-bottom:4px !important;}
	.chart_group ~ .yt_section .section_body{margin-bottom:4px !important; overflow-x:hidden;}
	.filter_group ~ .yt_section{margin-bottom:4px !important;}
	.chart_group ~ .grid .yt_section{margin-bottom:4px !important; }
	.chart_group ~ .grid .yt_section .section_body{overflow-x:hidden;}
	.chart_card{width:calc(50% - 2px); margin-bottom:4px; margin-right: 4px; margin-left:0; border-radius:0; padding:2rem; min-height:0}
	.chart_card + .chart_card{margin-left:0;}
	.chart_card:nth-child(2n){margin-right:0}
	.chart_card .card_title{font-size:1.4rem; margin-bottom:1.4rem;}
	.chart_card .card_title i{display:none;}
	.chart_card .card_data{font-size:2.4rem;}
	.chart_card .card_increase,
	.chart_card .card_standard{font-size:1.4rem}
}

/* 대시보드*/
#yt_content.dashboard_wrapper{min-width:0; margin-top:-50px;}
.dashboard{max-width:73rem; padding:0 1.5rem; margin:0 auto; padding-bottom:100px}
.dashboard_logo{text-align: center;}
.dashboard_search{background:#E9ECF1; height:8.8rem; box-shadow:0 0 10px rgba(0,0,0,0.04); padding:1.6rem; display:flex; align-items: center; justify-content: space-between; margin:5rem 0 4rem; border-radius: 8px;}
.dashboard_search .dashboard_search_input{width:calc(100% - 10.6rem); height:100%; background:#fff; box-shadow:0 0 20px rgba(0,0,0,0.04); border-radius: 4px; overflow: hidden;}
.dashboard_search .dashboard_search_input input{width:100%; height:100%; color:#1A2737; font-size:1.6rem; font-weight:700; padding:0 1.2em;}
.dashboard_search .dashboard_search_input input::placeholder{color:#8A919B; font-weight:300;}
.dashboard_search .dashboard_search_btn{width:10rem; height:100%; border-radius: 4px; background:#1A2737; color:#fff; font-weight:800; font-size:1.6rem; display:flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s; box-shadow:0 0 20px rgba(0,0,0,0.08);}
.dashboard_search .dashboard_search_btn:hover{background:#2BC189;}
.dashboard_title{font-size:1.6rem; font-weight:700; margin-bottom: 1em;}
.dashboard_favorite{margin-bottom:3em}
.dashboard_favorite .favorite_list{display:flex; margin:-6px 0 0 -6px; width:calc(100% + 6px)}
.dashboard_favorite .favorite_list li{margin:6px 0 0 6px; width:100%;}
.dashboard_favorite .favorite_list li a{display:block; height:10rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 4px; border:1px solid #D7DCE5; box-shadow:0 0 10px rgba(0,0,0,0.04); background:#fff; transition:all 0.2s}
.dashboard_favorite .favorite_list li .favorite_icon{font-size:2.6rem; font-weight:500; margin-bottom:1rem;}
.dashboard_favorite .favorite_list li .favorite_title{font-size:1.4rem; font-weight:600;}
.dashboard_notice .notice_list li{margin-bottom:6px}
.dashboard_notice .notice_list li a{background:#E9ECF1; border-radius:4px; display:flex;  height:5rem; min-width: 0; padding:0 2.4rem; border:1px solid transparent; transition:all 0.2s}
.dashboard_notice .notice_list li a > *{line-height:5rem;}
.dashboard_notice .notice_list .notice_icon{font-size:1.8rem;}
.dashboard_notice .notice_list .notice_title{flex:1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding:0 0.8em; font-size:1.4rem; font-weight:600}
.dashboard_notice .notice_list .notice_date{flex:none; margin-left:auto; font-size:1.4rem; font-weight:600}

@media screen and (min-width:1025px){
	.dashboard_favorite .favorite_list li a:hover{transform:translateY(-4px); box-shadow:0 2px 20px rgba(0,0,0,0.1); color:#3FC794}
	.dashboard_notice .notice_list li a:hover{border:1px solid rgba(96,130,172, 0.26); box-shadow:0 2px 20px rgba(0,0,0,0.1);}
}
@media screen and (max-width:1024px){
	#yt_content{padding-bottom:100px;}

}
@media screen and (max-width:768px){
	#yt_content.dashboard_wrapper{min-width:0; margin-top:-50px;}
	.dashboard_logo{background:url(../img/yt_logo_horizontal.svg) no-repeat center; height:50px; margin-top:-30px}
	.dashboard_logo img{display:none}
	.dashboard_favorite .favorite_list{flex-wrap:wrap;}
	.dashboard_favorite .favorite_list li{width:calc(50% - 6px)}
	.dashboard_favorite .favorite_list li a{height:12rem;}
	.dashboard_search{display:block; height:auto; margin:2rem 0 4rem; padding:10px;}
	.dashboard_search .dashboard_search_input{width:100%; height:48px; margin-bottom:4px;}
	.dashboard_search .dashboard_search_btn{width:100%; height:48px;}
	.dashboard_notice .notice_list li a{padding:0 1em;}
	.dashboard_notice .notice_list .notice_title{padding-left:0;}
	.dashboard_notice .notice_list .notice_icon{display:none;}
}

/* msg template */
.msg_template{background:#F2F4F8; border:1px solid #D7DCE5; padding:2rem; border-radius: 4px;}
.msg_template .msg_title{display:flex; align-items: center; font-size:1.6rem; font-weight:500; margin-bottom:1.2rem;}
.msg_template .msg_title .icon{margin-right:6px; font-size:2rem;}
.msg_template .msg_content{width:100%; height:14rem; border:1px solid #ddd; background:#fff; border-radius: 4px;overflow-y:scroll; margin-bottom:6px; resize:none; padding:1em; font-size:1.5rem;}
.msg_template .ui_input{margin-bottom:0}

/* 선명 정보 */
.info_wrapper{display:flex;}
.info_wrapper .ship_info{width:20%;}
.info_wrapper .service_info{width:30%; border-left:1px solid #eee; padding-left:16px;}
.ship_info{display:inline-flex;}
.ship_info .ship_icon{width:3.2rem; height:3.2rem; border-radius: 2px; color:#fff; display:flex; align-items: center; justify-content: center; font-size:1.8rem;}
.ship_info .ship_content{padding-left:1.2rem; text-align: left;}
.ship_info .ship_title{margin-bottom: 2px;}
.ship_info .ship_no{font-size:1.3rem; font-weight: 400; letter-spacing: -0.05em;}
@media screen and (max-width:1024px){
	.info_wrapper{display:block;text-align:right;}
	.ship_info{margin-top:5px;}
	.info_wrapper .ship_info{width:auto; padding-bottom:4px; margin-bottom:4px;}
	.info_wrapper .service_info{width:100%; border:none; padding:0px;}
}
/* 페이지 상단 탭메뉴 (마이페이지)*/
.yt_tab_nav{display:flex; align-items: center; border-bottom:1px solid #E0E3E9; margin-bottom:3rem;}
.yt_tab_nav .tab_nav_item{display:block; line-height: 6.8rem; color:#A0A6B1; font-weight:700; font-size:1.8rem; position: relative; padding:0 1em;}
.yt_tab_nav .tab_nav_item.active{color:#263446; font-weight:800;}
.yt_tab_nav .tab_nav_item.active:after{content:""; display:block; width:100%; height:3px; background:#263446; position: absolute; bottom:-1px; left:0;}
@media screen and (max-width:1024px){
	.yt_tab_nav{background:#fff; padding:0 1.6rem; margin-bottom:6px; overflow-x:auto; overflow-y:hidden;}
	.yt_tab_nav::-webkit-scrollbar, .yt_tab_nav::-webkit-scrollbar-thumb, .yt_tab_nav::-webkit-scrollbar-track{background:transparent;display: none;}
	.yt_tab_nav .tab_nav_item{margin-right:16px; font-size:1.5rem; padding:0; white-space:nowrap;}

	
}

/* 프린트설정 */
.print #yt_wrapper{max-width:96rem; margin:80px auto 100px; min-height: 0; padding:0;}
.print #yt_content{min-width: 0;}
@page { size: A4; margin: 15mm; }
@media print{
	html,body{width:210mm;height:297mm; color:#000 !important}
	.filter_group{display:none}
	.print #yt_wrapper{max-width:100%; margin:0; background: none;}
	.print #yt_content{padding:0;}
	.print .yt_section{  box-shadow: none; border-radius: 0; margin:0; overflow: visible;}
	.print .yt_section .section_body{padding:0;}	
	.print_area div.layout{width:210mm;height:297mm; font-size:13px;}
}

.print_area div.layout{width:100%;}
.print_area div.content{background:#fff}
.print_area h3{text-align:center;margin-bottom:5mm; font-size: 24px;}
.print_area table{border:2px solid #000;width:210mm;border-collapse:collapse; table-layout: fixed; margin:0 auto;}
.print_area table td,.print_area table th{height:12mm;text-align:center;border:1px solid #000;min-width:30mm}
.print_area table .left{text-align:left;padding-left:3mm}

/* 마이페이지 */
.mypage{max-width:60rem; margin:0 auto;}
.ui_info.my_info{}
.ui_info.my_info .info_row{background:#fff; align-items: flex-start; border-left:none; border-right:none; border-top:none; border-bottom:1px solid #eee; padding:1.1em 0;}
.ui_info.my_info .info_row:first-child{padding-top:0.2em;}
.ui_info.my_info .info_row:last-child{border:none;}
.ui_info.my_info .info_row + .info_row{margin-top:0;}
@media screen and (max-width:1024px){
	.mypage{max-width:100%; width:100%;}
}

/* 버튼 강제 1열 정렬 */
.btn_group{display:flex; margin:-4px 0 0 -4px; justify-content: center;}
.btn_group > * {margin:4px 0 0 4px}

/* yt_sectino내 필드 그룹 */
.yt_section .group + .group{margin-top:3rem;}
.yt_section .group [class^="ui_"]{margin-bottom:2rem;}
.yt_section .group [class^="ui_"]:last-child{margin-bottom:0;}
.yt_section .group_title{font-size:1.6rem; font-weight: 700; padding-bottom:1.6rem; margin-bottom:1.6rem; border-bottom:1px solid #eee;}
.yt_section .group_content{background:#F8FAFC; border:1px solid #D7DCE5; padding:2.4rem; border-radius: 4px;}
.yt_section .group .ui_textarea {flex:1; display:flex; flex-direction: column;}
.yt_section .group .ui_textarea .field{flex:1;}
.yt_section .group .ui_textarea textarea{height:auto; flex:1; white-space: pre-wrap; overflow-wrap: break-word;}
.yt_section .group .col{display:flex; flex-direction: column;}

/* history ui*/
.history_list .history_item + .history_item{padding-top:2rem; margin-top:2rem; border-top:1px solid #eee;}
.history_list .item_header{display:flex; align-items: baseline; justify-content: space-between;}
.history_list .item_title{color:#fff; font-size:1.3rem; padding:0.3em 0.6em; border-radius: 4px; background:#596D86; margin-bottom:10px;}
.history_list .item_date{font-size:1.4rem; font-weight: 500;}
.history_list .item_content{background:#F8FAFC; border:1px solid #D7DCE5; padding:2rem; font-size:1.3rem; font-weight:700; border-radius: 4px; display:flex; align-items: center; flex-wrap:wrap;word-break: break-all;}
.history_list .item_content .icon{padding:0 0.4em;}
.history_list .item_content .before_state{text-decoration: line-through;}

/* 승선명부 */
.board_list .board_team{background:#F8FAFC; border-radius: 4px; display:flex; justify-content: space-between; align-items: center; padding:0 1em; height:48px; border:1px solid #D7DCE5; cursor:pointer;}
.board_list .board_team.use{background:#2BC189; border:none; color:#fff;}
.board_list .board_team.not_use{background:#ff850a; border:none; color:#fff;}
.board_list .board_team.not_use .b_orange{background:#ff850a;}
.board_list .board_team.use .b_orange{background:#2BC189;}
.board_list .board_team + .board_team{margin-top:4px;}
.board_list .team_info{display:flex; align-items: center;}
.board_list .board_team .team_count{display:flex; align-items:center}
.board_list .team_info .name{margin-right:10px; display:flex; align-items: center;}
.board_list .team_info .name .user_exceptions{margin-right:10px; display: flex;}
.board_list .team_info .name .user_exceptions > * + *{margin-left:5px;}
.board_list .team_info .name .star{display:flex; justify-content: center; align-items: center; font-size:10px; width:20px; height:20px; background:#F8C82C; border-radius:4px; color:#fff; padding-left:1px;}
.board_list .team_info .name .won{display:flex; justify-content: center; align-items: center; font-size:10px; width:20px; height:20px; background:#596D86; border-radius:4px; color:#fff; font-family: '맑은고딕'; text-align: center; padding-left:1px;}
.board_list .team_info .count{height:18px; background:#263446; color:#fff; padding:0 0.1em; min-width:18px; border-radius: 18px 18px; font-size:1.4rem; line-height:18px;}
.board_list .board_control{text-align: right; padding-top:10px; margin-top:10px; border-top:1px solid #eee;}
.board_list .age-wrapper{display:flex; padding-left:10px; margin-left:10px; position:relative;}
.board_list .age-wrapper:before{content:""; display:block; width:1px; height:14px; background:#ddd; position:absolute; left:0; top:50%; margin-top:-7px}
.board_list .age-wrapper .age-item{display:flex; margin-right:16px; align-items:center;}
.board_list .age-wrapper .age-item .count-name{width:18px; height:18px; line-height:18px; text-align:center; color:#000; background:#ddd; font-size:12px; font-weight:700; border-radius:50%}
.board_list .age-wrapper .age-item .count-number{padding-left:6px; font-weight:700; font-size:20px;}
@media screen and (max-width:768px){
	.board_list .board_team{padding:14px 10px; height:auto;}	
	.board_list .board_team .team_count{margin-bottom:10px}
	.board_list .age-wrapper{ padding:0; margin:0;}
	.board_list .age-wrapper .age-item:last-child{margin:0;}
	.board_list .age-wrapper:before{display:none;}
	.board_list .team_info{display:block}
	.team_control{display:flex; flex-direction:column; gap:2px}
	.team_control button.yt_btn{margin:0}
}

/*메세지 설정 */
.msg_section .msg_block + .msg_block{margin-top:5px;}
.msg_section .msg_block{display:flex; justify-content:space-between; background:#f8f9fa; border-radius:5px; padding:20px 30px; border:1px solid #eee;}
.msg_section .msg_block .right{display:flex; gap:4px}
.msg_section .msg_block .row{display:flex;}
.msg_section .msg_block .row + .row{margin-top:7px;}
.msg_section .msg_block .row_label{ width:6em; flex:0 0 6em; font-weight:500; color:#000}
.msg_section .msg_block .hashtag{margin:-3px 0 0 -3px; display:flex; flex-wrap:wrap;}
.msg_section .msg_block .hashtag .name{margin:3px 0 0 3px; padding:0 4px; line-height:22px; background:#263446; border-radius:3px; font-size:13px; color:#fff;}

@media screen and (max-width:1024px){

}
@media screen and (max-width:768px){

	.msg_section .msg_block{display:block; padding:16px 20px;}
	.msg_section .msg_block .right{margin-top:16px;}
	
}

/* 게시판 */

.yt-board-wrapper{max-width:900px; margin:0 auto 50px; padding:0 16px;}
.yt-board-wrapper .yt-board-header{font-weight:700; font-size:1.8rem; border-bottom:1px solid #ddd; padding-bottom:0.6em; margin-bottom:2em;}
.yt-board-wrapper .board{margin-bottom:20px;}
.yt-board-wrapper .board-item{background:#fff; padding:30px; border-radius:10px; cursor:pointer; margin-bottom:10px; display:flex;}
.yt-board-wrapper .board-item .item-check{padding-right:20px;}
.yt-board-wrapper .board-item .item-check input{appearance:auto}
.yt-board-wrapper .board-item .item-title{font-weight:700; color:#000; margin-bottom:16px; font-size:2rem;}
.yt-board-wrapper .board-item .item-meta{display:flex; flex-wrap:wrap;}
.yt-board-wrapper .board-item .item-meta .meta{display:flex; font-size:1.6rem; margin-right:20px;}
.yt-board-wrapper .board-item .item-meta .meta .meta-label{color:#888; padding-right:0.5em;}
.yt-board-wrapper .board-item .item-meta .meta .meta-content{color:#555; font-weight:500}
.yt-board-wrapper ~ .yt-board-wrapper{margin-bottom:200px}
.yt-board-wrapper .board-view{}
.yt-board-wrapper .board .contents-view{padding:26px 30px 40px; background:#fff; border-radius:0 0 6px 6px; }
.yt-board-wrapper .board .contents-view #post-content{min-height:300px}
.yt-board-wrapper .board-view-header{background:#fff; border-radius:6px 6px 0 0; overflow:hidden;padding:26px 30px; text-align:center; }
.yt-board-wrapper .board-view-header .title{font-size:28px; line-height:1.2; font-weight:bold; letter-spacing:-0.05em; padding-top:20px; margin-bottom:40px;}
.yt-board-wrapper .board-view-header .meta{display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eee; padding-bottom:20px;}
.yt-board-wrapper .board-view-header .write_info{display:flex;  align-items:center; gap:10px; opacity:0.7; color:#000}
.yt-board-wrapper .board-view-header .etc_info{display:flex;  align-items:center; gap:20px; color:#000}
.yt-board-wrapper .board-view-header .etc_info i{color:#000}
.yt-board-wrapper .media{margin-bottom:5px}
#comment_write_box, #viewcomment{display:none;}

@media screen and (max-width:1024px){
	.yt-board-wrapper{margin-top:-30px}
	.yt-board-wrapper .yt-board-header{margin-bottom:1em;}
	.yt-board-wrapper .filter_group{background:none; padding:0;}
	.board-top .filter_group .ui_input ~ .ui_input{flex:1; width:auto !important;}
}

/* 모달 푸터 버튼 그룹 */
.btn_wrapper{margin:-6px 0 0 -6px; display:flex;}
.btn_wrapper .yt_btn{margin:6px 0 0 6px;}
@media screen and (max-width:768px){
	.modal_footer .btn_wrapper{display:block;}
}

/* 예약문의 리스트 */
.counsel-row:has(.ui_check input[type=checkbox]:checked){background:#F9FBFD !important; color:#bbb !important;}
.counsel-row:has(.ui_check input[type=checkbox]:checked) > .m-row { background:#F9FBFD !important; color:#bbb !important; }
.counsel-row:has(.ui_check input[type=checkbox]:checked) > .m-row .yt_btn.b_white { background:#F9FBFD !important; color:#bbb !important; }

/* 예약등록 */
.book_control{display:flex; justify-content:flex-end; margin-bottom:10px; margin-top:10px; gap:4px}
@media screen and (max-width:1024px){
	.book_control{position:fixed; left:0; bottom:0; justify-content:center; background:#fff; width:100%; z-index:99; margin:0; padding:20px 10px; border-radius:16px 16px 0 0; box-shadow:0 -10px 20px rgba(0,0,0,0.1)}
}

/* 가이드 */
.guide .section_header{height:auto; padding:16px 2.4rem;}
.guide .guide_left{}
.guide .guide_left .btn_week_num{border:1px solid #eee; border-radius:3px; box-shadow:0 0 2px rgba(0,0,0,0.1); padding:8px 10px; margin:4px 0 0 4px; white-space:nowrap; color:#000}
.guide .guide_left .btn_week_num.b_gray{background:#fff;}
.guide .guide_left .btn_week_num.b_yellow{background:#1A2737; color:#fff; border-color:#1a2737}
.guide .guide_left .btn_week_num .week{display:block; font-weight:700; font-size:1.5rem; margin-bottom:4px}
.guide .guide_left .btn_week_num .period{display:block; font-size:1.4rem; opacity:0.8}
@media screen and (max-width:1024px){
	.guide .section_header{height:auto; padding:10px;}
	.guide .guide_left{position:fixed; left:0; bottom:0; justify-content:center; background:#fff; width:100%; z-index:99; margin:0; padding:20px 20px 30px; border-radius:16px 16px 0 0; box-shadow:0 -10px 20px rgba(0,0,0,0.1);}
	.guide .guide_left .btn_wrapper{overflow-x:auto;}
	.guide .guide_right{flex:none; margin-left:auto;}

}

/* small info list */
.info-list{display:flex; margin:-8px 0 0 -20px; flex-wrap:wrap; }
.info-list .item{display:flex; align-items:center; white-space:nowrap; margin:8px 0 0 20px}
.info-list .item .label{line-height:22px; font-size:12px; padding:0 4px; background:#eee; color:#888; border-radius:4px; border:1px solid #ddd; margin-right:8px}
.info-list .item.sub .label{line-height:18px; font-size:10px; padding:0 2px; background:#eee; color:#888; border-radius:4px; border:1px solid #ddd; margin-right:6px}
.info-list .item.sub .content{ color:#aaa; font-style:italic; font-size:0.9em; }

/*모바일 전용 폴딩헤더*/
.mobile-top-header{display:none;}
@media screen and (max-width:1024px){
	.mobile-top-header{display:block;}
	.mobile-top-header .yt_section .section_header{justify-content:flex-start; gap:10px;}
	.mobile-top-header ~ .page_top_group{padding:10px 0; display:none;}
	.mobile-top-header.on ~ .page_top_group{display:block;}
}

/*운항현황판 모바일 대응*/
@media screen and (max-width:1024px){
	.boarding_dashboard tbody tr td:nth-child(1){order:1;}
	.boarding_dashboard tbody tr td:nth-child(2){order:3;}
	.boarding_dashboard tbody tr td:nth-child(3){order:2;}
	.boarding_dashboard tbody tr td:nth-child(4){order:4;}
	
	.ui_table.rspn_table .m-big .m-row-content{font-size:2rem; font-weight:800; letter-spacing:-0.04em;}
}

/* 가로 스크롤 테이블 */
.scroll_table_wrapper{overflow-x:auto; overflow-y:hidden;}
.scroll_table{min-width:720px;}
.scroll_table th{height:4rem;}
.scroll_table td{height:4.4rem; padding:0 1rem;}

/* 섹션헤더 반응형 보정*/
.yt_section .section_header{min-height:6rem; height:auto;}
.yt_section .section_count{white-space:nowrap;}
.yt_section .section_control{flex-wrap:wrap; margin-top:4px; margin-bottom:4px; justify-content: flex-end;}