@charset "utf-8";
html {
  scroll-behavior: auto;
}

.body_hidden {height:100%; min-height:100%; overflow:hidden; touch-action:none;}

body,html { min-height:100%; width:100%; }

#wrap { position:relative; background:#fff; width:100%; }

.inner100p { position:relative; padding:0 100px; width:calc(100% - 100px); }
@media screen and (max-width:1440px){
	.inner100p { padding:0 20px; width:calc(100% - 20px); }
}
.inner1720 { position:relative; max-width:1720px; margin:0 auto; }
@media screen and (max-width:1760px){
	.inner1720 { padding:0 20px; }
}
.inner1690 { position:relative; max-width:1690px; margin:0 auto; }
@media screen and (max-width:1730px){
	.inner1690 { padding:0 20px; }
}
.inner1500 { position:relative; max-width:1500px; margin:0 auto; }
@media screen and (max-width:1540px){
	.inner1500 { padding:0 20px; }
}
.inner1400 { position:relative; max-width:1400px; margin:0 auto; }
@media screen and (max-width:1440px){
	.inner1400 { padding:0 20px; }
}
:root { 
    --mainFont:Montserrat;
	--subFont:;
    --mainColor:#4069b9; 
    --subColor:#111; 
}

/* header */
header { position:fixed; top:0; left:0; width:100%; z-index:999; transition:all 0.4s; }
header:before { content:""; display:block; position:absolute; left:0; top:80px; background:rgba(255, 255, 255, 0.1); width:100%; height:1px; transition:all 0.4s; }
header .inner100p,
header .inner1720 { overflow:hidden; height:80px; }
header.s_ov,
header.active,
.subbody header { background:#fff }
header.active:before,
.subbody header:before { background:rgba(0,0,0,0.07); }
header h1 { position:relative; z-index:4; overflow:hidden; display:inline-block; height:100%; }
header h1 a { display:flex; align-items:center; height:100%; }
header h1 a svg { width:145px; height:auto }
header h1 a svg path { transition:all 0.4s; }
header.s_ov h1 a svg path,
header.active h1 a svg path,
.subbody header h1 a svg path { fill:#111 }
@media screen and (max-width:1024px){
	header .inner100p,
	header .inner1720 { height:60px; }
	header:before { top:60px; }
	header h1 a svg { width:120px; }
}

header #navi { display:none }

header .top-menu { position:absolute; right:0; top:0; display:flex; align-items:center; gap:0 25px; height:100%; z-index:5 }
header .top-menu .search-btn a { display:block; width:30px; height:30px; background:url(/img/svg/btn_search.svg) center center no-repeat; }
header.s_ov .top-menu .search-btn a,
header.active .top-menu .search-btn a,
.subbody header .top-menu .search-btn a { background-image:url(/img/svg/btn_search_ov.svg); }
header .top-menu .search-btn.ov a { background-image:url(/img/svg/btn_close.svg); transition:all 0.3s; }
header .top-menu .search-btn.ov a:hover { transform:rotate(180deg); }
@media screen and (max-width:1760px){
	header .top-menu { right:20px; }
}
@media screen and (max-width:1024px){
	header .top-menu { gap:0 15px; height:100%; }
}

header .allmenu { position:relative; z-index:100; }
header .allmenu a { position:relative; width:28px; height:28px; display:flex; align-items:center; }
header .allmenu span { position:relative; display:block; width:60%; height:2px; background-color:#fff; }
header .allmenu a:before { content:""; display:block; width:100%; height:2px; background-color:#fff; position:absolute; left:0; top:5px;}
header .allmenu a:after { content:""; display:block; width:100%; height:2px; background-color:#fff; position:absolute; left:0; bottom:5px; }
header.s_ov .allmenu span,
header.s_ov .allmenu a:before,
header.s_ov .allmenu a:after,
header.active .allmenu span,
header.active .allmenu a:before,
header.active .allmenu a:after,
.subbody header .allmenu span,
.subbody header .allmenu a:before,
.subbody header .allmenu a:after { background-color:#333; }
header .allmenu a:hover span { width:100%; }

header .gnb_bg { width:100%; height:100vh; background:rgba(0, 0, 0, 0.50); position:fixed; left:0; top:0; opacity:0; visibility:hidden; transition:all 0.5s; overflow:hidden }
header.over_all .gnb_bg { opacity:1; visibility:visible; z-index:2; }

header .searchBox { opacity:0; opacity:0; visibility:hidden; overflow:hidden; margin-top:-30px; transition:all 0.5s; position:fixed; left:0; top:0; width:100%; height:225px; display:flex; align-items:center; justify-content:center; background:#fff;}
header .searchBox.on { opacity:1; visibility:visible; z-index:3; margin:0;  }
header .searchBox form { width:100%; }
header .searchBox .s-box { max-width:630px; width:100%; margin:0 auto; }
header .searchBox .ipbtn { position:relative; width:100%; height:52px; border-radius:5px; background:#fff; }
header .searchBox .ipbtn input[type="text"] { width:100%; border:none; outline:none; color:#111; font-size:18px; font-weight:400; padding:0 80px 0 20px; height:100%; line-height:100%; background:#fff; border-bottom:1px solid #333; }
header .searchBox .ipbtn input::placeholder{ color:#d4d4d4; font-weight:400; }
header .searchBox .ipbtn .btn { position:absolute; right:0; top:0; background:url(/img/svg/btn_search_ov.svg) center center no-repeat }
header .searchBox .ipbtn .btn button { border:none; outline:none; background:none; width:52px; height:52px; }
header .searchBox .ipbtn .btn button span { text-indent:-9999em; display:block; overflow:hidden }
header .searchBox .keyword { margin-top:25px; }
header .searchBox .keyword ul { display:flex; flex-wrap:wrap; gap:5px 14px; }
header .searchBox .keyword li a { color:#777; font-size:18px; font-weight:400; line-height:1.3; }
@media screen and (max-width:1024px){
	header .searchBox { height:200px; padding-top:20px; }
	header .search-box .ipbtn { height:80px; }
	header .search-box .ipbtn input[type="text"] { font-size:16px; padding:0 80px 0 20px; }
	header .search-box .ipbtn .btn button { width:50px; height:50px; }
	header .searchBox .s-box { padding:0 40px;}
	header .searchBox .keyword { margin-top:20px; }
	header .searchBox .keyword ul { gap:5px 14px; }
	header .searchBox .keyword li a { font-size:16px; }
}
@media screen and (max-width:640px){
	header .searchBox .ipbtn { height:40px; }
	header .searchBox .ipbtn input[type="text"] { font-size:16px; padding:0 50px 0 10px; height:40px; line-height:40px; }
	header .searchBox .ipbtn .btn button { width:40px; height:40px; }
}

#allmenuBox { position:fixed; top:0; right:-645px; max-width:645px; 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; }
#allmenuBox .menuCont { position:relative; z-index:5; height:100vh; justify-content:flex-start; } 
#allmenuBox .menuBox { height:100%; background:#fff; }
#allmenuBox .menuBox { position:absolute; top:0; left:0; width:100%; }
#allmenuBox .menuBox > ul { position:relative; top:80px; padding:0 100px 0 70px; height:calc(100% - 80px); overflow:auto; }
#allmenuBox .menuBox > ul > li { position:relative; text-align:left; margin-top:0; }
#allmenuBox .menuBox > ul > li:not(:last-child) { border-bottom:1px solid #eee; }
#allmenuBox .menuBox > ul > li > a { position:relative; color:#ccc; font-weight:600; font-size:40px; line-height:1.3; padding:30px 0; display:block; transition:all 0.3s; }
#allmenuBox .menuBox > ul > li.hover > a,
#allmenuBox .menuBox > ul > li > a:hover { color:#222; }
#allmenuBox .menuBox > ul > li > a br { display:none; }
#allmenuBox .menuBox > ul > li.on > a:before { content:""; display:block; width:25px; height:25px; position:absolute; right:0; top:50%; transform:translateY(-50%) rotate(180deg); transition:all 0.5s; background:url(/img/svg/gnb_arr_on.svg) center center no-repeat; opacity:0.3; }
#allmenuBox .menuBox > ul > li.hover > a:before { transform:translateY(-50%) rotate(0deg); opacity:1; }
#allmenuBox .menuBox > ul > li > .subDepth { position:relative; display:none; }
#allmenuBox .menuBox > ul > li.hover .subDepth { display:block; }
#allmenuBox .menuBox > ul > li > .subDepth > ul { padding:30px 0; border-top:1px solid #eee; }
#allmenuBox .menuBox > ul > li > .subDepth > ul > li:not(:last-child) { margin-bottom:20px; }
#allmenuBox .menuBox > ul > li > .subDepth > ul > li > a { position:relative; padding-left:12px; color:#777; font-weight:500; font-size:18px; line-height:1.3; transition:all 0.3s; }
#allmenuBox .menuBox > ul > li > .subDepth > ul > li > a:before { content:""; display:block; position:absolute; left:1px; top:10px; width:5px; height:1px; background:#777; transition:all 0.3s; }
#allmenuBox .menuBox > ul > li > .subDepth > ul > li > a:hover,
#allmenuBox .menuBox > ul > li > .subDepth > ul > li.over > a { color:#222; }
#allmenuBox .menuBox > ul > li > .subDepth > ul > li > a:hover:before,
#allmenuBox .menuBox > ul > li > .subDepth > ul > li.over > a:before { background:#777; }
#allmenuBox .btnClose { position:absolute; top:20px; right:95px; z-index:5; width:40px; height:40px; cursor:pointer; transition:all 0.3s; background:url(/img/svg/btn_close.svg) center center no-repeat; }
#allmenuBox .btnClose:hover { transform:rotate(180deg); }
@media screen and (max-width:1440px){
	#allmenuBox { right:-500px; max-width:500px;}
	#allmenuBox .menuBox > ul { padding:0 70px 0 50px; }
	#allmenuBox .menuBox > ul > li > a { font-size:32px; padding:25px 0; }
	#allmenuBox .menuBox > ul > li > .subDepth > ul { padding:25px 0; }
	#allmenuBox .menuBox > ul > li > .subDepth > ul > li:not(:last-child) { margin-bottom:18px; }
	#allmenuBox .menuBox > ul > li > .subDepth > ul > li > a { font-size:18px; }
	#allmenuBox .btnClose { right:65px; }
}
@media screen and (max-width:1280px){
	#allmenuBox { right:-460px; max-width:460px;}
	#allmenuBox .menuBox > ul { top:60px; padding:0 50px 0 30px; height:calc(100% - 60px); }
	#allmenuBox .menuBox > ul > li > a { font-size:26px; padding:20px 0; }
	#allmenuBox .menuBox > ul > li.on > a:before { background-size:38px auto; } 
	#allmenuBox .menuBox > ul > li > .subDepth > ul { padding:20px 0; }
	#allmenuBox .menuBox > ul > li > .subDepth > ul > li:not(:last-child) { margin-bottom:15px; }
	#allmenuBox .menuBox > ul > li > .subDepth > ul > li > a { font-size:17px; }
	#allmenuBox .btnClose { right:45px; }
}
@media screen and (max-width:1024px){
	#allmenuBox { right:-420px; max-width:420px;}
	#allmenuBox .menuBox > ul { top:60px; padding:0 20px; height:calc(100% - 60px); }
	#allmenuBox .menuBox > ul > li > a { font-size:22px; padding:18px 0; }
	#allmenuBox .menuBox > ul > li.on > a:before { background-size:34px auto; } 
	#allmenuBox .menuBox > ul > li > .subDepth > ul { padding:18px 0; }
	#allmenuBox .menuBox > ul > li > .subDepth > ul > li:not(:last-child) { margin-bottom:12px; }
	#allmenuBox .menuBox > ul > li > .subDepth > ul > li > a { font-size:16px; }
	#allmenuBox .btnClose { right:15px; }
}

footer { position:relative; background:#F4F4F4; z-index:2; overflow:hidden; }
footer .footer_box { position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; padding:90px 0 70px; }
footer .footer_box .infobox { width:50% }
footer .footer_box .infobox ul { display:flex; flex-wrap:wrap; gap:10px 16px; }
footer .footer_box .infobox li { position:relative; font-size:17px; font-weight:400; color:#333; line-height:1.3; display:flex; }
footer .footer_box .infobox li.m1 { width:50%; }
footer .footer_box .infobox li.full { width:100%; }
footer .footer_box .r-box { display:flex; flex-direction:column; align-items:flex-end; }
footer .footer_box .copyright { font-size:17px; color:#666; font-weight:300; line-height:1.3; margin-top:54px; }
footer .footer_box .fmenu { display:flex; gap:20px; }
footer .footer_box .fmenu a { font-size:17px; color:#666; font-weight:400; line-height:1.3; height:60px; padding:0 30px; display:flex; align-items:center; background:#e4e4e4; }
@media screen and (max-width:1440px){
	footer .footer_box .fmenu a { height:50px; padding:0 25px; }
	footer .footer_box .copyright { margin-top:48px; }
}
@media screen and (max-width:1024px){
	footer .footer_box { padding:60px 0 50px; }
	footer .footer_box .infobox ul { gap:10px 15px; }
	footer .footer_box .infobox li { font-size:16px; }
	footer .footer_box .infobox li.m1 { width:auto }
	footer .footer_box .copyright { font-size:16px; margin-top:35px; }
	footer .footer_box .fmenu { gap:15px; }
	footer .footer_box .fmenu a { font-size:16px; height:50px; padding:0 20px; }
}
@media screen and (max-width:760px){
	footer .footer_box { justify-content:center; } 
	footer .footer_box .infobox { width:100%; }
	footer .footer_box .infobox li.m1 { width:40% }
	footer .footer_box .r-box { align-items:center; margin-top:20px; width:100%; }
	footer .footer_box .fmenu a { height:45px; padding:0 15px; }
	footer .footer_box .copyright { margin-top:20px; }
}
@media screen and (max-width:640px){
	footer .footer_box .infobox li.m1 { width:auto }
}


.common-bottom { position:relative; z-index:2; margin:0 0 -40px; overflow:hidden; background:#fff; }
.common-bottom .txt { display:flex; gap:40px; }
.common-bottom .txt span { color:#f0f0f0; font-size:120px; font-weight:600; line-height:1.3; font-variant:all-small-caps; display:inline-block; white-space:nowrap; }
.common-bottom .txt { animation:txt_marquee 18s infinite linear; }
@media screen and (max-width:1024px){
	.common-bottom { margin:0 0 -30px; }
	.common-bottom .txt { gap:25px; }
	.common-bottom .txt span { font-size:100px; }
}
@media screen and (max-width:640px){
	.common-bottom { margin:0 0 -20px; }
	.common-bottom .txt { gap:18px; }
	.common-bottom .txt span { font-size:60px; }
}


.contents-box { position:relative; padding-bottom:150px; min-height:500px; background:#fff; } /* scroll control area */
@media screen and (max-width:1024px){
	.contents-box { position:relative; padding-bottom:100px; }
}
@media screen and (max-width:640px){
	.contents-box { min-height:240px; padding-bottom:70px; }
}

.quick-menu { position:fixed; margin-top:0; right:40px; z-index:5; }
.quick-menu ul li { width:80px; position:relative; margin-bottom:-1px; }
.quick-menu ul li:before { content:""; display:block; padding-bottom:100%; }
.quick-menu ul li a { position:absolute; left:0; top:0; width:100%; height:100%; border:1px solid #ccc; background:#fff; display:flex; align-items:center; justify-content:center; transition:all 0.5s; }
.quick-menu ul li a:hover { z-index:2; border:1px solid #000; }
.quick-menu ul li a svg path { transition:all 0.5s; }
.quick-menu ul li a:hover svg path { fill:#000; }
.quick-menu ul li a.btn_top:hover svg path { stroke:#000; fill:none }
@media screen and (max-width:1760px){
	.quick-menu { right:20px; z-index:5; }
}
@media screen and (max-width:1024px){
	.quick-menu ul li { width:70px; }
}
@media screen and (max-width:640px){
	.quick-menu { right:0; }
	.quick-menu ul li { width:45px; }
	.quick-menu ul li a svg { width:18px; }
	.quick-menu ul li a.btn_top svg { width:12px; }
	.quick-menu ul li a svg path { fill:#333; }
	.quick-menu ul li a.btn_top svg path { stroke:#333; fill:none }
}


/* privacy */
.privacy * { font-family:var(--mainFont); }
.privacy { font-family:var(--mainFont); color:#222; font-size:18px; line-height:1.5; font-weight:300; }
.privacy h4 { font-size:24px; font-weight:600; color:#111; margin-bottom:20px; }
.privacy > p { margin:15px 0; font-size:20px; }
.privacy > p+dl { margin-top:30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ color:#111; font-weight:500; padding-bottom:5px; font-size:20px; }
.privacy > dl > dd{ padding:10px 0; }
.privacy > dl > dd p:not(:last-child) { margin-bottom:8px; }
.privacy > dl > dd ul{ padding:8px 0 15px; }
.privacy > dl > dd ul li:not(:last-child) { margin-bottom:5px; }
.privacy > dl > dd ul li strong { font-weight:400; }
.privacy > dl > dd ul li p { margin-top:8px;}
.privacy > dl > dd ul.bar > li { position:relative; padding-left:13px; }
.privacy > dl > dd ul.bar > li:before { content: "-"; display:block; font-size:16px; position:absolute; left:0; top:2px; color:#333; }
.sTxt h3 { font-size:24px; color:#111; font-weight:600; margin:20px 0; }
.sTxt p { margin:10px 0; }
.privacy .square > li { position:relative; padding-left:18px; }
.privacy .square > li:before { content: "■"; display:block; font-size:16px; position:absolute; left:0; top:2px; color:#333; }
.privacy .square > li > ul > li { position:relative; padding-left:13px; }
.privacy .square > li > ul > li:before { content: "-"; display:block; font-size:16px; position:absolute; left:0; top:2px; color:#333; }
@media screen and (max-width:1024px){
	.privacy { font-size:16px; }
	.privacy h4 { font-size:22px; margin-bottom:10px; }
	.privacy > p { margin:10px 0; font-size:18px; }
	.privacy > p+dl { margin-top:15px; }
	.privacy > dl { padding-bottom:10px;}
	.privacy > dl > dt{ font-size:18px; }
	.privacy > dl > dd{ padding:5px 0; }
	.privacy > dl > dd p:not(:last-child) { margin-bottom:4px; }
	.privacy > dl > dd ul{ padding:5px 0 10px; }
	.privacy > dl > dd ul li p { margin-top:5px;}
	.privacy > dl > dd ul.bar > li:before { font-size:15px; top:0; }
	.sTxt h3 { font-size:24px; margin:10px 0; }
	.sTxt p { margin:5px 0; }
	.privacy .square > li { padding-left:18px; }
	.privacy .square > li:before { font-size:16px; top:0; }
	.privacy .square > li > ul > li:before { font-size:15px; top:0; }
}

/* 게시글 동영상 반응형 */
.video-container { position:relative; overflow:hidden; max-width:1000px; margin:0 auto; }
.video-container:before { content:''; display:block; padding-bottom:56.25%; /* 16:9 비율 */ }
.video-container video,
.video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }


/* keyframes animation */
@keyframes ani_logo_1 {
	0% { fill:#003F8B }
	100% { fill:#fff }
}
@keyframes ani_logo_2 {
	0% { fill:#000 }
	100% { fill:#fff }
}
@keyframes ani_logo_3 {
	0% { fill:#000008 }
	100% { fill:#fff }
}
@keyframes ani_nav {
	0% { color:#111; }
	100% { color:#fff; }
}
@keyframes ani_lang {
	0% { fill:#000; }
	100% { fill:#fff; }
}
@keyframes ani_all {
	0% { background-color:#111; }
	100% { background-color:#fff; }
}
@keyframes m_over1 {
    0% { opacity: 0; }
    10% { opacity: 0; }
    20% { opacity: 1; }
    60% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes m_over2 {
    0% { opacity: 0; }
    20% { opacity: 0; }
    40% { opacity: 0; }
    60% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes m_over3 {
    0% { opacity: 0; }
    20% { opacity: 0; }
    40% { opacity: 0; }
    60% { opacity: 0; }
    80% { opacity: 1; }
    100% { opacity: 1; }
}