#banner{width:100%;height: 100vh;z-index: 12;position:relative;overflow:hidden;background-color: #ededed;}
#banner::before {content: "";width: calc(100% - 160px);height: 65px;display: block;background: var(--primary);position: absolute;bottom: 0;right: 0;z-index: -1;pointer-events: none;}
#banner::after {content: "";width: 100%;height: 100%;display: block;background-image: url(/images/39/img_banner_bg2.png);background-size: cover;position: absolute;bottom: 0;right: 0;z-index: -2;}
#banner .wrap{display: grid;grid-template-columns: 802px 1fr;gap:  20px 20px;width: min(1400px, 95%);margin: auto;align-items: center;height: 920px;z-index: 10;}
#banner .bnImgBox *{transition:unset;-webkit-transition:unset}
#banner .bnImgBox{width: 100%;height: 100%;margin:auto;pointer-events:none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);line-height: 2;z-index: -1;text-align: left;display: flex;flex-direction: column;align-items: center;justify-content: center;}
#banner .bnImgBox .img{position:absolute;overflow: inherit;}
#banner .bnImgBox #fly-could02{position: absolute;top: 30px;}
#banner .bnImgBox .bannerBg-round2{transform: translate(60%, -50%);top: 4.5%;}
#banner .img{overflow:hidden;display:inline-block}
#banner .img  img{position:relative;width: 100%;height: 100%;margin: auto;}
#banner .pos_abs{width:100%;min-width:100%;top:0;left:0}
#banner .info{min-width: 100%;height: 100%;display: flex;align-items: center;z-index: 20;}
#banner .info .txt *{opacity:0;-webkit-transform:translateY(15px);transform:translateY(25px)}
#banner .info .txt .more_btn a{transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out}
#banner .info .txt h2{display: contents;}
#banner .info .txt h2{letter-spacing: 0px;font-size: 100px;line-height: 100%;font-weight: 400;font-family:'Cormorant',sans-serif;text-transform:uppercase;position:relative;word-spacing: 100vw;-webkit-transition-delay: 0.3s;transition-delay: 0.3s;color: #c1c3c6;}
#banner .info .txt h2 em{font-size:30px;text-align:right;line-height:1.1;letter-spacing:0;font-weight:300;font-style:normal}
#banner .info .txt{transition:all 0.7s ease;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;-webkit-box-pack:center;justify-content: center;z-index:2;margin:auto;gap: 20px;}
#banner .info .txt em{font-style: normal;position: relative;padding-left: 50px;color: #797f8a;font-size: 24px;font-family: 'Cormorant', sans-serif;}
#banner .info .txt em:before{content:"";width: 30px;height: 1px;background: var(--primary);display:block;position:absolute;top: 50%;left:0}
#banner .info .txt h3{font-size: 28px;font-weight: 300;margin-top: 0px;line-height:1em;-webkit-transition-delay:0.3s;transition-delay:0.3s;letter-spacing:2px}
#banner .info .txt p{font-weight: 400;font-size: 17px;letter-spacing:1px;line-height: 140%;color: #515151;}
#banner a.pos_abs{z-index:2}
#banner .slick-current .info .txt *{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px);transition-delay:.3s;-webkit-transition-delay:.3s;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;-webkit-transform:translateX(0) scale(1);transform:translateX(0) scale(1);opacity:1;-webkit-transition:-webkit-transform 0.8s linear 0.5s,opacity 0.8s linear 0.5s;transition:transform 0.8s linear 0.5s,opacity 0.8s linear 0.5s}
#banner .more_btn a{border-radius:30px 0 30px 0px}

