@charset "utf-8";

/* =========================================================
 * ROOT
 * ========================================================= */
:root {
	--vh: 1vh;

	--color-white: #fff;
	--color-black: #000;
	--color-text: #231f20;
	--color-navy: #212a51;
	--color-navy-2: #232a52;
	--color-footer: #1c1f32;
	--color-wine: #691428;
	--color-red: #a21d3d;
	--color-gray: #777;
	--color-light: #f1f1f1;
	--color-line: #ddd;

	--inner: 1400px;
	--inner-wide: 1600px;
	--inner-full: 1920px;

	--header-h: 100px;
	--ease: .3s;
	--ease-mid: .5s;
	--ease-long: 1s;
}

/* =========================================================
 * COMMON
 * ========================================================= */
html,
body { scrollbar-width: thin; scroll-behavior: auto;}
html::-webkit-scrollbar,
body::-webkit-scrollbar { width:8px; height:8px;}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb { background:rgba(0,0,0,.25); border-radius:10px;}

.wrap { overflow: hidden;opacity:0;}
.wrap.active{opacity:1;}
.inner { position:relative; margin:0 auto; max-width:var(--inner); width:100%;}
.tit,
.desc { display:block;}
.ft_cz { font-family:"Cinzel", serif;}
.pc { display:block;}
.tab { display:none;}
.mob { display:none;}
.pc_only { display: block;}

@media all and (max-width:1400px) {
	.inner { padding:0 clamp(20px,2.8571vw,40px);}
}

@media all and (max-width:1024px) {
	.pc_only { display: none;}
	.tab { display:block;}
}

@media all and (max-width:768px) {
	.inner { min-width:320px;}
	.pc { display:none;}
	.mob { display:block;}
}

/* =========================================================
 * HEADER
 * ========================================================= */
header { position:fixed; left:0; top:0; z-index:100; width:100%; height:var(--header-h); opacity:0; pointer-events:none;  transition: opacity .8s ease, transform .5s ease, top .3s ease;}
header > .inner:before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background-color:#fff;transition:0.6s;z-index:-1;opacity:0;transition:0.4s;}
header > .inner { display:flex; justify-content:space-between; align-items:center; max-width:100%; height:100%; padding:0 3.6458vw; transition:0.4s; position:static;}
header.h_up > .inner { transform: translateY(-100%);}
header h1 a { display:block; width:227px; height:34px; background:url(../images/en-logo-wh.svg?v=3) center/100% auto no-repeat; transition:var(--ease);}
header .hd_right { display:flex; align-items:center; gap:0 2.3438vw; height:100%;}
header .gnb { display:flex; align-items:center; gap:0 3.125vw; height:100%;}
header .gnb > li { display:flex; align-items:center; position:relative; height:100%;}
header .gnb > li > a { position:relative; font-size:clamp(16px,1.0417vw,20px); color:var(--color-white); font-weight:500; transition:var(--ease);}
header .gnb > li > a::before { content:''; position:absolute; left:50%; top:calc(100% + 25px); transform:translateX(-50%); width:0; height:1px; background:var(--color-white); transition:var(--ease-mid);}
header .gnb > li:hover > a::before { width:100%;}
/*header .gnb .depth { position:absolute; left:50%; top:80%; transform:translateX(-50%); min-width:180px; width:max-content; padding:2.0833vw .8333vw; background:var(--color-navy); text-align:center; opacity:0; pointer-events:none; transition:.35s;}*/
/*메뉴왼쪽정렬*/
header .gnb .depth { position:absolute; left:-1.5vw; top:80%; min-width:calc(100% + 3vw); width:max-content; padding:2.0833vw 1.5vw; background:var(--color-navy); opacity:0; pointer-events:none; transition:.35s;}
header .gnb .depth.flex { position:absolute; left:50%; top:80%; transform:translateX(-50%); min-width:180px; width:max-content; padding:2.0833vw 1.5vw; background:var(--color-navy); opacity:0; pointer-events:none; transition:.35s;}
header .gnb > li:hover .depth { top:100%; opacity:1; pointer-events:auto;}
header .gnb .depth li ~ li { margin-top:.9375vw;}
header .gnb .depth.flex { display:flex; flex-wrap:wrap; gap:.9375vw; max-width:560px;}
header .gnb .depth.flex li { width:calc((100% - 1.875vw) / 3);}
header .gnb .depth.flex li ~ li { margin-top:0;}
header .gnb .depth li a { display:inline-block; position:relative; font-size:clamp(12px,.8333vw,16px); color:var(--color-white); font-weight:500; text-align:center;}
header .gnb .depth li a:hover { text-decoration:underline;}
header .lang_box { position:relative; height:18px;}
header .btn_lang { width:18px; height:100%; background:url(../images/lang-wh.png) center/100% auto no-repeat; transition:var(--ease);}
header .lang_box ul { display:none; position:absolute; left:50%; top:calc(100% + .9375vw); transform:translateX(-50%); width:max-content; padding:.7292vw .9375vw; background:var(--color-navy); border-radius:10px;}
header .lang_box ul li ~ li { margin-top:.9375vw;}
header .lang_box ul li a { font-family:'Roboto'; font-size:12px; color:var(--color-white); font-weight:700;}
header .lang_box ul li:hover a,
header .lang_box ul li.active a { text-decoration:underline;}
header .btn_nav { position:relative; width:25px; height:10px;}
header .btn_nav::before,
header .btn_nav::after { content:''; position:absolute; left:50%; transform:translateX(-50%); width:100%; height:2px; background:var(--color-white); box-sizing:border-box; transition:var(--ease);}
header .btn_nav::before { top:0;}
header .btn_nav::after { bottom:0;}
.active header { opacity:1; pointer-events:auto;  transition-delay:3s, 3s, 0s;}

