/* style.css는 전 php 공통으로 쓰이는
body header footer 만 들어갑니다. */

body{
    overflow-x: hidden;
	font-weight: 400;
	color:#333;
	width:100%;
	line-height: 1.6;
	font-size:16px;
    font-family:'Montserrat','Nanum Gothic','Noto Sans KR', sans-serif;}

.bd{margin:0 auto; max-width:100%;}
.bd-xl{width:1600px;}
.bd-lg{width:1440px;}
.bd-md{width:1200px;}
.bd-sm{width:1024px;}

.center{text-align: center;}
.m-auto{margin:auto;}
.mt-0{margin-top:0;} .mt-1{margin-top:16px;} .mt-2{margin-top:32px;} .mt-3{margin-top:48px;} .mt-4{margin-top:64px;} .mt-5{margin-top:80px;}
.mb-1{margin-bottom:16px;} .mb-2{margin-bottom:32px;} .mb-3{margin-bottom:48px !important;} .mb-4{margin-bottom:64px;} .mb-5{margin-bottom:80px;}
.p-0{padding:0;}
.pt-1{padding-top:16px;} .pt-2{padding-top:32px;} .pt-3{padding-top:48px;} .pt-4{padding-top:64px;} .pt-5{padding-top:80px;}
.pb-1{padding-bottom:16px;} .pb-2{padding-bottom:32px;} .pb-3{padding-bottom:48px;} .pb-4{padding-bottom:64px;} .pb-5{padding-bottom:80px;}

.col-lg-6{width:50%; float:left; padding:0 10px;}



.trans{-webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
    -ms-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out;}

