/* Common */
.section {
  padding:100px 0px;
}

.section-tit {
  font-size:4.5rem;
  font-weight:600;
  line-height:1;
}

.section-subtit {
  font-size:1.8rem;
  font-weight:500;
}

.section .txt {
  overflow: hidden;
}

@media (max-width:1200px) {

  .section-tit {
    font-size:3.2rem;
  }

  .section-subtit {
    font-size:1.6rem;
  }

}
@media (max-width:1024px) {

  .section {
    padding:80px 0px;
  }

}
@media (max-width:768px) {

  .section {
    padding:60px 0px;
  }

  .section-tit {
    font-size:2.6rem;
  }

  .section-subtit {
    font-size:1.5rem;
  }

}
@media (max-width:500px) {

}


/* Visual */
.visual {
  width:100%;
  height:100vh;
}

.visual .visual-container {
  width:100%;
  height:100%;
}

.visual .visual-inner {
  width:100%;
  height:100%;
  position: relative;
}

.visual .swiper-container {
  height:100%;
}

.visual .swiper-wrapper {
  height:100%;
}

.visual .swiper-slide {
  width:100%;
  height:100%;
  overflow: hidden;
}

.visual .swiper-controls {
  width:100%;
  height:100px;
  background-color: rgba(0,0,0,.2);
  position: absolute;
  left:0;
  bottom:0;
  z-index:2;
}

.visual .pagination {
  max-width:1230px;
  width:100%;
  padding:0px 15px;
  margin:0 auto;
}

.visual .swiper-pagination-bullet {
  width:calc(33.33% - 40px);
  margin:0px 20px;
  height: auto;
  border-radius:0px;
  opacity:1;
  background-color:transparent;
  text-align:center;
  position: relative;
}

.visual .swiper-pagination-bullet span {
  display:block;
  font-size:1.6rem;
  color:#c8c8c8;
  margin-top:30px;
  transition:all .5s ease-out;
}

 .visual .swiper-pagination-bullet i {
   display:block;
   width:100%;
   height:2px;
   background-color: #c8c8c8;
   position: absolute;
   top:0;
   left:0;
 }

 .visual .swiper-pagination-bullet b {
   display:block;
   width:0;
   height:2px;
   background-color: #fff;
   position: absolute;
   top:0;
   left:0;
 }

.visual .swiper-pagination-bullet-active span {
  color:#fff;
  text-shadow: 3px 4px 11px rgba(0, 0, 0, 0.06);
}

.visual .swiper-pagination-bullet-active b {
  animation: processBar 2.8s ease-in forwards;
}

.visual .visual-content {
  max-width: 1230px;
  width: 100%;
  height: 100%;
  padding: 0px 15px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  text-align: center;
}