header.on > .inner::before {opacity:1;}
header.on h1 a { background-image:url(../images/en-logo-bl.svg?v=2);}
header.on .gnb > li > a { color:var(--color-text);}
header.on .btn_lang { background-image:url(../images/lang-bl.png);}
header.on .btn_nav span,
header.on .btn_nav::before,
header.on .btn_nav::after { background:var(--color-text);}

header.bl h1 a { background-image:url(../images/en-logo-bl.svg?v=2);}
header.bl .gnb > li > a { color:var(--color-text);}
header.bl .btn_lang { background-image:url(../images/lang-bl.png);}
header .gnb > li > a::before,
header.bl .btn_nav span,
header.bl .btn_nav::before,
header.bl .btn_nav::after { background:var(--color-text);}

@media all and (max-width:1200px) {
	header .gnb { gap:0 1.5vw;}
}

@media all and (max-width:1024px) {
	:root { --header-h:clamp(55px,13.8889vw,100px);}
	header h1 a { width:clamp(122px,29.1667vw,227px); height:clamp(20px,4.7222vw,34px);}
	header .gnb { display:none;}
	header .btn_nav { width:clamp(24px,2.8646vw,55px); height:clamp(16px,1.3021vw,25px);}
	header .btn_nav span { position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:.1389vw; background:var(--color-white); box-sizing:border-box;}
	header .btn_nav::before,
	header .btn_nav::after { height:.1389vw;}
	header .hd_right { gap:0 min(24px,3.5vw);}
	header .lang_box ul { top:calc(100% + min(16px,2vw)); padding:min(16px,3vw) min(24px,4vw);}
	header .lang_box ul li ~ li { margin-top: min(16px,2vw);}
}

@media all and (max-width:768px) {
	header .btn_nav span, 
	header .btn_nav::before,
	header .btn_nav::after { height:2px;}
	header .hd_right { gap:0 min(24px,5vw);}
	header h1 { padding-top: 5px;}
	header h1 a { width: min(140px, 38vw); height: min(30px, 10vw);}
	header .lang_box ul { top:calc(100% + min(16px,3vw)); padding:min(16px,3vw) min(24px,5vw);}
	header .lang_box ul li ~ li { margin-top: min(16px,3vw);}
}

