@charset "utf-8";
/* 폰트적용 */
@import "fonts.css";
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/**
* OLYM Cascading Style Sheets
* File Name : default.css
* Author : Web business Team / Choi Hyun Mi
* Email : desingtj@olym.co.kr
* Date : 2022.03.04
* Update : 2022.03.04
* Copyright(c) 2022 OLYM Communications. All Rights Reserved.
*/

/* 기본설정 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { padding:0; margin:0; line-height:1.4em; font-weight: 350; font-family:'Noto Sans Korean', 'Malgun Gothic', 'Open Sans', sans-serif; word-wrap:break-word; -webkit-text-size-adjust:none;}
ol, ul, li { list-style:none; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%;}
form, fieldset { border:0; }
address, caption, em { font-weight:normal; font-style:normal; }
img { border:0; margin:0; padding:0; }
a { text-decoration:none; }
a:link, a:visited, a:hover, a:active { text-decoration:none !important; }

#app a { transition: all .3s ease;}
#app a:hover { transition: all .3s ease;}
/* #app div { transition: all .3s ease;}
#app div:hover { transition: all .3s ease;} */

/* 숨김영역 */
#accessibility, #accessibility_footer, hr, legend, .skip { position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }
caption { display:none; }

/* float 속성 초기화 */
.space { display:block; clear:both; float:none; width:100%; height:0; line-height:0 !important; font-size:0 !important; margin:0 !important; padding:0 !important; overflow:hidden; }
.clearfix { display: block; }
.clearfix:after { display:block; clear:both; content:"."; visibility:hidden; height:0; }
* html .clearfix { height:1%; }

/* form css */
input, textarea, select, img { vertical-align: middle; }
input, textarea, select { font-family:inherit; font-size:inherit;}

.input_form { border:1px solid #ddd; border-radius:3px; color:#666; background:#f5f5f5; box-sizing:border-box; height:28px; line-height:28px; padding:0 3px;}
.input_form:focus { border:1px solid #000;}
.select_form { border:1px solid #ddd; border-radius:3px; color:#666; background:#f5f5f5; box-sizing:border-box; height:28px; padding-left:3px; }
.textarea_form { border:1px solid #ddd; border-radius:3px; color:#666; background:#f5f5f5; box-sizing:border-box; padding:3px 3px 3px 10px; width:100%;  margin:8px 0; }
.textarea_form:focus { border:1px solid #000;}
.input_file { height:28px; width:80%; }


/* 드래그시 배경컬러 */
::-moz-selection {background:#716365; color:#fff;}
::selection {background:#716365; color:#fff;}

/* login */

#login_wrap {width:100%; height: 100%; display: flex; align-items: center; justify-content: center;}
#login { display: flex; align-items: center; justify-content: center; flex-direction: column;}
#login .p_desc1 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 40px; color: #000;}
#login .p_desc1 span { color: #4b71dc;}
#login .p_desc2 { font-size: 17px; color: #9f9f9f; margin: 10px 0 50px 0;}
#login .login_box { width: 500px; border-top: 2px solid #000; border-bottom: 1px solid #ddd; padding:50px 30px; box-sizing: border-box;}
#login .login_box > ul > li { padding: 10px 0;}
#login .login_box > ul > li input { width: 100%; height: 60px; border: 0; background: #f1f1f1; padding: 10px 30px; box-sizing: border-box; font-family: 'Montserrat', sans-serif; line-height: 1em; font-size: 18px; letter-spacing: 0.05em; font-weight: 500;}
#login .login_box > ul > li input:focus { outline: none; border: 2px solid #4b71dc;}
#login .login_box > ul > li input[type="submit"] { cursor: pointer; background: #4b71dc; font-weight: 600; color: #fff; transition: all .3s ease;}
#login .login_box > ul > li input[type="submit"]:hover { background: #000;}
#login .login_box > ul > li input[type="button"] { cursor: pointer; background: #4b71dc; font-weight: 600; color: #fff; transition: all .3s ease;}
#login .login_box > ul > li input[type="button"]:hover { background: #000;}

@media all and (max-width:600px) {
    #login .p_desc1 { font-size: 30px;}
    #login .p_desc2 { font-size: 16px; margin: 0 0 40px 0;}
    #login .login_box { width: 100%; padding:30px 20px;}
    #login .login_box > ul > li { padding: 10px 0;}
}


/* Layout */
html, body { height:100%;}
body { font-size:15px; word-break:keep-all;} /* 단어 기준으로 줄바꿈 */
#app { width:100%; height: 100%; overflow-x:hidden;}
.wrap_box { width: 100%; position:relative; box-sizing: border-box;}

#container {position:relative; height:100%; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; flex-wrap: wrap;}

#header { width: 100%; height: 80px; background-color: #212a53; padding: 0 3vw; position: relative; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;}
#header .wrap_box { display: flex; align-items: center; justify-content: space-between; gap: 1vw;}
#header h1 { flex:4; color: #fff; font-family: 'Montserrat', sans-serif; line-height: 1em; font-size: 30px; letter-spacing: 0.05em; font-weight: 700;}
#header h1 a { color: #fff;}

#lnb { flex:1;}
#lnb select { width: 100%; height:36px; line-height: 1em; font-weight: 600; padding: 5px 10px; font-family: inherit; background:#fff url("/design/template/bg_select.png") no-repeat calc(100% - 15px) center / auto 8px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; box-sizing: border-box; border-radius: 5px;  }
#lnb select::-ms-expand { /* for IE 11 */ display: none; }

/*#lnb { width: 50%;}
#lnb > ul { display: flex;}
#lnb > ul > li { width: 100%;}
#lnb > ul > li > a { display: block; color: #fff; width: 100%; font-size: 17px; font-weight: 500; text-align: center; line-height: 80px;}
#lnb > ul > li > a:hover, #lnb > ul > li > a.on { background-color: #265db9;}*/

#gnb > a { background: #fff; height:36px; box-sizing: border-box; padding: 7px 25px; color: #212a53; font-size: 14px; font-weight: 500; border-radius: 5px; display: block;}
#gnb > a:hover { background: #265db9; color: #fff; cursor:pointer;}
#gnb2 > a { background: #fff; height:36px; box-sizing: border-box; padding: 7px 25px; color: #212a53; font-size: 14px; font-weight: 500; border-radius: 5px; display: block;}
#gnb2 > a:hover { background: #265db9; color: #fff; cursor:pointer;}
#contents_box { box-sizing: border-box; display: flex; flex-direction: column; width: 100%; height:calc(100% - 80px);}

.stle { font-size:22px; font-weight:700; color: #212a53; height: 60px;}
.stle span { color: #265db9;}
#contents { padding: 3vw; box-sizing: border-box;}

.img_ready { text-align: center; min-height: 670px;}

@media all and (max-width:1000px) {
    #lnb { flex:3;}
}
@media all and (max-width:500px) {
    #header { padding: 0 5vw; }
    #header .wrap_box { gap: 10px;}
    #header h1 { flex:2; font-size: 24px;}
    #lnb { flex:8;}
    #gnb > a { padding: 7px 15px;}
    #contents { padding: 5vw;}
}