nav/*!
 * Freelancer v1.0.6 (http://startbootstrap.com/template-overviews/freelancer)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */


 @import url('https://fonts.cdnfonts.com/css/helvetica-neue-55'); 
body { 
 overflow-x: hidden; 
 } 
h1,
h2,
h3,
h4,
h5,
h6 { 
 font-family: 'Nanum Gothic',"Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 font-weight: 700; 
 } 

.navbar-default .navbar-nav>li>a.active { 
 color: #ffffff; 
 background-color: #1a242f; 
 } 
.img-centered { 
 margin: 0 auto; 
 } 

.navbar-fixed-top.navbar-shrink { transition: all 0.3s; } 


@media (min-width: 768px) { 
 .navbar-fixed-top { 
 min-height: unset; margin; 
 -webkit-transition: padding 0.3s; 
 -moz-transition: padding 0.3s; 
 transition: padding 0.3s; 
 } 
 .navbar-fixed-top .navbar-brand { 
 -webkit-transition: all 0.3s; 
 -moz-transition: all 0.3s; 
 transition: all 0.3s; 
 } 
 .navbar-fixed-top.navbar-shrink { 
transition: all 0.3s; 
 } 
 .navbar-fixed-top.navbar-shrink .navbar-brand { 
 font-size: 1.5em; 
 } 
 } 
