@charset 'utf-8';

/* common */
:root {
    --baseFont: 'Pretendard', 'Malgun Gothic', 'verdana', sans-serif;
	--mainC: #EE202D;
	--subC: #;
}

.flexBox{ display:flex;}
.flexBox.center{ display:flex; justify-content:center; align-items:center; }

figure.fitBox{ position: relative; width: 100%; height: 100%; overflow: hidden;}
figure.fitBox img{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; min-width: 100%; min-height:100%; object-fit: cover;}

.w1600{ max-width:1600px; margin: 0 auto;} 
.w1400{ max-width:1400px; margin: 0 auto;}
.m1{ color:var(--mainC); }

#cursor{ position: relative; position: absolute; transform-origin: center center;  z-index: 50; pointer-events: none; overflow: hidden; animation: cursorR 0.5s ease forwards;  opacity: 0;
user-select: none; width: 150px; height: 150px; border-radius:50%; display:flex; justify-content:center; align-items:center; display:none; }
#cursor .img{ position: absolute; transform-origin: 50% 50%; animation: rotate_img 6s linear infinite;}
#cursor.fade{ animation: cursorS 0.5s ease forwards; opacity: 1; display:block; }

#topBtn{ position: relative; position: fixed; right: 30px; bottom: 60px; width: 80px; height: 80px; z-index: 999; display:flex; justify-content:center; align-items:center; display:none; transition:all 0.5s; }
#topBtn:before{ content:''; display:block; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; display:block; width: 80px; height: 80px;  border-radius:50%; background: rgba(17,17,17,0.9); z-index: -1; transition:all 0.5s; }
#topBtn path{ transition:all 0.5s; }
@media (hover: hover) {
	#topBtn:hover:before{ width: 100px; height: 100px;}
	#topBtn:hover path{ stroke: var(--mainC); }
}

#viewBtn{ text-align: center; }
#viewBtn a{ display:inline-flex; align-items:center; color:#fff; }
#viewBtn a .txt{ position: relative; margin-right: 26px; font-weight: 500;}
#viewBtn a .txt:after{ content:''; position:absolute; top: calc(100% + 2px);display:block; width: 100%; height: 1px; background: #ffff; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease;}
#viewBtn a figure{ position: relative; display:flex; justify-content:center; align-items:center; }
#viewBtn a figure:before{ content:''; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 30px; height: 30px; background: var(--mainC); border-radius:50%; z-index: -1;
transition:all 0.5s; }
#viewBtn a:hover figure:before{ width: 50px; height: 50px;}
#viewBtn a:hover .txt:after{ transform: scaleX(1); transform-origin: left;}

/* header */
header{ position: relative; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: all 0.5s; }
header .headerBox{ margin: 0 60px; display:flex; justify-content:space-between; align-items:center; height: 90px;}
header .headerBox > div{ display:flex; align-items:center; height: 100%;}
header .headerBox .logo .txt path{ transition:all 0.5s; }
header .headerBox nav,
header .headerBox nav #gnb{ height: 100%; display:flex; }
header .headerBox nav #gnb > li{ position: relative; }
header .headerBox nav #gnb > li:not(.on):after{content:''; position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 180px; height: 100%; background: var(--mainC);  border-radius: 20px; opacity: 0; transition:all 0.5s; }
header .headerBox nav #gnb > li > a{ position: relative; font-size:20px; color:#fff; font-weight: 500; z-index: 5; transition:all 0.5s; display:flex; justify-content:center; align-items:center; height: 100%; padding: 0 30px; }
header .headerBox nav #gnb > li .depth2{ position: relative; position: absolute; top: calc(100% + 30px); transform:translateX(-50%); left: 50%; display:none; }
header .headerBox nav #gnb > li .depth2 li{ overflow: hidden; }
header .headerBox nav #gnb > li .depth2 li:not(:last-child){ margin-bottom: 15px;}
header .headerBox nav #gnb > li .depth2 li a{ display:block; width: 100%; font-size:17px; color:rgba(255,255,255,0.6);  text-align: center; white-space:nowrap; transition:all 0.3s; }
header .headerBox nav #gnb > li .depth2:before{ content:""; display:block;  position: absolute; top:-120px; transform:translateX(-50%); left: 50%; width: 180px; height: calc(100% + 150px); background:var(--mainC); border-radius: 20px; z-index: -1;}
header .headerBox nav #gnb > li .depth2 li:first-child a:before{ content:''; display:block; position: absolute; transform:translateX(-50%); top: -30px; left: calc(50% - 5px); width: 40px; height: 2px; border-radius:20px; background: #fff;}
header .headerBox nav #gnb > li .depth2 li:first-child a:after{ content:''; display:block; position: absolute; transform:translateX(-50%); top: -34px; left: calc(50% + 20px); width: 6px; height: 6px;
 border:2px solid #fff; border-radius:50%; }
