﻿/** 로그인 **/
.login_body{background-repeat:no-repeat; background-size:cover; background-position:50%; background-attachment:fixed;}
.login_container{height:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.login_wrap{width:80%; margin:0 auto; max-width:480px;}
.login_area{border-radius:15px;}
.login_logo{width:75%; margin:0 auto 25px auto; display:block; max-width:230px;}

.login_input{width:100%; height:48px; background-color:#fff; color:#071b3e; display:block; padding-left:6%; font-weight:300; border-radius:10px; margin-bottom:10px; font-size:18px;}
.login_input::placeholder{color:rgba(7,27,62,0.8);}
.login_btn{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; font-size:22px; background-color:#6566ba; color:#fff; font-weight:500; border-radius:10px; transition:0.3s; border:0; height:48px;}
.login_btn:hover{background-color:#3f3381;}

.check_label.login{color:#ccc; margin-bottom:10px;}
.check_label.login .check_bullet{border-radius:4px;}
.check_label.login .check_input:checked ~ .check_bullet{background-image:url(../images/input_check_indigo.png);}

.login_forgot{display:block; width:100%; text-align:center; color:#ccc; font-size:14px; font-weight:400; padding:10px 0 25px 0;}

.login_sign{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; font-size:22px; background-color:#7ea1d9; color:#fff; font-weight:500; border-radius:10px; transition:0.3s; border:0; height:48px;}      
.login_sign:hover{background-color:#3f3381;}

@media all and (min-width:1080px){
    .login_logo{margin-bottom:35px;}
    .login_input{height:54px; font-size:20px; margin-bottom:15px;}
    .login_btn, .login_sign{height:54px; font-size:24px;}

    .check_label.login{margin-bottom:15px;}
    .login_forgot{font-size:18px; padding:15px 0 30px 0;}
}

/** 휴대폰 인증 **/
.authentication_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%; padding:0 3%; margin:0 auto;}
.authentication_center{width:100%; width:480px;}

.authentication_title{font-size:24px; padding-bottom:25px; text-align:center; color:#071b3e;}
.authentication_title.welcome{color:#fff;}
.member_title{font-size:24px; padding-bottom:20px; text-align:center; color:#071b3e;}

.authentication_text{line-height:1.4; padding:0 0 12px 0; font-size:16px; color:#fff; text-align:center; font-weight:400; margin-top:-10px;}
.authentication_area{background-color:rgba(255,255,255,0.9); padding:20px 18px; color:#000; font-size:15px; border-radius:18px; width:100%; line-height:1.4;}
.authentication_all_wrap{border-bottom:1px solid #d9d9d9; padding-bottom:10px;}
.authentication_all_wrap .break{width:calc(100% - 36px);}
.authentication_area .check_bullet{border:2px solid rgba(7,27,62,0.85); width:22px; height:22px;}
.authentication_box{display:-webkit-box; display:-ms-flexbox; display:flex; margin-top:10px;}
.authentication_area .check_bullet{border-radius:50%;}
.authentication_area .check_input:checked + .check_bullet{background-image:url(../images/input_check_indigo.png);}

.btn_detail{display:inline-block; width:56px; height:26px; line-height:24px; text-align:center; background-color:#fff; color:#000; font-size:13px; margin-left:8px; border-radius:20px; border:1px solid rgba(7,27,62,0.6);}

.member_btn_wrap{padding-top:20px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center;}
.member_btn_1, .member_btn_2{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width:120px; height:42px; border-radius:10px; transition:0.2s;}
.member_btn_1{background-color:#071b3e; color:#fff;}
.member_btn_2{background-color:#666; color:#fff;}
.member_btn_1:hover{background-color:#073097; color:#fff;}
.member_btn_2:hover{background-color:#333; color:#fff;}

.member_btn_1.authentication{width:160px; color:#fff; background-color:#3260b1; font-weight:500;}

@media all and (min-width:480px){
    .authentication_area{padding:25px 20px;}
    .authentication_text .break{display:inline;}
    .btn_detail{width:58px; margin-left:12px;}
    
    .member_btn_1, .member_btn_2{font-size:18px;}
    .member_btn_1.authentication{width:180px;}
}
@media all and (min-width:768px){    
    .popup_title.welcome{font-size:27px; padding-bottom:25px;}
    
    .authentication_text{padding:0 0 15px 0; font-size:17px;}
    .authentication_area{padding:25px 30px; font-size:16px;}
    .authentication_all_wrap{padding-bottom:12px;}
    .authentication_area .check_bullet{width:24px; height:24px;}
    .authentication_box{margin-top:12px;}

    .authentication_btn_wrap{padding-top:25px; text-align:center;}
    .btn_violet.authentication{width:190px;}
    .btn_gray.authentication{width:130px;}
    
    .member_btn_1, .member_btn_2{width:140px; height:44px;}
}
@media all and (min-width:962px){  
    .authentication_center{background-color:rgba(255,255,255,0.9); border-radius:30px; padding:30px 60px 35px 60px; width:640px;}
    .authentication_title.welcome{color:#071b3e;}
    .authentication_text{color:#666;}
}
@media all and (min-width:1280px){
    .authentication_center{margin-top:50px;}
}
@media all and (min-width:1680px){
    .authentication_center{padding:35px 80px 40px 80px; width:680px;}
    .authentication_title.welcome{font-size:30px;}
    .authentication_area{margin:15px 0;}
}

/** 약관 **/
.provision_container{padding:20px 20px 0 20px; height:100%;}
.provision_wrap{height:calc(100% - 70px);}
.provision_area{padding:15px; border:1px solid #ccc; overflow:auto; height:100%; color:#666; line-height:1.6; margin-bottom:20px; text-align:justify; word-break:break-all; background-color:#fafafa; font-size:14px;}
.provision_area h4{font-size:16px; padding:15px 0 0 0; color:#333;}
.provision_area b{font-size:15px; padding:10px 0 5px 0; color:#444; display:block;}

@media all and (min-width:640px){
    .provision_container{padding:25px 25px 0 25px;}
    .provision_wrap{height:calc(100% - 75px);}
    .provision_area{font-size:15px; padding:20px;}
}


/** 내 정보 - 계정 **/
.account_wrap{padding:2.5% 2.5%; max-width:1080px; margin:0 auto; background-color:rgba(255,255,255,0.6);}
.account_wrap.child{background:none; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%; padding:0 2.5%;}
.account_title_big{text-align:center; font-weight:500; padding-bottom:20px;}

.account_title_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; margin-bottom:15px;}
.account_title_wrap{-webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
.account_title{width:132px; height:32px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; background-color:#071b3e; color:#fff; font-size:16px; font-weight:500; border-radius:30px; padding-bottom:2px;}
.account_title_guide{margin-left:15px; color:#888; font-size:15px;}
.account_title_star{color:#e91818; font-weight:500; vertical-align:-3px;}

.account_table{display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; border-top:2px solid #071b3e; font-size:15px;}
.account_table:first-of-type{margin-bottom:30px;}
.account_table li{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; width:100%; border-bottom:1px solid #ccc; padding:5px 0;}
.account_caption{width:100%; height:32px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; font-weight:500; padding:0 0 4px 10px;}
.account_star{color:#e91818; font-weight:500; margin:0 0 -5px 10px;}
.account_content{width:100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; min-height:40px;}

.account_break{height:10px;}
.account_input{display:block; width:100%; font-size:14px; height:32px; color:#414141; padding-left:10px; border-radius:8px;}
.account_select{width:100%; height:32px; color:#414141; font-size:14px; text-align:center; border-radius:8px;}
.account_select.small{width:48px; margin-left:10px;}
.account_input::placeholder{color:#7d7c7c;}
.account_break{border-bottom:1px dotted #ddd; margin-bottom:10px;}

.account_input.gray{ background-color: #f7f7f7;}
.account_select.gray{ background-color: #f7f7f7;}

.account_input.id{width:calc(100% - 100px); margin-right:10px;}
.account_btn.id{width:90px;}
.account_input.mail{width:30.5%;}
.account_select.mail{width:30%; margin-left:5px;}
.account_btn.mail{width:90px; margin-top:6px;}
.account_input.tel{width:30%;}
.account_select.tel{width:30%;}
.account_input.tel_2{width:21%;}
.account_select.tel_2{width:20%;}
.account_btn.tel_2{width:80px; margin-left:10px;}
.account_space{padding:0 5px;}
.account_select.region{width:150px; padding:0;}
.account_input.zip{width:150px; margin-right:10px;}
.account_input.add{margin:6px 0;}
.account_select.class{width:200px;}

.account_content.gender{padding-left:10px;}
.account_content.gender .radio_input:checked + .radio_bullet{background-image:url(../images/input_radio_indigo.png);}

.account_class_btn{width:50px; height:32px; background:url(../images/account_set.png) no-repeat 50%; background-color:#888; border-radius:30px; margin-left:10px;}

.account_child_btns{display:-webkit-box; display:-ms-flexbox; display:flex;}
.account_child_btn{background-position:50% 50%; background-repeat:no-repeat; background-size:66%; background-color:#1755b1; width:32px; height:32px; border-radius:8px; margin-left:5px; transition:0.2s;}
.account_child_btn:hover{background-color:#071b3e;}

.account_profile_photo{width:120px; height:120px; background-image:url(../images/profile_default.png); background-repeat:no-repeat; background-position:50%; background-size:cover; background-color:#f9e0b8; border-radius:40%;}
.account_profile_btns{line-height:1.8; padding-left:30px;}
.account_profile_btn{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width:130px; height:36px; border-radius:30px; border:1px solid #a6a6a6; background-color:#fff; color:#333; font-size:16px; padding-bottom:1px; margin-top:20px;}

.account_btns{padding:25px 0 0 0; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center;}
.account_btn{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; color:#fff; background-color:#777; width:110px; height:32px; border-radius:8px; font-size:15px; transition:0.2s;}
.account_btn:hover{background-color:#333; text-decoration:none;}

.account_table_child{border-top:2px solid #071b3e;}
.account_table_child > li{border-bottom:1px solid #ccc;}
.account_child_info{width:100%; border-collapse:collapse;}
.account_child_info th{width:100px; padding:8px 0;}
.account_child_character{border-radius:25px; width:100%; display:block;}
.account_child_profile{padding-left:25px; line-height:1.8; color:#000; font-size:15px; font-weight:400;}
.account_child_set{text-align:right; vertical-align:top; padding-top:8px;}
.account_child_set_btn{display:inline-block; width:36px; height:36px; border-radius:8px; background:url(../images/set_white.png) no-repeat 50%; background-size:66%; background-color:#1755b1; transition:0.2s;}
.account_child_set_btn:hover{background-color:#071b3e;}

@media all and (min-width:640px){ 
    .account_wrap.child{padding:0 6%;}
    
    .account_table li{padding:10px 0;}
    .account_caption{width:155px; height:auto; padding:0 0 0 20px;}
    .account_content{width:calc(100% - 155px); min-height:32px;}
    
    .account_input.mail{width:24%;}
    .account_select.mail{width:23%; margin-left:5px;}
    .account_btn.mail{width:90px; margin:0 0 0 10px;}
}
@media all and (min-width:768px){ 
    .account_table_child{display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;}
    .account_table_child .account_half{width:48%;}
    
    .account_input.tel_2{width:100px;}
    .account_select.tel_2{width:100px;}
    .account_btn.tel_2{width:100px;}
}
@media all and (min-width:960px){    
    li.account_half{width:50%;}

    .account_caption{width:145px; padding:0 0 0 25px;}
    .account_content{width:calc(100% - 145px); min-height:34px;}
    
    .account_input{height:34px;}
    .account_select{height:34px;}
    .account_btn{height:34px;}
    .account_class_btn{width:54px; height:34px;}
    
    .account_input.mail{width:140px;}
    .account_select.mail{width:140px; margin-left:5px;}
    .account_input.tel{width:30%;}
    .account_select.tel{width:29%;}
    
    .account_child_profile{padding-left:35px; font-size:16px;}
    .account_child_info th{padding:12px 0;}
    .account_child_set{padding-top:12px;}
    .account_child_set_btn{width:40px; height:40px;}
}
@media all and (min-width:1024px){

}
@media all and (min-width:1080px){
    .account_title{width:150px; height:40px; font-size:18px; padding-bottom:2px;}
    .account_child_btn{width:40px; height:40px; margin-left:10px;}
    
    .account_table li{padding:12px 0;}
    
    .account_table:first-of-type{margin-bottom:40px;}
    .account_caption{width:155px; padding:0 0 0 30px;}
    .account_content{width:calc(100% - 155px);}
    .account_input.add{margin:10px 0;}
    
    .account_child_profile{padding-left:45px;}
    
    .account_btns{padding:35px 0 0 0;}
}
@media all and (min-width:1280px){    
    .account_wrap{border-radius:30px;}
    
    .account_caption{width:160px; padding:0 0 0 40px;}
    .account_content{width:calc(100% - 165px);}
}

/** 내 정보 - 아이추가 **/
.profile_change_row.account{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-lines:multiple; -moz-box-lines:multiple; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; position:relative; padding:0; width:100%;}

.profile_change_label{width:18%; cursor:pointer;}
.profile_change_radio{display:none;}
.profile_change_bullet{display:block; width:28px; height:28px; border:2px solid #ebebeb; margin:0 auto 10px auto; border-radius:50%; background-color:#fff;}
.profile_change_radio:checked + .profile_change_bullet{background:url(../images/input_radio_indigo.png) no-repeat center; background-size:cover;}
.profile_change_photo{padding-top:109.22%; background-repeat:no-repeat; background-position:center; background-size:cover; position:relative; border-radius:20px; background-color:#ededed;}

.profile_change_btn_wrap{text-align:center; position:fixed; bottom:0; padding-bottom:20px; width:100%;}
.profile_change_photo_btn{position:absolute; width:39px; left:50%; top:50%; margin:-25px 0 0 -19.5px;}

.profile_change_lock{padding-top:109.22%; position:relative; border-radius:20px; background-color:#ededed;}
.profile_change_lock .lock{position:absolute; left:50%; top:50%; width:32px; margin:-20px 0 0 -16px;}

@media all and (min-width:960px){
    .popup_profile_change_wrap{padding:40px 35px 25px 35px;}
    .popup_profile_change_title{font-size:30px; padding-bottom:30px;}
    .profile_change_name{height:54px; padding-left:30px; font-size:22px;}
    .profile_change_list{top:155px;}
    .profile_change_lock .lock{width:39px; height:49px; margin:-25px 0 0 -19.5px;}
}
@media all and (min-width:1200px){
    
}

/** 마이페이지 **/
.my_bg{background:url(../images/obw_bg.jpg) no-repeat 50% fixed; background-size:cover;}

.my_tabs{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; margin-bottom:15px;}
.my_tab{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; width:140px; height:42px; background-color:#071b3e; color:#fff; border-radius:30px; font-size:18px; margin:0 5px; padding-bottom:2px;}
.my_tab:hover{background-color:#fff; border:2px solid #071b3e; color:#071b3e; opacity:0.85;}
.my_tab.active{background-color:#fff; border:2px solid #071b3e; color:#071b3e;}

.my_wrap{padding:70px 0 0 0;}
.my_area{max-width:1080px; margin:0 auto;}

.account_wrap.my{padding:25px 3%;}

@media all and (min-width:480px) and (orientation: landscape){

}
@media all and (min-width:640px){
    .account_wrap.my{padding:30px 3%;}
}
@media all and (min-width:768px){

}
@media all and (min-width:1024px){
    .account_wrap.my{padding:35px 3%;}
}
@media all and (min-width:1280px){
    .my_wrap{padding:100px 0 30px 0;}
    .my_tabs{margin-bottom:20px;}
    .my_tab{width:180px; height:50px; font-size:22px; margin:0 10px;}
}
@media all and (min-width:1440px){
    .my_wrap{padding:110px 0 50px 0;}
    .account_wrap.my{padding:40px 4%;}
}





