/* 변수 */ :root { /* header */ --header-top-height: 2.25rem; --header-bottom-height: 5.25rem; /* footer */ --footer-height: 2.75rem; /* snb */ --snb-height: 3.5rem; /* content-size */ --content-white-space: 5rem; --content-btn: 2.5rem; /* color */ --color-blue: #0060b1; --color-skyblue: #0091b6; } /* 전체 설정 */ body {font-family: 'Pretendard', 'SCDream', 'Montserrat', 'NotoSans', '돋움', 'Dotum', '굴림', 'Gulim', AppleGothic, UnDotum, Arial, Tahoma, Verdana, sans-serif; font-size: var(--font-size-016); color: #111; line-height: 1.6; word-break: keep-all;} /* 전체 설정 : active */ body.fixed {overflow: hidden;} /* 설정 */ .container {max-width: 80rem; padding: 0 2rem;} /* select custom */ .slctCstm {height: calc(var(--content-white-space) * 0.55); border-radius: 0.5rem; border: 1px solid #dadfe1; background: #fff; position: relative;} .slctCstm::before {display: flex; justify-content: center; align-items: center; width: 2em; height: 2em; border-radius: 0.25rem; border: 1px solid #dadfe1; font-family: 'xeicon'; font-size: 1.125em; position: absolute; right: calc(var(--content-white-space) * 0.15); top: calc(50% - 1em);} .slctCstm.up::before {content: "\e944";} .slctCstm.down::before {content: "\e941";} .slctCstm select {width: 100%; height: 100%; border-radius: 0.5rem; border: 0; background: none; padding-left: 1rem; padding-right: calc(2em + (var(--content-white-space) * 0.3)); appearance: none; cursor: pointer;} .slctCstm select::-ms-expand {display: none;} /* header */ #header {width: 100%; border-bottom: 1px solid transparent; position: absolute; left: 0; top: 0; z-index: 4;} /* header - tpHd */ #header .tpHd {border-bottom: 1px solid rgba(255,255,255,0.15);} #header .tpHd > .container {display: flex; justify-content: space-between; max-width: 76rem; height: var(--header-top-height); padding: 0;} #header .tpHd .container > div {display: flex;} #header .tpHd a {display: flex; align-items: center; color: #fff;} #header .tpHd .lft {margin: 0 -1px;} #header .tpHd .lft a {height: 100%; background: rgba(255,255,255,0.15); padding: 0 calc(var(--header-top-height) * 0.78); font-size: var(--font-size-017); margin: 0 1px;} #header .tpHd .rght a {padding: 0 calc(var(--header-top-height) * 0.33);} #header .tpHd .rght a i {font-size: 1.3125em; margin-right: 0.25rem;} #header .tpHd .rght a span {display: block; background-image: linear-gradient(transparent calc(100% - 1px), #fff calc(100% - 1px)); background-position: left bottom; background-size: 0 1px; background-repeat: no-repeat;} /* header - tpHd : active */ #header .tpHd .lft a, #header .tpHd .rght a span {transition: var(--trst-short);} #header .tpHd .lft a:hover, #header .tpHd .lft a:focus {background: rgba(0,0,0,0.15);} #header .tpHd .rght a:hover span, #header .tpHd .rght a:focus span {background-size: 100% 1px;} /* header - btHd */ #header .btHd > .container {display: flex; justify-content: space-between; align-items: center; max-width: unset; height: var(--header-bottom-height); padding-left: max(2rem, calc(50vw - 38rem)); padding-right: max(1.25rem, calc(50vw - 38rem)); position: static;} #header .btHd .logo {width: 17.1rem; height: 2.7rem;} #header .btHd .logo a {display: block; width: 100%; height: 100%; position: relative;} #header .btHd .logo a img {max-width: 100%; max-height: 100%; object-fit: contain; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} #header .btHd .logo a img.on {opacity: 0;} /* header - btHd - gnb */ #gnb {flex: 1;} #gnb [class^="depth"]:not(.depth01) {display: none;} #gnb .depth01 > ul {display: flex; justify-content: center;} #gnb .depth01 > ul > li > a {display: flex; align-items: center; height: var(--header-bottom-height); padding: 0 calc(var(--header-bottom-height) * 0.6); font-size: var(--font-size-022); color: #fff; font-weight: 600; white-space: nowrap; position: relative;} #gnb .depth01 > ul > li > a::before {content: ""; display: block; width: 0; height: 4px; background: #1b224e; position: absolute; left: 1.25rem; bottom: -1px;} #gnb .depth02 {align-items: flex-start; width: 100%; padding: 2rem max(2rem, calc(50vw - 38rem)) 6.5rem; position: absolute; left: 0; top: calc(100% + 1px); z-index: 1;} #gnb .depth02::before {content: ""; display: block; width: 100%; height: 100%; background: #f4f6f9; position: absolute; left: 0; top: 0; z-index: -2;} #gnb .depth02::after {content: ""; display: block; width: calc(50% - 17.5rem); height: 100%; border-bottom-right-radius: 6rem; background: url(/images/template/T2003/layout/gnb_bg.png) right 3.5rem bottom 3rem no-repeat, linear-gradient(90deg, #0153b8 0%, #4986ea 100%); position: absolute; left: 0; top: 0; z-index: -1;} #gnb .depth02 > .titBox {width: calc(50% - 17.5rem); padding: 0 2.25rem; color: #fff;} #gnb .depth02 > .titBox > strong {font-size: 1.75rem; font-weight: 800;} #gnb .depth02 > .titBox > p {padding-top: calc(3px + 1.25rem); font-size: 0.9rem; margin-top: 0.75rem; position: relative;} #gnb .depth02 > .titBox > p::before {content: ""; display: block; width: 2rem; height: 3px; background: #fff; position: absolute; left: 0; top: 0;} #gnb .depth02 > .titBox > p > em {font-weight: 700;} #gnb .depth02 > ul {display: flex; flex-wrap: wrap; width: calc(50% + 17.5rem); padding-left: 2.5rem;} #gnb .depth02 > ul > li {width: calc((100% - 3rem) / 4);} #gnb .depth02 > ul > li:not(:nth-child(4n)) {margin-right: 1rem;} #gnb .depth02 > ul > li:nth-child(n+5) {margin-top: 1rem;} #gnb .depth02 > ul > li > a {display: block; width: 100%; border-radius: 0.5rem; border: 1px solid #b8bec9; padding: calc(0.75rem - 1px) 1rem; font-size: 0.9rem; position: relative; overflow: hidden;} #gnb .depth03 > ul {padding: 0.35rem 0.25rem 0;} #gnb .depth03 > ul > li {padding: 0.35rem 0;} #gnb .depth03 > ul > li > a {padding-left: 0.75rem; color: #555; position: relative;} #gnb .depth03 > ul > li > a::before {content: ""; display: block; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: #9194a7; position: absolute; left: 0; top: calc((0.8rem * 0.6) - 0.125rem);} #gnbBg {width: 100vw; height: 100vh; background: rgba(0,0,0,0.25); position: fixed; left: 0; top: 0; z-index: 3; opacity: 0; visibility: hidden;} /* header - btHd - gnb : pseudo */ #gnb .depth02 > ul > li.dep > a, #gnb .depth02 > ul > li > a[target="_blank"] {padding-right: 2.75rem;} #gnb .depth02 > ul > li > a::before, #gnb .depth02 > ul > li > a::after {content: ""; display: block; width: 2.75rem; height: 3rem; background-position: center; background-repeat: no-repeat; position: absolute; right: 0; top: 0;} #gnb .depth02 > ul > li > a::after {opacity: 0;} #gnb .depth02 > ul > li.dep > a::before {background-image: url(/images/template/T2003/layout/icn_dep_off.png);} #gnb .depth02 > ul > li.dep > a::after {background-image: url(/images/template/T2003/layout/icn_dep_on.png);} #gnb .depth02 > ul > li > a[target="_blank"]::before {background-image: url(/images/template/T2003/layout/icn_blnk_off.png);} #gnb .depth02 > ul > li > a[target="_blank"]::after {background-image: url(/images/template/T2003/layout/icn_blnk_on.png);} #gnb .depth03 > ul > li > a[target="_blank"] > span::after {content: ""; display: inline-block; width: 15px; height: 15px; background: url(/images/template/T2003/layout/icn_blnk_off.png) center no-repeat; margin-left: 0.4rem; position: relative; top: 0.1rem;} /* header - btHd - gnb : active */ #gnb .depth01 > ul > li > a::before {transition: var(--trst-medium);} #gnb .depth02 > ul > li > a, #gnb .depth02 > ul > li > a::before, #gnb .depth02 > ul > li > a::after {transition: var(--trst-short);} #gnb .depth01 > ul > li.on > a::before {width: calc(100% - 2.5rem);} #gnb li.on > .depth02 {display: flex;} #gnb .depth02 > ul > li.on > a, #gnb .depth02 > ul > li.actv > a {border-color: #1b224e; background: #fff; box-shadow: 0.15rem 0.2rem 0.5rem rgba(0,19,48,0.2); color: #1b224e; font-weight: 700;} #gnb .depth02 > ul > li.on > a::before, #gnb .depth02 > ul > li.actv > a::before {opacity: 0;} #gnb .depth02 > ul > li.on > a::after, #gnb .depth02 > ul > li.actv > a::after {opacity: 1;} #gnb li.actv > .depth03 {display: block;} #gnb .depth03 > ul > li.on > a {color: #2881e5;} #gnb .depth03 > ul > li.on > a::before {background: #2881e5;} #gnb .depth03 > ul > li.on > a[target="_blank"] > span::after {background-image: url(/images/template/T2003/layout/icn_blnk_on.png);} /* header - btHd - utlWr */ #header .btHd .utlWr {display: flex;} #header .btHd .utlWr .stmp {display: flex; align-items: center; padding: 0 0.75rem; font-size: calc(var(--header-bottom-height) * 0.3); color: #fff;} /* header - btHd - utlWr - schWr */ #schWr .schBtn {height: var(--header-bottom-height); padding: 0 0.75rem; position: relative; z-index: 0;} #schWr .schBtn i {display: inline-flex; justify-content: center; align-items: center; width: calc(var(--content-btn) * 0.9); height: calc(var(--content-btn) * 0.9); border-radius: calc(var(--content-btn) * 0.2); font-size: calc(var(--header-bottom-height) * 0.3); color: #fff;} #schWr .schBox {display: none; width: 100%; background: #fff; box-shadow: 0 0.5rem 0.5rem rgba(0,0,0,0.1); padding: calc(var(--header-bottom-height) * 0.475) 0; position: absolute; left: 0; top: calc(100% + 1px);} #schWr .schBox .container {display: flex; justify-content: center;} #schWr .schBox input {width: 100%; max-width: 22.5rem; height: calc(var(--content-btn) * 1.2); border-radius: calc(var(--content-btn) * 0.3); border: 1px solid #d6dbe1; background: #f7f7f7; padding: 0 0.75rem; font-size: var(--font-size-017);} #schWr .schBox .btnSubmit {flex-shrink: 0; width: calc(var(--content-btn) * 1.2); height: calc(var(--content-btn) * 1.2); border-radius: calc(var(--content-btn) * 0.3); background: #0153b8; font-size: calc(var(--content-btn) * 0.5); color: #fff; margin-left: 0.5rem;} /* header - btHd - utlWr - schWr : active */ #schWr.actv .schBtn i {background: #6c6f75; font-size: calc(var(--content-btn) * 0.7); color: #fff !important;} #schWr.actv .schBtn i::before {content: "\e922";} #schWr.actv .schBox {display: block;} /* header.actv */ #header, #header .tpHd, #header .tpHd .lft a, #header .tpHd .rght a i, #header .tpHd .rght a span, #header .btHd .logo a img, #gnb .depth01 > ul > li > a, #header .btHd .utlWr .stmp, #schWr .schBtn, #gnbBg {transition: var(--trst-short);} #header.actv {border-bottom-color: #c8ced8; background: #fff;} #header.sub {border-bottom-color: #c8ced8; background: #fff; position: relative;} #header.actv .tpHd, #header.sub .tpHd {border-bottom-color: #ddd;} #header.actv .tpHd .lft a, #header.sub .tpHd .lft a {background: #d7e9f7; color: #111;} #header.actv .tpHd .rght a i, #header.sub .tpHd .rght a i {color: #aaa;} #header.actv .tpHd .rght a span, #header.sub .tpHd .rght a span {color: #333;} #header.actv .btHd .logo a img.off, #header.sub .btHd .logo a img.off {opacity: 0;} #header.actv .btHd .logo a img.on, #header.sub .btHd .logo a img.on {opacity: 1;} #header.actv #gnb .depth01 > ul > li > a, #header.sub #gnb .depth01 > ul > li > a {color: #111;} #header.actv .btHd .utlWr .stmp, #header.sub .btHd .utlWr .stmp, #header.actv #schWr .schBtn i, #header.sub #schWr .schBtn i {color: #111;} #gnbBg.actv {opacity: 1; visibility: visible;} /* mGnb */ #mGnb {display: none;} /* footer */ #footer {border-top: 2px solid #012450; padding-bottom: var(--footer-height);} /* footer - ftTp */ #footer .ftTp {border-bottom: 1px solid #e6e8ee; background: #fff;} #footer .ftTp .container {display: flex; align-items: center;} #footer .ftTp .titWr {display: flex; align-items: center; width: calc(var(--content-white-space) + (var(--content-btn) * 3.2)); margin-right: 0.5rem;} #footer .ftTp .titWr h2 {font-size: var(--font-size-020); font-weight: 700; white-space: nowrap; margin-right: calc(var(--content-white-space) * 0.35);} #footer .ftTp .titWr .control {display: flex; margin: calc(var(--content-btn) * -0.08);} #footer .ftTp .titWr .control a {display: flex; justify-content: center; align-items: center; width: calc(var(--content-btn) * 0.8); height: calc(var(--content-btn) * 0.8); border-radius: calc(var(--content-btn) * 0.2); background: #f4f6f7; font-size: var(--font-size-018); margin: calc(var(--content-btn) * 0.08); position: relative; z-index: 0; overflow: hidden;} #footer .ftTp .titWr .control a.ply {display: none;} #footer .ftTp .conWr {width: calc(100% - var(--content-white-space) - (var(--content-btn) * 3.2) - 0.5rem);} #footer .ftTp .conWr .banSlide .item {position: relative;} #footer .ftTp .conWr .banSlide .item::after {content: ""; display: block; width: 1px; height: calc(var(--font-size-017) * 0.76); background: #d7d7d7; position: absolute; right: 0; top: calc(50% - (var(--font-size-017) * 0.38));} #footer .ftTp .conWr .banSlide .item a {display: block; line-height: calc(var(--content-white-space) * 0.9); padding: 0 calc(var(--content-white-space) * 0.4); font-size: var(--font-size-017); white-space: nowrap;} /* footer - ftTp : active */ #footer .ftTp .titWr .control a, #footer .ftTp .conWr .banSlide .item a {transition: var(--trst-short);} #footer .ftTp .titWr .control a:hover, #footer .ftTp .titWr .control a:focus {background: var(--color-skyblue); color: #fff;} #footer .ftTp .conWr .banSlide .item a:hover, #footer .ftTp .conWr .banSlide .item a:focus {color: var(--color-blue); font-weight: 700;} /* footer - ftBt */ #footer .ftBt {padding-top: calc(var(--footer-height) * 0.36);} #footer .ftBt .container {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;} #footer .ftBt .lnkWr {margin-right: calc(var(--footer-height) * 1.45); overflow: hidden;} #footer .ftBt .lnkWr ul {display: flex; flex-wrap: wrap; margin: calc(var(--footer-height) * -0.1) calc(var(--footer-height) * -0.45);} #footer .ftBt .lnkWr ul li {padding: calc(var(--footer-height) * 0.1) calc(var(--footer-height) * 0.45); position: relative;} #footer .ftBt .lnkWr ul li::before {content: ""; width: 0.2rem; height: 0.2rem; border-radius: 50%; background: #d7d7d7; position: absolute; left: -0.1rem; top: calc(50% - 0.1rem);} #footer .ftBt .lnkWr ul li a strong {color: var(--color-blue); font-weight: 700;} #footer .ftBt .stmpWr {flex: 1; position: relative;} #footer .ftBt .stmpWr::before {content: ""; display: block; width: 200vw; height: var(--footer-height); border-bottom-left-radius: 1rem; background: url(/images/template/T2003/layout/ft_ptrn.jpg); position: absolute; left: calc(var(--footer-height) * -0.63); bottom: calc(var(--footer-height) * 0.45); z-index: -1;} #footer .ftBt .stmpWr ul {display: flex; flex-wrap: wrap; margin: calc(var(--footer-height) * -0.135);} #footer .ftBt .stmpWr ul li {width: calc(100% / 3); padding: calc(var(--footer-height) * 0.135);} #footer .ftBt .infWr {width: 100%; padding: calc(var(--footer-height) * 0.45) 0;} #footer .ftBt .infWr dl {display: flex; padding: 0.25rem 0;} #footer .ftBt .infWr dl dt {font-weight: 700; margin-right: 0.25rem;} #footer .ftBt .infWr dl dd ul {display: flex; flex-wrap: wrap;} #footer .ftBt .infWr dl dd ul li {margin-right: calc(var(--footer-height) * 0.45);} #footer .ftBt .copyright {color: #666; letter-spacing: 0.05rem; text-transform: uppercase;} /* footer : active */ #footer .ftBt .lnkWr ul li a:hover, #footer .ftBt .lnkWr ul li a:focus {text-decoration: underline;} /* sub_container - sbTp */ #sub_container .sbTp {background: url(/images/template/T2003/sub/sV_bg.jpg) center / cover no-repeat;} /* sub_container - sbTp - sbTxt */ #sbTxt .container {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 10rem; text-align: center;} #sbTxt p {font-size: var(--font-size-020); color: #03275d;} #sbTxt p strong {font-weight: 700;} #sbTxt h2 {font-size: calc(var(--font-size-050) * 0.72); color: #03275d; font-weight: 800;} #sbTxt h2 strong {color: #1d2f9b;} /* sub_container - sbTp - snb */ #snb {position: relative; z-index: 2; transform: translate(1.5rem, 0); opacity: 0; visibility: hidden;} /* sub_container - sbTp - snb : active */ #snb {transition: var(--trst-medium);} #snb.rd {transform: translate(0); opacity: 1; visibility: visible;} /* sub_container - subContent */ #subContent {padding: calc(var(--snb-height) * 0.7) 0 calc(var(--snb-height) * 1.2);} /* sub_container - subContent - titWr */ #subContent .titWr {display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #e1eaf3; padding-bottom: 0.75rem; margin-bottom: calc(var(--snb-height) * 0.7);} #subContent .titWr .lft #pageTitle {font-size: 1.75rem; font-weight: 700;} #subContent .titWr .lft .lct {display: none;} #subContent .titWr .rght > ul {display: flex;} #subContent .titWr .rght > ul > li {margin-left: 0.5rem; position: relative; z-index: 1;} #subContent .titWr .rght > ul > li > button {width: calc(var(--content-btn) * 0.9); height: calc(var(--content-btn) * 0.9); border-radius: calc(var(--content-btn) * 0.2); border: 1px solid #ddd; font-size: 0; line-height: 0;} /* sub_container - subContent - titWr - sns */ #shrBox {display: none; flex-direction: column-reverse; width: 100%; border-radius: calc(var(--content-btn) * 0.2); background: #fff; box-shadow: 0.25rem 0.45rem 0.75rem rgba(0,0,0,0.1); position: absolute; left: 0; top: 0;} #shrBox .shrLst {padding: 0.4rem 0;} #shrBox .shrLst li a {display: flex; justify-content: center; align-items: center; padding: 0.4rem 0; text-align: center; font-size: 0; line-height: 0;} #shrBox .shrCls {width: calc(var(--content-btn) * 0.9); height: calc(var(--content-btn) * 0.9); border-radius: calc(var(--content-btn) * 0.2); background: #1b224e; font-size: 0.9rem; color: #fff;} /* sub_container - subContent - titWr - sns : active */ .active > #shrBox {display: flex;} /* sub_container - subContent - conWr */ #subContent .conWr {min-height: calc(var(--header-height) * 5.2);} #subContent .conWr > *:first-child {margin-top: 0 !important;} @media screen and (max-width: 1640px) { /* 변수 */ :root { /* content-size */ --content-white-space: 4rem; } /* select custom */ .slctCstm {height: calc(var(--content-white-space) * 0.6);} } @media screen and (max-width: 1600px) { /* header - btHd - gnb */ #gnb .depth02 > .titBox {padding-left: 0;} } @media screen and (max-width: 1440px) { /* 변수 */ :root { /* footer */ --footer-height: 2rem; } /* header - btHd - gnb */ #gnb {display: none;} #gnb .depth01 > ul > li > a {padding: 0 calc(var(--header-bottom-height) * 0.5);} /* mGnb */ #mGnb {display: block; width: 100vw; height: 100vh; background: rgba(0,0,0,0.25); position: fixed; left: 0; top: 0; z-index: 4; opacity: 0; visibility: hidden;} #mGnb .mGnbWr {display: flex; flex-direction: column; width: 100%; max-width: 24rem; height: 100%; background: #fff; position: absolute; left: 0; top: 0; transform: translateX(-100%);} #mGnb .mGnbWr .mbWr {border-bottom: 1px solid #ddd; padding: 1.15rem 1rem; padding-right: 4rem; font-size: var(--font-size-016);} #mGnb .mGnbWr .mbWr .mbOvh {overflow: hidden;} #mGnb .mGnbWr .mbWr .mbOvh ul {display: flex; flex-wrap: wrap; margin: -0.25em -1em;} #mGnb .mGnbWr .mbWr .mbOvh ul li {position: relative;} #mGnb .mGnbWr .mbWr .mbOvh ul li::before {content: ""; display: block; width: 1px; height: 0.75em; background: #c5c9d6; position: absolute; left: -1px; top: calc(50% - 0.375em);} #mGnb .mGnbWr .mbWr .mbOvh ul li a {display: flex; align-items: center; height: 2.125em; padding: 0.25em 1em 0.25em 0.75em;} #mGnb .mGnbWr .mbWr .mbOvh ul li a i {font-size: 1.5em; color: #aaa;} #mGnb .mGnbWr .mbWr .mbOvh ul li a span {color: #333; white-space: nowrap; margin-left: 0.25em;} #mGnb .mGnbWr .conWr {flex: 1; position: relative; overflow-y: auto;} #mGnb .mGnbWr .conWr::before {content: ""; display: block; width: calc(50% - 2rem); height: 100%; background: #e8effa; position: absolute; left: 0; top: 0; z-index: -1;} #mGnb .mGnbWr .conWr [class*="depth"]:not(.depth01) {display: none;} #mGnb .mGnbWr .conWr [class*="depth"] > ul > li > a {display: flex; justify-content: space-between;} #mGnb .mGnbWr .conWr [class*="depth"] > ul > li > a::after {font-family: 'xeicon'; font-weight: 400; margin-left: 0.5rem;} #mGnb .mGnbWr .conWr .depth01 {height: 100%; overflow-y: auto;} #mGnb .mGnbWr .conWr .depth01 > ul {padding: 1rem 0; padding-left: 0.5rem;} #mGnb .mGnbWr .conWr .depth01 > ul > li {width: calc(50% - 1.5rem); padding: 0.25rem 0;} #mGnb .mGnbWr .conWr .depth01 > ul > li > a {display: block; padding: 0.375rem 1rem; font-size: var(--font-size-016); color: #333; position: relative;} #mGnb .mGnbWr .conWr .depth01 > ul > li > a::before {content: ""; display: block; width: 0; height: 100%; border-radius: 0.5rem; background: linear-gradient(90deg, #0153b8 0%, #4986ea 100%); position: absolute; left: 0; top: 0; z-index: -1;} #mGnb .mGnbWr .conWr .depth02 {width: calc(50% + 1.25rem); height: 100%; position: absolute; right: 0; top: 0; overflow-y: auto;} #mGnb .mGnbWr .conWr .depth02 > ul {padding: 1rem; padding-left: 0.75rem;} #mGnb .mGnbWr .conWr .depth02 > ul > li > a {border-bottom: 1px solid #c5c9d6; padding: 0.5rem 0.25rem; color: #333;} #mGnb .mGnbWr .conWr .depth03 > ul {border-bottom: 1px solid #c5c9d6; padding: 0.25rem 0.5rem 0.75rem;} #mGnb .mGnbWr .conWr .depth03 > ul > li > a {padding: 0.2rem 0; padding-left: 0.5rem; font-size: var(--font-size-015); color: #555; position: relative;} #mGnb .mGnbWr .conWr .depth03 > ul > li > a::before {content: ""; display: block; width: 0.2rem; height: 0.2rem; border-radius: 50%; background: #cdd3d8; position: absolute; left: 0; top: calc(1.1em - 0.1rem);} #mGnb .mGnbWr .conWr .depth04 > ul {background: #f3f5f9; padding: 0.25rem 1rem 0.5rem;} #mGnb .mGnbWr .conWr .depth04 > ul > li > a {padding: 0.1rem 0; padding-left: calc(6px + 0.25rem); font-size: var(--font-size-014); color: #777; position: relative;} #mGnb .mGnbWr .conWr .depth04 > ul > li > a::before {content: ""; display: block; width: 6px; height: 2px; background: url(/images/template/T2003/layout/mGnb_dep04_bf.png); position: absolute; left: 0; top: calc(0.95em - 1px);} #mGnb .mGnbWr .mGnbClose {width: 2rem; height: 2rem; border-radius: 0.5rem; background: #2a4363; font-size: var(--font-size-020); color: #fff; position: absolute; right: 1rem; top: 0.8rem;} /* mGnb : xeicon */ #mGnb .mGnbWr .conWr [class^="depth"]:not(.depth01) > ul > li > a[target="_blank"]::after {content: "\e980";} #mGnb .mGnbWr .conWr .depth02 > ul > li > a::after {color: #777;} #mGnb .mGnbWr .conWr .depth02 > ul > li.dep > a::after {content: "\e942";} #mGnb .mGnbWr .conWr .depth03 > ul > li.dep > a::after {content: ""; width: 10px; height: 1.6em; background: url(/images/template/T2003/layout/mGnb_dep03_off.png) center no-repeat; font-family: inherit;} /* mGnb : active */ #mGnb, #mGnb .mGnbWr {transition: var(--trst-medium);} #mGnb .mGnbWr .conWr .depth01 > ul > li > a, #mGnb .mGnbWr .conWr .depth01 > ul > li > a::before {transition: var(--trst-short);} #mGnb.on {opacity: 1; visibility: visible; transition: var(--trst-medium);} #mGnb.on .mGnbWr {transform: translateX(0); transition: var(--trst-medium) var(--trst-medium);} #mGnb .mGnbWr .conWr .actv > [class*="depth"]:not(.depth01) {display: block;} #mGnb .mGnbWr .conWr .depth01 > ul > li.dep.actv > a {color: #fff; font-weight: 700;} #mGnb .mGnbWr .conWr .depth01 > ul > li.dep.actv > a::before {width: 100%;} #mGnb .mGnbWr .conWr .depth02 > ul > li.dep.actv > a {border-bottom-color: #4483e7; color: #4483e7;} #mGnb .mGnbWr .conWr .depth02 > ul > li.dep.actv > a::after {content: "\e945"; color: #4483e7;} #mGnb .mGnbWr .conWr .depth03 > ul > li.dep.actv > a::after {background-image: url(/images/template/T2003/layout/mGnb_dep03_on.png);} #mGnb .mGnbWr .conWr .depth04 > ul > li > a:hover, #mGnb .mGnbWr .conWr .depth04 > ul > li > a:focus {color: #111; text-decoration: underline;} /* footer - ftTp */ #footer .ftTp {border-bottom: 0;} /* footer - ftBt */ #footer .ftBt {padding-top: 0;} #footer .ftBt .lnkWr {width: 100%; padding: calc(var(--footer-height) * 0.4) 0; margin-right: 0; position: relative; z-index: 1; overflow: visible;} #footer .ftBt .lnkWr::before {content: ""; width: 100vw; height: 100%; background: #e8effa; position: absolute; left: calc(50% - 50vw); top: 0; z-index: -1;} #footer .ftBt .lnkWr::after {content: ""; width: 100vw; height: 100%; background: #e8effa; position: absolute; right: 100%; top: 0; z-index: 1;} #footer .ftBt .stmpWr {margin-top: calc(var(--footer-height) * 0.75);} #footer .ftBt .stmpWr::before {display: none;} } @media screen and (min-width: 1241px) { /* sub_container - sbTp - snb - snbWr */ #snb .container {z-index: 2;} #snb .container::before {content: ""; display: block; width: 100vw; height: 100%; background: #00317a; position: absolute; left: 50%; top: 0; z-index: -1;} #snb .snbWr {display: flex; height: var(--snb-height); border-top-left-radius: calc(var(--snb-height) * 0.425); background: #00317a;} #snb .snbWr#typeMob {display: none;} #snb .snbWr .home {display: flex; justify-content: center; align-items: center; width: var(--snb-height); height: var(--snb-height); border-top-left-radius: calc(var(--snb-height) * 0.425); background: #3581ff; font-size: 1.25rem; color: #fff;} #snb .snbWr [class*="dep"] {width: 100%; position: relative;} #snb .snbWr .dep01 {width: calc((100% - var(--snb-height)) / 4); position: relative;} #snb .snbWr [class*="dep"]:not(.dep01) {display: none; position: absolute; left: 100%; top: 0;} #snb .snbWr [class*="dep"] > a {display: flex; justify-content: space-between; align-items: center; height: var(--snb-height); padding: 0 1.5rem; font-size: var(--font-size-017); color: #fff; font-weight: 500; position: relative;} #snb .snbWr [class*="dep"] > a::before {content: ""; display: block; width: 1px; height: 100%; background: rgba(255,255,255,0.3); position: absolute; right: 0; top: 0;} #snb .snbWr [class*="dep"] > a::after {content: "\e942"; font-family: 'xeicon'; font-size: var(--font-size-020); margin-left: 0.5rem;} #snb .snbWr [class*="dep"] > a > span {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;} #snb .snbWr [class*="dep"] > ul > li > a {display: none; justify-content: space-between; border-left: 1px solid #00317a; border-right: 1px solid #00317a; background: #fff; padding: max(0.75rem, calc(var(--snb-height) * 0.175)) 1.25rem; font-size: var(--font-size-017); font-weight: 500; position: relative;} #snb .snbWr [class*="dep"]:not(.dep01) > ul > li > a {width: calc(100% + 1px); margin-left: -1px;} #snb .snbWr [class*="dep"] > ul > li:last-child > a {border-radius: 0 0 1rem 1rem; border-bottom: 1px solid #00317a;} #snb .snbWr [class*="dep"] > ul > li:not(:first-child) > a::before {content: ""; display: block; width: calc(100% - 2.5rem); height: 1px; background: #ddd; position: absolute; left: 1.25rem; top: -1px;} #snb .snbWr [class*="dep"] > ul > li > a[target="_blank"]::after {content: "\e980"; font-family: 'xeicon'; font-weight: 400; margin-left: 0.5rem;} /* sub_container - sbTp - snb - snbWr : active */ #snb .snbWr .active > [class*="dep"] {display: block;} #snb .snbWr [class*="dep"].active > ul > li > a {display: flex;} #snb .snbWr [class*="dep"] > ul > li > a:hover, #snb .snbWr [class*="dep"] > ul > li > a:focus {background: #e1edff; z-index: 1;} #snb .snbWr [class*="dep"] > ul > li > a:hover::before, #snb .snbWr [class*="dep"] > ul > li > a:focus::before {display: none;} } @media screen and (max-width: 1240px) { /* 변수 */ :root { /* footer */ --footer-height: 1.25rem; /* snb */ --snb-height: 3rem; /* content-size */ --content-white-space: 3.5rem; } /* select custom */ .slctCstm {height: calc(var(--content-white-space) * 0.8);} /* footer - ftBt */ #footer .ftBt .stmpWr {margin-top: var(--footer-height);} #footer .ftBt .lnkWr {padding: calc(var(--footer-height) * 0.6) 0;} #footer .ftBt .infWr {padding: calc(var(--footer-height) * 0.6) 0;} #footer .ftBt .infWr dl {display: block;} #footer .ftBt .infWr dl dt {margin-right: 0; margin-bottom: 0.1rem;} /* sub_container - sbTp */ #sub_container .sbTp {background: none;} /* sub_container - sbTp - sbTxt */ #sbTxt {display: none;} /* sub_container - sbTp - snb */ #snb {transform: translate(0, -100%);} /* sub_container - sbTp - snb - snbWr */ #snb .container {padding: 0;} #snb .snbWr {position: relative; z-index: 1;} #snb .snbWr#typePc {display: none;} #snb .snbWr#typeMob {display: block;} #snb .snbWr .home {display: none;} #snb .snbWr [class*="dep"]:not(.dep01) {display: none;} #snb .snbWr [class*="dep"] > a {display: none;} #snb .snbWr [class*="dep"] li > a {display: flex; justify-content: space-between;} #snb .snbWr [class*="dep"] li > a::after, #snb .snbWr [class*="dep"] li > a > span::after {font-weight: 400;} #snb .snbWr .dep01 > ul > li:not(.active) {display: none;} #snb .snbWr .dep01 > ul > li.active > a {display: flex; justify-content: space-between; align-items: center; height: var(--snb-height); background: linear-gradient(90deg, #0153b8 0%, #4986ea 100%); padding: 0 2rem; font-size: var(--font-size-018); color: #fff; font-weight: 700;} #snb .snbWr .dep01 > ul > li.active > a::after {content: "\e942"; font-family: 'xeicon'; font-size: 1.13em; font-weight: 400; margin-left: 1rem;} #snb .snbWr .dep01 > ul > li.active > a > span {flex: 1; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #snb .snbWr .dep01 > ul > li.active > ul {display: none;} #snb .snbWr .dep02 {background: #fff; box-shadow: 0 0.45rem 0.9rem rgba(0,0,0,0.1); padding: 0 2rem 2rem;} #snb .snbWr .dep02 > ul {display: flex; flex-wrap: wrap; align-items: flex-start;} #snb .snbWr .dep02 > ul > li {width: calc((100% - 3rem) / 4); border-bottom: 1px solid #c5c9d6;} #snb .snbWr .dep02 > ul > li:not(:nth-child(4n)) {margin-right: 1rem;} #snb .snbWr .dep02 > ul > li > a {padding: calc(var(--snb-height) * 0.225) 0.5rem; font-size: var(--font-size-020); color: #333;} #snb .snbWr .dep02 > ul > li.dep > a::after {content: "\e942"; font-family: 'xeicon'; margin-left: 0.5rem;} #snb .snbWr .dep03 > ul {padding: 0.25rem 0 0.75rem;} #snb .snbWr .dep03 > ul > li > a {padding: calc(var(--snb-height) * 0.08) 0.5rem; font-size: var(--font-size-018); color: #555; font-weight: 300;} #snb .snbWr .dep03 > ul > li.dep > a::after {content: ""; display: block; width: 10px; height: 1.6em; background: url(/images/template/T2002/layout/mGnb_dep03_off.png) center no-repeat; margin-left: 0.5rem;} #snb .snbWr .dep03 > ul > li > a > span {padding-left: calc(4px + 0.3rem); position: relative;} #snb .snbWr .dep03 > ul > li > a > span::before {content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: #cdd3d8; position: absolute; left: 0; top: calc(0.8em - 2px);} #snb .snbWr .dep04 > ul {background: #f3f5f9; padding: 0.5rem 0;} #snb .snbWr .dep04 > ul > li > a {padding: calc(var(--snb-height) * 0.045) 0.75rem; font-size: var(--font-size-017);} #snb .snbWr .dep04 > ul > li > a > span {padding-left: calc(6px + 0.25rem); position: relative;} #snb .snbWr .dep04 > ul > li > a > span::before {content: ""; display: block; width: 6px; height: 2px; background: url(/images/template/T2002/layout/mGnb_dep04_bf.png); position: absolute; left: 0; top: calc(0.8em - 1px);} /* sub_container - sbTp - snb - snbWr : active */ #snb .snbWr .dep01 > ul > li.active.actvMob > a::after {content: "\e945";} #snb .snbWr .actvMob > .dep02 {display: block;} #snb .snbWr .dep02 > ul > li.active > a {color: #4483e7; font-weight: 700;} #snb .snbWr .dep02 > ul > li.dep.active > a::after {content: "\e945";} #snb .snbWr .active > .dep03 {display: block; border-top: 1px solid #4483e7;} #snb .snbWr .dep03 > ul > li.dep.active > a::after {background-image: url(/images/template/T2002/layout/mGnb_dep03_on.png);} #snb .snbWr .dep03 > ul > li.active > a > span {font-weight: 700;} #snb .snbWr .dep03 > ul > li.active > a > span::before {background: #0153b8;} #snb .snbWr .active > .dep04 {display: block;} /* sub_container - subContent */ #subContent {padding: calc(var(--snb-height) * 0.4) 0 calc(var(--snb-height) * 0.6);} /* sub_container - subContent - titWr */ #subContent .titWr {align-items: flex-start; border-bottom-color: #bbb; padding-bottom: 0.5rem; margin-bottom: calc(var(--snb-height) * 0.6);} #subContent .titWr .lft #pageTitle {font-size: calc(var(--font-size-018) * 1.5);} #subContent .titWr .lft .lct {display: block; margin-top: calc(var(--snb-height) * 0.2); overflow: hidden;} #subContent .titWr .lft .lct ul {display: flex; flex-wrap: wrap; margin: -0.1rem -0.75rem;} #subContent .titWr .lft .lct ul li {padding: 0.1rem 0.75rem; color: #555; white-space: nowrap; position: relative;} #subContent .titWr .lft .lct ul li::before {content: "\e93e"; font-family: 'xeicon'; font-size: 0.9em; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);} #subContent .titWr .rght > ul > li.prt {display: none;} /* sub_container - subContent - titWr - sns */ #shrBox {background: none; box-shadow: unset;} #shrBox .shrLst {border-radius: 0.5rem; background: #fff; box-shadow: 0.25rem 0.45rem 0.75rem rgba(0,0,0,0.1); margin: 0.5rem -0.5rem 0;} } @media screen and (max-width: 1024px) { /* 변수 */ :root { /* content-size */ --content-white-space: 3rem; --content-btn: 2.25rem; } /* 설정 */ .container {padding: 0 1rem;} /* header - tpHd */ #header .tpHd {display: none;} /* header - btHd */ #header .btHd > .container {padding-left: 1rem; padding-right: 0.25rem;} /* footer - ftTp */ #footer .ftTp .conWr .banSlide .item a {line-height: var(--content-white-space);} /* sub_container - sbTp - snb - snbWr */ #snb .snbWr .dep01 > ul > li.active > a {padding: 0 1rem;} #snb .snbWr .dep02 {padding: 0 1rem calc(var(--snb-height) * 0.4);} #snb .snbWr .dep02 > ul > li {width: calc((100% - 2rem) / 3);} #snb .snbWr .dep02 > ul > li:not(:nth-child(4n)) {margin-right: 0;} #snb .snbWr .dep02 > ul > li:not(:nth-child(3n)) {margin-right: 1rem;} } @media screen and (max-width: 768px) { /* 변수 */ :root { /* content-size */ --content-white-space: 2.5rem; } /* 전체 설정 */ body {word-break: break-all;} /* select custom */ .slctCstm {height: 2.5rem;} .slctCstm::before {width: 1.4rem; height: 1.4rem; font-size: 0.8em; right: 0.5rem; top: calc(50% - 0.7rem);} /* footer - ftTp */ #footer .ftTp .conWr .banSlide .item a {line-height: 3rem;} /* footer - ftBt */ #footer .ftBt .copyright {letter-spacing: 0; word-break: keep-all;} /* sub_container - sbTp - snb - snbWr */ #snb .snbWr .dep02 > ul {justify-content: space-between;} #snb .snbWr .dep02 > ul > li {width: calc(50% - 0.5rem);} #snb .snbWr .dep02 > ul > li:not(:nth-child(3n)) {margin-right: 0;} } @media screen and (max-width: 680px) {} @media screen and (max-width: 580px) { /* 변수 */ :root { /* header */ --header-bottom-height: 3.25rem; /* content-size */ --content-white-space: 2.5rem; } /* header - btHd */ #header .btHd > .container {padding-right: 0.5rem;} #header .btHd .logo {width: 14.1rem; padding-right: 0.5rem;} /* header - btHd - utlWr */ #header .btHd .utlWr .stmp {padding: 0 0.5rem; font-size: calc(var(--header-bottom-height) * 0.45);} /* header - btHd - utlWr - schWr */ #schWr .schBtn {padding: 0 0.5rem;} #schWr .schBtn i {font-size: calc(var(--header-bottom-height) * 0.45);} /* footer - ftTp */ #footer .ftTp {padding-top: 0.75rem;} #footer .ftTp .container {flex-wrap: wrap;} #footer .ftTp .titWr {justify-content: space-between; width: 100%; margin-right: 0;} #footer .ftTp .conWr {width: calc(100% + 2rem); padding: 0 1rem; margin: 0.25rem -1rem 0; overflow: hidden;} #footer .ftTp .conWr .banSlide {width: calc(100% + 1rem); margin: 0 -0.5rem;} #footer .ftTp .conWr .banSlide .slick-list {overflow: visible;} #footer .ftTp .conWr .banSlide .item::after {display: none;} #footer .ftTp .conWr .banSlide .item a {padding: 0 0.5rem;} /* footer - ftBt */ #footer .ftBt .lnkWr ul li {padding: 0.1rem 0.5rem;} #footer .ftBt .lnkWr ul li::before {display: none;} #footer .ftBt .stmpWr {margin-top: calc(var(--footer-height) * 0.75);} #footer .ftBt .stmpWr ul {flex-wrap: wrap; margin: -0.2rem;} #footer .ftBt .stmpWr ul li {width: 100%; padding: 0.2rem;} } @media screen and (max-width: 480px) { /* 변수 */ :root { /* content-size */ --content-btn: 2rem; } /* sub_container - sbTp - snb - snbWr */ #snb .snbWr .dep02 > ul > li {width: 100%;} } @media screen and (max-width: 380px) { /* 변수 */ :root { /* content-size */ --content-white-space: 2rem; } /* 설정 */ .container {padding: 0 0.75rem;} /* header - btHd */ #header .btHd > .container {padding-left: 0.75rem;} #header .btHd .logo {width: 11.1rem;} /* header - btHd - utlWr */ #header .btHd .utlWr .stmp {padding: 0 0.4rem; font-size: calc(var(--header-bottom-height) * 0.35);} /* header - btHd - utlWr - schWr */ #schWr .schBtn {padding: 0;} #schWr .schBtn i {font-size: calc(var(--header-bottom-height) * 0.35);} /* mGnb */ #mGnb .mGnbWr .mbWr {padding: 1.15rem 0.75rem; padding-right: 3.25rem;} #mGnb .mGnbWr .conWr .depth01 > ul > li > a {padding-left: 0.75rem;} #mGnb .mGnbWr .conWr .depth02 > ul {padding-right: 0.75rem;} #mGnb .mGnbWr .mGnbClose {width: 1.75rem; height: 1.75rem; right: 0.75rem;} /* sub_container - sbTp - snb - snbWr */ #snb .snbWr .dep01 > ul > li.active > a {padding: 0 0.75rem;} #snb .snbWr .dep02 {padding: 0 0.75rem calc(var(--snb-height) * 0.4);} }