.wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #fff;
    box-sizing: border-box;
}
.wrap.login {
    background: #ECFCFF
}
.wrap.remote {
    overflow: hidden;
    background: #EDFFE7;
}
.wrap.login .bus-img{
    position: fixed;
    bottom: 83px;
    left: calc(50% - 120px);
    transform: translateX(-50%);
    width: 427px;
    height: 213px;
    background: url(../images/bus-img.svg) 50% no-repeat;
    z-index: 1;
}
.wrap.login::after{
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 106px;
    background: #616B70;
}
.wrap.login::before{
    content: '';
    position: fixed;
    bottom: 0;
    left: calc(50% + 80px);
    transform: translateX(-50%);
    width: 209px;
    height: 237px;
    background: url(../images/person-img.svg) 50% no-repeat;
    z-index: 3;
}
/* =========================================================================================
 *  color 스타일
 * =========================================================================================*/
:root {
    --maincolor: #04D845;
    --mainbordercolor: #078360;
    --maingreycolor: #E9F6F0;
    --sub1color: #0EBBFF;
    --sub1bordercolor: #0099D5;
    --sub2color: #FAC800;
    --sub2bordercolor: #D8A53F;
    --sub2txtcolor: #674A0F;
    --greycolor: #666;
    --grey2color: #999;
    --dangercolor: #ED1B24;
    --dangertxtcolor: #B9141B;
    --dangergreycolor: #F6EAE9;
    --greybackcolor: #fafafa;
    --greybordercolor: #eee;
    --greyborder2color: #ddd;
    --whitecolor: #fff;
    --blackcolor: #222;
    --cardbackcolor: #41564B;
}
/* =========================================================================================
 *  로그인 스타일
 * =========================================================================================*/
.login-wrap{
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
    z-index: 50;
}
.login-wrap .login-logo{
    font-size: 23px;
    font-weight: 700;
    text-align: center;
    color: var(--maincolor);
    line-height: 1.2;
    margin-top: 60px;
    margin-bottom: 33px;
}
.login-wrap .login-logo strong{
    font-size: 33px;
    color: var(--mainbordercolor);
}
.login-wrap .btn-block{
    margin-top: .6rem;
}
/* =========================================================================================
 *  리모콘 스타일
 * =========================================================================================*/
.remote-wrap{
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    height: 180px;
    border-radius: 0 0 20px 20px;
    background: url(../images/driver-img.svg) 0 100% no-repeat #00AA34;
    box-sizing: border-box;
}
.remote-wrap .remote-title{
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: var(--whitecolor);
    line-height: 1.2;
    padding-top: 18px;
    padding-bottom: 18px;
    box-sizing: border-box;
}
.remote-wrap .remote-con{
    width: 100%;
    padding-left: 113px;
    box-sizing: border-box;
}
.remote-wrap .remote-con ul{
    width: 100%;
    display: flex;
    box-sizing: border-box;
}
.remote-wrap .remote-con ul li{
    font-size: 18px;
    font-weight: 300;
    line-height: 34px;
    color: #fff;
    box-sizing: border-box;
}
.remote-wrap .remote-con ul li:nth-child(1){
    width: 90px;
    box-sizing: border-box;
}
.remote-wrap .remote-con ul li:nth-child(2){
    width: calc(100% - 90px);
    font-weight: 400;
    box-sizing: border-box;
}
.air-wrap{
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding-top: 4rem;
    height: calc(100% - 210px);
    box-sizing: border-box;
}
.air-wrap .air-title{
    position: relative;
    font-size: 33px;
    font-weight: 700;
    text-align: center;
    color: var(--mainbordercolor);
    line-height: 1.2;
    padding-top: 18px;
    padding-bottom: 18px;
    box-sizing: border-box;
    z-index: 12
}
.air-wrap::after{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 300px;
    background: url(../images/leaf-img.png) 50% 0 no-repeat;
    background-size: contain;
    z-index: 10;
}
.air-wrap::before{
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    background: #FFFFFF;
    box-shadow: 0px 10px 14px rgba(0, 170, 52, 0.3);
    border-radius: 30px 30px 0px 0px;
    z-index: 8;
}
.air-wrap p{
    position: relative;
    font-size: 21px;
    font-weight: 400;
    text-align: center;
    color: var(--dangertxtcolor);
    line-height: 1.2;
    padding-top: 18px;
    padding-bottom: 18px;
    box-sizing: border-box;
    z-index: 12
}
.air-wrap p.on{
    color: var(--mainbordercolor);
}
.air-wrap .mainbus{
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 182px;
    height: 84px;
    background: url(../images/mainbus-img.svg) 50% 0 no-repeat;
    background-size: contain;
    z-index: 12;
}
.air-wrap input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}
.air-wrap label {
	cursor: pointer;
	text-indent: -9999px;
	width: 200px;
	height: 100px;
	background: #ED1B24;
    border: 6px solid #B9141B;
	display: block;
	border-radius: 100px;
	position: relative;
    margin: 0 auto;
    z-index: 12
}
.air-wrap label:after {
	content: '';
	position: absolute;
	top: 11px;
	left: 20px;
	width: 76px;
	height: 76px;
	background: #fff;
	border-radius: 90px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
	transition: 0.3s;
}
.air-wrap input:checked + label {
	background: #04D845;
    border-color: #03C43E;
}
.air-wrap input:checked + label:after {
	left: calc(100% - 20px);
	transform: translateX(-100%);
}
.air-wrap label:active:after {
	width: 130px;
}

