@charset 'utf-8';
/* common */
:root {
    --baseFont: 'Pretendard', 'Malgun Gothic', 'verdana', sans-serif;
	--gan : "Gantari", sans-serif;
	--mainC: #004EA2;
	--subC: #;
	--hHeight:90px; 
	--hBg: 325px; 
}

body.scrollN{ height: 100vh !important; overflow: hidden !important;}
body.scrollN{ -ms-overflow-style:none scrollbar-width:none }
body.scrollN::-webkit-scrollbar { display: none; }

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

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

/* header */
img,
svg path{ transition:all 0.5s; }

.w1720{ max-width:1720px; margin: 0 auto; width: 100%; }

.mb150{ margin-bottom: 150px; }
 
.gan{ font-family: var(--gan);}

.flex-box{ display:flex;}
.flex-c{ 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;}

#mobile{ display:none; }

.depth3{ display:none; }

#viewbtn > figure{ position: relative; width: 20px; height: 20px; overflow: hidden;}
#viewbtn > figure svg{ position: absolute; transform: translate(0, 0); transition:all 0.4s 0.1s, opacity 0.4s; }
#viewbtn > figure .on{ opacity: 1; }
#viewbtn > figure .off{ transform: translate(-20px, 20px); opacity: 0; }
#viewbtn:hover > figure .on{ transform: translate(20px, -20px); opacity: 0; }
#viewbtn:hover > figure .off{ transform: translate(0, 0); opacity: 1; }
#viewbtn > figure.black path{ stroke:#000; }
#viewbtn > figure.black rect{ fill:#000; }
#viewbtn > figure.white path{ stroke:#fff; }
#viewbtn > figure.white rect{ fill:#fff; }

