/* 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:1300px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: clamp(16px, 1.5vw, 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-14 { font-size: 14px;}
.font-size-18 { font-size: clamp(16px, 1.3vw, 18px);}
.font-size-20 { font-size: clamp(16px, 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.3vw, 30px);}
.font-size-32 { font-size: clamp(22px, 2.5vw, 32px);}
.font-size-36 { font-size: clamp(22px, 3.1vw, 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-50 { font-size: clamp(24px, 3.5vw, 50px); 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-blue-2 { color: #5582c1;}
.color-blue-3 { color: #89b2dd;}
.color-green { color: #009fb4;}
.color-white { color: #fff;}
.color-black { color: #000;}
.color-gray { color: #484848;}
.color-yellow { color: #a58e5e;}

.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 !important;}
.weight-300 { font-weight: 300 !important;}
.weight-400 { font-weight: 400 !important;}
.weight-500 { font-weight: 500 !important;}
.weight-700 { font-weight: 700 !important;}
.weight-900 { font-weight: 900 !important;}

.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-1400 { max-width: 1400px; margin: 0 auto;}
.width-1200 { max-width: 1200px; margin: 0 auto;}
.width-1080 { max-width: 1080px; margin: 0 auto;}
.width-980 { max-width: 980px; margin: 0 auto;}
.width-50-layout { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.width-50-layout > div { width: 49%; padding-bottom: 25px;}

.bg-orange { background: #ef5a24 !important;}
.bg-blue { background: #89b2dd !important;}
.bg-blue-2 { background: #1e93d1 !important;}
.bg-blue-3 { background: #5582c1 !important;}
.bg-gray { background: #eaeaea !important;}
.bg-white { background: #fff !important;}

.hr-type { border-top-color: #868686 !important; margin:5px 0 15px 0 !important;}

.layout-wrap { display: flex;flex-direction: row; flex-wrap: wrap;}
.layout-nowrap { display: flex;flex-direction: row; flex-wrap: nowrap;}

.no-border { border-width: 0 !important;}

.pto-pc { display: block;}
.pto-mobile { display: none;}

.pto-type-1 { margin-bottom: 25px;}

.banner { position: relative;}
.banner-title { position: absolute; z-index: 3; top:60%; left: 0; width: 100%; padding: 0 10%; transform: translateY(-50%); color: #fff; font-weight: 700; line-height: 1; font-size: clamp(24px, 3.5vw, 50px);}

.banner-pc, .banner-mobile { position: relative;object-fit: cover; width: 100%; height: 100%; object-position: 20% 50%;}
.banner-mobile { display: none !important;}


.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; }

.title-type-1 { padding-bottom: 15px; text-align: center; margin-bottom: 15px; margin-top: 0; font-family: 'Noto Sans TC', sans-serif;}
.title-type-1 > div { display: inline-block; position: relative; padding: 15px 25px 22px 25px; color: #5691ce; font-weight: 500;font-size: clamp(22px, 3.1vw, 36px); 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;}

.title-type-3 { padding-bottom: 10px;}

.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);}

#path { padding-top: 10px; padding-bottom: 10px; background: #89b2dd; margin-bottom: calc(20px + 1.5%);}
#path ul { margin: 0; padding: 0; position: relative; text-align: left; line-height: 1.1;}
#path li { display: inline-block; vertical-align: top; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.1; color: #fff;}
#path li:after { content:">"; display: inline-block; vertical-align: top; padding: 0 0 0 4px;}
#path li:last-child { pointer-events: none;}
#path li:last-child:after { display: none;}
#path li a { color: #fff; }
#path li a:hover{ color: #fff; text-decoration: underline;}
#path li:last-child a { pointer-events:none;}

.sub-menu-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-bottom:calc(20px + 1%);}
.sub-menu-box > a { display: inline-block; margin: 0 1.2vw 10px 1.2vw; line-height: 1.4;font-size: clamp(18px, 2.2vw, 27px); padding-bottom: 8px; padding-left: 6px; padding-right: 6px; position: relative;}
.sub-menu-box > a:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #89b2dd; }
.sub-menu-box > a:hover:after { background: #5582c1; }
.sub-menu-box > a.current:after { background: #5582c1; }
.sub-menu-box > a:hover { color: #5582c1;}
.sub-menu-box > a.current { color: #5582c1;}

.layout-box-1 {display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.layout-box-1 > div:nth-of-type(1) { width: 255px; position: sticky; top:100px;}
.layout-box-1 > div:nth-of-type(2) { width: calc(100% - 255px); padding-left: 25px;}

.aside-title, .aside-title-2 { font-weight: 500; color: #fff !important; background: #5582c1; text-align: center; line-height: 1.1; padding: 5px !important; display: block;}

/*technology*/
.faq-list {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;  padding-bottom: calc(30px + 4%);}
.faq-list:hover .faq-title-1 > div:nth-of-type(1), .faq-title-1.active > div:nth-of-type(1) {background: #a58e5e;}
.faq-list:hover .faq-title-1 > div:nth-of-type(2), .faq-title-1.active > div:nth-of-type(2) {color: #a58e5e;}
.faq-list:hover .faq-btn > div:nth-of-type(1) > div {color: #a58e5e;}
.faq-list:hover .faq-btn > div:nth-of-type(1) > span {background: #a58e5e;}
.faq-list:hover .faq-btn > div:nth-of-type(1) > span:before, .faq-list:hover .faq-btn > div:nth-of-type(1) > span:after {background: #fff;}
.faq-list:hover .faq-q-over {opacity: 1;}
.faq-list > div:nth-of-type(1) {width: 100%; position: relative;}
.faq-list > div:nth-of-type(2) {width: 28%; position: relative; display: none}

.faq-title-1 { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; padding-bottom: 10px;}
.faq-title-1.active { margin-bottom: 15px;}
.faq-title-1 > div:nth-of-type(1) { width: 78px; text-align: center; background: #89b2dd; padding: 0 16px; height: 25px;clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0% 100%); font-weight: 700;font-size: clamp(20px, 1.7vw, 22px); color:#fff; line-height: 1;}
.faq-title-1 > div:nth-of-type(2) { width:calc(100% - 78px); padding-left: 10px; color: #333; font-weight: 500;font-size: clamp(20px, 1.7vw, 22px); line-height: 1.1;}

.faq-q-content { padding-left: 16px;}
.faq-title-2 { position: relative; padding-left: 25px; padding-bottom: 40px;}
.faq-title-2:before { position: absolute; content: "Q:";left: 0; top: 0;}

.faq-btn { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; position: absolute; left: 16px; bottom: -13px; width: calc(100% - 15px);}
.faq-btn > div:nth-of-type(1) { width: 122px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.faq-btn > div:nth-of-type(1) > div { padding-right: 5px;font-size: clamp(16px, 1.3vw, 18px);}
.faq-btn > div:nth-of-type(1) > span { display: block; width: 20px;height: 20px; border-radius: 100%; position: relative; background: #fff;}
.faq-btn > div:nth-of-type(1) > span:before, .faq-btn > div:nth-of-type(1) > span:after { content: ""; position: absolute; width: 10px; height: 1px; background: #666; top:50%; left: 50%; transform: translate(-50%, -50%);}
.faq-btn > div:nth-of-type(1) > span:after { transform: translate(-50%, -50%) rotate(90deg);}
.faq-btn > div:nth-of-type(2) { width: calc(100% - 122px); height: 1px; background: #c9c9c9;}

.faq-q-pto { padding-bottom: 60%;}
.faq-q-over { position: absolute; z-index: 3; width: 100%; height: 100%; top: 0; left: 0; background: rgba(77,77,77,.7); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; opacity: 0;}
.faq-q-over img { width: 26px;}

#page { text-align: center; padding:0 0 calc(20px + 3.5%) 0;}
#page a { font-size: 16px; color: #959595; padding: 10px; margin: 0 5px; display: inline-block;}
#page a:hover, #page a.current { color: #1e93d1; border-bottom: 1px solid #1e93d1;}
.page-prev, .page-next { width: 12px !important; height: 12px !important; line-height: inherit !important; border-radius: 0 !important; border-top:1px solid #000; border-right: 1px solid #000; margin: 0 20px;}
.page-prev:hover, .page-next:hover { background: none !important;}
.page-prev { transform: rotate(-135deg);}
.page-next { transform: rotate(45deg);}

/*technology-detail*/
.technology-detail-q { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; margin-bottom: 25px;}
.technology-detail-q:after { content: ""; position: absolute; width: calc(100% - 20px); height: 100%; top: 0; right: 0; background: #efefef; z-index: -1;}
.technology-detail-q > div:nth-of-type(1) { width: 38px;}
.technology-detail-q > div:nth-of-type(2) { width: calc(100% - 38px); padding: 15px 35px 5px 35px; line-height: 1.4;}

.technology-detail-video { max-width: 740px; margin: 0 auto 35px auto; border-radius: 20px; overflow: hidden;}
.video-container {position: relative;padding-bottom: 51.5%;padding-top: 30px;height: 0;overflow: hidden;}
.video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%; border-width: 0;}

/*ecatalog*/
.ecatalog-section-1 > div:nth-of-type(1) { width: 224px;}
.ecatalog-section-1 > div:nth-of-type(2) { width: calc(100% - 224px);}

.ecatalog-menu { border-left: 1px solid #b4b4b4;}
.ecatalog-menu > a { position: relative; padding: 15px 0 15px 24px; line-height: 1.1; display: block;}
.ecatalog-menu > a:hover { color: #5582c1;}
.ecatalog-menu > a:before { position: absolute; content: ""; width: 8px; height: 100%; top: 0; left: -4px; border-radius: 4px; background: transparent;}
.ecatalog-menu > a:hover:before { background: #5582c1;}

.title-type-2 { position: relative; margin-bottom: calc(20px + 2.5%); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.title-type-2:after { position: absolute; content: ""; width: 10px; height: 10px; background: #89b2dd;clip-path: polygon(0% 0%, 100% 0%, 50% 100%); bottom: -20px; left: 50%; transform: translateX(-50%);}
.title-type-2 > div:nth-of-type(1), .title-type-2 > div:nth-of-type(3) { width: 100%; height: 1px; background: #89b2dd;}
.title-type-2 > div:nth-of-type(2) { white-space: nowrap; padding: 0 15px; color: #89b2dd; font-weight: 500; line-height: 1.1; font-size: clamp(22px, 2.2vw, 28px);}

.ecatalog-list { margin-right: -45px; display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 1%);}
.ecatalog-list > a { width: calc(25% - 45px); margin: 0 45px calc(20px + 2.5%) 0;}
.ecatalog-list > a:hover .imgCenter img { filter: brightness(40%);}
.ecatalog-list > a:hover .ecatalog-list-pdf { opacity: 1;}
.ecatalog-list > a:hover .ecatalog-list-date:after { background: #a58e5e;}
.ecatalog-list > a:hover .ecatalog-list-date span { background: #a58e5e;}
.ecatalog-list > a:hover .ecatalog-list-name { color: #a58e5e;}
.ecatalog-list-pto { padding-bottom: 106%; position: relative; margin-bottom: 15px;}
.ecatalog-list-pto img { transition: all 0.4s ease-out 0s; }
.ecatalog-list-pdf { width: 87px; position: absolute; z-index: 3; top:50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;}
.ecatalog-list-date { position: relative; margin-bottom: 10px; text-align: center;}
.ecatalog-list-date:after { position: absolute; content: ""; height: 2px; width: 100%; background: #e5e5e5; left: 0; top: 50%; transform: translateY(-50%);transition: all 0.4s ease-out 0s; }
.ecatalog-list-date span { position: relative; z-index: 3; color: #fff; font-weight: 500; font-size: 16px; line-height: 1; padding: 2px 10px; background: #e6e6e6;transition: all 0.4s ease-out 0s; }
.ecatalog-list-name {  text-align: center;color: #89b2dd; line-height: 1.2;transition: all 0.4s ease-out 0s; }

/*news*/
.news-section { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 15px;}
.news-section > a { width: calc(50% - 32px); margin-bottom: 35px; display: block; border-bottom: 1px solid #cacaca; padding-bottom: 15px;}
.news-section > a:hover .news-section-over { opacity: 1;}
.news-section > a:hover .news-section-over-icon { opacity: 1;}
.news-section > a:hover .news-section-title { color: #a58e5e;}
.news-section > a:hover .news-section-btn { border: 1px solid #a58e5e; color: #a58e5e;}
.news-section > a:hover .news-section-btn > img:nth-of-type(1) { display: none;}
.news-section > a:hover .news-section-btn > img:nth-of-type(2) { display: block;}
.news-section-pto { padding-bottom: 61%; position: relative; margin-bottom: 15px;}
.news-section-over { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; height: 100%; background: #636363; mix-blend-mode: multiply; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; opacity: 0;transition: all 0.4s ease-out 0s; }
.news-section-over-icon { position: absolute; z-index: 6; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0;transition: all 0.4s ease-out 0s; }
.news-section-over-icon img { width: 62px;}
.news-section-date { position: absolute; z-index: 3; width: 74px; height: 85px; background: #a58e5e; top: 0; right: 10px;clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 23px), 50% 100%, 0% calc(100% - 23px)); color: #fff; text-align: center; padding-top: 12px; line-height: 1.25;}
.news-section-title { font-weight: 500; color: #5582c1; line-height: 1.1; padding-bottom: 20px;font-size: clamp(20px, 1.9vw, 24px); white-space:nowrap; text-overflow : ellipsis; overflow:hidden;}
.news-section-data { font-weight: 300; margin-bottom: 10px; color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}
.news-section-btn-box { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end;}
.news-section-btn { border-radius: 15px; border: 1px solid #89b2dd; color: #89b2dd; line-height: 1;display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 4px 16px;}
.news-section-btn > div { padding-right: 8px;}
.news-section-btn > img:nth-of-type(1) { width: 10px;}
.news-section-btn > img:nth-of-type(2) { width: 58px; display: none;}

/*news-detail*/
.news-detail-section-1 { padding-bottom: calc(20px + 2%);}
.news-detail-section-1 h1 { color: #5582c1; font-weight: 500;font-size: clamp(24px, 3.5vw, 40px); line-height: 1.2; padding: 0; margin: 0;font-family: 'Noto Sans TC', sans-serif;}
.news-detail-tag { padding-bottom: 15px; display: flex; flex-direction:row ; flex-wrap: nowrap; align-items: flex-start;}
.news-detail-tag > div:nth-of-type(1) { background: #a58e5e; white-space: nowrap; line-height: 1; padding: 2px 16px 4px 16px; color: #fff; font-size: 18px; clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0% 100%);}
.news-detail-tag > div:nth-of-type(2) { padding: 3px 0 0 15px; line-height: 1;}

.news-detail-bottom-tool { padding: calc(20px + 1%) 0 calc(20px + 3%) 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.btn-back { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
.btn-back:hover > span { background: #89b2dd; }
.btn-back > span {  width: 68px; height: 68px; border-radius: 100%; background: #636363;display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; margin-right: 20px;transition: all 0.4s ease-out 0s; }
.btn-back > span img {  width: 32px;}
.btn-back > div {  color: #000; font-weight: 300;}

.share-box { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
.share-box > span { font-weight: 300; color: #000; display: inline-block; padding-right: 10px;}
.share-box > div { display: flex; flex-direction: row; flex-wrap: wrap; }
.share-box > div > a {  width: 42px; height: 42px; border-radius: 100%; background: #636363;display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; margin-right: 6px;}
.share-box > div > a:hover {  background: #89b2dd;}
.share-box > div > a > img {  max-width: 26px; max-height: 30px; }
.share-box .sharethis-inline-share-buttons > .st-btn { display: inline-block !important; background: #636363 !important; border-radius: 50% !important; }
.share-box .sharethis-inline-share-buttons > .st-btn:hover { background: #89b2dd !important; opacity: unset !important; top: 0 !important; }

.news-detail-final-section { background: #f0f0f0; display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: calc(20px + 4%);}
.news-detail-final-section > a { width: 50%; display: block; padding: 15px calc(15px + 2%); text-align: center; color: #89b2dd;}
.news-detail-final-section > a:hover { background: #89b2dd; color: #fff;}
.news-detail-final-section > a:hover > span { color: #fff;}
.news-detail-final-section > a > span { font-size: clamp(16px, 1.3vw, 18px); color: #666; padding-top: 5px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;}
.news-detail-final-section > a:nth-of-type(1) { border-right: 1px solid #636363;}

/*news-b*/
.news-b-type { margin-bottom: calc(25px + 1%); display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.news-b-type > div:nth-of-type(1) { color: #5582c1; font-size: clamp(19px, 2.5vw, 30px); line-height: 1;  white-space: nowrap; padding-right: 12px;}
.news-b-type > div:nth-of-type(2) { width: 100%; height: 1px; background: #5582c1;}

.news-b-list { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -50px; padding-bottom: calc(20px + 2%);}
.news-b-list > a { margin: 0 50px 25px 0; width: calc(33.33% - 50px);}
.news-b-list > a:hover { transform: scale(0.95);}
.news-b-list-date { color: #5582c1; text-align: center; line-height: 1;font-size: clamp(17px, 1.9vw, 26px);}
.news-b-list-pto-box { display: block; position: relative; padding: 25px 5%; margin-top: -15px; margin-bottom: 20px;}
.news-b-list-pto-box:before, .news-b-list-pto-box:after { content: ""; position: absolute; top:0; height: 100%; width: 15px; border-style: solid; border-color: #89b2dd;}
.news-b-list-pto-box:before { border-width: 2.5px 0 2.5px 2.5px; left: 0;}
.news-b-list-pto-box:after { border-width: 2.5px 2.5px 2.5px 0; right: 0;}
.news-b-list-pto { padding-bottom: 34%;}
.news-b-list-name { color: #000; font-weight: 500; line-height: 1.2; padding-bottom: 15px;}
.news-b-list-data { color: #666; font-weight: 300; line-height: 1.2; }

/*news-c*/
.news-c-box { position: relative; margin-bottom: 100px; padding: 0 calc(25px + 3%) 0px calc(25px + 3%);}
.news-c-box > span { position: absolute; display: inline-block; z-index: -1; border-style: solid; border-color: #5582c1;}
.news-c-box > span:nth-of-type(1) { width: 152px; height: 110px; border-width: 1px 0 0 1px; top: 0; left: 0;}
.news-c-box > span:nth-of-type(2) { width: 152px; height: 110px; border-width: 1px 1px 0 0; top: 0; right: 0;}
.news-c-box > span:nth-of-type(3) { width: 100%; height: 118px; border-width: 0 1px 1px 1px; bottom: 0; left: 0;}
.news-c-box > span:nth-of-type(4) { width: 1px; height: 115px; background: #5582c1; left: 50%; bottom: -80px; transform: translateX(-50%); border-width: 0;}
.news-c-box > span:nth-of-type(4):before, .news-c-box > span:nth-of-type(4):after { content: ""; position: absolute; width: 6px; height: 6px; border-radius: 100%; background: #5582c1; left: 50%; transform: translateX(-50%);}
.news-c-box > span:nth-of-type(4):before { top: 0;}
.news-c-box > span:nth-of-type(4):after { bottom: 0;}
.news-c-box:last-child { margin-bottom: 50px;}

.news-c-box-title { color: #5582c1; font-weight: 500; text-align: center; line-height: 1.1; padding-bottom: calc(20px + 3%);}
.news-c-list { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 3%);}
.news-c-list > div { width: 33.33%; text-align: center; padding-bottom: calc(20px + 2%);}
.news-c-list-pto { padding-bottom: 85%; margin-bottom: 10px;}
.news-c-list-pto-2 { padding-bottom: 60%; margin-bottom: 10px;}
.news-c-list-name { color: #89b2dd;}
.news-c-list-name span { color: #666; display: block; text-align: center;}

/*video*/
.video-list { padding-bottom: 20px; margin-right: -22px; display: flex; flex-direction: row; flex-wrap: wrap; }
.video-list > a { margin: 0 22px calc(20px + 2%) 0; width: calc(33.33% - 22px); position: relative; background: #f0f0f0; display: block; padding: 36px 25px;}
.video-list > a:hover .video-list-name { color: #88a8d3; }
.video-list > a:hover .video-list-name > span { color: #88a8d3;border-bottom-color: #88a8d3;}
.video-list > a:hover:after { background: #88a8d3; mix-blend-mode: multiply;width: 66px; height: 66px;}
.video-list > a:after { content: ""; position: absolute; bottom: 0; right: 0; width: 54px; height: 54px;clip-path: polygon(100% 0%, 100% 100%, 0% 100%); background: #f0f0f0; mix-blend-mode: multiply;transition: all 0.4s ease-out 0s; }
.video-list-pto { position:relative; margin-bottom: 18px; padding-bottom: 56.5%;}
.video-list-btn { position: absolute;z-index: 4;width: 80px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.video-list-name { font-weight: 300; color: #666;transition: all 0.4s ease-out 0s;font-size: clamp(16px, 1.3vw, 18px); }
.video-list-name > span{ display: block; line-height: 1.3; border-bottom: 1px solid #959595; color: #929292;transition: all 0.4s ease-out 0s; font-weight: 400;font-size: clamp(20px, 2.2vw, 26px); padding-bottom: 3px;}

/*about*/
.about-section-1 { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding-bottom: calc(20px + 4%);}
.about-section-1 > div:nth-of-type(1) { width: 40%;}
.about-section-1 > div:nth-of-type(2) { width: 60%; padding-left: 6%;}

.about-section-2 { background: url("../images/about-section2-bg.jpg") no-repeat 50% 236px; min-height: 815px;}
.about-section-2-top { position: relative; padding: 15px 5%;}
.about-section-2-top-bg { position: absolute; width: 100%; height: 100%; top: 0;left: 0; z-index: 1;display: flex; flex-direction: row; flex-wrap: wrap; mix-blend-mode: multiply; }
.about-section-2-top-bg > div { width: 50%;}
.about-section-2-top-bg > div:nth-of-type(1) { background: url("../images/about-2-1.jpg") no-repeat top center / cover;}
.about-section-2-top-bg > div:nth-of-type(2) { background: #89b2dd;}

.about-section-2-top-content {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; width: calc(50% + 175px); margin: 0 0 0 auto;position:relative; z-index: 3;}
.about-section-2-top-content > div:nth-of-type(1) { width: 348px;}
.about-section-2-top-content > div:nth-of-type(2) { width: calc(100% - 348px); padding-left: 35px; color: #fff;}

.about-section-2-bottom-content {padding-top:470px; padding-bottom: 120px; max-width: 900px; text-align: center; margin: 0 auto;}

.about-section-3 {min-height: 450px; background: url("../images/about-section3-bg.jpg") no-repeat center center; position:relative;}
.about-section-3:after { content: ""; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); width: 9px; height: calc(100% + 180px); background: linear-gradient(0deg, rgba(165,142,94,0) 0%, rgba(165,142,94,1) 90px, rgba(165,142,94,1) calc(100% - 90px), rgba(165,142,94,0) 100%);} 

.about-section-3-content {  position: relative; z-index: 3; width: 100%;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding-top: 120px; }
.about-section-3-content > div:nth-of-type(2) {  width: 210px; height: 210px; border-radius: 100%; background: #a58e5e;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; line-height: 1.2; color: #fff; font-weight: 500;font-size: clamp(24px, 3vw, 48px);text-align: center;}
.about-section-3-content > div:nth-of-type(1) {  width: calc((100% - 210px) / 2); padding-right: 120px;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; transform: translateY(-15px);}
.about-section-3-content > div:nth-of-type(3) {  width: calc((100% - 210px) / 2); padding-left: 120px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; transform: translateY(-15px); }

.about-section-3-content-title { width: 100px; height: 100px; border-radius: 100%; background: #1e93d1;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; line-height: 1.2; color: #fff;}
.about-section-3-content-data { padding: 0 26px; width: calc(100% - 100px); color: #5582c1; line-height: 1.2;font-size: clamp(16px, 1.5vw, 20px);}

.about-section-4-top { padding-left: 5%; padding-right: 5%; text-align: center; color: #a58e5e; font-weight: 500;font-size: clamp(19px, 1.8vw, 30px); padding-bottom: 35px; padding-top: 113px; background: url("../images/about-section4-topbg.png") no-repeat top center; line-height: 1.4;}
.about-section-4-bottom { padding-left: 5%; padding-right: 5%; padding-bottom: calc(20px + 5%); padding-top: 150px; background: url("../images/about-section4-bottombg.png") no-repeat top center;}
.about-section-4-bottom-content { max-width: 804px; margin: 0 auto;}
.about-section-4-bottom-content > div { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;}
.about-section-4-bottom-content-data { position: relative; line-height: 0; width: 33.33%;}
.about-section-4-bottom-content-data > div { position: absolute; top: 55%; left: 50%; transform: translateX(-50%); bottom: 10%; color: #fff; font-weight: 500; font-size: clamp(17px, 1.2vw, 24px); line-height: 1.1; text-align: center; width: 100%; padding: 0 calc(20px + 12%); display: flex; align-items: center; justify-content: center;}

.about-title {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; padding-bottom: 20px;}
.about-title > img {width: 36px;}
.about-title > div { color: #5582c1; font-weight: 500; font-size: clamp(21px, 2vw, 28px);line-height: 1.4;}

.about-gallery { padding-right: calc(5% + 10px); padding-left: calc(5% + 10px); padding-top: 22px; padding-bottom: 22px; position: relative; margin-bottom: calc(20px + 3%);}
.about-gallery > span { position: absolute; display: inline-block; z-index: -1; border-style: solid; border-color: #89b2dd; width: 98px; height: 57px;}
.about-gallery > span:nth-of-type(1) { border-width: 1px 0 0 1px; top: 0; left: 3.5%;}
.about-gallery > span:nth-of-type(2) { border-width: 1px 1px 0 0; top: 0; right: 3.5%;}
.about-gallery > span:nth-of-type(3) { border-width: 0 0 1px 1px; bottom: 0; left: 3.5%;}
.about-gallery > span:nth-of-type(4) { border-width: 0 1px 1px 0; bottom: 0; right: 3.5%;}

.loop2 {  }
.loop2 .owl-dots { display: none !important;}
.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: 40px !important; height: 40px !important; border-radius: 0% !important; background: transparent !important; border: 0px solid #fff !important;}
.loop2 .owl-prev { left:-50px; }
.loop2 .owl-next { right:-50px;;}
.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: 30px; height: 30px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #5582c1; position: absolute; top:50%; left: 50%; }
.loop2 .owl-prev:before { content: ""; transform:translate(-50%, -50%) rotate(-135deg); }
.loop2 .owl-next:before { content: ""; transform:translate(-50%, -50%) rotate(45deg);}
.loop2 .owl-prev:hover:before, .loop2 .owl-next:hover:before { opacity: 0.8;}
.loop2 .owl-stage-outer {z-index: 2;}
.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; }
 
.about-section-5 { background: #e3e3e3; padding: 20px 5% 0 5%;height: 950px; overflow:auto;}
.about-section-5-content { position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; }
.about-section-5-content:after { position: absolute; content: ""; left: 50%; transform: translateX(-50%); top: 0; background: url("../images/history-bg.png") repeat-y; width: 26px; height: 100%;}
.about-section-5-content > div {width: calc(50% + 49px);display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; position: relative; z-index: 3; padding: 30px 0;}
.about-section-5-content > div > div:nth-of-type(1) {width: calc(100% - 128px); margin-top: 48px; border-top: 1px solid #5582c1; padding-top: 20px;}
.about-section-5-content > div > div:nth-of-type(2) {width: 98px; height: 98px; border-radius: 100%; background: #fff; color: #5582c1; font-weight: 700;line-height: 1;font-size: 30px;display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; }
.about-section-5-content > div:nth-child(odd) {margin: 0 auto 0 0;}
.about-section-5-content > div:nth-child(even) {margin: 0 0 0 auto;}
.about-section-5-content > div:nth-child(even) > div:nth-of-type(1) { order: 2;}
.about-section-5-content > div:nth-child(even) > div:nth-of-type(2) { order: 1;}

.history-list > div { position: relative;font-size: clamp(16px, 1.3vw, 18px); padding-left: 18px; line-height: 1.4;}
.history-list > div:before { content: ">"; position: absolute; left: 3px; top:0px;}
.history-2019 { text-align: right; margin-top: -90px; padding-bottom: 10px;}
.history-2018 { text-align: left; margin-top: -90px;padding-bottom: 10px;}

/*location*/
.location-top-section { position: relative; margin-top: -60px; z-index: 3; border-radius: 10px; background: rgba(227,227,227,.8); padding: 35px calc(20px + 3%); margin-bottom: calc(20px + 5%);}
.location-top-section-title { margin-bottom: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-end;}
.location-top-section-title > img { display: inline-block; margin-right: 12px;}
.location-top-section-title > div { font-weight: 700; color: #5582c1;font-size: clamp(22px, 2.3vw, 30px); line-height: 1.1;}

.location-info-title { border-bottom: 1px solid #727171; line-height: 1.4; margin-bottom: 10px; height: 60px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; padding-bottom: 5px; color: #000; font-weight: 500;}
.location-info-data { font-size: 16px; color: #000; font-weight: 300; padding-bottom: 12px;}
.location-info-data img { display: inline-block; margin: 0 5px; transform: translateY(-3px); width: 22px;}
.location-info-data a { color: #000 !important;}

.location-select-box { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: calc(20px + 1%);}
.location-select-box > div:nth-of-type(1) { padding-right: 25px; line-height: 1.1; color: #5582c1; font-weight: 700;font-size: clamp(20px, 1.7vw, 22px);}
.location-select { width: 145px; border-bottom: 2px solid #727171; position: relative; padding: 0 30px 2px 0;}
.location-select:after { content: ""; position: absolute; width: 9px; height: 9px; border-width: 0 1px 1px 0; border-style: solid; border-color: #727171; transform: rotate(45deg);  right: 10px; top:10px;}
.location-select-open { position: absolute; width: 100%; left: 0; border-width:2px 1px 1px 1px; border-style: solid; border-color: #727171; background: #fff; display:none;}
.location-select-open > a { display: block; line-height: 1.1; padding: 6px 15px; font-weight: 300; color: #666; font-size: 18px;}
.location-select-open > a:hover { background: #e3e3e3; color: #666;}

.location-bottom-section { padding-bottom: calc(20px + 5%);}
.location-spec { width: 100%; border-spacing: 0; border-collapse: inherit;}
.location-spec th { font-weight: 500; font-size: 18px; color: #000; border-bottom: 3px solid #727171; line-height: 1.7; padding: 5px 0; text-align: left;}
.location-spec td { font-weight: 400; font-size: 16px; color: #666; border-bottom: 1px solid #727171; line-height: 1.7; padding: 12px 0;text-align: left; vertical-align:top;}
.location-spec td img { display: inline-block; margin: 0 15px; transform: translateY(-3px);}
.location-spec td:first-child { font-size: 18px;}

/*quality*/
.quality-section-bg { background: url("../images/quality-bg.png") no-repeat 50% 35%; }
.quality-section-bg .about-title > div { font-size: clamp(24px, 3.5vw, 40px); font-weight: 700; text-align: center;}

.quality-section-1-content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding-bottom: 20px;}
.quality-section-1-content > div { width: 31%; padding-bottom: 25px;}
.quality-section-1-content-title {  border-bottom:1px solid #5582c1; padding-bottom: 10px; margin-bottom: 15px;}
.quality-section-1-content-data {  padding: 0 15px;}

.quality-section-2 { background: #f2f2f2; position: relative; padding: calc(20px + 4%) 5% calc(20px + 1%) 5%; border-top: 3px solid #89b2dd;}
.quality-section-2-top { position: absolute; z-index: 2; left: 50%; top:-5px; transform: translateX(-50%);filter: drop-shadow(0px 3px 0px #89b2dd);}
.quality-section-2-top > div { width: 150px; height: 58px; clip-path: polygon(0% 0, 100% 0%, 50% 100%); background: #fff; position: relative;}
.quality-section-2-top:after { content: ""; position: absolute; width: 3px; height: 85px; bottom: 0; left: 50%; transform: translateX(-50%); background: #89b2dd;}

.quality-section-2-content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; padding-top: 25px;}
.quality-section-2-content > div { width: 16%; position: relative; border: 2px solid #a58e5e; padding: 10px; text-align: center; margin-bottom: 35px;}
.quality-section-2-content > div > div:nth-of-type(1) { display: inline-block; background: #a58e5e; position: relative; z-index: 2; line-height: 1; padding:3px 5px 5px 5px; color: #fff;font-size: 40px; margin: 0 auto -25px auto; transform: translateY(-30px)}
.quality-section-2-content > div > div:nth-of-type(2) { text-align: center; font-weight: 500;font-size: clamp(20px, 1.9vw, 24px); padding-bottom: 20px;}

/*job*/
.job-section-1 { padding-top: calc(20px + 5%);padding-bottom: calc(20px + 5%);
background-image: linear-gradient(90deg, rgba(248,248,248,0) 0%, rgba(248,248,248,0) 100%), url("../images/job-bg-1.jpg");
background-position: center center, left center;
background-repeat: no-repeat, no-repeat;
background-size: auto, cover;}

.job-content { max-width:720px; margin: 0 0 0 auto;}

.job-section-1-bottom { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 3%);}
.job-section-1-bottom > a { width: 50%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; padding: 10px 5%; background: #f2f2f2; line-height: 1.4;}
.job-section-1-bottom > a img { transition: all 0.4s ease-out 0s;}
.job-section-1-bottom > a:hover img { transform: scale(0.9);}
.job-section-1-bottom > a:nth-of-type(1) { background: #89b2dd; color: #fff;}
.job-section-1-bottom > a:nth-of-type(2) { color: #666;}
.job-section-1-bottom > a > div:nth-of-type(1) { padding: 0 20px;}


.job-section-2 { margin-bottom: 25px;
background-image: linear-gradient(90deg, rgba(248,248,248,0) 0%, rgba(248,248,248,0) 100%), url("../images/job-bg-2.jpg");
background-position: center center, right center;
background-repeat: no-repeat, no-repeat;
background-size: auto, cover;}
.job-section-2 .job-content { margin: 0 auto 0 0;}

.job-title { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-bottom: 15px; font-weight: 500; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.1; color: #5582c1;}
.job-data-list > div { position: relative; border-bottom: 1px solid #5582c1; padding-bottom: 2px; margin-bottom: 2px; padding-left: 15px; line-height: 1.4;font-size: clamp(16px, 1.3vw, 18px);}
.job-data-list > div:before { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 100%; border: 1px solid #666; left: 4px; top:11px;}

.job-section-3 { margin-bottom: 25px;
background-image: linear-gradient(90deg, rgba(248,248,248,0) 0%, rgba(248,248,248,0) 100%), url("../images/job-bg-3.jpg");
background-position: center center, left center;
background-repeat: no-repeat, no-repeat;
background-size: auto, cover;}

.job-title-2 { background: #89b2dd; color: #fff; line-height: 1.1; padding: 4px 15px; display: inline-block;}
.job-data-2 { padding: 0 15px 10px 15px;}

/*contact*/
.contact-box {padding: 0;}
.contact-section { padding: calc(20px + 2%); display: flex; flex-direction: row; flex-wrap: wrap; }
.contact-section > div:nth-of-type(1) { width: 40%; border-right:1px solid #5582c1; padding-right: 4%;}
.contact-section > div:nth-of-type(2) { width: 60%; padding-left: 4%;}

.contact-section-title {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; padding-bottom: 30px; }
.contact-section-title > img { display: inline-block; margin-bottom: 20px;}
.contact-section-title > div { color: #5582c1; font-weight: 500; font-size: clamp(22px, 2.5vw, 32px); line-height: 1; padding-bottom: 10px;}
.contact-section-title > span { display: inline-block; width: 20px; height: 20px; border-width: 0 1px 1px 0; border-style: solid; border-color: #5582c1; transform: rotate(45deg);}


.contact-section-info {display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; padding-bottom: 25px; }
.contact-section-info > div:nth-of-type(1) {padding-bottom: 15px;}
.contact-section-info > div:nth-of-type(2) { width: 100%; position: relative; padding: 15px calc(20px + 2.5%);}
.contact-section-info > div:nth-of-type(2):before, .contact-section-info > div:nth-of-type(2):after { position: absolute; content: ""; width: 7px; height: 100%; border-style: solid; border-color: #89b2dd;top: 0;}
.contact-section-info > div:nth-of-type(2):before { left: 0; border-width: 1px 0 1px 1px;}
.contact-section-info > div:nth-of-type(2):after { right: 0; border-width: 1px 1px 1px 0;}

.contact-section-info .layout-wrap span { display: inline-block;}

.contact-form-title { line-height: 1.2; padding-bottom: 10px;}
.contact-form-title span { color: #ed1c24;}

.contact-main input[type="text"], .contact-main input[type="number"], .contact-main input[type="tel"], .contact-main input[type="phone"], .contact-main input[type="date"], .contact-main input[type="email"], .contact-main input[type="password"], .contact-main input[type="button"], .contact-main textarea { font-size: clamp(16px, 1.5vw, 20px); border-width:1px; border-style: solid; border-color: #666; margin: 0px 0 0 0; width: 100%; padding: 12px 10px; color:#666; background: none; font-family: 'Noto Sans TC', sans-serif; letter-spacing: 0; height: 46px; margin-bottom: 10px;}
.contact-main textarea { height:200px; padding:15px 10px; letter-spacing: 1px; resize: none; }
.contact-main select{  margin: 0px 0 0 0; min-width: 80px; width:100%; background-image: url(../images/product-select.png); background-repeat: no-repeat; background-position: calc(100% - 14px) 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   margin-right:4px; background-color: transparent;  font-size: clamp(16px, 1.5vw, 20px); border-width:1px; border-style: solid; border-color: #666; mwidth: 100%; color:#666; font-family: 'Noto Sans TC', sans-serif; height: 46px; padding: 0 35px 0 10px;  letter-spacing: 0;margin-bottom: 10px;}
.contact-main option { padding:1px 5px;}
.contact-main select::-ms-expand {
    display: none;
}

.contact-form-50 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.contact-form-50 > div { width: calc(50% - 3px); margin-bottom: 3px;}
.contact-form-25 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.contact-form-25 > div:nth-of-type(1) { width: calc(25% - 3px); margin-bottom: 3px;}
.contact-form-25 > div:nth-of-type(2) { width: calc(50% - 3px); margin-bottom: 3px;}
.contact-form-25-2 > div:nth-of-type(2) { width: calc(75% - 3px);}
.contact-form-25 > div:nth-of-type(3) { width: calc(25% - 3px); margin-bottom: 3px;}

.contact-btn { background: #89b2dd; color: #fff; border-width: 0; font-weight: 700;font-size: clamp(22px, 2.3vw, 30px);transition: all 0.4s ease-out 0s; width: 100%;}
.contact-btn:hover { transform: scale(0.95);}

/*esg*/
.esg-menu {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-bottom: calc(20px + 2%);}
.esg-menu > a {display: inline-block; min-width: 240px;  text-align: center; padding: 7px 10px; line-height: 1; border: 1px solid #5582c1; color: #5582c1; font-weight: 500; margin: 0 9px 18px 9px;}
.esg-menu > a:hover, .esg-menu > a.current {background: #5582c1; color: #fff;}

.esg-section-1 { background: url("../images/esg-bg-1.png") no-repeat top center; padding: 0 5% calc(20px + 5%) 5%;}
.esg-section-1-title { transform: translateY(-17px); padding-bottom: 200px;}
.esg-section-1-title > div { color: #188040;}

.esg-section-1-content { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-bottom: 45px;}
.esg-section-1-content > div { margin:0 9px 15px 9px; width: calc(25% - 18px);display: flex; flex-direction: row; flex-wrap: wrap; border-radius: 20px; border-width: 3px; border-style: solid; position: relative; padding-left: 100px; padding-top: 22px; min-height: 175px;}
.esg-section-1-content > div:nth-of-type(1) {  border-color: #3f704e;}
.esg-section-1-content > div:nth-of-type(2) {  border-color: #0f9047;}
.esg-section-1-content > div:nth-of-type(3) {  border-color: #7ab655;}
.esg-section-1-content > div:nth-of-type(4) {  border-color: #0b6f37;}
.esg-section-1-content > div:nth-of-type(5) {  border-color: #60bba4;}
.esg-section-1-content > div:nth-of-type(6) {  border-color: #14aa59;}
.esg-section-1-content > div:nth-of-type(7) {  border-color: #4e8146;}
.esg-section-1-content > div > img { position: absolute; left: 10px; bottom: 0; max-width: 100%;}
.esg-section-1-content-data { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.4; padding: 0 12px 12px 15px; position: relative;}
.esg-section-1-content-data:before { position: absolute; content: ""; width: 5px; height: 5px; background: #666; border-radius: 100%; left: 3px; top:12px;}

.esg-section-2 { margin-bottom: 25px; display: flex; flex-direction: row; flex-wrap: wrap; background: #dae2d4; }
.esg-section-2 > div { width: 50%;}
.esg-section-2 > div:nth-of-type(2) { display: flex; flex-direction: column; flex-wrap: wrap;position: relative;}
.esg-section-2 > div:nth-of-type(2) > div { height: 50%;}
.esg-section-2 > div:nth-of-type(2) > div:nth-of-type(1) { color: #39a64a;font-size: clamp(18px, 1.2vw, 24px); padding: 10px calc(40px + 5%);display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.esg-section-2 > div:nth-of-type(2) > div:nth-of-type(3) img { object-fit: cover; width: 100%; height: 100%;}
.esg-section-2-icon { position: absolute; z-index: 3; top:50%; transform: translateY(-50%); left: 0; width: 100%; padding: 0 calc(40px + 5%);display: flex; flex-direction: row; flex-wrap: wrap; height: auto !important;}
.esg-section-2-icon > div { margin: 0 1vw 10px 0; width: 15%;}

.esg-section-3 { padding-top: calc(20px + 2.5%);}
.esg-section-3-spec { width: 100%; border-spacing: 0; border-collapse: inherit;}
.esg-section-3-spec th { background: #3f704e; color: #fff; padding: 5px 15px;}
.esg-section-3-spec td { padding: 5px 15px; border-bottom: 1px solid #3f704e;}
.esg-section-3-spec td img { width: 33px;}
.esg-section-3-spec td img:hover { filter: grayscale(1);}
.esg-section-3-spec tr { cursor: pointer;}
.esg-section-3-spec tr:hover { background: #f2f2f2;}

.loop-esg {  }
.loop-esg .owl-dots { }
.loop-esg .owl-item {position: relative; }
.loop-esg .owl-nav { position: absolute; top:calc(50% - 40px); left: 0; width: 100%; z-index: 11;}
.loop-esg .owl-prev, .loop-esg .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;}
.loop-esg .owl-prev { left:-50px; }
.loop-esg .owl-next { right:-50px;;}
.loop-esg .owl-prev:before, .loop-esg .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: 30px; height: 30px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #5582c1; position: absolute; top:50%; left: 50%; }
.loop-esg .owl-prev:before { content: ""; transform:translate(-50%, -50%) rotate(-135deg); }
.loop-esg .owl-next:before { content: ""; transform:translate(-50%, -50%) rotate(45deg);}
.loop-esg .owl-prev:hover:before, .loop-esg .owl-next:hover:before { opacity: 0.8;}
.loop-esg .owl-stage-outer {z-index: 2;}
.loop-esg .owl-dots { position: absolute; z-index: 100; bottom:20px; width: 100%; text-align: center !important; padding: 0 20px; }
.loop-esg .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 8px;  margin-right: 8px; border-radius: 100%;}
.loop-esg .owl-dots .owl-dot.active {  }
.loop-esg .owl-dots .owl-dot span, .loop-esg  .owl-dots .owl-dot span { background: #fff !important; width: 14px !important; height: 14px !important; margin: 0 auto!important;transition: all 0.4s ease-out 0s !important; border-radius: 0 !important; border-radius: 100% !important; opacity: 0.5;}
.loop-esg .owl-dots .owl-dot.active span/*, .loop-esg  .owl-dots .owl-dot:hover span*/ { background: #fff !important;  opacity: 1;}
 
/*esg-2*/
.esg-2-section-1 { margin: 25px 0 calc(20px + 4%); position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.esg-2-section-1:before, .esg-2-section-1:after { position: absolute; content: ""; background: #89b2dd; top:50%; left: 50%; transform: translate(-50%, -50%); z-index: -1;}
.esg-2-section-1:before { width: 1px; height: 90%;}
.esg-2-section-1:after { width: 100%; height: 1px;}
.esg-2-section-1 > div { width: 40%; margin-bottom: 66px; border-radius: 30px; border-width: 2px; border-style: solid;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px calc(10px + 2%); background: #fff; min-height:310px; }
.esg-2-section-1 > div:nth-of-type(3), .esg-2-section-1 > div:nth-of-type(4) { margin-bottom: 0;}
.esg-2-section-1 > div:nth-of-type(1) { border-color: #edb621;}
.esg-2-section-1 > div:nth-of-type(1) .esg-2-section-1-title > b { color: #edb621;}
.esg-2-section-1 > div:nth-of-type(1) .esg-2-section-1-title:before { background: #edb621;}
.esg-2-section-1 > div:nth-of-type(2) { border-color: #cad121;}
.esg-2-section-1 > div:nth-of-type(2) .esg-2-section-1-title > b { color: #cad121;}
.esg-2-section-1 > div:nth-of-type(2) .esg-2-section-1-title:before { background: #cad121;}
.esg-2-section-1 > div:nth-of-type(3) { border-color: #e8841e;}
.esg-2-section-1 > div:nth-of-type(3) .esg-2-section-1-title > b { color: #e8841e;}
.esg-2-section-1 > div:nth-of-type(3) .esg-2-section-1-title:before { background: #e8841e;}
.esg-2-section-1 > div:nth-of-type(4) { border-color: #39a64a;}
.esg-2-section-1 > div:nth-of-type(4) .esg-2-section-1-title > b { color: #39a64a;}
.esg-2-section-1 > div:nth-of-type(4) .esg-2-section-1-title:before { background: #39a64a;}
.esg-2-pto { position: absolute; z-index: 2; top:50%; left: 50%; transform: translate(-50%, -50%); width: 24%;}
.esg-2-section-1-title { line-height: 1.6;}
.esg-2-section-1-title > b { font-weight: 500; font-size: clamp(20px, 1.9vw, 24px); display: block; padding-bottom: 8px; line-height: 1.3;}

.esg-2-section-1-new { margin: 25px 0 calc(20px + 4%);display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.esg-2-section-1-new > div:nth-of-type(1) { width: 32%; position:relative;padding-right: 50px;}
.esg-2-section-1-new > div:nth-of-type(1):before, .esg-2-section-1-new > div:nth-of-type(1):after { content: ""; position: absolute; width: 55%; height: 58px; border-style: solid;right: 0;}
.esg-2-section-1-new > div:nth-of-type(1):before { border-width: 2px 0 0 2px; border-color: #edb621; top: -10px; }
.esg-2-section-1-new > div:nth-of-type(1):after { border-width: 0 0 2px 2px; border-color: #39a64a; bottom: -10px;}
.esg-2-section-1-new > div:nth-of-type(1) img { position:relative; z-index: 3; width: 100%; max-width: 400px;}
.esg-2-section-1-new > div:nth-of-type(2) { width: 68%;  display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.esg-2-section-1-new > div:nth-of-type(2) > div { border-width: 2px; border-style: solid; border-radius: 40px; padding: calc(20px + 1.5%) 10px; width: 32.6%; margin: 5px 0;}
.esg-2-section-1-new > div:nth-of-type(2) > div:nth-of-type(1) { border-color: #edb621;}
.esg-2-section-1-new > div:nth-of-type(2) > div:nth-of-type(2) { border-color: #e8841e;}
.esg-2-section-1-new > div:nth-of-type(2) > div:nth-of-type(3) { border-color: #cad121;}
.esg-2-section-1-new > div:nth-of-type(2) > div:nth-of-type(4) { border-color: #39a64a;}
.esg-2-section-1-new > div:nth-of-type(2) > div:nth-of-type(5) { border-color: #83cfc3;}
.esg-2-section-1-new > div:nth-of-type(2) > div:nth-of-type(6) { border-color: #5580be;}
.esg-2-section-1-new > div:nth-of-type(2) > div > span { display: block; text-align: center; font-size: clamp(20px, 1.9vw, 24px); padding-bottom: 15px;}



.title-type-4 { line-height: 1.2; padding: 0 5px 12px 15px; position: relative; color: #89b2dd; font-weight: 500; border-bottom: 1px solid #636363; margin-bottom: 5px; }
.title-type-4:before { position: absolute; content: ""; width: 5px; height: 5px; background: #89b2dd; border-radius: 100%; left: 3px; top:10px;}

.esg-2-gallery { background: #e3e3e3; padding: 40px 0 0 0; margin-bottom: calc(20px + 3%);}

.loop-esg-2 { padding-bottom: 50px; overflow: hidden;}
.loop-esg-2 .owl-dots { }
.loop-esg-2 .owl-item {position: relative; }
.loop-esg-2 .owl-nav { position: absolute; top:calc(50% - 40px); left: 0; width: 100%; z-index: 11;}
.loop-esg-2 .owl-prev, .loop-esg-2 .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;}
.loop-esg-2 .owl-prev { left:-50px; }
.loop-esg-2 .owl-next { right:-50px;;}
.loop-esg-2 .owl-prev:before, .loop-esg-2 .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: 30px; height: 30px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #5582c1; position: absolute; top:50%; left: 50%; }
.loop-esg-2 .owl-prev:before { content: ""; transform:translate(-50%, -50%) rotate(-135deg); }
.loop-esg-2 .owl-next:before { content: ""; transform:translate(-50%, -50%) rotate(45deg);}
.loop-esg-2 .owl-prev:hover:before, .loop-esg-2 .owl-next:hover:before { opacity: 0.8;}
.loop-esg-2 .owl-stage-outer {z-index: 2;}
.loop-esg-2 .owl-dots { position: absolute; z-index: 100; bottom:20px; width: 100%; text-align: center !important; padding: 0 20px; }
.loop-esg-2 .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 8px;  margin-right: 8px; border-radius: 100%;}
.loop-esg-2 .owl-dots .owl-dot.active {  }
.loop-esg-2 .owl-dots .owl-dot span, .loop-esg-2  .owl-dots .owl-dot span { background: #fff !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; opacity: 0.3;}
.loop-esg-2 .owl-dots .owl-dot.active span/*, .loop-esg-2  .owl-dots .owl-dot:hover span*/ { background: #fff !important; opacity: 1; }

.loop-esg-2-pto { margin-bottom: 20px;}
.loop-esg-2-name { text-align: center;}

.esg-2-appreciation { display: flex; flex-direction: row; flex-wrap: wrap;padding-bottom: calc(20px + 2%); padding-top: 20px;}
.esg-2-appreciation > div { width: 25%; padding: 0 3vw; margin-bottom:calc(10px + 1%);}
.esg-2-appreciation-pto { margin-bottom: 20px;}
.esg-2-appreciation-pto img { border: 2px solid #ebebeb;}
.esg-2-appreciation-title { font-weight: 500;text-align: center; line-height: 1.4; border-bottom: 1px solid #91c3ee; padding-bottom: 6px; margin-bottom: 6px; min-height: 50px;display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
.esg-2-appreciation-data { font-weight: 300; text-align: center; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.3;}

/*esg-3*/
.esg-3-section-1 { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(10px + 1%);}
.esg-3-section-1 > div:nth-of-type(1) { width: 27%;}
.esg-3-section-1 > div:nth-of-type(2) { width: 73%; padding-left: 35px;}
.esg-3-section-1-note { padding-top: 10px;}
.esg-3-section-1-note span { display: inline-block; margin-right: 4px; width: 20px; height: 10px; background: #636363;clip-path: polygon(50% 0%, 100% 100%, 0% 100%);}

.esg-3-section-2 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding-bottom: 25px;}
.esg-3-section-2 > div { padding: 0 2px 15px 2px; width: 16.66%; text-align: center;}

.esg-3-section-1b > div:nth-of-type(1) { order: 2;}
.esg-3-section-1b > div:nth-of-type(2) { order: 1; padding-right: 35px;padding-left: 0px;}

.esg-3-section-1-new { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; position: relative; z-index: 3;}
.esg-3-section-1-new > div { width: 31.5%;}
.esg-3-section-1-new > div {  padding: 35px 40px; margin-bottom: 30px;}
.esg-3-section-1-new > div:nth-child(odd) { background: #f2f2f2;}
.esg-3-section-1-new > div:nth-child(even) { border: 1px solid #cccccc;}
.esg-3-section-1-new-pto { width: 218px; height: 218px; border-radius: 100%; background: #dce8f5; position: relative; margin:0 auto calc(20px + 3%) auto; }
.esg-3-section-1-new-pto img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 127px; max-height: 140px;}
.esg-3-section-1-new-name { text-align: center; font-weight: 500; color: #5582c1;font-size: clamp(20px, 1.9vw, 24px); padding-bottom: 8px;}

.esg-3-section-2-new { position: relative; margin-top: -30px;}
.esg-3-section-2-new-pto { width: 100%;}
.esg-3-section-2-new-btn { position: absolute; left: 50%; transform: translateX(-50%); top:40%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; width: 300px; line-height: 68px; background: rgba(255,255,255,.8);}
.esg-3-section-2-new-btn:hover { transform:translateX(-50%) scale(0.9);}
.esg-3-section-2-new-btn > span { display: inline-block; color: #5582c1; font-weight: 500;font-size: clamp(20px, 1.9vw, 24px); margin-right: 10px;}
.esg-3-section-2-new-btn > img { width: 52px;}


/*application*/
.application-list {padding-bottom: 20px; display: flex; flex-direction: row; flex-wrap: wrap;}
.application-list > a {display: block; width: 50%; position:relative; margin-bottom: 35px; }
.application-list > a:hover .application-list-content { background: rgba(137,178,221,.85); }
.application-list > a:hover .application-list-content > img { filter: brightness(100);}
.application-list > a:hover .application-list-content > span { color: #fff;}
.application-list > a:hover .application-list-content > div:nth-of-type(1) { color: #fff;}
.application-list > a:hover .application-list-content > div:nth-of-type(2) > div:nth-of-type(1), .application-list > a:hover .application-list-content > div:nth-of-type(2) > div:nth-of-type(3) { background: none;}
.application-list > a:hover .application-list-content > div:nth-of-type(2) > div:nth-of-type(2) { border: 2px solid #fff;}
.application-list > a:hover .application-list-content > div:nth-of-type(2) > div:nth-of-type(2):before, .application-list > a:hover .application-list-content > div:nth-of-type(2) > div:nth-of-type(2):after { background: #fff;}
.application-list-pto { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.application-list-pto img { object-fit: cover; width: 100%; height: 100%;}
.application-list-content { position: relative; z-index: 3; background: rgba(255,255,255,.85); width: 320px; padding: calc(20px + 3.5%) calc(20px + 2%) 15px calc(20px + 2%); display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%;transition: all 0.4s ease-out 0s; }
.application-list-content > img { display: block; width: 104px; margin: 0 auto 20px auto;}
.application-list-content > span { display: block; text-align: center; color: #89b2dd;font-size: clamp(22px, 2.4vw, 35px); line-height: 1.2 ;padding-bottom: 10px;}
.application-list-content > div:nth-of-type(1) { color: #89b2dd; line-height: 1.4; min-height: 110px;}
.application-list-content > div:nth-of-type(2) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;}
.application-list-content > div:nth-of-type(2) > div:nth-of-type(1), .application-list-content > div:nth-of-type(2) > div:nth-of-type(3) { width: calc((100% - 38px) / 2); height: 1px; background: #89b2dd;}
.application-list-content > div:nth-of-type(2) > div:nth-of-type(2) { width: 38px; height: 38px; border-radius: 100%; border: 0px  solid #fff; position: relative; }
.application-list-content > div:nth-of-type(2) > div:nth-of-type(2):before, .application-list-content > div:nth-of-type(2) > div:nth-of-type(2):after { width: 16px; height: 2px; background: #89b2dd; content:""; top:50%; left: 50%; transform: translate(-50%, -50%); position: absolute; display: block; transform-origin: 50% 50%;}
.application-list-content > div:nth-of-type(2) > div:nth-of-type(2):after { transform: translate(-50%, -50%) rotate(90deg);}

/*application-detail*/
.application-detail-section-1 { padding-left: 5%; padding-right: 5%;}
.application-detail-menu { position: sticky; top:80px; z-index: 10; background: #fff; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 10px 5%; margin-bottom: 15px; margin-top: -25px;}
.application-detail-menu > a { cursor: pointer; display: inline-block; padding:0 20px; line-height: 1.1; border-right: 1px solid #666; margin-bottom: 10px;font-size: clamp(18px, 1.7vw, 24px);}
.application-detail-menu > a:first-child { border-left: 1px solid #666;}
.application-detail-menu > a:hover { color: #5582c1;}

.data-list-1 { padding-bottom: calc(20px + 2%);}
.data-list-1 > div { position: relative; padding-left: 40px; color: #a48b6a; font-weight: 500;font-size: clamp(18px, 2.2vw, 27px); line-height: 1.3; margin-bottom: 20px;}
.data-list-1 > div:before { position: absolute; content: ""; width: 14px; height: 14px; background: #a48b6a; transform: rotate(45deg); left: 4px; top:13px;}

.application-detail-menu-title { margin-bottom: calc(5px + 1%); display: inline-block; text-align: center; padding: 10px 30px 10px 20px;background: #89b2dd;clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%); line-height: 1.1; font-size: clamp(22px, 2.3vw, 30px); color: #fff;}

.idx-app-box { display: inline-block; position: relative; padding: calc(20px + 5%) calc(20px + 7%); margin: 15px 0 28px 0; }
.idx-app-box:before { content: ""; position: absolute; width: 13px; height: 71px; background: url("../images/icon-top-circle.png") no-repeat top center / contain; left: 50%; transform: translateX(-50%); top:-50px;}
.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: #d8d8d8;}
.idx-app-box > span:nth-of-type(1):before { top: 0; left: 0; border-width: 2px 0 0 2px;}
.idx-app-box > span:nth-of-type(1):after { bottom: 0; left: 0; border-width: 0 0 2px 2px;}
.idx-app-box > span:nth-of-type(2):before { top: 0; right: 0; border-width: 2px 2px 0 0;}
.idx-app-box > span:nth-of-type(2):after { bottom: 0; right: 0; border-width: 0 2px 2px 0;}


.idx-application-box2 { display: flex; flex-direction: row; flex-wrap: wrap; position: relative; margin-bottom: 60px;}
.idx-application-box2 .idx-app-box  { margin: 0;padding: calc(20px + 2%); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;}
.idx-application-box2 .idx-app-box > div  { position: relative; z-index: 6;}
.idx-application-box2 .idx-app-box:before  { display: none;}
.idx-application-box2 > div:nth-of-type(1) { display: block; width: 40%;}
.idx-application-box2 > div:nth-of-type(1) img { object-fit: cover; width: 100%; height: 100%;}
.idx-application-box2 > div:nth-of-type(2) { width: calc(60% - 30px); margin-left: 30px;}
.idx-application-box2-line { position: absolute; z-index: 5; top:50%; transform: translateY(-50%); left: 35%;}
.idx-application-box2-line img { width: 29%;}

.application-detail-section-2 {  background: #f2f2f2; padding-top: 5px;}
.application-detail-section-2-top { padding-left: 5%; padding-right: 5%;background: url("../images/application-detail-section-2-line.png") no-repeat top center; padding-top: 125px; padding-bottom: 35px;}
.application-detail-section-2-top > div { max-width: 980px; margin: 0 auto;}

.application-detail-section-2-bottom { padding-left: 5%; padding-right: 5%;position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.application-detail-section-2-bottom > div { width: 50%; margin-bottom: calc(20px + 2.5%); position: relative; z-index: 2; }
.application-detail-section-2-bottom > div:nth-child(odd) { padding-left: 23.5%;}
.application-detail-section-2-bottom > div:nth-child(even) { padding-right: 23.5%;}
.application-detail-section-2-bottom > span { position: absolute;z-index: 3;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 48%; padding: 0 3.5%; text-align: center;}
.application-detail-section-2-bottom:before { position: absolute; content: ""; z-index: 1; width: 3px; height: 100%; background: #89b2dd; top: 0; left: 50%; transform: translateX(-50%);}
.application-detail-section-2-bottom:after { position: absolute; content: ""; width: 100%; height: 20px; background: #fff; left: 0; bottom: 0;}

.application-detail-section-3 { height: 562px; position: relative;}
.application-detail-section-3:before, .application-detail-section-3:after { position: absolute; content: ""; height: 15px; width: 100%; background: linear-gradient(90deg, #fff 0%, #89b2dd 30%, #89b2dd 70%, #fff 100%);left: 0; z-index: 4;}
.application-detail-section-3:before { top: 0; }
.application-detail-section-3:after { bottom: 0;}
.application-detail-section-3-bg { height: 100%; position: relative;}
.application-detail-section-3-bg:before { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 50%; background: linear-gradient(90deg, #89b2dd 50%, rgba(137,178,221,0) 100%);}
.application-detail-section-3-bg img { object-fit: cover; width: 100%; height: 100%;}

.application-detail-section-3-title { position: absolute; z-index: 4; top: 0; left: 50%; transform: translateX(-50%); padding-top: 50px;font-weight: 500; color: #fff;}
.application-detail-section-3-title:before { position: absolute;content: ""; width: 3px; height: 42px; background: #fff; top: 0; left: 50%; transform: translateX(-50%);}
.application-detail-section-3-title:after { position: absolute;content: ""; width: 100%; height: 3px; background: #fff; bottom: 0; left: 50%; transform: translateX(-50%);}
.application-detail-section-3-pto { position: absolute;z-index: 5; left: 5%; width: 45%;}

.demo-section > .application-detail-section-4 { padding-top: 0; }
.application-detail-section-4 { max-width: 1360px; margin: 0px auto calc(20px + 2%) auto; position: relative; padding-top: 35px;}
.application-detail-section-4.v-line { margin-bottom: 0;}
.application-detail-section-4.v-line:before { position: absolute; content: ""; left: 50%; transform: translateX(-50%); top: 0; width: 3px; height: 42px; background: #89b2dd;}
.application-detail-section-4-title { text-align: center;}
.application-detail-section-4-title > div { position: relative; display: inline-block; padding: 12px 28px; line-height: 1; margin-bottom: calc(15px + 2%); color: #89b2dd; font-weight: 300;font-size: clamp(24px, 3.5vw, 44px);}
.application-detail-section-4-title > div > span { display: block; position: absolute; width: 100%; height: 100%;top: 0; left: 0;}
.application-detail-section-4-title > div > span:nth-of-type(1):before, .application-detail-section-4-title > div > span:nth-of-type(1):after, .application-detail-section-4-title > div > span:nth-of-type(2):before, .application-detail-section-4-title > div > span:nth-of-type(2):after { content: ""; position: absolute; display: inline-block;width: 17px; height: 17px; border-style: solid; border-color: #d8d8d8;}
.application-detail-section-4-title > div > span:nth-of-type(1):before { top: 0; left: 0; border-width: 2px 0 0 2px;}
.application-detail-section-4-title > div > span:nth-of-type(1):after { bottom: 0; left: 0; border-width: 0 0 2px 2px;}
.application-detail-section-4-title > div > span:nth-of-type(2):before { top: 0; right: 0; border-width: 2px 2px 0 0;}
.application-detail-section-4-title > div > span:nth-of-type(2):after { bottom: 0; right: 0; border-width: 0 2px 2px 0;}

.application-detail-section-4-title-btn { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; line-height: 1.1}
.application-detail-section-4-title-btn:hover { color: #89b2dd;}
.application-detail-section-4-title-btn > img { width: 22px; margin-left: 5px; transform: translateY(1px);}

.application-detail-section-4-btn { position: relative; margin-bottom: calc(20px + 2%); text-align: center;}
.application-detail-section-4-btn:after { position: absolute; content: ""; width: 100%; height: 2px; background: #89b2dd; left: 0; top:50%; transform: translateY(-50%); }
.application-detail-section-4-btn > span { border: 2px solid #89b2dd; border-radius: 23px; padding: 10px 25px; background: #fff; position: relative; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; color: #484848; font-weight: 500; font-size: clamp(20px, 1.4vw, 24px); line-height: 1; cursor: pointer; width: fit-content; margin: 0 auto;}
.application-detail-section-4-btn > span > img { width: 21px; margin-left: 8px;}

.application-detail-turn:after { background: #d8d8d8; color: #d8d8d8;}
.application-detail-turn > span { color: #d8d8d8;}
.application-detail-turn > span { border: 2px solid #d8d8d8;}
.application-detail-turn > span > img { transform: scaleY(-1);}

.application-detail-section-4-content { display: none;}
.application-detail-section-4-data-box { padding-bottom: 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.application-detail-section-4-data-box > div:nth-of-type(1) { width: 60%; background: #f2f2f2; padding: 20px calc(20px + 4%);}
.application-detail-section-4-data-box > div:nth-of-type(2) { width: 38%;}
.application-detail-section-4-data-1 { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 15px; padding-top: 10px;}
.application-detail-section-4-data-1 > div { width: 160px; margin: 0 20px 15px 0; text-align: center;}
.application-detail-section-4-data-1 > div > span { display: block; color: #fff; text-align: center; background: #89b2dd; line-height: 1; padding: 4px 5px; margin-top: 5px;}
.application-detail-section-4-data-2{ border-top: 1px solid #89b2dd;}
.application-detail-section-4-data-2 li { position: relative;}
.application-detail-section-4-data-2 li:after { position: absolute; content:""; width: calc(100% + 20px); height: 1px; background: #89b2dd; bottom: 0; left: -20px;}
.application-detail-section-4-title-2 { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.application-detail-section-4-title-2 > div:nth-of-type(1) { width: 95px;}
.application-detail-section-4-title-2 > div:nth-of-type(2) { width: calc(100% - 95px - 40px); position: relative;}
.application-detail-section-4-title-2 > div:nth-of-type(2) span { display: inline-block;position: relative; z-index: 2; background:#fff; padding-right: 15px; color: #89b2dd; line-height: 1.1; font-size: clamp(22px, 2.3vw, 30px);}
.application-detail-section-4-title-2 > div:nth-of-type(2):after { content: ""; position: absolute; background: #89b2dd; width: 100%; height: 1px; left: 0; top:50%; transform: translateY(-50%);}
.application-detail-section-4-pro-list { padding-left: 60px; display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 3%);}
.application-detail-section-4-pro-list-link { width: 25%; padding: 20px; display: block; position: relative; overflow: hidden;}
.application-detail-section-4-pro-list-link:after { background: rgba(51,51,51,.65); content: "";position: absolute; width: 100%; height: 100%; top:0; left: 0; z-index: 3;transition: all 0.4s ease-out 0s; opacity: 0;}
.application-detail-section-4-pro-list-link:hover:after { opacity: 1;}
.application-detail-section-4-pro-list-link:hover .application-detail-section-4-pro-list-name { transform: translateY(150px); opacity: 0;}
.application-detail-section-4-pro-list-link:hover .application-detail-section-4-pro-list-pto { transform: translateY(35px);}
.application-detail-section-4-pro-list-link:hover .application-detail-section-4-pro-list-over .application-detail-section-4-pro-list-name  { opacity: 1;}
.application-detail-section-4-pro-list-pto { padding-bottom: 100%;transition: all 0.4s ease-out 0s;}
.application-detail-section-4-pro-list-name { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center;transition: all 0.4s ease-out 0s;}
.application-detail-section-4-pro-list-name > div { width: 100%; text-align: center; color: #333; font-weight: 500; line-height: 1.2;font-size: clamp(20px, 1.4vw, 24px);}
/*.application-detail-section-4-pro-list-name > div:nth-of-type(1):after { content: "Series"; font-size: clamp(16px, 1.3vw, 18px); color: #666; padding-left: 3px;}*/
.application-detail-section-4-pro-list-over { position: absolute; width: 100%; height: 100%; top:0; left: 0; z-index: 4; padding: 0 15px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;transition: all 0.4s ease-out 0s;}
.application-detail-section-4-pro-list-over .application-detail-section-4-pro-list-name { width: 100%; transform: none !important;transition: all 0.4s ease-out 0s; opacity: 0;}
.application-detail-section-4-pro-list-over .application-detail-section-4-pro-list-name > div { color: #fff; text-align:  center;}
.application-detail-section-4-pro-list-over .application-detail-section-4-pro-list-name > div:nth-of-type(1):after { color: #fff;}
.application-detail-section-4-pro-list-over .application-detail-section-4-pro-list-name > div img { max-width: 124px; width: 100%; display: inline-block;}

.spec-type-1 { width: 100%; border-spacing: 1px; border-collapse: inherit; background: #89b2dd;}
.spec-type-1 th, .spec-type-1 td { line-height: 1.2; padding: 5px;}
.spec-type-1 th { font-size: 19px; background: #89b2dd; color: #fff; text-align: center;}
.spec-type-1 td { font-size: 18px; color: #000; background: #fff;}

.application-relate-title { color: #a48b6a; font-weight: 500; font-size: clamp(22px, 3.1vw, 36px); text-align: center; padding-bottom: calc(15px + 2%);}

.loop-related { margin-bottom: calc(20px + 5%);}
.loop-related .owl-dots { }
.loop-related .owl-item {position: relative; }
.loop-related .owl-nav { position: absolute; top:calc(50% - 40px); left: 0; width: 100%; z-index: 11;}
.loop-related .owl-prev, .loop-related .owl-next { position:absolute; z-index:100; top:calc(50% - 0px); transform: translateY(-50%);width: 55px !important; height: 55px !important; border-radius: 100% !important; background: transparent !important; border: 1px solid #cccccc !important;}
.loop-related .owl-prev { left:-50px; }
.loop-related .owl-next { right:-50px;;}
.loop-related .owl-prev:before, .loop-related .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: 20px; height: 20px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #cccccc; position: absolute; top:50%;  }
.loop-related .owl-prev:before { content: ""; transform:translate(-50%, -50%) rotate(-135deg);left: 60%;  }
.loop-related .owl-next:before { content: ""; transform:translate(-50%, -50%) rotate(45deg); left: 40%; }
.loop-related .owl-prev:hover:before, .loop-related .owl-next:hover:before { opacity: 0.8;}
.loop-related .owl-stage-outer {z-index: 2;}
.loop-related .owl-dots { position: absolute; z-index: 100; bottom:-45px; width: 100%; text-align: center !important; padding: 0 20px; }
.loop-related .owl-dots .owl-dot { border: 0px solid #c10000; background: transparent; margin-left: 8px;  margin-right: 8px; border-radius: 100%;}
.loop-related .owl-dots .owl-dot.active {  }
.loop-related .owl-dots .owl-dot span, .loop-related  .owl-dots .owl-dot span { background: transparent !important; width: 14px !important; height: 14px !important; margin: 0 auto!important;transition: all 0.4s ease-out 0s !important; border-radius: 0 !important; border-radius: 100% !important; border: 1px solid #89b2dd;}
.loop-related .owl-dots .owl-dot.active span/*, .loop-related  .owl-dots .owl-dot:hover span*/ { background: #89b2dd !important; }

.loop-related .application-detail-section-4-pro-list-link { width: 100%;  }

/*products*/
.products-top-tool { position: relative; padding: 0 30px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; margin-top: calc(-20px - 1.5%);}
.products-top-tool > a { padding: 12px 15px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border-right: 1px solid #fff; color: #fff; font-size: clamp(16px, 1.3vw, 18px); max-width: 135px; line-height: 1.1;}
.products-top-tool > a:last-child { border-right: 0px solid #fff;}
.products-top-tool > a:nth-of-type(1) { background: #a48b6a;}
.products-top-tool > a:nth-of-type(2) { background: #9cc23e;}
.products-top-tool > a:nth-of-type(3) { background: #f16633;}
.products-top-tool > a > img { display: inline-block; max-height: 40px; margin-right: 10px;}

.pro-search-bar { margin-bottom: calc(20px + 1%); padding-bottom: 10px;display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border-bottom: 2px solid #e5e5e5; padding-left: 10px; padding-right: 10px;}
.pro-search-bar > input { border-width: 0; width: calc(100% - 40px); background: none; line-height: 1; font-size: clamp(22px, 3vw, 40px); color: #666;}
.pro-search-bar > a { display: block; width: 40px;}
.pro-search-bar > a img { transition: all 0.4s ease-out 0s; }
.pro-search-bar > a:hover img { transform: scale(0.9);}

.pro-list { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 2%); }
.pro-list > a { padding: 0 2vw calc(20px + 2.5%) 2vw; width: 33.33%;}
.pro-list > a:hover .pro-list-pto-over{ opacity: 1;}
.pro-list > a:hover .pro-list-pto > span { border-color: #b2b2b2;}
.pro-list > a:hover .pro-list-name { color: #fff; background: #5691ce;}
.pro-list > a:hover .pro-list-arrow { transform: scale(1); background: #5691ce;}
.pro-list > a:hover .pro-list-arrow img { filter: invert(0) brightness(100%);}
.pro-list-name { text-align: center; font-weight: 500; color: #89b2dd; font-size: clamp(19px, 2.3vw, 30px); line-height: 1.1; padding: 10px 0;transition: all 0.4s ease-out 0s;}
.pro-list-pto { padding-bottom: 75.5%; position: relative;}
.pro-list-pto-over { content: ""; position: absolute;z-index: 4; width: 100%; height: 100%; top:0;  left: 0; background: rgba(0,0,0,.5);display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center;transition: all 0.4s ease-out 0s; opacity: 0;}
.pro-list-pto-over > div {  display: inline-block; line-height: 1; padding: 2px 8px 5px 8px; border-radius: 15px; border: 1px solid #fff; color: #fff; font-size: 16px;}
.pro-list-pto > span {  position: absolute; z-index: 5; width: 84px; height: 84px; border-style: solid; border-color: #b2b2b2;transition: all 0.4s ease-out 0s;}
.pro-list-pto > span:nth-of-type(1) {  border-width: 1px 1px 0 0; top: 22px; right: 22px;}
.pro-list-pto > span:nth-of-type(2) {  border-width: 0 0 1px 1px; bottom: 22px; left: 22px;}
.pro-list-arrow {  position: absolute; z-index: 6; bottom: 0 ; right: 0; width: 124px; height: 124px; transform-origin: 100% 100%; transform: scale(0.7);background: #dfdfdf;clip-path: polygon(100% 0%, 100% 100%, 0% 100%);transition: all 0.4s ease-out 0s;}
.pro-list-arrow img {  width: 40px; filter: invert(1) brightness(60%); position: absolute; right: 20%; bottom: 30%;}

/*products-list*/
.products-list-section { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 5%);}
.products-list-section > div:nth-of-type(1) { width: 254px;}
.products-list-section > div:nth-of-type(2) { width: calc(100% - 254px); padding-left: 32px;}

.aside-title-pro {position: relative;font-size: clamp(18px, 1.7vw, 20px); padding: 8px 35px 8px 10px !important; background: #5691ce;}
.aside-title-pro:after {position: absolute; content: ""; width: 18px; height: 10px; background: #fff;clip-path: polygon(0% 0%, 100% 0%, 50% 100%); top:50%; transform: translateY(-50%); right: 12px;}

.pro-fliter-section { background: #dfdfdf; padding: 15px; margin-top: 25px;}
.pro-fliter-section-pc { }
.pro-fliter-section-mobile { display: none;}
.pro-fliter-choice > div:nth-of-type(1) { border-bottom: 1px solid #4d4d4d; position:relative; padding: 8px 35px 8px 10px; cursor: pointer; font-size: 15px;}
.pro-fliter-choice > div:nth-of-type(1):after { content: "" ;position: absolute; width: 10px;height: 10px;top: 12px; right: 10px; border-width: 2px 2px 0 0;border-style: solid;border-color: #5691ce;transform: rotate(135deg);}
.pro-fliter-choice > div:nth-of-type(2) { display: none;}
.pro-fliter-choice-list { padding:5px 10px 10px 10px; display: flex; flex-direction: row; flex-wrap: wrap; }
.pro-fliter-choice-list > div { width: 50%;}

.pro-fliter-choice-open > div:nth-of-type(1) { color: #5691ce;}
.pro-fliter-choice-open > div:nth-of-type(1):after { border-color: #afafaf;transform: rotate(-45deg); top: 17px;}

.contact-note2 {  margin-top: 0px; display: inline-block;position: relative;padding-left: 22px; padding-right: 15px; padding-bottom: 0px; cursor: pointer; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; line-height: 130%; margin-bottom: 0;font-size: 15px; font-weight: 400;}
.contact-note2 input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 2px;left: 0;height: 16px;width: 16px;background-color: #fff; border: 1px solid #a4a4a4; border-radius: 100%;}
.contact-note2:hover input ~ .checkmark {background-color: #fff;}
.contact-note2 input:checked ~ .checkmark {border-color: #78a7d8;}
.checkmark:after {content: "";position: absolute;display: none;}
.contact-note2 input:checked ~ .checkmark:after {display: block;}
.contact-note2 .checkmark:after {left: 2px;top: 2px;width: 10px;height: 10px; background: #78a7d8; border-radius: 100%;}


.pro-fliter-title { background: #5691ce; line-height: 1; text-align: center; color: #fff; font-weight: 500;font-size: clamp(16px, 1.3vw, 18px); padding: 10px; display: block; margin-bottom: 5px;}
.pro-fliter-btn { padding:20px 0 5px 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content:space-between;}
.pro-fliter-btn > a { display: block; width: calc(50% - 3px); border: 1px solid #4d4d4d; border-radius: 12px; line-height: 24px; text-align: center; background: #fff; font-size: 15px;}
.pro-fliter-btn > a:hover { background: #5691ce; color: #fff;}

.pro-info-section { margin-bottom: calc(20px + 1%); position: relative; background: #dfdfdf;display: flex; flex-direction: row; flex-wrap: wrap; border-left: 5px solid #5691ce; min-height: 75px;}
.pro-info-section > div { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center;}
.pro-info-section > div:nth-of-type(1) { width: 225px; background: #999999;}
.pro-info-section > div:nth-of-type(2) { width: calc(100% - 225px); padding: 5px 10px; color: #4d4d4d; line-height: 1.3;}

.pro-list-2 { display: flex; flex-direction: row; flex-wrap: wrap;justify-content: space-between; align-items: flex-start;}
.pro-list-2 > div {width: calc(50% - 10px); margin-bottom: calc(20px + 2%); display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.pro-list-2 > div > div:nth-of-type(1) {width: 100%; border-bottom: 3px solid #5691ce; position: relative;}
.pro-list-2 > div > div:nth-of-type(1):hover .pro-list-pto-over {opacity: 1;}
.pro-list-2 > div > div:nth-of-type(2) {width: 100%; padding: calc(20px + 1%) 20px;}
.pro-list-2-pto { padding-bottom: 75.5%; display: block;}
.pro-list-2-link > a { display: block; color: #89b2dd; font-weight: 500;font-size: clamp(20px, 1.4vw, 24px); line-height: 1.4; padding-bottom: 8px;}
.pro-list-2-link-2 > a { display: block; color: #4d4d4d; line-height: 1.4; padding-bottom: 4px; position:relative; padding-left: 28px;font-size: clamp(16px, 1vw, 20px);}
.pro-list-2-link-2 > a:hover { color: #89b2dd;}
.pro-list-2-link-2 > a:before { content: "˙"; position: absolute; left: 8px; top: 0px;}

/*products-list-2*/
.pro-info-section-title-2 { background: #b9b9b9; width: 100%; text-align: center; position: relative; padding: 5px 0;font-size: clamp(20px, 1.7vw, 22px) !important;}
.pro-info-section-title-2:before { content: ""; position: absolute; background: #999999; width:16px; height: 8px;clip-path: polygon(0% 0%, 100% 0%, 50% 100%); left: 50%; transform: translateX(-50%); top: 0;}

.pro-third-menu { margin: 0 0 calc(10px + 2%) 0; display: flex; flex-direction: row; flex-wrap: wrap; overflow: auto; max-height: 220px;}
.pro-third-menu > a { width: 20%; text-align: center;border-right: 1px solid #666; font-size: clamp(16px, 1vw, 20px); line-height: 1.3;position: relative; padding: 14px 5px; margin-bottom: 15px;}
.pro-third-menu > a:hover, .pro-third-menu > a.current { color: #89b2dd; border-right: 1px solid #89b2dd;}
.pro-third-menu > a.current:after { position: absolute;content: ""; background: #89b2dd; width: 13px; height: 7px; clip-path: polygon(0% 0%, 100% 0%, 50% 100%); bottom: 0; left: 50%; transform: translateX(-50%);}

.pro-list-3 { display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -34px; }
.pro-list-3 > a {width: calc(33.33% - 34px); margin: 0 34px calc(20px + 2%) 0; display: block;}
.pro-list-3 > a:hover .pro-list-pto-over {opacity: 1;}
.pro-list-3-name {text-align: center; padding-top: 10px; color: #666;}

/*products-detail*/
.social-tool { padding-bottom: 15px; display: flex; flex-direction: row; flex-wrap: wrap;justify-content: flex-end; }
.social-tool > a { background: #a0a0a0; width: 36px; height: 36px; border-radius: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content:center; margin: 0 5px 5px 5px; }
.social-tool > a:hover { background: #89b2dd; }
.social-tool > a > img { max-width: 25px; max-height: 26px;}
.social-tool .sharethis-inline-share-buttons > .st-btn { display: inline-block !important; background: #a0a0a0 !important; border-radius: 50% !important; }
.social-tool .sharethis-inline-share-buttons > .st-btn:hover { background: #89b2dd !important; opacity: unset !important; top: 0 !important; }

.proudcts-detail-section { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-bottom: calc(20px + 4%); }
.proudcts-detail-section > div:nth-of-type(1) { width: 45%; position: relative;}
.proudcts-detail-section > div:nth-of-type(2) { width: 55%; padding-left: 5%;}

.products-icon-zoom {position: absolute; width: 88px; height: 88px; background: #b3b3b3;clip-path: polygon(100% 0%, 100% 100%, 0% 100%); bottom: 0; right: 0; }
.products-icon-zoom > img { max-width: 33px !important; position: absolute; bottom: 10px; right: 10px;}

.products-detail-tool { position: relative;}
   .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: inline-block;
      max-width: 800px; 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: 100%;
      width: 100%; margin-bottom: 25px;border: 0px solid #c4c4c4; background: #fff;
    }

    .mySwiper {
      height: auto;
      box-sizing: border-box; margin-bottom: calc(20px + 1%) !important;
    }

    .mySwiper .swiper-slide {border: 0px solid #c4c4c4;
      width: 25%;
      height: 100%;
      opacity: 0.4;
    }

    .mySwiper .swiper-slide-thumb-active {
      opacity: 1;
    }

.swiper-next, .swiper-prev { width: 10px !important; height: 40px !important; border-radius: 0%; background: #f2f2f2; border: 0px solid #074151; position: absolute; z-index: 2; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; top:50%; transform: translateY(-50%);}
.swiper-next:hover, .swiper-prev:hover { opacity: 0.6 !important;}
.swiper-next:after, .swiper-prev:after { content: ""; display: block; width: 6px; height: 6px ; border-width: 1px 1px 0 0; border-color: #666; border-style: solid; position: relative;}
.swiper-prev:after { transform: rotate(-135deg); left: 3px;}
.swiper-next:after { transform: rotate(45deg); right: 3px;}
.swiper-prev { left: -15px;}
.swiper-next { right: -15px;}

.proudcts-detail-title { border-bottom: 1px solid #b2b2b2; color: #89b2dd; font-weight: 400;font-size: clamp(24px, 3.5vw, 40px); line-height: 1.2; padding: 0 0 10px 0; margin: 0 0 20px 0;font-family: 'Noto Sans TC', sans-serif;}

.proudcts-detail-btn { display: flex; flex-direction: row; flex-wrap: wrap;}
.proudcts-detail-btn > div { padding: 0 5px 5px 0;}

.btn-type-1 { display: flex; flex-direction: row; flex-wrap: nowrap; width: 200px; align-items: center; justify-content: center; background: #89b2dd; padding: 6px 5px;}
.btn-type-1:hover { transform: scale(0.9);}
.btn-type-1 > div { padding-right: 15px;font-size: clamp(18px, 1.4vw, 24px); color:#fff !important;}
.btn-type-1 > img { width: 53px;}

.p-detail-bottom-section { }


.p-detail-spec_scroll { overflow: auto !important;height:600px; border: 1px solid #868686;}
.p-detail-spec { width: 100%; border-spacing:0px; border-collapse: inherit; }
.p-detail-spec tr:nth-child(odd) { background: #f7fafd;}
.p-detail-spec tr:nth-child(odd) td:nth-of-type(1) { background: #f7fafd;}
.p-detail-spec tr:nth-child(even) { background: #fff;}
.p-detail-spec tr:nth-child(even) td:nth-of-type(1) { background: #fff;}
.p-detail-spec th, .p-detail-spec td { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.3; padding: 5px 10px;text-align: center; font-weight: 400; border-bottom: 1px solid #868686; border-right: 1px solid #868686}
.p-detail-spec th:first-child { width: 20%;}
.p-detail-spec th:last-child, .p-detail-spec td:last-child { border-right: 10px solid #868686}
.p-detail-spec th { background: #89b2dd; color: #fff; font-weight: 500;}
.p-detail-spec tr.sticky {position: sticky;top: 0;z-index: 4;}
.p-detail-spec th.sticky, .p-detail-spec td.sticky {position: sticky;left: 0; z-index: 3;}

.btn-inquiry { display: inline-block; border: 1px solid #5691ce; border-radius: 13px; width: 130px; text-align: center; line-height: 1.1; color: #5691ce;font-size: clamp(14px, 1.3vw, 16px); padding: 7px 5px; margin: 5px 0;}
.btn-inquiry:hover { background: #5691ce; color: #fff;}

.p-detail-description { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; }
.p-detail-description > div:nth-of-type(1) { width: 40%; padding: 0 3%;}
.p-detail-description > div:nth-of-type(2) { width: 60%; }

.p-detail-description-spec { margin-bottom: 15px;}
.p-detail-description-spec > table { width: 100%; border-spacing: 0; border-collapse: inherit;}
.p-detail-description-spec > table th { color: #fff; text-align: center; font-weight: 700; }
.p-detail-description-spec > table td { font-weight: 400; }
.p-detail-description-spec > table th, .p-detail-description-spec > table td { font-size: 17px; line-height: 1.4; padding: 5px 1vw; }
.p-detail-description-note { color: #b2b2b2; font-size: 14px; line-height: 1.3; text-align: right;}

.p-detail-spec-2 { width: 100%; border-spacing: 1px; border-collapse: inherit; background: #000;}
.p-detail-spec-2 td { text-align: center; line-height: 1.4; font-weight: 400; padding: 10px 1vw; color: #000;font-size: clamp(16px, 1.5vw, 20px);}
.p-detail-spec-2 td:nth-child(odd) { background: #efefef;}
.p-detail-spec-2 td:nth-child(even) { background: #d4d4d4;}

.p-detail-download { margin: 30px 0; border-left: 2px solid #4c4c4c; display: flex; flex-direction: row; flex-wrap: wrap;}
.p-detail-download > div:nth-of-type(1) { width: 29%; border-right: 2px solid #4c4c4c; padding: 0 1.5vw; color: #4c4c4c; font-size: clamp(19px, 2vw, 32px);display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; line-height: 1.3;}
.p-detail-download > div:nth-of-type(2) { width: 71%; display: flex; flex-direction: row; flex-wrap: wrap;}
.p-detail-download > div:nth-of-type(2) > a { width: 25%; text-align: center; display: block; border-right: 2px solid #4c4c4c;padding: 0 1.5vw; }
.p-detail-download > div:nth-of-type(2) > a img { max-width: 90px; width: 100%; filter: grayscale(100);transition: all 0.4s ease-out 0s; }
.p-detail-download > div:nth-of-type(2) > a img:hover { filter: grayscale(0); transform: scale(0.9);}

.p-detail-download-2 > div:nth-of-type(1) { width: calc(100% - 180px); }
.p-detail-download-2 > div:nth-of-type(2) { width: 180px;}
.p-detail-download-2 > div:nth-of-type(2) > a { width: 100%; }

/*investors*/
.investors-second-menu-bar { margin-bottom: calc(20px + 1%); position: relative;background: rgba(210,233,246,.2);}
.investors-second-menu-bar > span { display: block; position: absolute; width: 100%; height: 100%;top: 0; left: 0;}
.investors-second-menu-bar > span:nth-of-type(1):before, .investors-second-menu-bar > span:nth-of-type(1):after, .investors-second-menu-bar > span:nth-of-type(2):before, .investors-second-menu-bar > span:nth-of-type(2):after { content: ""; position: absolute; display: inline-block;width: 118px; height: 48px; border-style: solid; border-color: rgba(137,178,221,.8);}
.investors-second-menu-bar > span:nth-of-type(1):before { top: 0; left: 0; border-width: 2px 0 0 2px;}
.investors-second-menu-bar > span:nth-of-type(1):after { bottom: 0; left: 0; border-width: 0 0 2px 2px;}
.investors-second-menu-bar > span:nth-of-type(2):before { top: 0; right: 0; border-width: 2px 2px 0 0;}
.investors-second-menu-bar > span:nth-of-type(2):after { bottom: 0; right: 0; border-width: 0 2px 2px 0;}

.investors-second-menu { position: relative; z-index: 3; padding: calc(20px + 1%) calc(20px + 1%) calc(10px + 1.2%) calc(20px + 1%); max-height: 250px; overflow-y: auto;display: flex; flex-direction: row; flex-wrap: wrap;}
.investors-second-menu > div { width: 33.33%; padding-right: 10px;}
.investors-second-menu > div > a { display: block; padding-left: 10px; line-height: 1.2; margin-bottom: 10px; position: relative;}
.investors-second-menu > div > a:hover, .investors-second-menu > div > a.current { color: #89b2dd;}
.investors-second-menu > div > a:before { position: absolute; content: ""; height: 100%; width: 4px; background: #89b2dd; top:0; left: 0; opacity: 0;}
.investors-second-menu > div > a:hover:before, .investors-second-menu > div > a.current:before { opacity: 1;}

.investors-title { margin-bottom: calc(10px + 1%); display: inline-block; text-align: center; padding: 10px 30px 10px 20px;background: #a58e5e;clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%); line-height: 1.1; font-size: clamp(18px, 1.4vw, 24px);; color: #fff;}

.investors-spec { width: 100%; border-spacing: 1px; border-collapse: inherit; background: #959595;}
.investors-spec tr:nth-child(odd) { background: #fff;}
.investors-spec tr:nth-child(even) { background: #f2f2f2;}
.investors-spec th { text-align: center; color: #fff; }
.investors-spec td { }
.investors-spec th, .investors-spec td { font-weight: 400; font-size: clamp(16px, 1.3vw, 20px); padding: 5px 1vw; line-height: 1.4;}

/*investors-2*/
.investors-2-spec tr:nth-child(even) { background: #fff;}

/*investors-3*/
.investors-3-title { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; padding-bottom: 10px; margin-bottom: 25px; border-bottom: 2px solid rgba(137,178,221,.8);}
.investors-3-title > div { color: #5582c1; line-height: 1.2;font-size: clamp(19px, 1.8vw, 28px); font-weight: 500;}
.investors-3-title > span { line-height: 1.2;}

.investors-3-spec { border-spacing: 0px}
.investors-3-spec tr:nth-child(odd) { background: #fff;}
.investors-3-spec tr:nth-child(even) { background: #fff;}
.investors-3-spec th { font-weight: 500;font-size: clamp(18px, 1.2vw, 22px);}
.investors-3-spec td { border-bottom: 2px solid rgba(137,178,221,.8); text-align: center;}
.investors-3-spec th, .investors-3-spec td { padding: 10px 1vw;}

.year-select { padding-bottom: 15px;}
.year-select select{  margin: 0px 0 0 0;  width:250px; background-image: url(../images/year-select.png); background-repeat: no-repeat; background-position: calc(100% - 12px) 25px; background-size: 16px 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none;   margin-right:4px; background-color: transparent;  font-size: clamp(19px, 1.8vw, 28px); font-weight: 500; border-width:1px; border-style: solid; border-color: #cacaca; mwidth: 100%; color:#5582c1; font-family: 'Noto Sans TC', sans-serif; height: 60px; padding: 0 35px 0 10px;  letter-spacing: 0;}
.year-select option { padding:1px 5px;}
.year-select select::-ms-expand {
    display: none;
}

/*investors-4*/
.investors-4-spec-line { background-image: linear-gradient( to top right, #89b2dd 50%, #959595, #89b2dd 51%) !important;position: relative;}
.investors-4-spec-name { position: absolute; }
.investors-4-spec-name-1 { right: 5%; top:5px;}
.investors-4-spec-name-2 { left: 5%; bottom:5px;}

.investors-4-spec th, .investors-4-spec td { padding: calc(5px + 1%) 1vw;}

/*investors-5*/
.investors-5-content { position:relative; padding: calc(20px + 5%); margin-bottom: calc(20px + 5%);}
.investors-5-content > span { display: block; position: absolute; z-index: -1; width: 100%; height: 100%;top: 0; left: 0;}
.investors-5-content > span:nth-of-type(1):before, .investors-5-content > span:nth-of-type(1):after, .investors-5-content > span:nth-of-type(2):before, .investors-5-content > span:nth-of-type(2):after { content: ""; position: absolute; display: inline-block;width: 150px; height: 114px; border-style: solid; border-color: rgba(137,178,221,.8);}
.investors-5-content > span:nth-of-type(1):before { top: 0; left: 0; border-width: 2px 0 0 2px;}
.investors-5-content > span:nth-of-type(1):after { bottom: 0; left: 0; border-width: 0 0 2px 2px;}
.investors-5-content > span:nth-of-type(2):before { top: 0; right: 0; border-width: 2px 2px 0 0;}
.investors-5-content > span:nth-of-type(2):after { bottom: 0; right: 0; border-width: 0 2px 2px 0;}

.investors-5-data { max-width: 900px; margin: 0 auto; text-align: left;}

/*investors-6*/
.investors-6-info { margin-bottom: calc(20px + 3%); display: flex; flex-direction: row; flex-wrap: wrap;}
.investors-6-info > div { width: 50%; }
.investors-6-info > div:nth-of-type(1) { padding-right: 5%;border-right: 1px solid #666666;}
.investors-6-info > div:nth-of-type(2) { padding-left: 5%;}

/*investors-7*/
.investors-7-spec a:hover { color:#5582c1 }
.investors-7-spec tr:hover { background: #F4F4F4; }

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

@media only screen and (max-width: 1365px) {
	.about-section-3-content-data { font-size: clamp(16px, 1.5vw, 18px);}
}

@media only screen and (max-width: 1279px) {
	.demo-section-2 { padding-left: 5%; padding-right: 5%;}
	
	header { background: rgba(255,255,255,0.9);}
	
	#content { padding-top: 95px;}
	
	.banner-title { padding: 0 5%; top:50%;}
	.banner-pc { display: none !important}
	.banner-mobile { display: block !important; }
	
	.layout-box-1 > div:nth-of-type(1) { width: 100%; top:auto; position: relative;margin-bottom: 20px;}
	.layout-box-1 > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0px; }
	.aside-title { display: none;}
	
	.ecatalog-section-1 > div:nth-of-type(1) { display: none;}
	
	.about-section-3 {background: url("../images/about-section3-bg.jpg") no-repeat center center / cover; padding: 30px;}
	.about-section-3-content{ flex-direction: column; padding-top: 0;}
	.about-section-3-content > div:nth-of-type(1) { order:2; transform: translateY(0); flex-direction: column; align-items: center; width: 100%; padding-right: 0; margin-bottom: 20px;}
	.about-section-3-content > div:nth-of-type(1) > div:nth-of-type(1) { order:2; }
	.about-section-3-content > div:nth-of-type(1) > div:nth-of-type(2) { order:1; }
	.about-section-3-content > div:nth-of-type(2) { order:1; width: 140px; height: 140px; margin-bottom: 20px; font-size: clamp(20px, 2.5vw, 42px);}
	.about-section-3-content > div:nth-of-type(3) { order:3;transform: translateY(0); flex-direction: column; align-items: center; width: 100%;  padding-left: 0; }
	.about-section-3-content-data { text-align: center !important; color: #fff;text-shadow: 0px 0px 8px #000; width:100%; padding: 0;}
	
	.loop2 .owl-prev, .loop-related .owl-prev { left:-35px; }
	.loop2 .owl-next, .loop-related .owl-next { right:-35px;;}
	.loop2 .owl-prev, .loop2 .owl-next, .loop-related .owl-prev, .loop-related .owl-next { transform: scale(0.65);}
	
	.job-section-1 { 
background-image: linear-gradient(90deg, rgba(248,248,248,0.95) 0%, rgba(248,248,248,0.7) 100%), url("../images/job-bg-1.jpg");
background-position: center center, left center;
background-repeat: no-repeat, no-repeat;
background-size: auto, cover;}
	.job-section-1-bottom > a { width: 100%; min-height: 128px; flex-direction: column; padding: 20px;}
	.job-section-1-bottom > a > div:nth-of-type(1) { padding: 10px 0 10px 0;}
	
.job-section-2 { 
background-image: linear-gradient(90deg, rgba(248,248,248,0.95) 0%, rgba(248,248,248,0.7) 100%), url("../images/job-bg-2.jpg");
background-position: center center, right center;
background-repeat: no-repeat, no-repeat;
background-size: auto, cover;}
.job-section-2 .job-content { margin: 0 auto 0 0;}
	
	.esg-section-1-title { padding-bottom: 50px;}
	.esg-section-1-content > div { width: calc(33.33% - 18px);}
	
	.esg-section-2 > div { width: 100%;}
	.esg-section-2 > div:nth-of-type(1) { order: 1;}
	.esg-section-2 > div:nth-of-type(2) { order: 2;}
	.esg-section-2 > div:nth-of-type(2) > div { height: auto;}
	.esg-section-2 > div:nth-of-type(2) > div:nth-of-type(1) { padding: 20px calc(20px + 1%);}
	.esg-section-2-icon { padding: 10px calc(20px + 1%) 20px calc(20px + 1%); top:auto; transform: translateY(0); position: relative;}
	
	.esg-2-pto { position: relative; top:auto; left: auto; transform: none; width: 100%; text-align: center; padding-bottom: 25px;}
	.esg-2-pto img { max-width: 200px;}
	.esg-2-section-1:after { display:none;}
	.esg-2-section-1 > div { width: 48.5%; margin-bottom: 20px !important; min-height: inherit;}
	
	.application-list-content { width: 250px;}
	.application-detail-menu { top:95px;}
	
	.products-top-tool { padding: 0 0 20px 0;}
	
	.products-list-section > div:nth-of-type(1) { width: 100%; margin-bottom: 20px;}
	.products-list-section > div:nth-of-type(2) { width: calc(100% - 0px); padding-left: 0px;}
	
	.pro-fliter-section-pc { display: none;}
	.pro-fliter-section-mobile { display: block;}
	
	.news-section-data{height: 57px;}
	
	.quality-section-2-content > div { width: 32%;}
	
	.esg-3-section-1-new-pto { width: 150px; height: 150px; }
	.esg-3-section-1-new-pto img { max-width: 80px; max-height: 80px;}
}

@media only screen and (max-width: 980px) {
	
	.btn01 { width: 160px; }
	.btn01 > span { font-size: 14px;}
	.btn01 > img { width: 30px;}
	
	.sub-menu-box { display: none;}
	
	.ecatalog-list > a { width: calc(33.33% - 45px);}
	
	.news-b-list > a { width: calc(50% - 50px);}
	
	.news-c-box-title { padding-top: 30px;}
	
	.video-list > a { width: calc(50% - 22px); }
	
	.about-section-1 > div:nth-of-type(1) { width: 100%; text-align: center; padding-bottom: 25px;}
	.about-section-1 > div:nth-of-type(2) { width: 100%; padding-left: 0%;}
	
	.about-section-2-top-bg { mix-blend-mode:normal;}
	.about-section-2-top-bg > div { width: 100%;}
	.about-section-2-top-content { flex-direction: column; width: 100%;}
	.about-section-2-top-content > div:nth-of-type(1) { width: 200px; padding-bottom: 30px;}
	.about-section-2-top-content > div:nth-of-type(2) { width: 100%; padding-left: 0px; padding-bottom: 30px;}
	.about-section-2-bottom-content {padding-top:400px; }
	
	.width-50-layout > div { width: 100%;}
	.location-info-title { height: auto;}
	
	.contact-section > div:nth-of-type(1) { width: 100%; border-bottom:1px solid #5582c1; border-right:0px solid #5582c1; padding-right: 0%; padding-bottom: 25px; margin-bottom: 25px;}
	.contact-section > div:nth-of-type(2) { width: 100%; padding-left: 0%;}
	.contact-section-title > img { max-width: 60px;}
	.contact-main textarea { height: 200px;}
	
	.contact-form .layout-nowrap img { max-width: 55px;}
	
	.esg-menu > a {min-width: 140px;margin: 0 5px 10px 5px;}
	
	.esg-section-1-content > div { width: calc(50% - 18px);}
	
	.application-list > a {  width: 100%; position:relative; margin-bottom: 35px; }
	
	.idx-app-box { padding: calc(20px + 5%) 30px; }
	.idx-app-box:before { width: 8px; height: 50px; top:-38px; }
	
	.application-detail-section-2-bottom > span { position: relative;top: auto;left: auto;transform: none;width: 100%; padding: 0 0 20px 0; }
	.application-detail-section-2-bottom > div { width: 46%; margin-bottom: 45px; }
	.application-detail-section-2-bottom > div:nth-child(odd) { padding-left: 0%;}
	.application-detail-section-2-bottom > div:nth-child(even) { padding-right: 0%;}
	
	.application-detail-section-3-pto { left: 0%; width: 100%; padding: 0 0; text-align: center;top:55%; transform:translateY(-50%);}
	.application-detail-section-3-pto img { max-width: 400px; width: 100%; }
	
	.application-detail-section-4-data-box > div:nth-of-type(1) { width: 100%; margin-bottom: 20px;}
	.application-detail-section-4-data-box > div:nth-of-type(2) { width: 100%;}
	
	.application-detail-section-4-pro-list { padding-left: 0;}
	
	.pro-list > a { width: 50%;}
	
	.pro-list-2 { align-items: flex-start;}
	.pro-list-2 > div { width: calc(50% - 10px); margin-bottom: 0;}
	.pro-list-2 > div > div:nth-of-type(1) {width: 100%; }
	.pro-list-2 > div > div:nth-of-type(2) {width: 100%; padding: calc(20px + 1%) 0px;}
	
	.p-detail-spec th:first-child { width: 15%;}
	
	.p-detail-description-spec > table th, .p-detail-description-spec > table td { font-size: 15px;}
	.p-detail-description > div:nth-of-type(1) { width: 100%; padding: 0 0% 30px 0; text-align: center;}
	.p-detail-description > div:nth-of-type(1) img { max-width: 450px; width: 100%;}
	.p-detail-description > div:nth-of-type(2) { width: 100%; }
	
	.p-detail-data .layout-nowrap { flex-direction: column;}
	
	.quality-section-2-top > div { height: 20px; width: 80px;}
	.quality-section-2-top::after { height: 30px;}
	
	.esg-2-section-1-new { }
	.esg-2-section-1-new > div:nth-of-type(1) { width: 100%; position:relative;padding-right: 0px; text-align: center; margin-bottom: 20px;}
	.esg-2-section-1-new > div:nth-of-type(1) img { max-width: 300px;}
	.esg-2-section-1-new > div:nth-of-type(1):before, .esg-2-section-1-new > div:nth-of-type(1):after { display: none;}
	.esg-2-section-1-new > div:nth-of-type(2) { width: 100%; }

	.esg-3-section-2-new-btn { width: 200px; line-height: 50px; }
	
	.esg-3-section-2-new { height: 500px;}
	.esg-3-section-2-new .esg-3-section-2-new-pto { object-fit: cover; width: 100%; height: 100%;}
}
@media only screen and (max-width: 768px) {
	.news-section > a { width: 100%; }
	
	.news-c-list > div { width: 50%; }
	
	.esg-3-section-1 > div:nth-of-type(1) { width: 100%; text-align: center; padding-bottom: 25px;}
	.esg-3-section-1 > div:nth-of-type(2) { width: 100%; padding-left: 0px;}
	.esg-3-section-1b > div:nth-of-type(2) { padding-right: 0px;}
	.esg-3-section-2 > div { width: 33.33%; }
	
	.pto-pc { display: none ;}
	.pto-mobile { display: block;}
	
	.application-detail-section-4-title-btn { margin-bottom: 20px; justify-content: center;}
	
	.application-detail-section-4-title-2 > div:nth-of-type(1) { width: 60px;}
	.application-detail-section-4-title-2 > div:nth-of-type(2) { width: calc(100% - 60px - 10px); }
	
	.application-detail-section-4-pro-list-link { width: 50%;}
	
	.loop-related { margin-bottom: calc(30px + 9%);}
	
	.p-detail-download { border-width: 0;}
	.p-detail-download > div:nth-of-type(1) { width: 100%; border-right: 0px solid #4c4c4c; padding: 0 0 25px 0; }
	.p-detail-download > div:nth-of-type(2) { width: 100%; }
	.p-detail-download > div:nth-of-type(2) > a { padding: 0 15px; }
	
	.p-detail-download-2 > div:nth-of-type(2) > a { padding: 0 0 10px 0; text-align: left; border-bottom: 1px solid #4c4c4c; border-right-width: 0;}
	.p-detail-download-2 > div:nth-of-type(2) > a img { max-width: 50px;}
	
	.investors-second-menu { max-height: 200px;}
	.investors-second-menu > div { width: 100%;}
	
	.quality-section-1-content > div { width: 100%;}
	
	.esg-2-section-1-new > div:nth-of-type(2) > div { width: 49%;}
	
	.esg-3-section-1-new > div { width: 48%; padding: 25px;}
	
	.esg-2-appreciation > div { width: 33.33%;}
}
@media only screen and (max-width: 640px) {
	.faq-list > div:nth-of-type(1) {order: 2; width: 100%;}
	.faq-list > div:nth-of-type(2) {order: 1; width: 100%; margin-bottom: 20px;}
	
	.news-detail-bottom-tool { justify-content: center; flex-direction: column;}
	.news-detail-bottom-tool > div:nth-of-type(1) { padding-bottom: 25px;}
	.btn-back > span {  width: 44px; height: 44px; }
	.btn-back > span img {  width: 26px;}
	.share-box > div > a {  width: 32px; height: 32px;}
	.share-box > div > a > img {  max-width: 20px; max-height: 20px; }
	.news-detail-final-section > a { width: 100%; }
	.news-detail-final-section > a:nth-of-type(1) { border-bottom: 1px solid #636363;border-right: 0px solid #636363; }
	
	.about-section-4-bottom-content-data > div { transform: translateX(-50%) scale(0.7); padding: 0 10px;}
	
	.about-section-5-content:after { left: 15px; transform: translateX(0%); }
	.about-section-5-content > div  {width: 100%}
	.about-section-5-content > div > div:nth-of-type(1) {width: calc(100% - 80px); margin-top: 30px; }
	.about-section-5-content > div > div:nth-of-type(2) {width: 60px; height: 60px; font-size: 18px; }
	.about-section-5-content > div:nth-child(odd) > div:nth-of-type(1) {order: 2;}
	.about-section-5-content > div:nth-child(odd) > div:nth-of-type(2) {order: 1;}
	.history-2019 { text-align: left; }
	.history-2019 , .history-2018 { margin-top: 0; }
	.history-2019 img, .history-2018 img { max-width: 200px; width: 100%; }
	
	.esg-2-section-1 > div { width: 100%;}
	
	.idx-application-box2 > div:nth-of-type(1) { width: 100%; margin-bottom: 10px;}
	.idx-application-box2 > div:nth-of-type(2) { width: 100%; margin-left: 0px;}
	.idx-application-box2-line { display: none;}
	.idx-application-box2 .idx-app-box  { padding: calc(20px + 5%) 30px}
	
	.pro-info-section > div:nth-of-type(1) { width: 100%;}
	.pro-info-section > div:nth-of-type(2) { width: 100%;}
	
	.pro-third-menu { display: none;}
	.pro-list-3 > a {width: calc(50% - 34px); }

	.proudcts-detail-section > div:nth-of-type(1) { width: 100%;}
	.proudcts-detail-section > div:nth-of-type(2) { width: 100%; padding-left: 0%;}
	.swiper-prev { left: -10px;}
	.swiper-next { right: -10px;}
	
	.investors-6-info > div { width: 100%; }
	.investors-6-info > div:nth-of-type(1) { padding-right: 0%;border-bottom: 1px solid #666666;border-right: 0px solid #666666; padding-bottom: 20px; margin-bottom: 20px;}
	.investors-6-info > div:nth-of-type(2) { padding-left: 0%;}

	.quality-section-2-content > div { width: 48%;}
}
@media only screen and (max-width: 570px) {
	.banner { height: 200px;}
	
	.ecatalog-list { margin-right: -25px;}
	.ecatalog-list > a { width: calc(50% - 25px); margin: 0 25px calc(20px + 2.5%) 0;}
	
	.video-list > a { width: calc(100% - 22px); }
	
	.loop2 .owl-prev, .loop-related .owl-prev { left:-25px; }
	.loop2 .owl-next, .loop-related .owl-next { right:-25px;;}
	
	.esg-section-1-content > div { width: 100%; margin-left: 0; margin-right: 0;}
	
	.application-list-content { width: 70%;}
	
	.application-detail-section-2-bottom > div { width: 100%; background: #f2f2f2; }
	
	.contact-form-50 > div { width: 100%;}
	.contact-form-25 > div:nth-of-type(1) { width: 100%; }
	.contact-form-25 > div:nth-of-type(2) { width: 100%; }
	.contact-form-25 > div:nth-of-type(3) { width: 100%; }
	
	.products-top-tool > a { width: 33.33%; max-width: inherit; justify-content: center;}
	
	.pro-list-pto > span { width: 40px; height: 40px;}
	.pro-list > a { width: 100%;}
	
	.esg-3-section-1-new > div { width: 100%;}
	
	.esg-2-appreciation > div { width: 50%;}
}

@media only screen and (max-width: 414px) {
	.news-b-list > a { width: calc(100% - 50px);}
	
	.news-c-list > div { width: 100%; }
	
	.application-detail-section-4-pro-list-link { width: 100%;}
	
	.products-top-tool > a { flex-direction: column; text-align: center;}
	.products-top-tool > a  > img { margin-right: 0; padding-bottom: 6px;}
	
	.pro-list-2 > div { width: 100%; }
	
	.pro-list-3 > a {width: calc(100% - 34px); }
	
	.about-section-2-bottom-content {padding-top:320px; }
	
	.esg-2-section-1-new > div:nth-of-type(2) > div { width: 100%;}
}

@media only screen and (max-width: 320px) {
	.banner { height: 150px;}
	
	.ecatalog-list > a { width: calc(100% - 25px); }
	
	.about-section-4-bottom-content-data > div { transform: translateX(-50%) scale(0.5); bottom: 13%;font-size: clamp(16px, 1.6vw, 25px);}
	
	.quality-section-2-content > div { width: 100%;}
}
@media only screen and (max-width: 280px) {
	.application-detail-section-3 { height: 450px;}
	
}