.img-bg{background-repeat: no-repeat; background-size:cover; background-position: center;}
.img-bg.outline{border:1px solid #ddd;}
.cf::before, .cf::after{display:block; content:''; clear: both;}

/* form에서 input foucus 했을 때 custom */
input:focus, textarea:focus, select:focus { outline: none !important;}

/* cursor */
.c-pointer{cursor: pointer;}
.c-auto a{cursor: auto !important;}


/* Header style */
header{position: fixed; width:100%; max-width: 1920px; z-index: 99; top:0; left:0;}
header .main_nav{background:#fff; height:72px; border-bottom:1px solid #e1e1e1; position: relative;}
.main_nav .bd{ align-items: center; position: relative;  height:72px;}
.nav_inner{display:inline-block;}


/* logo */
.nav_inner.left{position: absolute; top:50%; transform:translateY(-50%); z-index: 50;}
.nav_inner.left > a{display: block; width: 100%; height: 100%;}

 /* dept 1 */
.gnb_wrap{text-align: center; position: absolute; left:54%; transform: translateX(-50%); width:100%;}
ul.gnb{position: relative;}
ul.gnb > li{display:inline-block;  padding:0 5%; position: relative;}
ul.gnb > li > a{font-size:17px; padding:23px 0; display: block; position: relative;}
ul.gnb > li:hover > a{color:#0e4495;}
ul.gnb > li:hover > a:after{width:100%; height:3px; background:#0e4495; content:'';
    display: block; position: absolute; bottom:0px;}

/* active 했을 때 배경이 display:block */
ul.gnb > li.current .sub_dep{display:block;}

/* dept 2 */
.sub_dep{position: absolute; top:100%; width:calc(100% + 4px); padding-left:24px; margin-left:-24px; display:none; height:396px;}
.sub_dep:before{position: absolute; width:1px; height:396px; content:''; background-color:#e1e1e1; left:0;}

.sub_dep ul{width:100%; margin-top:10px; overflow:hidden;}
.header-bg{width:100%; height:397px;  z-index: -1; position: absolute; top: calc(100% - 1px); height:0;
    overflow:hidden;left:0; right:0; max-width:1920px; width:1920px; border-bottom:1px solid #e1e1e1;  background: #f5f5f5;}
.sub_dep li{position: relative; z-index: 50; text-align:left;}
.sub_dep li > a{ color:#333; cursor: pointer; position: relative; display: block; font-size:15px; padding:5px 0;}
.sub_dep li > a:hover{color:#0e4495;}

.sub_dep li.depth2 > a{color:#0e4495; font-weight:700;}

/* lang - utill */
.utill{background-color:#333; height:28px; line-height: 27px;}
.utill .utill_contents{float:right;}
.utill .utill_contents a{color:#fff; font-size:13px; position: relative; padding:0 16px;}
.utill .utill_contents a:after{position: absolute; right:0; top:50%; width:1px; transform: translateY(-50%); height:11px; background-color:rgba(255,255,255,.5); content:''; display: block;}
.utill .utill_contents a:last-child{padding-right:0;}
.utill .utill_contents a:last-child:after{display: none;}

/* mobile */
.header .mobile_nav{display:none;}

/* Footer Style */
footer{width:100%; background:#101010; height:auto; padding:40px 0; }/* position: absolute; bottom:0; */
footer .bd{width:768px; max-width:100%; text-align: center;}
footer .footer_info li{font-size:13px; display:inline-block; letter-spacing: 0px; color:#dcdcdc;}
footer .footer_info li:after{display:inline-block; content:''; background:#808080; margin:0 8px;}
footer .footer_info li:last-child:after{display:none;}/*  width:1px; height:10px; */
footer .footer_copy{margin:0; font-size:13px; color:#808080; padding-top:10px;}
footer .rock{float:right; margin-right:24px;}
footer .rock img{width:15px; opacity:0.3;}
footer .rock:hover img{ opacity:0.6;}



::selection{background-color: #222; color: white;}

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .sub_dep ul:after{top:80px;}

}

@supports (-ms-ime-align: auto) {
    .sub_dep ul:after{top:80px;}
}


/* ********************************************* *
 * 1600px max
 * ********************************************* */
 @media screen and (max-width: 1636px){

    .bd-xl{padding:0 24px;}
 }

 /* ********************************************* *
 * 1200px max
 * ********************************************* */
 @media screen and (max-width: 1200px){
 
    .header .main_nav{display:none;}

    /* mobile header를 위한 wrap */
    .wrap_container {position: relative; width: 100%;
        -moz-transition: all 0.3s cubic-bezier(0.24, 1.8, 0.68, 0.98); -o-transition: all 0.3s cubic-bezier(0.24, 1.8, 0.68, 0.98);
        -webkit-transition: all 0.3s cubic-bezier(0.24, 1.8, 0.68, 0.98); transition: all 0.3s cubic-bezier(0.24, 1.8, 0.68, 0.98);}
    .wrap_container.menu-opened {-moz-transform: translateX(-20em); -ms-transform: translateX(-20em); -webkit-transform: translateX(-20em); transform: translateX(-20em);}
 
    /* mobile header */
    .header .mobile_nav{display:block; height:66px; border-bottom:1px solid #e1e1e1; position: relative; background-color:#fff; z-index:100;}
    .mobile_nav_inner.left{left:20px; top:calc(50% + 2px); transform: translateY(-50%); position: absolute;}
    .mobile_nav_inner.left img{height:37px;}
    .mobile_nav_inner.right{position: absolute; right:20px; top:50%; transform: translateY(-50%);}

    .mobile_nav_inner.lang{position: absolute;  top:50%; transform: translateY(-50%); right: 72px;}
    .mobile_nav_inner.lang .header_lang{width:56px; font-size:12px;}

    /* mobile menu */
    .mobile_gnb_wrap{position: relative; width: 100%;
        -moz-transition: all 0.3s cubic-bezier(0.24, 1.8, 0.68, 0.98); -o-transition: all 0.3s cubic-bezier(0.24, 1.8, 0.68, 0.98);
        -webkit-transition: all 0.3s cubic-bezier(0.24, 1.8, 0.68, 0.98); transition: all 0.3s cubic-bezier(0.24, 1.8, 0.68, 0.98);}
        .mobile_gnb_wrap.opened{-moz-transform: translateX(-20em); -ms-transform: translateX(-20em);
            -webkit-transform: translateX(-20em); transform: translateX(-20em); }
    .mobile_gnb_wrap.opened .mobile_gnb{display: block;}
    .mobile_gnb { position: absolute; display: none;
        left:100%; width: 25em; top:66px; background:#fff; height:100vh; border-left:1px solid #e1e1e1; overflow-y: scroll;}

    .mobile_gnb > li{border-bottom:1px solid #e1e1e1;}
    .mobile_gnb > li a{ display: inline-block; padding:16px 16px;  cursor: pointer;}
	.mobile_gnb > li a.current{color:#0e4495; font-weight:700;}
    /* mobile dept 2 */
    .mobile_sub_dep > ul{display:none; background:#f5f5f5; border-top:1px solid #e1e1e1;}
	.mobile_sub_dep > ul li a{ padding:12px 16px; font-size:15px;}
.mobile_sub_dep > ul li.depth2 a{color:#0e4495; font-weight:700;}

    /* burger menu */
    .burger_menu { width: 2em; margin: auto; vertical-align: middle;text-indent: -9999px;
    -moz-transition: all, 0.3s; -o-transition: all, 0.3s; -webkit-transition: all, 0.3s;transition: all, 0.3s;}
    .burger_menu span { display: block; position: relative;height: 2px; width: 2em; background-color: #222;}
    .burger_menu span::before, .burger_menu span::after {
    -moz-transition: all, 0.3s; -o-transition: all, 0.3s; -webkit-transition: all, 0.3s; transition: all, 0.3s;
    content: ""; display: block; background-color: #222; width: 100%; height: 2px; position: absolute;}
    .burger_menu span::after {top: 0.5em;}
    .burger_menu span::before { bottom: 0.5em;}
    .burger_menu:hover span::before { -moz-transform: translateY(-0.120em); -ms-transform: translateY(-0.120em);
        -webkit-transform: translateY(-0.120em); transform: translateY(-0.120em);}
    .burger_menu:hover span::after { -moz-transform: translateY(0.120em); -ms-transform: translateY(0.120em);
        -webkit-transform: translateY(0.120em); transform: translateY(0.120em);}
    .burger_menu.actived {
    overflow: visible;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    }
    .burger_menu.actived span::before, .burger_menu.actived span::after {
    width: 50%; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0;transform-origin: 0 0;}
    .burger_menu.actived span::before {
    bottom: 0; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);  transform: rotate(45deg);}
    .burger_menu.actived span::after {
    top: 0; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
    .burger_menu.actived:hover {
    -moz-transform: translateX(0.2em) rotate(180deg); -ms-transform: translateX(0.2em) rotate(180deg);
    -webkit-transform: translateX(0.2em) rotate(180deg); transform: translateX(0.2em) rotate(180deg);}

 }