.maincolor {
  color: #17ab93; }

.color02 {
  color: #84d8c8; }

.color03 {
  color: #f06eaa; }

.color04 {
  color: #f2b3cf; }

.color-white {
  color: #fff; }

.site-header {
  width: 100%;
  height: 100px;
  padding: 0 80px;
  background: #17ab93;
  position: absolute;
  z-index: 999;
  transition: 0.3s all ease-in; }
  .site-header.sticky {
    position: fixed;
    height: 60px;
    background: rgba(23, 171, 147, 0.7); }
    .site-header.sticky .gnb .site-menu {
      transition-delay: 0.3s; }
      .site-header.sticky .gnb .site-menu li {
        line-height: 60px; height: 100%}
    .site-header.sticky .site-logo {
      padding-top: 15px;
      transition-delay: 0.3s; }
    .site-header.sticky .btn-menu {
      top: 18px;
        outline: none;
      transition-delay: 0.3s; }
  .site-header:after {
    clear: both;
    display: block;
    content: ""; }
  .site-header .site-logo {
    padding-top: 25px;
    float: left;
    transition: 0.3s all ease-in; }
  .site-header .gnb .site-menu {
    width: 930px;
    margin: auto;
    transition: 0.3s all ease-in; }
    .site-header .gnb .site-menu:after {
      clear: both;
      display: block;
      content: ""; }
    .site-header .gnb .site-menu li {
      width: 146px;
      padding: 0 4px;
      line-height: 100px;
      float: left;
      text-align: center; }
      .site-header .gnb .site-menu li:nth-child(1) {
        transition: 0.5s all ease-in; }
      .site-header .gnb .site-menu li:nth-child(2) {
        transition: 0.6s all ease-in; }
      .site-header .gnb .site-menu li:nth-child(3) {
        transition: 0.7s all ease-in; }
      .site-header .gnb .site-menu li:nth-child(4) {
        transition: 0.8s all ease-in; }
      .site-header .gnb .site-menu li:nth-child(5) {
        transition: 0.9s all ease-in; }
      .site-header .gnb .site-menu li:nth-child(6) {
        transition: 0.9s all ease-in; }
      .site-header .gnb .site-menu li > a {
        color: #fff;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 900;
        display: block;
        height: 100%; }
      .site-header .gnb .site-menu li:hover a {
        border-bottom: 5px solid #84d8c8; }
  .site-header .gnb .side-menu {
    position: absolute;
    transition: .5s all ease-out;
    width: 300px;
    right: 0;
    background: #61605e;
      display: none;
    text-transform: uppercase; }
    .site-header .gnb .side-menu > li {
      padding-top: 10px;
      padding-bottom: 10px;
    border-bottom: 1px solid #91908f;
        position: relative;
        
}
.site-header .gnb .side-menu > li.has-child:after{
    position: absolute;
    right:20px;
    top:5px;
    content: "+";
    color: #fff;
    font-size:24px;
}

.language_btn {position:absolute; top: 38px; right: 95px; color:#fff; font-size:24px; font-weight:bold;  transition: .5s all ease-out;  }
.sticky .language_btn {position:absolute; top:18px; right: 95px; color:#fff;  transition: .5s all ease-out; }

.connect_site {width:250px; height:35px; margin-bottom:25px;  }


.site-header .gnb .side-menu > li.active.has-child:after{
    content: "-";
}
      .site-header .gnb .side-menu > li.active {
        padding-bottom: 0; }
        .site-header .gnb .side-menu > li.active .depth02 {
          display: block; }
      .site-header .gnb .side-menu > li a {
        color: #fff;
        font-size: 16px;
        padding-left: 30px; }
      .site-header .gnb .side-menu > li .depth02 {
        display: none;
        margin-top: 20px; }
        .site-header .gnb .side-menu > li .depth02 li {
          padding-left: 20px;
          border-top: 1px solid #91908f; 
background: #777;}
        .site-header .gnb .side-menu > li .depth02 a {
          padding-top: 10px;
          padding-bottom: 10px;
          font-size: 14px;
          display: block;
          padding-left: 20px; }
          .site-header .gnb .side-menu > li .depth02 a:before {
            content: "-";
            float: left;
            margin-right: 5px; }
    .site-header .gnb .side-menu.on {
      right: 0; }
.gnb.on .side-menu{
    display: block;
}
.btn-menu.on{
    background-position:0 -25px !important;
}
  .site-header .btn-menu {
    float: right;
    width: 32px;
    height: 25px;
    background: url(../images/btn_menu.png) no-repeat;
    border: none;
    position: absolute;
    top: 38px;
    right: 40px;
    transition: 0.3s all ease-in; }
.bx-wrapper,.bx-viewport , .bx-wrapper ul{
    height:100%;
}
.mainvisual {
  width: 100%;
  height: 900px; }
  .mainvisual ul li {
    height: 100%;
    background: url(../images/mainvisual01.jpg) no-repeat center top; }
  .mainvisual .bx-controls {
    position: absolute;
    bottom:200px;
    width: 100%;
    text-align: center; }
    .mainvisual .bx-controls .bx-pager {
      display: inline-block; }
      .mainvisual .bx-controls .bx-pager .bx-pager-item {
        width: 15px;
        height: 15px; }
        .mainvisual .bx-controls .bx-pager .bx-pager-item a {
          display: block;
          border-radius: 15px;
          background: #fff;
          text-indent: -9999px; }
          .mainvisual .bx-controls .bx-pager .bx-pager-item a.active {
            background: #f2b3cf; }

.common-tit {
  font-size: 38px;
  color: #17ab93;
  font-weight: 700;
  text-align: center;
  }
  .common-tit span {
    line-height: 160%;
    display: block;
    font-size: 15px;
    color: #716d6d;
    font-weight: 400; }

.main-feature {
  padding-top: 75px;
  padding-bottom: 75px;
  text-align: center; }
  .main-feature .common-tit {
    margin-bottom: 75px; }
  .main-feature ul {
    display: inline-block; }
    .main-feature ul:after {
      clear: both;
      display: block;
      content: ""; }
    .main-feature ul li {
      width: 298px;
      padding: 0 4px;
      float: left; }
      .main-feature ul li .ico {
        display: block;
        text-align: center;
        margin-bottom: 30px; }
      .main-feature ul li .c01 {
        display: block;
        color: #5ba496;
        margin-bottom: 25px;
        font-size: 18px;
        font-weight: 700; }
      .main-feature ul li .c02 {
        display: block;
        color: #d18aa9;
        margin-bottom: 25px;
        font-size: 18px;
        font-weight: 700; }
      .main-feature ul li p {
        text-align: center;
        font-size: 14px;
        line-height: 178%;
        letter-spacing: -0.025em; }

.main-third {
  height: 350px;
  width: 100%;
  display: table;
  background: url(../images/main_third.png) no-repeat center top; }
  .main-third .view-more {
    display: table-cell;
    text-align: center;
    vertical-align: middle; }
    .main-third .view-more h3 {
      font-size: 38px;
      color: #fff;
      font-weight: 700;
   }
    .main-third .view-more span {
      font-size: 14px;
      color: #fff;
      display: block;
      margin-top: 10px; }
    .main-third .view-more a {
      display: block;
      width: 145px;
      line-height: 45px;
      border: 2px solid #fff;
      text-align: center;
      font-weight: 700;
      color: #fff;
      margin: 50px auto 0; }

.main-product {
  padding-top: 75px;
  height: 900px;
  position: relative; }
  .main-product .bg-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: #84d8c8;
    z-index: -1; }
  .main-product .prd-slide-wrap {
    width: 1162px;
    margin: auto;
    @inlcude cf; }
    .main-product .prd-slide-wrap .bx-controls {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%; }
      .main-product .prd-slide-wrap .bx-controls .bx-prev {
        width: 69px;
        height: 69px;
        background: url(../images/btn_arrow.png) no-repeat 0 -69px;
        margin-top: -35px;
        display: block;
        text-indent: -8999px;
        left: 5%;
        position: absolute; }
      .main-product .prd-slide-wrap .bx-controls .bx-next {
        width: 69px;
        height: 69px;
        background: url(../images/btn_arrow.png) no-repeat;
        margin-top: -35px;
        display: block;
        text-indent: -8999px;
        position: absolute;
        right: 5%; }
    .main-product .prd-slide-wrap .prd {
      @inlcude cf; }
      .main-product .prd-slide-wrap .prd .prd-img-wrap {
        float: left;
        width: 50%;
        padding-top: 50px; }
        .main-product .prd-slide-wrap .prd .prd-img-wrap .prd-img {
          margin-bottom: 30px; }
          .main-product .prd-slide-wrap .prd .prd-img-wrap .prd-img img {
            display: none; }
            .main-product .prd-slide-wrap .prd .prd-img-wrap .prd-img img.active {
              display: block; }
        .main-product .prd-slide-wrap .prd .prd-img-wrap .prd-thumb {
          text-align: center; }
          .main-product .prd-slide-wrap .prd .prd-img-wrap .prd-thumb a {
            display: inline-block; }
      .main-product .prd-slide-wrap .prd .prd-info {
        width: 50%;
        float: left;
        padding-left: 80px;
        display: none; }
        .main-product .prd-slide-wrap .prd .prd-info.active {
          display: block; }
        .main-product .prd-slide-wrap .prd .prd-info .prd-name {
          font-size: 100px;
          color: #84d8c8;
          font-weight: 700;
          vertical-align: middle; }
          .main-product .prd-slide-wrap .prd .prd-info .prd-name span {
            font-size: 30px;
            color: #84d8c8;
            margin-left: 30px;
            font-weight: 700;
            vertical-align: middle; }
        .main-product .prd-slide-wrap .prd .prd-info .prd-summary {
          font-size: 26px;
          color: #84d8c8;
          margin: 30px 0 50px; }
        .main-product .prd-slide-wrap .prd .prd-info .prd-feature {
          background: url(../images/bullet_01.png) no-repeat;
          padding-left: 30px;
          font-size: 18px;
          color: #fff;
          margin-bottom: 15px;
          font-weight: 300; }
        .main-product .prd-slide-wrap .prd .prd-info .color-list span {
          display: inline-block;
          width: 70px;
          text-align: center;
          line-height: 20px;
          color: #fff;
          border-radius: 10px;
          margin-right: 5px;
          font-size: 10px;
          margin-bottom: 15px;
          text-transform: uppercase; }
        .main-product .prd-slide-wrap .prd .prd-info .color-list .lime {
          background: #92d051; }
        .main-product .prd-slide-wrap .prd .prd-info .color-list .pink {
          background: #ec7ea1; }
        .main-product .prd-slide-wrap .prd .prd-info .color-list .peach {
          background: #fcd5b6; }
		.main-product .prd-slide-wrap .prd .prd-info .color-list .aqua {
          background: #4edee6; }
		.main-product .prd-slide-wrap .prd .prd-info .color-list .blue {
          background: #4a9ffc; }
        .main-product .prd-slide-wrap .prd .prd-info .color-list .white {
          background: #fff;
          color: #868686; }
        .main-product .prd-slide-wrap .prd .prd-info .color-list .custom {
          background: #e9e9e9;
          color: #868686; }
        .main-product .prd-slide-wrap .prd .prd-info .btn-more {
          width: 220px;
          line-height: 60px;
          text-align: center;
          color: #fff;
          font-size: 15px;
          font-weight: 700;
          border-radius: 30px;
          display: block;
          margin-top: 40px;
          border: 2px solid #fff; }
  .main-product .prd-pager {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 60px; }
    .main-product .prd-pager a {
      margin: 0 3px;
      display: inline-block;
      width: 145px;
      line-height: 45px;
      border: 2px solid #84d8c8;
      color: #716d6d; }
    .main-product .prd-pager .active {
      background: #84d8c8;
      color: #fff; }

.grid-box {
  padding: 0 2%; }
  .grid-box:after {
    clear: both;
    display: block;
    content: ""; }
  .grid-box div {
    float: left;
    width: 20%;
      max-height: 365px !important;
      overflow: hidden;
}
    .grid-box div img {
      width: 100%; }
  .grid-box .img-box {
    position: relative; }
  .grid-box .txt-box {
    display: table; }
    .grid-box .txt-box.bg-type01 {
      background: #f2b3cf;
      color: #fff; }
    .grid-box .txt-box.bg-type02 {
      background: #84d8c8;
      color: #fff; }
    .grid-box .txt-box p {
      display: table-cell;
      vertical-align: middle;
      padding: 10%;
      text-align: center;
      line-height: 140%; }
      .grid-box .txt-box p span {
        display: block;
        font-size: 15px; }
    .grid-box .txt-box strong {
      font-size: 20px;
      display: block;
      text-align: center; }
      .grid-box .txt-box strong:after {
        display: block;
        margin: 50px auto;
        content: "";
        width: 45px;
        height: 5px;
        background: #fff; }
      .grid-box .txt-box strong.color03:after {
        display: block;
        margin: 50px auto;
        content: "";
        width: 45px;
        height: 5px;
        background: #f06eaa; }
      .grid-box .txt-box strong.color02:after {
        display: block;
        margin: 50px auto;
        content: "";
        width: 45px;
        height: 5px;
        background: #84d8c8; }

.site-footer {
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
  color: #fff;
  background: #61605e; }
  .site-footer .company-name {
    font-size: inherit;
    color: #fff;
    margin-bottom: 30px;
    font-size: 15px; }
  .site-footer p {
    line-height: 146%;
    color: #fff;
    font-size: 15px; }


@media screen and (max-width:1300px){
    .site-header .gnb .site-menu{
        width:auto; display:none; 
    }
    .grid-box .txt-box strong{font-size:16px;}
    .grid-box .txt-box p span{font-size:13px;}

    .main-product .prd-slide-wrap .bx-controls .bx-prev{left:10px;}
    .main-product .prd-slide-wrap .bx-controls .bx-next{right:10px;}
    .gnb.on .side-menu{top:100%;}
}
@media screen and (max-width:1023px){
    .site-header{padding: 0 20px;}
    .main-feature ul{width:100%; padding:10px;}
    .main-feature ul li{width:25%;}
    .main-feature ul li p{font-size:12px;}
    .site-header .gnb .site-menu{float: left; margin-left:30px;}
    
    .grid-box .txt-box strong:after{margin:20px auto !important;}
    .main-product .prd-slide-wrap{width:100%; padding:0 5%;}
    .main-product .prd-slide-wrap .prd .prd-img-wrap .prd-img img{width:100%;}
    .main-product .prd-slide-wrap .prd .prd-info .prd-name{font-size:50px;}
    .main-product .prd-slide-wrap .prd .prd-info .prd-name span{margin-left:10px; font-size:24px;}
    .main-product .prd-slide-wrap .prd .prd-info .prd-summary{font-size: 18px;}
    .main-product .prd-slide-wrap .prd .prd-info .prd-feature{color: #84d8c8;}
    .main-product .prd-slide-wrap .prd .prd-info .prd-summary{margin:20px 0}
    .main-product .prd-slide-wrap .prd .prd-info .color-list span{margin-bottom:10px}
    .main-product .prd-slide-wrap .prd .prd-info .prd-feature{color: #fff;}
    .main-product .prd-slide-wrap .prd .prd-info .btn-more{width:160px; line-height: 40px;}
    .main-product{height: auto; padding:50px 0;}
    .color-list{margin-bottom:30px;}
    .grid-box .txt-box strong{font-size:14px;}
    .grid-box .txt-box p span{font-size:12px;}
    .site-header .site-logo{width:100px; padding-top:40px;}
    .site-header .site-logo img{width:100%;}
    .site-header .btn-menu{right:20px;}
    .site-header .gnb .site-menu li{width:120px;}
    .site-header .gnb .site-menu li a{font-size:14px}
    .site-header.sticky .site-logo{padding-top:20px;}

	.language_btn {position:absolute; top: 38px; right:60px; color:#fff; font-size:24px; font-weight:bold;  transition: .5s all ease-out;  }
	.sticky .language_btn {position:absolute; top:18px; right: 60px; color:#fff;  transition: .5s all ease-out; }
}
@media screen and (max-width:767px){
    .site-header .gnb .site-menu{display: none;}
    .main-product .prd-slide-wrap .prd .prd-img-wrap{width:80%;float: none; margin: auto; }
    .prd-info-wrap{width:90%; float: none; margin: auto;}
    .main-product .prd-slide-wrap .prd .prd-info{width:100%; float: none; padding-top:30px;}
    .main-product .prd-slide-wrap .prd .prd-info .prd-name{color: #fff;}
    .main-product .prd-slide-wrap .prd .prd-info .prd-name span{color: #fff;}
    .main-product .prd-slide-wrap .prd .prd-info .prd-summary{color: #fff;}
    .grid-box{padding:0;}
    .grid-box div{width:50%;}
    .grid-box div:nth-child(3), .grid-box div:nth-child(7){float: right;}
    .site-header{height: 60px;}
    .site-header .site-logo{width:100px; padding-top:20px;}
    .site-header .site-logo img{width:100%;}
    .site-header.sticky .site-logo{padding-top:20px;}    
    .site-header .btn-menu{top:15px; right:10px;}
    .site-header.sticky .btn-menu{top:15px;}

	.language_btn {position:absolute; top: 15px; right:55px; color:#fff; font-size:24px; font-weight:bold;  transition: .5s all ease-out;  }
	.sticky .language_btn {position:absolute; top:15px; right: 55px; color:#fff;  transition: .5s all ease-out; }

}

@media screen and (max-width:639px){
    .site-header{padding:0 10px; height:60px;}
    .site-header .site-logo{width:100px; padding-top:15px;}
    .site-header .site-logo img{width:100%;}
    .site-header.sticky .site-logo{padding-top:20px;}
    .mainvisual{height: 450px;}
    .mainvisual ul li{height:450px; background-size: cover}
    .main-feature ul li{width:100%; margin-bottom:30px;}
    .main-feature .common-tit{margin-bottom:30px;}
    .main-product .prd-pager a{width:47%; margin:1%}
    .main-product .prd-slide-wrap .prd .prd-img-wrap{width:100%;}
    .main-product .prd-slide-wrap .bx-controls{display: none;}
    .prd-info-wrap{width:100%;}
    .main-product .prd-slide-wrap .prd .prd-img-wrap .prd-thumb a{margin-bottom:5px;}
    .main-product .prd-slide-wrap .prd .prd-info{padding-left:0;}
    .main-product .prd-slide-wrap .prd .prd-info .prd-summary{font-size:13px;}
    .main-product .prd-slide-wrap .prd .prd-info .prd-feature{font-size:13px; background-size: auto 13px }
    .main-product .prd-slide-wrap .prd .prd-info .btn-more{margin: 40px auto;}
    .grid-box .txt-box p{line-height: 110%;}
    .site-header .gnb .side-menu{width:60%;}
    .site-header .gnb .side-menu > li a{font-size: 15px;}
    .site-header .gnb .side-menu > li .depth02 a{font-size:13px;}
    .site-footer {padding-top:20px; padding-bottom:20px;}
    .site-footer .company-name{font-size:12px;}
    .site-footer p{font-size:12px;}    
    .notice-layer{width:80% !important;}
    .notice-layer img{width:100%;}
}
/*# sourceMappingURL=layout.css.map */