/* =========================================================
 * NAV
 * ========================================================= */
.nav { overflow:hidden; display:none; position:fixed; left:0; right:0; top:0; height:calc(var(--vh) * 100); background:var(--color-navy-2); color:var(--color-white);}
.nav .inner { height:100%;}
.nav .top { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; padding:3.6458vw 0 2vw;}
.nav .top .lef { display:flex; align-items:flex-end; gap:0 2.2917vw;}
.nav .top strong { display:inline-block; font-family:'Roboto'; font-size:3.125vw; font-weight:700; letter-spacing:.1px; transform:translateX(10px); opacity:0; transition:.4s;}
.nav.on .top strong { opacity:1; transform:none;}
.nav .top .lang { display:flex; align-items:center; gap:0 5px; font-family:'Roboto';}
.nav .top .lang li { transform:translateX(10px); opacity:0; transition:.4s;}
.nav .top .lang li a { display:inline-block; width:clamp(35px,2.6042vw,50px); line-height:clamp(16px,1.0417vw,20px); font-size:12px; font-weight:700; border:1px solid var(--color-white); text-align:center; box-sizing:border-box;}
.nav .top .lang li.active a { color:var(--color-black); background:var(--color-white);}
.nav.on .top .lang li { opacity:1; transform:none;}
.nav .nav_close { position:relative; width:1.0417vw; height:.8854vw;}
.nav .nav_close::before,
.nav .nav_close::after { content:''; position:absolute; left:50%; width:100%; height:1px; background:var(--color-white);}
.nav .nav_close::before { transform:translateX(-50%) rotate(40deg);}
.nav .nav_close::after { transform:translateX(-50%) rotate(-40deg);}
.nav .nav_menu { display:flex; align-items:stretch; height:calc(100% - 7.3vw);}
.nav .nav_menu > li { flex:1; position:relative; top:-10%; height:100%; padding-left:0.8vw; border-right:1px solid rgba(255,255,255,.1); opacity:0; transition:.6s;}
.nav.on .nav_menu > li { top:0; opacity:1;}
.nav.on .nav_menu > li:nth-child(1) { border-left:1px solid rgba(255,255,255,.1);}
/*.nav .nav_menu > li > a { pointer-events:none;}*/
.nav .nav_menu li a span { font-size:clamp(16px,1.25vw,24px); font-weight:700;}
.nav .nav_menu .depth { margin-top:clamp(34px,2.3438vw,40px);}
.nav .nav_menu .depth li ~ li { margin-top:clamp(16px,1.3542vw,25px);}
.nav .nav_menu .depth li a { font-size:clamp(14px,.8854vw,17px); letter-spacing:-.5px;}
.nav .nav_menu .depth li a:hover { text-decoration:underline;}

