﻿/* 로그인 */
.login_area{padding:60px 0 170px 0; width:320px; max-width:500px; margin:0 auto;}   

.login_welcome{text-align:center; line-height:1.15; font-weight:700; font-size:34px; margin-bottom:40px;}     
.login_input{display:block; width:100%; height:48px; border-radius:10px; font-size:18px; margin-bottom:10px; background-position:5% 50%; background-repeat:no-repeat; background-size:24px; background-color:#f7f6f6; padding:0 10px 0 50px;}
.login_input.id{background-image:url(../images/login_icon_1.png);}
.login_input.pw{background-image:url(../images/login_icon_2.png);}

.login_btn{width:100%; height:50px; font-size:20px; border:3px solid #111; color:#111; background-color:rgba(255,255,255,0.9); display:flex; justify-content:center; align-items:center; transition:0.2s;}
.login_btn:hover{background-color:#111; color:#fff;}

.login_check_wrap{display:flex; align-items:center; justify-content:space-between; margin:12px 0 30px 0; font-weight:300; color:#000; padding:0 1%;}
.login_label{display:flex; align-items:center; cursor:pointer;}
.login_check{display:none;}
.login_bullet{border:2px solid #111; width:18px; height:18px; margin-right:8px; margin-bottom:-2px;}
.login_check:checked + .login_bullet{background:url(../images/check_3.png) no-repeat 50%; background-size:cover;}

.login_link{color:#333; margin-right:10px;}

@media all and (min-width:640px){
    .login_area{width:340px;}
}
@media all and (min-width:1024px){
    .login_area{width:350px; padding:70px 0 170px 0;}
    .login_welcome{font-size:40px;}
}
@media all and (min-width:1280px){
    .login_area{width:500px; padding:100px 0 170px 0;}
    .login_welcome{font-size:55px;}

    .login_input{height:60px; margin-bottom:15px; background-position:4% 50%; padding:0 10px 0 55px;}
    .login_btn{width:320px; height:64px; margin:0 auto; font-size:24px;}
    .login_check_wrap{margin:15px 0 35px 0;}
}
@media all and (min-width:1680px){
    .login_area{padding:160px 0 250px 0;}
    .login_welcome{margin-bottom:80px;}
}

/** 약관 **/
.member_title{text-align:center; font-weight:500; margin-bottom:20px; font-size:22px;}

.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){
    .member_title{font-size:24px;}
    
    .provision_container{padding:30px 30px 0 30px;}
    .provision_wrap{height:calc(100% - 75px);}
    .provision_area{font-size:15px; padding:20px;}
}

/* 휴대폰 인증 */
.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; padding:60px 3% 170px 3%; max-width:580px; margin:0 auto;}
.authentication_wrap > div{width:100%;}

.authentication_welcome{text-align:center; font-weight:700; font-size:34px; margin-bottom:40px;}

.authentication_text{line-height:1.4; padding:0 0 12px 0; font-size:16px; color:#333; text-align:center; font-weight:400; margin-top:-10px;}
.authentication_area{background-color:#f5f5f5; padding:20px 18px; color:#111; font-size:15px; border-radius:18px; width:100%; line-height:1.4;}
.authentication_all_wrap{border-bottom:1px solid #d9d9d9; padding-bottom:10px;}
.authentication_area .check_bullet{border:2px solid #ddd; width:22px; height:22px; margin-right:5px;}
.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/radio_2.png);}
.authentication_agree{width:calc(100% - 22px); padding-left:4px;}

.btn_detail{display:inline-block; width:56px; height:26px; line-height:24px; text-align:center; background-color:#fff; color:#333; font-size:13px; margin-left:8px; border-radius:20px; border:1px solid #ddd;}

.authentication_btn{width:100%; height:50px; font-size:20px; border:3px solid #111; color:#111; background-color:rgba(255,255,255,0.9); display:flex; justify-content:center; align-items:center; transition:0.2s; margin:0 auto; margin-top:30px;}
.authentication_btn:hover{background-color:#111; color:#fff;}

@media all and (min-width:480px){
    .authentication_area{padding:25px 20px;}
    .btn_detail{width:58px; margin-left:12px;}

    .authentication_btn{width:320px;}
}
@media all and (min-width:768px){
    .authentication_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;}
}
@media all and (min-width:1024px){
    .authentication_wrap{padding:70px 0 170px 0;}
    .authentication_area{padding:30px 35px;}
    .authentication_welcome{font-size:40px;}
}
@media all and (min-width:1280px){
    .authentication_wrap{padding:100px 0 170px 0;}
    .authentication_welcome{font-size:55px;}

    .authentication_btn{width:320px; height:64px; font-size:24px; margin-top:40px;}
}
@media all and (min-width:1680px){
    .authentication_wrap{padding:160px 0 250px 0;}
    .authentication_welcome{margin-bottom:60px;}
    .authentication_text{padding:0 0 20px 0;}
}

/** 내 정보 - 계정 **/
.account_wrap{padding:3% 2.5%; max-width:1080px; margin:0 auto; position:relative;}
.account_wrap.child{background:none; padding: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; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; margin-bottom:15px;}
.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; background-color:rgba(255,255,255,0.95);}
.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_caption.coupon{padding-left:0; height:auto;}
.account_caption_coupon{display:flex; justify-content:center; align-items:center; width:100%; background-color:#111; color:#fff; border-radius:8px; height:32px; margin:5px 0;}
.account_content.coupon{min-height:auto;}

.account_break{height:10px;}
.account_input{display:block; width:100%; font-size:14px; height:32px; color:#111; padding-left:10px; border-radius:8px; background-color:#f9f9f9;}
.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_text{margin-top:5px;}

.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{margin-top: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_input.coupon{width:calc(100% - 44px); margin-right:10px; max-width:320px;}
.account_btn.coupon{width:34px; background-size:cover;}

.account_content.gender{padding-left:10px;}
.account_content.gender .radio_input:checked + .radio_bullet{background-image:url(../images/radio_2.png);}
.account_content.gender .radio_label{margin-right:30px;}
.account_content.gender .radio_bullet{margin-bottom:-1px;}

.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; background-color:#eee;}
.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;}

li.account_half.none{display:none;}

@media all and (min-width:640px){ 
    .account_wrap.child{padding:4%;}
    
    .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_caption.coupon{height:auto;}
    .account_caption_coupon{width:85%; border-radius:30px; margin:0 auto 0 0;}
    .account_content.coupon{min-height:auto;}
    
    .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{width:110px;}
    .account_select.tel{width:110px;}
    .account_btn.tel_2{width:100px; margin:0 0 0 10px;}
    
    .account_input_text{margin-top:10px;}
}
@media all and (min-width:960px){    
    li.account_half{width:50%;}
    li.account_half.none{display:block;}

    .account_caption{width:145px; padding:0 0 0 25px;}
    .account_content{width:calc(100% - 145px); min-height:34px;}
    .account_caption_coupon{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:120px;}
    .account_select.tel{width:120px;}
    
    .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){
    .account_wrap{padding:5%;}
}
@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_caption_coupon{height:40px;}
    .account_content{width:calc(100% - 165px);}
    .account_input, .account_btn{height:40px;}
    
    .account_input.coupon{width:calc(100% - 52px);}
    .account_btn.coupon{width:42px; background-size:cover;}
}

.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;}

@media all and (min-width:480px){
    .member_btn_1, .member_btn_2{font-size:18px;}
    .member_btn_1.authentication{width:180px;}
}
@media all and (min-width:768px){    
    .member_btn_1, .member_btn_2{width:140px; height:44px;}
}

/** 내 정보 - 아이추가 **/
.profile_change_row.account{display:-webkit-box; display:-ms-flexbox; display:flex; -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; margin:2% 1%;}
.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/radio_2.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;}
*/

.profile_change_lock{position:absolute; border-radius:10px; 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; left:50%; top:50%; width:52px; height:52px; background-color:rgba(0,0,0,0.9); color:#fff; text-align:center; line-height:1.3; text-shadow:0 0 1px rgba(0,0,0,1); font-size:11px; margin:-26px 0 0 -26px;}

@media all and (min-width:768px){
    .profile_change_lock{width:74px; height:60px; font-size:13px; margin:-30px 0 0 -37px;}
}

@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;}
    
    .profile_change_lock{width:80px; height:84px; font-size:14px; margin:-40px 0 0 -42px;}
}
@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:35px 3%;}
}
@media all and (min-width:768px){

}
@media all and (min-width:1024px){
    .account_wrap.my{padding:45px 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:50px 4%;}
}
@media all and (min-width:1680px){
    .account_wrap.my{padding:60px 0;}
}