header .headerBox nav #gnb > li .depth2 li:hover a{ color:#fff; }
header .headerBox nav #gnb > li:hover:not(.on):after{ opacity: 1; }
header .headerBox #sideBox{ display:flex; margin-left: 30px;}
header .headerBox #sideBox > div{ cursor:pointer; }
header .headerBox #sideBox #lang{ margin-right: 40px; }
header .headerBox #sideBox #lang path{ transition:all 0.5s; }
header .headerBox #sideBox #lang:hover path{ stroke:var(--mainC) !important; }
header .headerBox #sideBox #menuBar{ position: relative; width: 24px; height: 24px; }
header .headerBox #sideBox #menuBar span{ position: absolute; display:block; width: 8px; height: 8px; border-radius:50%; background: #fff; transition:all 0.3s; }
header .headerBox #sideBox #menuBar span.circleM{ background: transparent; border:2px solid var(--mainC); top: 0; left: 0; z-index: 1;}
header .headerBox #sideBox #menuBar span.circleS1{ top: 0; left: calc(100% - 8px); }
header .headerBox #sideBox #menuBar span.circleS2{ top: calc(100% - 8px);; left: 0; }
header .headerBox #sideBox #menuBar span.circleS3{ top: calc(100% - 8px);; left: calc(100% - 8px); }
header .headerBox #sideBox #menuBar figure{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 100%; opacity: 0; transition:all 0.5s 0.3s; z-index: 5; }
header .headerBox #sideBox #menuBar:hover span{ transform:translate(-50%,-50%); top: 50%; left: 50%;}
header .headerBox #sideBox #menuBar:hover span.circleM{ animation: circleScale 0.3s 0.3s forwards; }
header .headerBox #sideBox #menuBar:hover span.circleS{ animation: fadeOut 0.3s 0.3s forwards; }
header .headerBox #sideBox #menuBar.all:hover figure{ animation: fadeIn 0.5s 0.7s forwards;}
header .headerBox #sideBox #menuBar.all:hover span.circleM{ animation: circleScale2 0.3s 0.5s forwards;}
header .headerBox #sideBox #menuBar.all:hover span.circleS{ animation: fadeOut 0.3s 0.3s forwards;}

