#bannerBox { position: relative; }

/* banner */
#banner {padding: 88px 0 0;width: 100%;z-index: 3;}
#banner .item {aspect-ratio: 21/9;}
#banner .main-slider {}
#banner .item .clip >* { min-width: 100%; width: 100%; }
#banner .item .clip .bgBox {}
#banner .item .clip iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
#banner .item .clip video { overflow: hidden; position: absolute; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
#banner .item .info >div {margin: auto;width: calc(85% - 60px);}
#banner .item .info >div >div{width: min(100%, 800px);}
#banner .item .info >div .txt p{width: min(100%, 580px);}
#banner .item .info >div .txt >* {max-width: calc(100% - 30px);font-size: 18px;letter-spacing: 1px;color: var(--secondary);}
#banner .item .info >div .txt .h3 {margin-bottom: 15px;line-height: 135%;word-spacing: 100vw;font-size: max(4 * (1vw + 1vh) / 2, 12px);font-weight: 600;letter-spacing: 2px;}
#banner .item .info >div .btnbox{margin-top: 45px;display: flex;gap: 20px;}
#banner .item .info >div .btnbox a:last-child{background: var(--secondary);}
#banner .item .info >div .btnbox a:hover:last-child .more_btn_text{color:var(--secondary);}
#banner .item .info >div .btnbox a:last-child svg{fill:var(--secondary);}

.PriceLinkList {display: grid;max-width: 45%;width: 100%;border-radius: 0;position: absolute;bottom: 0;z-index: 992;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0 -20px;padding: 0 0px 0px 10%;background: white;justify-content: flex-end;grid-template-columns: repeat(4, 1fr);gap: 15px;border-radius: 0 80px 0 0;overflow: hidden;}
.PriceLinkList .PriceLinkItem {position: relative;display: grid;align-items: start;grid-template-columns: 20px 1fr;gap: 10px;}
.PriceLinkList .PriceLinkItem:last-child {display: block;background: var(--primary);}
.PriceLinkList .PriceLinkItem:last-child:hover{background:var(--secondary)}
.PriceLinkList .PriceLinkItem:last-child a{display:block;padding: 20px 25px;vertical-align: unset;line-height: 1;}
.PriceLinkList .PriceLinkItem:last-child a *{color:white;letter-spacing: .5px;font-size: 14px;line-height: 1.3;}
.PriceLinkList .PriceLinkItem a.Pricemore { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 100; }
.PriceLinkList .PriceLinkItem p.more {background-color: #962323;}
.PriceLinkList .PriceLinkItem p.more a { border: 0px #bdad84 solid; width: 100%; display: inline-block; text-align: center; padding: 14px 0 6px 0; }
.PriceLinkList .PriceLinkItem p.more a font { color: #fff; }
.PriceLinkList .PriceLinkItem p.more a:hover font { letter-spacing: 4.5px; }
.PriceLinkList .PriceLinkItem .info .h3 {position: relative;color: var(--black);z-index: 10;font-size: 16px;letter-spacing: 0;line-height: 1;margin-bottom: 9px;}
.PriceLinkList .PriceLinkItem .info article{letter-spacing: 1px;font-size: 13px;color: var(--info);line-height: 1;}
.PriceLinkList .PriceLinkItem .info span { content: ""; width: 30px; height: 30px; display: block; position: absolute; top: 50%; right: 30px; z-index: 1; -webkit-transform: translateY(-10px); transform: translateY(-15px); }
.PriceLinkList .PriceLinkItem .bgDecoBox { width: 100%; height: 100%; display: flex; position: absolute; top: 50%; left: 50%; bottom: 0; right: auto; -webkit-transform: translate3d(-50%, -50%, 0); -moz-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); opacity: 0; border-radius: 20px 20px 0 0; display: flex; -webkit-box-pack: center; justify-content: center; display: none; }
.PriceLinkList .PriceLinkItem .bgDecoBox .ellipsis { color: #fff; font-size: 24px; }
.PriceLinkList .PriceLinkItem:hover .info h3::before { background-color: rgb(255 255 255 / 56%); width: 0; right: 0; }

@media screen and (max-width: 1440px){
    .PriceLinkList{max-width: 60%;}
}
@media screen and (max-width: 1280px){
	#banner { padding-top: 68px; }
	#banner .item { height: 100vh; }
    #banner .item .clip video{width:auto;height:100%}
    #banner .item .info >div{width: calc(90% - 30px);}
}
@media screen and (max-width: 1024px){
	#banner .item { height: 75vh; }
    .PriceLinkList{position:relative;max-width: 80%;border-radius: 0 0 70px 0;}
}
@media screen and (max-width: 980px){
	#banner .item {height: 55vh;}
    #banner .item .info >div{transform: scale(.75);transform-origin: left center;margin-left: 6%;}
    .PriceLinkList{max-width: 100%;border-radius: 0;margin: 0;padding: 0;grid-template-columns: repeat(3, 1fr);gap: 0;}
    .PriceLinkList .PriceLinkItem:last-child{grid-column: 1 / 4;padding: 0;}
    .PriceLinkList .PriceLinkItem:last-child a{text-align:center;}
    .PriceLinkList .PriceLinkItem{padding:30px}
}
@media screen and (max-width: 640px){
    .PriceLinkList .PriceLinkItem .info article{line-height:1.5;letter-spacing: 0;}
    .PriceLinkList .PriceLinkItem{padding: 30px 10px;}
    #banner .item .info >div >div{width: 80%;}
    #banner .item .info >div{margin-bottom: 0%;}
    #banner .item .info >div .btnbox{margin-top: 10px;display: flex;flex-direction: column;align-items: flex-start;gap: 5px;transform: scale(.85);transform-origin: left top;}
	#banner .item {height: 40vh;}
#banner .item .info >div .txt p{display:none;}
}