@charset "utf-8";
@import url("font.css");

/*common*/
* {margin:0; padding:0; border:0; outline: 0; text-decoration: none; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; color: #161617; letter-spacing: -0.04em;}
body {margin:0;padding:0; background-color: #fafbfc;}
body:after{clear:both; display:block; content:"";}
img {border:0;vertical-align:middle;}
label {vertical-align: middle;}
h1, h2, h3, h4, h5, h6 {margin:0;padding:0;}
dl, dt, dd, ul, ol, li {list-style:none;margin:0;padding:0;}
em, i, address {font-style:normal;}
table {display:table; border-spacing:0px; border-collapse:collapse; table-layout:fixed;}
caption {overflow:hidden; height:0; font-size:0; line-height:0;}
hr {border:1px; border-collapse:collapse;}
form, fieldset {margin:0; padding:0; border:0;}
textarea, input, button, select {vertical-align:middle; box-sizing: border-box;}
textarea {display: block;}
select {-webkit-appearance: none; -moz-appearance: none; appearance: none;} /*select box 화살표 안보이게*/
select::-ms-expand {display: none;} /*IE select box 화살표 안보이게*/
img,input[type=checkbox],input[type=radio] {vertical-align:middle;}
input:focus {outline: none;}
/*IE select box 화살표 안보이게*/
input[type="password"] {font-family: 'Noto Sans KR', sans-serif;}
input:focus {outline: none;}
input::placeholder {color: #bababb; font-weight:400;}
iframe {width:100%; color: #fff;}

/* 정렬 */
.L {text-align:left;}
.C {text-align:center;}
.R {text-align:right;}
.cf::after {content: ""; clear: both; display: block;}


/* select */
select {background: url('../images/common/arrow_select.svg') right 14px center no-repeat #ffffff; background-size: 12px;}
/*width*/
.w8per {width: 8%;}
.w10per {width: 10%;}
.w12per {width: 12%;}
.w16per {width: 16%;}
.w20per {width: 20%;}
.w26per {width: 26%;}
.w30per {width: 30%;}
.w36per {width: 36%;}
.w50per {width: 50%;}
.w80per {width: 80%;}
.w100per {width: 100%;}
.w70 {width: 70px;}
.w80 {width: 80px;}
.w100 {width: 100px;}
.w120 {width: 120px;}
.w140 {width: 140px;}
.w150 {width: 150px;}
.w240 {width: 240px;}  /* 211112 서채원 추가 */

/* margin */
.MT8 {margin-top: 8px;}
.MT16 {margin-top: 16px;}
.MT30 {margin-top: 30px;}
.MT40 {margin-top: 40px;}
.MT60 {margin-top: 60px;}
.MT100 {margin-top: 100px;}  /* 211126 서채원 추가 */
.MB6 {margin-bottom: 6px;}
.MB30 {margin-bottom: 30px;}
.ML6 {margin-left: 6px;}
.ML10 {margin-left: 10px;}
.ML20 {margin-left: 20px;}
.ML40 {margin-left: 40px;}

/* 중요 표시 */
.Ast::before {content: "*"; color: #d9101b; font-size: 15px; margin-right: 4px;}
.red {color: #fa1a1a;}

/*btn background*/
.btn.lightgray , .btn_S.lightgray {background-color: #878785;}
.btn.darkgray , .btn_S.darkgray {background-color: #535357;}
.btn.green , .btn_S.green {background-color: #2ea1a8;}
.btn.blue , .btn_S.blue {background-color: #2b489c;}
.btn.brown , .btn_S.brown {background-color: #a18d67;}
.btn.orange , .btn_S.orange{background-color: #f09e00;}
.btn.gray.line , .btn_S.gray.line{border: 1px solid #878785;}
.btn.gray.line span , .btn_S.gray.line span {color: #878785;}

/*header*/
/*.inner {width: 1524px; margin: 0 auto;}*/ /* 이 코드가 본래 값임.*/
/*.inner {width: 1294px; margin-left: 525px;}*/ /* 첫 번째로 수정된 값.*/
.inner {width: 1294px; margin: 0 auto;}
.nav_wrapper {display: inline-block; width: 1018px; height: 27px; padding: 5px 0; overflow: hidden; vertical-align: top;}
.nav_wrapper .nav_btn_wrap {position: absolute; display: block;}
.nav_wrapper .nav_btn_wrap .btn_left {position: absolute; width: 27px; height: 27px; left: -34px; background: url(../images/common/arrow_L_green.svg); cursor: pointer; border: 1px solid #bbbbbb; border-radius: 10px; background-size: cover;}
.nav_wrapper .nav_btn_wrap .btn_right {position: absolute; width: 27px; height: 27px; left: 1022px; background: url(../images/common/arrow_R_green.svg); cursor: pointer; border: 1px solid #bbbbbb; border-radius: 10px; background-size: cover;}
.nav_wrapper .nav_list_inner {width: 400%; transition: 0.4s all; transform: translateX(0%);}
header select {width: 120px; display: inline-block; height: 34px; box-sizing: border-box; padding: 0 14px; border-radius: 6px; background: url('../images/common/arrow_select.svg') right 12px center no-repeat #fff; background-size: 12px; line-height: 34px; vertical-align: middle; cursor: pointer;}
header .top_area {line-height: 82px; background-color: #023671;}
header .logo {display: inline-block; width: 236px; height: 34px; background: url('../images/common/pknu_mainlogo.png') left center no-repeat; background-size: cover; vertical-align: middle; font-size: 0; vertical-align: top; margin-left: -10px; margin-right: 24px;}
header .left_wrap {float: left; line-height: 38px; font-size: 0;}
header .left_wrap a {color: #fff;}
header .right_wrap {float: right; margin: 3px 20px 3px 0; line-height: 38px; font-size: 0;}
header .right_wrap span {vertical-align: middle; color: #fff;}
header .right_wrap a {color: #fff;}
header .right_wrap strong {color: #fff;}
header .right_wrap select {width: 100px; border: 1px solid #2b489c; margin-left: 12px; line-height: 32px;}
header .btn {display: inline-block; height: 34px; box-sizing: border-box; margin-left: 12px; padding: 0 14px; border-radius: 6px; line-height: 1; vertical-align: middle;}
header .btn.green {margin-left: 24px;}
header .main_set {position: relative; cursor: pointer;}
header .main_set .btn {padding: 0; margin-left: 0;}
header .btn.darkgray {margin-left: 6px;}
header .btn span {color: #fff; line-height: 34px;}
header .main_set ul {display: none; width: 102px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; position: absolute; left: 0; top: 34px; z-index: 10; box-shadow: 0 1px 8px rgba(0,0,0,0.1);}
header .main_set:hover ul {display: block;}
header .main_set ul li {box-sizing: border-box; border-top: 1px solid #ccc; background-color: #fff;}
header .main_set ul li:first-child {border-top: 0;}
header .main_set ul li a {display: block; box-sizing: border-box; padding: 0 6px; text-align: center; line-height: 36px;}

header .btn_icon {display: inline-block; width: 34px; height: 34px; margin-left: 6px; border-radius: 6px; font-size: 0; vertical-align: middle; background: center center no-repeat #a18d67; background-size: 16px;}
header .btn_icon.pwchange {background-image: url('../images/common/icon_pw.svg');}
header .btn_icon.tree {background-image: url('../images/common/icon_tree.svg');}
header .set_lang {display: inline-block; margin-left: 12px; vertical-align: middle;}
header .set_lang li {float: left; margin-top: 1px;}
header .set_lang li:not(:last-child)::after {content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 8px; background-color: #fff; vertical-align: middle;}

header .btn_menu {display: none; width: 34px; height: 34px; margin: 3px 4px 0 4px; border-radius: 6px; font-size: 0; background: url('../images/common/icon_menu.svg') center center no-repeat #2b489c; background-size: 24px; float: right;}
header .btn_home {display: none; width: 34px; height: 34px; margin: 3px 4px 0 4px; border-radius: 6px; background: url('../images/common/icon_home.svg') center center no-repeat#2b489c; background-size: 24px; float: right;}
header .btn_side {display: none; margin: 2px 12px 0 0px; float: right;}
header .nav_list {vertical-align: middle; height: 34px; margin: 16px 0;}
header .nav_list li {display: inline-block; margin-left: 20px; margin-right: 19px;}
header .nav_list li a {font-size: 18px; color: #000000;}
header .nav_list li a:hover {font-weight: 700;}
header nav select {float: right; width: 234px; margin-top: 15px;}
header .languageSelectbox form {margin-bottom:3px;}

header .m_menu {display: none; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 100; background-color: #fafbfc;}

.m_menu .top_wrap {box-sizing: border-box; padding: 30px 0; margin-bottom: 30px; background-color: #023671;}
.m_menu .top_wrap .user {color: #fff; font-size: 16px; vertical-align: middle;}
.m_menu .top_wrap span strong {color: inherit; font-size: inherit;}
.m_menu .top_wrap select {width: 100px; margin-left: 12px;}
.m_menu .top_wrap .btn_close {display: inline-block; width: 34px; height: 34px; background: url('../images/common/icon_close.svg') center center no-repeat; background-size: 26px; font-size: 0; float: right;}

.m_menu .dth01 > li {border-bottom: 1px solid rgba(0,0,0,0.15);}
.m_menu .dth01 > li a {position: relative; display: block; height: 60px; line-height: 59px; font-size: 17px; box-sizing: border-box;}
.m_menu .dth01 > li.has_dth > a::after {content: ""; display: block; width: 12px; height: 18px; background: url('../images/common/arrow_R_green.svg') center center no-repeat; background-size: 20px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease;}
.m_menu .dth01 > li.has_dth > a.on::after {transform: translateY(-50%) rotate(90deg);}
.m_menu .dth01 > li .dth02 {background-color: #f1f3f7; display: none;}
.m_menu .dth01 > li .dth02 li a {font-size: 16px; height: 48px; line-height: 48px; padding-left: 20px; border: none;}
.m_menu .dth01 > li .dth02 li.has_dth > a::after {
    content: ""; display: block; width: 18px; height: 18px; background: url('../images/common/arrow_R_green.svg') center center no-repeat; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease;
}
.m_menu .dth01 > li .dth02 li.has_dth > a.on::after {transform: translateY(-50%) rotate(90deg);}
.m_menu .dth01 > li .dth02 > li .dth03 {background: #fff; display: none;}
.m_menu .dth01 > li .dth02 > li .dth03 li a {font-size: 14px; height: 38px; line-height: 38px; padding-left: 40px;}
.m_menu .dth01 > li .dth02 > li .dth03 li:not(:first-child) {border-top: 1px solid #edf0f7;}

.m_menu .btn_wrap {margin-top: 40px; font-size: 0;}
.m_menu .btn_wrap .btn {margin-left: 6px;}
.m_menu .btn_wrap .btn.lightgray {margin-left: 0;}
.m_menu .set_lang {display: block; width: 130px; margin: 20px auto; padding-bottom: 40px;}

/*footer*/

/*footer {background: #023671;}*/
footer .foot_link {box-sizing: border-box; border-width: 1px 0; border-style: solid; border-color: #e4e6eb; background: #023671;}
footer .foot_link ul li a {color: #ffffff;}
footer ul li a.red {color: #fa4a4a;}
footer ul li {float: left; margin-right: 26px;}
footer ul li a {line-height: 34px;}

footer .info {padding: 26px 0;}
footer .info img {width: 146px; margin-right: 20px;}
footer .info p {display: inline-block; vertical-align: middle;}
footer .info .copyright {margin-left: 100px;}
footer .info span {display: inline-block;}

/*(프로모션 영역 추가)*/
header .promo_area .promotion {display: none; height: 220px; background-color: #f0f0f0; text-align: center; font-size: 20px; font-weight: 500;}
header .promo_area .promotion .inner {font-size: inherit; color: #cdcdcd;}

header .promo_area .inner {position: relative;}
header .promo_area .btn_wrap {display: block; box-sizing: border-box; text-align: center; background-color: #ada18a;}
header .promo_area .btn_wrap a {display: inline-block; line-height: 28px; color: #fff; vertical-align: middle;}
header .promo_area .btn_wrap a img {width: 12px; margin-left: 8px; transition: all 0.3s;}
header .promo_area.active .btn_wrap .btn_promo img {transform: rotate(180deg);}
header .promo_area .btn_wrap .btn_today {display: none; font-weight: 300; position: absolute; top: 0; right: 0; z-index: 10;}
header .promo_area.active .btn_wrap .btn_today {display: block;}
header .promo_area .btn_wrap .btn_today img {width: 18px; margin-right: 6px;}

/*responsive*/
@media all and (max-width: 1587px) {
    .inner {width: 1266px;}
    .nav_wrapper {width: 990px;}
}

@media all and (max-width: 1330px) {
    .inner {width: 1008px;}
    header .top_area {box-shadow: 0 1px 4px rgba(0,0,0,0.1);}
    header .right_wrap, header nav {display: none;}
    header .btn_menu {display: block; margin-top: 4px; margin-bottom: 3px;}
    header .btn_home {display: block; margin-top: 4px; margin-bottom: 3px;}
    header .btn_side {display: block;}
    header .m_menu.active {display: block;}
    header .set_lang li {margin-top: 0px;}

    footer .info span {margin-top: 5px;}
    footer .info p {margin-top: 5px;}
    footer .info .copyright {float: none; display: block; margin-left: 0;}

}

@media all and (max-width: 1071px) {
    .inner {width: 750px;}
}

@media all and (max-width: 813px) {
    .inner {width: calc(100% - 40px); box-sizing: border-box; padding: 0 20px;}

    footer .info {padding: 26px 20px;}
    footer .info .copyright {float: none; display: block; line-height: 1.4;}
    

}

@media all and (max-width: 655px) { /*555px*/
	
	.inner {width: calc(100% - 40px); box-sizing: border-box; padding: 0 10px;}

    header .promo_area .btn_wrap .btn_today {right: 20px;}
    header .set_lang li:not(:last-child)::after {content: ""; display: none; width: 1px; height: 12px; margin: 0 8px; background-color: rgba(0,0,0,0); vertical-align: middle;}

    header .top_area {text-align: center; line-height: 0;}
    header .left_wrap {float: left; margin: 0; display: inline-block; vertical-align: middle; line-height: 0;}
    header .set_lang {margin-left: 0;}
    header .set_lang li {float: none; margin: 3px; vertical-align: middle;}
    header .btn_menu {float: right; display: inline-block; margin: 3px; vertical-align: middle;}
    header .btn_home {float: right; display: inline-block; margin: 3px; vertical-align: middle;}
    

    footer .info {padding: 26px 20px;}

    .m_menu .top_wrap select {width: 98px; margin-left: 6px;}
    

}