@charset "UTF-8";

@media (max-width:599px) {

   /*sub에만 있는것*/
   header #nav li:nth-of-type(1) {
      color: #fcf4e5;
      margin: 0 35px;
   }

   /*콘텐츠(바디)*/
   #contents {
      width: 100%;
      height: auto;
      margin: 0 auto;
   }

   #contents>#first {
      width: 90%;
      height: auto;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column wrap;
   }

   #contents>#first>.ft {
      margin: 30px 0;
      width: 90%;
      height: auto;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      flex-flow: column wrap;
   }

   #contents>#first>.ft:nth-of-type(1) {
      margin-top: 200px;
   }

   #contents>#first>.ft>h1 {
      font-size: 40px;
      color: #c6b075;
   }

   #contents>#first>.ft>h3 {
      font-size: 25px;
      color: #edd58c;
   }

   #contents>#first>.ft>p {
      font-size: 15px;
   }

   #contents>#slider {
      margin: 0 auto;
      width: 100%;
      height: 250px;
      background-image: url(../img/w48.jpg);
      background-position: center;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column wrap;
   }

   #contents>#slider>span {
      font-size: 30px;
      color: #fcf4e5;
      text-align: center;
   }

   #contents>#slider>p {
      font-size: 15px;
      color: #fcf4e5;
      text-align: center;
   }

   #contents>#box1 {
      margin: 0 auto;
      flex-flow: column wrap;
      width: 90%;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#box1>.a {
      display: flex;
      width: 100%;
      height: auto;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-flow: column wrap;
   }

   #contents>#box1>.a:nth-of-type(1) {
      margin: 80px 0 0 0;
   }

   #contents>#box1>.a:nth-of-type(2) {
      padding: 5% 0 0 0;
   }

   #contents>#box1>.a>span {
      font-size: 25px;
   }

   #contents>#box1>.a>.p1 {
      font-size: 18px;
      color: #c6b075;
   }

   #contents>#box1>.a>.p2 {
      font-size: 15px;
   }

   #contents>#box1>.a>img {
      width: 100%;
      height: 100%;
   }

   #contents>#box2 {
      margin: 0 auto;
      width: 90%;
      height: auto;
      flex-flow: column wrap;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#box2>#b {
      display: flex;
      width: 100%;
      height: auto;
      flex-flow: column wrap;
      padding: 25% 0 0 0;
      align-items: flex-end;
      justify-content: flex-start;
      text-align: right;
   }

   #contents>#box2>#b>h3 {
      font-size: 27px;
   }

   #contents>#box2>#b>h3>span {
      color: #a03e65;
   }

   #contents>#box2>#b>.p1 {
      font-size: 18px;
   }

   #contents>#box2>#b>.p2 {
      font-size: 16px;
      color: #a03e65;
   }

   #contents>#box2>#c {
      display: flex;
      width: 100%;
      height: 400px;
      margin: 20px 0 100px 0;
      flex-flow: row wrap;
      justify-content: space-between;
   }

   #contents>#box2>#c>#p1 {
      width: 49.4%;
      height: 400px;
   }

   #contents>#box2>#c>#p1>img {
      width: 100%;
      height: 198px;
   }

   #contents>#box2>#c>#p2 {
      width: 50%;
      height: 400px;
   }

   #contents>#box2>#c>#p2>img {
      width: 100%;
      height: 400px;
   }

   #contents>#all {
      background-color: #fcf4e5;
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      padding:8% 0;
   }

   #contents>#all>#box3 {
      background-color: #fff;
      margin: 0 auto;
      width: 90%;
      height: auto;
      flex-flow: column wrap;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#all>#box3>.d:nth-of-type(1) {
      display: flex;
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column wrap;
   }

   #contents>#all>#box3>.d:nth-of-type(2) {
      display: flex;
      width: 100%;
      height: auto;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-flow: column wrap;
      padding: 50px;
   }

   #contents>#all>#box3>.d>p {
      font-size: 30px;
   }

   #contents>#all>#box3>.d>p>span {
      color: #b75744;
   }

   #contents>#all>#box3>.d>.p1 {
      font-size: 18px;
   }

   #contents>#all>#box3>.d>.p2 {
      font-size: 17px;
   }

   #contents>#all>#box3>.d>img {
      width: 75%;
      height: 100%;
   }

   #contents>#box4 {
      margin: 0 auto;
      width: 90%;
      height: auto;
      flex-flow: column wrap;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#box4>.e {
      display: flex;
      width: 100%;
      height: auto;
      text-align: right;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      flex-flow: column wrap;
   }

   #contents>#box4>.e:nth-of-type(1) {
      padding: 20% 0 5% 0;
   }

   #contents>#box4>.e>.p1 {
      font-size: 32px;
      color: #7b6e49;
   }

   #contents>#box4>.e>.p2 {
      font-size: 32px;
      color: #9f8e5f;
   }

   #contents>#box4>.e>.p3 {
      font-size: 32px;
      color: #c6b075;
   }

   #contents>#box4>.e>p {
      font-size: 18px;
   }

   #contents>#box4>.e>img {
      width: 100%;
      height: 100%;
   }

   #contents>#box4>.e>#icon {
      width: 170px;
      height: 50px;
      align-items: center;
      display: flex;
      justify-content: space-between;
   }

   #contents>#box4>.e>#icon>img {
      border-radius: 100%;
   }


   #contents>#box5 {
      margin: 0 auto;
      flex-flow: column wrap;
      width: 90%;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#box5>#f {
      width: 100%;
      height: auto;
      margin: 80px 0 0 0;
   }

   #contents>#box5>#f>img {
      width: 100%;
      height: 100%;
   }

   #contents>#box5>#g {
      width: 100%;
      height: auto;
      display: flex;
      flex-flow: column wrap;
      margin: 0 auto 15%;
   }

   #contents>#box5>#g>.long {
      width: 100%;
      height: 50%;
      display: flex;
      justify-content: flex-start;
      flex-flow: column wrap;
   }

   #contents>#box5>#g>.long>img {
      width: 100%;
      height: 100%;
   }

   #contents>#box5>#g>.long>h3 {
      font-size: 25px;
      color: #a03e65;
      margin-left: 10px;
   }

   #contents>#box5>#g>.long>span {
      font-size: 18px;
      margin-left: 10px;
   }

   #contents>#box5>#g>.long>p {
      font-size: 18px;
      color: #975d7c;
      margin-left: 10px;
   }

   #contents>#box5>#g>.long:nth-of-type(1) {
      margin: 5% 0;
   }

}


