@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

/*Common*/
*{margin:0;padding:0;box-sizing: border-box;}
html,body{width:100%;height:100%}
html{overflow-y:scroll; font-size: 62.5%;}
body{
-webkit-text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;-ms-text-size-adjust: 100% !important;}
body,h1,h2,h3,h4,h5,h6,th,td,li,dt,dd,a,p,input,textarea,select,option,button{
color:#666;
font-family:"Manrope","pretendard","Lexend","Noto Sans KR","돋움",dotum,sans-serif;
font-size:14px;font-weight:normal;
line-height: 1.4;
word-break:keep-all;-ms-word-break:keep-all;
}
img,fieldset,iframe{border:0 none}
ul,ol,li{list-style:none}
em,address{font-style:normal}
img,input,select,textarea{vertical-align:middle}
a{text-decoration:none;cursor:pointer}
button,label{cursor:pointer;_cursor /**/:hand}
button *{position:relative}
textarea{overflow:auto}
option{padding-right:6px}
.input_text, textarea{margin:-1px 0;padding-right:1px}
.input_check, .input_radio{width:13px;height:13px}
.blind, legend, caption{text-indent:-9999px;font-size:0;line-height:0;overflow:hidden}
.blind li {height: 0;}
hr{display:none}
legend{width:0}
:root legend{margin-top:-1px;font-size:0;line-height:0}
caption{line-height:0}
img{max-width:100%;}
button{border: none;background: transparent;}
input:focus, select:focus {
outline: none;
box-shadow: none;
}

/* logo */
svg .logoText {
transition: all .4s;
fill: #fff;
}
header.white svg .logoText {
fill: #fff;
}
header.allMentActive svg .logoText,
header.black svg .logoText {
fill: #343434;
}

#header{
position:fixed; left:0; top:0px; width:100%;z-index:1000;
transition: all .3s;
}
.head{
height:90px;
padding-top: 20px;
position: relative;
}
.head::after {
content: '';
position: absolute;
top: 90px;
left: 50%;
transform: translateX(-50%);
max-width: 1840px;
width:97%;
height: 0;
background-color: rgba(255,255,255,.9);
z-index: -1;
transition: all 0.4s;
border-radius: var(--brus-14);
}

/* 상단 라인(메뉴/로고) */
.head .innerWrap{
max-width: 1840px;
width:97%;
margin:0 auto;
position: relative;
height:100%;
display: grid;
grid-template-columns: 1fr auto auto;
}
/* logo */
.head h1{
height: 100%;
display:flex;
align-items:center;
justify-content:flex-start;
position: relative;
z-index: 1001;
}
.head h1 a{
transition: all .4s;
width: clamp(130px, 12vw, 200px);
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
.head h1 a .logoTitle {
text-indent:-9999px;
font-size: 0;
line-height: 0;
overflow: hidden;
}
.head h1 a svg {
width: 100%;
}
.head .pcNav{
margin-right: 20px;
}
.head .pcNav>ul{
display:flex;
align-items:center;
justify-content:flex-end;
position:relative;
z-index:100;
}
.head .pcNav>ul>li{
height:70px;
position:relative;
}
.head .pcNav>ul>li::before{
content:'';
width:1px; height:25%;
background:#B9B9B9;
position:absolute; left:0; top:50%;
transform: translateY(-50%);
}
.head .pcNav>ul>li>a{
display:block;
width: 200px;
font-weight:500;
font-size: var(--fz-18);
line-height:70px;
text-align:center;
color:#fff;
transition: all .4s;
white-space: nowrap;
}
.head .gnb {
display: flex;
align-items: center;
justify-content: flex-end;
position: relative;
z-index: 1001;
gap: 20px;
}
.head .gnb .lang {
position: relative;
}
.head .gnb .lang .lang-btn {
padding: 21px;
}
.head .gnb .lang .lang-btn .icon {
display: block;
width: 28px;
height: 28px;
transition: all 0.3s;
background: url(/images/common/icon_lang_w.png) no-repeat center center / contain;
}
.head .gnb .lang .langList {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
visibility: hidden;
opacity: 0;
transition: all 0.3s;
}
.head .gnb .lang .langList.active {
visibility: visible;
opacity: 1;
}
.head .gnb .lang .langList .listItem {
	border-radius: var(--brus-10);
	overflow: hidden;
}
.head .gnb .lang .langList .listItem + .listItem {
margin-top: 2px;
}
.head .gnb .lang .langList .listItem a {
display: block;
text-align: center;
padding: 10px 20px;
color: #666;
transition: all 0.3s;
font-size: var(--fz-14);
background-color: rgba(255,255,255,0.6);
}
.head .gnb .lang .langList .listItem a:hover,
.head .gnb .lang .langList .listItem.active a {
background-color: var(--main-color);
color: #fff;
}
.head .gnb .allMenu-btn{
background: var(--main-color);
border:none;
padding:0 20px;
height:100%;
display:flex;
border-radius: var(--brus-14);
flex-direction:column;
justify-content:center;
align-items:center;
cursor:pointer;
transition: all 0.3s;
}
.head .gnb .allMenu-btn div{
width:30px; height:2px;
background:#fff;
transition: all 0.3s;
margin: 2.5px 0;
transform-origin: center;
}

/* logo subMenu*/
.head h1 .subMenu{
transition: height .4s;
overflow: hidden;
z-index: 1;
height:0;
position: absolute;
top: 70px;
}
.head h1 .menuwrap{
height: 332px;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 2vw;
}
.head h1 .subMenu .text{
padding-right: 1vw;
}
.head h1 .subMenu .text p{
margin:0;
font-size: clamp(2rem, 1.6vw, 3.4rem);
color:#000;
font-weight:500;
line-height:1.15;
}

/* pcNav subMenu*/
.head .pcNav .subMenu{
text-align:left;
width:100%;
transition: height .4s;
overflow:hidden;
z-index:1;
height:0;
position:absolute;
left: 0;
top:70px;
}
.pcNav .subMenu::before{
content:'';
position:absolute;
left:0; top:0;
width:1px; height:100%;
background:#B9B9B9;
}
.pcNav .subMenu .menuwrap{
padding: 40px 0 40px 20px;
}
.pcNav .subMenu .menuwrap a{
display:block;
color:#666;
padding:5px 0;
font-size: var(--fz-16);
transition: all .3s;
position:relative;
}
.pcNav .subMenu .menuwrap a:hover{
padding-left: 18px;
color: var(--main-color);
}
.pcNav .subMenu .menuwrap a::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
top: 50%;
left: 0;
background-color: var(--main-color);
border-radius: 2px;
opacity: 0;
transform: scale(0) translateY(-50%) rotate(-90deg);
transition: opacity .2s, transform .3s .1s;
}
.pcNav .subMenu .menuwrap a:hover::before {
opacity: 1;
transform: scale(1) translateY(-50%) rotate(45deg);
}

