@charset "UTF-8";
/* Çì´õ */


/* ·Î°í ¿µ¿ª */
.hd_top {height: 80px;} 
.logo {width: 150px; margin-right: 46px;} 
.logo2 {width: 90px;} 
.logo img,
.logo2 img {display: block; width: 100%;} 
.hd_menu > ul {display: flex; align-items: center;} 
.hd_menu > ul > li {margin-right: 50px; position: relative;} 
.hd_menu > ul > li::after {content: ""; display: block; width: 1px; height: 15px; background: #c9c9c9; position: absolute; top: 50%; transform: translateY(-50%); right: -25px;} 
.hd_menu > ul > li:last-child {margin-right: 0;} 
.hd_menu > ul > li:last-child::after {display: none;}
.hd_menu > ul > li a {color: #676767; font-size: 1.8rem; font-family: "Noto Sans KR"; display: block;} 
.global {color: #707070; font-size: 1.8rem; font-family: "Roboto";}
.icon_global {width: 19px; display: block; margin-right: 10px; flex-shrink: 0;} 
.icon_global img {display: block; width: 100%;} 
.button_global {display: flex; align-items: center; font-size: inherit; font-family: inherit; color: inherit;}
.button_global::after {content:""; width: 10px; height: 9px; background: #fff url("/subsite/eng/images/2023/select.png") no-repeat center center/auto; margin-left: 30px; transition: transform .3s;}
.global.on .button_global::after {transform: rotate(180deg);}
.select_global_wrap {height: 0; overflow: hidden; position: absolute; top: 35px; left: 0; z-index: 50; background: #fff; width: 100%;}
.select_global {border: 1px solid #c9c9c9; padding: 5px;} 






.btn_menu {width: 43px;} 
.btn_menu img {display: block; width: 100%;} 
.btn_menu {display: none;} 

/* PC GNB ¿µ¿ª */
header nav {background-color: #006464; position: relative;} 
nav.on .gnb::after {content: ""; position: absolute; width: 100%; background: #fff; height: 510px; z-index: 10; top: 60px; left: 0; /* border-bottom: 1px solid #d6d6d6 */;}
.gnb .depth1 {display: flex; justify-content: space-between;} 
.gnb .depth1 > li {width: calc(100% / 3); position: relative;} 
.gnb .depth1 > li > a {display: block; text-align: center; font-size: 2rem; color: #fff; font-weight: 500; position: relative; height: 60px; display: flex; align-items: center; justify-content: center;}
.gnb .depth1 > li > a:focus {outline-offset: -3px;}
.gnb .depth1 > li.on > a,
.gnb .depth1 > li:hover > a {font-weight: 700;}
.gnb .depth1 > li.on > a::after,
.gnb .depth1 > li:hover > a::after {content:""; width: 100%; height: 5px; background: rgba(255,255,255,.5); position: absolute; left: 0; bottom: 0;}
.gnb .depth2 {display: none; padding: 30px 0; width: 100%; background: #fff; height: 510px; position: absolute; top: 60px; left: 0; z-index: 15; border-right: 1px solid #d6d6d6;} 
.gnb .depth1 > li:first-child .depth2 {border-left: 1px solid #d6d6d6;}
nav.on .depth2 {display: block;}
.gnb .depth2 li {margin-bottom: 34px; padding: 0 20px;} 
.gnb .depth2 li:last-child {margin-bottom: 0;}
.gnb .depth2 li a {font-size: 1.8rem; display: block; color: #767676; padding-left: 15px; position: relative;} 
.gnb .depth2 li.on a,
.gnb .depth2 li:hover a {font-weight: 700;}
.gnb .depth2 li a::before {content:""; width: 2px; height: 2px; background: #767676; position: absolute; top: 13px; left: 0;} 
.gnb .depth2 li:hover a::before {width: 3px; height: 3px;}



/* Mobile GNB ¿µ¿ª */
.toggle_top {display: flex; align-items: center; justify-content: center;} 
.toggle_top > ul {display: flex; align-items: center;} 
.toggle_top > ul > li {margin-right: 28px; position: relative; margin-bottom: 20px;} 
.toggle_top > ul > li::after {content: ""; display: block; width: 1px; height: 15px; background: #c9c9c9; position: absolute; top: 50%; transform: translateY(-50%); right: -14px;} 
.toggle_top > ul > li:last-child::after {display: none;} 
.toggle_top > ul > li:last-child {margin-right: 0; margin-bottom: 0;} 
.toggle_top > ul > li a {font-size: 1.8rem; color: #676767;}
.toggle_top > ul > li a img {width: auto;}
.toggle_x_wrap {padding: 15px 15px 0 0;} 
.toggle_x {float: right; width: 13px; display: block;} 
.toggle_x img {display: block; width: 100%;} 
.toggle_menu {width: 0%; height: 100%; background: #fff; z-index: 100; position: fixed; right: 0; top: 0; min-width: 320px; opacity: 0; transition: 0.1s; display: none;} 
.toggle_menu.on {width: 42%; opacity: 1; display: block;} 
.toggle_menu_list {height: calc(100% - 128px); overflow: auto;}
.toggle_menu_list > .depth1 {border-top: 1px solid #e8e8e8;} 
.toggle_menu_list > .depth1 > li {border-bottom: 1px solid #e8e8e8;} 
.toggle_menu_list > .depth1 > li > a {font-weight: 500; font-size: 1.8rem; display: block; color: #858585; padding: 16px 24px 16px 18px; display: flex; align-items: center; justify-content: space-between;} 
.toggle_menu_list li a .icon_arrow {width: 6px; height: 9px; display: block; background: url('/subsite/eng/images/2023/arrow-drop-right.png') no-repeat center; flex-shrink: 0;} 
.toggle_menu_list > .depth1 > li.on .icon_arrow {background: url('/subsite/eng/images/2023/arrow-drop-down-line.png') no-repeat center; width: 9px;} 
/* .toggle_menu_list > .depth1 > li.on {}  */
.toggle_menu_list > .depth1 > li.on > a {color: #fff; font-weight: 700; background: #006464;} 
.toggle_menu_list .depth2 {display: none;} 
.toggle_menu_list > .depth1 > li.on > .depth2 {display: block; background: #e8e8e8; padding: 25px 0;} 
.toggle_menu_list > .depth1 > li.on > .depth2 > li {position: relative; padding-left: 5px;} 
.toggle_menu_list > .depth1 > li.on > .depth2 > li + li {margin-top: 20px;}
.toggle_menu_list > .depth1 > li.on > .depth2 > li::before {content: ""; width: 4px; height: 4px; background: #858585; position: absolute; left: 18px; top: 12px; transform: translateY(-50%);} 
.toggle_menu_list > .depth1 > li.on > .depth2 > li.on::before {background: #006464;}
.toggle_menu_list > .depth1 > li.on > .depth2 > li:last-child {margin-bottom: 0;} 
.toggle_menu_list > .depth1 > li.on > .depth2 > li > a {color: #858585; font-size: 1.6rem; font-weight: 500; padding: 0 18px 0 26px; display: block;} 
.toggle_menu_list > .depth1 > li.on > .depth2 > li.on > a {color: #006464; font-weight: 700;}

.toggle_menu_list .depth3 {margin: 10px 20px; background: #fbfbfb; border: 1px solid #ddd; padding: 15px; border-radius: 10px}
.toggle_menu_list .depth3 > li {position: relative; padding-left: 10px;}
.toggle_menu_list .depth3 > li::before {content: ""; width: 2px; height: 2px; background: #858585; border-radius: 50%; position: absolute; left: 0; top: 12px; transform: translateY(-50%);}
.toggle_menu_list .depth3 > li > a {font-size: 1.6rem; color: #858585;}
.toggle_menu_list .depth3 > li.on > a {font-weight: 700; text-decoration: underline;}
.toggle_menu_list .depth3 > li.on::before {width: 3px; height: 3px;}
.toggle_menu_list .depth3 > li + li {margin-top: 10px;}




/* DzÅÍ */
footer {padding: 42px 0; border-top: 1px solid #dedede; clear: both;} 
.ft_cont {display: flex; justify-content: space-between;} 
.ft_logo {width: 240px; display: block;position: relative;} 
.ft_logo a:focus img{outline: 2px solid #000 !important; /* Æ÷Ä¿½ºµÈ ¸µÅ©¿¡ ÆĶõ»ö À±°û¼± */outline-offset: 2px !important;}
.ft_logo img {display: block; width: 100%;} 
.f_accessibility{width: 100px;position: absolute;right: -79%;top: -56%;}
.ft_left {padding-top: 29px; margin-right: 177px; position: relative; max-width: 595px;} 
.ft_left::after {content: ""; background: #ccc; display: block; width: 1px; height: 150px; top: 0; position: absolute; right: -90px;} 
.ft_left .ft_txt {font-size: 1.8rem; font-weight: bold; color: #676767; line-height: 1.39; margin-bottom: 22px;} 
.ft_list li {display: flex; align-items: center; font-weight: 600; font-size: 1.8rem; color: #676767; margin-bottom: 10px;} 
.ft_list .icon_ft {width: 20px; margin-right: 16px; display: block;} 
.ft_list .icon_ft img {display: block; width: 100%;} 
.ft_right {max-width: 427px; width: 100%;} 
.ft_info {margin-bottom: 35px;} 
.ft_info ul {display: flex; align-items: center; justify-content: space-between;} 
.ft_info span {font-size: 18px; font-weight: bold; color: #676767; display: block; margin-bottom: 6px; text-transform: uppercase;} 
.ft_info p {font-size: 3rem; font-weight: bold; color: #050505;} 
.ft_menu ul {display: flex; width: 100%;} 
.ft_menu ul li {width: 50%; background: #717171;} 
.ft_menu ul li:first-child {border-right: 1px solid #fff;} 
.ft_menu ul li a {color: #fff; font-size: 1.8rem; font-weight: bold; display: block; text-align: center; line-height: 44px; outline-offset: 3px;outline-color: darkgreen;} 



@media screen and (max-width: 1100px){
	.logo_wrap {width: 100%; justify-content: space-between; position: relative;}
	.logo2 {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
	.hd_menu {display: none;} 
	.btn_menu {display: block;} 
	.hd_top {border-bottom: 30px solid #006464; box-sizing: content-box;}
	header nav {padding: 15px; display: flex; justify-content: end; display: none;} 
	.gnb {display: none;}
	.toggle_top > ul {flex-wrap: wrap; padding: 18px; /* overflow: hidden; */} 
	.toggle_top > ul > li {width: calc((100% - 28px) / 2);}
	.toggle_top > ul > li:nth-child(2n) {margin-right: 0;} 
	.toggle_top > ul > li:nth-child(2n)::after {display: none;} 
}

@media screen and (max-width: 900px){
	.ft_cont {flex-direction: column;} 
	.ft_left {max-width: 100%; margin-right: 0; margin-bottom: 50px;} 
	/* .ft_left .ft_txt {font-size: 1.4rem;}  */
	.ft_left::after {display: none;} 
}

@media screen and (max-width: 550px){
	.ft_right {width: 100%; max-width: 100%;} 
	.f_accessibility {width: 100px;position: absolute;right: -44%;top: -56%;}
}

@media screen and (max-width: 400px) {
	html,
	body {font-size: 9px;} 
}

@media screen and (max-width: 330px) {
	html,
	body {font-size: 8px;} 
}