@charset "utf-8";
/*
 * Name     : layout.css
 * Version  : 1.0.4
 * Author   : onepixel studio
 * Date     : 2020-05-10
 ---------------------------------------------------
 Table of contents
 ---------------------------------------------------
    01. header
    02. container
    03. footer
    04. page loader
    05. media queries
---------------------------------------------------
*/

/* ------------------------------
 * header
------------------------------ */
#header { position: relative; z-index: 990; transition:top 0.3s ease}
#header .header-top {padding:50px 0; border-bottom:1px solid #d9d9d9; background-color:#fff}
#header .header-bottom {background-color:#fff}
#header #logo {width:387px; margin:auto}
#header #logo>a {display:block}

/* ------------------------------
 * container
------------------------------ */
main {overflow-x: hidden}
#container {position: relative; background-color: #fff; z-index: 20}

/* ------------------------------
 * footer
------------------------------ */
#footer {padding: 45px 0 130px; background-color: #5e5f61}
#footer address {margin-bottom: 0; font-size: 21px; font-weight: 300; color: #a2a2a2; letter-spacing: -0.03em; line-height: 1.56; text-align: center}
#footer .price2 {margin-bottom: 0;    font-size: 21px;    font-weight: 300;    color: white;    letter-spacing: -0.03em;    line-height: 1.56;    text-align: center;}
#footer .price2 a {color:white;}
/* ------------------------------
 * page loader
------------------------------ */
#page-loader {position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: #f8f9fa; z-index: 9999}
#page-loader .loader {position: absolute; top: 50%; left: 50%; display: inline-block; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 5px solid #003078; animation: loader 2s infinite ease}
#page-loader .loader .loader-inner {display: inline-block; width: 100%; background-color: #003078; vertical-align: top; animation: loader-inner 2s infinite ease-in}

@keyframes loader {
    0% {transform: rotate(0deg)}
    25% {transform: rotate(180deg)}
    50% {transform: rotate(180deg)}
    75% {transform: rotate(360deg)}
    100% {transform: rotate(360deg)}
}

@keyframes loader-inner {
    0% {height: 0%}
    25% {height: 0%}
    50% {height: 100%}
    75% {height: 100%}
    100% {height: 0%}
}


/* ------------------------------
 * media queries
------------------------------ */
@media (min-width:768px) {
    #footer {position: fixed; bottom: 0; left: 0; right: 0; z-index: 1}
    #footer .col-sitemap dl dd {display: block !important}
}

@media (min-width: 992px) {
    #header .header-bottom {box-shadow:0 2px 2px 0 rgba(0,0,0,0.08)}
    #header nav { display: block !important; height:auto !important }
    #header .nav-overlay { display: none !important }
    #header #gnb {font-size: 0; text-align: center}
    #header #gnb>li {display: inline-block; height: 82px; vertical-align: middle; overflow: hidden}
    #header #gnb>li>a {position: relative; display:block; font-size:17px; color:#000; line-height:1.46; text-align:center; min-width: 190px; padding:17px 20px; transition:color 0.3s, background-color 0.3s}
    #header #gnb>li+li>a {border-left:1px solid #d9d9d9}
    #header #gnb>li:first-child>a {min-width: inherit}
    #header #gnb>li>a:before, #header #gnb>li>a:after {content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background-color: #5b84ac; z-index: 10; opacity: 0; transition: opacity .3s}
    #header #gnb>li>a:before {left: -1px}
    #header #gnb>li>a:after {right: -1px}
    #header #gnb>li>a:hover, #header #gnb>li.is-active>a {color:#fff; background-color:#5b84ac}
    #header #gnb>li:first-child>a, #header #gnb>li:last-child>a {background-color: #fff !important}
    #header #gnb>li>a:hover:before, #header #gnb>li>a:hover:after, #header #gnb>li.is-active>a:before, #header #gnb>li.is-active>a:after {opacity: 1}
    #header #gnb>li:first-child>a:before, #header #gnb>li:first-child>a:after, #header #gnb>li:last-child>a:before, #header #gnb>li:last-child>a:after {opacity: 0 !important}
    #header #gnb>li>a>span {color:#5b84ac; transition:color 0.3s}
    #header #gnb>li>a:hover>span, #header #gnb>li.is-active>a>span {color:#fff}
    #header #nav-toggle { display: none }
    #header .btn-phone {display:none}
    #header.sticky {position:fixed; top:-187px; left:0; bottom:0; right:0; height:82px; background-color:#fff}
    #header.sticky ~ #container {padding-top: 255px}
}

@media (max-width: 1516px) {
    #header #gnb>li>a {min-width: inherit !important}
}

@media (max-width: 1132px) {
    #header #gnb>li:first-child, #header #gnb>li:last-child {display: none}
    #header #gnb>li:first-child + li>a {border-left: 0}
}

@media (max-width:991px) {
    #header {position:fixed; top:0; left:0; bottom:0; right:0; height:60px; background-color:#fff; box-shadow:0 2px 2px 0 rgba(0,0,0,0.08)}
    #header .header-top {height:100%; padding:0; border-bottom:none}
    #header #logo {position:absolute; display:table; top:0; left:50%; width:150px; height:60px; margin-left:-75px}
    #header #logo>a {display:table-cell; vertical-align:middle}
    #header #logo>a>img {display:block; width:100%}
    #header nav { position: absolute; display: none; top: 100%; left: 0; width: 100%; height: auto; border-top: 1px solid #e5e5e5; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.08); overflow: auto; z-index: 1100 }
    #header .nav-overlay { position: fixed; display: none; top: 81px; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.55); z-index: 1000 }
    #header #gnb { position: relative; max-height: 416px; z-index: 5 }
    #header #gnb>li>a { position: relative; display: block; font-size: 15px; color: #000; padding: 15px 20px; border-bottom: 1px solid #e5e5e5; background: #fff }
    #header #gnb>li>a>span {color:#5b84ac}
    #header #gnb>li.open>a:after { -webkit-transform: rotate(-180deg); transform: rotate(-180deg) }
    #header #gnb>li>a>br {display:none}
    #header #nav-toggle { position: absolute; top: 50%; left: 0; width: 60px; height: 60px; margin-top:-30px; border: none; background: transparent; cursor: pointer; outline: 0 }
    #header #nav-toggle>.hamburger-line { position: absolute; left: 50%; display: block; width: 22px; height: 2px; margin-left: -11px; background: #000; -webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in }
    #header #nav-toggle>.hamburger-line.line1 { top: 23px }
    #header #nav-toggle>.hamburger-line.line2 { top: 30px }
    #header #nav-toggle>.hamburger-line.line3 { top: 37px }
    #header #nav-toggle.open>.hamburger-line.line1 { top: 30px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }
    #header #nav-toggle.open>.hamburger-line.line2 { opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px) }
    #header #nav-toggle.open>.hamburger-line.line3 { top: 30px; -webkit-transform: rotate(45deg); transform: rotate(45deg) }
    #header .btn-phone {position:absolute; top:50%; right:15px; width:36px; height:36px; font-size:18px; color:#fff; line-height:1 !important; margin-top:-18px; padding: 0; border:none; border-radius:50%; background-color:#003078; outline:0}

    #container {padding-top: 60px}
}

@media (max-width:767px) {
    #footer {padding: 45px 0 70px}
    #footer address {font-size: 15px}
	#footer .price2 {font-size: 15px; }
    .footer-spacer {display: none}
}