/*pc버전*/
body{width: 100%;}
.wrap{width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    font-family: 'NanumSquareR';
    -webkit-font-family: 'NanumSquareR';
    -ms-font-family: 'NanumSquareR';
    -o-font-family: 'NanumSquareR';}
.center{margin:0 auto; width:1200px;}
header{width:100%; height:100px; position:absolute; left:0; top:0;z-index: 2;}
a{text-decoration: none; color: #000000;}
ul,li{list-style: none;}

.nav{margin:0 auto; width:1200px; height: 100px; position:relative; z-index: 3;}
.nav>h1{float:left;margin-top: 23px; z-index: 2;position:absolute; left:0; top:0;}
header h1 a>img{width:180px;}
.nav>ul.lang{position:absolute;right:0;float:right; margin-top:10px;}
.nav>ul.lang>li{float:left; font-size:0.875rem;font-family: 'NanumSquareB';}
.nav>ul.shop{position:absolute;right:44px;float:right; margin-top:5px;}
.nav>ul.shop img{width: 60%;}

.dropdown{width: 100%;height: 250px; position:absolute;left:0; top:0; z-index:1;background-color:rgba(255,255,255,0.7); display: none;}

.nav>ul.gnb{float:right;overflow:hidden; margin-top:55px;}
.nav>ul.gnb>li{float:left; text-align: left; margin-left:/*90px*/;/*width:180px; */padding-left:100px;font-family: 'NanumSquareB';}
.nav>ul.gnb>li:first-of-type{text-align: left; padding-left:0; width:217px;}
.nav>ul.gnb>li:nth-of-type(2){text-align: left; padding-left:0; width:226.78px;}
.nav>ul.gnb>li:nth-of-type(3){text-align: left; padding-left:0; width:273.69px;}
.nav>ul.gnb>li:nth-of-type(4){text-align: left; padding-left:0; width:160.73px;}

.nav>ul.gnb .sub_menu{display: none; /*width:150px;*/}
.nav>ul.gnb .sub_menu>li{position:relative;height: 40px; line-height: 40px; text-align:left !important;font-family: 'NanumSquareR';font-size:14px;}
.nav>ul.gnb .sub_menu>li>a{position:absolute;left:0;}
.nav>ul.gnb>li:nth-of-type(2)>a{display:block !important;}
.nav>ul.gnb>li:nth-of-type(2)>a>img{margin-left:55px;}
.nav>ul.gnb li:nth-of-type(4) .sub_menu>li>a{width: 200px;}
.nav>ul.gnb li:nth-of-type(5) .sub_menu>li>a{width: 100px;}

.nav>ul.gnb .sub_menu>li:first-of-type{margin-top:20px;}
/*withus submenu 배열 맞추기*/

.nav>ul.gnb .sub_menu>li:hover a{color:#666666;}
.nav>ul.gnb .sub_menu>li:hover a>img{filter: brightness(500%);}

.menu_bar{display: none;}

i.fa-bars{display: none;}

/*footer*/
footer {
    width:1200px;
    margin:0 auto;
    height: 200px;
    overflow: hidden;
    background-color: #1d1d1d;
}

footer > .center {
    height: 100%;
    color: #666666;
    margin:20px;
    font-size:14px;
}

.ft_left {
    width: 90%;
    float:left;
}

.ft_left > ul {
    color: #666666;
    overflow: hidden;
}

.ft_left > ul.info > li {
    float: left;
    font-weight: 300;
    margin-bottom: 10px;
    border-left: 1px solid #666666;
    padding-left: 5px;
    margin-left: 5px;
}
.ft_left ul.info3 > li {margin-bottom: 10px !important;}

.ft_left > ul.info > li:first-child {
    border-left: 0;
    padding-left: 0;
    margin-left: 0;
}

.ft_left > .company {
    color:#666666 !important;
    font-weight: 300 !important;
    margin-bottom: 10px !important;
}
.ft_left > .copyright {
    color:#666666;
    font-weight: 300;
}

.ft_right {
    width: 600px;
    overflow: hidden; 
}

.ft_right > ul.sns {
    float:left;
    margin-top:20px;
}

.ft_right > ul.sns > li {
    float: left;
    display: inline-block;
    width: 45px;
    height: 45px;
    margin-right: 10px;
}

.ft_right > .shop {
    float:left;
    margin-top:29px;
}

.ft_right > .shop > a {
    display: block;
}

.ft_right > .shop > a:hover p {
    color: #ffffff;
}

.ft_right > .shop > a > p {
    color: #666666;
    float: left;
    margin:6px 0 0 10px;
}

.ft_right > .shop > a > img {
    float: left;
}

ul.info2{display: none;}


/*tablet & mobile*/
@media screen and (max-width:959px){
    body{width: 100%;height: 100%;}
    .wrap{width: 100%; height: 100%;}
    .center{width: 90%;}   
    
    section.top{width: 100%;padding-top:60px !important;}
    .center{width: 100%;}
    header{height:60px;}
    header h1{margin-top:11px !important;}
    .nav{width: 90%; height:60px;}
    
    .modal{width: 100%;height: 100%; background-color: rgba(0,0,0,0.7);position: absolute;left:0;top:0; display:none;z-index: 4;}
    .menu_bar nav>h1{z-index: 2;}
    ul.lang{display: none;}
    ul.shop{display: none;}
    ul.gnb{display: none;}
    .nav>h1>a>img{width:130px;}
  

    i.fa-bars{display: block; font-size: 30px; position:absolute;right: 0;  top:50%; transform: translateY(-50%);}
    .nav>a{width: 36px; height: 36px; display: block; float:right; margin-top:8px;}
    
     .menu_bar{
        position:absolute;
        right: 0;top:0;
        display:none;
        width:/*300px*/80%;
        height:;
        color:#ffffff;
        background-color: #afb5c7;
        border-radius: 50px 0 0 50px ;
        padding:30px;
        z-index: 9999;
    }
    
    .menu_bar>.lang{display: block; font-size: 32px; float:left;}
    .menu_bar>.lang>li{float:left;}
    .menu_bar>.lang a{color:#ffffff;}
    
    .exit{width: 68px;height: 68px; float:right;}
    .exit img {width:100%;height:100%;}
    
    .menu_bar>.gnb{float:left; margin-top:40px; width: 100%; height:;  display: block;}
    .menu_bar>.gnb>li{float:left;width: 100%; line-height: 120px; border-bottom:1px solid #ffffff;font-family: 'NanumSquareB';}
    .menu_bar>.gnb>li:last-of-type{border:0;}
    .menu_bar>.gnb>li>a{color:#ffffff; font-size:40px;display: block;overflow: hidden;}
    .menu_bar>.gnb>li>a>span{float:right; font-size:60px; width:36px !important;}
    
    .menu_bar>.gnb>li>ul.sub_menu{width: 100%;height: /*90px*/; margin-top:-30px; float:left;display: none;}
    .menu_bar>.gnb>li>ul.sub_menu>li{width: 100%;height: 60px; line-height: 60px; font-size:32px;}
    .menu_bar>.gnb>li>ul.sub_menu>li>a{color:#666666; font-family: 'NanumSquareEB'; height:20px;}
    
    .menu_bar>ul.sns{width: 100%; overflow: hidden; padding-top:100px;}
    .menu_bar>ul.sns>li{float:left; width: 14.285%; text-align: center;}
    .menu_bar>ul.sns>li>a>img{width: 72px;height: 72px;}
  
    /*footer*/
    footer{width: 100%;}
    footer>div.center{width: 100%;}
    .ft_left{width:420px; float:left;}
    .ft_right{display:none;}
    ul.info{display: none;}
    ul.info2{display: block;}
    .ft_left > .copyright {font-weight:normal;}
}

/*tablet*/
@media screen and (min-width:768px) and (max-width:959px){
    .wrap{width: 100%;}
    .center{margin:0 auto; width:90%;}
    a.expand>img{width:240px !important;}
}

/*mobile*/
@media screen and (max-width:767px){
    .menu_bar{height:;}
    .menu_bar>.lang{display: block; font-size: 16px; float:left;}
    .menu_bar>.lang>li{float:left;}
    .menu_bar>.lang a{color:#ffffff;}
    
    .exit{width: 34px;height: 34px; float:right;}
    .exit img {width:100%;height:100%;}
     .menu_bar{padding:30px;}
    .menu_bar>.gnb{float:left; margin-top:20px; width: 100%; height:;  display: block;}
    .menu_bar>.gnb>li{float:left;width: 100%; line-height: 60px; border-bottom:1px solid #ffffff;font-family: 'NanumSquareB';}
    
    .menu_bar>.gnb>li:last-of-type{border:0;}
    .menu_bar>.gnb>li>a{color:#ffffff; font-size:20px;display: block;overflow: hidden;}
    .menu_bar>.gnb>li>a>span{float:right; font-size:30px; width:18px !important;}
    
    .menu_bar>.gnb>li>ul.sub_menu{width: 100%;height: /*90px*/; margin-top:-15px; float:left;display: none;}
    .menu_bar>.gnb>li>ul.sub_menu>li{width: 100%;height: 30px; line-height: 30px; font-size:16px;}
    .menu_bar>.gnb>li>ul.sub_menu>li>a{color:#666666; font-family: 'NanumSquareEB'; height:10px;}
    .menu_bar>.gnb>li>ul.sub_menu>li>a>img{width:130px;}
    a.expand>img{}
    .menu_bar>ul.sns{width: 100%; overflow: hidden; padding-top:50px;}
    .menu_bar>ul.sns>li{float:left; width: 14.285%; text-align: center;}
    .menu_bar>ul.sns>li>a>img{width: 36px;height: 36px;}
.ft_left{width:340px; float:left;}
    footer{font-size: 14px; height:250px !important;}
}