.visual .text {
  width:100%;
  height:100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.visual .text_t01 {
  font-size:4rem;
  font-weight:500;
  color:#fff;
  text-shadow: 3px 4px 11px rgba(0, 0, 0, 0.06);
}

.visual .text_t02 {
  font-size:5.5rem;
  color:#fff;
  margin:20px 0px 30px;
  text-shadow: 3px 4px 11px rgba(0, 0, 0, 0.06);
}

.visual .text_t03 {
  font-size:1.8rem;
  line-height:1.7;
  color:#fff;
  text-shadow: 3px 4px 11px rgba(0, 0, 0, 0.06);
}

.visual .visual-background {
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.visual .visual-background--01 {
  background-image: url('/cn/img/main/visul_thumb_img1.png');
}

.visual .visual-background--02 {
  background-image: url('/cn/img/main/visul_thumb_img2.png');
}

.visual .visual-background--03 {
  background-image: url('/cn/img/main/visul_thumb_img3.png');
}

.visual .text-ani-wrap {
  width:100%;
}

.visual .text-ani {
  /* overflow:hidden; */
  display: block;
}

.visual .text-ani > * {
  display:block;
  opacity:0;
  color:#fff;
}

.visual .swiper-slide-active .text-ani > * {
  animation:textAni .8s ease .1s forwards;
}

/*.visual .swiper-slide-active .text-ani:nth-child(1) > *{
  animation-delay:.2s;
}

.visual .swiper-slide-active .text-ani:nth-child(2) > *{
  animation-delay:.6s;
}

.visual .swiper-slide-active .text-ani:nth-child(3) > *{
  animation-delay:1s;
}

.visual .swiper-slide-active .text-ani:nth-child(4) > *{
  animation-delay:1.2s;
}*/

@-webkit-keyframes textAni {
  0% {
    opacity:0;
    /* -webkit-ransform:translateY(100%);
    -ms-transform:translateY(100%);
    transform:translateY(100%); */
  }
  100% {
    opacity:1;
    /* -webkit-ransform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0); */
  }
}

@-ms-keyframes textAni {
  0% {
    opacity:0;
    /* -webkit-ransform:translateY(100%);
    -ms-transform:translateY(100%);
    transform:translateY(100%); */
  }
  100% {
    opacity:1;
    /* -webkit-ransform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0); */
  }
}

@keyframes textAni {
  0% {
    opacity:0;
    /* -webkit-ransform:translateY(100%);
    -ms-transform:translateY(100%);
    transform:translateY(100%); */
  }
  100% {
    opacity:1;
    /* -webkit-ransform:translateY(0);
    -ms-transform:translateY(0);
    transform:translateY(0); */
  }
}

@-webkit-keyframes processBar {
    0% {width: 0;}
    100% {width:100%;}
}

@-ms-keyframes processBar {
    0% {width: 0;}
    100% {width:100%;}
}

@keyframes processBar {
    0% {width: 0;}
    100% {width:100%;}
}

@media (max-width:1200px) {

  .visual .text_t01 {
    font-size:2.8rem;
  }

  .visual .text_t02 {
    font-size:3.6rem;
  }

  .visual .text_t03 {
    font-size:1.6rem;
  }

  .visual .swiper-pagination-bullet span {
    font-size:1.4rem;
    margin-top:22px;
  }


}
@media (max-width:1024px) {

  .visual .text_t02 {
    margin:14px 0px 22px;
  }

  .visual .swiper-pagination-bullet {
    width:calc(33.33% - 20px);
    margin:0px 10px;
  }

}
@media (max-width:768px) {

  .visual .text_t01 {
    font-size:2.4rem;
  }

  .visual .text_t02 {
    font-size:2.8rem;
  }

  .visual .text_t03 {
    font-size:1.5rem;
  }

  .visual .visual-background--01 {
    background-image: url('/cn/img/main/visul_thumb_img1_mo.png');
  }

  .visual .visual-background--02 {
    /* background-image: url('/cn/img/main/visul_thumb_img2_mo.png'); */
  }

  .visual .visual-background--03 {
    background-image: url('/cn/img/main/visul_thumb_img3_mo.png');
  }

  .visual .swiper-controls {
    height:60px;
    background-color: transparent;
  }

  .visual .pagination {
    max-width:280px;
  }

  .visual .swiper-pagination-bullet span {
    display: none;
  }

}
@media (max-width:500px) {

}


/* Brand */
.section--brand .txt {
  text-align:center;
  margin-bottom:80px;
}

.section--brand .brand-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin:-12px;
}

.section--brand .brand-list li {
  width:calc(33.33% + 24px);
  margin:12px;
}

.section--brand .brand-list .box {
  position: relative;
  padding-bottom:130px;
}

.section--brand .brand-list .text {
  text-align: center;
  position: absolute;
  top:240px;
  left:50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width:85%;
  height:auto;
  padding:40px 0px;
  background-color: #fff;
  box-shadow: 3px 4px 27.52px 4.48px rgba(0, 0, 0, 0.06);
}

.section--brand .brand-list .text_t01 {
  font-size:2rem;
  font-weight:600;
}

.section--brand .brand-list .text_t01::after {
  content:"";
  display:block;
  width:40px;
  height:2px;
  background-color: #4c6a26;
  margin:25px auto;
}

.section--brand .brand-list .text_t02 {
  font-size:1.4rem;
}

.section--brand .brand-list .text_t02 span {
  display: inline-block;
  font-size:1.8rem;
  margin-bottom:14px;
  font-weight: 600;
}

.section--brand .brand-list .thumb {
  position: relative;
  width:100%;
  height:0;
  padding-top:calc(305/285*100%);
  z-index:-1;
  overflow: hidden;
}

.section--brand .brand-list .thumb_img {
  position: absolute;
  width:100%;
  height:100%;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width:1200px) {

  .section--brand .txt {
    margin-bottom:60px;
  }

  .section--brand .brand-list .text_t01 {
    font-size:1.8rem;
  }

  .section--brand .brand-list .text_t02 span {
    font-size:1.6rem;
    margin-bottom:8px;
  }

}
@media (max-width:1024px) {

  .section--brand .txt {
    margin-bottom:40px;
  }

  .section--brand .brand-list {
    margin:-6px;
  }

  .section--brand .brand-list li {
    width:calc(33.33% + 12px);
    margin:6px;
  }

  .section--brand .brand-list .box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-bottom:0px;
    box-shadow: 3px 4px 27.52px 4.48px rgba(0, 0, 0, 0.06);
  }

  .section--brand .brand-list .text {
    position: relative;
    top:unset;
    left: unset;
    transform: none;
    width:100%;
    padding:28px 0px;
    order:2;
    box-shadow:none;
  }

  .section--brand .brand-list .text_t01::after {
    width:28px;
    margin:20px auto;
  }

  .section--brand .brand-list .text_t02 span {
    font-size:1.5rem;
    margin-bottom:6px;
  }

  .section--brand .brand-list .thumb {
    order:1;
  }

}
@media (max-width:768px) {

  .section--brand .txt {
    margin-bottom:28px;
  }

  .section--brand .brand-list {
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin:-6px 0px;
  }

  .section--brand .brand-list li {
    width:100%;
    margin:6px 0px;
  }
  
  .section--brand .brand-list .text {
    height:auto;
    padding: 25px 15px;
  }

  .section--brand .brand-list .text_t01 {
    font-size:1.6rem;
  }

  .section--brand .brand-list .text_t01::after {
    width:20px;
    margin:10px auto;
  }

}
@media (max-width:500px) {

}


