@charset "utf-8";

/**************************************************
*
*   영문 layout.css
*
***************************************************/

/* 헤더(header) */
#hd {width: 100%; color: #000;}
#hd.main {color: #fff;}
#hd.main #hd-bot {border-bottom: 1px solid rgba(255, 255, 255, 0.4);}
#hd.main #hd-bot .img-logo-white {display: block;}
#hd.main #hd-bot .img-logo-blue {display: none;}
#hd.main #hd-bot .dep-01 {font-weight: 400;}
#hd.main #hd-bot .btn-toggle-menu .line {background-color: #fff;}
#hd-top {background-color: rgba(0, 0, 0, 0.6); color: #fff;}
#hd-top > .inner {display: flex; justify-content: space-between; align-items: center; padding: 10px 0;}
#hd-top .util-list {display: flex; align-items: center; font-size: 13px; gap: 20px;}
#hd-top .util-list > li {height: 100%; position: relative;}
#hd-top .util-list > li > a {height: 100%; display: flex; align-items: center; gap: 10px;}
#hd-top .util-list > li > a:where(:hover,:focus) {color: #f54da1;}
#hd-top .btn-change-lang {}
#hd-top .btn-change-lang .icon-arrow {transition: all 0.3s;}
#hd-top .btn-change-lang.active .icon-arrow {transform: rotate(180deg);}
#hd-top .lang-list {display: none; position: absolute; top: 90%; left: 50%; width: 130px; transform: translateX(-50%); background-color: #fff; border-radius: 10px; overflow: hidden; font-size: 14px; color: #000; font-weight: 500; padding: 5px 0; z-index: 100;}
#hd-top .lang-list .dep-01 {display: flex; justify-content: space-between; align-items: center; padding: 5px 10px;}
#hd-top .lang-list .dep-01:where(:hover,:focus) {background-color: #f1f1f1;}
#hd-top .lang-list .btn-select-lang.active img {transform: rotate(180deg);}
#hd-top .lang-list .btn-select-lang img {transition: all 0.3s;} 
#hd-top .lang-list .dep-02 {display: block; padding: 3px 14px;}
#hd-top .lang-list .dep-02:where(:hover,:focus) {background-color: #e8e8e8;}
#hd-top .lang-list .other-lang-list {display: none; height: 105px; overflow: auto; background-color: #f9f9f9; border-radius: 10px; padding: 5px 0; margin-top: 5px; font-size: 13px;}
#hd-top .lang-list .other-lang-list::-webkit-scrollbar {width: 8px;}
#hd-top .lang-list .other-lang-list::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 20px;}
#hd-top .lang-list .other-lang-list::-webkit-scrollbar-track {background-color: #ddd;}
#hd-top .srch-box {position: relative;}
#hd-top .srch-box input {width: 250px; height: 45px; background-color: transparent; border: 2px solid #fff; border-radius: 10px; padding-left: 10px; padding-right: 45px;}
#hd-top .srch-box .icon-srch {width: 18px; position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}
#hd-bot {background-color: transparent; border-bottom: 1px solid #ddd; position: relative;}
#hd-bot .img-logo-white {display: none;}
#hd-bot > .inner {height: 90px; display: flex; justify-content: space-between; align-items: center; gap: 20px;}
#hd-bot .dep-list-01 {height: 100%; display: flex; align-items: center;}
#hd-bot .dep-list-01 > li {height: 100%;}
#hd-bot .dep-list-01 > li:where(:hover,:focus-within) .menu-box {display: flex;}
#hd-bot .dep-01 {height: 100%; font-size: 20px; display: flex; justify-content: center; align-items: center; padding: 0 28px; font-weight: 600; }
#hd-bot .btn-toggle-menu {width: 32px; height: 23px; display: flex; flex-direction: column; justify-content: space-between; position: relative;}
#hd-bot .btn-toggle-menu .line {width: 100%; height: 3px; background-color: #000; transition: 0.5s;}
#hd-bot .btn-toggle-menu.active {}
#hd-bot .btn-toggle-menu.active .line {position: absolute; top: 50%; left: 50%;}
#hd-bot .btn-toggle-menu.active .line:nth-of-type(1) {transform: translate(-50%,-50%) rotate(45deg);}
#hd-bot .btn-toggle-menu.active .line:nth-of-type(2) {opacity: 0;}
#hd-bot .btn-toggle-menu.active .line:nth-of-type(3) {transform: translate(-50%,-50%) rotate(-45deg);}
#hd-bot .menu-box {display: none; min-height: 110px; background-color: #f1f1f1; position: absolute; top: 100%; left: 0; width: 100%; color: #000; padding: 20px; gap: 40px; align-items: center; justify-content: center; z-index: 10;}
#hd-bot .menu-box.active {display: flex;}
#hd-bot .menu-box .dep-01-txt {display: flex; align-items: center; justify-content: flex-end; font-size: 30px; font-weight: 800; color: #A6165F;}
#hd-bot .menu-sub-list {display: flex; gap: 30px;}
#hd-bot :where(.dep-02, .dep-03) {transition: none;}
#hd-bot :where(.dep-02, .dep-03):where(:hover,:focus) {text-decoration: underline; text-underline-position: under; color: #A6165F;}
#hd-bot :where(.dep-02, .dep-03)
#hd-bot .dep-02 {font-weight: 600;}
#hd-bot .dep-03 {font-size: 14px; color: #555;}
#hd-bot .dep-list-03 {margin-top: 7px;}
#hd-bot .dep-list-03 > li:not(:last-of-type) {margin-bottom: 5px;}
#hd-bot .dep-box-02 > a {font-weight: 600; font-size: 17px;}