.head.active::after{
height: 332px; 
}
.head.white .pcNav>ul>li>a {
color: #fff;
}
.head.white .pcNav>ul>li::before {
background:#fff;
}
.head.white .gnb .lang .lang-btn .icon {
background: url(/images/common/icon_lang_w.png) no-repeat center center / contain;
}
.head.black .pcNav>ul>li>a {
color: #000;
}
.head.black .pcNav>ul>li::before {
background:#000;
}
.head.black .gnb .lang .lang-btn .icon {
background: url(/images/common/icon_lang_b.png) no-repeat center center / contain;
}
.head.allMentActive .gnb .lang {
	display: none;
}
.head .gnb .allMenu-btn.active {
background: transparent;
}
.head .gnb .allMenu-btn.active div {
background: #000;
}
.head .gnb .allMenu-btn.active div:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.head .gnb .allMenu-btn.active div:nth-child(2) {
opacity: 0;
}
.head .gnb .allMenu-btn.active div:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}

.allMenu {
position:fixed;left:0;top:0;z-index:999;
width:100%;height:100vh;
transition: all .6s;
overflow: hidden;
clip-path: inset(55px 55px 100% 100%);
}
.allMenu.active {
clip-path: inset(0% 0% 0% 0%);
}
.allMenu .allMenuNav {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
}
.allMenu .allMenuNav .slogan {
background-color: #F5F5F5;
height: 100%;
padding: 35px  2vw;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 25%;
border-right: 1px solid #CACACA;
}
.allMenu .allMenuNav .slogan .sloganTitle {
font-size: var(--fz-40);
color: #000;
font-weight: 500;
line-height: 1.2;
}
.allMenu .allMenuNav .slogan .sloganText {
font-size: var(--fz-20);
font-weight: 400;
margin-top: 30px;
color: #555;
}
.allMenu .allMenuNav .allMenuList {
width: 75%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
}
.allMenu .allMenuNav .allMenuList .listItem {
width: calc(100% / 3);
height: 50%;
padding: 35px  2vw;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
position: relative;
}
.allMenu .allMenuNav .allMenuList .listItem::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: var(--main-color) url(/images/common/allMenu_bg.png) no-repeat 120px -40px/ contain;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.allMenu .allMenuNav .allMenuList .listItem:nth-child(1),
.allMenu .allMenuNav .allMenuList .listItem:nth-child(2),
.allMenu .allMenuNav .allMenuList .listItem:nth-child(4),
.allMenu .allMenuNav .allMenuList .listItem:nth-child(5){
border-right: 1px solid #CACACA;
}
.allMenu .allMenuNav .allMenuList .listItem:nth-child(n+4) {
border-top: 1px solid #CACACA;
}
.allMenu .allMenuNav .allMenuList .listItem > a {
font-size: var(--fz-30);
font-weight: 500;
color: #000;
transition: all 0.3s;
position: relative;
}
.allMenu .allMenuNav .allMenuList .subMenu {
position: relative;
}
.allMenu .allMenuNav .allMenuList .subMenu ul {}
.allMenu .allMenuNav .allMenuList .subMenu ul li {
transition: all 0.3s;
position: relative;
}
.allMenu .allMenuNav .allMenuList .subMenu ul li:hover {
color: #fff;
padding-left: 18px;
}
.allMenu .allMenuNav .allMenuList .subMenu ul li::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
top: 50%;
left: 0;
background-color: #fff;
border-radius: 2px;
opacity: 0;
transform: scale(0) translateY(-50%) rotate(-90deg);
transition: opacity .2s, transform .3s .1s;
}
.allMenu .allMenuNav .allMenuList .subMenu ul li:hover::before {
opacity: 1;
transform: scale(1) translateY(-50%) rotate(45deg);
}	
.allMenu .allMenuNav .allMenuList .subMenu ul li  + li{
margin-top: 8px;
}
.allMenu .allMenuNav .allMenuList .subMenu ul a {
transition: all 0.3s;
font-weight: 400;
font-size: var(--fz-18);
color: #666;
}

