/**
* 로그인 영역
*/

.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; border:1px solid #ccc;}
[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: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}

/*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;}

/*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;}

/* 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}