#hd-bot .dep-02[target="_blank"]::after {content: '';display: inline-block;margin-left: 4px;width: 16px;height: 16px;background: url(/resources/user/eng/img/icon/gnb_link_icon.svg) no-repeat center;}
#hd-bot .dep-list-03 li a[target="_blank"]::after {content: '';display: inline-block; vertical-align: middle; margin-left: 4px;width: 15px;height: 15px;background: url(/resources/user/eng/img/icon/gnb_link_icon.svg) no-repeat center; background-size: cover;}

@media screen and (max-width: 1400px) {
    #hd-bot > .inner {height: 75px;}
    #hd-bot .logo {width: 150px;}
    #hd-bot .dep-01 {font-size: 18px; padding: 0 23px;}
    #hd-bot .dep-02 {font-size: 14px;}
    #hd-bot .dep-03 {font-size: 13px;}
    #hd-bot .menu-box {min-height: 90px; padding: 15px 20px; gap: 30px;}
    #hd-bot .menu-box .dep-01-txt {font-size: 23px;}
    #hd-bot .dep-list-03 {margin-top: 4px;}
    #hd-bot .dep-list-03 > li:not(:last-of-type) {margin-bottom: 3px;}
    #hd-bot .menu-sub-list {gap: 25px;}
    #hd-bot .dep-box-02 > a {font-size: 16px;}
    
}

@media screen and (max-width: 1080px) {
    #hd-top {display: none;}
    #hd-bot > .inner {height: auto; padding: 20px 0;}
    #hd-bot .dep-list-01 {display: none;}
}

@media screen and (max-width: 768px) {
    #hd-bot > .inner {padding: 15px 0;}
    #hd-bot .logo {width: 120px;}
    #hd-bot .btn-toggle-menu {width: 25px; height: 19px;}
    #hd-bot .btn-toggle-menu .line {height: 2px;}
}