footer{
background-color: #111;
}
.footer .footer-wrap {
position: relative;
}
.footer .content1 {
border-bottom: 1px solid #333;
}
.footer .content1 .box1,
.footer .content2 .box1 {
border-right: 1px solid #333;
}
.footer .content1 .content-wrap{
display: flex;
max-width: 1840px;
width: 97%;
margin: 0 auto;
}
.footer .content1 .box{
padding: 60px 40px 40px;
}
.footer .content1 .box1 {
max-width: 500px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
}
.footer .content1 .copy-right {
font-size: var(--fz-18);
color: #8a8a8a;
line-height: 1.4;
}
.footer .content1 .box2 {
width: 100%;
}
.footer .content1 .box2 .box-title{
font-size: var(--fz-20);
color: var(--main-color);
}
.footer .content1 .box2 .menu-list{
display: flex;
width: 100%;
align-items: flex-start;
justify-content: space-between;
}
.footer .content1 .box2 .menu-list > .list-item{}
.footer .content1 .box2 .menu-list > .list-item > a{
font-size: var(--fz-20);
color: #fff;
}
.footer .content1 .box2 .menu-list .subMenu-list{
margin-top: 25px;
}
.footer .content1 .box2 .menu-list .subMenu-list .list-item{}
.footer .content1 .box2 .menu-list .subMenu-list li + li{
margin-top: 5px;
}
.footer .content1 .box2 .menu-list .subMenu-list li a{
font-size: var(--fz-18);
color: #8a8a8a;
}
.footer .content2 .content-wrap{
max-width: 1840px;
width: 97%;
margin: 0 auto;
position: relative;
}
.footer .content2 address {
display: flex;
}
.footer .content2 .box {
padding: 40px 40px 60px 40px;
}
.footer .content2 .box1 {
max-width: 500px;
width: 100%;
}
.footer .content2 .box .address-item {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.footer .content2 .address-item + .address-item {
margin-top: 5px;
}
.footer .content2 .address-item .address-title {
font-size: var(--fz-18);
color: #8a8a8a;
font-weight: 600;
width: 12vw;
flex-shrink: 0;
}
.footer .content2 .address-item .address-text {
font-size: var(--fz-18);
color: #8a8a8a;
}
.footer .top-btn {
position: absolute;
right: 40px;
bottom: 115px;
background: transparent;
width: 40px;
height: 40px;
border: none;
z-index: 2;
}
.footer .top-btn::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: clip-path 0.2s;
clip-path: inset(100% 100% 0% 0%);
background-color: #fff;
}
.footer .top-btn:hover::before{
clip-path: inset(0% 0% 0% 0%);
}
.footer .top-btn .icon-arr {
position: relative;
display: inline-block;
width: 18px;
height: 18px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(-45deg) translateY(1.5px) translateX(-1.5px);
transition: all 0.2s;
}
.footer .top-btn:hover .icon-arr {
border-top: 1px solid var(--main-color);
border-right: 1px solid var(--main-color);
}
.footer .top-btn .icon-arr::before {
content: '';
position: absolute;
inset: 0;
transition: opacity 0.2s;
opacity: 1;
background: linear-gradient(to bottom right, transparent calc(50% - 1px), #fff calc(50% - 1px), #fff 50%, transparent 50%);
}
.footer .top-btn .icon-arr::after {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.2s;
background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--main-color) calc(50% - 1px), var(--main-color) 50%, transparent 50%);
}
.footer .top-btn:hover .icon-arr::before {
opacity: 0;
}
.footer .top-btn:hover .icon-arr::after {
opacity: 1;
}

