@charset "utf-8";

@import url("setting.css");

body{ padding-top: 100px; transition:0.2s all; }
body.active{ padding-top: 70px; }

a{ color:#333; text-decoration:none; transition:0.2s all;}
a:hover{ color:#0359a4; text-decoration: none;}
a:focus{ text-decoration: none;}

main{ background: #fff; }

.container{ max-width: 1240px; padding: 0 20px; }
.container.w100{ max-width: 100%; }
.container.w2{ max-width: 1400px; }
.container.w3{ max-width: 951px; }
.container.w3{ max-width: 728px; }
.container.w4{ max-width: 546px; }

/*.row{ margin-right: -12px !important; margin-left: -12px !important; }*/

/*** PRELOAD ***/
.spinner-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.95); z-index: 999999; background:#fff url("../../img/Preloader_10.gif") center center no-repeat;}
.none { transition: all 1.7s ease; opacity: 0;}
.none2 { display: none;}
/*** /PRELOAD ***/

/*** HEADER ***/
header{ width: 100%; height: 100px; padding: 20px 0; background: #fff; overflow: hidden; position: fixed; top: 0; z-index: 999; transition:0.2s all; }

.logo{ float: left; width: 307px; height: 60px; background: url('../../img/pic-logo.png') center center no-repeat; background-size: cover; text-indent: -9999px; transition:0.2s all;}
.logo a{ width: 307px; height: 60px; display: block; }

.menu{ float: right !important; transition:0.2s all; }
.menu li{ float: left; margin: 16px 0 0 37px; color: #333; font-size: 1.125em; }
.menu li a{ color: #333; }
.menu li a:hover{ color: #0359a4; }

header.active{ height: 70px; padding: 10px 0; position: fixed; z-index: 999; box-shadow: 0 0 5px rgba(0, 0, 0, .45);}
header.active .logo{ width: 256px; height: 50px;}
header.active .menu li{ margin-top: 10px; }
/*** /HEADER ***/

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

#sidebar { width: 250px; height: 100vh; position: fixed; top: 0; right: -250px; z-index: 998; background: #0359a4; color: #fff; 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: #fff; 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: calc(100vh + 30px); margin-top: -30px; 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 ul.components { padding: 86px 0 0 0; transition: all 0.1s;}
#sidebar ul.components.active { padding: 56px 0 0 0;}
#sidebar ul p { color: #fff; padding: 10px;}
#sidebar ul li{ border-bottom: 1px dashed rgba(255, 255, 255, .5); }
#sidebar ul li span{ background: #7f268a; border-top: 1px solid rgba(255, 255, 255, .15); display: block; }
#sidebar ul li a { padding: 10px 15px; color: #fff; font-size: 1.25em; display: block;}
#sidebar ul li a:hover { color: #fff;}
/*** /SIDEBAR ***/

/*** BANNER ***/
.banner_wrap iframe{ width: 100%; }
.banner_wrap img{ width: 100%; height: auto; display: none; }
.embed-responsive { height: 0; padding: 0; position: relative; display: block; overflow: hidden;}
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; border: 0;}
.embed-responsive-16by9 { padding-bottom: 56.25%;}
.embed-responsive-4by3 { padding-bottom: 75%;}
/*** /BANNER ***/

/*** BOX ***/
.box_wrap{ margin: 6px 0; padding: 0; background: #fff; border: 1px solid #ccc; transition:0.2s all; }
.box_wrap .box_img_wrap{ position: relative; overflow: hidden; }
.box_wrap .box_img{ transition:0.2s all; -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0);}
.box_wrap .box_img img{ width: 100%; height: auto; }
.box_wrap .box_txt{ padding: 20px; }
.box_wrap .box_txt h3{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.box_wrap .box_txt .date{ margin-top: 15px; color: #666; }
.box_wrap .box_txt i{ margin-right: 5px; }
.box_wrap .box_txt p{ height: 48px; }
a:hover .box_img{transform: scale(1.1);}
/*** /BOX ***/

/*** SECTION ***/
section{ padding: 80px 0; }
section h2{ margin-bottom: 40px; text-align: center; }
section h3{ margin-bottom: 40px; line-height: 1.5em; }
/*** /SECTION ***/

/*** LIST ***/
.box{}
/*** /LIST ***/

/*** BREADCRUMB ***/
nav[aria-label="breadcrumb"]{ padding:8px 0 7px 0; font-size: .875em; color: #999; background: #f9f9f9; border-top: 0px solid #ddd; border-bottom: 1px solid #ddd; }
ol.breadcrumb{ margin: 0; padding: 0;}
.breadcrumb-item:before{ color: #999 !important; }
.breadcrumb-item.active{ color: #9d1c2b; font-weight: bold; }
ol.breadcrumb a{ color: #999; }
ol.breadcrumb a:hover{ color: #9d1c2b; }
/*** /BREADCRUMB ***/

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

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

/*** CNT ***/
#about h2{ text-align: left; }
#about ul{ margin-top: 20px; }
#about li{ margin: 0 0 0 26px; padding: 0 0 0 0px; color: #c00; list-style: disc !important; }
.about_img{ width: auto; height: 361px; margin-right: 20px; }
.about_img2{ width: auto; height: 361px; margin-left: 20px; }

#product{ background: #f3f3f3; }
#product.inner .row{ margin-top: -6px; margin-bottom: -6px; }
#product.inner .collist{ margin-top: 6px; margin-bottom: 6px; }

#f_contact{ height: 400px; padding: 0; background: url('../../img/bg-f_contact.jpg') center center no-repeat; background-size: cover; }
#f_contact .model{ height: 400px; background: url('../../img/pic-f_contact_model.png') center bottom no-repeat; background-size: auto 380px; }
#f_contact .text{ text-align: center; }
#f_contact p{ margin-top: 129px; color: #fff; font-size: 2.25em; font-weight: bold; text-shadow: 0 0 10px rgba(0, 0, 0, 1); }
#f_contact span{ margin: 0 18px; display: inline-block; }

.inner_banner{ color: #fff; background: url('../../img/bg-inner_banner.jpg') center center no-repeat; background-size: cover; text-align: center; }
.inner_banner h2{ padding: 58px 0 62px 0; }

#contact h2{ text-align: left; }
#contact li{ margin: 0 0 10px 0; }
#contact li i{ margin-right: 8px; }

.pdt_ask_wrap{ margin-top: 10px; padding: 10px; border: 1px solid #ccc; }
.pdt_ask_wrap:hover{ border-color: #0359a4; }
.pdt_ask_wrap p{ margin-bottom: 10px; color: #bbb; }
.pdt_ask_wrap label{ margin-right: 20px; font-weight: 400; display: inline-block; }

.pdt_info li{ margin-bottom: 10px; overflow: hidden; }
.pdt_info li span{ float: left; width: 74px; margin-right: 10px; padding: 0 5px 2px 5px; color: #fff; background: #0359a4; border-radius: 5px; }
.pdt_info li p{ float: left; width: calc(100% - 84px); }
.pdt_info_img{ text-align: center; }
.pdt_info_img p{ margin-top: 15px; }
.pdt_info_img img{ border: 1px solid #ccc; box-shadow: 10px 10px 0 rgba(0, 0, 0, .25); }

.cnt_wrap, .cnt_wrap:focus{ background: #fff; overflow: hidden; }
.cnt_wrap h2{ text-align: left; }
.cnt_wrap p{ font-size: 1.25em; line-height: 1.325em; }
/*** /CNT ***/

/*** PAGINATION ***/
.pagination_wrap{ width: 100%; text-align: center; }
.pagination{ margin-top: 50px; }
.pagination .page-item, .pagination .page-item a{ margin: 0 1px; border-radius: 0 !important; }
.pagination a{ color: #666; }
.pagination a:hover{ color: #fff; background: #f60; }
.pagination .active .page-link{ background: #9d1c2b; border-color: #dee2e6; }
/*** /PAGINATION ***/

/*** FOOTER ***/
footer{ margin: 0; padding: 40px 0; color: #fff; font-size: .875em; background: #0359a4; overflow: hidden; }
footer a{ color: #fff; }
footer a:hover{ color: #ffae00; }
footer .collist:nth-child(1) .logo{ float: none; width: 220px; height: 44px; margin: 10px 0 0 0; padding: 0; background: url('../../img/pic-flogo.png') center center no-repeat; background-size: cover; text-indent: -9999px;}
footer .collist:nth-child(2) ul{ float: right; }
footer .collist:nth-child(2) ul li{ float: left; margin: 5px 0 5px 20px; }
footer .collist:nth-child(2) ul li:nth-child(3){ clear: left; }
footer .collist:nth-child(2) i{ margin: 0 8px 0 0; font-size: 1.125em; }

.copyright{ padding: 15px 0; color: #fff; font-size: .875em; background: #003869; text-align: center; }
/*** /FOOTER ***/

/*** CAPTCHA ***/
.captcha_wrap{ float: left; margin: 15px 0 0 20px; }
#captcha_code{ float: left; width: 100px; margin-top: 15px; }
/*** /CAPTCHA ***/

/*** BTN ***/
.btn{ padding: 13px 50px 14px 50px; border-radius: 0; line-height: 1em; }
.btn_wrap{ width: 100%; margin:30px auto 0 auto; }

.btn-primary{ background: #0359a4; border-color: #0359a4; }
.btn-primary:hover, .btn-primary:focus{ color: #0359a4; background: #fff; border-color: #0359a4;}


/*** /BTN ***/

/*** COLOR ***/
.color01{ color: #ab7fda; }
.color02{ color: #8c61bc; }
.color03{ color: #f19100; }
.color04{ color: #c00; }
.color05{ color: #999; }
/*** /COLOR ***/

/*** FORM ***/
/*** /FORM ***/

/*** MARGIN PADDING ***/
.mt-0{ margin-top: 0; }
.mt-10{ margin-top: 10px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.mt-50{ margin-top: 50px; }

.mb-0{ margin-bottom: 0; }
.mb-10{ margin-bottom: 10px; }
.mb-20{ margin-bottom: 20px; }
.mb-30{ margin-bottom: 30px; }

.pl-0{ padding-left: 0; }
.pr-0{ padding-right: 0; }
/*** /MARGIN PADDING ***/

/*** 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 */
}

@media all and (-ms-high-contrast:none){ /* IE 11 */
     *::-ms-backdrop, .label_name{ }
}

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