/* 팝업 메뉴 */
#gb-popup-menu-bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100lvh; background-color: rgba(0, 0, 0, 0.6); z-index: 100;}
#gb-popup-menu {width: 100%; max-width: 400px; height: 100lvh; overflow: auto; position: fixed; top: 0; right: 0; background-color: #fff; transform: translateX(100%); transition: 0.5s; padding-bottom: 60px; border-left: 1px solid #000; z-index: 150;}
#gb-popup-menu::-webkit-scrollbar {width: 14px;}
#gb-popup-menu::-webkit-scrollbar-thumb {border: 4px solid #fff; background-color: #aaa; border-radius: 20px;}
#gb-popup-menu::-webkit-scrollbar-track {background-color: #fff;}
#gb-popup-menu.active {transform: translateX(0);}
#gb-popup-menu .cls-box {background-color: #004386; padding: 10px; color: #fff; text-align: right;}
#gb-popup-menu .btn-cls {font-size: 30px;}
#gb-popup-menu .srch-box {padding: 20px; font-size: 18px; color: #000;}
#gb-popup-menu .srch-box .input-box {position: relative;}
#gb-popup-menu .srch-box input {width: 100%; height: 45px; border: 2px solid #004386; border-radius: 5px; padding-left: 15px; padding-right: 50px;}
#gb-popup-menu .srch-box .btn-srch {width: 20px; position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}
#gb-popup-menu .etc-list {display: flex; text-align: center; border-top: 1px solid #ddd;}
#gb-popup-menu .etc-list > li {width: 100%; position: relative;}
#gb-popup-menu .etc-list > li:not(:last-of-type) {border-right: 1px solid #ddd;}
#gb-popup-menu .etc-list > li > a {display: block; background-color: #004386; padding: 15px 10px; color: #fff;}
#gb-popup-menu .etc-list > li > a:where(:hover,:focus) {filter: brightness(0.8);}
#gb-popup-menu .etc-list .btn-lang-toggle i {font-size: 12px; margin-left: 5px; transition: 0.5s;}
#gb-popup-menu .etc-list .btn-lang-toggle.active i {transform: rotate(180deg);}
#gb-popup-menu .lang-list {display: none; width: 100%; height: 200px; overflow: auto; position: absolute; top: 100%; left: 0; z-index: 10; border-top: 1px solid #ddd;}
#gb-popup-menu .lang-list::-webkit-scrollbar {width: 14px;}
#gb-popup-menu .lang-list::-webkit-scrollbar-thumb {border: 5px solid #4E72BC; background-color: #ddd; border-radius: 20px;}
#gb-popup-menu .lang-list::-webkit-scrollbar-track {background-color: #4E72BC;}
#gb-popup-menu .lang-list > li:not(:first-of-type) {border-top: 1px solid #ddd;}
#gb-popup-menu .lang-list a {display: block; background-color: #4E72BC; font-size: 14px; padding: 10px; color: #fff;}
#gb-popup-menu .lang-list a:where(:hover,:focus) {filter: brightness(0.8);}
#gb-popup-menu .menu-list {color: #000;}
#gb-popup-menu .menu-list a {display: flex; justify-content: space-between; align-items: center;}
#gb-popup-menu .menu-list a .xi-minus {display: none;}
#gb-popup-menu .menu-list a.active .xi-minus {display: block;}
#gb-popup-menu .menu-list a.active .xi-plus {display: none;}
#gb-popup-menu .dep-list-01 {border-top: 1px solid #000;}
#gb-popup-menu .dep-list-01 > li {border-bottom: 1px solid #000;}
#gb-popup-menu .dep-list-02 {display: none; border-top: 1px solid #000;}
#gb-popup-menu .dep-list-03 {display: none; padding: 5px 0; background-color: #f5faff; border-top: 1px solid #000;}
#gb-popup-menu .dep-01 {font-size: 20px; font-weight: 600; padding: 12px 15px;}
#gb-popup-menu .dep-01:not(.active):hover {background-color: #f1f1f1;}
#gb-popup-menu .dep-01.active {color: #004386;}
#gb-popup-menu .dep-02 {font-size: 17px; padding: 10px 20px;}
#gb-popup-menu .dep-02:where(:hover,.active) {background-color: #f1f1f1;}
#gb-popup-menu .dep-03 {font-size: 14px; padding: 10px 30px; transition: none;}
#gb-popup-menu .dep-03:where(:hover,:focus) {color: #004386; text-decoration: underline; text-underline-position: under;}