@media (min-width:600px) {

   /*sub에만 있는것*/
   header #nav li:nth-of-type(1) {
      color: #fcf4e5;
      margin: 0 35px;
   }

   /*콘텐츠(바디)*/
   #contents {
      width: 100%;
      height: auto;
      margin: 0 auto;
   }

   #contents>#first {
      width: 90%;
      height: auto;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: row wrap;
   }

   #contents>#first>.ft {
      margin: 5px;
      margin: 200px 0 30px 0;
      width: 50%;
      height: auto;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      flex-flow: column wrap;
   }

   #contents>#first>.ft>h1 {
      font-size: 40px;
      color: #c6b075;
   }

   #contents>#first>.ft>h3 {
      font-size: 25px;
      color: #edd58c;
   }

   #contents>#first>.ft>p {
      font-size: 15px;
   }

   #contents>#slider {
      margin: 0 auto;
      width: 100%;
      height: 250px;
      background-image: url(../img/w48.jpg);
      background-position: center;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column wrap;
   }

   #contents>#slider>span {
      font-size: 30px;
      color: #fcf4e5;
      text-align: center;
   }

   #contents>#slider>p {
      font-size: 15px;
      color: #fcf4e5;
      text-align: center;
   }

   #contents>#box1 {
      margin: 0 auto;
      flex-flow: column wrap;
      width: 90%;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#box1>.a {
      display: flex;
      width: 100%;
      height: auto;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-flow: column wrap;
   }

   #contents>#box1>.a:nth-of-type(1) {
      margin: 80px 0 0 0;
   }

   #contents>#box1>.a:nth-of-type(2) {
      padding: 50px;
   }

   #contents>#box1>.a>span {
      font-size: 25px;
   }

   #contents>#box1>.a>.p1 {
      font-size: 18px;
      color: #c6b075;
   }

   #contents>#box1>.a>.p2 {
      font-size: 15px;
   }

   #contents>#box1>.a>img {
      width: 100%;
      height: 100%;
   }

   #contents>#box2 {
      margin: 0 auto;
      width: 90%;
      height: auto;
      flex-flow: column wrap;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#box2>#b {
      display: flex;
      width: 100%;
      height: auto;
      flex-flow: column wrap;
      padding: 50px;
      align-items: flex-end;
      justify-content: flex-start;
      text-align: right;
   }

   #contents>#box2>#b>h3 {
      font-size: 27px;
   }

   #contents>#box2>#b>h3>span {
      color: #a03e65;
   }

   #contents>#box2>#b>.p1 {
      font-size: 18px;
   }

   #contents>#box2>#b>.p2 {
      font-size: 16px;
      color: #a03e65;
   }

   #contents>#box2>#c {
      display: flex;
      width: 100%;
      height: 400px;
      margin: 20px 0 100px 0;
      flex-flow: row wrap;
      justify-content: space-between;
   }

   #contents>#box2>#c>#p1 {
      width: 49.4%;
      height: 400px;
   }

   #contents>#box2>#c>#p1>img {
      width: 100%;
      height: 198px;
   }

   #contents>#box2>#c>#p2 {
      width: 50%;
      height: 400px;
   }

   #contents>#box2>#c>#p2>img {
      width: 100%;
      height: 400px;
   }

   #contents>#all {
      background-color: #fcf4e5;
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   #contents>#all>#box3 {
      background-color: #fff;
      margin: 0 auto;
      width: 90%;
      height: auto;
      flex-flow: column wrap;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#all>#box3>.d:nth-of-type(1) {
      display: flex;
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column wrap;
   }

   #contents>#all>#box3>.d:nth-of-type(2) {
      display: flex;
      width: 100%;
      height: auto;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-flow: column wrap;
      padding: 50px;
   }

   #contents>#all>#box3>.d>p {
      font-size: 30px;
   }

   #contents>#all>#box3>.d>p>span {
      color: #b75744;
   }

   #contents>#all>#box3>.d>.p1 {
      font-size: 18px;
   }

   #contents>#all>#box3>.d>.p2 {
      font-size: 17px;
   }

   #contents>#all>#box3>.d>img {
      width: 75%;
      height: 100%;
   }

   #contents>#box4 {
      margin: 0 auto;
      width: 90%;
      height: auto;
      flex-flow: column wrap;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#box4>.e {
      display: flex;
      width: 100%;
      height: auto;
      text-align: right;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      flex-flow: column wrap;
   }

   #contents>#box4>.e:nth-of-type(1) {
      padding: 50px;
   }

   #contents>#box4>.e>.p1 {
      font-size: 32px;
      color: #7b6e49;
   }

   #contents>#box4>.e>.p2 {
      font-size: 32px;
      color: #9f8e5f;
   }

   #contents>#box4>.e>.p3 {
      font-size: 32px;
      color: #c6b075;
   }

   #contents>#box4>.e>p {
      font-size: 18px;
   }

   #contents>#box4>.e>img {
      width: 100%;
      height: 100%;
   }

   #contents>#box4>.e>#icon {
      width: 170px;
      height: 50px;
      align-items: center;
      display: flex;
      justify-content: space-between;
   }

   #contents>#box4>.e>#icon>img {
      border-radius: 100%;
   }



   #contents>#box5 {
      margin: 0 auto;
      flex-flow: column wrap;
      width: 90%;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#box5>#f {
      width: 100%;
      height: auto;
      margin: 80px 0 0 0;
   }

   #contents>#box5>#f>img {
      width: 100%;
      height: 100%;
   }

   #contents>#box5>#g {
      width: 100%;
      height: auto;
      display: flex;
      flex-flow: column wrap;
      margin: 50px 0;
   }

   #contents>#box5>#g>.long {
      width: 100%;
      height: 50%;
      display: flex;
      justify-content: flex-start;
      flex-flow: column wrap;
   }

   #contents>#box5>#g>.long>img {
      width: 100%;
      height: 100%;
   }

   #contents>#box5>#g>.long>h3 {
      font-size: 25px;
      color: #a03e65;
      margin-left: 10px;
   }

   #contents>#box5>#g>.long>span {
      font-size: 18px;
      margin-left: 10px;
   }

   #contents>#box5>#g>.long>p {
      font-size: 18px;
      color: #975d7c;
      margin-left: 10px;
   }

   #contents>#box5>#g>.long:nth-of-type(1) {
      padding: 12px 0;
   }


}


