@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Poiret+One);
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lora:400,400i&display=swap');

/* reset */
* { margin:0;  padding:0; box-sizing: border-box;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { font:15px/1.6 'Poiret One'; color:#555; } 

/*레이아웃*/
header {width:15%; height:100%; 
    background:#fff; 
    position:fixed; top:0px; left:0px; 
    transition:all 0.5s;
}
nav { width:85%; height:35px; margin-left:15%; 
    position:relative; 
    background:#212121; 
    transition:all 0.5s;
}
section { width:85%; margin-left:15%;
    position:relative;
}
article { float:left; height:260px; 
    transition:all 0.5s; 
    animation:scale 1s 1;
}
article:nth-child(1)  { width:60%; height:520px; background:#ddd;}
article:nth-child(2)  { width:40%; background:#ccc;}
article:nth-child(3)  { width:20%; background:#bbb;}
article:nth-child(4)  { width:20%; background:#aaa;}
article:nth-child(5)  { width:20%; background:#999;}
article:nth-child(6)  { width:40%; background:#888;}
article:nth-child(7)  { width:20%; background:#777;}
article:nth-child(8)  { width:20%; background:#666;}
article:nth-child(9)  { width:40%; background:#555;}
article:nth-child(10) { width:20%; background:#444;}
article:nth-child(11) { width:20%; background:#333;}
article:nth-child(12) { width:20%; background:#222;}

/* 배경이미지 삽입*/
article .bg1 { background-image:url(../img/her-4.jpg);
    background-size:cover; background-position:center center;
}
article .bg2 { background-image:url(../img/her-5.jpg);
    background-size:cover; background-position:center center;
}
article .bg3 { background-image:url(../img/her-1.jpg);
    background-size:cover; background-position:center center;
}
article .bg4 { background-image:url(../img/her-16.jpg);
    background-size:cover; background-position:center center;
}
article .bg5 { background-image:url(../img/her-14.jpg);
    background-size:cover; background-position:center center;
}
article .bg6 { background-image:url(../img/her-3.jpg);
    background-size:cover; background-position:center center;
}
article .bg7 { background-image:url(../img/her-8.jpg);
    background-size:cover; background-position:center center;
}


/* header 컨텐츠 */
header h1 { width:180px; height:136px; margin-left:-90px;
    background:url(../img/her-logo.png) no-repeat 0px 0px; background-size:contain; 
    position:absolute; top:70px; left:50%; 
    text-indent:-99999px;}
#gnb { position:absolute; top:300px; right:57px;}
#gnb a { display:block; padding:8px 30px;	
    font-size:20px; font-weight:700; color:#555; text-align:left; line-height:1.8; font-family: 'Roboto', sans-serif;
    transition:all 0.5s;
}
#gnb a:hover {color:#d81446; transform: scale(1.1)}
#gnb a i {margin-right:13px;}




/*nav*/
nav a{font-size: 16px;color: #efefef; transition: all 0.3s}
nav a:nth-child(1) {position:absolute; top:5px;	right:100px;}
nav a:nth-child(2) {position:absolute; top:5px;	right:55px;}
nav a:nth-child(3) {position:absolute; top:5px;	right:10px;}

nav a:hover {color: #d81446; transform: scale(1.1)}

article>div { position:relative; width:100%; height:100%; overflow:hidden; cursor:pointer; }

/* 이미지박스 */
.bg1 span { 
    font-size:50px; color:#fff; font-family: 'Lora', serif;	
    transition:all 0.6s;
    opacity: 0.3;
    padding-top: 320px;
    
}

/*이미지박스 호버효과*/
.bg1:hover span {color:#fff; opacity:1; transform: scale(1.3);
    transform:rotateY(360deg); 
}

/* 텍스트박스 */
article .txt { background:#fff; box-sizing:border-box; padding:40px 30px; font-family: 'Lora', serif; color:#666; 
    transition:all 0.5s;
}
article:nth-child(3) .txt { background:#e8e8e8;}
article:nth-child(11) .txt { background:#e8e8e8;}

article .txt strong { margin-bottom:20px; 
    font-size:30px;font-weight:normal; line-height:1.6;	color:#444; 
    transition:all 1s;
}
/*텍스트박스 호버효과*/
article:hover .txt { background:#d81446;	color:#fff;}
article:hover .txt i {right:0px; opacity:0.5;}
article:hover .txt strong { color:#fff;}






























@media screen and (min-width:1280px) and (max-width:1600px) {  
    header { width:100%; height:80px;
        position:relative;
    }
    nav { width:100%; margin-left:0%;}		
    section { width:100%; margin-left:0px;}	
    header h1 { width:200px; height:40px; margin-left:0px;
        background-image:url(../img/her-logo.png); top:20px; left:20px;
    }	
    #gnb { top:20px; right:200px;}	
    #gnb li { float:left;}
    .snsSet { bottom:20px; right:80px;}
}

@media screen and (min-width:1024px) and (max-width:1279px) {  
    header { width:100%; height:80px;
        position:relative;
    }
    nav { width:100%; margin-left:0%;}		
    section { width:100%; margin-left:0px;}	
    
    article:nth-child(1) { width:75%;}	
    article:nth-child(2) { width:25%;}	
    article:nth-child(3) { width:25%;}	
    article:nth-child(4) { width:25%;}	
    article:nth-child(5) { width:25%;}	
    article:nth-child(6) { width:50%;}	
    article:nth-child(7) { width:50%;}	
    article:nth-child(8) { width:25%;}	
    article:nth-child(9) { width:25%;}	
    article:nth-child(10) { width:50%;}	
    article:nth-child(11) { width:25%;}	
    article:nth-child(12) { width:25%;}
    header h1 { width:200px;	height:40px;	margin-left:0px;
        background-image:url(../img/her-logo.png);	top:20px;	left:20px;
    }
    #gnb { top:20px; right:30px;}	
    #gnb li { float:left;}	
    .snsSet {	display:none;}
}

@media screen and (min-width:780px) and (max-width:1023px) {  

    /*레이아웃*/
    header { position:relative; width:100%; height:80px;}
    nav { width:100%; margin-left:0%;}		
    section { width:100%; margin-left:0px;}		
    article:nth-child(1) { width:100%;	height:400px;}	
    article:nth-child(2) { width:66.6666%;}	
    article:nth-child(3) { width:33.3333%;}	
    article:nth-child(4) { width:33.3333%; display:none;}	
    article:nth-child(5) { width:33.3333%;}	
    article:nth-child(6) { width:66.6666%;}	
    article:nth-child(7) { width:66.6666%; display:none;}	
    article:nth-child(8) { width:33.3333%;}	
    article:nth-child(9) { width:33.3333%;}	
    article:nth-child(10) { width:66.6666%; display:none;}	
    article:nth-child(11) { width:33.3333%;}	
    article:nth-child(12) { width:33.3333%; display:none;}

    /* header 컨텐츠 */
    header h1 { width:200px; height:40px; margin-left:0px;	
        background-image:url(../img/her-logo.png); top:20px; left:20px;
    }	
    #gnb { top:20px; right:10px;}	
    #gnb li { float:left;}	
    #gnb a { padding:10px 10px;}		
    .snsSet { display:none;}	
}


@media screen and (min-width:640px) and (max-width:779px) {  

    /*레이아웃*/
    header { position:relative; width:100%; height:80px;}
    nav { width:100%; margin-left:0%;}		
    section { width:100%; margin-left:0px;}		
    article:nth-child(1) { width:100%;	height:400px;}
    article:nth-child(2) { width:100%;}	
    article:nth-child(3) { width:33.3333%; display:none;}	
    article:nth-child(4) { width:100%;	display:none;}	
    article:nth-child(5) { width:50%;}	
    article:nth-child(6) { width:50%;}	
    article:nth-child(7) { width:66.6666%; display:none;}	
    article:nth-child(8) { width:50%;}	
    article:nth-child(9) { width:50%;}	
    article:nth-child(10) { width:66.6666%; display:none;}	
    article:nth-child(11) { width:50%;}	
    article:nth-child(12) { width:50%;}	

    /* header 컨텐츠 */
    header h1 { width:200px; height:40px; margin-left:0px;	
        background-image:url(../img/her-logo.png); top:20px; left:20px; 
    }	
    #gnb { top:20px; right:10px;}	
    #gnb li { float:left;}	
    #gnb a { padding:10px 10px;}	
    .snsSet { display:none;}	

}
@media screen and (min-width:479px) and (max-width:639px) {  

    /*레이아웃*/
    header { position:relative; width:100%; height:130px;}	
    nav { display:none;}
    section { width:100%; margin-left:0px;}
    article { height:150px;}		
    article:nth-child(1) { width:100%; height:300px;}		
    article:nth-child(2) { width:100%;}	
    article:nth-child(3) { width:33.3333%; display:none;}	
    article:nth-child(4) { width:100%;	display:none;}	
    article:nth-child(5) { width:50%;}	
    article:nth-child(6) { width:50%;}	
    article:nth-child(7) { width:66.6666%; display:none;}	
    article:nth-child(8) { width:50%;}	
    article:nth-child(9) { width:50%;}	
    article:nth-child(10) { width:66.6666%; display:none;}	
    article:nth-child(11) { width:50%;}	
    article:nth-child(12) { width:50%;}	

    /* header 컨텐츠 */
    header h1 {width:200px; height:40px;
        position:relative; top:20px; left:55px; 
        background-image:url(../img/her-logo.png); margin: 0 auto;
    }
    #gnb { width:100%; height:40px; top:90px; right:0px;}	
    #gnb li { float:left; width:20%;}	
    #gnb a { padding:4px; text-align:center; font-size: 15px;}	
    article .txt {text-align: center; padding-top: 60px;}
    article .txt strong {font-size:20px;}
    article .txt em {display:none;}	

}
@media screen and (max-width:479px){

    /*레이아웃*/
    header { position:fixed; width:100%; height:40px; 
        background-color:transparent; z-index:5;
    }
    nav {display:none;}	
    section { width:100%; margin-left:0px; z-index:4;}		
    article { display:none;}
    article:nth-child(1) { display:block; position:fixed; width:100%; height:100%;
    }	

    /* header 컨텐츠 */
    header h1 { top:20px; width:140px; margin-left:-70px;}	
    #gnb { width:250px; top:140px; right:50%; margin-right:-125px;}	
    #gnb a { width:100%; margin:8px 0px; 
        background:#000;
        box-sizing:border-box; 
        border-radius:10px; opacity:0.5; 
        color:#fff; font-size: 10px;
    }	
    #gnb a:hover { opacity:1; transform:scale(1.1);}