@media screen and (max-width: 1660px) {
.pcNav {
display: none;
}
.head .gnb .lang .lang-btn {
padding: 15px;
}
.head .gnb .allMenu-btn {
height: 50px;
padding: 0 15px;
}
.head .gnb .allMenu-btn div {
width: 20px;
}
.footer .top-btn {
top:40px;
bottom:auto;
}
.footer .content1 .box1 {
width: 100%;
max-width: none;
border-left: 1px solid #333;
padding: 40px;
gap: 20px;
}
.footer .content1 .box2 {
display: none;
}
.footer .content2 address {
display: flex;
flex-direction: column;
border-left: 1px solid #333;
border-right: 1px solid #333;
padding: 40px 40px 60px 40px;
}
.footer .content2 .box1 {
width: 100%;
max-width: none;
border-right:none;
padding: 0;
}
.footer .content2 .box2 {
padding: 0;
}
}

@media screen and (min-width: 601px) {
.allMenu .allMenuNav .allMenuList .listItem:hover::before {
opacity: 1;
}
.allMenu .allMenuNav .allMenuList .listItem:hover > a,
.allMenu .allMenuNav .allMenuList .listItem:hover .subMenu ul a {
color: #fff;
}
}

@media screen and (max-width: 980px) {
.allMenu .allMenuNav {
flex-direction: column-reverse;
}
.allMenu .allMenuNav .slogan {
width: 100%;
height: auto;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 2vw;
border-right:none;
}
.allMenu .allMenuNav .slogan .sloganTitle {
font-size: var(--fz-30);
}
.allMenu .allMenuNav .slogan .sloganText {
margin-top: 0;
text-align: right;
font-size: var(--fz-18);
width: 40%;
}
.allMenu .allMenuNav .allMenuList {
width: 100%;
height: auto;
flex: 1;
padding-top: 90px;
background-color: #fff;
}
.allMenu .allMenuNav .allMenuList .listItem {
padding: 20px;
}
.allMenu .allMenuNav .allMenuList .listItem:nth-child(-n+3){
border-top: 1px solid #CACACA;
}
.allMenu .allMenuNav .allMenuList .listItem > a {
font-size: var(--fz-20);
}
}

@media screen and (max-width: 812px) {
.head {height: 50px;}
.footer .content1 .box1,
.footer .content2 address{
padding: 40px 20px;
}
.footer .content2 .address-item .address-title {
width: 130px;
flex-shrink:0;
}
}

@media screen and (max-width: 600px) {
.allMenu .allMenuNav .slogan {
display: none;
}
.allMenu .allMenuNav .allMenuList {
padding: 90px 0 10vw;
align-items: center;
justify-content: flex-start;
flex-direction: column;
flex-wrap: nowrap;
}
.allMenu .allMenuNav .allMenuList .listItem {
border: none;
width: 100%;
height: auto;
position: relative;
padding: 0;
}
.allMenu .allMenuNav .allMenuList .listItem > a {
padding: 20px;
width: 100%;
}
.allMenu .allMenuNav .allMenuList .listItem > a::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-top: 1px solid #CACACA;
border-right: 1px solid #CACACA;
transition: transform 0.3s;
right: 20px;
top: calc(50% - 5px);
transform: translateY(-50%) rotate(135deg);
}
.allMenu .allMenuNav .allMenuList .listItem:nth-child(1),
.allMenu .allMenuNav .allMenuList .listItem:nth-child(2),
.allMenu .allMenuNav .allMenuList .listItem:nth-child(4),
.allMenu .allMenuNav .allMenuList .listItem:nth-child(5){
border-right: none;
}
.allMenu .allMenuNav .allMenuList .subMenu ul li::before {
background-color: var(--main-color);
}
.allMenu .allMenuNav .allMenuList .listItem .subMenu {
overflow: hidden;
height: 0;
transition: height 0.3s;
}
.allMenu .allMenuNav .allMenuList .subMenu ul {
padding: 10px 20px 20px;
}
.allMenu .allMenuNav .allMenuList .listItem.active .subMenu {
height: auto;
}
.allMenu .allMenuNav .allMenuList .listItem.active > a::after {
transform: translateY(-50%) rotate(-45deg);
}
}