/* formBox */
.formBox {max-width: 1000px;margin: 0 auto;background-color: white;box-shadow: 0 0px 10px rgba(0, 0, 0, 25%);border-radius: 10px;background:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%),url('../images/form-bg.jpg');background-position: center bottom;background-size: cover;background-repeat: no-repeat;position: relative;}
.formBox::after{content: "";display: block;position: absolute;left: 0;top: 35px;width: 35px;height: 80px;background-color: var(--c-main-01);border-radius: 3px;transform: translate(-50%);}
.formBox::before{content:"";display: block;position: absolute;left: 0;top: 140px;width: 35px;height: 35px;background-color: var(--c-minor-03);border-radius: 3px;transform: translate(-50%);}
.formBox .wordblock{padding: 50px;}
.formBox .img-area img{width: 100%;max-width: 600px;height: auto;margin:0 auto 50px;}
.formBox .btns-a{background-color: var(--c-main-01);}
.formBox .report{display: flex;flex-direction: column;}
.formBox .report img{width: 100%;height: auto;padding: 50px;}
.formBox .btns{line-height: 42px;height: 42px;font-size: 1rem;color: #fff;background: var(--c-main-01);border: none;display: inline-block;vertical-align: middle;padding: 0 25px;cursor: pointer;margin: 0 10px;border-radius: 5px;}
.formBox .agree{color: #333;text-align: center;padding-top: 20px;}
.formBox .grids .contbx .fx textarea{height: 100px !important;}
.formBox .grids .contbx .icons i{color:var(--c-minor-06)}
.formBox .grids .date-gap{position: relative;}
.formBox .grids .date-gap::after{content: "~";position: absolute;display: block;width: 40px;right: 0;top: 0;transform: translateX(100%);text-align: center;line-height: 48px;font-size: 1.25rem;color: var(--c-minor-06);}
.formBox .btn-style-01{font-size: 1.25rem;}
.formBox .btn-style-01 i{ margin-right:5px;}
.formBox .forms .grids .contbx .self{justify-content: start;padding-left: 1.6rem;}
.formBox .forms .grids .contbx .self li{padding-bottom: 10px;color: var(--c-minor-06);}

/* Contact-box */
.Contact-box{display: flex;gap: 60px;justify-content: space-between;max-height: 720px;}
.Contact-box .map{display: flex;flex-direction: column;width: 50%;}
.Contact-box .formBox-2{width: 50%;}
.Contact-box .map > img{width: 100%;height: 50%;object-fit: cover;border-radius: 5px;margin-bottom: 20px;}
.Contact-box .map .map-text{color: var(--c-minor-06);line-height: 30px;}
.Contact-box .map .map-text i {margin-right: 20px;}
.Contact-box .map .map-text a{color: var(--c-minor-06);}
.Contact-box .map .m-title{color: var(--c-main-01);font-size: 1.25rem;font-weight: 600;display: flex;align-items: center;gap: 20px;}
.Contact-box .map .m-title img{height: 35px;width: 35px;object-fit: cover;}
.Contact-box .map .m-content{margin: 20px 0;}
.Contact-box .map .m-warp{display: inline-block;}

/* SitemapBox */
.SitemapBox .h2{font-size: 1.875rem;margin-bottom: 40px;}
.SitemapBox .sitetxt{border-bottom: 1px dashed #ccc;padding: 0 0 15px 0;margin: 0 0 25px 0;color: var(--c-minor-06);}
.SitemapBox .sitetxt ul {margin: 10px 0 0 20px;}
.SitemapBox .sitetxt ul li {margin: 3px 0;}
.SitemapBox .sitetxt .major {color: var(--c-main-01);font-weight: 700;padding: 0 10px 0 0;}
.SitemapBox .sitelist {padding: 10px;background-color: #f0f0f0;margin: 0 0 10px 0;}
.SitemapBox .sitelist .atitle {font-size: 1rem;font-weight: bold;margin: 0 0 10px 0;display: block;}
.SitemapBox .sitelist .atitle a{color: var(--c-main-01);}
.SitemapBox .sitelist .girds {display: inline-block;margin: 0 25px 15px 0;vertical-align: top;}
.SitemapBox .sitelist .girds a{color: #333;}

/* DetailedBox */
.DetailedBox{max-width: 1060px;margin: 0 auto;}
.DetailedBox .date{display: block;margin: 20px 0;font-size: 1.25rem;font-weight: 600;}
.DetailedBox .DetaIled-text{color: var(--c-minor-06);}
.DetailedBox .DetaIled-text img{width: 100%;object-fit: cover;border-radius: 5px;height: auto;}
.DetailedBox .l-title{font-size: 1.5rem;margin: 30px 0;}
.DetailedBox .img-box,
.DetailedBox .img-gallery{display: flex;flex-wrap: wrap;gap: 6px;border: none;position: relative;margin-bottom: 60px;}
.DetailedBox .img-gallery{margin-bottom:0px;}
.DetailedBox .img-gallery .gallery-item{ background-size:cover; background-repeat:no-repeat; }
.DetailedBox .img-gallery .gallery-item img{ opacity:0; }
/* .DetailedBox .img-box::after{content: "點選查看更多圖片";display: block;position: absolute;right: 1px;bottom: 20px;padding: 10px;background-color: var(--c-minor-03);color: white;width: 140px;text-align: center;font-size: 1rem;border-radius: 3px;}
.DetailedBox .img-box::before{content: "";display: block;position: absolute;right: 138px;bottom: 20px;width: 0;height: 0;border:22px solid;border-color: transparent var(--c-minor-03) transparent transparent;transform: translateX(-50%);} */

.DetailedBox .img-box .img-tag-more{right:1px; bottom:20px; padding:10px; background-color:var(--c-minor-03); width:140px; text-align:center; color:white; font-size:1rem; border-radius:3px; border:0; padding:10px; box-sizing:initial;  display:block; position:absolute; }
.DetailedBox .img-box .img-tag-more::before{ left:-21px; bottom:0; width:0; height:0; border:22px solid; border-color:transparent var(--c-minor-03) transparent transparent; transform:translateX(-50%); content:""; display:block; position:absolute; }

/* Slide */
.DetailedBox .img-slide{display:none;}

/* Effect */
.DetailedBox .img-box .img-gallery a{ display:flex; }
.DetailedBox .img-box .img-gallery a img{ display:inline-block; width:100%; height: auto;aspect-ratio:20/13}
.DetailedBox .img-box .img-gallery a:nth-child(1){width: calc(50% - 3px);}
.DetailedBox .img-box .img-gallery a:nth-child(2){width: calc(50% - 3px);}
.DetailedBox .img-box .img-gallery a:nth-child(3){width: calc(33.3% - 4px);}
.DetailedBox .img-box .img-gallery a:nth-child(4){width: calc(33.3% - 4px);}
.DetailedBox .img-box .img-gallery a:nth-child(5){width: calc(33.3% - 4px);}
.DetailedBox .img-box .img-gallery a:nth-child(n+6) {display: none;}

/* Demo */
.DetailedBox .img-box>img:nth-child(1){width: calc(50% - 3px);}
.DetailedBox .img-box>img:nth-child(2){width: calc(50% - 3px);}
.DetailedBox .img-box>img:nth-child(3){width: calc(33.3% - 4px);}
.DetailedBox .img-box>img:nth-child(4){width: calc(33.3% - 4px);}
.DetailedBox .img-box>img:nth-child(5){width: calc(33.3% - 4px);}
.DetailedBox .down-box{display: flex;justify-content: space-between;align-items: center;padding: 10px 0;color: var(--c-minor-06);border-bottom: 1px solid ;padding: 20px 0;font-weight: 700;}
.DetailedBox .down-title{position: relative;padding-left: 10px;}
.DetailedBox .down-title::before{content: "";position: absolute;display: inline-block;left: 0;top: 50%;transform: translateY(-50%);height: 30px;width: 5px;background-color: var(--c-main-01);}
.DetailedBox .down-box i {font-size: 1.875rem;color: var(--c-main-01);transition: .3s;}

/* TG-box */
.TG-box{display: flex;color: var(--c-minor-06);align-items: center;}
.TG-box .h2{line-height: 48px;font-weight: 700;font-size: 2rem;margin-bottom: 40px;}
.TG-box .btn-style-01{margin-top: 20px;font-size: 1rem;font-weight: 400;line-height: normal;}
.TG-box .TG-box-img{width: 50%;}
.TG-box .TG-box-img img{object-fit: cover;object-position: center;height: 100%;width: 100%;border-radius: 5px;}
.TG-box .TG-box-text p{padding-bottom: 20px;}
.TG-box .TG-box-text .title{font-weight:700;font-size: 1.75rem; margin-bottom: 20px;color: var(--c-main-01);}
.TG-box .TG-box-text .text{font-size: 1rem;}
.TG-box .TG-box-text .text ul{padding-left: 1.25em;} 
.TG-box .TG-box-text .text li{padding: 0 0 10px 0;}
.TG-box .TG-box-text .text span{font-weight: 700;color: #333;}
.TG-box .TG-box-text .btns-more{display: inline-block;padding: 10px 20px;background: transparent;border: 1px solid var(--c-main-01);color: var(--c-main-01);text-decoration: none;border-radius: 3px;width: max-content;}
.TG-box .TG-box-text {width: 50%;padding:0 0 0 40px;display: flex;justify-content: center;flex-direction: column;line-height: 1.8;}
.I-row-reverse{flex-direction: row-reverse;}
.I-row-reverse .TG-box-text{padding:0 40px 0 0}
/* .TG-box .TG-box-text .TG-focus.TG-hidden{pointer-events:none; opacity:0;} */
.TG-box .TG-box-text .TG-focus.TG-hidden{display:none}

/* Javascript Effect - Toggle */
.TG-toggle-box{ max-height:0; overflow:hidden; position:relative; padding-bottom:10px; }
.TG-toggle-box:not(.TG-toggle-box-open):after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; z-index: 9; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(243 243 243) 100%); }
.TG-toggle-box:not(.TG-toggle-box-open) [toggle-btn-hidden]{pointer-events:none; opacity:0; display:none;}
.TG-toggle-box.TG-toggle-box-open{ max-height:unset; }

/* TG-more */
.TG-more {color: var(--c-minor-06);transition: .3s;height: 0;overflow: hidden;}
.TG-open{height: 100%;}
.TG-more p{line-height: 1.8;padding-bottom: 20px;}
.TG-more .TG-area{display: flex;row-gap: 20px;column-gap: 2%;flex-wrap: wrap;max-width: 900px;margin: 20px auto;}
.TG-more .TG-area .card{width: 32%;color: #333;background-color: white;border-radius: 5px;border: 2px solid var(--c-minor-03);}
.TG-more .TG-area .card .title{background-color: var(--c-minor-03);color: white;text-align: center;padding: 10px;font-size: 1.375rem;}
.TG-more .TG-area .card .content{padding: 20px;color: var(--c-minor-06);}
.TG-more .TG-area .card .content span{display: block;font-size: 1.0625rem;text-align: center;padding: 0 0  20px 0;}
.TG-more .TG-area .card .content ul{padding-left: 20px;}
.TG-more .TG-area .card .content li{padding-bottom: 10px;}
.TG-more .btn-style-01{margin:20px auto 0;display: block;font-size: 1rem;font-weight: 400;line-height: normal;}

/* reading */
.reading-bg{background-image: url(../images/06.jpg);background-repeat: no-repeat;background-color: rgba(0, 0, 0, .4);background-blend-mode: multiply;background-size: cover;background-position: center center;background-attachment: fixed;}
.reading {height: 500px;color: white;display: flex;align-items: center;justify-content: center;text-align: left;}
.reading p{text-align: center;}
.reading .reading-content {max-width: 800px;display: flex;flex-direction: column;align-items: center;}
.reading h3{margin-bottom: 40px;}
.reading .btn-style-01{background-color: transparent;border: 1px solid white;margin-top: 30px;}
.reading .btn-style-01:focus{outline: 3px solid var(--c-minor-03) !important;}

/* news-card */
.news-card-section {display: flex;justify-content: space-around;flex-wrap: wrap;gap: 2%;padding: 60px 20px;}
.news-card-section .nerd {background-color: #fff;width: 350px;padding: 40px 30px;border-radius: 4px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);text-align: left;transition:  0.3s ease;}
.news-card-section .icon {width: 40px;height: 40px;margin-bottom: 20px;background-color: var(--c-main-01);border-radius: 50px;display: flex;justify-content: center;align-items: center;}
.news-card-section .icon i{color: white;font-size: 1.25rem;}

/* Related */
.bg-Related{position: relative;}
.bg-Related::after{display: block;content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url(../images/bg-Related.png);background-size: contain;opacity: 0.6;z-index: -1;background-position: center;}
.Related .title{margin-bottom: 60px;padding-left: 30px;position: relative;}
.Related .title-2{text-align: right;width: max-content;margin-left: auto;}
.Related .title::before{content:"";position: absolute;left: 0;top: 50%;transform: translateY(-53%) ;height: 100px;width: 10px;background-color: var(--c-minor-03);}
.Related .title .h1{line-height: 48px;font-weight: 700;width: max-content;}
.Related .title .l-title{color: var(--c-main-01);font-size: 1.25rem;font-weight: 700;width: max-content;}
.Related .Related-box{display: flex;flex-wrap: wrap;row-gap: 20px;column-gap: 2%;}
.Related .box{display: block;width: 32%;height: 240px;background-size: contain; background-position: center;background-repeat: no-repeat;border-radius: 5px;position: relative;box-shadow: 0 0px 10px rgba(0, 0, 0, 25%);transition: .3s;overflow: hidden;}
.Related .box span{position: absolute;right: 0;bottom: 0;font-size: 1rem;color: white;padding: 15px;background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .3) 100%);width: 100%;text-align: right;}
.Related .box-c-3 span{color: #333;}
.Related .box-c-1{background-color: #057B7B;}
.Related .box-c-2{background-color: #cc5500;}
.Related .box-c-3{background-color: #ffffff;}
.Related .box-c-4{background-color: #171b28;}
.Related .box-c-5{background-color: #34495e;}

/* energy */
.energy-bg{background-image: url(../images/03.jpg);background-repeat: no-repeat;background-color: rgba(0, 0, 0, .4);background-blend-mode: multiply;background-size: cover;background-position: center center;}
.energy {height: 80dvh;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.energy .h2{line-height: 48px;font-weight: 700;font-size: 2rem;color:white;margin-bottom: 20px;text-align: center;}
.energy .l-title{font-size: 1.25rem;color: white;margin-bottom: 70px;}
.energy .energy-area{display: flex;gap: 2%;flex-wrap: wrap;}
.energy .energy-area .box{width: 32%;background-color: white;padding: 40px;border-radius: 10px;}
.energy .energy-area .box hr{margin:0 auto 20px;width: 60%;}
.energy .energy-area .box .img{height: 210px;display: flex;justify-content: center;align-items: center;overflow: hidden;}
.energy .energy-area .box .img img{width: 100%;height: auto;object-fit: cover;}
.energy .energy-area .box p{font-size: 1.5rem;color: var(--c-main-01);text-align: center;}
.energy .energy-area .box span{color:var(--c-minor-06);text-align: center;display: block;margin-top: 20px;}


/* 桌機hover */
@media screen and (min-width: 769px){
    .DetailedBox .down-box:hover i{color: var(--c-minor-03);}
    .Related .box:hover{box-shadow: 0 0px 15px #333333ab;transform: scale(1.02);}
    .reading .btn-style-01:hover{border-color: #33B8B1;color: #33B8B1;}
}

/* 平板 */
@media screen and (max-width: 1300px) and (min-width: 769px) {

/* Contact-box */
.Contact-box{max-height: 100%;gap: 40px;}
.Contact-box .map-text a{display: block;padding-left: 2.5em;}
.Contact-box .map-text span{display: none;}
.Contact-box .map .m-warp{display: block;padding-left: 2.5em;}

/* Related */
.Related .title {padding-left: 20px;}
.Related .title .h1 {font-size: 2.5rem;padding: 0;}
.Related .title .l-title {color: var(--c-main-01);font-size: 1.25rem;font-weight: 700;width: max-content;}
.Related .title::before {height: 80px;}

/* energy */
.energy .energy-area .box{padding: 30px;}
.energy .energy-area .box .img img{width: auto;height: 100%;object-fit: cover;}
.energy .energy-area .box p{font-size: 1.25rem;color: var(--c-main-01);text-align: center;}
.energy .energy-area .box span{color:var(--c-minor-06);text-align: center;display: block;margin-top: 10px;}
.energy .energy-area .box hr {margin: 0 auto;}
}



/* 手機 */
@media screen and (max-width:768px) {
/* formBox */
.formBox::after{left: 0;top: 20px;width: 20px;height: 60px;}
.formBox::before{left: 0;top: 90px;width: 20px;height: 20px;}
.formBox .wordblock {padding: 30px;}
.formBox .contbx{flex-wrap: wrap;}
.formBox .forms .wh-02{width: 50%;}
.formBox .forms .wh-08{width: 100%;}
.formBox .report img{padding: 10px;}
.formBox .radiobox{display: block;margin: 15px 0}
.formBox .grids .date-gap::after{display: none;}
.formBox .btn-style-01{font-size: 1rem;}
.formBox .img-area img {margin: 0 auto 30px;}

/* Contact-box */
.Contact-box{display: block;max-height: 100%;}
.Contact-box .map{width: 100%;margin-bottom: 30px;}
.Contact-box .formBox-2 {margin: 0;width: 100%;}
.Contact-box .map-text a{display: block;padding-left: 2.5em;}
.Contact-box .map-text span{display: none;}
.Contact-box .map .m-warp{display: block;padding-left: 2.5em;}
.Contact-box .map > img {height: 200px;}

/* SitemapBox */
.SitemapBox .h2{margin-bottom: 20px;font-size: 1.375rem;}
.SitemapBox .sitelist .girds {display: block;}

/* DetailedBox */
.DetailedBox .h2{font-size: 1.375rem;}
.DetailedBox .date{font-size: 1rem;margin: 10px 0;}
.DetailedBox .l-title {font-size: 1.375rem;}
.DetailedBox .img-box .swiper-wrapper img{ aspect-ratio:20/13}
.DetailedBox .img-box img:nth-child(1),
.DetailedBox .img-box img:nth-child(2),
.DetailedBox .img-box img:nth-child(3),
.DetailedBox .img-box img:nth-child(4),
.DetailedBox .img-box img:nth-child(5)
{width: 100%;}
.DetailedBox .img-box::after,
.DetailedBox .img-box::before,
.DetailedBox .img-box .img-tag-more{display:none;}
.DetailedBox .down-box {flex-wrap: wrap;padding: 0 0 20px 0;gap: 10px;}
.DetailedBox .down-box .down-title {width: 100%;}

/* Gallery */
.DetailedBox .img-gallery{display:none;}

/* Slide */
.DetailedBox .img-slide{ display:block; width:100%; overflow:hidden; position:relative; }
.DetailedBox .img-slide .Slide{}

/* Related */
.bg-Related{background-size: 150% auto;}
.Related .title{margin-bottom: 20px;padding-left: 10px;position: relative;}
.Related .title-2{width: max-content;margin-left: 0;}
.Related .title .h1 {line-height: 26px;font-size: 1.375rem;padding: 0;}
.Related .title .l-title {color: var(--c-main-01);font-size: 1rem;font-weight: 700;width: max-content;text-overflow: ellipsis; white-space: nowrap; overflow:hidden;width: 100%;text-align: left;}
.Related .title::before{transform: translateY(-61%) ;height: 50px;width: 5px;}
.Related .Related-box{display: flex;flex-wrap: wrap;row-gap: 9px;column-gap: 2%;}
.Related .box{width: 49%;height: 150px;background-position: center top;}
.Related .box span{width: 100%;;right: 50%;font-size: 1rem;padding: 5px;transform: translateX(50%);text-align: center;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}

/* TG-box */
.TG-box,.I-row-reverse{flex-direction: column;}
.TG-box .h2{line-height: 30px;margin-bottom: 20px;font-size: 1.375rem;}
.TG-box .TG-box .btn-style-01{margin-top: 20px;}
.TG-box .TG-box-img,.TG-box .TG-box-text{width: 100%;max-height: 100%;padding: 0;}
.TG-box .TG-box-img{margin-bottom: 20px;}
.TG-box .TG-box-img img{object-fit: cover;object-position: center;height: 100%;width: 100%;border-radius: 5px;}
.TG-box .TG-box-text p{padding-bottom: 20px;}
.TG-box .TG-box-text .title{font-weight:700;font-size: 1.75rem; margin-bottom: 20px;color: var(--c-main-01);}
.TG-box .TG-box-text .text{font-size: 1rem;}
.TG-box .TG-box-text .text span{font-weight: 700;}
.TG-box .TG-box-text .btns-more{display: inline-block;padding: 10px 20px;background: transparent;border: 1px solid var(--c-main-01);color: var(--c-main-01);text-decoration: none;border-radius: 3px;width: max-content;}
.TG-box .TG-box-text .btn-style-01{margin: 10px auto 0;}
.I-row-reverse .TG-box-text{padding:0;}

/* TG-more */
.TG-more {color: var(--c-minor-06);}
.TG-more .TG-area{flex-direction: column;margin: 0;}
.TG-more .TG-area .card{width: 100%;}
.TG-more .TG-area .card .title{font-size: 1.125rem;}
.TG-more .TG-area .card .content span{font-size: 1rem;padding: 0 0  20px 0;}
.TG-more .TG-area .card .content ul{padding-left: 20px;}

/* energy */
.energy {height: auto;display: block;}
.energy .h2{line-height: 30px;margin-bottom: 20px;font-size: 1.375rem;text-align: center;}
.energy .l-title{font-size: 1rem;margin-bottom: 30px;display: block;text-align: center;}
.energy .energy-area{gap: 20px;}
.energy .energy-area .box{width: 100%;background-color: white;padding: 20px;border-radius: 10px;}
.energy .energy-area .box .img{height: 210px;display: flex;justify-content: center;align-items: center;overflow: hidden;}
.energy .energy-area .box .img img{width: auto;height: 100%;object-fit: cover;}
.energy .energy-area .box p{font-size: 1.25rem;color: var(--c-main-01);text-align: center;}
.energy .energy-area .box span{color:var(--c-minor-06);text-align: center;display: block;margin-top: 10px;}
.energy .energy-area .box hr {margin: 0 auto;}

/* reading */
.reading{height: 400px}
.reading h3{margin-bottom: 20px;}
.reading .btn-style-01{background-color: transparent;border: 1px solid white;margin-top: 20px;}
.reading .btn-style-01:focus{outline: 3px solid var(--c-minor-03) !important;}

}

/* 表單提示 */
/* Error Effect */
.inputError{ outline : 1px solid #ffa6a6 !important; background : #fff3d2 !important; }
.txtError{ color:#eb0000; font-weight:bold; display:none; }
.grids:has(.inputError) .txtError{ display:inline-flex; }
fieldset:has([id="date_s"]) .titles .txtError{ position:absolute; }

/* 無障礙 A 補正 播放工具 */

/*深色*/
.img-slide a:focus,
.img-slide button:focus,
.img-slide button:hover{ outline-color: #FFFFFF; box-shadow: rgba( 0, 0, 0, 1) 0px 1px 4px, rgb( 0, 0, 0 ) 0px 0px 0px 6px; }

/*淺色元素:focus*/
.img-slide .pointbox .point:focus{ outline-color: #000000; box-shadow: rgba( 255, 255, 255, 1) 0px 1px 4px, rgb( 255, 255, 255 ) 0px 0px 0px 7px; }

.img-slide button{  width: 48px; height: 48px; z-index: 1; font-size: 0; background: hsla(0, 0%, 0%, 0.6); border: unset; border-radius: 5px; display: inline-flex; cursor: pointer; }
.img-slide button img{ width: 48px; height: 48px; }

.img-slide button:focus,
.img-slide button:hover{ background: hsla(0, 0%, 0%, 1); }

.img-slide [btn-previous],
.img-slide [btn-next]{ position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); }
.img-slide [btn-previous]{ left: calc( 2% + 100px ); transform: rotate( 180deg ) translateY(50%) }
.img-slide [btn-next]{ right: calc( 2% + 100px ); }

.img-slide .banner-tool{ gap: 10px; position: absolute; top: calc( 2% + 10px ); right: calc( 2% + 100px ); transform: translateY( 50% ); display: inline-flex; flex-direction: row; align-items: center; z-index: 2; }

@media screen and (max-width:768px) {
	.img-slide button,
	.img-slide button img{ width: 36px; height: 36px; }
	.img-slide [btn-previous]{ left: calc( 2% + 10px ); }
	.img-slide [btn-next]{ right: calc( 2% + 10px ); }
	.img-slide .banner-tool{ gap: 5px; top: calc( 2% + 10px ); right: calc( 2% + 10px ); transform: translateY( calc( 50% - 10px ) ); }
}