@charset "utf-8";

@import url("setting.css");

a{ color: var(--color-02); text-decoration:none; transition:0.2s all;}
a:hover{ color: var(--color-01); text-decoration: none;}
a:focus{ text-decoration: none;}

.container{ max-width: 1240px; padding: 0 20px; }
.container.w2{ max-width: 727px; }

/*** HEADER ***/
header{ width: 100%; height: var(--height-01); padding: 0; background: var(--color-04); position: fixed; top: 0; z-index: 999; }

.logo{ float: left; width: 280px; height: 40px; margin: 15px 0; padding: 0; background: url('../../img/pic-logo.png') center center no-repeat; background-size: cover; text-indent: -9999px;}
.logo a{ width: 245px; height: 40px; display: block; }
/*** /HEADER ***/

/*** MENU ***/
ul.menu{ float: right; margin: 0px 0 0 0; padding: 0; list-style: none; }
ul.menu li{ float: left; margin: 0 0 0 30px; color: var(--color-03); font-size: 1.125em; }
ul.menu li.dot{ font-family: "Noto Sans TC", sans-serif; font-size: .75em; line-height: 32px; transform:scale(0.4); }
ul.menu li > a{ padding: 20px 0; color: var(--color-03); display: block; }
ul.menu li a:hover{ color: var(--color-01); }