/* =========================================================================================
 *  네비게이션 스타일
 * =========================================================================================*/
.nav{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.1);
    z-index: 999;
    box-sizing: border-box;
}
.nav ul{
    display: flex;
    width: 100%;
    height: 60px;
    max-width: 540px;
    margin: 0 auto;
}
.nav ul li{
    width: 33.33%;
}
.nav ul li a{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 34px;
    text-align: center;
    font-size: .9rem;
    border-top: 2px solid transparent;
    box-sizing: border-box;
}
.nav ul li a::after{
    content: '';
    position: absolute;
    top: .5rem;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translateX(-50%);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 24px auto;
}
.nav ul li:nth-child(1) a::after{background-image: url(../images/ico-setting.svg);}
.nav ul li:nth-child(2) a::after{background-image: url(../images/ico-term.svg);}
.nav ul li:nth-child(3) a::after{background-image: url(../images/ico-etc.svg);}
.nav ul li:nth-child(1).active a::after{background-image: url(../images/ico-setting-active.svg);}
.nav ul li:nth-child(2).active a::after{background-image: url(../images/ico-term-active.svg);}
.nav ul li:nth-child(3).active a::after{background-image: url(../images/ico-etc-active.svg);}
.nav ul li.active a{border-top: 2px solid var(--maincolor);}
/* =========================================================================================
 *  button / icon 스타일
 * =========================================================================================*/
button{border:0 none;background-color:transparent;box-sizing: border-box;}
button h4{font-weight: 500;}
button:focus, input:focus{outline:0;}
.btn-phone{
    padding: 10px 12px 10px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    color: var(--whitecolor);
    background: url(../images/ico-phone.svg) 12px 50% no-repeat var(--maincolor);
    border: 1px solid var(--mainbordercolor);
    box-shadow: 0px 4px 4px rgba(0, 178, 86, 0.15);
}
.btn-certify{
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 1.1rem;
    color: var(--blackcolor);
    background: var(--greybordercolor);
}
.btn-block{
    background: var(--greybordercolor);
    border: 1px solid var(--greyborder2color);
    color: var(--greycolor);
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 14px 70px;
    position: relative;
    display: block;
    width: 100%;
}
.btn-block.active{
    background: var(--dangercolor);
    border: 1px solid var(--dangertxtcolor);
    color: var(--whitecolor);
    box-shadow: 0px 4px 8px rgba(185, 20, 27, 0.25);
}
.btn-block.outline{
    background: var(--whitecolor);
    border: 1px solid var(--mainbordercolor);
    color: var(--maincolor);
}
.btn-cash{
    position: relative;
    display: block;
    padding: 19px 0 19px 62px;
    font-weight: 600;
    font-size: 1.2rem;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}
.btn-cash + .btn-cash{
    border-top: 1px solid var(--greybordercolor);
}
.btn-cash::after{
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-size: 24px auto;
    background-repeat: no-repeat;
}
.btn-cash.first::after{
    background-image: url(../images/ico-card.svg);
}
.btn-cash.latter::after{
    background-image: url(../images/ico-wallet.svg);
}
.btn-box{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: var(--whitecolor);
}
.btn-box.maincolor{
    background-color: var(--maincolor);
}
.btn-box.tour{
    background-color: var(--sub2color);
}
.btn-box.academy{
    background-color: var(--sub1color);
}
.btn-box button + button{
    margin-top: .6rem;
}
.btn-academy{
    background: var(--sub1color);
    border: 1px solid var(--sub1bordercolor);
    color: var(--whitecolor);
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 1rem .6rem;
    position: relative;
    display: block;
    text-align: center;
    width: 100%;
    box-shadow: 0px 4px 8px rgba(14, 187, 255, 0.25);
}
.btn-academy.outline{
    background: var(--whitecolor);
    border: 1px solid var(--sub1bordercolor);
    color: var(--sub1color);
}
.btn-danger{
    background: var(--whitecolor);
    border: 1px solid var(--dangercolor);
    color: var(--dangercolor);
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 1rem .6rem;
    position: relative;
    display: block;
    text-align: center;
    width: 100%;
    box-shadow: 0px 4px 8px rgba(234, 67, 53, 0.2);
}
.btn-danger i{
    margin-right: .6rem;
}
.btn-danger.outline{
    background: var(--whitecolor);
    border: 1px solid var(--dangercolor);
    color: var(--dangertxtcolor);
}
.btn-warning{
    background: var(--sub2color);
    border: 1px solid var(--sub2bordercolor);
    color: var(--blackcolor);
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 1rem .6rem;
    position: relative;
    display: block;
    text-align: center;
    width: 100%;
    box-shadow: 0px 4px 8px rgba(250, 200, 0, 0.25);
}
.btn-warning.outline{
    background: var(--whitecolor);
    border: 1px solid var(--sub2bordercolor);
    color: var(--sub2txtcolor);
}
/* =========================================================================================
 *  forms 스타일
 * =========================================================================================*/