header.black .headerBox .logo .txt path{ fill:#000; } 
header.black .headerBox nav #gnb > li > a{ color:#222; } 
header.black .headerBox nav #gnb > li > a:hover{ color:#fff; }
header.black .headerBox nav #gnb > li.on:hover > a{ color:#fff; }
header.black .headerBox #sideBox #lang path{ stroke:#000; }
header.black .headerBox #sideBox #menuBar span.circleS{ background: #000;}

header.last{ top: -100px; }

header.bg{ background: rgba(0, 0, 0, 0.7);}
header.bg .headerBox .logo .txt path{ fill:#fff; } 
header.bg .headerBox nav #gnb > li > a{ color:#fff; }
header.bg .headerBox #sideBox #lang path{ stroke:#fff; }
header.bg .headerBox #sideBox #menuBar span.circleS{ background: #fff;}

header.bg.all{ background: transparent;}
header.all .headerBox #sideBox #lang path{ stroke:#fff ; }
header.all .headerBox #sideBox #menuBar span.circleS{ background: #fff; }

header.down{ transform: translateY(-100%);}
header.all.down{ transform: translateY(0%); }

#allMenu{ position: relative; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999;background: #111; padding-bottom: 100px; display:none; }
#allMenu .bgIcon{ position: absolute; bottom: 0; right: 0;}
#allMenu > div{ height: 100%; display:flex; align-items: flex-end; }
#allMenu #allGnb #gnb > li { display:flex; align-items:center; }
#allMenu #allGnb #gnb > li:not(:last-child){ margin-bottom: 10px;}
#allMenu #allGnb #gnb > li > a{ font-size:60px; font-weight: 500; color:rgba(255,255,255,0.3); display:flex; align-items:center;  min-width:290px; margin-right: 150px; transition:all 0.3s; overflow: hidden; }
#allMenu #allGnb #gnb > li > a:before{ content:''; display:block; width: 14px; height: 14px; border-radius:50%;  box-shadow: 0 0 0 2px var(--mainC) inset;  margin-right: 16px; transition:all 0.3s; }
#allMenu #allGnb #gnb > li .depth2{ display:none; }
#allMenu #allGnb #gnb > li .depth2 li{ display:inline-block;  }
#allMenu #allGnb #gnb > li .depth2 li:not(:last-child){ margin-right: 60px;}
#allMenu #allGnb #gnb > li .depth2 li a{ position: relative; font-size:20px; color:#fff; transition:all 0.3s; }
#allMenu #allGnb #gnb > li .depth2 li a:after{ content:''; display:block; position: absolute; top: calc(100% + 5px); transform:translateX(-50%); left: 50%; width: 0; height: 1px; transition:all 0.3s;  background: var(--mainC);}

#allMenu #allGnb #gnb > li.on > a{ pointer-events: none; }
#allMenu #allGnb #gnb > li.on > a,
#allMenu #allGnb #gnb > li:hover > a{ color:#fff; }
#allMenu #allGnb #gnb > li:hover > a:before{ box-shadow: 0 0 0 7px var(--mainC) inset;}
#allMenu #allGnb #gnb > li .depth2 li:hover a{ color:var(--mainC); }
#allMenu #allGnb #gnb > li .depth2 li:hover a:after{ width: 100%;}

/* animation */
@keyframes fadeOut{
	0%{ opacity: 1;}
	100%{ opacity: 0; }
}

@keyframes fadeIn{
	0%{ opacity: 0;}
	100%{ opacity: 1; }
}

@keyframes circleScale{
	0%{ width: 8px; height: 8px; border:2px solid var(--mainC); }
	100%{ width: 16px; height: 16px; border:3px solid var(--mainC); }
}

@keyframes circleScale2{
	0%{ width: 8px; height: 8px; border:2px solid var(--mainC); }
	70%{ width: 16px; height: 16px; border:3px solid var(--mainC); opacity: 1;}
	100%{ width: 16px; height: 16px; border:3px solid var(--mainC); opacity: 0;}
}

@keyframes circle{
	0%{ opacity: 0;}
	50%{ opacity: 1; }
	100%{ opacity: 0; }
} 

/* footer */
.footer{ clip-path: inset(0 0 0); }
.footer_in{ position: relative;  background: #000; padding: 80px 0 100px; } 
.footer_in .infoBox{ color:rgba(255,255,255,0.6 ); line-height: 1.5; margin-bottom: 50px;}
.footer_in .infoBox li:not(:last-child){ margin-bottom: 10px;}
.footer_in .infoBox span{ display:inline-block; min-width:40px; margin-right: 20px; color:#fff; }
.footer_in .bBox{ display:flex; justify-content:space-between; align-items: flex-end;}
.footer_in .bBox > div{ display:flex; flex-direction: column; justify-content:space-around; }
.footer_in .bBox .copyBox{ color:rgba(255,255,255,0.7); text-align: right; font-size:14px; padding-top: 40px;}
.footer_in .bBox .copy{ color:#fff; }
.footer_in .bBox .linkBox{ display:flex; align-items:center; }
.footer_in .bBox .linkBox li:not(:last-child){ margin-right: 50px;}
.footer_in .bBox .linkBox li a{ display:flex; align-items:center; }
.footer_in .bBox .linkBox li a span{ position: relative; color:#fff; margin-right: 20px;}
.footer_in .bBox .linkBox li a span:after{ content:''; position:absolute; top: calc(100% + 2px); display:block; width: 100%; height: 1px; background: #ffff; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease;}
.footer_in .bBox .linkBox li:hover a span:after{ transform: scaleX(1); transform-origin: left;}
 
/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px; font-size:18px;	line-height: 1.5; word-break:break-all; }
.privacy h2 { font-weight:bold; color:#000; text-align: left; margin:0 0 80px; text-align: center; }
.privacy h3 { display:inline-block; vertical-align:bottom;}
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ font-size:18px;color:#3680b9;font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:18px; line-height:140%;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; }
.sTxt h3 { font-size:17px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }


/* animation */
@keyframes rotate_img{
	0%{ transform: rotate(0);}
	100%{ transform: rotate(360deg); }
} 

@keyframes cursorS{
	0%{ transform: scale(0); }
	100%{ transform: scale(1); }
}

@keyframes cursorR{
	0%{ transform: scale(1); }
	100%{ transform: scale(0); }
}