.dropbtn { margin: 0; padding: 20px 0; color: var(--color-03); background: none; border: 0; transition:0.2s all; }
.dropbtn:hover{ background: #000 !important; }
.dropdown { position: relative; display: inline-block;}
.dropdown-content { padding: 10px; font-size: .813em; display: none; position: absolute; top: 60px; background-color: var(--color-05); min-width: 180px; box-shadow: 0px 0px 16px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a { color: var(--color-02); padding: 5px 10px; text-align: left; text-decoration: none; display: block;}
.dropdown-content a:hover {background-color: var(--color-bg);}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn { color: var(--color-01); background-color: var(--color-bg);}
/*** /MENU ***/

/*** SIDEBAR ***/
.btn_toggle{ display: none; }

#sidebar { width: 250px; height: 100vh; position: fixed; top: var(--height-01); right: -250px; z-index: 998; background: var(--color-bg); color: var(--color-03); transition: all 0.2s; overflow-y: scroll; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);}
#sidebar.active { right: 0;}
/* #dismiss { width: 35px; height: 35px; line-height: 45px; text-align: center; color:  var(--color-bg); background: none; position: absolute; top: 7px; right: 10px; cursor: pointer; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;} */
.overlay { width: 100vw; height: 100vh; display: none !important; position: fixed !important; background: rgba(0, 0, 0, 0.7); z-index: 901; opacity: 1; transition: all 0.5s ease-in-out;}
.overlay.active { display: block !important; opacity: 1;}

#sidebar .accordion{ height: calc(100vh - var(--height-01)); border: 0; overflow-y: auto !important;}
#sidebar .accordion-item{ border: 0; border-radius: 0; }
#sidebar .accordion-collapse{ border: 0; }
#sidebar .accordion-body{ padding: 5px; border: 0; }
#sidebar .accordion-body a{ padding: 10px 15px; color: #000; display: block; }
#sidebar .accordion-button{ color: #fff; border: 0; border-radius: 0 !important; }
#sidebar .accordion-button.nocollapsed, .accordion-button.nocollapsed::after{ color: #fff; background: none; background: var(--color-bg); box-shadow: none; }
#sidebar .accordion-button[aria-expanded="false"]{ color: #fff; background: var(--color-bg);}
#sidebar .accordion-button[aria-expanded="true"]{ color: #fff; background: var(--color-01);}
#sidebar .accordion-button[aria-expanded="false"]:after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;}
#sidebar .accordion-button[aria-expanded="true"]:after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;}
/*** /SIDEBAR ***/

/*** SECTION ***/
/*** /SECTION ***/

/*** LIST ***/
/*** /LIST ***/

/*** BREADCRUMB ***/
ol.bread{ margin: 10px 0 0 0; padding: 0; text-align: center;}
.bread-item{ color: #ddd; font-size: .75em; display: inline-block; }
.bread-item:after{ margin: 0 5px 0 8px; content: '/'; }
.bread-item:last-child:after{ content: ''; }
.bread-item.active{ color: var(--color-01); font-weight: bold; }
ol.bread a{ color: #ddd; }
ol.bread a:hover{ color: var(--color-01); }
/*** /BREADCRUMB ***/

/*** ABOUT ***/
/*** /ABOUT ***/

/*** PRODUCT ***/
/*** /PRODUCT ***/

/*** CONTACT ***/
.gmap{ width: 100%; height: 355px; margin-top: 20px; }
/*** /CONTACT ***/

/*** CNT ***/
main{ margin-top: var(--height-01); }

section{ padding: 80px 0; position: relative; }
section h2{ margin-bottom: 40px; letter-spacing: 5px; text-indent: 5px; }
section .h2_info{ margin-top: -20px; display: block; }

.bnr{ height: 750px; background: url('../../img/pic-bnr.jpg') center center no-repeat; background-size: cover; position: relative; display: flex; align-items: center; justify-content: center; }
.bnr_txt{ width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; position: absolute; z-index: 1; }
.bnr_txt p{ font-size: 5.375em; font-weight: 900; line-height: 1.125em; }
.bnr_txt span{ margin-top: 20px; font-size: 1.875em; display: block; }

.bnr_inner{ padding: 50px 0; background: url('../../img/pic-bnr_inner.jpg') center center no-repeat; background-size: cover; text-align: center; }

#i_promo{ background: url('../../img/bg-circle.png') right center no-repeat; }
.i_thumb{ width: calc(100% - 0px); margin-top: -84px; position: relative; top: -60px; }
.thumb_wrap{ background: var(--color-04); border: 0; display: flex; align-items: stretch; flex-wrap: nowrap; }
.thumb_txt{ padding: 40px; flex-basis: calc(100% - 200px); }
.thumb_txt h3{ margin-bottom: 20px; }
.thumb_txt h3 i{ margin-right: 10px; color: var(--color-01);}
.thumb_txt p{ font-size: 1em; }
.thumb_img{ flex-basis: 200px; }
.thumb_img img{ width: 100%; height: auto; }

.i_intro{ padding: 0px 0 0 0; text-align: center; }
.intro_wrap h3 span{ margin-top: 15px; color: var(--color-03); display: block; }
.intro_wrap i{ font-size: 1.5em; color: var(--color-01); }

.i_intro2{ padding: 0px 0 0 0; text-align: center; }
.i_intro2 > div h3{ border-right: 1px solid #fff; }
.i_intro2 > div p{ text-align: left; }
.intro_wrap2{ padding: 40px 0; border: 1px solid #fff; border-radius: 10px; display: flex; align-items: center; }
.intro_wrap2 h3{ margin: 0 !important; padding: 20px; flex-basis: 250px;}
.intro_wrap2 h3 span{ margin-top: 15px; color: var(--color-03); display: block; }
.intro_wrap2 i{ font-size: 1.5em; color: var(--color-01); }
.intro_wrap2 p{ padding: 40px; flex-basis: calc(100% - 250px); }

#i_pdt{ background: #fff; }
.box_wrap{ margin: 2px 2px; padding: 0px; background: #fff; transition:0.2s all; }
.box_wrap .box_img{ transition:0.2s all; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0); }
.box_wrap:hover .box_img{ transform: scale(1.25, 1.25); }
.box_wrap .box{ width: 100%; height: 100%; position: relative; overflow: hidden; }
.box_wrap .box img{ width: 100%; height: auto; }
.box_wrap .txt{ padding: 20px; background: var(--color-05); }
.box_wrap .txt h5{ margin-bottom: 20px; }
.box_wrap .txt p{ font-size: .875em; }
a .box_wrap p, a:hover .box_wrap p{ color: #fff; }

#i_cont{ background: url('../../img/bg-i_cont.png') center center no-repeat; background-size: cover; }
.i_cont_wrap{ display: flex; }
.i_cont_txt{ flex-basis: calc(100% - 180px); }
.i_cont_btn{ flex-basis: 180px; text-align: right; }
.i_cont_btn button{ margin-top: 0; }

.inner:nth-child(2n+1){ background: var(--color-08); }
.innerwhite { background: #fff; }
.inner h3{ margin-bottom: 40px; color: var(--color-01); }
.inner h4{ margin-bottom: 12px; color: var(--color-07); }
.inner ul, .inner ol{ margin: 0 0 0 20px; padding: 0; }
.inner ul li, .inner ol li{ margin-bottom: 10px; }
.inner p{ text-align: justify; }

.timeline { margin-top: 40px; padding: 40px 0; position: relative;}
.timeline-nodes { padding-bottom: 25px; position: relative;}
.timeline-nodes:nth-child(even) { flex-direction: row-reverse;}
.timeline h3, .timeline p { padding: 0;} 
.timeline h3{ font-weight: lighter; background: var(--color-01);}
.timeline p, .timeline time { color: var(--color-03);}
.timeline::before { width: 0; height: 100%; content: ""; display: block; position: absolute; top: 0; left: 50%; border-left: 2px dashed var(--color-01); z-index: 1; transform: translateX(-50%);}
.timeline-content { padding: 0 20px 20px 20px; border: 1px solid var(--color-01); position: relative; border-radius: 0 0 10px 10px; box-shadow: 0px 3px 25px 0px rgba(10, 55, 90, 0.2)}
.timeline-content h3{ margin-bottom: 20px; padding: 15px 20px; }
.timeline-content p{ line-height: 1.5em; }
.timeline-nodes:nth-child(odd) h3, .timeline-nodes:nth-child(odd) p { text-align: right;}
.timeline-nodes:nth-child(odd) .timeline-date { text-align: left;}
.timeline-nodes:nth-child(even) .timeline-date { text-align: right;}
.timeline-nodes:nth-child(odd) .timeline-content::after { width: 0; content: ""; position: absolute; top: 5%; left: 100%; border-left: 10px solid var(--color-01); border-top: 10px solid transparent; border-bottom: 10px solid transparent;}
.timeline-nodes:nth-child(even) .timeline-content::after { width: 0; content: ""; position: absolute; top: 5%; right: 100%; border-right: 10px solid var(--color-01); border-top: 10px solid transparent; border-bottom: 10px solid transparent;}
.timeline-image { position: relative; z-index: 100;}
.timeline-image::before { width: 20px; height: 20px; content: ""; border: 2px dashed var(--color-01); border-radius: 50%; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 40%); z-index: 1; background-color: var(--color-bg);}
.timeline-image img { position: relative; z-index: 100;}

.accordion{ border: 0;}
.accordion-item{ border-bottom: 1px solid #ccc !important; }
.accordion-collapse{ border: 0; }
.accordion-body{ padding: 20px; border: 0; }
.accordion-body a{ padding: 10px 15px; color: #000; display: block; }
.accordion-button{ color: #fff; border: 0; border-radius: 0 !important; }
.accordion-button.nocollapsed, .accordion-button.nocollapsed::after{ color: #fff; background: none; background: var(--color-bg); box-shadow: none; }
.accordion-button[aria-expanded="false"]{ color: #fff; background: var(--color-bg);}
.accordion-button[aria-expanded="true"]{ color: #fff; background: var(--color-01);}
.accordion-button[aria-expanded="false"]:after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;}
.accordion-button[aria-expanded="true"]:after { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;}

.p_wrap{ padding: 20px; border: 1px solid #ccc; }
.p_wrap > h4:first-child{ margin-bottom: 30px; color: var(--color-01); }
.p_no{ margin-top: 10px; color: #ccc; font-size: .6em; font-weight: 400; display: block; }

.finfo{ margin: 0 !important; padding: 0; list-style: none; }
.finfo li{ margin-bottom: 5px; overflow: hidden; }
.finfo li:last-child{ margin-bottom: 0; }
.finfo li h3{ margin-bottom: 10px; }
.finfo li a{ color: #fff; }
.finfo li a:hover{ color: var(--color-01); }
.finfo li i{ float: left; width: 16px; margin-right: 10px; line-height: 1.5em; text-align: center; }
.finfo li p{ float: left; width: calc(100% - 26px); margin: 0; padding: 0; font-size: 16px; line-height: 1.45em;}

form h3{ margin-bottom: 20px !important; }
input[name="keyword"]{ border-bottom: 1px solid var(--color-05) !important; }

.swiper_main{ background: #fff; }
.swiper_thum{ margin-top: 3px; }
.swiper_main .swiper-slide img{ cursor: zoom-in; }
.swiper_thum .swiper-slide img{ cursor: pointer; }
.swiper-slide{ position: relative; overflow: hidden; text-align: center; background: #fff; }
.swiper-slide img{ width: 100%; height: auto; max-height: 590px; }
.swiper-slide .zoomin{ width: 50px; height: 50px; color: #fff; text-shadow: 0 0 5px rgba(0, 0, 0, .75); font-size: 1.25em; line-height: 50px; background: rgba(255, 144, 0, .9); border-radius: 50px; position: absolute; top: 5px; right: 5px; z-index: 5; text-align: center; }

.quote_1{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.quote_2{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.feature_wrap{ background: #000; text-align: center; }
.feature_wrap{ padding: 10px; }
.feature_wrap .feature_ico{ color: var(--color-01); font-size: 2em; }
.feature_wrap p{ margin-top: 5px; font-size: .813em; text-align: center; }

.cnt_border{ border-right: 1px solid #ccc; }

.attach i{ margin-right: 8px; }

.r_wrap{ margin-top: 20px; padding-bottom: 20px; overflow: hidden; border-bottom: 1px solid #ccc; }
.r_img{ float: left; width: 100px; margin-right: 20px; }
.r_img img{ width: 100%; height: auto; }
.r_txt{ float: left; width: calc(100% - 120px); }
/*** /CNT ***/

/*** PAGINATION ***/
.pagination{ margin: 50px 0 0 0px !important; }
.pagination .page-item, .pagination .page-item a{ border-radius: 0 !important; }
.pagination a{ color: #666; }
.pagination a:hover{ color: var(--color-02); background: var(--color-04); }
.pagination .active .page-link{ background: var(--color-01); border-color: var(--color-01); }
/*** /PAGINATION ***/

/*** FOOTER ***/
footer{ margin: 0; padding: 80px 0 180px 0; font-size: 1em; background: var(--color-06) url('../../img/bg-footer.png') left bottom no-repeat; overflow: hidden; }
footer .flogo{ width: 280px; height: 40px; margin: 0 0 10px 0; padding: 0; background: url('../../img/pic-logo.png') center center no-repeat; background-size: cover; text-indent: -9999px;}
footer .flogo a{ width: 245px; height: 40px; display: block; }
footer .copyright{ width: 100%; display: block; clear: both; }
footer h3{ margin-bottom: 20px; font-size: 1.25em; }
footer p{ font-size: 1em; line-height: 1.875em; }
footer a{ display: inline-block; }
ul.f_txt{ margin: 0; padding: 0; list-style: none; }
/*** /FOOTER ***/

/*** CAPTCHA ***/
#captcha_code{ float: left; width: 120px; text-align: center; }
.captcha_wrap{ float: left; margin: 10px 0 0 10px; }
/*** /CAPTCHA ***/

/*** MODAL ***/
.modal{ z-index: 999999; }
.modal-header{ color: #fff; background: var(--color-01); }
.modal-open { padding-right: 0 !important;} 
.modal-backdrop { opacity: .9 !important; }
.modal-content{ position: relative; }
.btn-close-wrap{ background-color: #2faeff; border-radius: 0; border-top-right-radius: 5px; border-bottom-left-radius: 5px; position: absolute; top: 0; right: 0; z-index: 10; }
.btn-close{ padding: 15px 15px;}
.modal-body{ padding: 30px 30px 30px 30px; color: #333; overflow: hidden; }
.modal-body h4{ font-weight: 700; line-height: 1.25em; text-align: center; }
.modal-body h4 span{ font-size: .6em; font-weight: 400; display: block; text-transform: uppercase; }
.modal-body button{ margin-top: 5px; margin-bottom: 5px; }
/*** /MODAL ***/

/*** BTN ***/
.btn{ margin-top: 20px; padding: 13px 25px; border-radius: 0; line-height: 1em; transition:0.2s all !important; }
.btn_wrap{ width: 100%; margin:30px 0 0 0; }
.btn-lg{ margin-top: 30px; padding: 20px 40px; font-size: 1.5em; }

.btn-primary{ background: var(--color-01) !important; border-color: var(--color-01) !important; }
.btn-primary:hover, .btn-primary:focus{ color: var(--color-01); background: var(--color-02) !important; border-color: var(--color-01) !important;}

.btn-outline-light{ background: none !important; border-color: var(--color-03) !important; }
.btn-outline-light:hover, .btn-outline-light:focus{ color: var(--color-03); background: var(--color-01) !important; border-color: var(--color-01) !important;}
/*** /BTN ***/

/*** POPOVER ***/
[data-bs-toggle="popover"]{ cursor: pointer; }
.popover{ padding:5px; border: 5px solid #ccc; border-radius: 10px; }
.popover-arrow{ display: none !important; }
/*** /POPOVER ***/


@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chrome */
}

@supports (display:-ms-grid) { /* Edge */
}