@charset "utf-8";

/* common */
html,body{font-size: 6.25%;}
html.safari.desktop {font-size: 0.040083333vw;}
body{font-size:16rem; word-break:keep-all; overflow-y:overlay;}

.wrapper {position:relative; width:1440rem; max-width:92%; margin:0 auto;}
.btn_area .button {font-size: 14rem;}

/* header */
#header {position:absolute; width:100%; z-index:51; }
#header .wrapper {display:flex; align-items: center; justify-content: center; height: 100rem;}
#header h1 {position:absolute; left:0; top:50%; transform:translate(0, -50%);}
#header h1 a {display:inline-block;}
#header h1 a img {height: 40rem;}
html[lang="en"] #header .wrapper{justify-content:flex-start; padding-left:200rem;}

#header .area_util {position: absolute; right:0; display:flex; align-items: center;}
#header .area_util > a {position: relative; display:flex; align-items: center; font-size: 15rem; color: #666;}
#header .area_util > a img {height:13rem; margin-right: 8rem;}
#header .area_util > a {padding-left:20rem; margin-left: 20rem;}
#header .area_util > a::before {position:absolute; left:0; top: 50%; content:''; width:1px; height:12rem; background-color: #e1e1e1; transform: translateY(-50%);}
#header .area_util > a:first-child::before {display: none;}
#header .area_util > a:last-child img {margin-top: -1rem;}
#header .area_util.mobile {display: none;}
#header .area-lang.mobile {display: none;}

#header .btn_menu{display:none;}
#header .btn_menu{position:absolute; top:32rem; right:40rem; z-index:91; width:23rem; height:13rem; font-size:0rem; transition:all 0.3s ease 0s;}
#header .btn_menu > span{display:block; position:absolute; left:0rem; width:100%; height:2rem; background:#000;}
#header .btn_menu > span:nth-of-type(1){top:0;}
#header .btn_menu > span:nth-of-type(2){top:50%; transition:background 0.3s ease 0s;}
#header .btn_menu > span:nth-of-type(3){top:100%;}
#header .btn_menu > span:nth-of-type(1),
#header .btn_menu > span:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;}
#header .btn_menu.active{position:fixed; top:37rem; transform:rotate(180deg);}
#header .btn_menu.active > span:nth-of-type(1){top:10rem; transform:rotate(-45deg);}
#header .btn_menu.active > span:nth-of-type(2){background:transparent;}
#header .btn_menu.active > span:nth-of-type(3){top:10rem; transform:rotate(45deg);}
#header .btn_menu.active > span:nth-of-type(1),
#header .btn_menu.active > span:nth-of-type(3){transition-delay:0s, 0.3s;}
#header .btn_close{position:fixed; opacity:0; visibility:hidden; top:0rem; left:0rem; z-index:51; width:-webkit-calc(100% - 320rem); width:100%; height:-webkit-calc(100vh - -0rem * 1); height:calc(100vh - -0rem * 1); background:#000; font-size:0; transition:all 0.3s ease-out 0s;}
.active #header .btn_close{opacity:0.4; visibility:visible;}

#header nav .gnb > li{display:inline-block; position:relative; padding:0 30rem;}
#header nav .gnb > li:after{content:""; position:absolute; opacity:0.28; top:8rem; right:0; width:1rem; height:15rem; background:#fff;}
#header nav .gnb > li:last-child:after{background:none;}
#header nav .gnb > li > a{display:inline-block; padding:25rem 0; font-size:17rem; font-weight:600; color: #111;}
#header nav .gnb > li > a.on, .sub #header nav .gnb > li > a.on{color: #005ba5;}
#header[data-value="sub"] {border-bottom: 1px solid #e1e1e1;}

#footer_nav {margin-top: 120rem; padding: 20rem 0; text-align:center; border:1px solid #e1e1e1; border-width: 1px 0 1px 0;} 
#footer_nav ul li {position: relative; display:inline-block; padding: 0 15rem 0 16rem;}
#footer_nav ul li::before {position: absolute; left:0; top:50%; content: ''; width: 3rem; height:3rem; border-radius: 100%; background-color: #333; transform: translate(-50%, -50%); opacity: .3;}
#footer_nav ul li:first-child::before {display: none;}
#footer_nav ul li a {font-size: 15rem; color: #333; transition: .3s;}
#footer_nav ul li a:hover {color:#193b86;}
#footer {padding: 70rem 0; background-color: #222;}
#footer .wrapper {display: flex;}
#footer h1 img {height: 40rem;}
#footer address {margin-left: 100rem; font-size: 14rem; font-weight: 500; color:#aaa;}
#footer address p {position: relative; display:inline-block; padding:5rem 12rem 5rem 10rem;}
#footer address p::after {position:absolute; right: 0; top: 50%; content: ''; width: 1px; height: 11rem; background-color:rgba(255, 255, 255, .1); transform:translate(0, -50%);}
#footer address a {font-size: 14rem; font-weight: 500; color:#aaa;}
#footer address a:hover {text-decoration: underline;}
#footer address > p:nth-child(2)::after,
#footer address > p:nth-child(5)::after,
#footer address .copy::After {display: none;}
#footer address .copy {display:block; margin-top: 20rem;}
#footer address .copy strong {color:#fff; font-weight: 500;} 
#footer .sns {display:flex; margin-left:auto; gap:0 20rem;} 
#footer .sns li:first-child {margin-right:-5rem;}
#footer .sns li a {display:block; width: 25rem; height: 25rem; text-align: center;}
#footer .sns li a img {max-height: 100%;}

