/* CSS Document */
@charset "utf-8";
.hy-list{ display: flex; flex-wrap: wrap; margin: 36px -15px 0;}
.hy-list .list{ width: 50%; padding: 0 15px;}
.hy-list .list h2{ color: #494848; font-size: 3.2em; font-weight: bold; margin: 0 0 15px; font-family: "Quantico"; text-transform: uppercase;}
.hy-list .list li{ display: flex; flex-wrap: wrap; margin-bottom: 15px;}
.hy-list .list li .img{ width: 61px; height: 60px; background: #fff; border: 1px solid #DCDCDC; border-radius: 2px; padding: 5px; margin-right: 18px;}
.hy-list .list li .text{ flex: 1;}
.hy-list .list li .text .t{ margin: 0; padding: 0 5px 5px;}
.hy-list .list li .text .t a{ font-size: 2rem; color: #212121; font-weight: bold; font-family: "Quantico"; border-bottom: 1px solid #d60003}
.hy-list .list li .text .t a:hover{ border-bottom: 1px dotted #d60003;}
.hy-list .list li .text .p{ padding: 5px; font-size: 1.6em; color: #212121; line-height: 22px;}


.hy-content{ margin-top: 30px; display: flex; flex-wrap: wrap;}
.hy-content .hy-nav{ width: 300px; border-radius: 2px; box-shadow: 0 2px 5px rgb(0 0 0 / 40%); border: solid 1px #9b9a9a; background-color: #fff; background-image: linear-gradient(to top, rgba(197,197,197,.55), rgba(255,255,255,.55) 85%, rgba(201,201,201,.55));}
.hy-content .hy-nav li{ position: relative;}
.hy-content .hy-nav li.on::before, .hy-content .hy-nav li:hover::before{ content: ""; position: absolute; width: 3px; height: 100%; background: #d60003; left: 0; top: 0;}
.hy-content .hy-nav li a{ display: inline-block; width: 100%; padding: 12px 10px; font-size: 1.6rem; font-weight: bold; font-family: "Quantico"; text-transform: uppercase; color: #212121; border-bottom: 1px solid #616163;}

.hy-con-right{ flex: 1; margin-left: 30px;}
.hy-con-right .img{ margin-bottom: 15px; border: 1px solid #DCDCDC; border-radius: 2px; padding: 5px; position: relative; background: #fff;}
.hy-con-right .img img{ width: 100%;}
.hy-con-right .p{ font-size: 1.6em; line-height: 22px; padding-bottom: 22px;}
.hy-con-right .p p{ padding-bottom: 15px;}
.hy-con-right h2{ font-size: 3.2em; font-family: "Quantico"; font-weight: bold; text-transform: uppercase; margin: 0; padding-bottom: 15px;}
.hy-con-right table{ margin-top: 8px; border-radius: 2px; border: 1px solid #808080;}
.hy-con-right table th{ height: 55px; font-size: 1.4em; color: #fff; background: url(../images/table-bg.jpg) repeat-x left top; background-size: contain; padding: 0 15px; border-left: 1px solid #212121; font-family: "Quantico"; letter-spacing: 1px;}
.hy-con-right table th:first-child{ border-left: none;}
.hy-con-right table th.tab-001{ width: 18%;}
.hy-con-right table th.tab-002{ width: 52%;}
.hy-con-right table th.tab-003{ width: 30%;}
.hy-con-right table td{ padding: 15px 12px; background: #f6f5f5; color: #212121; border: 1px solid #c4c4c4;}
.hy-con-right table td li{ position: relative; padding-left: 15px; margin-bottom: 5px;}
.hy-con-right table td li::before{ content: ""; position: absolute; width: 5px; height: 5px; background: #212121; left: 0; top: 50%; transform: translateY(-50%);}
.hy-con-right table td li a{ color: #212121; border-bottom: 1px solid #d60003;}
.hy-con-right table td li a:hover{ border-bottom: 1px dotted #d60003;}


.library-box{ display: flex; flex-wrap: wrap;}
.library-nav{ width: 300px;}
.library-nav ul{ background: url(../images/sub-nav-bg1.png); border-radius: 2px; }
.library-nav li{ border-bottom: 1px solid #1a1a1a; margin-bottom: 5px;}
.library-nav li.on{ border-bottom: 1px solid #f5cc00;}
.library-nav li a{ display: inline-block; padding: 15px; color: #d0d0cf; font-size: 1.6rem; font-family: "Quantico"; font-weight: bold; text-transform: uppercase;}
.library-nav li.on a, .library-nav li:hover a{ color: #fff;}

.library-list{ flex: 1; margin-left: 30px;}
.library-list h2{ font-size: 3.2em; font-family: "Quantico"; font-weight: bold; text-transform: uppercase; color: #494949; margin: 20px 0;}
.library-list li{ display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 5px; padding: 25px 20px; border-radius: 2px; border: 1px solid #c2c2c2; background: linear-gradient(to bottom, #ededed 0%,#d7d7d7 100%);}
.library-list li .icon{ width: 24px; margin-right: 15px;}
.library-list li .text{ flex: 1; padding-right: 15px;}
.library-list li .text .t{ font-size: 1.8em; font-family: "Quantico"; font-weight: bold; text-transform: uppercase; color: #0b0b0b; margin: 0;}
.library-list li .text .p{ font-size: 1.4em; color: #212121; margin-top: 6px;}
.library-list li .btns{ margin-left: 15px;}
.library-list li .btns a{ display: inline-block; width: 100px; height: 26px; line-height: 26px; color: #fff; text-align: center; font-size: 1.2em; font-weight: bold; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 29%);     background: linear-gradient(to bottom, #303030 0%,#202020 100%);}
.library-list li .btns a:hover{ color: #f5cc00;}


.sitemap .list{ margin-top: 40px;}
.sitemap .list li.red, .sitemap .list li.orange, .sitemap .list li.yellow{ margin: 15px 0;}
.sitemap .list li.red .title{ border-bottom: 2px solid #d60003; margin-bottom: 15px;}
.sitemap .list li.yellow .title{ border-bottom: 2px solid #F4CB2E; margin-bottom: 15px;}
.sitemap .list li.orange .title{ border-bottom: 2px solid #F0691F; margin-bottom: 15px;}
.sitemap .list li h3{ font-size: 3.4em; font-family: "Quantico"; font-weight: bold; text-transform: uppercase; color: #212121; margin: 0;}
.sitemap .list li .web{ font-size: 1.4em; color: #666; font-family: "Quantico"; font-weight: bold; margin-bottom: 15px;}
.sitemap .list li a{ display: inline-block; width: 100%; position: relative;}
.sitemap .list li .sub-nav{ padding-left: 20px;}
.sitemap .list li .sub-nav h4{ font-size: 2.4rem; color: #212121; font-weight: bold;}
.sitemap .list li.sub-level-1 a::before{ content: ""; position: absolute; width: 5px; height: 5px; background: #212121; left: -20px; top: 14%;}
.sitemap .list li.sub-level-1 .t{ font-size: 1.6rem; color: #212121;}
.sitemap .list li.sub-level-1 .web{ font-weight: normal;}
.sitemap .list li.sub-level-2 .t{ font-size: 1.4rem; color: #212121;}
.sitemap .list li.sub-level-2 .web{ font-weight: normal;}
























@media (min-width: 1366px){

    
}
@media (max-width:1365px) and (min-width: 1200px){

}
@media (max-width:1199px) and (min-width:992px){


}
@media (max-width:991px) and (min-width: 601px){
.hy-list{ margin: 15px -15px 0;}
.hy-list .list{ width: 100%; margin-top: 15px;}
.hy-list .list h2{ font-size: 2.6em;}

.hy-content .hy-nav{ display: none;}
.hy-con-right{ flex: none; width: 100%; margin-left: 0;}
.product-page-title{ font-size: 2.6em;}
.hy-con-right h2{ font-size: 2.6em;}

.library-nav{ width: 100%;}
.library-list{ flex: none; width: 100%; margin-left: 0; margin-top: 10px;}
.library-list h2{ font-size: 2.6em;}

.sitemap .list li h3{ font-size: 2.6em;}
.sitemap .list li .sub-nav h4{ font-size: 2em;}


}
@media (max-width: 768px){
.hy-list{ margin: 15px -15px 0;}
.hy-list .list{ width: 100%; margin-top: 5px;}
.hy-list .list h2{ font-size: 2em;}
.hy-list .list li .img{ margin-right: 10px;}
.hy-list .list li .text .t a{ font-size: 1.6rem;}
.hy-list .list li .text .p{ font-size: 1.4em;}

.hy-content{ margin-top: 20px;}
.hy-content .hy-nav{ display: none;}
.hy-con-right{ flex: none; width: 100%; margin-left: 0;}
.product-page-title{ font-size: 2em;}
.hy-con-right h2{ font-size: 1.8em;}

.library-nav{ width: 100%;}
.library-nav li a{ font-size: 1.4em;}
.library-list{ flex: none; width: 100%; margin-left: 0; margin-top: 10px;}
.library-list h2{ font-size: 2em;}
.library-list li{ flex-direction: column; padding: 20px; padding-left: 60px; position: relative; }
.library-list li .icon{ position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
.library-list li .text{ flex: 1; padding-right: 10px;}
.library-list li .text .t{ font-size: 1.6em;}
.library-list li .text .p{ font-size: 1.2em; margin-top: 10px;}
.library-list li .btns{ width: 100%; margin-top: 10px; text-align: right; padding-right: 15px;}

.sitemap .list li h3{ font-size: 2em;}
.sitemap .list li .sub-nav h4{ font-size: 1.8em;}

}
@media (max-width: 500px){

}