/* Inquiry */
.section--business {
  background-color: #f4f4f4;
}

.section--business .txt {
  text-align:center;
  margin-bottom:40px;
}

.section--business .section-tit {
  padding-bottom:20px;
}

.section--business .business-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.section--business .business-list li {
  width:50%;
}

.section--business .business-list .box {
  position:relative;
}

.section--business .business-list .text {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  padding:40px;
}

.section--business .business-list .text::after {
  content:"";
  display:inline-block;
  vertical-align: middle;
  width:8px;
  height:14px;
  background: url('/cn/img/icon/main_arrow_icon_01.png') no-repeat center;
  margin-left:40px;
}

.section--business .business-list .text_t01 {
  display: inline-block;
  vertical-align: middle;
  font-size:2.4rem;
  font-weight:600;
  color:#ffffff;
}

.section--business .business-list .thumb {
  position: relative;
  width:100%;
  height:0;
  padding-top:calc(222/600*100%);
  z-index:-1;
  overflow: hidden;
}

.section--business .business-list .thumb--left {
  border-top-left-radius:50px;
}

.section--business .business-list .thumb--right {
  border-bottom-right-radius:50px;
}

.section--business .business-list .thumb_img {
  position: absolute;
  width:100%;
  height:100%;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%) scale(1);
  -ms-transform: translate(-50%,-50%) scale(1);
  transform: translate(-50%,-50%) scale(1);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transition:all .4s ease-out;
  -ms-transition:all .4s ease-out;
  transition:all .4s ease-out;
}

