@charset "utf-8";

body{width:100%;background-color:#f6fbfa}
#wrap{/*min-height:400px;*/height: 100%}
.fixed{overflow:hidden}
.fixed #wrap{position:fixed;width:100%;overflow:hidden}
.dim{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);z-index:1000}

.login-wrap{padding:96px 36px;}
.login-logo{width:200px;margin:0 auto 36px;}
.login-logo img{}
.login-form{}
.login-form [type="text"],.login-form [type="password"]{}
.login-form .form-item{}
.login-form .form-item + .form-item{margin-top:8px;}
.login-enter{}
.login-enter button{width:100%;height:52px;margin-top:16px;border-radius:12px;background-color:#11ba84;font-weight:900;font-size:16px;text-align:center;color:#ffffff;}
.login-link{margin-top:37px;font-size:0;text-align:center;}
.login-link a{display:inline-block;margin:0 18px;font-size:14px;line-height:1.43;color:#007f32;text-decoration:underline;}

/* transform :skew */
#header,#container,.login-wrap,.sub-head,.sub-body,.fixed-button button,.fixed-message div{transform:skew(-0.03deg);}

/* 서브헤더 */
#header{position:relative;height:116px;}
.main-wrap #header{height:92px;}
#header > div{position:absolute;top:50px;}
#header > div a{display:block;width:24px;height:24px;background-repeat:no-repeat;background-position:0 0;background-size:100% 100%;text-indent:-9999px;font-size:0;}
#header .head-home{left:16px;}
#header .head-home a{background-image:url(../images/common/head_ico_home@2x.png)}
#header .head-setting{left:64px;}
#header .head-setting a{background-image:url(../images/common/head_ico_setting@2x.png)}

#header .head-back{left:72px;}
#header .head-back a{background-image:url(../images/common/head_ico_back@2x.png)}
#header .head-card{right:64px;}
#header .head-card a{background-image:url(../images/common/head_ico_card@2x.png)}
#header .head-logout{right:16px;}
#header .head-logout a{background-image:url(../images/common/head_ico_logout@2x.png)}
#header .head-title{position:absolute;top:44px;left:108px;font-size:24px;font-weight:900;line-height:36px;color:#1e1e1e;}

#container{padding:0 16px 16px;}

/* 이용가능 게이트 */
.user-text{
    margin-bottom:12px;
    font-size:24px;
    font-weight:900;
    line-height:1.5;
    color:#1e1e1e;
}
.gate-title{
    margin-bottom:24px;
    font-size:14px;
    line-height:1.43;
    color:#1e1e1e;}
.gate-list{
    position:relative;
    margin:0 -8px;
}
.gate-list::after{
    display:block;
    clear:both;
    content:'';
}

.gate-list .gate-column{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width:100%;
    padding:0 8px;
}
.gate-list .gate-item{
    position:relative;
    width: 49.5%;
    padding:24px 16px 56px;
    margin-top: 12px;
    border-radius:24px;
    border:solid 1px #f3f3f3;
    background-color:#ffffff;
    height: 181px;
}

.gate-list .gate-item.show{
    height: 330px;
}

.gate-list .gate-item .icon{
    margin-bottom:24px;
}
.gate-list .gate-item .icon img{
    width:48px;
}
.gate-list .gate-item .text{
    padding-bottom:8px;
    font-size:16px;
    font-weight:700;
    line-height:1.25;
    color:#3b3b3b;}
.gate-list .gate-item .arrow{
    position:absolute;
    bottom:16px;
    left:50%;
    margin-left:-8px;
    transition:all .3s;}
.gate-list .gate-item .arrow a{
    display:block;
    width:24px;
    height:24px;
    background:url(../images/common/gate_arrow@2x.png) no-repeat 0 0 / 24px 24px;
    text-indent:-9999px;font-size:0;}
.gate-list .gate-item.show .arrow{
    transform:rotate(180deg)
}

.gate-list .gate-item .btn{
    display:none;
    margin-top:16px;
}
.gate-list .gate-item .btn a{
    display:block;
    height:40px;
    line-height:36px;
    border-radius:12px;
    border:solid 2px #11ba84;
    background-color:#ffffff;
    font-size:14px;
    font-weight:700;
    text-align:center;
    color:#11ba84;}
.gate-list .gate-item .btn a + a{
    margin-top:6px;
}
.gate-list .gate-item .btn a.on{
    background-color:#11ba84;
    color:#ffffff;
}

/* 설정 */
.setting-list{position:relative;margin:0 -4px 24px}
.setting-list::after{display:block;clear:both;content:'';}
.setting-list li{float:left;width:33.33%;padding:0 4px;}
.setting-list li a{position:relative;display:block;padding:24px 0 20px;border-radius:24px;border:solid 1px #f3f3f3;background-color:#ffffff;font-size:0;text-align:center;}
.setting-list li a i{display:block;width:48px;height:48px;margin:0 auto 8px;}
.setting-list li a i img{width:100%;}
.setting-list li a b{font-size:16px;font-weight:700;color:#3b3b3b;}

.setting-data{margin-top:24px;}
.setting-data dt{margin-bottom:6px;font-size:14px;font-weight:700;line-height:1.43;color:#1e1e1e;}
.setting-data dd{font-size:14px;line-height:1.43;color:#1e1e1e;}

/* 서브헤더 */
.sub-head{position:relative;height:116px;padding:44px 24px 0;}
.sub-head .sub-back{position:absolute;top:50px;left:24px;}
.sub-head .sub-back button{width:24px;height:24px;background:url(../images/common/sub_btn_back@2x.png) no-repeat 0 0 / 100% 100%;}
.sub-head .sub-title{padding-left:36px;font-size:24px;font-weight:900;line-height:1.5;color:#1e1e1e;}
.sub-body{position:relative;padding:0 24px}

.scroll-check{padding-bottom:12px;}

.form-area{}
.form-data{}
.form-data dt{margin-bottom:6px;font-size:14px;line-height:1.43;color:#1e1e1e;}
.form-data dd,
.form-data dd + dt,
.form-data dt + dt{margin-top:24px}
.form-data dt + dd{margin-top:0;}
.form-data button{width:100%;border-radius:12px;}
.form-data button.border{border:solid 2px #11ba84;background-color:#ffffff;line-height:48px;font-size:16px;font-weight:900;color:#11ba84;}


.layout-form{}
.layout-form .row{position:relative;clear:both;padding-left:88px;}
.layout-form .row.full{padding-left:0;}
.layout-form .row::after{display:block;clear:both;content:'';}
.layout-form .row + .row{margin-top:16px}
.layout-form .row-tit{position:absolute;top:0;left:0;width:88px;font-size:13px;line-height:44px;color:#1e1e1e;}
.layout-form button{width:100%;border-radius:12px;}
.layout-form button.border{border:solid 2px #11ba84;background-color:#ffffff;line-height:40px;font-size:16px;font-weight:900;color:#11ba84;}



.form-item + .form-item{margin-top:12px;}
.form-item-alert{margin-top:8px;font-size:12px;line-height:1.33;color:#ff4646;}

.form-item-checkbtn::after{display:block;clear:both;content:'';}
.form-item-checkbtn input,.form-item-checkbtn button{float:left;}
.form-item-checkbtn input{width:68%;}
.form-item-checkbtn button{width:30%;float:right;}

.form-item-btn::after{display:block;clear:both;content:'';}
.form-item-btn input,.form-item-btn button{float:left;}
.form-item-btn input{width:68%;}
.form-item-btn button{width:30%;float:right;}

.form-item-pw::after{display:block;clear:both;content:'';}
.form-item-pw input,.form-item-pw p{float:left;}
.form-item-pw input{width:45%;}
.form-item-pw p{width:55%;padding-left:8px;font-size:13px;line-height:44px;color:#1e1e1e;}

.form-item-days::after{display:block;clear:both;content:'';}
.form-item-days input,.form-item-days .dash{float:left;}
.form-item-days input{width:46%;}
.form-item-days .dash{width:8%;}

.form-item-time::after{display:block;clear:both;content:'';}
.form-item-time select{width:48%;float:left;}
.form-item-time select + select{float:right;}

.form-item-checks{}
.form-item-checks::after{display:block;clear:both;content:'';}
.form-item-checks > li{float:left;width:25%;}
.form-item-checks > li:nth-child(n+5){margin-top:6px;}

.form-info{margin-top:36px;padding:18px 16px;border-radius:24px;border:solid 1px #f3f3f3;background-color:#ffffff;}
.form-info-item{position:relative;padding-right:80px;}
.form-info-item + .form-info-item{margin-top:16px;}
.form-info-item p{font-size: 12px;font-weight:900;line-height: 1.67;color: #898989;}
.form-info-item p b{display:block;font-size: 14px;font-weight:700;line-height: 1.43;color: #1e1e1e;}
.form-info-item p + p{margin-top:4px;}
.form-info-item a{display:block;position:absolute;top:50%;right:0;margin-top:-20px;width:80px;height:40px;line-height:36px;border-radius:12px;border:solid 2px #d0d0d0;background-color:#ffffff; font-size:14px;font-weight:900;text-align:center;color:#adadad;}
.form-info-btn{margin-top:16px;}
.form-info-btn a{display:inline-block;width:120px;height:40px;line-height:36px;border-radius:12px;border:solid 2px #d0d0d0;background-color:#ffffff; font-size:14px;font-weight:900;text-align:center;color:#adadad;}

/* 결제카드관리 */
.card-title{margin-bottom:12px;font-size:14px;line-height:1.43;color:#1e1e1e;}
.card-info{position:relative;height:180px;margin-bottom:12px;padding:24px 24px 28px;border-radius:12px;background:linear-gradient(240deg,  rgba(32,205,149,1) 0%,rgba(32,205,149,1) 50%,rgba(59,189,162,1) 100%);font-size:14px;line-height:1.43;color:#ffffff;}
.card-info .message{}
.card-info .message .text{float:left;}
.card-info .message .state{float:right;padding-left:20px;background:url(../images/common/card_ico_check@2x.png) no-repeat 0 50% / 16px 16px;}
.card-info .number{position:absolute;left:24px;bottom:58px;font-size:16px;font-weight:900;line-height:1.25;color:#ffffff;}
.card-info .period{position:absolute;left:24px;bottom:28px;font-weight:900}

.card-btn{position:relative;margin:0 -4px;}
.card-btn::after{display:block;clear:both;content:'';}
.card-btn > li{width:50%;float:left;padding:0 4px;}
.card-btn > li a{display:block;height:40px;line-height:36px;border-radius:12px;border:solid 2px #11ba84;background-color:#ffffff; font-size:14px;font-weight:900;text-align:center;color:#11ba84;}
.card-btn > li:last-child a{border-color:#d0d0d0;color:#adadad;}

/* 하단 고정버튼 */
.fixed-button{position:fixed;bottom:0;left:0;width:100%;}
.fixed-button::after{display:block;clear:both;content:'';}
.fixed-button button{display:block;width:100%;height:52px;line-height:52px;background-color:#cacaca;font-weight:900;font-size:16px;text-align:center;color:#ffffff;}
.fixed-button button.enter{background-color:#11ba84;}

.fixed-button button .ico{display:inline-block;margin-left:4px;vertical-align:middle}
.fixed-button button.check .ico{width:16px;height:16px;background:url(../images/common/agree_btn_check@2x.png) no-repeat 50% 50% / 16px 16px;}
.fixed-button button.plus{background-color:#013b90;}
.fixed-button button.plus .ico{width:16px;height:16px;background:url(../images/common/fixed_btn_plus@2x.png) no-repeat 50% 50% / 16px 16px;}
.fixed-button button.submit{background-color:#013b90;}
.fixed-button.type-2n button{float:left;width:34%;}
.fixed-button.type-2n button + button{width:66%;background-color:#013b90;}

.fixed-message{position:fixed;bottom:0;left:0;width:100%;background-color:#f6fbfa;}
.fixed-message div{padding:24px 10px 36px;font-size:14px;line-height:1.43;text-align:center;color:#ff3e3e;text-align:center;}

/* 스크롤영역 */
.scroll-area{position:relative;}
.scroll-area textarea{height:100%;overflow-y:auto;padding:16px;border-radius:12px;border:solid 1px #dfdfdf;background-color:#ffffff;font-size:14px;line-height:1.43;color:#1e1e1e;}

/* 레이어팝업 */
.modal-wrap{position:fixed;left:0;top:0;width:100%;height:100%;padding:20px 0;background:rgba(0, 0, 0, 0.6);opacity:0;visibility:hidden;transform:scale(1.1);transition:all .2s ease;z-index:1000;}
.modal-wrap .modal-content{position:absolute;top:50%;left:50%;width:360px;max-width:90%;max-height:90%;margin:0 auto;border-radius:12px;box-shadow:0 4px 12px 0 rgba(0, 0, 0, 0.3);background-color:#ffffff;overflow-y:auto;overflow-x:visible;text-align:center;transform:translate(-50%,-50%)}
.modal-wrap .modal-content .message,.modal-wrap .modal-content .modal-form,.modal-wrap .modal-content .modal-button{transform:skew(-0.03deg);}
.modal-wrap .modal-content .message{padding:36px 10px;text-align:center; font-size:14px;line-height:1.43;color:#1e1e1e;}
.modal-wrap .modal-close{position:absolute;top:28px;right:20px;width:24px;height:24px;padding:0;line-height:1;cursor:pointer;background:url(../images/popup/modal_close.png) no-repeat 50% 50% / 100% 100%;text-indent:-9999px;}
.modal-wrap .modal-button{border-top:1px solid #dbdbdb;}
.modal-wrap .modal-button::after{display:block;clear:both;content:'';}
.modal-wrap .modal-button button{width:100%;height:52px;background-color:#fff;font-size:14px;font-weight:900;color:#1e1e1e;}
.modal-wrap ul.modal-button li{width:50%;float:left;}
.modal-wrap ul.modal-button li + li button{border-left:1px solid #dbdbdb;color:#11ba84;}


.modal-form{padding:24px 16px 36px;text-align:left;}
.modal-form .row{position:relative;clear:both;padding-left:72px;}
.modal-form .row.full{padding-left:0;}
.modal-form .row.short{padding-left:56px;}
.modal-form .row.short .row-tit{width:56px};
.modal-form .row::after{display:block;clear:both;content:'';}
.modal-form .row + .row{margin-top:16px}
.modal-form .row-tit{position:absolute;top:0;left:0;width:72px;font-size:13px;line-height:44px;color:#1e1e1e;}
.modal-form button{width:100%;border-radius:12px;}
.modal-form button.border{border:solid 2px #11ba84;background-color:#ffffff;line-height:40px;font-size:16px;font-weight:900;color:#11ba84;}


.modal-wrap .modal-form .tit{clear:both;font-size:14px;line-height:44px;color:#1e1e1e;}
.modal-wrap .modal-form .info{}
.modal-wrap .modal-form .w22{width:22%;}
.modal-wrap .modal-form .w22 + .info{width:78%;}
.modal-wrap .modal-form .w18{width:18%;}
.modal-wrap .modal-form .w18 + .info{width:82%;}

.modal-wrap .modal-form .modal-data{padding:0 0 16px;}
.modal-wrap .modal-data{padding:24px 16px 36px;text-align:left;}
.modal-wrap .modal-data dt{margin-bottom:6px;font-size:14px;line-height:1.43;color:#1e1e1e;}
.modal-wrap .modal-data dd,
.modal-wrap .modal-data dd + dt{margin-top:24px}
.modal-wrap .modal-data dt + dd{margin-top:0;}

.modal-form-days::after{display:block;clear:both;content:'';}
.modal-form-days input,.modal-form-days .dash{float:left;}
.modal-form-days input{width:45%;}
.modal-form-days .dash{width:10%;}

.modal-form-time::after{display:block;clear:both;content:'';}
.modal-form-time select{width:48%;float:left;}
.modal-form-time select + select{float:right;}

.modal-form-checks{}
.modal-form-checks::after{display:block;clear:both;content:'';}
.modal-form-checks > li{float:left;width:20%;}
.modal-form-checks > li:nth-child(n+6){margin-top:6px;}

.modal-wrap.active{opacity:1;visibility:visible;transform:scale(1.0);transition:visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;}
body.show-modal{overflow:hidden;}

.tel img {
    width: 20px;
    margin-left: 8px;
}

footer {
    height: 135px;margin: 20px;text-align: center;
}

footer p{
    font-size: 11px;
}

footer .term{
    padding-bottom: 10px;
    font-size: 12px;
}