.input-box{position:relative;}
.input-box + .input-box{margin-top:.6rem;}
.input-box .small{display:block;color:var(--grey2color);position:relative;margin-top:0.6rem;font-size:.9rem;}
.input-box label{display:block;color:#747880;position:relative;margin-bottom:0.6rem;font-size:1rem;}
.input-box label span{color: #EA4335;}
.input-box input{width: 100%; height:3rem;line-height:1;padding:0.65rem 1rem 0.75rem;border-radius:6px;border:1px solid #ddd;transition:border 0.2s;font-size:0.9rem;background: #fff;box-sizing: border-box;}
.input-box input::placeholder{font-size:0.9rem;color:#ccc;}
.input-box input:focus{border-color:#2196f3;}
.input-box .row{
    display: flex;
}
.input-box .row .btn-primary{
    height:3rem;line-height:1;padding:0.65rem 1rem 0.75rem;border-radius:6px;border:1px solid var(--maincolor);color: var(--maincolor);margin-left: 1rem;white-space: nowrap;transition:border 0.2s;font-size:0.9rem;background: #fff;box-sizing: border-box;
}
.input-box.file{display:flex;}
.input-box.file input{position: relative;
    z-index: 2;
    width: 100%;
    height: calc(1.5em + 1.5rem + 2px);
    margin: 0;
    opacity: 0;}
.input-box.file > .custom-file-label {
    font-weight: 400;
    line-height: 1.5;
    overflow: hidden;
    line-height: 1.8;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    justify-content: flex-start;
    margin-left: 0;
    height: calc(1.5em + 1.5rem + 2px);
    padding: .75rem 1.25rem;
    color: #aaa;
    border: 1px solid #e2e8f0;
    border-radius: .375rem;
    background-color: #fff;
    box-shadow: none;
}
.input-box.file > .custom-file-label::after
{
    line-height: 1.5;

    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;

    display: block;

    height: calc(1.5em + 1.5rem);
    padding: .75rem 1.25rem;

    content: '파일찾기';

    color: #fff;
    border-left: inherit;
    border-radius: 0 .375rem .375rem 0; 
    background-color: #008CC9;
    border:1px solid #008CC9;
}
.input-box.file label{display: inline-flex;align-items: center;justify-content: center;text-align: center;white-space: nowrap;vertical-align: middle;cursor: pointer;text-decoration: none;box-sizing: border-box;-webkit-appearance: none;padding:0.5rem 0.8rem;height:3rem;border-radius:1.7rem;color:#fff;min-width:6rem;margin-left:0.7rem;}
/** checkbox **/
.check-box{display:block;}
.check-box + .check-box{margin-top:15px;}
.check-box label{display:inline-block;position:relative;padding-left:1.8rem;font-size:1.1rem;font-weight: 500;}
.check-box.bold label{font-size: 1.2rem; font-weight: 700;}
.check-box label span{display:block;position:relative;padding-top:.4rem;font-size:.8rem;font-weight: 400;}
.check-box label:before{content:'';position:absolute;top:-.1rem;left:0;width:1.3rem;height:1.3rem;border-radius:50%;transition:all 0.2s;background:#ccc url(../images/ico-check.svg)no-repeat center center;background-size:16px auto;}
.check-box input[type="checkbox"]{display: none;}
.check-box input:checked + label:before{border-color:var(--mainbordercolor);background:var(--maincolor) url(../images/ico-check.svg)no-repeat center center;background-size:16px auto;} 
.check-box input:disabled + label{color:#c4c7cd;}
/** radio **/
.radio-block{display:block;}
.radio-box{position: relative;}
.radio-box + .radio-box{margin-top: 1.2rem;}
.radio-box input[type="radio"] {display: none;}
.radio-box input[type="radio"] + label {
    font-weight: 600;
    font-size: 1.2rem;
}
.radio-box input[type="radio"] + label span {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: -2px 10px 0 0;
    vertical-align: middle;
    cursor: pointer;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid var(--greyborder2color);
    background: var(--whitecolor);
    box-sizing: border-box;
}
.radio-box input[type="radio"]:disabled + label span {
    background: var(--greybordercolor);
}
.radio-box input[type="radio"]:checked + label span {
    background-color: var(--whitecolor);
    border: 1px solid var(--maincolor);
}
.radio-box input[type="radio"]:checked + label span::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--maincolor);
    transition: .2s;
}