/* header */
header{ position: relative; position: fixed; top: 0; left: 0; z-index: 100000; width: 100%; height: var(--hHeight); transform:translateY(-100%); transition:all 1s; }
header:after{ content:''; display:block; width: 0; height: 1px; background: #eee; position: relative; left: 0; transition:all 1s; }
header .header-box{ position: relative; display:flex; align-items:center; padding: 0 100px; height: 100%; }
header .gnb-bg{  position: absolute; top: 0; left:0; display:block;  width: 100%; height: 0; background: #fff; transition: all 0.5s 0.2s; }
header .header-box .logo a{ display:block; }
header .header-box .logo a svg{ height: 100%; }
header .header-box .nav-wrap{ position: relative; width: 100%; height: 100%; display:flex; align-items:center; justify-content: flex-end;}
header .header-box nav{ height: 100%; }
header .header-box nav #gnb{ position: relative; display:flex; height: 100%; margin-right: 80px;}
header .header-box nav #gnb > li{ position: relative; height: 100%; }
header .header-box nav #gnb > li > a{ display:flex; justify-content:center; align-items:center; height: 100%; padding: 0 30px; font-size:19px; color:#fff; letter-spacing: -0.57px; 
font-weight: 600; transition:padding 0.5s 0.2s, color 0.5s; }
header .header-box nav #gnb > li:last-child > a{ font-family: var(--gan); }
header .header-box nav #gnb > li > a svg{ margin-left: 10px; }
header .header-box nav #gnb .depth2{ position: absolute; top: 100%; transform:translateX(-50%); left: 50%; padding-top: 50px; pointer-events:none; }
header .header-box nav #gnb .depth2 li{ text-align: center; overflow: hidden; }
header .header-box nav #gnb .depth2 li:not(:last-child){ margin-bottom: 15px;}
header .header-box nav #gnb .depth2 li a{ color:#666; font-size:18px; letter-spacing: -0.54px; position: relative; transform: translateY(100%); display:inline-block; 
width:max-content; transition:transform 0.3s 0s, color 0.5s; }
header .header-box .menu-btn{ position: relative; width: 40px; height: 32px; display:flex; justify-content:center; align-items:center; flex-shrink:0; cursor:pointer; }
header .header-box .menu-btn .allclose{ opacity: 0; pointer-events:none; transition:all 0.5s; }
header .header-box .menu-btn:after,
header .header-box .menu-btn:before{ content:''; display:block; width: 100%; height: 4px; background: #fff; position: absolute; transform:translateX(-50%); left: 50%; transition:all 0.5s; }
header .header-box .menu-btn:after{ top: 0; }
header .header-box .menu-btn:before{ top: calc( 100% - 4px ); }
header .header-box .menu-btn span{ position: absolute; display:block; width: 100%; height: 4px; background: #fff; transform:translateX(-50%); left: 50%; transition:all 0.5s; }
@media (hover: hover) {
	header .header-box .menu-btn:hover span{ width: 10px; height: 10px; }
	header .header-box .menu-btn:hover:after,
	header .header-box .menu-btn:hover:before{ width: 10px; height: 10px; transform:translate(-50%,-50%); top: 50%;}
}

header.active{ transform:translate(0); opacity: 1; }

header.blue .gnb-bg{ height: 100%; box-shadow:0 0 15px rgba(0,0,0,0.1);  }
header.blue .header-box .logo svg path{ fill:var(--mainC); }
header.blue .header-box nav #gnb > li > a{ color:#000;}
header.blue .header-box nav #gnb > li > a svg path{ stroke:#000; }
header.blue .header-box .menu-btn:after,
header.blue .header-box .menu-btn:before,
header.blue .header-box .menu-btn span{ background: #000; }

@media (hover: hover) {
	header:hover .logo svg path{ fill:var(--mainC); }
	header:hover:after{ width: 100%; transition-delay: 0.5s;}
	header:hover .gnb-bg{ height: var(--hBg); box-shadow:0 0 15px rgba(0,0,0,0.1); transition-delay:0s; }
	header:hover .header-box nav #gnb > li > a{ color:#111; padding: 0 50px;}
	header:hover .header-box nav #gnb > li > a svg path{ stroke: #000; }
	header:hover .header-box nav #gnb > li:hover > a svg path{ stroke:var(--mainC); }
	header:hover .header-box nav #gnb > li:hover > a{ color:var(--mainC); }
	header:hover .header-box nav #gnb .depth2{ pointer-events:inherit; }
	header:hover .header-box nav #gnb .depth2 li a{ transform: translateY(0);  transition:transform 0.3s 0.5s, color 0.5s; }
	header:hover .header-box .menu-btn:after,
	header:hover .header-box .menu-btn:before,
	header:hover .header-box .menu-btn span{ background: #000; }
}

header.all:after{ width: 0; }
header.all .header-box .logo svg path{ fill:var(--mainC); }
header.all .header-box nav{ opacity: 0; pointer-events:none; }
header.all .gnb-bg{ height: 0; }
header.all .header-box .menu-btn .allclose{ opacity: 1; pointer-events:auto; }
header.all .header-box .menu-btn span{ width: 10px; height: 10px; opacity: 0; background: #000; }
header.all .header-box .menu-btn:after,
header.all .header-box .menu-btn:before{ width: 10px; height: 10px; transform:translate(-50%,-50%); top: 50%; opacity: 0; background: #000; }

#allmenu{ position: relative; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: #fff; padding-top: 100px; display:none; }
#allmenu .inner{ padding: 0 100px 0 200px; display:flex; justify-content:space-between; }
#allmenu .inner .allgnb{ margin-top: 120px; }
#allmenu .inner .allgnb #gnb > li{ display:flex; align-items:center; }
#allmenu .inner .allgnb #gnb > li:not(:last-child){ margin-bottom: 40px; }
#allmenu .inner .allgnb #gnb > li > a{ font-size:60px; font-weight: 700; color:#ddd; letter-spacing: -1.8px; min-width:203px; margin-right: 150px; transition:all 0.5s;  }
#allmenu .inner .allgnb #gnb .depth2{ display:flex; align-items:center; }
#allmenu .inner .allgnb #gnb .depth2 li{ display:flex; align-items:center; }
#allmenu .inner .allgnb #gnb .depth2 li:not(:last-child):after{ content:''; display:block; width: 1px; height: 10px; background: #ddd; margin: 0 20px; }
#allmenu .inner .allgnb #gnb .depth2 li a{ position: relative; color:#aaa; font-size:20px; letter-spacing: -0.6px; transition:all 0.5s; }
#allmenu .inner .allgnb #gnb .depth2 li a:before{ content:''; display:block; width: 0; height: 1px; background: #333; position: absolute; bottom: 0; left: 0; transition:all 0.5s; }
#allmenu .inner .allgnb #gnb > li:hover > a{ color:var(--mainC); }
#allmenu .inner .allgnb #gnb > li:hover .depth2 li a{ color:#333; }
#allmenu .inner .allgnb #gnb .depth2 li:hover a:before{ width: 100%; }

#allmenu .btn-box{ position: absolute; bottom: 60px; left: 0; padding: 0 100px; width: 100%; }
#allmenu .btn-box .link-box{ display:flex; font-size:18px; }
#allmenu .btn-box .link-box li:not(:last-child){ margin-right: 30px;}
#allmenu .btn-box .link-box li a{ color:#aaa; letter-spacing: -0.54px; font-weight: 500; transition:all 0.5s; }
#allmenu .btn-box .link-box li:hover a{ color:#333; }
#allmenu .btxt{ position: absolute; right: 0; bottom: 0; z-index: -1;}

/* footer */
footer{ position: relative; z-index: 5; background: #171717; overflow: unset;}
footer .footer-inner{ display:flex; justify-content:space-between; padding: 100px 0; }
footer .footer-inner > div:first-child{ display:flex; }
footer .footer-inner > div:last-child{ display:flex; flex-direction:column; align-items: flex-end; }
footer .footer-inner ul li{ letter-spacing: -0.54px; }
footer .footer-inner ul li:not(:last-child){ margin-bottom: 15px; }
footer .footer-inner ul li em{ font-family: var(--gan);}
footer .footer-inner .link-box{ margin: 0 150px; }
footer .footer-inner .link-box li a{ color:#fff; font-weight: 500; display:flex; align-items:center; }
footer .footer-inner .link-box li a svg{ margin-left: 10px;}
footer .footer-inner .link-box li a svg path{ stroke:#fff; }
footer .footer-inner .info-box li{ color:#fff; font-weight: 300; }
footer .footer-inner .info-box li:last-child{ color:rgba(255,255,255,0.4); font-family: var(--gan);}
footer .footer-inner .family-box{ position: relative; width: 240px; height: 60px; margin-bottom: 20px; }
footer .footer-inner .family-box:before{ content:''; display:block; position: absolute; bottom: 0; left: 0; height: 100%; border-radius:50px; border:1.5px solid #fff; width: 100%; 
transition:all 0.5s 0.15s; }
footer .footer-inner .family-box button{ position: relative; width: 100%; height: 100%; color:#fff; display:flex; justify-content:space-between; align-items:center;  padding: 0 25px; text-transform: uppercase; font-family: var(--gan); font-weight: 500; z-index: 2;}
footer .footer-inner .family-box button:after{ content:''; display:block; position:absolute; transform:translateX(-50%); top: 0; left: 50%; width: calc(100% - 10px); height: 1px; background: #fff; 
width: 180px; transition:all 0.7s; opacity: 0; }
footer .footer-inner .family-box button img{ transition:all 0.5s; }
footer .footer-inner .family-box ul{ width: 100%; padding: 30px;display:none; position: absolute; left: 0; bottom: 100%; }
footer .footer-inner .family-box ul li:not(:last-child){ margin-bottom: 10px; }
footer .footer-inner .family-box ul li a{ display:block; color:#fff; }
footer .footer-inner #top-btn{ text-align: right; cursor:pointer; }

footer .footer-inner .family-box.on:before{ height: 275px; background: #000; border-radius:30px; transition-delay:0s; }
footer .footer-inner .family-box.on button:after{ opacity: 1;} 
footer .footer-inner .family-box.on button img{ transform:rotate(180deg); } 

/* privacy */
.privacy { color:#333; width: 100%; box-sizing:border-box; font-size:18px; line-height: 1.66; word-break:break-all; }
.privacy .title-box { margin-bottom: 50px; }
.privacy .title-box .title{ color:#222; font-size:20px; font-weight: 600; letter-spacing: -0.6px; margin-bottom: 30px; line-height: 1.3; }
.privacy .title-box p:not(.title){ letter-spacing: -0.54px; }
.privacy dl:not(:last-child) { padding-bottom:30px;}
.privacy dl dt{ color:#333; font-weight:500; line-height: 1.3; margin-bottom: 10px; }
.privacy dl dd{ color:#666; font-weight: 300; }
.privacy .prev-box{ margin-top: 100px; display:flex; align-items:center; }
.privacy .prev-box .txt{ color:#222; font-weight: 500; letter-spacing: -0.6px; margin-right: 60px; }
.privacy .prev-box .list-box{ position: relative; width: 400px; }
.privacy .prev-box .list-box button{ width: 100%; height: 70px; display:flex; justify-content:space-between; align-items:center; border: 1px solid #DDD; padding: 0 30px; 
color: #666; font-weight: 300; letter-spacing: -0.54px; }
.privacy .prev-box .list-box button img{ filter:invert(1); --webkit-filter:invert(1); width: 14px; transition:all 0.5s; }
.privacy .prev-box .list-box button.on img{ transform:rotate(180deg); }
.privacy .prev-box .list-box .scroll-box{ width: 100%; background: #fff; padding: 10px; position: absolute; transform:translateX(-50%); left: 50%; top: calc(100% - 1px);  border:1px solid #ddd; 
display:none; }
.privacy .prev-box .list-box ul{ width: 100%;height: 150px; }
.privacy .prev-box .list-box ul li a{ display:block; width: 100%; padding: 10px 20px; color:#666; font-weight: 300; letter-spacing: -0.54px;  display:flex; justify-content:space-between; align-items:center; background: #fff;}

/* paging */
.paging{ display:flex; align-items:center; justify-content:center; margin-top: 100px;}
.paging .arr{display:flex;margin: 0 10px;}
.paging .arr a{ display:flex; width: 30px; }
.paging a{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.paging ul{display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 5px;}
.paging .arr a:not(:last-child),.paging ul li:not(:last-child){margin-right:5px;}
.paging a{ width:30px; height:30px; color: #ccc; font-weight: 600; font-size:18px; border-radius:50%; border:none; }
.paging ul li.on a { color:#000; background: transparent;}
.paging .arr a{border:none; color: #666; font-size:30px; }
.paging .arr a i{ color:#000; }
.paging .arr.right img{ transform:rotate(180deg); }