@media (min-width:2000px){
	html,
	html.safari.desktop{font-size:0.05254860746190225vw;}
}

@media (max-width:1480px){
	html,
	html.safari.desktop{font-size:0.06756756756756757vw;}
}

@media all and (min-width:1025px){
	#header nav .gnb > li ul{display:none; position:absolute; left:50%; opacity:0; visibility:hidden; top:45rem; right:0; width:100%; padding:5rem 15rem; text-align:center; background:#333; border-radius: 5rem; transition:all 0.4s ease-out; transition-property:opacity, top, visibility; transition-delay:0s, 0s, 0s; transform: translateX(-50%);}

	#header nav .gnb > li ul.active{display:block; transition-delay:0.1s;}
	#header nav .gnb > li.active ul{opacity:1; visibility:visible; top:63rem; z-index:10; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li ul > li > a{display:block; position:relative; padding:15rem 0rem; border-top:1rem solid rgba(255, 255, 255, .1); font-size:15rem; color:#fff; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul > li > a:hover{opacity:0.5;}
	#header nav .gnb > li ul > li:first-child > a{border-top-width:0px;}

	#header .area-lang {position: relative; margin-left: 20rem; padding-left: 20rem;}
	#header .area-lang::before {position:absolute; left:0; top: 50%; content:''; width:1px; height:12rem; background-color: #e1e1e1; transform: translateY(-50%);}
	#header .area-lang p {position: relative; display: flex; align-items: center; padding-right: 20rem; font-size: 14rem; line-height: 1; color: #666; cursor: pointer;}
	#header .area-lang p::after {position:absolute; right:0; top: 4rem; content:''; width: 0; height: 0; border-bottom: 5rem solid transparent; border-top: 5rem solid #333; border-left: 4rem solid transparent; border-right: 4rem solid transparent;}
	#header .area-lang p img {height: 13rem; margin-right: 8rem;}
	#header .area-lang ul {opacity: 0; visibility: hidden; position: absolute; right: 0; top: 0; width: 60%; padding: 10rem; border-radius: 5rem; background: #333; transition:all 0.4s ease-out; transition-property:opacity, top, visibility; transition-delay:0s, 0s, 0s;}
	#header .area-lang ul li a {display: block; padding: 5rem; font-size: 13rem; font-weight: 300; color: #fff; text-align: center;}
	#header .area-lang ul.active {display: block;transition-delay: .1s;}
	#header .area-lang.active ul {opacity: 1; visibility: visible; top: 25rem; z-index: 10; transition-delay:0s, 0s, 0s;}
	#header .area-lang.active p::after {top: -1px; transform: scaleY(-1);}
}

