@charset "utf-8";

*{margin: 0;
padding: 0;}

li{list-style: none;}
img{border: 0;}
a{text-decoration: none;
    color: #222;}

.center{
    max-width:1200px;
    margin: 0 auto;
}

@font-face{
            font-family:'na';
            src:url('../e_font/NanumGothic.eot');
                src:local('na'),url('../e_font/NanumGothic.woff') format('woff'), url('../e_font/NanumGothic.ttf') format('truetype');}
        
@font-face{
            font-family:'naB';
            src:url('../e_font/NanumGothicBold.eot');
                src:local('naB'),url('../e_font/NanumGothicBold.woff') format('woff')}


body{
    font: 0.75em 'na', 'Helvetica', sans-serif;
    min-width: 1250px;/*-----반응형으로 할 경우 빼기---------*/
}

/*-----------------------head-------------------------------------------------*/
#navi{
    position: fixed;
    width: 100%;
      z-index: 100;
}

#navi:hover,#navi.hover{
    background: #fff;
    border-bottom: 3px solid #f06da1;
}

#helogo{
    width: 100%;
    padding-top: 20px;
}
#helogo a{
    width:100%;
    display: block;
    text-align: center;
    background: url(../e_img/e_main/head_logo.png) center no-repeat;
    text-indent: -9999px;
}

#navi:hover #helogo a, #navi.hover #helogo a{
    background: url(../e_img/e_main/hover_logo.png) center no-repeat;
}



#under_head{
    width: 100%;
}

#list_navi{
width: 100%;
}

#list_navi > ul{
    width: 100%;
    margin-top: 30px;
}

#list_navi > ul> li{
  float: left;
    margin: 0 1%;
    width: 15%;
}

#list_navi > ul> li:hover{
    border-bottom: 5px solid #f06da1;
}

#list_navi >ul >li span a{
    padding: 11px 10px ;
    text-align: center;
    display: block;
    color: #fff;
    font-family: "naB";
    font-size: 1.3em;
}

#navi:hover #list_navi> ul >li span a, #navi.hover #list_navi> ul >li span a{
    color: #222;
}

#list_custom figure:first-child{
    margin-left: 2%;
}

#list_custom figure{
    float: left;
}

#list_custom figure:nth-child(1) a{
    background: url(../e_img/e_main/h_shopwhite.png) center no-repeat;
    display: block;
    width: 30%;
     padding: 15px;
    text-indent: -9999px;
}


#navi:hover #list_custom figure:nth-child(1) a, #navi.hover #list_custom figure:nth-child(1) a{
    background: url(../e_img/e_main/h_shop.png) center no-repeat;
}

#list_custom figure:nth-child(2) a{
    background: url(../e_img/e_main/h_searchwhite.png) center no-repeat;
    display: block;
     width: 30%;
    padding: 15px;
      text-indent: -9999px;
}

#navi:hover #list_custom figure:nth-child(2) a, #navi.hover #list_custom figure:nth-child(2) a{
    background: url(../e_img/e_main/h_search.png) center no-repeat;
}


#list_custom figure:nth-child(3) a{
    background: url(../e_img/e_main/h_customwhite.png) center no-repeat;
    display: block;
     width: 30%;
    padding: 15px;
      text-indent: -9999px;
}

#navi:hover #list_custom figure:nth-child(3) a, #navi.hover #list_custom figure:nth-child(3) a{
    background: url(../e_img/e_main/h_custom.png) center no-repeat;
}



/*---------------------------------서브네비-----------------------------------------------------------*/

 #ul_navi li div.navi_sec{
            position: absolute;/*각자 li 기준으로 위치 잡음 */
            top: 122px;/*세로사이즈 준만큼.. 딱 맞게 띄우기 */
            left: 0;
            width: 100%;/*부모의 가로사이즈 만큼 */
            background: #fff;/*글자수만큼 가지고 싶으면 ul에 주*/
     z-index: 100;
     border-bottom: 3px solid #ff0e87;
        }
        
div.navi_sec ul.leftul{
    width: 12%;
    overflow: hidden;
    float: left;
    height: 200px;
}

div.navi_sec ul.leftul li{
    width: 100%;
    overflow: hidden;
}

div.navi_sec ul{
    height: 30px;
    padding-top: 1%;
    padding-left: 2%;
    text-align: center;
}
 
div.navi_sec ul li h3{
    margin-bottom: 8px;
}

div.navi_sec ul li{
    float: left;
    width: 12%;
    line-height: 18px;
}

div.navi_sec ul li a{
    padding: 8px;
    display: block;
    line-height: 12px;
    font-size: 1.1em;
}