/* arrow_bg */
#banner .arrow_bg{width:450px;height:140px;left:auto;bottom:-140px;transform-origin:100% 100% 0;display:none}
#banner .arrow{width:50px;display:flex;justify-content:space-between;padding:0 30px;position:absolute;z-index:10;flex-direction:column;left:0%;top:65%;-webkit-transform:translateY(-50%);transform:translateY(-50%);display: none;}
#banner .arrow a{width:45px;height:45px;line-height:55px;border:1px solid #fff;border-radius:50%;display:flex;opacity:.65;flex-direction:column;justify-content:center;align-items:center;margin:5px}
#banner .arrow a.prev{-webkit-transform:rotate(180deg)}
#banner .arrow a svg{fill:#ffffff;width:13px}
#banner .arrow a:hover{opacity:1;background-color:var(--primary);border:1px solid var(--primary)}
#banner .arrow a i{color:#fff}

/* scrollBtn */
@keyframes web_menu002{0%{transform:translate(0px,0px)}
50%{transform:translate(0px,15px)}
100%{transform:translate(0px,0px)}
}.page-scroll{bottom: 45%;margin-left:0;z-index:888;text-align:center;position:absolute;left: 80px;transform: translate(-50%,25%);}
.page-scroll a{color:#fff;letter-spacing:.1em;text-decoration:none;-webkit-transition:opacity .3s;transition:opacity .3s;text-transform:uppercase;display:flex;flex-direction:column;}
.page-scroll.style01 a b{font-size: 14px;letter-spacing: 2.5px;writing-mode: vertical-rl;font-family: 'Cormorant', sans-serif;}
.page-scroll.style01 a span::after{content:"";position:absolute;top:-10px;right:0;z-index:1;width:1px;height: 70px;background: #192532;background-size:cover;background-repeat:no-repeat;animation:scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite;-webkit-animation:scrollarrow1 2.8s cubic-bezier(.86,0,.07,1) infinite}
@keyframes scrollarrow1{0%{transform:translateY(-150%)}
50%{transform:translateY(0%)}
to{transform:translateY(500%)}
}
@-webkit-keyframes scrollarrow1{0%{-webkit-transform:translateY(-150%)}
50%{-webkit-transform:translateY(0%)}
to{-webkit-transform:translateY(500%)}
}
.page-scroll.style01 a span{position:absolute;right:0;background: rgb(25 37 50 / 32%);background-size:cover;background-repeat:no-repeat;width:1px;height: 300px;top: 160%;left:50%;transform:translate(-50%,0%);overflow:hidden}

#headBan{position:relative}

.bannerArea{z-index:20;position:relative}
.bannerArea img{display:block}
.bannerArea .rightbox{transition:0.9s 0.6s;align-items: stretch;padding-left: 70px;position:relative;z-index:130;display: flex;}
.bannerArea .rightbox::before{content:"JIN SUN";color:#d3d6d9;opacity:0.15;font-size: 170px;position:absolute;top: 80%;left:0%;transform: translate(-290px,20%);width:100vw;font-family:"Playfair Display",serif}
.bannerArea .rightbox .titleBox{position:absolute;top: 0%;transform: translate(274px,-20px);z-index:20}
.bannerArea .rightbox .titleBox em{font-size: 63px;font-family: 'Cormorant', sans-serif;font-style: normal;font-weight: 600;}
.bannerArea .rightbox .stext{position:absolute;width: 250px;top: 36%;transform: translate(0,160px);left: 80px;color: #87909b;font-size: 12px;}
.bannerArea .rightbox .leftimg{transform: translate(0, -120px);}
.bannerArea .rightbox .rightimg{transform:translate(-25px,80px)}
.bannerArea .rightbox .rightimg .slick-dots{position:relative;z-index:15;bottom:auto;left:auto;padding: 0px 0 0 0;text-align:center;margin-top: 20px;}
.bannerArea .rightbox .rightimg .slick-dots li{margin-right:12px;position:relative;width:17px;height:17px}
.bannerArea .rightbox .rightimg .slick-dots li::before{content:"";width:5px;height:5px;display:block;background:#a8a6a5;border-radius:99em;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.bannerArea .rightbox .rightimg .slick-dots li::after{content:"";width:17px;height:17px;display:block;position:relative;border:none;border-radius:99em}
.bannerArea .rightbox .rightimg .slick-dots li button{display:none}
.bannerArea .rightbox .rightimg .slick-dots li.slick-active::after{border:1px solid #c4c4c4}
.bannerArea .rightbox .rightimg .slick-dots li.slick-active::before{background:#000}
.bannerArea .rightbox ul.bannerList,.bannerArea .rightbox ul.bannerPrev{width:315px;overflow:hidden;margin:0 auto}
.bannerArea .rightbox ul.bannerList li img,.bannerArea .rightbox ul.bannerPrev li img{display:block;width:100%}

@media screen and (max-width: 1650px) {
    .bannerArea .rightbox{padding-left:0px;display:block}
	.bannerArea .rightbox .titleBox{position:relative;top:auto;transform: translate(190px,-60px);}
	.bannerArea .rightbox .leftimg{transform: translate(20px,-40px);position:absolute;top:0;left:0;opacity: 1;}
	.bannerArea .rightbox .rightimg{transform: translate(60px,0px);padding-bottom:50px}
	.bannerArea .rightbox .stext{top:40%;left:20px}
	.bannerArea .rightbox::before{top:41%}
	.bannerArea .rightbox .titleBox em{font-size:46px}
	#banner .info .txt h2{font-size:80px}
}

@media screen and (max-width: 1470px) {
    #banner .img img{width:84%;height:84%}
	#banner .slick-current .info .txt p{font-size:20px}
	#banner .info .txt h3 b{font-size:63px;word-spacing:100%;max-width:100%}
	#banner .info .txt{width:58%}
	#banner .wrap{grid-template-columns:740px 1fr;height:700px;width:90%;margin:70px auto 0}
}
@media screen and (min-width:1281px){
    #banner .item{position:relative;}
}
@media screen and (max-width: 1280px) {
    #scrollBtn,#banner .photoBox{display:none}
	#banner{padding-top: 80px;height: 80vh;}
	#banner .info .txt{top: -70px;display: flex;justify-content: flex-start;width: 90%;}
	#banner .info .txt p{font-size:16px}
	#banner .info .txt h3{display: flex;flex-direction: column;align-items: flex-start;}
    #banner .info .txt h2{font-size: 80px;}
	.bannerArea::before{display:none}
	.bannerArea{flex-direction:column}
    #banner::before{width:100%}
	#banner .bnImgBox{height:80%;top:70%}
	#banner .wrap{height:100vh;width:95%;margin:auto}
    .bannerArea .rightbox,.bannerArea .rightbox::before,.bannerArea .rightbox .leftimg,	.bannerArea .rightbox .stext{display:none}
}


@media (max-width: 1180px) {
    #banner:before,#banner .arrow{display:none}
    #banner .arrow{right:0}
    #banner .info .txt h3 b{font-size: 62px;}
    #banner .info .txt p font b,#banner .info .txt p font{font-size:25px}
    #banner .wrap{grid-template-columns:540px 1fr;height:700px}
	#banner .wrap{height:40vh;width:100vw}
	#banner::after{background-position:right}
}

@media screen and (max-width: 960px) {
    #banner .info .txt h3{font-size:30px}
    #banner .info .txt p{font-size:15px}
    #banner .info .txt h2{font-size: 60px;}
	#banner .slick-current .info .txt p{font-size:16px;margin-bottom:30px}
 	#scrollBtn{display:none}
	#banner .wrap{height:40vh}
	#banner .img img{width:100%;height:70%}
}
@media (max-width:767px){
}
@media screen and (max-width: 560px) {
    #banner .info .txt{top: -50px;}
    #banner .info .txt{width: 98%;gap: 10px;}
    #banner .bnImgBox #fly-could02{top:130px}
	#banner .info .txt h2{font-size:50px}
	#banner .info .txt h3{font-size:22px}
}