/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Noto Sans TC', sans-serif; overflow-x: hidden; position: relative;}
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { box-sizing: border-box;}

.content-Box { max-width:1440px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: clamp(16px, 1.3vw, 20px); line-height:1.6; color: #666; letter-spacing: 0; font-weight: 400; padding-top: 0px;}

.photo-fit img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;}

.photo {line-height: 0; height: 0; padding-bottom: 40%; overflow: hidden; position: relative; z-index: 1; margin-bottom: 0px;}
.imgCenter {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;}
.imgCenter img {max-height: 100%;}

.demo-section { padding-left: 5%; padding-right: 5%;}
.demo-section-2 { padding-left: 10%; padding-right: 10%;}

.font-size-18 { font-size: clamp(16px, 1.3vw, 18px);}
.font-size-20 { font-size: clamp(18px, 1.5vw, 20px);}
.font-size-21 { font-size: clamp(18px, 1.5vw, 21px);}
.font-size-22 { font-size: clamp(20px, 1.7vw, 22px);}
.font-size-24 { font-size: clamp(20px, 1.9vw, 24px);}
.font-size-26 { font-size: clamp(20px, 2.1vw, 26px);}
.font-size-28 { font-size: clamp(22px, 2.2vw, 28px);}
.font-size-30 { font-size: clamp(22px, 2.5vw, 30px);}
.font-size-32 { font-size: clamp(22px, 2.7vw, 32px);}
.font-size-36 { font-size: clamp(22px, 3.3vw, 36px); line-height: 1.3;}
.font-size-40 { font-size: clamp(24px, 3.5vw, 40px); line-height: 1.3;}
.font-size-42 { font-size: clamp(24px, 3.5vw, 42px); line-height: 1.3;}
.font-size-44 { font-size: clamp(24px, 3.5vw, 44px); line-height: 1.3;}
.font-size-48 { font-size: clamp(24px, 3.5vw, 48px); line-height: 1.3;}
.font-size-60 { font-size: clamp(28px, 4vw, 60px); line-height: 1.2;}
.font-size-70 { font-size: clamp(32px, 4.4vw, 70px); line-height: 1.1;}

.font-roboto { font-family: "Roboto", sans-serif;}