.navbar { font-family: 'Space Mono', monospace; font-size:15px; z-index: 20; margin: 0; } 
.navbar .container-fluid { padding-left:40px; padding-right: 40px; } 
.navbar a:focus { outline: none; } 
.navbar-brand { padding: 0; display: flex; align-items: center; justify-content: center; height: auto; float: none; } 
.sub_home { font-family: 'Noto Sans KR', sans-serif; font-size:16px; color:#fff; position:absolute; top:20px; right:60%; margin-right:60px; opacity:0; } 
.port_home { right:50%; display:none; } 
.navbar-brand img { transition: all 0.3s; } 
.navbar-back { opacity:0; width:0px; display:none; } 
 .navbar-back img { max-width: 30px; } 
.navbar-back2 { opacity:1; width:80px; display:none; } 

.navbar .navbar-nav { letter-spacing:1px; } 
.navbar .navbar-nav li a:focus { outline: none; } 
.navbar-default,
.navbar-inverse { border: none; background-color:transparent; } 



.port_style { background-color:#a6cd1f; z-index:2; } 
.port_style .sub_home { color:#a6cd1f; display:none; } 
/*.port_style .navbar-brand { display:none; } */
.navbar-port { display:none; } 
.port_style1 { background-color: #77d0c4; z-index: 2; } 
.port_style2 { background-color: #016de2; z-index: 2; } 

.port_style .port_menu a {color: var(--base10);}
.port_style0 .port_menu a {color: var(--base0);}
.port_style0 .navbar-toggle .icon-bar { background-color:var(--base0) !important; margin-left: auto; }

@media (max-width: 768px) { 
 .navbar-back { padding:10px; } 


.navbar { min-height: unset; } 
.navbar .container-fluid { padding:0 10px; } 
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left:0; } 
.navbar-header { width:auto; } 
.navbar-brand>img { width:60px; } 
.container-fluid>.navbar-header { margin:0; height: 77px; } 
.sub_home { right:50%; margin-right:-22px; top:15px; display:none; } 




 .navbar-fixed-top.navbar-shrink { 
/*background-color:#fff; */
 } 
 .navbar-fixed-top.navbar-shrink .sub_home { color:#7b7b7b; } 
 } 

.btn:focus,
.btn:active,
.btn.active { 
 outline: none; 
 } 
.scroll-top { 
 position: fixed; 
 right: 2%; 
 bottom: 2%; 
 width: 50px; 
 height: 50px; 
 z-index: 1049; 
 } 
.scroll-top .btn { 
 font-size: 20px; 
 width: 50px; 
 height: 50px; 
 border-radius: 100%; 
 line-height: 28px; 
 } 
.scroll-top .btn:focus { 
 outline: none; 
 } 

#ie8, noscript { 
 position: fixed; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 z-index: 9999; 
 } 
#ie8 { 
 display: none; 
 } 
#ie8 h1, noscript h1 { 
 font-size: 2em; 
 font-weight: 100; 
 line-height: 2em; 
 } 
.valign70 { 
 position: relative; 
 display: block; 
 top: 70%; 
 -webkit-transform: translateY(-70%); 
 transform: translateY(-70%); 
 } 
.valign50 { 
 position: relative; 
 display: block; 
 top: 50%; 
 -webkit-transform: translateY(-50%); 
 transform: translateY(-50%); 
 } 
.valign30 { 
 position: relative; 
 display: block; 
 top: 30%; 
 -webkit-transform: translateY(-50%); 
 transform: translateY(-50%); 
 } 
.text-primary { 
 color: #31a8e6; 
 } 
.text-white { 
 color: #fff; 
 } 
.text-offwhite { 
 color: #f2f2f2; 
 } 
.text-black { 
 color: #000; 
 } 
.text-offblack { 
 color: #0d0d0d; 
 } 
.white-bg { 
 background-color: #fff; 
 } 
.offwhite-bg { 
 background-color: #f2f2f2; 
 } 
.black-bg { 
 background-color: #000; 
 } 
.offblack-bg { 
 background-color: #0d0d0d; 
 } 

.full-height { 
 height: 995px; 
 } 
.half-height { 
 height: 500px; 
 } 
.aThird-height { 
 height: 333px; 
 } 

.reDeco li { 
 list-style: url("/assets/img/bullet.gif") inside; 
 line-height: 1.75em; 
 } 
.middleLine { 
 padding: 0; 
 border: none; 
 border-top: solid 3px; 
 text-align: center; 
 width: 100%; 
 margin: 25px auto 30px; 
 color: #eee; 
 } 
.bold { 
 font-weight: 600; 
 } 

/* ---------------------------------------------

Padding Shortcodes

------------------------------------------------*/
.p0 { padding: 0!important; } 

/*padding bottom*/
.pb0 { padding-bottom: 0px !important; } 
.pb10 { padding-bottom: 10px !important; } 

.pb20 { padding-bottom: 20px !important; } 

.pb30 { padding-bottom: 30px !important; } 

.pb40 { padding-bottom: 40px !important; } 

.pb50 { padding-bottom: 50px !important; } 

.pb60 { padding-bottom: 60px !important; } 

.pb70 { padding-bottom: 70px !important; } 

.pb80 { padding-bottom: 80px !important; } 

.pb90 { padding-bottom: 90px !important; } 

.pb100 { padding-bottom: 100px !important; } 

.pb110 { padding-bottom: 110px !important; } 

.pb120 { padding-bottom: 120px !important; } 

.pb130 { padding-bottom: 130px !important; } 

.pb140 { padding-bottom: 140px !important; } 

.pb150 { padding-bottom: 150px !important; } 

.pb160 { padding-bottom: 160px !important; } 

/*padding top*/
.pt10 { padding-top: 10px !important; } 

.pt20 { padding-top: 20px !important; } 

.pt30 { padding-top: 30px !important; } 

.pt40 { padding-top: 40px !important; } 

.pt50 { padding-top: 50px !important; } 

.pt60 { padding-top: 60px !important; } 

.pt70 { padding-top: 70px !important; } 

.pt80 { padding-top: 80px !important; } 

.pt90 { padding-top: 90px !important; } 

.pt100 { padding-top: 100px !important; } 

.pt110 { padding-top: 110px !important; } 

.pt120 { padding-top: 120px !important; } 

.pt130 { padding-top: 130px !important; } 

.pt140 { padding-top: 140px !important; } 

.pt150 { padding-top: 150px !important; } 

.pt160 { padding-top: 160px !important; } 

/* ---------------------------------------------

Margin Shortcodes

------------------------------------------------*/
.m0 { margin: 0!important; } 

.mb5 { margin-bottom: 5px !important; } 

.mb10 { margin-bottom: 10px !important; } 

.mb20 { margin-bottom: 20px !important; } 

.mb30 { margin-bottom: 30px !important; } 

.mb40 { margin-bottom: 40px !important; } 

.mb50 { margin-bottom: 50px !important; } 

.mb60 { margin-bottom: 60px !important; } 

.mb70 { margin-bottom: 70px !important; } 

.mb80 { margin-bottom: 80px !important; } 

.mb90 { margin-bottom: 90px !important; } 

.mb100 { margin-bottom: 100px !important; } 

.mb110 { margin-bottom: 110px !important; } 

.mb120 { margin-bottom: 120px !important; } 

.mb130 { margin-bottom: 130px !important; } 

.mb140 { margin-bottom: 140px !important; } 

.mb150 { margin-bottom: 150px !important; } 

.mb160 { margin-bottom: 160px !important; } 

@media screen and (max-width: 1200px) { 
.mb-md-20 { margin-bottom: 20px !important; } 
.mb-md-40 { margin-bottom: 40px !important; } 
.mb-md-60 { margin-bottom: 60px !important; } 
.mb-md-80 { margin-bottom: 80px !important; } 
.mb-md-100 { margin-bottom: 100px !important; } 
 } 

@media screen and (max-width: 992px) { 
 .mb-sm-20 { margin-bottom: 20px !important; } 
 .mb-sm-40 { margin-bottom: 40px !important; } 
 .mb-sm-60 { margin-bottom: 60px !important; } 
 .mb-sm-80 { margin-bottom: 80px !important; } 
 .mb-sm-100 { margin-bottom: 100px !important; } 
 } 

@media (max-width: 768px) { 
.mb-xs-20 { margin-bottom: 20px !important; } 
 .mb-xs-40 { margin-bottom: 40px !important; } 
 .mb-xs-60 { margin-bottom: 60px !important; } 
 .mb-xs-80 { margin-bottom: 80px !important; } 
 .mb-xs-100 { margin-bottom: 100px !important; } 
 } 

/* 상단 메뉴 커스터마이징 */

.top_nav { } 
.top_nav button { position: relative; display: block; font-size:16px; color:#fff; font-weight:bold; padding:19.5px 20px; background-color: transparent; color:#fff; border:0 none; outline-style:none; } 
.top_nav button#menu01 { border-top:0 none; } 
.top_nav button:hover { color:#ffa000; } 
.top_nav.open button { color:#ffa000; } 
.top_nav button i { opacity:0; position:absolute; bottom:0; left:50%; margin-left:-5px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; 
 } 
.top_nav button:hover i { opacity:1; } 

/* 메뉴 토글버튼 */
.navbar-header { width:100%; position:relative; float: none; display: flex; align-items: center; justify-content: space-between; height: 110px; } 
.navbar-header::before,
.navbar-header::after { display: none; } 
.port_menu_wrap { display: flex; align-items: center; gap: 80px; margin-left: auto; } 
.port_menu { display: flex; gap: 30px; margin-left: auto; } 
.port_menu a { color:var(--base10); text-decoration:none; letter-spacing:1px; } 

.navbar_black_style .port_menu a { color:var(--base10); } 


@media (max-width: 1200px) { 
.port_menu { display:none; } 
.navbar-default .navbar-toggle { width: 80px; } 
.navbar-default .navbar-toggle .icon-bar { background-color:#fff; margin-left: auto; } 
.navbar_black_style .navbar-toggle .icon-bar { background-color:#fff; margin-left: auto; } 
 } 
.dropdown-menu { margin:0; } 
.dropdown-menu li { } 
.dropdown-menu>li>a { text-align:left; } 
.navbar-toggle { position: relative; float: right; padding:10px; margin:0; background-color:#000; border:0 none; border-radius:0; } 
.navbar-toggle .icon-bar { width:30px; height:1px; margin:7px 0; border-radius:0; transition: all 0.3s; background-color: var(--base10) !important; } 
.navbar_black_style .navbar-toggle .icon-bar { background-color:var(--base10) !important; } 

.navbar-default .navbar-toggle { background-color: transparent; border:0 none; } 
.navbar-default .navbar-toggle:hover { background-color: transparent; border:0 none; } 
.navbar-default .navbar-toggle:focus { background-color: transparent; border:0 none; } 
@media (max-width: 768px) { 

 .port_menu_wrap { gap: 20px; flex-direction: row-reverse; gap: 0; } 

.navbar-default:not(.navbar_black_style) { padding-left: 10px; } 

 } 

/*토글 메뉴 뷰*/
#bs-example-navbar-collapse-1 { position:fixed; top:0; left:0; width:100vw !important; height:100vh !important; z-index:999999999; max-height:100%; max-width:100%; margin:0; } 
.nav_gnb { position:fixed; top:0; left:0; background-color:#363636; width:100%; height:100vh; z-index:999999999; } 
.nav_gnb .nav_close { position:absolute; top:50px; right:50px; cursor:pointer; } 
.nav_gnb .nav_gnb_menu { padding-top:17%; width:1000px; margin:0 auto; list-style:none; } 
.nav_gnb .nav_gnb_menu li { float:left; width:50%; padding:0; box-sizing:border-box; } 
.nav_gnb .nav_gnb_menu li:nth-child(1) { } 
.nav_gnb .nav_gnb_menu li:nth-child(2) { padding-left:50px; } 
.nav_gnb .nav_gnb_menu li:nth-child(3) { } 
.nav_gnb .nav_gnb_menu li:nth-child(4) { padding-left:50px; } 
.nav_gnb .nav_gnb_menu li:nth-child(5) { } 
.nav_gnb .nav_gnb_menu li:nth-child(6) { padding-left:50px; } 
.nav_gnb .nav_gnb_menu li a { font-size:50px; line-height:0.8em; color:#fff; font-family: 'Space Mono', monospace; text-decoration:none; padding-left:50px; transition: all 0.3s; display:block; border-left:3px solid #fff; padding-top:8vh; } 
.nav_gnb .nav_gnb_menu li a strong { font-weight:normal; color:#ff8a00; } 
.nav_gnb .nav_gnb_menu li a .tit_ment { font-size:15px; line-height:18px; color:#7a7a7a; font-family: 'Noto Sans KR', sans-serif; transition: all 0.3s; display:block; margin-top:10px; } 
.nav_gnb .nav_gnb_menu li:nth-child(1) a { padding-top:0; } 
.nav_gnb .nav_gnb_menu li:nth-child(2) a { padding-top:0; } 

@media screen and (max-width: 1100px) { 
.nav_gnb .nav_gnb_menu li a { font-size:4.5vw; } 
 } 

@media screen and (max-width: 992px) { 
.nav_gnb .nav_gnb_menu { left:5%; width:90%; } 
.nav_gnb .nav_gnb_menu li a { padding-left:30px; } 
.nav_gnb .nav_gnb_menu li a .tit_ment { font-size:13px; line-height:13px; } 
 } 

@media (max-width: 768px) { 
.nav_gnb .nav_close { position:absolute; top:20px; right:20px; cursor:pointer; } 
.nav_gnb .nav_gnb_menu { top:10%; left:2%; width:96%; padding:0; padding:100px 5% 0; } 
.nav_gnb .nav_gnb_menu li { width:100%; } 
.nav_gnb .nav_gnb_menu li:nth-child(2) { padding-left:0; } 
.nav_gnb .nav_gnb_menu li:nth-child(4) { padding-left:0; } 
.nav_gnb .nav_gnb_menu li:nth-child(6) { padding-left:0; } 
.nav_gnb .nav_gnb_menu li a { font-size:28px; line-height:0.8em; padding-left:20px; padding-right:20px; padding-top:4vw; } 
.nav_gnb .nav_gnb_menu li a .tit_ment { margin-top:10px; line-height:1.2em; } 
.nav_gnb .nav_gnb_menu li:nth-child(2) a { padding-top:4vw; } 
.nav_gnb .nav_gnb_menu li.hidden { display: block !important; } 
 } 

/*mouse scroll down*/
.mouse-box { 
 z-index: 3; 
 position: absolute; 
 bottom: 40px; 
 left: 50%; 
 -webkit-transform: translateX(-50%); 
 -moz-transform: translateX(-50%); 
 -ms-transform: translateX(-50%); 
 -o-transform: translateX(-50%); 
 transform: translateX(-50%); 
 } 

.mouse { 
 display: inline-block; 
 height: 45px; 
 width: 28px; 
 border: 1px solid rgba(255,255,255,.8); 
 border-radius: 25px; 
 text-align: center; 
 } 
.mouse:after { 
 display: inline-block; 
width: 1px; 
 height: 6px; 
 background: rgba(255,255,255,.8); 
 content: ""; 
 -webkit-animation: scroll 1.5s ease-out infinite forwards; 
 -moz-animation: scroll 1.5s ease-out infinite forwards; 
 animation: scroll 1.5s ease-out infinite forwards; 
 } 

/*mouse scroll down*/
@-webkit-keyframes scroll { 
 0% { 
 -webkit-transform: translateY(0); 
 } 
 50% { 
 -webkit-transform: translateY(10px); 
 } 
 100% { 
 -webkit-transform: translateY(0); 
 } 
 } 
@-moz-keyframes scroll { 
 0% { 
 -moz-transform: translateY(0); 
 } 
 50% { 
 -moz-transform: translateY(10px); 
 } 
 100% { 
 -moz-transform: translateY(0); 
 } 
 } 
@keyframes scroll { 
 0% { 
 -webkit-transform: translateY(0); 
 -moz-transform: translateY(0); 
 -ms-transform: translateY(0); 
 -o-transform: translateY(0); 
 transform: translateY(0); 
 } 
 50% { 
 -webkit-transform: translateY(10px); 
 -moz-transform: translateY(10px); 
 -ms-transform: translateY(10px); 
 -o-transform: translateY(10px); 
 transform: translateY(10px); 
 } 
 100% { 
 -webkit-transform: translateY(0); 
 -moz-transform: translateY(0); 
 -ms-transform: translateY(0); 
 -o-transform: translateY(0); 
 transform: translateY(0); 
 } 
 } 





 


 :root { 
 --bg-color: #F2F4F6; 
 --base0: #000; 
 --base10: #fff; 
 } 

 /* 다크모드 시 배경색 변경 */
 body.dark-mode { 
 --bg-color: #0A0A0A; 
 --base0: #fff; 
 --base10: #000; 
 } 

 /* 토글 스위치 스타일 */
 .theme-toggle { 
 z-index: 1000; 
 display: flex; 
 align-items: center; 
 } 

 .toggle-label { 
 position: relative; 
 display: inline-block; 
 width: 58px; 
 height: 30px; 
 background: url('../img/toggle.svg')no-repeat center; 
 border-radius: 30px; 
 cursor: pointer; 
 transition: background-color 0.3s; 
 border: 1px solid var(--base0); 
 margin: 0; 
 } 

 .toggle-label:after { 
 content: ""; 
 position: absolute; 
 width: 22px; 
 height: 22px; 
 border-radius: 50%; 
 background-color:var(--base0); 
 top: 3px; 
 left: 3px; 
 transition: all 0.3s; 
 } 

 #theme-checkbox { 
 display: none; 
 } 

 #theme-checkbox:checked+.toggle-label:after { 
 left: calc(100% - 3px); 
 transform: translateX(-100%); 
 }