@media all and (max-width:1024px) {
	header > .inner { position:relative;}
	.nav { display:block; left:100%; z-index:99; width:60%; background:var(--color-white); color:var(--color-black); opacity:0; transition:var(--ease-mid);}
	.nav_dim { display:none; position:fixed; left:0; right:0; top:0; bottom:0; z-index:2; background:rgba(0,0,0,0);}
	.nav.mo_open { left:40%; opacity:1;}
	.nav .inner { padding:0;}
	.nav .top { height:var(--header-h); padding:0 clamp(18px,5vw,36px);}
	.nav .top strong { display:none;}
	.nav .top .lang { gap:0 clamp(23px,6.3889vw,46px);}
	.nav .top .lang li { position:relative; min-width:auto; color:var(--color-black); border:none;}
	.nav .top .lang li ~ li::before { content:''; position:absolute; left:clamp(-23px,-3.1944vw,-12px); top:50%; transform:translateY(-50%); width:1px; height:clamp(8px,2.3611vw,17px); background:var(--color-line);}
	.nav .top .lang li a { width:auto; font-size:clamp(12px,3.3333vw,20px); font-weight:700; letter-spacing:2px;}
	.nav .nav_close { width:clamp(18px,5vw,36px); height:clamp(18px,5vw,36px);}
	.nav .nav_close::before,
	.nav .nav_close::after { height:2px; background:var(--color-gray);}
	.nav .nav_close::before { transform:translateX(-50%) rotate(45deg);}
	.nav .nav_close::after { transform:translateX(-50%) rotate(-45deg);}
	.nav.mo_open .top .lang li,
	.nav.mo_open .nav_menu > li { opacity:1; transform:none; top:0;}
	.nav .nav_menu { overflow:auto; display:block; height:calc(100% - var(--header-h)); border-top:1px solid var(--color-line); scrollbar-width:thin;}
	.nav .nav_menu > li { top:0; height:auto; padding:0; opacity:1;}
	.nav .nav_menu > li > a { display:flex; align-items:center; height:clamp(54px,7.5vw,109px); padding:0 clamp(30px,8.3333vw,60px); border-bottom:1px solid var(--color-line); background:url(../images/nav_arrow_down.png) right clamp(20px,5.5556vw,40px) center/ clamp(14px,4.1667vw,20px) auto no-repeat; pointer-events:auto;}
	.nav .nav_menu > li.active > a { background-image:url(../images/nav_arrow_top.png);}
	.nav .nav_menu > li.not_arr > a { background:none;}
	.nav .nav_menu .depth { display:none; margin-top:0; padding:24px 0; border-bottom:1px solid var(--color-line); /*background:#f5f5f5;*/}
	.nav .nav_menu .depth li ~ li { margin-top:16px;}
	.nav .nav_menu .depth li a { display:flex; align-items:center; padding:0 clamp(30px,8.3333vw,60px); color:var(--color-gray); font-size:clamp(14px,2.2222vw,16px);}
	.nav .nav_menu .depth li a.active,
	.nav .nav_menu .depth li a:hover { text-decoration:underline;}
}

@media all and (max-width:768px) {
	.nav { display:none; width:100%; left:0; z-index:-1;}
	.nav.mo_open { display:block; left:0; opacity:1; z-index:99;}
}

/* =========================================================
 * FOOTER
 * ========================================================= */
