/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
    /* .container {background: yellow;} */
  
    :root {
      --bg__color : rgba(255, 255, 255, 1);
      --bgA__color : rgba(0, 0, 0, 0.8);
      --hederBg__color : rgba(0, 0, 0, 0.5);
      --headerHoverBg-color : rgba(0, 0, 0, 0.8);
      --bottonBg-color : rgba(5, 28, 44, 1);
      --textColor_white : rgb(233, 231, 231, 1);
      --textColor_black : rgb(0, 0, 0, 0.5);
      --textColor_honeyGrow : rgba(234, 181, 67,1.0);
      --textColor_magentaPurple : rgba(109, 33, 79,1.0);
      --bottonText-color : rgba(44, 58, 71,1.0);
    }
    html, body {
        position: relative;
        margin: 0 auto;
        padding: 0;
        overflow: scroll;
        height: auto;
        font-family: "Nanum Gothic", sans-serif;
        font-size: 10px;
    }
    .container {
        margin: inherit;
        width: 100%;
        height: auto;
        /* scroll-behavior: smooth; */
    }
    header {
        position:fixed;
        display: flex;
        justify-content: space-between;
        align-items: center;
        left:0; top:0; right: 0;
        /* padding: 1em 2em; */
        width: 100vw;
        height: 40px;
        z-index: 100;
        background-color: rgba(255,255,255,1);
        color: var(--textColor_black);
        font-size: 2em;
    }
    header .logo {
        text-indent: -999px;
    }
    header .logo>a {
        display: block;
        width: 14.75rem;
        height: 2.5rem;
        background-image: url('http://xn--2q1b16pna163aq5h.kr/img/main/logo_01.gif');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        text-indent: -3000px;
    }
    .nav {
        position: absolute;
        /* display: flex; */
        top: 6em;
        right: -100%;
        width: 80vw;
        background-color: var(--hederBg__color);
        flex-direction: column;
        /* justify-content: space-between;
        align-items: center; */
        list-style: none;
        padding-left: 0;
        border-radius: 20px;
        transition: right 0.3s 0.1s ease-in-out;
    }
    .nav.active {
        right: 0%;
    }
    header ul li {
        /* margin: 0.5em 0.8em; */
        width: 100%;
        height: 6rem;
        text-align: center;
        line-height: 6rem;
        border-bottom: 1px solid wheat;
    }
    header ul li:last-of-type {
        border-bottom: none;
    }
    header ul li a {
        display: block;
        /* padding: 1em; */
        text-decoration: none;
        color: var(--textColor_white);
        font-size: 2rem;
        transition: 0.5s 0.1s ease-in-out;
    }
    header ul li a:hover {
        background-color: var(--headerHoverBg-color);
        color: var(--textColor_white);
    }
    header h2>a {
        display: block;
        color: var(--textColor_white);
        font-size: 3rem;
        font-weight: 700;
        text-decoration: none;
        text-align: center;
        line-height: 1.5em;        /* width: 145px;
        height: 19px;
        background-image: url('../img/tel.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover; */
        /* text-indent: -10000px; */
    }
    .tel {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 50px;
        background-color: var(--textColor_magentaPurple);
    }
    .hambuger {
        /* display: none; */
        margin-right: 1em;
        color: var(--textColor-elogo);
    }
    .section {
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction:column;
      align-items: start;
      justify-content: center;
      font-size: 2em;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      transition: 1s 0.2 ease-in-out;
    }
    .section:nth-of-type(1) { 
      background-color: var(--bg__color);
      position: relative;
      background-image: url('http://xn--2q1b16pna163aq5h.kr/img/main/01.png');
      top: 0;
      color: var(--textColor_magentaPurple);
      text-shadow: 2px 2px 4px #ffffff;
    }
    .section:nth-of-type(1) h3 {
        font-size: 1.8em;
        font-weight: 700;
        text-align: center;
        padding-bottom: 1em;
    }
    .section:nth-of-type(1) p {
        font-size: 1.5em;
        font-weight: 400;
        text-align: center;
    }
    .section:nth-of-type(2) { background-color: rgb(230, 229, 237);position: relative; top: 703;}
   .pr_bg {
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       align-items: start;
       width: 100%;
       height: 100%;
       background-image: url('http://xn--2q1b16pna163aq5h.kr/img/main/02_m.jpg');
       background-repeat: no-repeat;
       background-position: center;
       background-size: cover;
       transition: 1s 0.2 ease-in-out;
   }
   [class^="pr_th_txt"] {
       display: flex;
       z-index: 2;
       flex-direction: column;
       align-items: flex-start;
       padding: 0 0.5em;
       color: var(--textColor_white);
       /* line-height: 1em; */
       font-size: 2em;
       transition: 1.5s, 0.2 ease-in-out;
   }
   [class^="pr_th_txt"]:hover {
       background-color: var(--bgA__color);
       border-radius: 5%;
       font-size: 2.2em;
   
   }
   [class^="pr_th_txt"] h5 {
       margin: 2rem;
       font-size: 0.8em;
   }
   [class^="pr_th_txt"] h6 {
       margin: 1rem 0;
       font-size: 0.6em;
   }
   [class^="pr_th_txt"] p {
       padding-bottom: 1em;
       font-size: 0.5em;
   }

   .section:nth-of-type(3) { 
    position: relative;
    padding: 30px;
    background-image: url('http://xn--2q1b16pna163aq5h.kr/img/main/03_m.png');
    /* top: 1406;
    color: var(--textColor_black); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: 1s 0.2 ease-in-out;
}
.section:nth-of-type(3)>div {
    position: relative;
    top: 1em;
}

.section:nth-of-type(4) {
    position: relative;
    /* background-image: url('../img/main/02.jpg'); */
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: var(--bg__color);
    top: 2109;
    color: var(--textColor_white);
}
.section:nth-of-type(4) aside {
    flex-basis: 30%;
}
.section:nth-of-type(4) aside > * {
    margin: 1em;
}
.section:nth-of-type(4) aside h3 {
    color: var(--textColor_black);
    font-size: 0.8em;
}
.section:nth-of-type(4) aside p {
    color: var(--textColor_magentaPurple);
    font-size: 0.5em;
}
.section:nth-of-type(4) aside a, .pageview {
    display: block;
    margin-left: 200px;
    width: 100px;
    height: 50px;
    /* background-image: url('../img/9b4f4f_4b04670e275c4163973c19c28b19fe77~mv2.avif'); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    font-size: 0.5em;
    color: var(--textColor_black);
    text-indent: -5em;
    text-decoration: none;
}
.section:nth-of-type(4) img {
    width: auto;
    height: 80vh;
}
.section:nth-of-type(5) {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--bg__color);
    top: 2812;
    font-size: 3rem;
}
.section:nth-of-type(5) .sec5_left {
    /* flex-basis: 30%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background-image: url('http://xn--2q1b16pna163aq5h.kr/img/sec_05_bg.avif');
    background-size: cover;
    background-repeat: no-repeat;
}
.section:nth-of-type(5) .sec5_left > * {
    margin: 0.5em auto;
    text-align: justify;
}
.section:nth-of-type(5) .sec5_left > h3 {
    font-size: 3rem;
    color: var(--textColor_black);
}
.section:nth-of-type(5) .sec5_left > p {
    font-size: 2rem;
    color: var(--textColor_magentaPurple);
}
.section:nth-of-type(5) .sec5_left > span {
    font-size: 6rem;
}
.section:nth-of-type(5) .sec5_right {
    /* flex-basis: 70%; */
    display: none;
}
.tab {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 1em;
}
.tab button {
    flex-basis: 13%;
    background-color: #f1f1f1;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 20px;
    font-size: 0.4em;
    color: var(--bottonText-color);
    transition: background-color 0.3s;
}
.tab button:hover {
    background-color: #ddd;
}
.tab button.active {
    background-color: var(--bottonBg-color);
    color: var(--textColor_white);
}
.tabcontent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 1em;
    font-size: 1em;
}
.tabcontent ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    list-style: none;
    font-size: 0.5em;
    line-height: 2em;
    white-space: nowrap;
}
.tabcontent img {
    display: block;
    margin: 0 auto;
    width: 90%; /* 600px : 100% , 992px : 80% , 1200px : 70%*/
    object-fit: contain;
    object-position: center;
    text-align: center;
}
.tabcontent span {
    margin: 0.5em auto;
    padding: 0.1em 1em;
    left: 0; bottom: 0; right: 0;
    background-color: var(--bottonBg-color);
    border-radius: 12px;
    color : var(--textColor_white);
}
.tabcontent {
    display: none;
    /* padding: 20px;
    border-top: none; */
}
.tabcontent.active {
    display: block;
}