div.navi_sec ul li a:hover{
    color: #f06da1;
    font-family: "naB";
  background: #dddddd;
}

 /*각 서브 네비게이션 위치 이동- 너무 왼쪽으로 붙어있어서 */
        /*정확한 수치로 한것은 아니고 눈대중으로 햇음*/
        #ul_navi li:nth-child(1) div.navi_sec ul:first-child{
            margin-left: 17%;
        }
        
        #ul_navi li:nth-child(2) div.navi_sec ul{
            margin-left: 20%;
        }
        
        #ul_navi li:nth-child(3) div.navi_sec ul{
            margin-left: 33%;
        }
        
        #ul_navi li:nth-child(4) div.navi_sec ul{
            margin-left: 45%;
        }
        
        #ul_navi li:nth-child(5) div.navi_sec ul{
            margin-left: 59%;
        }




/*--------------슬라이더 이미지 및 글--------------------------------------------*/
div.ws_images> ul> li{
    position: relative;
}

div.slide_wh{
   width: 100%;
}

div.slide_leftt{
    position: absolute;
    top: 42%;
    left: 20%;
    color: #222222;
    float: left;
    width: 50%;
}

div.slide_leftt p{
    font-size: 1.6em;
    line-height: 16px;
    font-family: "naB";
}

div.slide_leftt h2{
    padding-top: 70px;
    font-size: 3.0em;
    line-height: 35px;   
}

div.slide_leftt a span{
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 1.5em;
    padding: 20px;
    box-sizing: border-box;
    display: inline-block;
    margin-top: 70px;
    z-index:80; 
}

div.slide_white{
    color: #fff;
}

div.sol_right{
    display: block;
    height: 400px;
    width: 50%;
    position: absolute;
    top: -50px;
    left: 85%;
}


div.sol_right1 figure{
    display: block;
     background: url(../e_img/e_main/4lip_big.png) center no-repeat;
     width: 100%;
     height: 400px;
    text-indent: -9999px;
}

div.sol_right2 figure{
    display: block;
     background: url(../e_img/e_main/main_se2_03.png) center no-repeat;
     width: 100%;
     height: 400px;
    text-indent: -9999px;
}
div.sol_right3 figure{
    display: block;
     background: url(../e_img/e_main/main_se3_03.png) center no-repeat;
     width: 100%;
     height: 400px;
    text-indent: -9999px;
}
div.sol_right4 figure{
    display: block;
     background: url(../e_img/e_main/main_se_03.png) center no-repeat;
     width: 100%;
     height: 400px;
    text-indent: -9999px;
}

/*----------------------------신상품--------------------------------*/
#new_pt{
    overflow: hidden;
    padding-top: 0px;/*----위에 불릿 40px앱솔루트라서 여백 30px까지 70임*/
    text-align: center;
}

#new_pt h3{
    font-size: 1.7em;
    font-family: "naB";
}

#new_plist ul{
    margin-top: 20px;
}

#new_plist ul li{
    float: left;
    width: 18%;
    margin: 0 1%;
    border: 1px solid #bababa;
    box-sizing: border-box;
}

#new_plist ul li:nth-child(1){
    margin-left: 0;
}

#new_plist ul li:nth-child(5){
    margin-right: 0;
}

#new_plist ul li a{
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

#new_plist ul li a img{
    width: 100%;
}

 /*---오버시 어둡게 해줄 */
        .h_box{
            position: absolute;
            left: 0;/*부모 기준 달라붙도록*/
            top: 0;/*부모 기준 달라붙도록*/
            width: 100%;
            height: 100%;
        }

        .over{
          background: #000;
            opacity: 0.5;/*인터넷 익스플로러 8이하는 구동안됨, 이미지와 색상 같이 흐려짐, 색상만 하는경우 rgba로 해야함*/
            filter: alpha(opacity=50);/*낮은 버전에서도 사용 할 수 있도록*/
}

.p_wrap{
   position: absolute;
    width: 216px;
    height: 218px;
    z-index: 9;
    top: 50%;
    left: 50%;
    margin-left: -60px;
    margin-top: -20px;
    text-align: center;
}

  .p_wrap> p{
            color:#fff;
            width: 90px;
            text-align: center;
            padding: 10px;
            /*position: absolute;*/
            z-index: 11;
            margin:5px;
            display:none;
          border-bottom: 1px solid #fff;
          border-top: 1px solid #fff;
        }

#etude_video{
    overflow: hidden;
    padding-top: 70px;
    text-align: center;
}