@media all and (max-width:1024px){
    html,
	html.safari.desktop{font-size:0.09775171065493645vw;}

	#header .wrapper {max-width: 100%; height: 80rem;}
	#header .btn_menu,
	#header .btn_close {display:block;}
	html[lang="en"] #header .wrapper{justify-content:center; padding-left:0px;}

	#header h1 {left:40rem;}

	#header nav {position:fixed; opacity: 0; visibility: hidden; top:0; right:-100rem; padding: 80rem 0; z-index:88; width:45%; height:100%; margin:0; box-sizing:border-box; background:#fff;}
	#header nav.active {opacity:1; visibility:visible; right:0; transition:all 0.3s ease;}
	#header nav .gnb {position: relative;}
	#header nav .gnb > li {display:block; padding: 0;}
	#header nav .gnb > li > a {position: relative; display:block; padding:22rem 30rem; font-size: 17rem; font-weight: 500; color:#111; transition:all 0.3s ease 0s; border-bottom: 1px solid #e1e1e1;}
	#header nav .gnb > li > a.customer::after {position: absolute; right:40rem; top:50%; content: ''; width: 12rem; height: 12rem; background: url(/images/main/slider_arrow.svg) no-repeat center / contain; transform:translate(0, -50%) rotate(90deg); transition: .3s;}
	#header nav .gnb > li > a.customer.active::after {transform:translate(0, -50%) rotate(-90deg);}
	#header nav .gnb > li ul{display:none; padding:0;}
	#header nav .gnb > li ul > li {border-bottom: 1px solid #efefef; background-color: #f7f7f7;}
	#header nav .gnb > li ul > li > a {display:block; padding:22rem 30rem; color:#333;}
	html[lang="en"] #header nav{width:60%}

	#header .area_util {display: none;}
	#header .area_util.mobile {position: relative; display: flex; justify-content: center; padding:0 30rem; z-index: 88; box-sizing: border-box; background: #f5f5f5;}
	#header .area_util a {padding: 20rem 12rem; margin-left: 0;}
	#header .area-lang.mobile {display: block;}
	#header .area-lang {position: absolute; left: 20rem; top: 27rem; padding-left: 15rem; background:url(/images/common/icon_lang.svg) no-repeat left center / 16rem;}
	#header .area-lang p {display: none;}
	#header .area-lang ul {display: flex; align-items: center;}
	#header .area-lang ul li {position: relative;}
	#header .area-lang ul li:not(:first-child)::before {position: absolute; left:0; top:50%; content:''; width:1px; height: 12rem; background: #e1e1e1; transform: translateY(-50%);}
	#header .area-lang ul a {padding:10rem 12rem; color: #aaa;}
	#header .area-lang li.on a {font-weight: 600; color: #193b86;}

	#footer_nav {margin-top: 85rem;}
	#footer .wrapper {flex-wrap:wrap;}
	#footer address {flex-basis: 100%; margin-left: 0; margin-top: 30rem;}
	#footer .sns {position:absolute; right:0; top:10rem;}
}

@media all and (max-width:860px){
    html,
	html.safari.desktop{font-size:0.13020833333333335vw;}
	#footer_nav {margin-top: 65rem;}
}

@media all and (max-width:540px){
    html,
	html.safari.desktop{font-size:0.26666666666666665vw;}
	body {font-size: 14rem;}

	#header .wrapper {height: 60rem;}
	#header h1 {left:15rem;}
	#header h1 a img {height:30rem;}

	#header .btn_menu.active {top:27rem;}
	#header .btn_menu {top:22rem; right:20rem; width:20rem; height:11rem;}

	#header nav {width: 60%; padding: 60rem 0 0;}
	#header nav .gnb > li > a {padding:17rem 20rem; font-size: 14rem;}
	#header nav .gnb > li > a.customer::after {right:20rem; width:8rem; height: 8rem;}
	#header nav .gnb > li ul > li > a {padding:15rem 20rem; font-size: 12rem;}

	#header .area_util.mobile {height: auto; display: block; padding: 0;}
	#header .area_util a {font-size: 12rem; padding:15rem 20rem; margin-left: 0; border-top: 1px solid #efefef;}
	#header .area_util a:first-child {border-top: none;}
	#header .area_util a::before {display: none;}

	#header .area-lang {top: 18rem; background-size: 14rem;}
	#header .area-lang ul a {padding: 10rem; font-size: 13rem;}


	#footer_nav {padding: 0 0 3rem;}
	#footer_nav .wrapper {padding:15rem 0 12rem; white-space: nowrap; overflow-x: scroll;}
	#footer_nav .wrapper::-webkit-scrollbar {width:100%; height:3rem;}
	#footer_nav .wrapper::-webkit-scrollbar-thumb {background-color: #333; border-radius: 3rem;}
	#footer_nav .wrapper::-webkit-scrollbar-track {background-color: #e1e1e1; border-radius: 3rem;}
	#footer_nav ul li {padding:0 8rem 0 9rem;}
	#footer_nav ul li::before {width:2rem; height:2rem;}
	#footer_nav ul li a {font-size: 12rem;}

	#footer {padding:45rem 0 35rem;}
	#footer .wrapper {justify-content: center;}
	#footer h1 img {height:27rem;}
	#footer address {margin-top: 20rem; text-align: center;}
	#footer address p {padding: 3rem 10rem 3rem 0; font-size: 12rem;}
	#footer address a {font-size: 12rem;}
	#footer address .copy {margin-top: 12rem;}
	#footer .sns {position:relative; margin-left:0; top: auto; margin-top: 30rem; gap:0 12rem;}
	#footer .sns li a img {height: 15rem; vertical-align: middle;}
	
}
@media all and (max-width:480px){
	#header .area-lang {top: 20rem;}
}
@media all and (max-width:360px){}