@media (min-width:1201px) {
  .section--business .business-list li:hover .thumb_img {
    -webkit-transform: translate(-50%,-50%) scale(1.03);
    -ms-transform: translate(-50%,-50%) scale(1.03);
    transform: translate(-50%,-50%) scale(1.03);
  }
}
@media (max-width:1200px) {

  .section--business .business-list .text_t01 {
    font-size:2rem;
  }

  .section--business .business-list .text::after {
    margin-left:20px;
  }

}
@media (max-width:1024px) {

  .section--business .txt {
    margin-bottom:28px;
  }

  .section--business .section-tit {
    padding-bottom:10px;
  }

  .section--business .business-list .text {
    padding:28px;
  }

}
@media (max-width:768px) {

  .section--business .business-list {
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .section--business .business-list li {
    width:100%;
  }

  .section--business .business-list .text::after {
    margin-left:10px;
  }

  .section--business .business-list .text_t01 {
    font-size:1.8rem;
  }
  
  .section--business .business-list .text {
    padding:25px;
  }


}
@media (max-width:500px) {
  .section--business .business-list .text {
    padding:20px;
  }
}


/* News */
.section--board .txt {
  margin-bottom:40px;
}

.section--board .button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  font-size:1.6rem;
  font-weight:500;
  margin-bottom:20px;
}

.section--board .button::after {
  content:"";
  display:block;
  width:29px;
  height:19px;
  background:url('/cn/img/icon/main_arrow_icon_02.png') no-repeat center;
  margin-left:20px;
}

.section--board .board-list {
  position: relative;
}

.section--board .board-list::after {
  content:"";
  display:block;
  position: absolute;
  left:0;
  bottom:0;
  width:100vw;
  height:1px;
  background-color: #cccccc;
}

.section--board .board-list li {
  position: relative;
}

.section--board .board-list li::before {
  content:"";
  display:block;
  position: absolute;
  left:0;
  top:0;
  width:100vw;
  height:1px;
  background-color: #cccccc;
}

.section--board .board-list .box {
  padding:38px 0px;
  position: relative;
}