#etude_video h3{
    font-size: 1.7em;
    font-family: "naB";
    margin-bottom: 20px;
}



/*-------------------------에뛰드픽-----------------------*/
#etude_pick{
     overflow: hidden;
    padding-top: 70px;
    text-align: center;
}

#etude_pick h3{
    font-size: 1.7em;
    font-family: "naB";
    margin-bottom: 20px;
}

#etude_pick ul li{
    float: left;
    width: 13.3%;
    margin: 1% 2%;
    height: 150px;
    
}

#etude_pick ul li a img{
    width: 100%;
    height: 100%;
}


#etude_pick ul li:nth-child(1),#etude_pick ul li:nth-child(7){
    margin-left: 0;
}

#etude_pick ul li:nth-child(6),#etude_pick ul li:nth-child(12){
    margin-right: 0;
}



        
ul.modal{
            margin-left: 50px;
        }
        
 ul.modal li{
            float: left;}
        
 ul.modal li a img{
            margin: 10px;
            vertical-align: top;
        }

  #glaylayer{/*화면전체를 어둡게*/
            position: fixed;/*absolute는 화면전체기준으로 잡히나 스크롤 움직엿을때 빈 화면 생김 */
            display: none;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.4);
            z-index: 1000;
            /*background: #000;
            opacity: 0.6;
            filter: alpha(opacity=60);*/
        }
        
        #overlayer{
            position: fixed;
            display: none;
            top:25%;
            left: 40%;
            z-index: 1001;
            margin-top: -142px;
            /*이미지 세로 크기, 2나눈값(절반사이즈만큼 위쪽으로 이동)*/
            margin-left: -215px;
            /*이미지 가로 크기, 2나눈값(절반사이즈만큼 왼쪽으로 이동)*/
        }
        
        #overlayer div{position: relative;/*fixed넣은데에는 relative 못주니 div만든데에 이거 넣기 */ width: 700px;
        height: 400px;
    background: #fff;}

#overlayer>div>img{
    width: 100%;
}
#overlayer>div>p:nth-child(1)>img{
    position: absolute;
    top: 80%;
    left: -50px;
}

#overlayer>div>p:nth-child(4)>img{
    position: absolute;
    top: 80%;
    right: -50px;
}
        
        #overlayer > div > span{
            position: absolute;
            top: 0px;
            right: 0px;
            cursor: pointer;
        }
        


/*-----------------------푸터--------------------------------------*/
footer{
    margin-top: 30px;
}

#foot_top{
    background: #f4f4f4;
    width: 100%;
    height: 40px;
}

#foot_tl h3{
    float: left;
    margin-right: 5%;
    cursor: pointer;
    line-height: 40px;
    font-family: "naB";
    color: #717171;
}
/*----------------------service--------------------*/
#service_foot{
    position: relative;
}


#service_wrap{
    background: #ffffff;
    position: absolute;
    width: 100%;
    bottom: 10px;
    border: 2px dashed #ccc;
    padding: 2%;
}

#service_wrap ul{
    float: left;
    height: 150px;
    width: 20%;
}

#service_wrap ul li h2{
    color: #f06da1;
    margin-bottom: 15px;
}

#service_wrap ul li a{
    color:#444;
    padding: 5px 20px 5px 0;
    display: inline-block;
}

#service_wrap ul li a:hover{
    color: #fab2cf;
    border-bottom: 1px solid #fab2cf;
}

/*----------------------family site--------------------*/
#family_foot{
     position: relative;
}

#family_wrap{
    background: #ffffff;
    position: absolute;
    width: 8%;
    bottom: 10px;
    border: 2px solid #ccc;
    padding: 2%;
    left: 11%;
}

#family_wrap ul li a{
    color:#444;
    padding: 5px 20px 5px 0;
    display: inline-block;
}


#family_wrap ul li a:hover{
    color: #fab2cf;
    border-bottom: 1px solid #fab2cf;
}


/*----------------foot top right----------------------------*/
#foot_tr{
    float: right;
}

#foot_tr ul{
  width: 100%;  
}

#foot_tr ul li{
    float: left;
    line-height: 30px;
}

#foot_tr ul li a{
    display: block;
    padding: 5px 10px;
    color:#555555;
}


/*----------------footbottom----------------------------------*/
#foot_bottom{
    background: #e0e0e0;
    /*overflow: hidden;*/
    width: 100%;
    height: 100px;
}

#foot_bottom figure{
    float: left;
   margin-top: 20px;
}

#foot_bottom p{
    float: left;
    margin-top: 22px;
    margin-left: 2%;
}