/* 서브페이지 */
#subPage {}
#subPage > .inner {padding: 80px 0;}

@media screen and (max-width: 1080px) {
    #subPage > .inner {padding: 40px 0;}
}

/* 서브탑 */
#subTop {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px;}
#subTop .menu-top-title {font-size: 40px; font-weight: 800;}
#subTop .etc-box {display: flex; justify-content: space-between; align-items: center; gap: 20px 37px;}
#subTop .breadcrumb {--gap-row-pd-l: 8px; display: flex; align-items: center; gap: 5px var(--gap-row-pd-l); color: #888; flex-wrap: wrap;}
#subTop .breadcrumb li:not(:last-of-type)::after {content: "/"; padding-left: var(--gap-row-pd-l);}
#subTop .breadcrumb a.active {font-weight: 600; color: #000;}
#subTop .breadcrumb a:where(:hover,:focus) {text-decoration: underline; text-underline-position: under; color: #000;}
#subTop .etc-list {display: flex; align-items: center; gap: 37px;}
#subTop .etc-list > li {position: relative}
#subTop .sns-list {display: none; position: absolute; top: calc(100% + 7px); right: -15px; background-color: #fff; border: 1px solid #ddd; z-index: 10;}
#subTop .sns-list ul {width: max-content; display: flex; align-items: center; padding: 10px; gap: 7px;}
#subTop .sns-list li {}
#subTop .sns-list a {display: flex; justify-self: center; align-items: center;}
#subTop .sns-list a:where(:hover,:focus) {filter: brightness(0.8);}
#subTop .sns-list img {width: 32px;}
#subTop .sns-list .btn-cls {font-size: 20px;}

@media screen and (max-width: 1080px) {
    #subTop {gap: 15px 25px;}
    #subTop .menu-top-title {font-size: 30px;}
    #subTop .breadcrumb {--gap-row-pd-l: 7px; font-size: 15px;}
    #subTop .etc-box {width: 100%; gap: 15px 25px;}
    #subTop .etc-list {gap: 20px;}
    #subTop .sns-list img {width: 28px;}
    #subTop .sns-list .btn-cls {font-size: 18px;}
    #subTop .sns-list ul {padding: 7px;}
}

@media screen and (max-width: 768px) {
    #subTop {gap: 10px 20px;}
    #subTop .menu-top-title {font-size: 25px;}
    #subTop .breadcrumb {font-size: 14px;}
    #subTop .etc-box {gap: 15px 20px;}
    #subTop .etc-list {gap: 15px;}
    #subTop .etc-list button {width: 18px;}
    #subTop .sns-list img {width: 24px;}
    #subTop .sns-list .btn-cls {font-size: 16px;}
}

@media screen and (max-width: 480px) {
    #subTop .etc-box {flex-wrap: wrap;}
    #subTop .etc-list {width: 100%;}
    #subTop .sns-list {right: unset; left: -40px;}
}


/* 서브메뉴 리스트 */
#sub-menu-list {font-size: 19px;display: grid;grid-template-columns: repeat(7, minmax(0,1fr));border-top: 3px solid #111;border-bottom: 2px solid #888;margin-top: 40px;color: #333;}
#sub-menu-list a {min-height: 75px; height: 100%; padding: 10px 5px; display: flex; justify-content: center; align-items: center; text-align: center; background-color: #fff;}
#sub-menu-list a.active {color: #000; font-weight: 600;}
#sub-menu-list a:not(.active):where(:hover,:focus) {filter: brightness(0.9);}
#sub-menu-list a[target="_blank"]::after {content: '';display: inline-block;margin-left: 4px;width: 16px;height: 16px;background: url(/resources/user/eng/img/icon/gnb_link_icon.svg) no-repeat center;}

