@charset "utf-8";
/*************************************************************************
* @ 서비스명   : commonui
* @ 파일명     : /css/commonui.css
* @ 페이지설명  : commonui.css
**************************************************************************/


.header{position: fixed;width:100%;top:0;background:#fff;z-index:999;border-bottom:1px solid#f8f8f8;}
.header .fixed{display:flex;justify-content: space-between;align-items: center;max-width:1240px;margin:0 auto;height:80px;}
.header .fixed .left{display:flex;align-items: center;gap:50px;}
.header .fixed .left .logo{font-size:25px;font-weight:600;}
.header .fixed .left .category{font-size:16px;}
.header .fixed .right{display:flex;align-items: center;gap:30px;}
.header .fixed .right .before{display:flex;align-items: center;gap:30px;}
.header .fixed .right .before .menu{font-size:15px;color:#515151;}
.header .fixed .right .after{display:flex;align-items: center;gap:30px;}
.header .fixed .right .after .menu{font-size:15px;color:#515151;}
.header .fixed .right .mypage{font-size:15px;color:#fff;background:#1e2a38;border-radius:3px;padding:7px 18px;}
.header-done{height:80px;}

.bottom{background:#f0f2f5;}
.bottom .layout{max-width:1240px;margin:0 auto;padding:50px 0px;}
.bottom .layout .line{display:flex;justify-content: space-between;}
.bottom .layout .line .left{font-size:22px;font-weight:600;}
.bottom .layout .line .right{display:flex;gap:50px;}
.bottom .layout .line .right .menu{font-size:15px;}
.bottom .layout .info{margin-top:30px;}
.bottom .layout .info p{display:flex;gap:30px;margin-top:5px;}
.bottom .layout .info p span{font-size:15px;}
.bottom .layout .copy{font-size:14px;margin-top:30px;}

.d-header{display:none}
.d-modal{display:none}

.etc .layout{max-width:1240px;margin:0 auto;padding:50px 0px;}
.etc .layout h1{margin-bottom:30px;}
.etc .layout p{font-size:14px;}


/* tablet */
@media all and (max-width:1240px) {

.header{display:none;}
.header-done{display:none;}

.bottom .layout{max-width:100%;margin:0px;padding:50px 20px;}
.bottom .layout .line{flex-direction:column;gap:20px;}
.bottom .layout .line .left{font-size:20px}
.bottom .layout .line .right{flex-direction:column;gap:10px;}
.bottom .layout .info p{flex-direction:column;gap:10px;margin-top:10px;}

.d-header{display:block;background:#fff;padding:10px 20px;}
.d-header .top{display:flex;justify-content:space-between;align-items:center;}
.d-header .top .logo{font-size:20px;font-weight:600;}
.d-header .top .modal_btn{display: block;}
.d-header .top .modal_btn:hover{box-shadow: 3px 4px 11px 0px #00000040;}
.d-header .top .modal_btn img{width:17px;height:15px;object-fit:cover;}
.d-modal {display: none; /* 평소에는 보이지 않도록 */position: fixed; /* fixed로 변경 */top: 0;left: 0;width: 100%;height: 100vh;overflow: hidden;background: rgba(0, 0, 0, 0.5);z-index: 99999;}
.d-modal.on {display: block;overflow:auto;}
.d-modal .modal_popup {position: absolute;height:100%;width:100%;padding:10px 20px 20px 20px;background:#fff;overflow: auto; /* 팝업 내 스크롤 허용 */}
.d-modal .modal_popup .top{display:flex;justify-content:space-between;font-size:17px;}
.d-modal .modal_popup .close_btn {display: block;color:#fff;cursor: pointer;transition: box-shadow 0.2s;}body.modal-open, html.modal-open {overflow: hidden;}
.d-modal .modal_popup .close_btn{position:absolute;top:12px;right:40px;}
.d-modal .modal_popup .close_btn:before{content: "";display: inline-block;width:20px;height:1px;background: #000;position: absolute;transform:rotate(45deg);left: 3px;top: 12px;}
.d-modal .modal_popup .close_btn:after{content: "";display: inline-block;width:20px;height:1px;background: #000;position: absolute;transform:rotate(-45deg);left: 3px;top: 12px;}
.d-modal .modal_popup .close_btn img{width:15px;height:13px;object-fit:cover;}
.d-modal .modal_popup .login{margin-top:30px;}
.d-modal .modal_popup .login .text_01{font-size:15px;text-align:center;}
.d-modal .modal_popup .login .bt{text-align:center;margin-top:10px;}
.d-modal .modal_popup .login .bt a{background:#1e2a38;display:block;width:100%;padding:12px;color:#fff;font-size:15px;}
.d-modal .modal_popup .login .first{display:flex;justify-content:space-between;align-items:center;}
.d-modal .modal_popup .login .first .name{font-size:16px;font-weight:600;}
.d-modal .modal_popup .login .first .info{margin-top:2px;display:block;}
.d-modal .modal_popup .login .first .logout a{border:1px solid#e5e5e5;border-radius:50px;padding:3px 10px;}
.d-modal .modal_popup .top-menu{margin-top:20px;line-height:2.8;}
.d-modal .modal_popup .top-menu a{font-size:16px;font-weight:500;display:flex;justify-content:space-between;align-items:center;}

.etc .layout{max-width:100%;padding:50px 20px;margin:0;}

}


/* mobile */
@media all and (max-width:768px) {

}