@charset "utf-8";

/* header */
header { position:fixed; top:0; left:0; width:100%; z-index:99; transition:top 0.4s ease; /*mix-blend-mode:exclusion;*/ }
header.fix { top:-100px; } 
.mainbody header.fix { top:0; }
header.ov { position:absolute; }
header.fix.headerFixed  { position:fixed; top:0; background:#fff; }
.subbody header,
.active header { background:#fff; }
.lenis-stopped .mainbody.active header,
.active.ov header { background:none; }
header h1 { position:absolute; opacity:1; left:60px; }
header.On h1,
.subbody header h1 { opacity:1;  }
header h1 img { max-height:35px; max-width:200px; }
header h1 a { display:block; }
@media screen and (max-width:1440px){
	header h1 { left:20px; }
}
@media screen and (max-width:860px){
	header h1 img { max-height:25px; max-width:180px; }
}

header > div  { position:relative; display:flex; align-items:center; justify-content:center; }
header #navi {  }
header #navi #gnb > ul { display:flex; text-align:center; }
header #navi #gnb > ul > li { position:relative; }
header #navi #gnb > ul > li > a { padding:0 25px; height:80px; text-wrap:nowrap; color:#000; font-size:var(--font20); font-weight:500; line-height:1.3; transition:all 0.3s; letter-spacing:-0.035em; display:flex; align-items:center; justify-content:center; }
.ov header #navi #gnb > ul > li > a,
header.ov #navi #gnb > ul > li > a { color:#fff }
.subbody header #navi #gnb > ul > li > a,
header.ov.headerFixed #navi #gnb > ul > li > a { color:#000 }
header #navi #gnb > ul > li > .subDepth { display:none; position:absolute; left:50%; top:50px; transform:translateX(-50%); }
header #navi #gnb > ul > li > .subDepth .box { transition:all 0.4s 0.1s; display:flex; margin-top:30px; padding:20px; background:rgba(0, 0, 0, 0.90); border-radius:var(--borderR20); }
.ov header #navi #gnb > ul > li > .subDepth .box { background:rgba(255, 255, 255, 0.90); }
header #navi #gnb > ul > li > .subDepth .box > ul { position:relative; text-align:center; }
header #navi #gnb > ul > li > .subDepth .box > ul > li:not(:last-child) { margin-bottom:10px; }
header #navi #gnb > ul > li > .subDepth .box > ul > li.pc { display:none }
header #navi #gnb > ul > li > .subDepth .box > ul > li > a { position:relative; font-size:var(--font18); color:#fff; font-weight:500; line-height:1.3; letter-spacing:-0.035em; }
.ov header #navi #gnb > ul > li > .subDepth .box > ul > li > a { color:#000; }
@media screen and (max-width:1280px){
	header #navi #gnb > ul > li > a { padding:0 18px; }
}
@media screen and (max-width:1024px){
	header #navi { display:none }
	header > div { height:60px; }
}


header .top-menu { position:absolute; right:60px; display:flex; align-items:center; gap:0 30px; }
header .top-menu img { height:22px; }
header .top-menu .logo a,
header .top-menu .member a { display:flex; align-items:center; gap:0 10px; color:#000; font-size:var(--font20); font-weight:500; line-height:1.0; letter-spacing:-0.035em; }
.ov header .top-menu .logo a,
.ov header .top-menu .member a,
header.ov  .top-menu .logo a,
header.ov .top-menu .member a { color:#fff; }
.subbody header .top-menu .logo a,
.subbody header .top-menu .member a,
header.ov.headerFixed .top-menu .logo a,
header.ov.headerFixed .top-menu .member a { color:#000; }
header .top-menu img { transition:all 0.3s; }
.ov header .top-menu img,
header.ov .top-menu img { filter:brightness(0) invert(1); }
.subbody header .top-menu img,
header.ov.headerFixed .top-menu img { filter:brightness(0) invert(0); }
@media screen and (max-width:1440px){
	header .top-menu { right:20px; gap:0 20px; }
}
@media screen and (max-width:1024px){
	header .top-menu { gap:0 10px; }
	header .top-menu img { height:18px; }
	header .top-menu .logo a,
	header .top-menu .member a { gap:0 5px; }
}
@media screen and (max-width:640px){
	header .top-menu { gap:0 8px; }
	header .top-menu img { height:16px; }
	header .top-menu .logo a,
	header .top-menu .member a { gap:0 3px; }
}

header .searchBox .s-box { position:fixed; left:0; top:0; width:100vw; display:none; z-index:20; background:#fff;  }
header .searchBox .ipbox { padding:100px 50px; }
header .searchBox .ipbtn { position:relative; width:100%; max-width:1200px; margin:0 auto; height:100px; }
header .searchBox .ipbtn input[type="text"] { text-align:center; width:100%; border:none; outline:none; color:#111; font-size:var(--font24); font-weight:600; padding:0 150px 0 50px; height:100%; line-height:100%; background:#fff; border:2px solid #000; border-radius:var(--borderR30); }
header .searchBox .ipbtn input::placeholder{ color:#aaa; font-weight:400; }
header .searchBox .ipbtn .btn { position:absolute; right:20px; top:50%; transform:translateY(-50%); }
header .searchBox .ipbtn .btn button { border:none; outline:none; background:none; width:50px; height:50px; background:var(--mainColor) url(/img/svg/search_icon_ov.svg) center center no-repeat; border-radius:var(--borderR8); }
header .searchBox .ipbtn .btn button span { text-indent:-9999em; display:block; overflow:hidden }
header .searchBox .btnClose { transition:all 0.5s; cursor:pointer; position:absolute; right:60px; top:25px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:url(/img/svg/close_icon.svg) center center no-repeat; }
header .searchBox .btnClose:hover { transform:rotate(-180deg); }
@media screen and (max-width:1024px){
	header .searchBox .ipbox { padding:60px 20px; }
	header .searchBox .ipbtn { height:60px; max-width:640px; }
	header .searchBox .ipbtn input[type="text"] { font-size:1.8rem; padding:0 60px 0 15px; }
	header .searchBox .ipbtn .btn { right:12px; }
	header .searchBox .ipbtn .btn button { width:40px; height:40px; background-size:18px auto; }
	header .searchBox .btnClose { right:20px; top:15px;  }
}



header .allmenu { position:relative; z-index:10; opacity:1; display:none; }
header .allmenu a { position:relative; width:30px; height:30px; display:block; transition:all 0.7s; }
header .allmenu span { position:absolute; left:50%; top:50%; transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px)); display:block; width:23px; height:3px; background:#000; border-radius:3px; transition:all 0.2s ease-in-out; }
header .allmenu span:nth-child(1) {  }
header .allmenu span:nth-child(2) { transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px)) rotate(90deg); }
header .allmenu span:nth-child(3) { display:none }
.ov header .allmenu span,
header.ov .allmenu span { background:#fff; }
.subbody header .allmenu span,
header.ov.headerFixed .allmenu span { background:#000; }
header .allmenu a:hover { transform:rotate(-180deg); }
@media screen and (max-width:1024px){
	header .allmenu { display:block; }
	header .allmenu span { width:22px; height:2px; }
	header .allmenu a:hover { transform:rotate(0deg); }
	header .allmenu span:nth-child(1) { margin-top:-5px; }
	header .allmenu span:nth-child(2) { margin-top:0; transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px)) rotate(0deg); }
	header .allmenu span:nth-child(3) { display:block; margin-top:5px; transform:translate(calc(-50% - 0.5px), calc(-50% - 0.5px)) rotate(0deg); }
}

#allmenuBox .btnClose { opacity:0; transition:all 0.7s; }
#allmenuBox.on .btnClose { opacity:1; position:absolute; top:40px; right:40px; width:30px; height:30px; cursor:pointer; z-index:2; background:url(/img/svg/btnClose.svg) center center no-repeat;  }
#allmenuBox .btnClose:hover { transform:rotate(-180deg); }
#allmenuBox { display:none; }


@media screen and (max-width:1024px){
    #allmenuBox { display:block; position:fixed; top:0; left:unset; right:-520px; max-width:520px; width:100%; height:100vh; transition:all 0.3s 0.1s ease-in-out; z-index:10000; }
    #allmenuBox.on { right:0; z-index:10000; opacity:1; visibility:visible; transition:all 0.3s 0.1s ease-in-out; background:#222; backdrop-filter:blur(7.5px); }
    #allmenuBox .menuCont { position:relative; z-index:5; height:100vh; } 
    #allmenuBox .menuBox { padding:0 60px; width:100%; height:100%; }
    #allmenuBox .menuBox .mCont { width:100%; height:100%; display:flex; align-items:center; }
    #allmenuBox .menuBox .mCont > ul { position:relative; width:100%; }
    #allmenuBox .menuBox .mCont > ul > li { position:relative; padding:0 20px; display:block; width:100%; }
	#allmenuBox .menuBox .mCont > ul > li:not(:last-child) { margin-bottom:20px; }
    #allmenuBox .menuBox .mCont > ul > li > a { width:auto; font-size:var(--font70); line-height:1.3; font-weight:600; color:#666; }
	#allmenuBox .menuBox .mCont > ul > li.hover > a:hover,
	#allmenuBox .menuBox .mCont > ul > li.hover > a { color:#fff; }
	#allmenuBox .menuBox .mCont > ul > li > a br { display:none; }
    #allmenuBox .menuBox .mCont > ul > li > .subDepth { position:relative; display:none; width:100%; }
	#allmenuBox .menuBox .mCont > ul > li.hover .subDepth { display:block; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul { padding:15px 0 15px; gap:20px; display:flex; flex-wrap:wrap; }
    #allmenuBox .menuBox .mCont > ul > li .subDepth.mobile { display:none !important }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li { width:calc((100% - 20px) / 2); }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li.pc { display:block }
	#allmenuBox .menuBox .mCont > ul > li .subDepth .box > ul > li > a { font-size:var(--font50); color:rgba(255,255,255,1); }
	#allmenuBox.on .btnClose { top:30px; right:30px; }
}
@media screen and (max-width:640px){
    #allmenuBox .menuBox { padding:0 30px; }
	#allmenuBox.on .btnClose { top:20px; right:20px; }
}


#allmenuBox .os-theme-dark > .os-scrollbar-vertical  { padding:0; background:rgba(255,255,255,0.1); width:5px; border-radius:5px; }
#allmenuBox .os-theme-dark > .os-scrollbar-horizontal { padding:0; background:rgba(255,255,255,0.1); height:5px; border-radius:5px; }
#allmenuBox .os-theme-dark > .os-scrollbar-vertical, 
#allmenuBox .os-theme-light > .os-scrollbar-vertical { width:5px; }
#allmenuBox .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background:#fff; width:5px; height:5px; border-radius:5px; opacity:0.8 }
#allmenuBox .os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active, 
#allmenuBox .os-theme-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active,
#allmenuBox .os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle,
#allmenuBox .os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle.active { background:#fff; border-radius:5px; opacity:1; }


footer { position:relative; background:#000; padding:80px 0; }
footer > div { position:relative; display:flex; gap:80px; }
footer .infobox { max-width:700px; width:100%; }
footer .infobox .box { display:flex; gap:10px; flex-direction:column; }
footer .infobox .box ul { display:flex; gap:10px 30px; flex-wrap:wrap; }
footer .infobox .box li { color:rgba(255, 2555, 255, 0.7); font-size:var(--font16); font-weight:300; line-height:1.3; letter-spacing:-0.03em; }
footer .infobox .txt{ margin-top: 40px; }
footer .infobox .txt p{ color:rgba(255, 2555, 255, 0.7); font-size:var(--font16); font-weight:300; line-height:1.6; letter-spacing:-0.03em; }
footer .infobox .fmenu { margin-top:40px; padding-top:30px; border-top:1px solid rgba(255, 255, 255, 0.20); width:100%; }
footer .infobox .fmenu ul { display:flex; gap:15px; }
footer .infobox .fmenu a { color:rgba(255, 2555, 255, 0.7); font-size:var(--font16); font-weight:500; line-height:1.3; letter-spacing:-0.03em; }
footer .infobox .fmenu li.t a { color:#fff; }
footer .logo-box { position:absolute; right:0; top:0; } 
footer .logo-box ul { display:flex; gap:10px; align-items:center; }
@media screen and (max-width:1540px){
	footer > div { gap:60px; }
	footer .infobox { max-width:600px; }
	footer .logo-box { right:20px; } 
}
@media screen and (max-width:1280px){
	footer > div { gap:40px; }
}
@media screen and (max-width:1024px){
	footer { padding:40px 0; }
	footer > div { gap:40px; }
	footer .logo img { width:140px; }
	footer .infobox { max-width:520px; }
	footer .infobox .box ul {gap:8px 20px; }
	footer .infobox .txt{ margin-top:20px; }
	footer .infobox .fmenu { margin-top:20px; padding-top:15px; }
	footer .logo-box img { width:50px; }
}
@media screen and (max-width:860px){
	footer > div { gap:30px; flex-wrap:wrap; }
	footer .logo,
	footer .infobox { max-width:100%; }
	footer .logo-box { top:-5px; } 
}
@media screen and (max-width:640px){
	footer .logo img { width:100px; }
	footer .logo-box img { width:40px; }
}

body.tov #btn_top  { opacity:0; visibility:hidden; transition:all 0.3s; }
#btn_top { opacity:0; visibility:hidden; transition:all 0.3s; }
#btn_top.on { transition:all 0.3s; opacity:1; visibility:visible; position:fixed; right:20px; bottom:60px; z-index:55; width:50px; height:50px; background:#000; border-radius:var(--borderR10); }
#btn_top.on.active { /* mix-blend-mode:exclusion; */ background:#fff; }
#btn_top .btn_top { transition:all 0.3s; position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%;  overflow:hidden; }
#btn_top.on.active .btn_top { mix-blend-mode:exclusion; }
#btn_top .btn_top span { display:flex; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
#btn_top .btn_top span:nth-child(1) { animation:btn_top_up1 3.5s infinite; }
#btn_top .btn_top span:nth-child(2) { animation:btn_top_up2 3.5s infinite; }
@media screen and (max-width:1024px){
	#btn_top.on { width:44px; height:44px; right:10px; bottom:10px; }
	#btn_top .btn_top span img { width:15px; }
}
@media screen and (max-width:640px){
	#btn_top.on { width:38px; height:38px; }
	#btn_top .btn_top span img { width:12px; }
}

@keyframes btn_top_up1 {
	0% { transform: translate(-50%, -50%); opacity:1; }
	25% { transform: translate(-50%, calc(-50% - 20px)); opacity:0; }
	100% { transform: translate(-50%, calc(-50% - 20px)); opacity: 0; }
}
@keyframes btn_top_up2 {
	0% { transform:translate(-50%, calc(-50% + 20px)); opacity:0; }
	25% { transform:translate(-50%, -50%); opacity:1; }
	100% { transform:translate(-50%, -50%); opacity:1; }
}


#subContents article { padding-bottom:200px; }
#subContents article.padx { padding-bottom:0; }
@media screen and (max-width:1024px){
	#subContents article { padding-bottom:100px; }
}
@media screen and (max-width:640px){
	#subContents article { padding-bottom:60px; }
}