.section--board .board-list .din {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.section--board .board-list .mid {
  position: absolute;
  top:0;
  right:80px;
  z-index:-1;
  -webkit-transition:all .4s ease-out;
  -ms-transition:all .4s ease-out;
  transition:all .4s ease-out;
  opacity:0;

  /* 추가 css */
  width:calc(100% - 1000px);
  height:100%;
}

.section--board .board-list .mid img {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit: fill;
}

.section--board .board-list .board-data,
.section--board .board-list .board-tit {
  display: inline-block;
  vertical-align: middle;
}

.section--board .board-list .board-data {
  padding-right:100px;
}

.section--board .board-list .board-data p {
  font-size:1.8rem;
  color:#999999;
}

.section--board .board-list .board-data p.board-data_num {
  font-size:3.4rem;
  font-weight:700;
  color:#4c6a26;
  line-height:1;
  margin-bottom:10px;
}

.section--board .board-list .board-tit p {
  font-size:1.8rem;
  font-weight:500;
}

@media (min-width:1201px) {

  .section--board .board-list li:hover .mid {
    right:120px;
    opacity:1;
  }

}
@media (max-width:1200px) {

  .section--board .button {
    font-size:1.5rem;
  }

  .section--board .board-list .board-data p {
    font-size:1.6rem;
  }

  .section--board .board-list .board-data p.board-data_num {
    font-size:2.6rem;
  }

  .section--board .board-list .board-tit p {
    font-size:1.6rem;
  }

}
@media (max-width:1024px) {

  .section--board .txt {
    margin-bottom:28px;
  }

  .section--board .button::after {
    margin-left:10px;
  }

  .section--board .board-list .box {
    padding:30px 0px;
  }

  .section--board .board-list .board-data {
    padding-right:60px;
  }

}
@media (max-width:768px) {

  .section--board .button {
    font-size:1.4rem;
    margin-bottom:10px;
  }

  .section--board .button::after {
    height:14px;
    background-size: auto 14px;
  }

  .section--board .board-list .box {
    padding:22px 0px;
  }

  .section--board .board-list .board-data, .section--board .board-list .board-tit {
    display: block;
  }

  .section--board .board-list .board-data {
    padding-right:0px;
    padding-bottom:10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }

  .section--board .board-list .board-data p {
    font-size:1.5rem;
  }

  .section--board .board-list .board-data p.board-data_num {
    font-size:2.3rem;
    margin-bottom:0px;
    margin-right:10px;
  }

  .section--board .board-list .board-tit p {
    font-size:1.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .section--board .board-list .din .left {
    width:80%;
  }

  .section--board .board-list .din .right img {
    height:14px;
  }

}
@media (max-width:500px) {

}


/* Client */
.section--client {
  padding:50px 0px;
  background-color: #414842;
}

.section--client .client-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin:0px -60px;
}

.section--client .client-list li {
  padding:0px 60px;
}

.section--client .client-list .box {
  text-align:center;
}

@media (max-width:1200px) {

}
@media (max-width:1024px) {

  .section--client {
    padding:40px 0px;
  }

  .section--client .client-list {
    margin:0px -40px;
  }

  .section--client .client-list li {
    padding:0px 40px;
  }

}
@media (max-width:768px) {

  .section--client {
    padding:28px 0px;
  }

  .section--client .client-list {
    -webkit-box-lines: multiple;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin:-10px -28px;
  }

  .section--client .client-list li {
    width:50%;
    padding:10px 28px;
  }

}
@media (max-width:500px) {

  .section--client {
    padding:20px 0px;
  }

  .section--client .client-list {
    margin:-6px -20px;
  }

  .section--client .client-list li {
    padding:6px 20px;
  }

  .section--client .client-list img {
    width:140px;
  }

}

/* Popup */
#popup {
  position: relative;
}

.popup-layer {
  z-index: 10000;
  position: absolute;
  background: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,.25);
  animation: popup-fade .65s ease-in-out .35s forwards;
  opacity: 0;
  max-width:800px;
}

@keyframes popup-fade {
  0% { opacity: 0;
    -webkit-transform: translateY(25px);
    -ms-transform: translateY(25px);
    transform: translateY(25px); }
  100% { opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }
}
.popup-layer__body {
  background: #fff;
}

.popup-layer__body img {
  display: block;
  margin: 0 auto;
  border: none;
  max-width: 100%;
}

.popup-layer__foot {
  background: #424242;
}

.popup-layer__foot ul {
  display:flex;
  flex-wrap: wrap;
}

.popup-layer__foot li {
  width:50%;
  padding:10px;
}

.popup-layer__foot li:first-child {
  padding-right:0;
}

.popup-layer__foot li:last-child {
  text-align: right;
}

.popup-layer__foot span {
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
  transition:all 0.3s ease;
}

.popup-layer__foot label:hover span { opacity: .7; }

/* .popup-layer-foot { background: #424242; }
.popup-layer-foot span { font-size: 15px; color: #fff; }
.popup-layer-foot label:hover span { opacity: .7; }
.popup-layer-foot li:first-child { padding-right: 0; }
.popup-layer-foot li:last-child { text-align: right; } */


@media (max-width: 1024px){
  /* .popup-layer { z-index: 999; } */
  .popup-layer { top: 95px !important; left: 0 !important; margin: 0 5px; }
}
@media (max-width: 768px){

  .popup-layer {
    width:calc(100% - 10px);
  }

  .popup-layer img {
    max-width: none;
    width:100%;
    height: auto !important;
  }
  .popup-layer-foot span { font-size: 14px; }

}
@media (max-width: 375px){
  .popup-layer-foot li { width: 100%; }
  .popup-layer-foot li:last-child { text-align: left; }
}