footer { background:var(--color-footer);}
footer .inner { max-width:1780px;}
footer .foot_top { display:flex; justify-content:space-between; align-items:flex-end; position:relative; padding:90px 0 25px; border-bottom:1px solid rgba(255,255,255,.2);}
footer .foot_top .btn_top { position:absolute; right:0; top:20px;}
footer .foot_top .logo { width:207px; height:31px; background:url(../images/en-logo-wh.svg) center/100% auto no-repeat;}
footer .foot_top .link { display:flex; align-items:center; gap:18px; font-size:clamp(14px,.8333vw,16px); color:var(--color-white); font-weight:500;}
footer .foot_top .link li ~ li::before { content:'|'; margin-right:.9375vw; font-weight:400;}
footer .foot_bot { display:flex; align-items:center; justify-content:space-between; padding:25px 0 58px;}
footer .foot_bot .info img { display:inline-block; width:auto;}
footer .foot_bot .info ul { display:flex; align-items:center; gap:1.3542vw; line-height:1; margin-bottom:16px;}
footer .foot_bot .info ul li { display:flex; align-items:center; font-size:clamp(13px,.7813vw,15px);}
footer .foot_bot .info ul li strong { display:inline-block; min-width:5.2083vw; color:var(--color-white);}
footer .foot_bot .info ul li a,
footer .foot_bot .info ul li span { margin-left:5px; color:#999;}
footer .foot_bot .info .copy { font-size:13px; color:rgba(255,255,255,.5); letter-spacing:.75px;}
footer .foot_bot .btn_fam { display:flex; align-items:center; justify-content:center; min-width:clamp(160px,11.9792vw,230px); height:clamp(40px,2.6042vw,50px); border:1px solid rgba(255,255,255,.25); transition:var(--ease);}
footer .foot_bot .btn_fam span { position:relative; padding-right:1.3542vw; font-size:clamp(13px,.8333vw,16px); color:var(--color-white); letter-spacing:-0.5px;}
footer .foot_bot .btn_fam span::after { content:'+'; position:absolute; right:0; top:50%; transform:translateY(-50%); color:inherit;}
footer .foot_bot .btn_fam:hover { background:var(--color-white);}
footer .foot_bot .btn_fam:hover span { color:var(--color-black); font-weight:500;}

@media all and (max-width:1780px) {
	footer .inner { padding:0 clamp(20px,2.8571vw,40px);}
}

@media all and (max-width:1250px) {
	footer .foot_bot { align-items:flex-start;}
	footer .foot_bot .info ul { flex-direction:column; align-items:flex-start; gap:clamp(10px,2.7778vw,20px);}
	footer .foot_bot .info ul li { flex-wrap:wrap; gap:clamp(10px,2.7778vw,20px) 0; font-size:clamp(11px,2.2222vw,16px);}
	footer .foot_bot .info ul li:nth-child(1) strong { margin-right:5px;}
	footer .foot_bot .info ul li:nth-child(1) span { margin-left:0;}
}

@media all and (max-width:1024px) {
	footer .foot_top { flex-wrap:wrap; padding:80px 0 19px;}
	footer .foot_top .logo { width:clamp(105px,29.1667vw,180px); height:clamp(17px,4.7222vw,28px);}
	footer .foot_top .btn_top { top:58px;}
	footer .foot_top .btn_top img { height:clamp(22px,2.2917vw,44px);}
	footer .foot_top .link { gap:clamp(10px,.9375vw,18px); font-size:clamp(11px,2.222vw,16px);}
	footer .foot_bot { flex-direction:column; align-items:flex-start; gap:clamp(27px,7.5vw,54px); padding:20px 0 50px;}
	footer .foot_bot .info .copy { font-size:clamp(10px,2.0833vw,15px);}
	footer .foot_bot .btn_fam { min-width:clamp(160px,44.4444vw,260px); height:clamp(30px,8.3333vw,50px);}
	footer .foot_bot .btn_fam span { padding-right:clamp(20px,5.2778vw,38px); font-size:clamp(12px,2.7778vw,16px);}
}

@media all and (max-width:768px) {
	footer .foot_top { flex-direction:column; align-items:flex-start; gap:clamp(24px,6.6667vw,48px);}
	footer .foot_top .btn_top { top:auto;}
	footer .foot_bot .info img { width:15px;}
}

/* 모달 */
.modal { display: none; align-items: center; justify-content: center; position:fixed; left:0; top:0; z-index: 999; width:100%; min-height:100vh; background:rgba(0,0,0,.1);}
.modal.show {display: flex;}
.modal .modal_con { position: relative; width:max-content; padding:clamp(24px,2.6042vw,50px) clamp(24px,3.125vw,60px); background:var(--color-white); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);}
.modal .modal_close { position:absolute; left:100%; top:0; z-index: 10; width: clamp(36px,2.9167vw,56px); height: clamp(36px,2.9167vw,56px); background: var(--color-wine) url(../images/modal_close.png) no-repeat center / auto;}
.modal .modal_con.wid-m { max-width:38.125vw;}
.modal .modal_head { margin-bottom: clamp(24px,2.3438vw,45px);}
.modal .modal_head h3 { font-size:clamp(20px,1.5625vw,30px); color:var(--color-text); font-weight: 700; letter-spacing: -0.25px;}
.modal .tab_menu { display: flex; align-items: stretch; gap:0 8px; width:100%;}
.modal .tab_menu li { display: flex; align-items: center; justify-content: center; flex:1; height:clamp(45px,2.8646vw,55px); font-size:clamp(12px,0.9375vw,18px); font-weight: 500; border:1px solid var(--color-wine); color:var(--color-wine); letter-spacing: -0.25px; cursor: pointer; text-align:center; line-height:1.2;}
.modal .tab_menu li.active { background:var(--color-wine); color:var(--color-white);}
.modal .footer_notice .tab_container .tab_con { min-height: 288px;}
.modal .footer_notice p { margin-top: clamp(18px,1.6667vw,32px); font-size: clamp(14px,0.9375vw,18px); color:var(--color-text); letter-spacing: -0.98px; line-height:1.6;}
#privacy_modal .footer_notice p { margin-top: 0;}

