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

body{
	font-weight: 300;
	color:#222;
	width:100%;
	line-height: 1.6;
	font-size:16px;
	font-family:'Muli', 'Noto Sans KR','MalgunGothic', sans-serif;
}

.boundary{margin:0 auto; max-width:100%; width:1440px;}
.boundary2{margin:0 auto; max-width:100%; width:1200px;}

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

.bg_img{background-repeat: no-repeat; background-size:cover; background-position: center;}
.clearfix::before, .clearfix::after{display:block; content:''; clear: both;}
.mb-15{margin-bottom:240px;}

/* form에서 input foucus 했을 때 custom */
input:focus, textarea:focus, select:focus { outline: none !important; border:0; box-shadow: inset 0 0 0 1px #222;}


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

.header-bg{width:1920px; height:71px;  z-index: -1; position: absolute; top:100%; left: 0%; content:''; max-width:1920px;
    border-bottom:1px solid #e1e1e1;  background: #f5f5f5; left:0; right:0; display:none;}

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

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

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

/* dept 2 */
.sub_dep{ height:71px; position: absolute;display:none; top:100%; left:50%; transform:translateX(-50%); width:100%;}
.sub_dep ul{width:100%; overflow:hidden;}
.sub_dep li{position: relative; z-index: 50; display: inline-block;}
.sub_dep li > a{ color:#222; padding:23px 20px; cursor: pointer; position: relative; display: block;}
.sub_dep li > a:hover{color:#d70034;}

/* lang */
.nav_inner.right{right:0; top:50%; transform: translateY(-50%); position: absolute; }
.header_lang{cursor: pointer; border:1px solid #222; 
    width:68px; padding:2px 0; text-align: center; font-size:13px;
    -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
    -ms-transition:all 0.3s ease-out; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out;}
.header_lang:hover{color:#fff; border:1px solid #222; background:#222;}


/* Footer Style */
footer{width:100%; background:#101010; height:auto; padding:40px 0; }/* position: absolute; bottom:0; */
footer .boundary{width:900px; 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:18px; opacity:0.8;}


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


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

    /* 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{ height:66px; border-bottom:1px solid #e1e1e1; position: relative; background-color:#fff; z-index:100;}
    .mobile_nav_inner.left{left:20px; top:50%; transform: translateY(-50%); position: absolute;}
    .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:20px;  cursor: pointer;}

    /* mobile dept 2 */
    .mobile_sub_dep > ul{display:none; background:#f5f5f5; border-top:1px solid #e1e1e1;}


    /* 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);}

 }