.sub-menu-dg01 {grid-template-columns: 1.5fr 2fr 3fr 3fr 1fr 1fr 1fr 1fr 1fr !important;}
.sub-menu-dg02 {grid-template-columns: 3fr 3fr 2fr 2fr 1fr 1fr 1fr 1fr 1fr !important;}
.sub-menu-dg03 {grid-template-columns: 2fr 2.5fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr !important;}

@media screen and (max-width: 1080px) {
    #sub-menu-list {font-size: 17px; grid-template-columns: repeat(7, minmax(0,1fr)); margin-top: 25px;}
    #sub-menu-list a {min-height: 65px;}

    .sub-menu-dg01 {grid-template-columns: 1.5fr 2fr 3fr 3fr !important;}
    .sub-menu-dg02 {grid-template-columns: 3fr 3fr 2fr 2fr !important;}
    .sub-menu-dg03 {grid-template-columns: 2fr 2.5fr 2fr 1fr 1fr !important;}
}

@media screen and (max-width: 768px) {
    #sub-menu-list {font-size: 15px; grid-template-columns: repeat(4, minmax(0,1fr)); margin-top: 20px;}
    #sub-menu-list a {min-height: 50px;}

    .sub-menu-dg01, .sub-menu-dg02, .sub-menu-dg03 {grid-template-columns: repeat(2, minmax(0,1fr)) !important;}
}

@media screen and (max-width: 480px) {
    #sub-menu-list {grid-template-columns: repeat(3, minmax(0,1fr));}
    
}

/* 서브페이지 공통 하단 */
.com-page-bottom-wrap-01 {margin-top: 85px; display: flex; flex-direction: column; gap: 10px;}
.com-page-bottom-wrap-02 {margin-top: 15px;}

