#banner {z-index: 3;margin-top: 90px;}
#banner .item { width: 100vw; min-height: 75vh; height: 75vh; }
#banner .item img {width: 100vw;height: 75vh;}
#banner .item >.pos_abs {width: 100vw;height:  100%;top: 0;left: 0;z-index: 5;}
#banner .item .info {}
#banner:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 74%);
    z-index: 0;
}

#banner .videobox {
    position: absolute;
    width: 100%;
    object-fit: cover;
    display: flex;
    z-index: -1;
}
#banner .item .info >div {margin: auto;width: auto;max-width: 100%;left: 17%;height: auto;display: flex;flex-direction: column;top: 221px;margin: 0;}
#banner .item .info >div:before {position: absolute;width: 0;height: 46%;background: var(--white);display: block;top: -3%;left: 6%;content: "";}
#banner .item .info >div:after{content:"";position: absolute;width: 16px;height: 105px;background: #c1d6cd;left: calc(-9% - 7px);top: 8%;font-size: 2rem; /* 設定動畫 */}
#banner .item .info .txt {opacity: 0;color: #ffffff;line-height: 100%;display: flex;align-items: center;}
#banner .item .info h3.txt {padding: 0 10px;font-size: max(5 * (1vw + 1vh) / 2, 50px);letter-spacing: .1em;}
#banner .item .info h3.txt .color1 , #banner .item .info h3.txt .color2{
    font-size: max(5 * (1vw + 1vh) / 2, 50px);
    color: #c2d7ce;
    line-height: 115%;
}

#banner .item .info .malittle{
    font-size: max(1.4 * (1vw + 1vh) / 2, 15px);
    line-height: 100%;
    color: #ffffff;
    margin-left: 10px;
    font-weight: 200;
    line-height: 120%;
    margin-bottom: 12px;
}
#banner .item .info p.txt {padding: 10px 10px 20px;font-weight: 400;line-height: 150%;opacity: 1!important;!importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;}
#banner .item .info p.txt *{
    color: #ffffff;
    
}
#banner .item .info p.txt .letters {display: flex;align-items: center;}
#banner .item .info p.txt .letters .letter{letter-spacing: 0.07em;font-size: max(1.3 * (1vw + 1vh) / 2, 14px);transition: all 0s ease-in-out;-webkit-transition: all 0s ease-in-out;letter-spacing: 0.25em;font-weight: 200;}
#banner .item .info .more_btn {opacity: 0;border-radius: 555px;background: #689986;width: min(180px , 100%);padding: 10px 40px;margin-top: 34px;margin-left: 20px;overflow: visible;z-index: 2;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
#banner .item .info .cnnJ:before{
	content:"";
	position: absolute;
	width: 81px;
	aspect-ratio: 1/1;
	left: 6px;
	border-radius: 555px;
	border: rgb(255 255 255 / 30%) 1px solid;
	z-index: 0;
	margin-top: 24px;
	z-index: 0;
	font-size: 2rem;
	
}
#banner .item .info .cnnJ:after{
	content:"";
	position: absolute;
	width: 80px;
	aspect-ratio: 1/1;
	left: 7px;
	border-radius: 555px;
	border: rgb(255 255 255 / 51%) 1px solid;
	z-index: 0;
	margin-top: 24px;
	z-index: 0;
	animation: scaleAnimation 4s infinite;
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1); 
    }
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1); 
    }
}
#banner .item .info .more_btn svg{
    right: unset;
    left: 9%;
}
#banner .item .more_btn span{
    padding-left: 14px;
    letter-spacing: 0.05em;
    font-size: max(1.6 * (1vw + 1vh) / 2, 18px);
}
#banner .item a.pos_abs { z-index: 2; }
#banner .item iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item video { overflow: hidden; position: absolute; min-width: 100%; width: auto; min-height: 100%; height: auto; right: 0; bottom: 0; }
#banner .cnnJ:hover .more_btn{
    background: #326e56;
}
/* slick-dots */
#banner .slick-dots { width: auto; height: 100%; background: var(--white); display: flex !important; flex-direction: column; justify-content: center; bottom: 0; left: -90px; }
#banner .slick-dots li { margin: 5px 40px; width: 10px; height: 10px; background: var(--secondary); border-radius: 50%; display: block; opacity: .1; }
#banner .slick-dots li.slick-active { opacity: .5; }

/* arrow_bg */
#banner .arrow_bg {width: 450px;height: 140px;left: auto;bottom: -140px;transform-origin: 100% 100% 0;display: none;}

/* arrow */
#banner .arrow {bottom: 40%;left: 1%;width: auto;display: flex;padding: 0 30px;flex-direction: column;}
#banner .arrow a {width: 55px;height: 55px;line-height: 55px;border: 2px solid #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;opacity: .25;margin-bottom: 18px;}
#banner .arrow a:hover{opacity:1;}
#banner .arrow a i{color:#fff;}

/* slick-current */
#banner .slick-current .info >div:before {width: 1px;transition-delay: .6s;-webkit-transition-delay: .6s;left: -9%;}
#banner .slick-current .info .txt , #banner .slick-current .info .more_btn {opacity: 1;transition-delay: .3s;-webkit-transition-delay: .3s;}
#banner .slick-current .info h3.txt:before { width: 100%; transition-delay: .7s; -webkit-transition-delay: .7s; }

a.maskinJ{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 3;
}
@media screen and (min-width: 1281px){
	#banner {}
}
@media screen and (min-width: 761px){
	#banner .item { min-height: 650px; height: 650px; }
	#banner .item img {height: 650px;}
}
@media screen and (min-width: 1025px){
	#banner .item .info >div {}
	#banner .item .info >div:before {}
	#banner .item .info .txt {}
	#banner .slick-current .info >div:before {}
	#banner .item {min-height: 800px;height: 800px;}
	#banner .item img {height: 800px;}
}
@media screen and (max-width: 1470px){
	#banner .item {min-height: 600px;height: 600px;}
	#banner .item img {height: 600px;}
	#banner .item .info >div{
    top: 160px;
}
	#banner .item .info .cnnJ:before{
    margin-top: 20px;
}
	#banner .item .info .cnnJ:after{
    margin-top: 20px;
}
}
@media screen and (max-width: 768px){
	#banner .item .info >div{
    top: 95px;
}
	#banner .item { min-height: 450px; height: 450px; }
	#banner .item img {height: 450px;object-position: 0% 50%;}
	#banner .arrow{display:none;}
	#banner .slick-current .info >div:before{
    height: 58%;
}
	#banner .item .info >div:after{
    width: 10px;
    left: calc(-9% - 4px);
}
}
@media screen and (max-width: 550px){
	#banner .item .info >div {}
	#banner .item .info h3.txt {}
	#banner .item { min-height: 450px; height: 450px; }
	#banner .item img {height: 450px;}
	#banner{margin-top: 84px;}
}
@media screen and (max-width: 480px){
	#banner .item { min-height: 444px; height: 444px; }
	#banner .item img{
    height: 444px;
    object-position: 14% 50%;
    opacity: 0;
}
	#banner .item .info .more_btn{
    width: min(150px, 100%);
}
	#banner .videobox{
	    height: 580px;
	}
	#banner:before{ background: rgb(0 0 0 / 60%);}
}