@charset "utf-8";

/* header */
header { position:fixed; top:0; left:0; width:100%; z-index:99; background:none; transition:0.4s ease; }
header.nav-up { top:-110px; }
header.nav-down { top:0; }
header.fix { background:rgba(0, 0, 0, 0.7); }
header .innerP50 { position:relative; display:flex; justify-content:space-between; height:100%; }
header .innerP50:before { content:''; display:block; position:absolute; top:98px; left:50%; transform:translateX(-50%); width:calc(100% - 100px); height:2px; background:#fff; }
#wrap.on header .innerP50:before { background:#eee; }
header.over_all .innerP50:before { z-index:9990; }
header.nav-up .innerP50:before { width:0; }
header.nav-down .innerP50:before { width:calc(100% - 100px); transition:0.8s 0.3s; }
header h1 { position:relative; z-index:9990; display:flex; align-items:center; }
header h1 a { display:block; }
header h1 a img,
#wrap.on header.fix h1 a img { filter:brightness(0) invert(1); }
#wrap.on header h1 a img { filter:none; }
header.over_all h1 a img { filter:none; }

@media screen and (max-width:1440px){
	header .innerP50:before,
	header.nav-down .innerP50:before { width:calc(100% - 40px); }
}
@media screen and (max-width:1200px){
	header { position:fixed; height:80px; }
	header .innerP50:before { top:78px; }
	header h1 img { height:24px; }
}
@media screen and (max-width:640px){
	header { height:60px; }
	header .innerP50:before { top:58px; height:1px; }
	header h1 img { height:19px; }
}


header #navi { position:relative; z-index:3; display:flex; justify-content:flex-end; width:100%; padding-right:187px; }
header #navi #gnb > ul { display:flex; text-align:center; }
header #navi #gnb > ul > li { position:relative; transition:all 0.5s; }
header #navi #gnb > ul > li > a { position:relative; width:120px; height:100px; text-wrap:nowrap; display:flex; justify-content:center; align-items:center; color:#fff; font-size:var(--font18); font-weight:700; line-height:1.3; transition:all 0.3s; }
#wrap.on header #navi #gnb > ul > li > a { color:#333; }
#wrap.on header.fix #navi #gnb > ul > li > a { color:#fff; }
header #navi #gnb > ul > li > a:before { content:''; display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:0; height:2px; z-index:9991; transition:all 0.3s; background:var(--mainColor); }
header.over #navi #gnb > ul > li > a { width:180px; }
header.over #navi #gnb > ul > li.on > a { color:var(--mainColor); }
header.over #navi #gnb > ul > li.on > a:before { width:100%; }
header #navi #gnb > ul > li > .subDepth { z-index:-11; opacity:0; visibility:hidden; position:absolute; left:50%; transform:translate(-50%, 0); top:100px; padding-top:10px; width:100%; }
header.over #navi #gnb > ul > li > .subDepth { opacity:1; visibility:visible; z-index:3; transform:translate(-50%, 0); } 
header #navi #gnb > ul > li > .subDepth > ul { position:relative; opacity:0; padding-top:30px; padding-bottom:100px; }
header.over  #navi #gnb > ul > li > .subDepth > ul { position:relative; animation:ani_5 0.7s 0.1s; animation-fill-mode:both; }
header.over  #navi #gnb > ul > li > .subDepth > ul:before { content:''; display:block; position:absolute; left:50%; top:0; transform:translateX(-50%); width:0; height:var(--sub-height); background:var(--mainColor); opacity:0; transition:all 0.4s; }
header.over  #navi #gnb > ul > li.on > .subDepth > ul:before { opacity:1; width:100%; }
header #navi #gnb > ul > li > .subDepth > ul > li { padding:0 5px; }
header #navi #gnb > ul > li > .subDepth > ul > li:not(:last-child) { padding-bottom:15px; }
header #navi #gnb > ul > li > .subDepth > ul > li > a { position:relative; font-size:var(--font17); color:#aaa; font-weight:600; line-height:1.3; transition:all 0.3s; }
header #navi #gnb > ul > li.on > .subDepth > ul > li > a { color:rgba(255, 255, 255, 0.5); }
header #navi #gnb > ul > li > .subDepth > ul > li > a:hover,
header #navi #gnb > ul > li.on > .subDepth > ul > li.over > a { color:#fff; }
header #navi #gnb > ul > li > .subDepth > ul > li .depth3 { display:none }
header .gnb_bg { visibility:hidden; height:0; opacity:0; position:absolute; top:150px; left:50px; width:calc(100% - 100px); height:var(--sub-height); background:#fff; transition:all 0.3s; z-index:1; }
header.over .gnb_bg { opacity:1; visibility:visible; z-index:1; top:110px; }
@media screen and (max-width:1640px){
	header.over #navi #gnb > ul > li > a { width:160px; }
	header #navi #gnb > ul > li > .subDepth > ul { padding-bottom:80px; }
}
@media screen and (max-width:1440px){
	header #navi #gnb > ul > li > a { width:110px; }
	header.over #navi #gnb > ul > li > a { width:150px; } 
	header #navi #gnb > ul > li > .subDepth > ul { padding-bottom:60px; }
	header .gnb_bg { left:20px; width:calc(100% - 40px); }
}
@media screen and (max-width:1200px){
	header #navi { display:none }
}

header .top-menu { position:absolute; right:50px; display:flex; gap:10px; align-items:center; height:100px; z-index:9990; }
header .top-menu .lang { position:relative; }
header .top-menu .lang > a { position:relative; width:112px; height:45px; border:2px solid #fff; border-radius:45px; display:flex; align-items:center; justify-content:center; gap:5px; }
header .top-menu .lang > a span { position:relative; display:flex; gap:10px; align-items:center; color:#fff; font-size:var(--font15); font-weight:600; line-height:1.3; }
header .top-menu .lang > a > img { filter:brightness(0) invert(1); }
header .top-menu .lang.on > a span img { transform:rotate(180deg); }
header .top-menu .lang .sbox { display:none; position:absolute; left:50%; transform:translateX(-50%); top:45px; }
header .top-menu .lang .sbox ul { margin-top:5px; width:65px; background:var(--mainColor); border-radius:var(--borderR10); padding:10px; text-align:center; }
header .top-menu .lang .sbox li:not(:last-child) { padding-bottom:10px; }
header .top-menu .lang .sbox li a { color:rgba(255, 255, 255, 0.5); font-size:var(--font15); font-weight:600; line-height:1.3; }
header .top-menu .lang .sbox li.on a,
header .top-menu .lang .sbox li a:hover { color:#fff; }
#wrap.on header.fix .top-menu .lang > a { border-color:#fff; }
#wrap.on header.fix .top-menu .lang > a span { color:#fff; }
#wrap.on header.fix .top-menu .lang > a > img { filter:brightness(0) invert(1); }
#wrap.on header.fix .top-menu .lang > a span img { filter:brightness(0) invert(1); }
#wrap.on header .top-menu .lang > a,
header.over_all .top-menu .lang > a { border-color:#eee; }
#wrap.on header .top-menu .lang > a span,
header.over_all .top-menu .lang > a span { color:#aaa; }
#wrap.on header .top-menu .lang > a > img,
header.over_all .top-menu .lang > a > img { filter:none; }
#wrap.on header .top-menu .lang > a span img,
header.over_all .top-menu .lang > a span img { filter:brightness(0) invert(0.2); }
@media screen and (max-width:1440px){
	header .top-menu { right:20px; }
}
@media screen and (max-width:1200px){
	header .top-menu { height:80px; }
	header .top-menu .lang > a { width:100px; height:40px; }
	header .top-menu .lang .sbox { top:40px; }
	header .top-menu .lang .sbox li:not(:last-child) { padding-bottom:5px; }
}
@media screen and (max-width:640px){
	header .top-menu { height:60px; gap:5px; }
	header .top-menu .lang > a { width:80px; height:34px; border-width:1px; }
	header .top-menu .lang .sbox { top:34px; }
}



header .allmenu { position:relative; z-index:20; opacity:1; }
header .allmenu a { position:relative; width:45px; height:45px; background:var(--mainColor); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; border-radius:45px; }
header .allmenu span { display:block; height:2px; background:#fff; transition:all 0.3s; width:15px; }
header .allBox.active .allmenu span { transform: rotateZ(45deg);margin:2px 0 0; }
header .allBox.active .allmenu span:nth-child(2) { transform:rotateZ(-45deg); margin:-7px 0 0; }
@media screen and (max-width:1200px){
	header .allmenu a { width:40px; height:40px; }
}
@media screen and (max-width:1024px){
	header .allBox.active .allmenu span,
	header .allBox.active .allmenu span:nth-child(2) { transform: rotateZ(0);margin:0; }
}
@media screen and (max-width:640px){
	header .allmenu a { width:34px; height:34px; }
}

#container { position:relative; }

#allmenuBox { visibility:hidden; height:0; opacity:0; position:fixed; top:0; left:0; width:100%; height:100dvh; background:#fff; transition:all 0.8s; overflow:hidden; }
#allmenuBox.on { opacity:1; visibility:visible; z-index:999; }
#allmenuBox .menuBox { position:relative; width:100%; display:flex; align-items:center; flex-direction:column; height:100dvh }
#allmenuBox .menuBox .fbot { position:absolute; left:0; bottom:50px; padding:0 50px; width:100%; display:flex; justify-content:space-between; }
#allmenuBox .menuBox .fbot .fmenu ul { display:flex; flex-wrap:wrap; gap:30px; }
#allmenuBox .menuBox .fbot .fmenu li a { color:rgba(255, 255, 255, 0.3); font-size:var(--font17); font-weight:600; line-height:1.3; }
#allmenuBox .menuBox .fbot .fmenu li.ov a { color:#fff; }
#allmenuBox .menuBox .fbot .copyright { color:rgba(255, 255, 255, 0.3); font-size:var(--font16); font-weight:500; line-height:1.3; display:flex; align-items:flex-end; }
.web #allmenuBox .menuBox { padding:98px 50px 0; width:100%; }
.web #allmenuBox .menuBox .mBox { width:100%; height:calc(100dvh - 160px); }
.web #allmenuBox .menuBox .mCont { width:100%; padding:0 20px; padding-top:5%; }
.web #allmenuBox .menuBox .mCont > ul { width:100%; display:flex; gap:50px; text-align:center; }
.web #allmenuBox .menuBox .mCont > ul > li { width:calc((100% - 200px) / 5); }
.web #allmenuBox .menuBox .mCont > ul > li > a { color:#333; font-size:var(--font32); font-weight:600; line-height:1.3; letter-spacing:-0.03em; transition:all 0.3s; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth { position:relative; margin-top:40px; border-radius:var(--borderR10); overflow:hidden; padding:50px 20px; height:465px; background:linear-gradient(180deg, #f7f7f7 0%, #f7f7f7 100%); }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth:before { content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; /*background:linear-gradient(180deg, #7fbe26 0%, #4c7f04 100%);*/ opacity:0; transition:all 0.3s; } 
.web #allmenuBox .menuBox .mCont > ul > li .subDepth > ul { position:relative; z-index:5; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li:not(:last-child) { margin-bottom:25px; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li > a { transition:all 0.3s; color:rgba(0, 0, 0, 0.8); font-size:var(--font20); font-weight:300; line-height:1.3; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li > a:hover { color:#7fbe26; }
.web #allmenuBox .menuBox .mCont > ul > li:hover a { color:var(--mainColor); }
.web #allmenuBox .menuBox .mCont > ul > li:hover .subDepth:before { opacity:1; }
/*
.web #allmenuBox .menuBox .mCont > ul > li:hover a { color:var(--mainColor); }
.web #allmenuBox .menuBox .mCont > ul > li:hover .subDepth:before { opacity:1; }
.web #allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li.over > a { color:#fff; }
*/
@media screen and (max-height:800px){
	.web #allmenuBox .menuBox .mCont { padding-top:4%; }
	.web #allmenuBox .menuBox .mCont > ul > li .subDepth { height:340px; }
}
@media screen and (max-height:700px){
	.web #allmenuBox .menuBox .mCont { padding-top:3.5%; }
	.web #allmenuBox .menuBox .mCont > ul > li .subDepth { height:300px; }
	.web #allmenuBox .menuBox .mCont > ul > li .subDepth { margin-top:30px; padding:30px 20px; height:300px; }
	.web #allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li:not(:last-child) { margin-bottom:20px; }
	#allmenuBox .menuBox .fbot { bottom:30px; }
}
@media screen and (max-width:1440px){
	.web #allmenuBox .menuBox { padding:98px 20px 0; }
	.web #allmenuBox .menuBox .mCont > ul { gap:30px;}
	.web #allmenuBox .menuBox .mCont > ul > li { width:calc((100% - 120px) / 5); }
	.web #allmenuBox .menuBox .mCont > ul > li .subDepth { margin-top:30px; padding:30px 20px; height:340px; }
	.web #allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li:not(:last-child) { margin-bottom:20px; }
}
@media screen and (max-width:1280px){
	.web #allmenuBox .menuBox { padding:78px 20px 0; }
	.web #allmenuBox .menuBox .mCont > ul { gap:15px;}
	.web #allmenuBox .menuBox .mCont > ul > li { width:calc((100% - 60px) / 5); }
	.web #allmenuBox .menuBox .mCont > ul > li .subDepth { margin-top:20px; padding:20px; height:300px; }
	.web #allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li:not(:last-child) { margin-bottom:15px; }
}

@media screen and (max-width:1024px){
    #allmenuBox { position:fixed; opacity:1; z-index:9999; visibility:visible; height:auto; opacity:1; top:-110%; left:unset; width:100%; height:100dvh; padding:20px; transition:all 0.7s 0.1s ease-in-out; background:rgba(0, 0, 0, 0.7); }
    #allmenuBox.on { top:0; z-index:9999; }
	#allmenuBox .menuBox { width:100%; padding:80px 20px 0; height:calc(100dvh - 60px); background:#fff; border-radius:25px; }
	#allmenuBox .menuBox .mBox { width:100%; height:calc(100% - 100px); }
	#allmenuBox .menuBox .mCont { width:100%; }
    #allmenuBox .menuBox .mCont > ul { position:relative; padding:0; overflow:hidden; }
    #allmenuBox .menuBox .mCont > ul > li { position:relative; display:block; height:auto; border-radius:20px; background:#f5f5f5; }
    #allmenuBox .menuBox .mCont > ul > li:not(:last-child) { margin-bottom:10px; }
	#allmenuBox .menuBox .mCont > ul > li > a { position:relative; padding:20px; color:rgba(0, 0, 0, 0.5); font-size:var(--font48); font-weight:500; line-height:1.3; letter-spacing:-0.04em; display:block; }
    #allmenuBox .menuBox .mCont > ul > li > .subDepth { position:relative; display:none; width:100%; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth > ul { position:relative; padding:0 20px 20px; display:flex; flex-wrap:wrap; gap:10px 15px; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li { width:calc((100% - 30px) / 3); position:relative; z-index:5; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li > a { color:#666; font-size:var(--font24); font-weight:400; line-height:1.3; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li > a:hover { color:#111; }
	#allmenuBox .menuBox .mCont > ul > li.hover .subDepth > ul:before { opacity:1; }
	#allmenuBox .menuBox .mCont > ul > li.hover .subDepth { display:block; opacity:1; visibility:visible; z-index:2; }
	#allmenuBox .menuBox .mCont > ul > li.hover > a { color:#111; }
	#allmenuBox .menuBox .fbot { text-align:center; width:100%; padding:0 10px; }
	#allmenuBox .menuBox .fbot .fmenu li a { color:rgba(0, 0, 0, 0.3);}
	#allmenuBox .menuBox .fbot .fmenu li.ov a { color:#111; }
	#allmenuBox .menuBox .fbot .copyright { color:rgba(0, 0, 0, 0.3); }
	#allmenuBox .btnClose { cursor:pointer; width:40px; height:40px; position:absolute; right:20px; top:20px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
	#allmenuBox .btnClose span { display:block; height:2px; background:#000; transition:all 0.3s; width:18px; transform:rotateZ(45deg);margin:2px 0 0; border-radius:5px; }
	#allmenuBox .btnClose span:nth-child(2) { transform: rotateZ(-45deg); margin:-7px 0 0; }
}
@media screen and (max-width:640px){
    #allmenuBox .menuBox .mCont > ul > li { padding:5px 10px; }
    #allmenuBox .menuBox .mCont > ul > li:not(:last-child) { margin-bottom:10px; }
	#allmenuBox .menuBox .mCont > ul > li > a { padding:10px; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth > ul { padding:5px 10px 10px; gap:5px 15px; }
	#allmenuBox .menuBox .mCont > ul > li .subDepth > ul > li { width:calc((100% - 15px) / 2); }
	#allmenuBox .menuBox .fbot { bottom:30px; justify-content:center; flex-direction:column; align-items:center; gap:10px; }
}

/* animation */
.web #allmenuBox .menuBox .mCont > ul > li { opacity:0; }
.web #allmenuBox.on .menuBox .mCont > ul > li:nth-child(1) { animation:ani_3 0.5s 0.2s; animation-fill-mode:both; }
.web #allmenuBox.on .menuBox .mCont > ul > li:nth-child(2) { animation:ani_3 0.5s 0.4s; animation-fill-mode:both; }
.web #allmenuBox.on .menuBox .mCont > ul > li:nth-child(3) { animation:ani_3 0.5s 0.6s; animation-fill-mode:both; }
.web #allmenuBox.on .menuBox .mCont > ul > li:nth-child(4) { animation:ani_3 0.5s 0.8s; animation-fill-mode:both; }
.web #allmenuBox.on .menuBox .mCont > ul > li:nth-child(5) { animation:ani_3 0.5s 1.0s; animation-fill-mode:both; }
.web #allmenuBox.on .menuBox .mCont > ul > li:nth-child(6) { animation:ani_3 0.5s 1.2s; animation-fill-mode:both; }
.web #allmenuBox.on .menuBox .mCont > ul > li:nth-child(7) { animation:ani_3 0.5s 1.4s; animation-fill-mode:both; }
@media screen and (max-width:1024px){
	#allmenuBox .menuBox .fbot { opacity:0; }
	#allmenuBox.on .menuBox .fbot { animation:ani_5 0.5s 0.4s; animation-fill-mode:both; }
}

footer { position:relative; background:#111; }
footer .footer_box { position:relative; padding:150px 0; }
footer .footer_box .top,
footer .footer_box .bottom { display:flex; justify-content:space-between; }
footer .footer_box .top { align-content:flex-end; }
footer .footer_box .bottom { margin-top:60px; padding-top:60px; border-top:1px solid rgba(255, 255, 255, 0.10); }
footer .footer_box .top .txt { color:#fff; font-size:var(--font54); font-weight:600; line-height:1.6; }
footer .footer_box .top .fbtn { display:flex; align-items:flex-end; gap:10px; }
footer .footer_box .top .fbtn a { transition:all 0.4s; width:286px; height:63px; padding:0 40px; border-radius:100px; border:2px solid #fff; display:flex; align-items:center; justify-content:space-between; }
footer .footer_box .top .fbtn a span { color:#fff; font-size:var(--font18); font-weight:600; line-height:1.3; }
footer .footer_box .top .fbtn a:hover { border-color:var(--mainColor); padding:0 50px; background:var(--mainColor); }
footer .footer_box .bottom .info dt h3 { color:#fff; font-size:var(--font21); font-weight:700; line-height:1.3; }
footer .footer_box .bottom .info dd { margin-top:20px; }
footer .footer_box .bottom .info dd ul { display:flex; flex-wrap:wrap; gap:15px; }
footer .footer_box .bottom .info dd ul:not(:last-child) { margin-bottom:15px; }
footer .footer_box .bottom .info dd ul li { display:flex; gap:10px; color:#fff; font-size:var(--font18); font-weight:300; line-height:1.3; }
footer .footer_box .bottom .info dd ul li strong { color:rgba(255, 255, 255, 0.3); font-weight:600; flex-shrink:0; }
footer .footer_box .bottom .fmenu { margin-top:20px; } 
footer .footer_box .bottom .fmenu ul { display:flex; flex-wrap:wrap; gap:30px; }
footer .footer_box .bottom .fmenu li a { color:rgba(255, 255, 255, 0.3); font-size:var(--font17); font-weight:600; line-height:1.3; }
footer .footer_box .bottom .fmenu li.ov a { color:#fff; }
footer .copyright { color:rgba(255, 255, 255, 0.3); font-size:var(--font16); font-weight:500; line-height:1.3; display:flex; align-items:flex-end; }
@media screen and (max-width:1440px){
	footer .footer_box { padding:120px 0; }
	footer .footer_box .top .fbtn a { width:250px; height:55px; padding:0 40px; }
	footer .footer_box .top .fbtn a:hover { padding:0 50px; }
}
@media screen and (max-width:1280px){
	footer .footer_box { padding:100px 0; }
	footer .footer_box .bottom { margin-top:40px; padding-top:40px; }
	footer .footer_box .top .fbtn a { width:220px; height:50px; padding:0 30px; }
	footer .footer_box .top .fbtn a:hover { padding:0 40px; }
}
@media screen and (max-width:1024px){
	footer .footer_box { padding:80px 0; }
	footer .footer_box .bottom { margin-top:30px; padding-top:30px; flex-direction:column; }
	footer .footer_box .top .fbtn a { width:160px; height:45px; padding:0 20px; border-width:1px; }
	footer .footer_box .top .fbtn a:hover { padding:0 30px; }
	footer .footer_box .bottom .info dd ul { gap:10px; }
	footer .footer_box .bottom .info dd ul:not(:last-child) { margin-bottom:10px; }
	footer .footer_box .bottom .info dd,
	footer .footer_box .bottom .fmenu { margin-top:10px; } 
	footer .footer_box .bottom .fmenu ul { gap:15px; }
	footer .copyright { margin-top:30px; }
}
@media screen and (max-width:760px){
	footer .footer_box { padding:40px 0; }
	footer .footer_box .top { flex-direction:column; }
	footer .footer_box .top .txt,
	footer .footer_box .top .fbtn { display:flex; justify-content:center; text-align:center; }
	footer .footer_box .top .fbtn { margin-top:10px; }
	footer .footer_box .top .fbtn a { width:150px; height:40px; }
	footer .footer_box .bottom { margin-top:15px; padding-top:15px; }
	footer .copyright { margin-top:20px; }
}




.btn_top { position:fixed; right:20px; bottom:20px; z-index:10; transition:all 0.4s; }
.s_off .btn_top { position:absolute; transition:none; }
.btn_top { opacity:0; }
#wrap.top .btn_top { opacity:1; }
.btn_top a { width:80px; height:80px; border-radius:100px; border:2px solid var(--mainColor); background:rgba(255, 255, 255, 0.01); backdrop-filter: blur(7.5px); display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; gap:5px; }
.btn_top span { color:var(--mainColor); font-size:var(--font14); font-weight:500; line-height:1.3; }
@media screen and (max-width:1024px){
	.btn_top { right:10px; bottom:10px; }
	.btn_top a { width:65px; height:65px; border-width:1px; }
}
@media screen and (max-width:640px){
	.btn_top a { width:50px; height:50px; }
}


#allmenuBox .os-theme-dark > .os-scrollbar-vertical { padding:0; background:rgba(255, 255, 255, 0.05); width:3px; border-radius:3px; }
#allmenuBox .os-theme-dark > .os-scrollbar-horizontal { padding:0; background:rgba(255, 255, 255, 0.05); height:3px; border-radius:3px; }
#allmenuBox .os-theme-dark > .os-scrollbar-vertical, 
#allmenuBox .os-theme-light > .os-scrollbar-vertical { width:3px; }
#allmenuBox .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background:#fff; width:3px; height:3px; border-radius:3px; opacity:0.6 }
#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:3px; opacity:1; }
#allmenuBox .privacy-box .os-theme-dark > .os-scrollbar-vertical,
#allmenuBox .privacy-box .os-theme-dark > .os-scrollbar-horizontal { background:rgba(255, 255, 255, 0.5) }
@media screen and (max-width:1024px){
	#allmenuBox .os-theme-dark > .os-scrollbar-vertical {background:rgba(0, 0, 0, 0.05); }
	#allmenuBox .os-theme-dark > .os-scrollbar-horizontal { background:rgba(0, 0, 0, 0.05); }
	#allmenuBox .os-theme-dark > .os-scrollbar-vertical, 
	#allmenuBox .os-theme-light > .os-scrollbar-vertical { width:2px; }
	#allmenuBox .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background:#111; }
	#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:#111; }
	#allmenuBox .privacy-box .os-theme-dark > .os-scrollbar-vertical,
	#allmenuBox .privacy-box .os-theme-dark > .os-scrollbar-horizontal { background:rgba(0, 0, 0, 0.5) }
}


.popup_box{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:-11; opacity:0; visibility:hidden; transition:all 0.1s; }
.popup_box.on { opacity:1; visibility:visible; z-index:9999; transition:all 0.3s; }
.popup_box .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); }
.popup_box .pop_body { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:22; padding:0; border:none; }
.popup_box .pop_body .popCont { padding:0; overflow:hidden; width:100%; }
.popup_box .pop_body .popCont .imgbox img { max-width:100%;}
.popup_box .pop_body .btn_close { position:absolute; right:-36px; top:0; z-index:5; width:24px; height:80px; cursor:pointer; background:url(/img/svg/close_btn.svg) center center no-repeat; }
@media screen and (max-height:820px){
	.popup_box .pop_body { max-width:760px; }
	.popup_box .pop_body .popCont .imgbox img { max-height:680px; }
}
@media screen and (max-height:700px){
	.popup_box .pop_body .popCont .imgbox img { max-height:580px; }
}
@media screen and (max-height:600px){
	.popup_box .pop_body .popCont .imgbox img { max-height:460px; }
}
@media screen and (max-width:1024px){
	.popup_box .pop_body .btn_close { right:-26px; width:20px; height:67px; background-size:20px 67px; }
}
@media screen and (max-width:860px){
	.popup_box .pop_body .btn_close { right:-30px; width:20px; height:67px; background-size:20px 67px; }
}
@media screen and (max-width:640px){
	.popup_box .pop_body { left:40px; transform:translate(0, -50%); width:calc(100% - 80px); }
	.popup_box .pop_body .btn_close { right:-30px; }
}

.popup_video .pop_body { max-width:1280px; width:100%; }
.popup_video .pop_body .video_box { padding:0; overflow:hidden; }
.popup_video .pop_body .video_box .mov { position:relative; overflow:hidden; }
.popup_video .pop_body .video_box .mov:before { content:""; display:block; padding-bottom:56.25%; }
.popup_video .pop_body .video_box .mov video { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); max-width:100%; max-height:100%; object-fit:cover; }
.popup_video .pop_body .video_box .mov iframe { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; object-fit:cover; }
@media screen and (max-height:820px){
	.popup_video .pop_body { max-width:1150px; }
}
@media screen and (max-height:680px){
	.popup_video .pop_body { max-width:1000px; }
}
@media screen and (max-height:580px){
	.popup_video .pop_body { max-width:800px; }
}
@media screen and (max-width:1360px){
	.popup_video .pop_body { left:60px; transform:translate(0, -50%); max-width:100%; width:calc(100% - 120px); }
}
@media screen and (max-width:1024px){
	.popup_video .pop_body { left:40px; width:calc(100% - 80px); }
}