.com-page-bottom-01 {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background-color: #fff; gap: 15px 20px; padding: 30px;  border: 1px solid #ddd;}
.com-page-bottom-01 .txt-box {display: flex; align-items: center; font-weight: 800; gap: 10px;}
.com-page-bottom-01 .txt-box .tit {color: var(--main01);}
.com-page-bottom-01 .hash-list {display: flex; flex-wrap: wrap; gap: 6px;}
.com-page-bottom-01 .hash-list li {}
.com-page-bottom-01 .hash-list a {display: block; padding: 10px 20px; color: #888; border: 1px solid #aaa; background-color: #fff; border-radius: 50px;}
.com-page-bottom-01 .hash-list a:where(:hover,:focus) {background-color: #f1f1f1;}

.com-page-bottom-02 {--pd-lr: 30px; --pd-tb: 20px; border: 1px solid #ddd;}
.com-page-bottom-02 :where(.txt-box, .input-box) {padding: var(--pd-tb) var(--pd-lr);}
.com-page-bottom-02 .info-box {display: flex; align-items: center; gap: 10px; padding: var(--pd-tb) var(--pd-lr); border-bottom: 1px solid #ddd; background-color: var(--bg--evaluate-bg);}
.com-page-bottom-02 .info-box .list {display: flex; width: 100%; gap: 10px 40px; flex-wrap: wrap;}
.com-page-bottom-02 .info-box .list > div {display: flex; gap: 10px;}
.com-page-bottom-02 .info-box .list .edit-date {margin-left: auto;}
.com-page-bottom-02 .info-box img {flex-shrink: 0;}
.com-page-bottom-02 .input-box {display: flex; gap: 20px;}
.com-page-bottom-02 .input-box input {width: 100%; height: 44px; border: 1px solid #ddd; padding: 0 24px; color: #000;}
.com-page-bottom-02 .input-box input::placeholder {color: #888;}
.com-page-bottom-02 .input-box button {flex-shrink: 0; width: 130px; color: #fff; background-color: #A6165F;}
.com-page-bottom-02 .input-box button:where(:hover,:focus) {filter: brightness(0.8);}

@media screen and (max-width: 1080px) {
    .com-page-bottom-wrap-01 {gap: 7px;}

    .com-page-bottom-01 {font-size: 14px; padding: 15px 20px;}
    .com-page-bottom-01 .hash-list {gap: 4px;}
    .com-page-bottom-01 .hash-list a {padding: 10px 15px;}
    
    .com-page-bottom-02 {--pd-lr: 20px; --pd-tb: 15px; font-size: 14px;}
    .com-page-bottom-02 .info-box .list {gap: 10px 20px;}
    .com-page-bottom-02 .info-box .list > div {gap: 7px;}
    .com-page-bottom-02 .input-box {gap: 10px;}
    .com-page-bottom-02 .input-box input {padding: 10px;}
    .com-page-bottom-02 .input-box button {width: 80px;}
}

@media screen and (max-width: 768px) {
    .com-page-bottom-wrap-01 {margin-top: 50px;}

    .com-page-bottom-01 .txt-box {width: 100%; justify-content: center;}
    .com-page-bottom-01 .hash-list {width: 100%; justify-content: center;}

    .com-page-bottom-02 .info-box {width: 100%; justify-content: center; gap: 20px;}
    .com-page-bottom-02 .info-box .list .edit-date {margin-left: 0;}
}



/* 푸터(footer) */
#ft {}
#ft-top {background-color: #292929;}
#ft-top .list {display: flex; color: #fff; font-size: 18px; text-align: center; border-right: 1px solid #555;}
#ft-top .list li {width: 100%; border-left: 1px solid #555;}
#ft-top .list a {height: 100%; display: flex; justify-content: center; align-items: center; padding: 20px 10px;}
#ft-top .list a:where(:hover,:focus) {background-color: #111;}
#ft-bot {background-color: #313131;}
#ft-bot > .inner {padding: 50px 0; display: flex; gap: 95px; align-items: flex-start;}
#ft-bot .txt-box {width: 100%;}
#ft-bot .img-logo {flex-shrink: 0;}
#ft-bot .list {font-weight: 500;}
#ft-bot .list li {display: flex; flex-wrap: wrap; align-items: center; gap: 5px 15px;}
#ft-bot .list li:not(:last-of-type) {margin-bottom: 12px;}
#ft-bot .list a {color: #3097FF; font-size: 16px; font-weight: 600;}
#ft-bot .list a:where(:hover,:focus) {text-decoration: underline; text-underline-position: under;}
#ft-bot .list p {color: #ddd; font-size: 14px; display: flex; align-items: center; gap: 5px 10px; flex-wrap: wrap;}
#ft-bot .list .tel {color: #fff; font-size: 13px;}
#ft-bot .list .tel b {padding-left: 5px;}
#ft-bot .copyright {color: #888; font-size: 14px; margin-top: 26px;}

@media screen and (max-width: 1080px) {
    #ft-top .list {font-size: 16px;}
    #ft-top .list a {padding: 15px 10px; font-size: 15px;}

    #ft-bot > .inner {gap: 50px; padding: 35px 0;}
    #ft-bot .list p {font-size: 13px;}
    #ft-bot .list .tel {font-size: 12px;}
    #ft-bot .copyright {font-size: 13px; margin-top: 20px;}
}

@media screen and (max-width: 768px) {
    #ft-top .list {display: grid; grid-template-columns: repeat(2,minmax(0,1fr));}
    #ft-top .list li {border-bottom: 1px solid #555;}
    #ft-top .list a {padding: 12px 10px; font-size: 14px;}
    #ft-bot > .inner {flex-wrap: wrap; gap: 30px; padding: 25px 0;}
    #ft-bot .img-logo {width: 150px; margin: 0 auto;}
}



/******* 프린트 *******/
@media print{
  #hd,#ft,#sp-top,#subTop,.etc-box,#sub-menu-list  {display: none !important;}
  #subPage {padding: 0px !important;}
  #subPage .com-inner-1500 {width: auto !important; max-width: none !important;  margin: 0 !important; padding: 0 !important;}
}















@media screen and (max-width: 1560px) {
    
}
@media screen and (max-width: 1400px) {
    
}
@media screen and (max-width: 1240px) {
    
}
@media screen and (max-width: 1080px) {
    
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 480px) {
    
}