/* CSS Document */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: auto; }
body{ background:#1A1B17;}
/** font-family:=================================*/
.color-white{color: #fff!important; }
.align-center { text-align: center; margin: auto;}
.bg-bk{background: #000;}
.bg-orange{background: #f39700;  }
.bg-orange-line{background: #f39700;  }
.bg-blue{background: #00437c;  }

.cms-wrapper { position: relative; margin:0px auto; padding: 0px 20px; width: 100%;  max-width: calc((100% - 40px)/12*12 + 40px); }
@media (min-width:1025px) {
.cms-wrapper { padding-right: 40px; padding-left: 40px;   }
}
@media (min-width: 1201px) and (max-width: 1400px) {
.cms-wrapper { padding-right: 20px; padding-left: 20px; max-width: 100%;}
}
@media (min-width: 1401px) {
.cms-wrapper { padding-right: 80px; padding-left: 80px; max-width: 1440px; }
}

/*----------------------------------------/
common  
----------------------------------------*/
.main-wrap{ width: 100%; padding:0px; margin:auto; display: flex; flex-wrap: wrap;}
/* ==== Main CSS === */
.cms-main-banner {margin-top: -120px;position: relative;   }
@media (max-width:1180px) {
.cms-main-banner {margin-top: -110px;   }
}
@media (max-width:840px) {
.cms-main-banner {margin-top: 0px;   }
}
 





.banner-item{ width: 100%; margin: 0px; padding: 0px;  }
.banner-item li .slider-item { position: relative;   animation:fadeInLeft 2s both;  }
.banner-item li:nth-child(1) figure {transition-delay:2s;  }
.banner-item li:nth-child(2) figure{transition-delay:4s;}
.banner-item li:nth-child(3) figure{transition-delay:6s; }
/* .banner-item li:nth-child(3) img{ animation-delay:3s; animation:fadeInRightBig 4.5s both 4.5s;} 
*/
.banner-item li:hover .slider-item .slogan::before{ color:#f15921; }


.banner-item li{ width:100%; margin: 0px; padding: 0px;cursor: pointer;  position: relative; transition: all .5s ease; z-index: 0;overflow: hidden;   }
.banner-item li img {width:100%; height: auto; position: relative;z-index: 0; display:block; transition: transform .6s;    pointer-events: none;   }
.banner-item li figure {position: relative;z-index: 0;  }
.banner-item li figure::before{content: "" ; width: 100%; height: 100%; display: block; position: absolute; left:0; top:0; z-index: 999;  background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 85%, rgba(26,27,29,1) 100%); }
.banner-item li:hover figure::before{content: "" ; width: 100%; height: 100%; display: block; position: absolute; left:0; top:0; z-index: 999; background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); }
.banner-item li:hover .slogan { transform: scale(1); bottom:100px;  transition: all .5s ease;}
.banner-item li:hover{  width:100%; transition: transform .4s; z-index:9;}
.banner-item li:hover img{ transform: scale(1.1) translateX(20px);  transition: transform .4s; transform-origin: center;  }



.banner-item li .slider-item h3{   display: flex; align-items: flex-end; width: 100%;  height:76px;margin: -30px 0px 60px 0px; padding:0;  font-size:40px; font-size: min(max(3.5vw, 30px), 40px);  font-weight:700; text-align: left; letter-spacing: 4px; color:#fff;; text-shadow: 0px 1px 2px rgba(0,0,0,.1); animation:fadeOutRight 1s both; position: relative; }
.banner-item li .slider-item p{ width: 100%;height:72px;  margin: 0px 0px 20px -76px; padding:0; font-size:1rem; font-size: min(max(3.5vw, .875rem), 1rem); line-height:1.5rem;  text-align: left; font-weight:400;  color:#fff;text-shadow: 0px 1px 2px rgba(0,0,0,.1);   overflow:hidden;  animation:fadeOutLeft 1s both;}

.slogan .txt-content{opacity: 0; transition: transform .4s; min-height:50px;  font-size:.875rem; line-height:1.15rem; font-family: 'MuseoModerno', cursive;  color: #fff;}
.banner-item li:hover .slogan .txt-content{opacity: 1;  width:100%;  margin-top: -40px; margin-left: -80px; animation:fadeInLeft 1s both; }

.banner-item li.slick-active h3{  animation:fadeInDown 1s both 1s;}
.banner-item li.slick-active p{ animation:fadeInLeft 1s both 1.5s;}
.banner-item li.slick-current.slick-active{ box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);   z-index: 999; transition: all 0.25s ease 0s;}
.banner-item li.slick-slide:not(.slick-current) { z-index:1;}
.banner-item .slick-prev, .banner-item .slick-next{transition-delay:6s }

.banner-item .slick-prev:before, .banner-item .slick-next:before{ -webkit-filter:grayscale(1) brightness(200%);transform: scale(2.15) }
.banner-item .slick-prev{left:20px;}
.banner-item .slick-next{right: 20px;}
 
@media (max-width:1180px) {
.banner-item li .slider-item h3{ margin: -10px 0px 30px 0px; padding:0;   }
 }
 @media (max-width:840px) {
 .banner-item {margin-top: 70px;  }
 }
 @media (max-width:576px) {
.banner-item li .slider-item h3{ margin: -30px 0px 30px 0px;}
 .banner-item li .slider-item p{   margin: 0px 0px 20px -60px;  }    
 .banner-item li:hover .slogan .txt-content{  margin-left: -60px; }    
 }
 
/* ==== slogan Style === */
.slogan {width: 100%; max-width: 300px; height: auto;  margin: auto; left:30%; bottom:30px;position: absolute;  display: flex; flex-wrap: wrap;  flex-direction: column;  z-index: 9; transition: transform .6s;animation:fadeInDown 1s both 1s;}   
.slogan::before{ content: attr(data-content); color: rgba(255,255,255,1); font-size: 120px;font-size: min(max(10vw, 60px), 120px);  font-weight: 500;  letter-spacing: 3px;font-family: 'MuseoModerno', cursive; writing-mode: vertical-lr;position: absolute; left:-20%; top:-90%;  transform:rotate(180deg); z-index: 9;  }
.slogan::after{ content: "" ; width: 1px; height: 240px; background-color: #fff;position: absolute; left:0; top:-70%;  transform:rotate(45deg); z-index: 9; }
@media (max-width:1180px) {
.slogan {bottom:-30px; }   
.slogan::before{ top:-60%;} 
 .slogan::after{  left:0; top:-50%;   }
 }
@media (max-width:1024px) {
/*.slogan {bottom:-30px; }   
.slogan::before{ top:-60%; transform: scale(.75) }*/
 .slogan::after{  left:0; top:-60%; transform:rotate(45deg) scale(.75);   }
}
@media (max-width:767.98px) {
.slogan { left:25%; bottom:30px;}   
}
@media (max-width:576px) {
  .slogan::after{  top:-70%;  }
   
}