/* realty.php */
.realty {
 /* margin: 0 auto; */
 padding-top: 5em;
 max-width: 100%;
 height: 100%;
}
.swiper {
 padding-top: 5em;
}
table {
 margin: 5em auto;
 border: 1px #a39485 solid;
 font-size: .9em;
 box-shadow: 0 2px 5px rgba(0,0,0,.25);
 width: 80%;
 border-collapse: collapse;
 border-radius: 5px;
 overflow: hidden;
}
th {
 font-weight: bold;
 color: #fff;
 background: #73685d;
}
th, td {
 padding: 1em .5em;
 vertical-align: middle;
 text-align: center;
}
td {
 border-bottom: 1px solid rgba(0,0,0,.1);
 background: #fff;
}

a {
 color: #73685d;
}
/* unit.php */
.unit {
 display: block;
 margin: inherit;
 padding-top: 5em;
 max-width: 100%;
 height: 100%;
}   
/* place.php */
.place {
 display: block;
 margin: inherit;
 max-width: 100%;
 height: 100%;
}
/* location.php */
.location {
 display: block;
 margin: inherit;
 padding-top: 5em;
 max-width: 100%;
 height: 100%;
}
/* overview.php */
.overview {
 display: block;
 margin: inherit;
 padding-top: 5em;
 max-width: 100%;
 height: 100%;
}
.swiper {
 width: 80%;
 height: auto;
}
  /* ul.tab */
 /* ul.tab */
#subContent{margin-top: 10%;}
#subTitle{padding-bottom: 1%; text-align: center; color: #73685d; font-size: 2em; font-weight: 900;}
.tab{display: flex; flex-wrap: wrap;}
.tab li{text-align: center; width: 50%; color: #9c9c9c; padding: 12px 0; border-bottom: 1px solid #ccc; cursor: pointer; font-size: 1.8em; position: relative;}
.tab li.on{color: #004668; border-bottom: 4px solid #004668; font-weight: 500;}
.tab li:hover{color: #004668; border-bottom: 4px solid #004668;}
.tab li::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 16px;
  background: #ccc;
}
.tab li:last-child::after{display: none;}

.tabcontent{display: none; margin-top: 60px;}
.tabcontent.on{display: block;}
.tabcontent .img1{text-align: center; width: 90%;}

.info_btn{margin: 30px auto; display: block; text-align: center;}
.info_btn img{max-width: 240px;}
  footer {
    /* position: absolute;
    left: 0; bottom: 0; right: 0; */
    width: 100%;
    height: 150px;
    background-color: black;
    color: var(--textColor_white);
    font-size: 1.4em;
    line-height: 1.5em;
    }

  }