/*left menu*/
.left-menu{position:absolute; top:0; left:-200px; min-width:200px; background-color:#45485b; z-index:12; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all ease-in-out; -ms-transition: 0.5s all ease-in-out;}
.left-menu .control{position:absolute; top:0; right:-26px; width:26px; height:110px; background:#2c2f40 url(/resources/images/user/sub/menu-btn.png) no-repeat center; border-top: 1px solid #636675;}
.left-menu .control .control-btn{transform:rotate(180deg); cursor:pointer; display:block; width:100%; height:100%; text-indent:-9999px; overflow:hidden; background:url(/resources/images/user/sub/leftmenu-arrow.png) no-repeat center 20%;}
.left-menu.open{left:0;}
.left-menu.open .control .control-btn{transform:rotate(0deg); background-position: center 80%;}
.left-menu nav .main{border-bottom:1px solid #636675;}
.left-menu nav .main > li > a{position:relative; border-top:1px solid #636675;}
.left-menu nav .main > li{padding-bottom:20px;}
.left-menu nav .main > li.haschild > a:after{transition:all 0.5s; position:absolute; right:25px; top:50%; content:''; display:block; width:15px; height:8px; vertical-align:top;background:url(/resources/images/common/icon-arrow-down01.png) no-repeat center;}
.left-menu nav .main li > a{display:block; color:#111; font-weight:500; font-size:1.2rem; padding:15px 0 15px 20px; color:#fff; font-size:16px;}
.left-menu nav .main li .m-depth02 li{position:relative; z-index:99999;}
.left-menu nav .main li .m-depth02 li a{position:relative; font-size:14px; color:#aaa; padding:5px 0 5px 15px; margin-left:20px; font-weight:300;}
.left-menu nav .main li .m-depth02 li.active a{color:#fff79d;}
.left-menu nav .main li .m-depth02 li a:after{position:absolute; top:3px; left:0; display:block; content:'·'; color:#aaa; font-size:17px;}

/*sub common*/
.sub-container{max-width:1920px; margin:0 auto; overflow:hidden;}
.sub-container .cont{position:relative; border-left:1px solid #e3e3e3; border-right:1px solid #e3e3e3;}
.sub-container .cont .contents-area{min-height:646px; padding:130px 0 160px 0; box-sizing:border-box;}
.sub-container .cont .contents-area .leave-btn{font-size:16px; font-weight:bold; color:#666;}
.sub-container .cont .contents-area.modify .btn-area{clear:both; padding-top:10px;}

/*sub visual*/
.sub-visual-area{overflow:hidden;}
.sub-visual-area .sub-visual{transition:all 2s ease-out; height:180px; background:url(/resources/images/user/sub/sub-visual-img01.jpg) no-repeat center; background-size:cover;}
.sub-visual-area .sub-visual .cont-tit-area{transition:all 2s ease-out;  padding-top:50px; text-align:center;}
.sub-visual-area .sub-visual .cont-tit-area .cont-tit{color:#fff;font-size:30px; font-weight:bold;}
.sub-visual-area .sub-visual .cont-tit-area .locations{color:#fff; font-weight:300; font-size:14px;}
.sub-visual-area .sub-visual:hover{transition:all 2s ease-in; transform:scale(1.1);}
.sub-visual-area .sub-visual:hover .cont-tit-area{transition:all 2s ease-in; transform:scale(0.9);}
.search-open-area{display:none; width:100%;background-color:#45485b; text-align:center;}
.search-open-area .search-btn{cursor:pointer; display:block; width:100%;  padding:10px 0;  position:relative; padding-right:20px; font-size:14px; font-weight:bold; color:#fff;}
.search-open-area .search-btn:after{display:block; position:absolute; left:50%; top:15px; width:8px; height:6px; padding-left:50px; content:''; background:url(/resources/images/common/icon-search-arrow.png) no-repeat center;}

/*sub search*/
.sub-search-area{background-color:#f6f6f6; padding:20px 0;}
.sub-search-area .selc01{width:160px;}
.sub-search-area .inp01{width:100px;}
.sub-search-area .inp02{width:130px;}
.sub-search-area .btn-area .btn{margin-left:2px; width:78px;}

/*modify page*/
.sub-container .cont .contents-area.modify-view .width01{width:340px;}
.sub-container .cont .contents-area.modify-view .width02{width:92px;}
.sub-container .cont .contents-area.modify-view .width03{width:120px;}
.sub-container .cont .contents-area.modify-view .width04{width:175px;}
.sub-container .cont .contents-area.modify-view .phone .field{display:block; margin-right:5px;}
.sub-container .cont .contents-area.modify-view .phone .field.last{margin-right:0;}
.sub-container .cont .contents-area.modify-view .member .field{padding-right:10px;}
.sub-container .cont .contents-area.modify-view .btn-area{margin-top:30px;}

/*board*/
.sub-container .cont .contents-area.board{padding:65px 0 80px 0;}
.sub-container .cont .contents-area.board .btn-area {margin-bottom:15px;}
.sub-container .cont .contents-area.board .btn-area .btn{display:inline-block; padding-left:20px;}
.sub-container .cont .contents-area.board .btn-area .btn:hover{color:#ee4959;}

/*login page*/
html,
body.login{width:100%; height:100%;}
.login-area{width:100%; height:100%; background:url(/resources/images/user/login/login-bg.jpg) no-repeat center; background-size:cover; }
.login-area .login-form{width:700px; margin:0 auto; text-align:center;}
.login-area .login-form .login-tit-area{margin-bottom:95px;}
.login-area .login-form .login-tit-area h2{font-size:44px; font-weight:300;}
.login-area .login-form .login-tit-area p{font-size:28px; font-weight:300;}
.login-area .login-form .field {margin-bottom:5px;}
.login-area .login-form .field input[type="text"],
.login-area .login-form .field input[type="password"]{max-width:270px; width:100%; height:50px;}
.login-area .login-form .field.chk-area{margin:10px auto; text-align:left; max-width:270px; }
.login-area .login-form .btn-area{max-width:270px; width:100%; margin:0 auto;}
.login-area .login-form .btn-area .btn{height:50px; width:100%; line-height:50px; margin-bottom:5px; padding-top:0; padding-bottom:0;}
.login-area .login-form .warning{position:fixed; top:90%; left:0; width:100%; text-align:center; color:#fff; font-size:14px; padding-top:5px;}

@media screen and (max-width:1100px){
    .search-open-area{display:block;}
    .sub-search-area .field{display:block; margin-bottom:10px;}
    .sub-search-area .sub-search{max-width:768px; margin:0 auto;}
    .sub-search-area .selc01{width:100%;}
    .sub-search-area .ln{display:block; float:left; width:4%;}
    .sub-search-area .inp01{width:48%; display:block; float:left; margin-bottom:10px;}
    .sub-search-area .inp02{width:100%;}
    .sub-search-area .sub-search,
    .sub-search-area .btn-area{float:none; text-align:center; padding:10px 0;}
    .sub-search-area .btn-area{width:160px; margin:0 auto;}
    .sub-search-area .btn-area .btn{box-sizing:border-box; margin-left:0; border:1px solid #f8f8f8;} 
}


@media screen and (max-width:1024px){
    .left-menu{display:none;}
    .sub-search-area{display:none;}
    .sub-container{margin-top:80px;}
    .sub-container .cont .contents-area{padding:50px 0; min-height:inherit;}
    .sub-container .cont .contents-area .leave-btn{font-size:14px;}
    .sub-container .cont .contents-area.modify-view .mail .field.last{display:block; margin-top:10px; width:100%;}
    
}

@media screen and (max-width:768px){
    
    .sub-container{margin-top:65px;}
    .sub-container .cont .contents-area.board{padding:10px 0 50px 0;}
    .sub-container .cont .contents-area{padding:10px 0 50px 0; min-height:inherit;}
    .sub-container .cont .contents-area .leave-btn{font-size:13px;}
    .sub-visual-area .sub-visual{height:100px; background:none;}
    .sub-visual-area .sub-visual .cont-tit-area{padding-top:30px;}
    .sub-visual-area .sub-visual .cont-tit-area .cont-tit{font-size:20px; color:#333;}
    .sub-visual-area .sub-visual .cont-tit-area .locations{font-size:12px; color:#666;}
    .sub-container .cont .contents-area.modify-view .width01{width:100%;}
    .sub-container .cont .contents-area.modify-view .width02{width:100%;}
    .sub-container .cont .contents-area.modify-view .width03{width:100%;}
    .sub-container .cont .contents-area.modify-view .width04{width:100%;}
    .sub-container .cont .contents-area.modify-view .select{width:100%; margin-top:10px;}
    .sub-container .cont .contents-area.modify-view label{font-size:13px;}    
    .sub-container .cont .contents-area.modify-view .phone .field{width:32.666%; margin-right:1%;}
    .sub-container .cont .contents-area.modify-view .mail .field.last label{display:block; margin-bottom:5px;}
    .sub-container .cont .contents-area.modify-view .member .field{width:40%; float:left; display:block; margin-bottom:10px;}
    
    .login-area{background-size:cover;}
    .login-area .login-form{width:100%;}
    .login-area .login-form .login-tit-area{margin-bottom:40px;}
    .login-area .login-form .login-tit-area h2{font-size:30px;}
    .login-area .login-form .login-tit-area p{font-size:14px;}
    .login-area .login-form .field input[type="text"],
    .login-area .login-form .field input[type="password"]{max-width:220px; height:40px;}
    .login-area .login-form .field.chk-area{max-width:220px; }
    .login-area .login-form .btn-area{max-width:220px;}
    .login-area .login-form .btn-area .btn{height:40px; line-height:40px;}

    .sub-container .cont .contents-area.board .btn-area{display:none;}
    

}