@charset "utf-8";

@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://fonts.googleapis.com/css2?family=Rozha+One&display=swap');
 
* {margin:0; padding:0; box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {font-family:'NanumSquare'; margin:0; transition:0.3s ease-out; overflow-x:hidden; max-width:100%; width:100%; overscroll-behavior:none;}
li {list-style:none;}
img {vertical-align:middle;}
a {text-decoration:none; color:#333;}
.clear:after {content:""; display:block; clear:both;}
.inner {width:1400px; margin:0 auto;}
button {position:relative; display:inline-block; cursor:pointer; outline:none; border:0; vertical-align:middle; text-decoration:none; background:transparent; padding:0; font-size:inherit;}

.brand {width:100%; position:relative;}
.brand_title {padding:60px 0 30px;}
.brand_title h2 {font-size:1.4em; font-weight:600;}
.brand_title p {padding-top:5px;}
.brand_sub_title {padding-top:40px;}

/*header*/
header {position:fixed; width:100%; height:auto; z-index:1;}
header .nav {position:relative; padding-top:10px;}
header .nav .logo {margin-left:3%; font-family:'Rozha One'; font-weight:normal; font-size:1.3em;}
header .nav .logo a {color:#fff; transition:all .2s;}

/*햄버거메뉴*/
.menu {position: absolute;top: 0;right: 0;height:1080px; max-width:0; width:100%; transition: 0.5s ease; z-index:5; background-color:#776252; opacity:.98;}
.menu .menu_box {padding:8% 0; min-width:960px; margin:0 auto;}
.menu ul {display:block; padding-inline-start:30px;}
.menu ul li {display:block; height:60px; text-align:left;}
.menu ul li:hover a {color:#776252; text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;}
.menu ul li a {font-size:2em; color:#fff;}
.burger-icon {cursor: pointer; display: inline-block; position: absolute; padding: 8px 0;top:38%;right:3%;user-select: none;width: auto;margin: 0; z-index: 53;}
.burger-icon .burger-sticks {background: #fff;display: block;height: 2px;position: relative;transition: background .2s ease-out;width:20px;}
.burger-icon .burger-sticks1 {background: #fff;display: block;height: 2px;position: relative;transition: background .2s ease-out; width:100%; position: absolute; top:5px; transition: all .2s ease-out;}
.burger-icon .burger-sticks2 {background: #fff;display: block;height: 2px;position: relative;transition: background .2s ease-out; width:100%; position: absolute; top:-5px; transition: all .2s ease-out;}
/* .burger-icon .burger-sticks:before,.burger-icon .burger-sticks:after {background: #fff;content: '';display: block;height: 100%;position: absolute;transition: all .2s ease-out;width: 100%;}
.burger-icon .burger-sticks:before {top: 5px;}
.burger-icon .burger-sticks:after {top: -5px;} */
.burger-check {display: none;}
.burger-check:checked~.menu {max-width: 100%;}
.burger-check:checked~.burger-icon .burger-sticks {background:transparent;}
/* .burger-check:checked~.burger-icon .burger-sticks:before {transform: rotate(-45deg);}
.burger-check:checked~.burger-icon .burger-sticks:after {transform: rotate(45deg);}
.burger-check:checked~.burger-icon:not(.steps) .burger-sticks:before,
.burger-check:checked~.burger-icon:not(.steps) .burger-sticks:after {top: 0;} */
.burger-check:checked~.burger-icon .burger-sticks1 {transform: rotate(-45deg);}
.burger-check:checked~.burger-icon .burger-sticks2 {transform: rotate(45deg);}
.burger-check:checked~.burger-icon:not(.steps) .burger-sticks1,
.burger-check:checked~.burger-icon:not(.steps) .burger-sticks2 {top: 0;}

/*사이드메뉴*/
.side_menu {position:fixed; bottom:2%; right:2%; z-index:3;}
.side_menu div {width:60px; height:60px; line-height:60px; text-align:center; background:#9b8675; border-radius:50%; margin-top:7px; cursor:pointer;}
.side_menu div p a {color:#fff; font-size:.8em;}
.side_menu .booking {background:#776252;}

.brand1 .main_banner .main_title {width:100%; text-align:center; position:absolute; top:50%; left:0; transform:translateY(-50%);}
.brand1 .main_banner .main_title h2 {font-family:'Rozha One'; font-weight:normal; font-size:2.4em; color:#fff;}
.brand1 .main_banner .main_title p {color:#fff;}
.brand1 .main_banner .slider01 {height:40vh; overflow:hidden;}
.brand1 .main_banner .slider01::after {display:block; content:""; position:absolute; top:0; left:0; width:100%; height:40vh; background:rgba(0,0,0,0.3);}
.brand1 .main_banner .slider01 .slider1 {height:40vh; background:url('/home/images/main/slider01_1.jpg')no-repeat center center; background-size:cover;}
.brand1 .main_banner .slider01 .slider2 {height:40vh; background:url('/home/images/main/slider01_2.jpg')no-repeat center center; background-size:cover;}
.brand1 .main_banner .slider01 .slider3 {height:40vh; background:url('/home/images/main/slider01_3.jpg')no-repeat center center; background-size:cover;}

.brand2 {text-align:center;}
.brand2 .slider02 {width:100%; height:auto; margin:0 auto;}
.brand2 .slider02 .slide > img {width:94%; margin:0 auto; object-fit:fill;}

.brand3 {position:relative; background:#cdbaaa; text-align:center; color:#fff;margin-top:50px;}
.brand3::before {position:absolute; bottom:25px; left:-25px; display:block; content:"Nabee Consulting"; font-family:'Rozha One'; font-size:3.5em; color:rgba(255,255,255,0.5); writing-mode: vertical-rl;}
.brand3 .progress {display:block; width:70%; height:10px; margin:15px auto 0; border-radius:10px; overflow:hidden; background-color:#f5f5f5; background-image:linear-gradient(to right, #776252, #776252); background-repeat:no-repeat; background-size:0 100%; transition: background-size .4s ease-in-out;}
.brand3 .slider03 .slide {position:relative; width:100%; padding:20px 40px;}
.brand3 .slider03 .slide img {width:100%; height:65vh; margin:0 auto; object-fit:fill;}
.brand3 .slider03 .slide p {position:absolute; bottom:5%; left:15%; color:#fff; font-size:1.3em;}

.brand4 .slide04 {position:relative; width:100%;}
.brand4 .slider04 .slide01 {width:100%; height:100vh; background:url('/home/images/main/slider04_1.jpg')no-repeat center center; background-size:cover;}
.brand4 .slider04 .slide02 {width:100%; height:100vh; background:url('/home/images/main/slider04_2.jpg')no-repeat center center; background-size:cover;}
.brand4 .slider04 .slide03 {width:100%; height:100vh; background:url('/home/images/main/slider04_3.jpg')no-repeat center center; background-size:cover;}
.brand4 .slider04 .slide04 {width:100%; height:100vh; background:url('/home/images/main/slider04_4.jpg')no-repeat center center; background-size:cover;}
.brand4 .slider04 .slide {position:relative;}
.brand4 .slider04 .slide .bg {width:100%; height:100vh; position:absolute; top:0; left:0; background:rgba(0,0,0,0.5); transition:all .2s;}
.brand4 .slider04 .slide .slide_title {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; text-align:center;}
.brand4 .slider04 .slide .slide_title>p {font-size:1.8em; margin-bottom:15px;}
.brand4 .slider04 .slide .slide_title>h2 {font-size:3em;}
.brand4 .slider04 .slide .slide_title .blind .bar {width:1px; height:50px; margin:30px auto; background:#fff;}
.brand4 .slider04 .slide .slide_title .blind p {font-size:1.1em;}
.brand4 .slider04 .slide .slide_title .blind button {background:rgba(0,0,0,.7); color:#fff; border-radius:15px; padding:8px 35px; font-size:.85em; margin-top:15px;}
.brand4 .slider04 .slide .slide_title .blind button:hover {background:rgba(0,0,0,0.9);}

.brand5 {position:relative; width:100%; margin:0 auto; text-align:center;}
.brand5 .map {width:94%; height:45vh; margin:0 auto 20px;}
.brand5 .map_box {position:relative; display:flex; justify-content:space-between; width:94%; margin:0 auto; background:#f9f9f9;}
.brand5 .map_box>div {width:50%; padding:15px;}
.brand5 .map_box>div:first-child {border-right:1px solid #ddd;}
.brand5 .map_box .icon {position:relative; width:50px; height:50px; margin:0 auto; border-radius:50%; background:#747474;}
.brand5 .map_box .icon01 p {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:29px; height:28px; background:url('/home/images/main/map_icon.png')no-repeat 0px; background-size: cover;}
.brand5 .map_box .icon02 p {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:26px; height:27px; background:url('/home/images/main/map_icon.png')no-repeat -36px 0px; background-size: cover;}
.brand5 .map_info >p {padding:7px 0}
.brand5 .map_info >span {font-size:.8em;}

.brand6 .bg {position:relative; width:100%; height:90vh; background:url('/home/images/main/brand6.jpg')no-repeat center center; background-size:cover;}
.brand6 .bg::after {position:absolute; top:0; left:0; display:block; content:""; width:100%; height:90vh; background:rgba(0,0,0,0.4);}
.brand6 .title {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center; color:#fff; z-index:1;}
.brand6 .title span {font-size:1.8em; font-family:'Rozha One';}
.brand6 .title p {font-size:.85em; padding:40px 0;}
.brand6 .title button {font-size:.9em; color:#fff; background:rgba(0,0,0,0.8); padding:10px 40px;}
.brand6 .title button:hover {background:rgba(0,0,0,1);}

.bottom_box {background:white; box-shadow:0 10px 20px -5px rgba(0, 0, 0, 0.125); height:10vh; margin:0 auto; overflow:hidden; position:relative; width:100%;}
.bottom_box::before, .bottom_box::after {background:linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); content:""; height:100px; position:absolute; width:200px; z-index:2;}
.bottom_box::after {right:0; top:0; transform:rotateZ(180deg);}
.bottom_box::before {left:0; top:0;}
.bottom_box .slide-track {animation:scroll 40s linear infinite;  display:flex; width:calc(250px * 14);}
.bottom_box .box {line-height:10vh;}
.bottom_box .box img {position:relative; top:50%; transform:translateY(-50%); width:50%;}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

@media screen and (min-width: 680px) {
  .brand1 .main_banner .main_title {width:100%; text-align:center; position:absolute; top:50%; left:0; transform:translateY(-50%);}
  .brand1 .main_banner .main_title h2 {font-family:'Rozha One'; font-weight:normal; font-size:2.4em; color:#fff;}
  .brand1 .main_banner .main_title p {color:#fff;}
  .brand1 .main_banner .slider01 {height:100vh; overflow:hidden;}
  .brand1 .main_banner .slider01::after {display:block; content:""; position:absolute; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.3);}
  .brand1 .main_banner .slider01 .slider1 {height:100vh; background:url('/home/images/main/slider01_1.jpg')no-repeat center center; background-size:cover;}
  .brand1 .main_banner .slider01 .slider2 {height:100vh; background:url('/home/images/main/slider01_2.jpg')no-repeat center center; background-size:cover;}
  .brand1 .main_banner .slider01 .slider3 {height:100vh; background:url('/home/images/main/slider01_3.jpg')no-repeat center center; background-size:cover;}

  .brand3::before {top:50%; bottom:0; transform:translateY(-50%); height:100%; font-size:4.5em;}
  .brand3 .slider03 {width:95%; float:right;}
  .brand3 .slider03 .slide {padding:20px 0 20px 20px;}
}

@media screen and (min-width: 960px) {
  header .nav .logo {font-size:1.7em;}

  .side_menu div {width:70px; height:70px; line-height:70px;}
  .side_menu div p a {font-size:.9em;}

  .brand_title {padding:60px 0 50px;}
  .brand_title h2 {font-size:2em;}
  .brand_title p {font-size:1.5em;}
  .brand_sub_title {font-size:1.2em;}

  .brand1 .main_banner .main_title h2 {font-size:4em;}
  .brand1 .main_banner .main_title p {font-size:1.5em;}

  .brand2 .slider02 {width:160%; margin-left:-30%; overflow:hidden;}
  .brand2 .slider02 .slide > img {width:100%; object-fit:none; padding:40px; box-sizing:border-box; transition:1s; border-radius:4%;}
  .brand2 .slider02 .slick-center > img {padding:0;}

  .brand5 .map {height:50vh;}
  .brand5 .map_box>div {padding:30px 15px;}
  .brand5 .map_info >p {font-size:1.3em; padding:10px 0;}
  .brand5 .map_info >span {font-size:1em;}

  .brand6 .title span {font-size:3em;}
  .brand6 .title p {font-size:1.3em;}
  .brand6 .title button {font-size:1.2em; padding:10px 60px;}
}

@media screen and (min-width: 1080px) {

  .brand_title {padding:65px 0 50px;}
  .brand_title h2 {font-size:2.2em;}
  .brand_title p {font-size:1.4em; padding-top:10px;}
  .brand_sub_title {font-size:1.3em; padding-top:45px;}

  header .nav .logo {font-size:1.8em;}
  .burger-icon {top:44%;}
  .burger-icon .burger-sticks {width:27px;}
  .burger-icon .burger-sticks:before {top:7px;}
  .burger-icon .burger-sticks:after {top:-7px;}

  .side_menu div {width:80px; height:80px; line-height:80px; margin-top:10px;}
  .side_menu div p a {font-size:1em;}

  .brand1 .main_banner .main_title h2 {font-size:6em;}
  .brand1 .main_banner .main_title p {font-size:1.8em;}

  .brand2 .slider02 .slide > img {height:55vh;}

  .brand3 .slider03 {width:90%;}
  .brand3 .slider03 .slide img {width:100%; height:65vh; padding-left:20px;}

  .brand5 .map {width:70%;}
  .brand5 .map_box {width:70%;}

}

@media screen and (min-width: 1280px) {
  .brand4 .slider04 .slide {position:relative; animation: slideDown 1s .2s both; cursor:pointer;}
  .brand4 .slider04 .slide .bg {width:100%; height:100vh; position:absolute; top:0; left:0; background:rgba(0,0,0,0.5); transition:all .2s;}
  .brand4 .slider04 .slide .bg:hover {background:rgba(0,0,0,0.7); animation:none;}
  .brand4 .slider04 .slide .slide_title {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; text-align:center;}
  .brand4 .slider04 .slide .slide_title>p {font-size:1.8em; margin-bottom:15px;}
  .brand4 .slider04 .slide .slide_title>h2 {font-size:3em;}
  .brand4 .slider04 .slide .slide_title .blind {display:none; animation: slideUp .5s .4s both;}
  .brand4 .slider04 .slide .slide_title .blind .bar {width:1px; height:50px; margin:30px auto; background:#fff;}
  .brand4 .slider04 .slide .slide_title .blind p {font-size:1.1em;}
  .brand4 .slider04 .slide .slide_title .blind button {background:rgba(0,0,0,1); color:#fff; border-radius:15px; padding:8px 20px; font-size:.85em; margin-top:15px;}
  .brand4 .slider04 .slide .slide_title .blind button:hover {background:rgba(0,0,0,0.7);}
  .brand4 .slider04 .slide:hover .slide_title h2 {animation: slideUp 1.2s both}
  .brand4 .slider04 .slide:hover .slide_title .blind {display: block;}

  @keyframes slideDown {
    0% { opacity: 0; transform: translateY(0);}
    100% { opacity: 1; transform: translateY(0);}
  }
  @keyframes slideUp {
    0% { opacity: 0;}
    100% { opacity: 1;}
  }
  @keyframes slideUp02 {
    0% { opacity: 0;}
    100% { opacity: 1;}
  }
}