@media (min-width:1000px) {

   /*sub에만 있는것*/
   header #nav li:nth-of-type(1) {
      color: #fcf4e5;
      margin: 0 35px;
   }



   /*콘텐츠(바디)*/
   #contents {
      width: 100%;
      height: 3100px;
      margin: 0 auto;
   }

   #contents>#first {
      width: 1200px;
      height: auto;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
   }

   #contents>#first>.ft {
      margin: 130px 5px 50px 5px;
      width: 50%;
      height: auto;
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      flex-flow: column wrap;
   }

   #contents>#first>.ft>h1 {
      font-size: 40px;
      color: #c6b075;
   }

   #contents>#first>.ft>h3 {
      font-size: 25px;
      color: #edd58c;
   }

   #contents>#first>.ft>p {
      font-size: 15px;
   }

   #contents>#slider {
      margin: 0 auto;
      width: 1200px;
      height: 250px;
      background-image: url(../img/w48.jpg);
      background-position: center;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column wrap;
   }

   #contents>#slider>span {
      font-size: 30px;
      color: #fcf4e5;
   }

   #contents>#slider>p {
      font-size: 15px;
      color: #fcf4e5;
   }

   #contents>#box1 {
      margin: 0 auto;
      width: 1200px;
      height: 500px;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#box1>.a {
      display: flex;
      width: 49%;
      height: 400px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-flow: column wrap;
   }

   #contents>#box1>.a:nth-of-type(1) {
      margin: 70px 0;
   }

   #contents>#box1>.a:nth-of-type(2) {
      padding: 50px;
      margin: 70px 0;
   }

   #contents>#box1>.a>span {
      font-size: 25px;
   }

   #contents>#box1>.a>.p1 {
      font-size: 18px;
      color: #c6b075;
   }

   #contents>#box1>.a>.p2 {
      font-size: 15px;
   }

   #contents>#box1>.a>img {
      width: 588px;
      height: 360px;
   }

   #contents>#box2 {
      margin: 0 auto;
      width: 1200px;
      height: 500px;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#box2>#b {
      display: flex;
      width: 49%;
      height: 400px;
      margin: 50px 0;
      flex-flow: column wrap;
      padding: 50px;
      align-items: flex-end;
      justify-content: flex-start;
      text-align: right;
   }

   #contents>#box2>#b>h3 {
      font-size: 27px;
   }

   #contents>#box2>#b>h3>span {
      color: #a03e65;
   }

   #contents>#box2>#b>.p1 {
      font-size: 18px;
   }

   #contents>#box2>#b>.p2 {
      font-size: 16px;
      color: #a03e65;
   }

   #contents>#box2>#c {
      display: flex;
      width: 49%;
      height: 400px;
      margin: 50px 0;
      flex-flow: row wrap;
      justify-content: space-between;
   }

   #contents>#box2>#c>#p1 {
      width: 49.4%;
      height: 400px;
   }

   #contents>#box2>#c>#p1>img {
      width: 100%;
      height: 198px;
   }

   #contents>#box2>#c>#p2 {
      width: 50%;
      height: 400px;
   }

   #contents>#box2>#c>#p2>img {
      width: 100%;
      height: 400px;
   }

   #contents>#all {
      background-color: #fcf4e5;
      width: 100%;
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   #contents>#all>#box3 {
      background-color: #fff;
      margin: 0 auto;
      width: 1200px;
      height: 400px;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#all>#box3>.d:nth-of-type(1) {
      display: flex;
      width: 49%;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column wrap;
   }

   #contents>#all>#box3>.d:nth-of-type(2) {
      display: flex;
      width: 49%;
      height: 400px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-flow: column wrap;
      padding: 50px 0;
   }

   #contents>#all>#box3>.d>p {
      font-size: 30px;
   }

   #contents>#all>#box3>.d>p>span {
      color: #b75744;
   }

   #contents>#all>#box3>.d>.p1 {
      font-size: 18px;
   }

   #contents>#all>#box3>.d>.p2 {
      font-size: 17px;
   }

   #contents>#all>#box3>.d>img {
      width: 75%;
      height: 100%;
   }

   #contents>#box4 {
      margin: 0 auto;
      width: 1200px;
      height: 500px;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#box4>.e {
      display: flex;
      margin: 50px 0;
      width: 49%;
      height: 400px;
      text-align: right;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      flex-flow: column wrap;
   }

   #contents>#box4>.e:nth-of-type(1) {
      padding: 50px;
   }

   #contents>#box4>.e>.p1 {
      font-size: 32px;
      color: #7b6e49;
   }

   #contents>#box4>.e>.p2 {
      font-size: 32px;
      color: #9f8e5f;
   }

   #contents>#box4>.e>.p3 {
      font-size: 32px;
      color: #c6b075;
   }

   #contents>#box4>.e>p {
      font-size: 18px;
   }

   #contents>#box4>.e>img {
      width: 100%;
      height: 100%;
   }

   #contents>#box4>.e>#icon {
      width: 170px;
      height: 50px;
      align-items: center;
      display: flex;
      justify-content: space-between;
   }

   #contents>#box4>.e>#icon>img {
      border-radius: 100%;
   }


   #contents>#box5 {
      margin: 0 auto;
      width: 1200px;
      height: 500px;
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   #contents>#box5>#f {
      width: 34%;
      height: 400px;
      margin: 50px 0;
   }

   #contents>#box5>#f>img {
      width: 100%;
      height: 100%;
   }

   #contents>#box5>#g {
      width: 65%;
      height: 400px;
      margin: 50px 0;
      display: flex;
      flex-flow: column wrap;
   }

   #contents>#box5>#g>.long {
      width: 100%;
      height: 50%;
      display: flex;
      justify-content: flex-start;
      flex-flow: column wrap;
   }

   #contents>#box5>#g>.long>img {
      width: 100%;
      height: 100%;
   }

   #contents>#box5>#g>.long>h3 {
      font-size: 25px;
      color: #a03e65;
      margin-left: 10px;
   }

   #contents>#box5>#g>.long>span {
      font-size: 18px;
      margin-left: 10px;
   }

   #contents>#box5>#g>.long>p {
      font-size: 18px;
      color: #975d7c;
      margin-left: 10px;
   }

   #contents>#box5>#g>.long:nth-of-type(1) {
      padding: 12px 0;
   }


}