@media all and (max-width:1024px){
    .modal .modal_close { background-size: 40% auto;}
    .modal .modal_con.wid-m { max-width:60vw;}
    .modal .modal_con .scroll {overflow: auto; max-height: min(300px,45vh);}
}

@media all and (max-width:768px){
    .modal .modal_close { left:calc(100% -  clamp(36px,2.9167vw,56px)); top:auto; bottom:100%;}
    .modal .modal_con.wid-m { max-width:90vw;}
	.modal .tab_menu { gap:0 4px;}
}

/*popup*/
.popup{padding:20px;;position:fixed;left:0;top:0;z-index:-1;width:100%;height:100%;opacity:0;transition:1s;}
.popup .dim{position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.6);z-index:-1;}
.popup .pop_wrap{position:absolute;left: 0;top: 0;width: 100%;height: 100%;display:flex;align-items:center;justify-content:center;flex-direction: column;transform:translate(0,-100%);transition: 1.2s;transition-delay: 0.4s;}
.pop_sd{position:relative;z-index:1;text-align:center;overflow: hidden;padding: 0 20px;transition:0.5s;}
.pop_sd .swiper-wrapper{height:auto;}
.pop_sd .pop_close{margin-bottom:30px;}
.pop_sd .pop_close button{border:none;background:none;color:#fff;font-size:16px;}
.pop_sd ul{display:flex;gap: 0 10px;}
.pop_sd ul li img{display:block;width:100%;}
.pop_sd .pop_bot{margin-top:30px;display:flex;align-items:center;justify-content: center;}
.pop_sd .pop_chk{text-align:center;}
.pop_sd .pop_chk label{display:flex;gap: 0 10px;justify-content: center;}
.pop_sd .pop_chk label p{color:#fff;font-size:16px;}
.pop_sd .pop_arrow{display:none;align-items:center;justify-content: space-between;background-color: #fff;border-radius:50px;width: 90px;height: 32px;}
.pop_sd .pop_arr{height: 100%;flex-grow: 1;display: flex;align-items: center;justify-content: center;}
.pop_sd .pop_arr img{width:6px;}
.pop_sd .pop_page{color:#000;font-size:17px;width: auto;letter-spacing: 0.05em;display:flex;gap: 0 3px;}
.popup.on{opacity: 1; z-index:100;}
.popup.on .pop_wrap{transform:none;}
.popup.out .pop_sd{opacity:0;pointer-events:none;}
@media all and (max-width:1064px){
	.pop_sd{width: 70%;max-width: 360px;padding:0;}
	.pop_sd ul{gap:0;flex-direction: row;}
	.pop_sd .pop_close{margin-bottom:20px;}
	.pop_sd .pop_bot{margin-top:15px;justify-content: space-between;}
	.pop_sd .pop_arrow{display:flex;}
}
@media all and (max-width:600px){
	.pop_sd .pop_close button,
	.pop_sd .pop_chk label p,
	.pop_sd .pop_page{font-size:12px;}
	.pop_sd .pop_chk label { gap:0 5px;}
}