@import url(http://fonts.googleapis.com/css?family=Poiret+One);
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');

/* reset */
* {margin: 0; padding: 0;}
ul, li {list-style: none;}
a {outline: 0; text-decoration: none; color: rgb(133, 133, 133);}
img {border: 0;}
body {font: 12px/1.2 'Inconsolata', monospace; color: rgb(145, 145, 145); background-color: #766981;}

/* 1600이상 (초기값) 레이아웃--------------------------------- */
header {position: fixed; width: 15%; height: 100%; background-color: #fff; top: 0; left: 0; transition: all 0.5s;}
nav {position: relative; width: 85%; height: 35px; background-color: #8a7a97; margin-left: 15%; transition: all 0.5s;}
section {width: 85%; position: relative; margin-left: 15%;}
article {float: left; height: 260px; transition: all 0.5s; animation: scale 1s 1;}

@keyframes scale {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}

article:nth-child(1) {width: 60%; height: 520px; background-color: #ddd; border-radius: 20px; overflow: hidden;}
article:nth-child(2) {width: 40%; background-color: #ccc; border-radius: 20px; overflow: hidden;}
article:nth-child(3) {width: 20%; background-color: #bbb; border-radius: 20px; overflow: hidden;}
article:nth-child(4) {width: 20%; background-color: #aaa; border-radius: 20px; overflow: hidden;}
article:nth-child(5) {width: 20%; background-color: #999; border-radius: 20px; overflow: hidden;}
article:nth-child(6) {width: 40%; background-color: #888; border-radius: 20px; overflow: hidden;}
article:nth-child(7) {width: 20%; background-color: #777; border-radius: 20px; overflow: hidden;}
article:nth-child(8) {width: 20%; background-color: #666; border-radius: 20px; overflow: hidden;}
article:nth-child(9) {width: 40%; background-color: #555; border-radius: 20px; overflow: hidden;}
article:nth-child(10) {width: 20%; background-color: #444; border-radius: 20px; overflow: hidden;}
article:nth-child(11) {width: 20%; background-color: #333; border-radius: 20px; overflow: hidden;}
article:nth-child(12) {width: 20%; background-color: #222; border-radius: 20px; overflow: hidden;}

   /* Header 콘텐츠 */
header h1 { width: 180px; height: 200px; background: url(../img/logo3.png) no-repeat 0px 0px; background-size: contain; position: absolute; top: 70px; left: 50%; margin-left: -90px; text-indent: -99999px;            
}
#gnb {position: absolute; top: 300px; right: 70px;}
#gnb a {display: block; padding: 8px 30px; font-size: 17px; font-weight: bold; color: #747474; text-align: left; line-height: 1.8; transition: all 0.5s; letter-spacing: -1.2px;}
#gnb a:hover {color: #cc93a2;}
#gnb a i {margin-right: 13px;}
.snsSet { width: 90px; height: 47px; position: absolute; bottom: 50px; right: 50%; margin-right: -45px;}
.snsSet a {float: left;}

   /* nav */
nav a:nth-child(1) {position: absolute; top: 5px; left: 10px;}
nav a:nth-child(2) {position: absolute; top: 5px; left: 150px;}
nav a:nth-child(3) {position: absolute; top: 5px; right: 90px;}
nav a:nth-child(4) {position: absolute; top: 5px; right: 10px;}

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

   /* 배경이미지 삽입 */
article .bg1 {background-image: url(../img/p1.jpg);}
article .bg2 {background-image: url(../img/p2.jpg);}
article .bg3 {background-image: url(../img/p3.jpg);}
article .bg4 {background-image: url(../img/p4.gif);}
article .bg5 {background-image: url(../img/p5.jpg);}
article .bg6 {background-image: url(../img/p6.jpg);}
article .bg7 {background-image: url(../img/p7.jpg);}

   /* 이미지박스 */
article .bg {background-size: cover; background-position: center center;}
article .bg span {font-size: 60px; color: #fff; position: absolute; bottom: 0px; right: 20px; transform: scale(10); opacity: 0; transition: all 0.6s;}
article .bg1 span {font-size: 170px; bottom: -45px; right: -10px; opacity: 1; transform: rotateY(0deg); transition: all 0.5s;}

   /* 이미지박스 오버 효과 */
article:hover .bg span { opacity: 1; transform: scale(1);}
article .bg1:hover span { transform: rotateY(360deg); text-shadow: 3px 2px #fff; color: #766981;}

   /* 텍스트 박스 */
article .txt { color: #666; background-color: #fff; box-sizing: border-box; padding: 40px 30px; transition: all 1s;}
article:nth-child(3) .txt {background-color: #fde7e3;}
article:nth-child(11) .txt {background-color: #fff;}
article .txt i {font-size: 300px; color: #fff; opacity: 0; position: absolute; bottom: -70px; right: -200px; transition: all 0.7s;}
article:nth-child(3) .txt i { position: absolute; bottom: -20px; right: -15px; font-size: 200px; color: #fff; opacity: 0.7;}
article .txt strong {font-size: 30px; font-weight: normal; line-height: 1.6; color: #747474; margin-bottom: 20px; transition: all 1s;}

   /* 텍스트 박스 오버 효과 */
article:hover .txt {background-color: #f8c7c3; color: #fff;}
article:hover .txt i {right: 0px; opacity: 0.4;}
article:hover .txt strong { color: #fff;}

/* 1280~1599 레이아웃 -------------------------------------- */
@media screen and (min-width: 1280px) and (max-width: 1599px) {
    header {position: relative; width: 100%; height: 80px;}
    nav {width: 100%; margin-left: 0%;}
    section {width: 100%; margin-left: 0px;}

    /* Header 콘텐츠 */
    header h1 {width: 200px; height: 40px; background-image: url(../img/logo22.png); top: 20px; left: 20px; margin-left: 0px;}
    #gnb { top: 20px; right: 200px;}
    #gnb li { float: left;}
    .snsSet {bottom: 20px; right: 80px;}
}

/* 1024~1279 레이아웃 --------------------------------------- */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    header {position: relative; width: 100%; height: 80px;}
    nav {width: 100%; margin-left: 0%;}
    section {width: 100%; margin-left: 0;}

    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 콘텐츠 */
    header h1 {width: 200px; height: 40px; background-image: url(../img/logo22.png); top: 20px; left: 20px; margin-left: 0px;}
    #gnb { top: 20px; right: 30px;}
    #gnb li { float: left;}
    .snsSet {display: none;}
}

/* 780~1023 레이아웃 --------------------------------------- */
@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: 0;}

    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; background-image: url(../img/logo22.png); top: 20px; left: 20px; margin-left: 0px;}
    #gnb { top: 20px; right: 10px;}
    #gnb li { float: left;}
    #gnb a {padding: 10px 10px;}
    .snsSet {display: none;}
}
/* 640~779 레이아웃 --------------------------------------- */
@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: 0;}

    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; background-image: url(../img/logo22.png); top: 20px; left: 20px; margin-left: 0px;}
    #gnb { top: 20px; right: 10px;}
    #gnb li { float: left;}
    #gnb a {padding: 10px 10px;}
    .snsSet {display: none;}
}

/* 480~639 레이아웃 --------------------------------------- */
@media screen and (min-width: 480px) and (max-width: 639px) {
    header {position: relative; width: 100%; height: 130px;}
    nav {display: none;}
    section {width: 100%; margin-left: 0;}
    article { height: 150px;}

    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 {position: relative; top: 20px; left: 0px; width: 200px; height: 45px; background-image: url(../img/logo22.png); top: 20px; margin: 0 auto;}
    #gnb { width: 100%; height: 40px; top: 80px; right: 0px;}
    #gnb li { float: left; width: 25%;}
    #gnb a {padding: 4px; text-align: center;}
    .snsSet {display: none;}

    article .bg1 span {font-size: 120px; bottom: -50px;}
    article .txt strong {font-size: 25px;}
    article .txt em {display: none;}
}

/* 479이하 레이아웃 ------------------------------------- */
@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%; border-radius: 0px;}

    /* Header 콘텐츠 */
    header h1 {top: 20px; width: 140px; margin-left: -70px; background-image: url(../img/logo4.png);}
    #gnb {width: 250px; top: 170px; right: 50%; margin-right: -125px;}
    #gnb a {width: 100%; background-color: #fff; box-sizing: border-box; margin: 8px 0px; border-radius: 10px; opacity: 0.7; color: rgb(78, 78, 78);}
    #gnb a:hover { opacity: 1; transform: scale(1.1);}

    article:nth-child(1) span {display: none;}
}