@charset "utf-8";
/*GNB 메뉴용 reset에서 발췌*/
.blind {position:absolute;overflow:hidden;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;}
/* header */
#wrapper {position:relative; }
#wrapper a { transition:all 0.4s !important; }
#wrapper .st1 { transition:all 0.4s !important; }
#header {position:fixed; top:0; left:0; width:100%; transition:.3s; z-index:100;}
#header .contain {position:relative; width:100%; max-width:1460px; height:100px; z-index:2;}
.global {position:relative; display:flex; justify-content:flex-end; background:rgba(0,0,0,.5); color:#fff; z-index:10;}
.sitelogo {position:absolute; top:0; left:50px; transition:.2s;}
.sitelogo a {display:block; width:100px; height:50px; background:url("../images/common/logo_red_white.svg") 0 50% no-repeat; transition:.8s; overflow:hidden;}
.top-right {display:flex;}
.top-right ul {display:flex;}
.top-right .link-type-1 {font-size:15px; line-height:50px; letter-spacing:-.025em;}
.top-right .link-type-1 li {  } /*margin-right:34px;*/
.top-right .link-type-1 li a { display:flex; align-items: center; justify-content: center; }
.top-right .link-type-1 li:hover { background:rgba(0,0,0,0.5); }
.top-right .link-type-1 li.admin_btn { width:140px; display: flex; background: rgba(0,0,0,0.1); justify-content: center; } /*display:flex;*/
.top-right .link-type-1 li.admin_btn a { color:#fff;  }
.top-right .link-type-1 li.admin_btn a:hover { color:#00BCD4; }
.top-right .link-type-1 li.admin_btn i { font-size:26px; margin-right:3px; }
.top-right .link-type-2 a {display:block; line-height:50px; text-align:center; border-right:1px solid rgba(255,255,255,0.1); }
.top-right .link-type-2 .st1 {width:140px; font-size:16px; font-weight:500; letter-spacing:-.03em; background:#153fa9;}
.top-right .link-type-2 .st1:hover { background: rgba(0,0,0,0.1); }
.top-right .link-type-2 .st2 {width:140px; font-family:"Roboto",sans-serif; font-size:20px; font-weight:500; letter-spacing:-.03em; color: #fff; background:#ee3523; display: flex; justify-content: center; align-items: center; }
.top-right .link-type-2 .st2 img {vertical-align:middle; margin:-.2em 7px 0 0;}
.top-right .link-type-2 .st2 i { margin-right:5px; font-size: 24px; }
.top-right .link-type-2 .munjarang { background:#005be4; }
.top-right .link-type-2 .munjarang:hover { background: rgba(0,91,228,0.7); }
.top-right .link-type-2 .munjarang span { position: relative; display:inline-block; }
.top-right .link-type-2 .munjarang span:before { content:''; width:80px; height:24px; background:url('../images/common/top_logo_munjarang.svg')no-repeat; position:absolute; top:50%; left:50%; transform: translate(-50% , -65%); }
.top-right .link-type-2 .smart_ip { background:#fff; }
.top-right .link-type-2 .smart_ip:hover { background:rgba(255,255,255,0.8); }
.top-right .link-type-2 .smart_ip span { position: relative; display:inline-block; }
.top-right .link-type-2 .smart_ip span:before { content:''; width:76px; height:28px; background:url('../images/common/top_logo_smart_ip.svg')no-repeat; position:absolute; top:50%; left:50%; transform: translate(-50% , -65%); }

.mobile-top-link {display:none;}
.gnb {display:flex; justify-content:flex-end; align-items:center; height:55px; padding:0 50px; color:#fff; font-size:18px; font-weight:500; line-height:30px; letter-spacing:-.03em; transition:.3s;}
.gnb > ul {display:flex;}
.gnb > ul > li {margin-left:55px;}
.gnb > ul > li a { color:#fff; text-shadow:0 0 5px rgba(0,0,0,0.3); }
.gnb > ul > li a:hover { text-shadow:unset;  }
.gnb > ul > li:hover a { color:#00BCD4; }
.btn-m-menu {position:relative; margin-left:27px; width:23px; height:23px; overflow:hidden;}
.btn-m-menu span { position:absolute; left:5px; right:0; top:50%; height:2px; margin-top:-1px; background:#fff; transition:.3s; box-shadow:0 0 3px rgba(0,0,0,0.3); }
.btn-m-menu span:before,
.btn-m-menu span:after {content:" "; position:absolute; left:-5px; right:0; height:2px; background:#fff; transition:.3s;}
.btn-m-menu span:before { top:-8px; box-shadow:0 0 3px rgba(0,0,0,0.3); }
.btn-m-menu span:after { bottom:-8px; box-shadow:0 0 3px rgba(0,0,0,0.3); }
.btn-m-menu:hover span {left:0;}
.btn-m-menu:hover span:before {left:5px;}
.btn-m-menu:hover span:after {left:10px;}
#header.header-fixed {background:rgba(0,0,0,.5);}
#header.header-fixed .sitelogo {top:30px;}
#header.header-fixed .sitelogo a { width:100px; height:50px; background:url("../images/common/logo_red_white.svg") 0 50% no-repeat; transition:.8s; overflow:hidden; } 
#header.header-fixed .global {background:none;}
#header.header-up {background:none;}
#header.header-up .sitelogo {top:0;}
#header.header-up .sitelogo a {background-image:url("../images/common/logo_red_white.svg");}
#header.header-up .global {background:rgba(0,0,0,.5);}
#header.header-up .gnb {margin-top:-100px;}
.nav-background {position:fixed; top:-50px; left:50%; width:30px; height:30px; transform:translateX(-50%) rotate(90deg); background:#ee3523; border-radius:10%; z-index:101;}
.mobile-navigation {position:fixed; top:0; left:0; width:100%; height:100%; text-align:center; color:#555; overflow:hidden; z-index:-100;}
.mobile-navigation .wrap {display:flex; align-items:center; width:100%; height:100%; padding:50px; overflow:auto; opacity:0; transition:.4s;}
.mobile-navigation .inner {width:100%;}
.mobile-navigation .home {opacity:0; transition:.4s; transform:translateY(-20px);}
.mobile-navigation .home img { height: 100px; }
.mobile-navigation .nav-menu {padding:20px 0;}
.mobile-navigation .nav-menu > ul > li { padding:10px 0; opacity:0; transition:.4s; transform:translateX(20px); }
.mobile-navigation .nav-menu > ul > li > a {display:inline-block; position:relative; padding:0 5px; font-size:24px; font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.mobile-navigation .nav-menu > ul > li > a:before {content:""; position:absolute; bottom:-1px; left:50%; width:0; height:13px; z-index:-1; background:rgba(21,63,169,0.12); border-radius:10px; opacity:0; transition:.2s; } /**/
.mobile-navigation .nav-menu > ul > li > a:hover::before {left:0; width:100%; opacity:1;}
.mobile-navigation .nav-menu > ul > li > a:hover { color: #153fa9; }
.mobile-navigation .links {margin-bottom:12px; opacity:0; transition:.4s; transform:translateY(20px);}
.mobile-navigation .links ul {display:inline-flex;}
.mobile-navigation .links ul li {display:flex; align-items:center;}
.mobile-navigation .links ul li:before {content:""; margin:0 25px; width:1px; height:15px; background:rgba(0,0,0,0.2);}
.mobile-navigation .links ul li:first-child::before {display:none;}
.mobile-navigation .links ul li a { font-size:22px; font-weight:500; line-height:1.3em; letter-spacing:-.03em; display:flex; align-items: center; border:1px solid rgba(0,0,0,0.15); padding:5px 15px 5px 5px;  border-radius:50px; }
.mobile-navigation .links ul li a i { font-size:26px; margin-right:4px; }
.mobile-navigation .links ul li a:hover { background:#153fa9; color:#fff; border:1px solid #153fa9;}
.mobile-navigation .contact {color:#ef3824; font-size:24px; font-weight:600; line-height:1.3em; letter-spacing:-.03em; opacity:0; transition:.4s; transform:translateY(20px);}
.mobile-navigation .contact strong {font-family:"Roboto"; font-size:24px; font-weight:700; line-height:1em; letter-spacing:0; margin-left:6px;}
.mobile-navigation .close {position:absolute; top:40px; right:60px; width:24px; height:24px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before, 
.mobile-navigation .close:after {content:" "; position:absolute; top:11px; left:0; width:100%; height:2px; background:#555; border-radius:3px; transition:.4s;}
.mobile-navigation .close:hover:before, .mobile-navigation .close:hover:after { background:#153fa9; }

/*햄버거 메뉴 클릭 시 등장하는 전체메뉴 (사이트맵)*/
html.menu-opened {overflow:hidden;}
html.menu-opened .nav-background { animation:nav_background 0.7s ease-in forwards; } /*등장 시 드롭하는 면 속도*/
html.menu-opened .mobile-navigation {z-index:102;}
html.menu-opened .mobile-navigation .wrap {opacity:1; transition-delay:.5s; z-index:102;}
html.menu-opened .mobile-navigation .home {opacity:1; transition-delay:.7s; transform:translateY(0);}
html.menu-opened .mobile-navigation .nav-menu > ul > li {opacity:1; transform:translateX(0);}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(1) {transition-delay:.5s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(2) {transition-delay:.55s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(3) {transition-delay:.6s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(4) {transition-delay:.65s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(5) {transition-delay:.7s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(6) {transition-delay:.75s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(7) {transition-delay:.8s;}
html.menu-opened .mobile-navigation .nav-menu > ul > li:nth-child(8) {transition-delay:.95s;}
html.menu-opened .mobile-navigation .links {opacity:1; transition-delay:.8s; transform:translateY(0);}
html.menu-opened .mobile-navigation .contact {opacity:1; transition-delay:.9s; transform:translateY(0);}
html.menu-opened .close:before {transform:rotate(45deg); transition-delay:.5s;}
html.menu-opened .close:after {transform:rotate(-45deg); transition-delay:.5s;}
html.menu-closed .nav-background { animation:nav_background_back 0.7s ease-out forwards; } /*퇴장 시 드롭하는 면 속도*/

#container {position:relative; } /*height:2000px;*/

/*햄버거 메뉴 클릭 시 등장하는 면*/
@keyframes nav_background {
	0% {top:-20px;}
	30% {background:#fff;top:70%;} /*등장 시 드롭하는 면 끝지점 컬러 */
	40% {top:50%;transform: scale(1) translateZ(0);}
	100% { background:rgba(255,255,255,0.98); transform: scale(200) translateZ(0); } /*메뉴 바탕 반투명 컬러*/
}
@keyframes nav_background_back {
	0% { background:#fff; transform:scale(200) translateZ(0); } /*퇴장 시 드롭하는 면 시작지점 컬러*/
	40% {top:50%;transform: scale(1) translateZ(0);}
	50% {background:#fff;top:70%;} /*퇴장 시 드롭하는 면 시작지점 컬러*/
	100%{top:-30px;}
}
@keyframes nav_open {
	0% {top:50%; left:50%; border-radius:100%;}
	100%{width:100%; height:100%;border-radius:0;}
}
@keyframes move_dot {
	0%,28%,100%{transform:translateY(0);}
	15%{transform:translateY(-8px);}
}
@keyframes rotation{
	0%{transform:rotate(0);}
	100%{transform:rotate(360deg);}
}
@keyframes zoonIn{
	0%{transform:scale(1)}
	100%{transform:scale(1.1)}
}

/*마우스스크롤 시 남은 높이값에 따라 가로형 바 인디케이터 채워짐 인터렉션 스타일*/
#header.header-fixed .progress-container {width:100%; height:5px; background:transparent; position:relative; z-index:22;}
#header.header-up .progress-container {margin-top:45px;}
#header.header-fixed .progress-bar {height:5px; background:#ee3523; width:0%;}

@media (max-width: 1460px) {
	.gnb > ul > li {margin-left:40px;}

}
@media (max-width: 1280px) {
	/* header */
	.sitelogo {left:30px;}
	.sitelogo a {height:45px;}
	.top-right .link-type-1 {line-height:45px;}
	.top-right .link-type-1 li { } /*margin-right:25px;*/
	.top-right .link-type-1 li.admin_btn { width: 100px; }
	.top-right .link-type-2 a {line-height:45px;}
	.top-right .link-type-2 .st1 {width:100px; font-size:15px;}
	.top-right .link-type-2 .st2 {width:130px; font-size:18px;}
	.top-right .link-type-2 .munjarang span:before { width:65px; height:20px; }
	.top-right .link-type-2 .smart_ip span:before { width:65px; height:24px; }

	.top-right .link-type-1 li.admin_btn i { font-size: 22px; }
	.top-right .link-type-2 .st2 i { font-size: 22px; }

	.gnb {height:55px; padding:0 30px; font-size:17px;}
	.gnb > ul > li {margin-left:36px;}

	/* indicator */
	#header.header-fixed .progress-container {height:4px;}
	#header.header-up .progress-container {margin-top:45px;}
	#header.header-fixed .progress-bar {height:4px;}
}

/*세로*/
@media  (max-height:800px) {
	.mobile-navigation .nav-menu > ul > li > a { font-size: 20px; padding: 0px; }
	.mobile-navigation .nav-menu > ul > li { padding: 8px 0; }
	.mobile-navigation .home img { height: 70px; }
	.nav-background { width:20px; height:20px; }
}

@media (max-width: 1140px) {
	.gnb > ul > li {margin-left:23px;}
}
/* Landscape tablet */
@media all and (max-width: 1024px) { /*and (max-height:800px)*/
	body, input, textarea, select, button, table {font-size:15px;}	
	.bg-logo {background-size:600px auto;}
	/* header */
	.gnb > ul {display:none;}
	
	.mobile-navigation .nav-menu {padding:20px 0;}
	.mobile-navigation .nav-menu > ul > li {padding:7px 0; }
	.mobile-navigation .close {top:30px; right:30px; }
	
	/*타블렛용 수정 bjm 240610*/
	.mobile-navigation .home img { height: 100px; }
	.mobile-navigation .nav-menu > ul > li > a {font-size:26px;  }
	.mobile-navigation .links ul li a { font-size: 24px; }
	.mobile-navigation .contact { font-size: 24px; }
}
/* portrait tablet */
@media (max-width: 900px) {
	.only-desktop {display:none;}
	.only-tablet {display:block;}
	/* header */
	.gnb > ul {display:none;}
	.top-right .link-type-1 li.time {display:none;}
	.mobile-navigation .nav-menu { padding: 20px 0; }
}
/* Landscape phone */
@media (max-width: 640px) {
	body, input, textarea, select, button, table {font-size:14px;}
	.only-desktop-tablet {display:none;}
	.only-tablet {display:none;}
	.only-mobile {display:block;}
	.contain {padding-left:15px; padding-right:15px;}
	.bg-logo {background-size:260px auto;}
	/* header */
	.sitelogo {left:15px;}
	.sitelogo a {width:110px; height:40px; background-size:auto 22px;}
	#header.header-fixed .sitelogo {top:20px;}
	#header.header-fixed .sitelogo a {width:140px; background-size:auto 26px;}
	#header.header-up .sitelogo {top:0;}
	#header.header-up .sitelogo a {width:140px; background-size:auto 22px;}
	/* indicator */
	#header.header-fixed .progress-container {height:4px;}
	#header.header-up .progress-container {margin-top:55px;}
	#header.header-fixed .progress-bar {height:4px;}
	.top-right .link-type-1 {font-size:13px; line-height:40px;}
	.top-right .link-type-1 li {margin-right:0;}

	.top-right .link-type-2 .smart_ip span:before { width: 60px; height: 22px; }
	.top-right .link-type-2 .munjarang span:before { width: 60px; height: 18px; }
	.top-right .link-type-1 li.admin_btn { width: 80px; }
	.top-right .link-type-2 a {line-height:40px;}
	.top-right .link-type-2 .st1 {width:80px; font-size:13px;}
	.top-right .link-type-2 .st2 {width:110px; font-size:15px;}
	.top-right .link-type-2 .st2 img {width:16px; margin-right:4px;}
	.gnb {padding:0 15px; height:45px;}
	.mobile-navigation .home img { height: 70px; }
	.mobile-navigation .wrap {padding:35px;}
	.mobile-navigation .home img {height:80px;}
	.mobile-navigation .close {top:15px; right:15px;}
	.mobile-navigation .nav-menu > ul > li {padding:6px 0; }
	.mobile-navigation .nav-menu > ul > li > a {font-size:24px; }
	.mobile-navigation .links ul li a {font-size:14px; padding: unset; width: 46px; height: 46px; justify-content: center; padding-left: 3px; }
	.mobile-navigation .links ul li a span { display:none; }
	.mobile-navigation .links ul li:before {margin:0 16px;}
	.mobile-navigation .contact {font-size:24px;}
	.mobile-navigation .contact strong {font-size:24px;}
	
	.mobile-navigation .links ul li a i { font-size:32px; }
	/*.mobile-navigation .contact { font-size: 24px; }*/
	
}
/*mobile용*/
@media (max-width: 480px) {
	.mobile-navigation .home img { height: 18.75vw; }
	.mobile-navigation .nav-menu { padding: 15px 0; }
	.mobile-navigation .nav-menu > ul > li { padding: 8px 0; }
	.mobile-navigation .nav-menu > ul > li > a { font-size: 5.4167vw; }
	.mobile-navigation .contact { font-size: 5.4167vw; }
	.mobile-navigation .contact strong { font-size: 5.4167vw; }
}
@media (max-width: 440px) {
	.top-right .link-type-1 li.admin_btn { display: none; }
}
/* Landscape phones and down */
@media (max-width: 360px) {
	.mobile-top-link .link2 {line-height:0; padding:0; font-size:0; overflow:hidden; width:32px; height:32px; background:url("../images/common/tel.png") 50% 50% no-repeat; background-size:contain; text-indent:-9999em;}
} 

/*텍스트 흘러가는 모션 230614 bjm*/
.animated-title { font-size:200px; font-weight:900; position: absolute; top:50%; transform:translateY(-50%); width: 100%;max-width:100%; padding:100px 0; text-shadow:0 0 5px rgba(0,0,0,0.07); color:#fff } /*overflow-x: hidden; overflow-y: hidden; height: 150px; text-shadow:0 0 1px rgba(0,0,0,0.7); color:#f1f1f1;*/
.animated-title .track {position: absolute; white-space: nowrap;will-change: transform; animation: marquee 360s linear infinite; }
@keyframes marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (hover: hover) and (min-width: 700px){
.animated-title .content {-webkit-transform: translateY(calc(100% - 1rem)); transform: translateY(calc(100% - 1rem));}
}