.color-blue { color: #5691ce;}
.color-green { color: #009fb4;}
.color-white { color: #fff;}

.align-center { text-align: center !important;}
.align-left { text-align: left !important;}
.align-right { text-align: right !important;}
.align-justify { text-align: justify!important;}

.weight-100 { font-weight: 100;}
.weight-300 { font-weight: 300;}
.weight-400 { font-weight: 400;}
.weight-500 { font-weight: 500;}
.weight-700 { font-weight: 700;}
.weight-900 { font-weight: 900;}

.p-layout { margin: 0; padding:0 0 calc(20px + 1.5%) 0; font-weight: 400; line-height: 1.6; font-size: clamp(16px, 1.3vw, 20px);}

.width-1200 { max-width: 1200px; margin: 0 auto;}

header {background: rgba(255,255,255,0); } 
.tree-lv1 a  {color: #fff !important; }
.header-scroll .tree-lv1 a  {color: #666 !important; }
.tree-lv1 a:hover  {color: #5691ce !important; }
.tree-lv1 .current  {color: #5691ce !important; }

.banner { position: relative; margin-bottom: 5px; line-height: 0;}

.banner-pc, .banner-mobile { position: relative;}
.banner-mobile { display: none !important;}

.banner-pto {  line-height: 0;}
.banner-pto img { width: 100%;}

.banner-slogon { position: absolute; z-index: 3; left: 0; top:50%; transform: translateY(-50%); width: 40%; padding: 0 calc(20px + 3%);}

.swiper-slide {text-align: center;display: flex;justify-content: center;align-items: center;}
.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.swiper {width: 100%;height: 300px;margin-left: auto;margin-right: auto;}
.swiper-slide {background-size: cover;background-position: center; padding: 0 0px;}
.mySwiper2 {height: 80%;width: 100%; margin-bottom: 25px;}
.swiper-slide .description, .swiper-slide .title, .swiper-slide .ban-btn {display: block;opacity: 0; transform: translateY(-50px);position: relative; letter-spacing: 0.05rem ; text-align: left;}
.swiper-slide .title { font-size: clamp(24px, 3.1vw, 48px);;/*-webkit-text-stroke: 2px #fff;*/ line-height: 1.3; margin-bottom: calc(10px + 1%); color: #b0976a;transition: all 0.5s ease 0.5s; font-weight: 500;}
.swiper-slide .description { font-size: clamp(15px, 2vw, 26px); color: #fff !important;transition: all 0.8s ease 0.8s; line-height: 1.8;margin-bottom: calc(20px + 1%);}
.swiper-slide .description > span {display: block;font-size: clamp(19px, 2.4vw, 32px);  line-height: 1.1;margin-bottom: 4px; font-weight: 500;}
.swiper-slide .ban-btn { transition: all 1.1s ease 1.1s;}
.swiper-slide-active .description,.swiper-slide-active .title,.swiper-slide-active .ban-btn  {opacity: 1;}
.swiper-slide-active .title, .swiper-slide-active .description, .swiper-slide-active .ban-btn { transform: translateY(0px);}

.swiper-next, .swiper-prev { width: 50px !important; height: 50px !important; border-radius: 100%; background: rgba(51,51,51,.8); position: absolute; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; bottom:10%;transition: all 0.4s ease-out 0s; }
.swiper-next:hover, .swiper-prev:hover { transform: scale(0.85);}
.swiper-prev { right: calc(60px + 5%);}
.swiper-next { right: 5%;}

.banner .swiper-pagination-horizontal {  text-align: center; padding: 0 5% 2% 5%;}
.banner .swiper-pagination-bullet { width: 12px; height: 12px; background: #fff;  opacity: 1; margin: 0 8px !important;}
.banner .swiper-pagination-bullet-active {  background: #5691ce;}

.btn01 { display: block; width: 218px; line-height: 40px; text-align: left; padding-left: 18px; color: #fff !important; border: 1px solid #fff; border-radius: 20px; overflow: hidden; position: relative; font-size: 17px;}
.btn01 > span { position: relative; z-index: 3;}
.btn01 > img { width: 50px; position: absolute; z-index: 3; top:50%; transform: translateY(-50%); right: 15px; height: auto;transition: all 0.4s ease-out 0s;}
.btn01:before { content: ""; position: absolute; transition: all 0.4s ease-out 0s; width: 20px; height: 20px; left: -30px; bottom: -30px; background: #5691ce; border-radius: 100%; }
.btn01:hover:before {  width: 200%; height: 270%; }
.btn01:hover > img {  right: 15px; }

.idx-video-section { position: relative; padding-top: 70px; padding-bottom: 30px;}
.idx-video-section:before { position: absolute; content: ""; height: 42px; width: 100%; top: 0; left: 0; background: #89b2dd;}

.loop2 { padding-bottom: 30px; }
.loop2 .owl-dots { }
.loop2 .owl-item {position: relative; }
.loop2 .owl-nav { position: absolute; top:calc(50% - 40px); left: 0; width: 100%; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); width: 48px !important; height: 48px !important; border-radius: 100% !important; background: #3ec5b3 !important; border: 0px solid #fff !important;}
.loop2 .owl-prev { left:15px; }
.loop2 .owl-next { right:15px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 21px; height: 21px; background-size: contain; display: block; border-width: 0; border-style: solid; border-color: #fff;}
.loop2 .owl-prev:before { content: ""; margin-left: 12px; background:url("../images/arrow-prev.png") no-repeat; }
.loop2 .owl-next:before { content: ""; margin-left: 15px;background:url("../images/arrow-next.png") no-repeat; }
.loop2 .owl-prev:hover:before, .loop2 .owl-next:hover:before { opacity: 1;}
.loop2 .owl-stage-outer {z-index: 2;}
.loop2 .owl-stage { margin: 0 auto;}
.loop2 .owl-dots { position: absolute; z-index: 100; bottom:0; width: 100%; text-align: center !important; padding: 0 20px; }
.loop2 .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 8px;  margin-right: 8px; border-radius: 100%;}
.loop2 .owl-dots .owl-dot.active {  }
.loop2 .owl-dots .owl-dot span, .loop2  .owl-dots .owl-dot span { background: #666 !important; width: 10px !important; height: 10px !important; margin: 0 auto!important;transition: all 0.4s ease-out 0s !important; border-radius: 0 !important; border-radius: 100% !important;}
.loop2 .owl-dots .owl-dot.active span/*, .loop2  .owl-dots .owl-dot:hover span*/ { background: #5691ce !important; }

.idx-video-link { display: block;}
.idx-video-link:hover .idx-video-title, .idx-video-link:hover .idx-video-title > span { color: #89b2dd;}
.idx-video-link:hover .idx-video-title > span { border-bottom:1px solid #89b2dd;}
.idx-video-link:hover .idx-video-pto .imgCenter img { transform: scale(1.05); filter: brightness(35%);}
.idx-video-pto { padding-bottom: 54%; margin-bottom: 5px;}
.idx-video-pto img { transition: transform 2.5s ease-out 0s, filter 0.7s ease-out 0s; }
.idx-video-btn { position: absolute; z-index: 4; width: 60px; top:50%; left: 50%; transform: translate(-50%, -50%);}
.idx-video-title { text-align: center; font-size: 16px;transition: all 0.4s ease-out 0s;  }
.idx-video-title > span { text-align: center; display: block; border-bottom:1px solid #666;transition: all 0.4s ease-out 0s; }

.title-type-1 { padding-bottom: 15px; text-align: center;}
.title-type-1 > div { display: inline-block; position: relative; padding: 15px 25px 22px 25px; color: #5691ce; font-weight: 500;font-size: clamp(24px, 3.5vw, 44px); line-height: 1;}
.title-type-1 > div > span { display: block; position: absolute; width: 100%; height: 100%;top: 0; left: 0;}
.title-type-1 > div > span:nth-of-type(1):before, .title-type-1 > div > span:nth-of-type(1):after, .title-type-1 > div > span:nth-of-type(2):before, .title-type-1 > div > span:nth-of-type(2):after { content: ""; position: absolute; display: inline-block;width: 25px; height: 15px; border-style: solid; border-color: #5691ce;}
.title-type-1 > div > span:nth-of-type(1):before { top: 0; left: 0; border-width: 1px 0 0 1px;}
.title-type-1 > div > span:nth-of-type(1):after { bottom: 0; left: 0; border-width: 0 0 1px 1px;}
.title-type-1 > div > span:nth-of-type(2):before { top: 0; right: 0; border-width: 1px 1px 0 0;}
.title-type-1 > div > span:nth-of-type(2):after { bottom: 0; right: 0; border-width: 0 1px 1px 0;}
.title-type-1-w > div { color: #fff;text-shadow: 2px 2px 8px #000}
.title-type-1-w > div > span:nth-of-type(1):before, .title-type-1-w > div > span:nth-of-type(1):after, .title-type-1-w > div > span:nth-of-type(2):before, .title-type-1-w > div > span:nth-of-type(2):after { border-color: #fff;}

.idx-application-box { margin-bottom: 42px; background: linear-gradient(90deg, rgba(221,233,245,0) 0%, rgba(221,233,245,1) 13%, rgba(221,233,245,1) 87%, rgba(221,233,245,0) 100%);}
.idx-application-list { display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-application-list > div { width: 16.66%; padding: calc(15px + 1%); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; /*height: 142px;*/}
.idx-application-list > div:hover { background: #fff;}
.idx-application-list > div:hover > img { display: none;}
.idx-application-list > div:hover > div { display: block;}
.idx-application-list > div > img { width: 106px; display: block;}
.idx-application-list > div > div { color: #5691ce; font-weight: 500;font-size: clamp(19px, 2.2vw, 30px); line-height: 1.1; display: none; text-align: center;}

@keyframes app-icon-animate {
  from {
    opacity: 0;
    transform: rotateX(-5deg) perspective(100px) rotateX(-5deg) translateY(70px);
  }

  100% {
    opacity: 1;
    transform: rotateX(0deg) perspective(100px) rotateX(0deg) translateY(0px);
  }
}

.app-icon-animate {
  animation-name: app-icon-animate; transform-origin: 50% 10px;
}

.idx-application-section-2 { padding-bottom: calc(20px + 2%);}
.idx-application-section-2 > div { margin-bottom: calc(20px + 2%);}
.idx-application-box2 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; position: relative;}
.idx-application-box2:hover .idx-app-pto img { filter: brightness(50%);}
.idx-application-box2:hover .idx-app-pto-title{  opacity: 1;}
.idx-application-box2:hover .idx-app-box {  display: none;}
.idx-application-box2:hover .idx-app-box-2 {  display: block;}
.idx-application-box2:hover .idx-application-box2-line img:nth-of-type(1) {  display: none;}
.idx-application-box2:hover .idx-application-box2-line img:nth-of-type(2) {  display: block;}
.idx-application-box2 > div:nth-of-type(1) { display: block; width: 33%;}
.idx-application-box2 > div:nth-of-type(2) { width: 67%; padding-left: 85px;}
.idx-application-box2-line { position: absolute; z-index: 5; top:50%; transform: translateY(-50%); left: 24%;}
.idx-application-box2-line img { width: 29%;}
.idx-application-box2-line img:nth-of-type(2) { display: none;}

.idx-app-pto { padding-bottom: 55%; position: relative; display: block;}
.idx-app-pto img { transition: all 0.4s ease-out 0s;}
.idx-app-pto-title { position: absolute; z-index: 4; top:50%; transform: translateY(-50%); width: 100%; left: 0;display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center;transition: all 0.4s ease-out 0s; opacity: 0;}
.idx-app-pto-title img { width: 85px; filter: brightness(100) !important;}
.idx-app-pto-title span { color: #fff;font-size: clamp(21px, 3vw, 42px); line-height: 1; padding-top: 10px; font-weight: 500;}

.idx-app-box { display: inline-block; position: relative; padding: 30px 45px; }
.idx-app-box-2 { display: none; padding: 20px 45px; width: 100%;}
.idx-app-box > span { display: block; position: absolute; width: 100%; height: 100%;top: 0; left: 0;}
.idx-app-box > span:nth-of-type(1):before, .idx-app-box > span:nth-of-type(1):after, .idx-app-box > span:nth-of-type(2):before, .idx-app-box > span:nth-of-type(2):after { content: ""; position: absolute; display: inline-block;width: 120px; height: 50px; border-style: solid; border-color: #b2b2b2;}
.idx-app-box-2 > span:nth-of-type(1):before, .idx-app-box-2 > span:nth-of-type(1):after, .idx-app-box-2 > span:nth-of-type(2):before, .idx-app-box-2 > span:nth-of-type(2):after { border-color: #5691ce;}
.idx-app-box > span:nth-of-type(1):before { top: 0; left: 0; border-width: 1px 0 0 1px;}
.idx-app-box > span:nth-of-type(1):after { bottom: 0; left: 0; border-width: 0 0 1px 1px;}
.idx-app-box > span:nth-of-type(2):before { top: 0; right: 0; border-width: 1px 1px 0 0;}
.idx-app-box > span:nth-of-type(2):after { bottom: 0; right: 0; border-width: 0 1px 1px 0;}

.idx-app-plus { position: absolute; right: 0; top:50%; transform: translateY(-50%);}
.idx-app-plus img { width: 14px;}
.idx-app-btn { position: absolute; z-index: 5; right: -80px; top:50%; transform: translateY(-50%); width: 160px; line-height: 32px; border-radius: 16px; text-align: center;background: #5691ce; color: #fff !important; font-size: 17px; display: block;}
.idx-app-btn:hover { transform: translateY(-50%) scale(0.9);}

.idx-app-data-1 { max-width: 700px;}
.idx-app-data-1-title { color: #5691ce; font-weight: 500;font-size: clamp(22px, 3vw, 42px); line-height: 1.1; padding-bottom: 10px;}


.idx-app-box-2-list { display: flex; flex-direction: row;; flex-wrap: wrap;}
.idx-app-box-2-list > a { display: block; width: 33.33%;}

.loop3 { padding-bottom: 30px; }
.loop3 .owl-dots { }
.loop3 .owl-item {position: relative; }
.loop3 .owl-nav { position: absolute; top:calc(50% - 40px); left: 0; width: 100%; z-index: 11;}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); width: 48px !important; height: 48px !important; border-radius: 100% !important; background: #3ec5b3 !important; border: 0px solid #fff !important;}
.loop3 .owl-prev { left:15px; }
.loop3 .owl-next { right:15px;}
.loop3 .owl-prev:before, .loop3 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 21px; height: 21px; background-size: contain; display: block; border-width: 0; border-style: solid; border-color: #fff;}
.loop3 .owl-prev:before { content: ""; margin-left: 12px; background:url("../images/arrow-prev.png") no-repeat; }
.loop3 .owl-next:before { content: ""; margin-left: 15px;background:url("../images/arrow-next.png") no-repeat; }
.loop3 .owl-prev:hover:before, .loop3 .owl-next:hover:before { opacity: 1;}
.loop3 .owl-stage-outer {z-index: 2;}
.loop3 .owl-dots { position: absolute; z-index: 100; bottom:0; width: 100%; text-align: center !important; padding: 0 20px; }
.loop3 .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 8px;  margin-right: 8px; border-radius: 100%;}
.loop3 .owl-dots .owl-dot.active {  }
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #666 !important; width: 10px !important; height: 10px !important; margin: 0 auto!important;transition: all 0.4s ease-out 0s !important; border-radius: 0 !important; border-radius: 100% !important;}
.loop3 .owl-dots .owl-dot.active span/*, .loop3  .owl-dots .owl-dot:hover span*/ { background: #5691ce !important; }

.idx-app-link { display: block;}
.idx-app-link:hover .idx-app-pto-2 img { transform: scale(0.96);}
.idx-app-pto-2 { padding-bottom: 56%; position: relative; margin-bottom: 10px;}
.idx-app-pto-2 img { transition: all 0.4s ease-out 0s; width: auto !important;}
.idx-app-pto-2-name { text-align: center; }
.idx-app-pto-2-name span {  position: relative; padding-left: 10px; color: #666 !important; display: inline-block;}
.idx-app-pto-2-name span:before { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 100%; background: #666; left: 0; top:15px;}

.idx-auto-banner { background: url("../images/idx-auto-bg.jpg") no-repeat center center / cover; height: 365px; position: relative; margin-bottom: 20px;}
.idx-mold-banner { background: url("../images/idx-mold-bg.jpg") no-repeat center center / cover; }
.idx-auto-banner-content { position: absolute; left: 50%; transform: translateX(-50%); top: 0; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); padding: 25px; display: flex;  flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center;}
.idx-auto-banner-content > div:nth-of-type(1) { color:#fff; font-weight: 500; font-size: clamp(32px, 4.4vw, 70px); text-shadow: 2px 2px 8px #000; line-height: 1.1; padding-bottom: 20px; text-align: center;}

.loop4 { padding-bottom: calc(10px + 1%); padding-right: 5%; padding-left: 5%; }
.loop4 .owl-dots { display: none !important;}
.loop4 .owl-item {position: relative; }
.loop4 .owl-nav { position: absolute; top:calc(50% - 40px); left: 0; width: 100%; z-index: 11;}
.loop4 .owl-prev, .loop4 .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); width: 40px !important; height: 40px !important; border-radius: 0% !important; background: transparent !important; border: 0px solid #fff !important;}
.loop4 .owl-prev { left:2%; }
.loop4 .owl-next { right:2%;}
.loop4 .owl-prev:before, .loop4 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 40px; height: 40px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #b2b2b2;}
.loop4 .owl-prev:before { content: ""; transform: rotate(-135deg);}
.loop4 .owl-next:before { content: ""; transform: rotate(45deg);}
.loop4 .owl-prev:hover:before, .loop4 .owl-next:hover:before { opacity: 0.8;}
.loop4 .owl-stage-outer {z-index: 2;}
.loop4 .owl-dots { position: absolute; z-index: 100; bottom:0; width: 100%; text-align: center !important; padding: 0 20px; }
.loop4 .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 8px;  margin-right: 8px; border-radius: 100%;}
.loop4 .owl-dots .owl-dot.active {  }
.loop4 .owl-dots .owl-dot span, .loop4  .owl-dots .owl-dot span { background: #666 !important; width: 10px !important; height: 10px !important; margin: 0 auto!important;transition: all 0.4s ease-out 0s !important; border-radius: 0 !important; border-radius: 100% !important;}
.loop4 .owl-dots .owl-dot.active span/*, .loop4  .owl-dots .owl-dot:hover span*/ { background: #5691ce !important; }

.idx-auto-pto { padding-bottom: 100%;}
.idx-auto-pto img { width: auto !important;}
.idx-auto-name { text-align: center; color: #666;}
.idx-auto-content { padding-bottom: calc(20px + 3%);}
.idx-auto-content p { padding-bottom: 20px;}

.btn02 { width: 145px; display: block; line-height: 1; padding: 10px 10px 12px 10px;; border-radius: 20px; text-align: center;background: #5691ce; color: #fff !important; font-size: 17px; margin: 0 auto ; font-weight: 500;}
.btn02:hover { transform: scale(0.9);}

.idx-bottom-box { padding-bottom: calc(20px + 4%);}
.idx-bottom-section-1 { border-bottom: 1px solid #b2b2b2; padding-bottom: 10px; margin-bottom: 35px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;}
.idx-bottom-section-1 > a {display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end; line-height: 1; padding: 0 2.5vw; font-weight: 500;font-size: clamp(16px, 1.9vw, 24px);}
.idx-bottom-section-1 > a:hover img {filter: none; opacity: 1;}
.idx-bottom-section-1 > a:hover { color: #5691ce;}
.idx-bottom-section-1 > a img {display: inline-block; padding-right: 4px; filter: brightness(0%); width: 108px; opacity: 0.6;transition: all 0.4s ease-out 0s;}
.idx-bottom-section-1 > a:nth-of-type(1) {border-right: 1px solid #606060;}

.idx-bottom-section-2 { margin-right: -3px; display: flex; flex-direction: row; flex-wrap: wrap;}
.idx-bottom-section-2 > a { display: block; position: relative; width: calc(25% - 3px); margin-right: 3px; overflow: hidden;}
.idx-bottom-section-2 > a:hover img { transform: scale(1.05); filter: brightness(60%);}
.idx-bottom-section-2 > a > img { object-fit: cover; width: 100%; height: 100%;transition: transform 1.8s ease-out 0s, filter 0.8s ease-out 0s; }
.idx-bottom-section-2-name { position: absolute; z-index: 4; top:50%; left: 0%; width: 100%; transform: translateY(-50%); font-weight: 500; color: #fff;font-size: clamp(20px, 2vw, 30px); line-height: 1.2; text-align: center; padding: 0 5%;}

@media only screen and (max-width: 1920x) {
	
	
}

@media only screen and (max-width: 1365px) {
	.idx-app-btn { position: relative; right: auto; top:auto; transform: none; margin:10px auto 0 auto;}
	.idx-app-btn:hover { transform: scale(0.9);}
}

@media only screen and (max-width: 1279px) {
	.demo-section-2 { padding-left: 5%; padding-right: 5%;}
	
	header { background: rgba(255,255,255,0.9);}
	.tree-lv1 a  {color: #666 !important; }
	
	#content { padding-top: 95px;}
	
	.banner-pc { display: none !important}
	.banner-mobile { display: block !important; }
	.banner-slogon { width: 60%;}
	
	.swiper-slide .title { font-weight: 400; text-align: center; text-shadow: 2px 2px 3px #333, -2px -2px 3px #333, 2px -2px 3px #333, -2px 2px 3px #333;}
	.swiper-slide .description { text-align: center;text-shadow: 2px 2px 3px #333, -2px -2px 3px #333, 2px -2px 3px #333, -2px 2px 3px #333; margin-bottom: 15px;}
	.swiper-slide .ban-btn { transition: all 0.8s ease 0.8s;}
	.swiper-slide .ban-btn .btn01 { margin: 0 auto;}
	.banner-slogon { width: 100%;}
	
	.loop4 .owl-prev, .loop4 .owl-next { transform: scale(0.65);}
	
	.idx-bottom-section-1 { margin-bottom: 15px;}
}

@media only screen and (max-width: 980px) {
	.swiper-next, .swiper-prev { transform: scale(0.6); bottom: 5%;}
	.swiper-next:hover, .swiper-prev:hover { transform: scale(0.5);}
	.swiper-prev { right: calc(40px + 5%);}
	
	.btn01 { width: 160px; }
	.btn01 > span { font-size: 14px;}
	.btn01 > img { width: 30px;}
	
	.banner { margin-bottom: 0;}
	
	.idx-video-section {  padding-top: 30px; }
	.idx-video-section:before { height: 10px;}
	
	.idx-application-box2 > div:nth-of-type(1) { width: 100%; margin-bottom: 10px;}
	.idx-application-box2 > div:nth-of-type(2) { width: 100%; padding-left: 0px;}
	.idx-application-box2-line { display: none;}
	.idx-app-box { padding: 20px;}
	
	.idx-auto-banner { height: 240px;}
	
	.idx-bottom-section-2 > a { width: calc(50% - 3px); margin-bottom: 3px;}
	
	.idx-app-plus { right: 45%; top:auto; bottom: -10px; transform: translateY(0) translateX(-50%);}
}
@media only screen and (max-width: 768px) {
	.idx-application-list > div { width: 33.33%;}
	
}
@media only screen and (max-width: 640px) {
	.swiper-slide .title  { display: none;}
	.swiper-slide .description { transition: all 0.4s ease 0.4s; }
	.swiper-slide .ban-btn { transition: all 0.6s ease 0.6;}
	
	.idx-auto-banner-content { width: 60%;}
}
@media only screen and (max-width: 570px) {
	.idx-bottom-section-1 > a img { width: 70px;}
}

@media only screen and (max-width: 414px) {
	/*.idx-application-list > div { width: 50%;}*/
	
	.idx-app-box-2-list > a {  width: 50%;}
	.idx-app-box-2-list > a:last-child {  display:none;}
	
	.idx-auto-banner-content { width: 80%;}
}

@media only screen and (max-width: 320px) {
	
	
}