@import url("common.css");

/*모바일기준(360px)*/
.wrap{padding: 0 5%;position: relative;max-width: 768px;margin: 0 auto;}
section{min-height:calc(100vh - 187px);position:relative;max-width:768px;padding-top:62px;padding-bottom:10px;margin: 0 auto;}
section>.wrap{padding: 20px 5%;}
.mt30{margin-top: 30px !important;}

/*로그인*/
#login section{padding:5% 0;display: flex;align-items: center;}
#login section>.wrap{width: 100%;}
.logo{font-size: 0;line-height: 0;width: 190px;height: 47px;background: url(../img/logo.png)center no-repeat;display: block;margin: 0 auto;background-size:100%;margin-bottom:35px}
#login .btnArea{margin-top: 40px;}
.login_form>div{margin-bottom:8px;position: relative;}
.login_form>div:last-child{margin-bottom: 0;}
.login_form .phone, .login_form .num{display: flex;align-items: flex-start;}
.login_form .phone input, .login_form .num input{width: calc(100% - 113px);}
.login_form .phone button, .login_form .num button{margin:0;height: 40px;font-size: 15px;padding: 11px 16px;margin-left: 3px;width: 110px;vertical-align: bottom;display: block;}

/*서브*/
.top{border-bottom:1px solid #c3c3c3;padding:18px 5%;position: absolute;left:50%;top:0;width: 100%;transform: translateX(-50%);z-index: 300;}
.top>.wrap{max-width: 690px;}
.m_logo{font-size:0;line-height:0;width:43px;height:43px;background:url(../img/logo_m.png)center no-repeat;background-size:100%;position: absolute;left:0;top:50%;margin-top:-21px;z-index: 400;}
.top_title{font-size:20px;color:#000;font-weight:600;text-align: center;position: relative;top: 2px;}

.tableA{border-top: 1px solid #ccc;}
.tableA .tr{display: flex;width: 100%;border-bottom: 1px solid #ccc;}
.tableA .tr p{font-size: 16px;border-right: 1px solid #ccc;padding: 8px 15px;}
.tableA .tr .title{width: 95px;border-left: 1px solid #ccc;}
.tableA .tr .text{width: calc(100% - 95px);text-align: right;}
.tableA .tr .bold{font-weight: 600;}

.img_area{background-color: #ccc;margin-bottom:20px;}
.img_area img{display: block;width: 100%;}

/*레이어팝업*/
/*.pop_layer{position:absolute;left:50%;top:10%;transform:translate(-50%, 0);background-color: #fff;z-index: 310;max-width: 700px;display: none;width:90%;max-height: 70vh;overflow-y: auto;}*/
.pop_layer{position:fixed;left:50%;top:10%;transform:translate(-50%, 0);background-color: #fff;z-index: 310;max-width: 700px;display: none;width:90%;max-height: 80%;overflow-y: auto;}
.pop_layer .inner{padding:20px;height:100%;}
.pop_layer .account_site{width:100%;height:100%;border:none !important;} 
.pop_layer .close_btn{font-size:0;line-height:0;width:20px;height:20px;background: url(../img/close.png)center no-repeat;background-size:100%;position: absolute;right:15px;top:15px}
.pop_layer .title{font-size: 18px;font-weight: 500;margin: 5px 0 10px 0;}
.pop_layer .text{font-size: 15px;}
.pop_layer .black_btn{margin-top: 20px;font-size: 18px;padding: 13px 10px;}
.shadow{position: fixed;left:0;top:0;width: 100%;height: 100%;background:rgba(0,0,0,.5);z-index: 305;display: none;}

#refund_pop .btnArea{margin-bottom:30px;margin-top:10px;}
#refund_pop .btnArea.last{margin-bottom:0}
#refund_pop select{margin-bottom:10px}
.file-select01{width: 180px;}
.file-select02{width: 127px;}
.box{border:1px solid #ccc;padding:15px;}

.titleA{font-size: 20px;font-weight: 600;margin-bottom: 20px;position: relative;padding-bottom: 11px;}
.titleA:before{content: '';width:18px;height:3px;background-color: #60a5bc;position: absolute;left: 0;bottom:0;}
.titleB{font-size: 22px;text-align: center;font-weight: 900;padding: 20px 0;}
.radio_box>div{margin-bottom:5px}
.radio_box>div:last-child{margin-bottom:0}
.radio_box label{font-size: 16px;}
.radio_box input{margin:0 4px 0 0;}
.radio_box textarea{margin-top:5px;display: none;}

.btnArea{margin-top:15px;display: flex;}
.black_btn{font-size:17px;color:#fff;background-color: #60a5bc;padding:12px 20px;text-align: center;width: 100%;}
.black_btn.on{background-color: #60a5bc;}
.black_btn.off{background-color: #bbb;}
.black_btn01{font-size:15px;color:#fff;background-color: #60a5bc;padding:12px 20px;text-align: center;}
.black_btn01.off{background-color: #bbb;}
.black_btn01.red{background-color: #f44336;}

.gray_btn{font-size:20px;color:#fff;background-color: #bbb;padding: 16px 10px;text-align: center;}
.gray_btn_outline{font-size:20px;background-color: #f9f9f9;padding: 16px 10px;text-align: center;border-color: #bbb;border-style: solid;border-width: 1px;}

.btnArea.right{justify-content: flex-end;}
.btnArea .flex{display: flex;}
.btnArea .flex a{margin-right: 5px;}
.btnArea .flex a:last-child{margin-right: 0;}
.btnArea .flex .left{width: 27%;}
.btnArea .flex .right{width: 73%;}

.gray_box{background-color: #f4f4f4;padding:10px;margin-top: 10px;}

.check{margin-top: 8px;text-align: right;font-size: 15px;}

/*0928*/.logout{position: absolute;right: 0;top: -5px;font-size: 12px;padding-top: 23px;background: url(../img/logout.png)center top no-repeat;background-size: 20px;}

.filetype {position: relative;display: inline-block;vertical-align: top;overflow: hidden;width: 100%;text-align: right;}
.filetype input.file-text {position: relative;display: inline-block;margin: 0;width: 100%;z-index: 10;}
.filetype .file-text + .file-btn {cursor: pointer;margin-top: 4px;display: inline-block;}
.filetype .file-select {position: absolute; bottom: 0;right: 0;overflow: hidden;box-sizing: border-box;height: 40px;}
.filetype .file-select #files01 {width: 100%;/*filter: alpha(opacity=0);*/ opacity: 0;padding:0}
input[type=file]{opacity: 0;cursor: pointer;font-size: 0;position: absolute;top:0;left:0;height: 100%;}

@media screen and (max-width:375px){
  section{min-height: calc(100vh - 207px);}
  address span{width: 100%;display: block;text-align: center;margin: 0;}
}

@media screen and (min-width:750px){
  section{min-height:calc(100vh - 219px);padding-top: 90px;}

  .mt30{margin-top: 40px !important;}
  .logo{width: 205px;height: 51px;}
  #login section>.wrap{width: 80%;}
  #login .btnArea {margin-top: 68px;}

  .contents{min-height: calc(100vh - 437px);}
  .top{padding:25px 50px}
  .m_logo{width: 55px;height: 55px;margin-top: -27px;}
  .top_title{font-size:30px;}
  
  .black_btn01{font-size: 20px;}

  .pop_layer .inner{padding: 30px;}
  .pop_layer .close_btn{width:27px;height:27px;right:30px;top:30px}
  .pop_layer .title{font-size: 22px;margin: 5px 0 10px 0;}
  .pop_layer .text{font-size: 18px;}
  .pop_layer .black_btn{font-size: 20px;padding: 17px 10px;}
  
  .tableA .tr p{font-size: 19px;padding: 10px 20px;}
  .tableA .tr .title{width: 190px;}
  .tableA .tr .text{width: calc(100% - 190px);}
  
  .radio_box>div{margin-bottom: 10px;}
  .radio_box label{font-size: 19px;}

  .titleA{font-size:25px;margin-bottom:25px;padding-bottom: 14px;}
  .titleA:before{width:25px;}
  .titleB{font-size: 29px;padding: 20px 0 35px 0;}
  .login_form .phone input, .login_form .num input{width: calc(100% - 161px);}
  .login_form .phone button, .login_form .num button{height: 50px;font-size: 18px;padding: 15px 16px;margin-left: 7px;width: 154px;}
  
  .file-select01{width: 234px;}
  .file-select02{width: 160px;}

  .black_btn{font-size:26px;padding: 20px 10px 24px 10px;}
  .check{margin-top: 10px;font-size: 17px;}
  

  /*0928*/.logout{top:0;font-size: 14px;padding-top: 30px;background-size: 24px;}
}