body {
    color: #222222;
    background-color: #F0F1F4;
    font-family: Hiragino Kaku Gothic ProN W6, serif;
    font-size: 14px;
    text-rendering: optimizeSpeed;
    min-height: 100vh;
    overflow-x: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column ;
    -ms-flex-direction: column ;
    flex-direction: column ;
}

main,
main > section {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column ;
    -ms-flex-direction: column ;
    flex-direction: column ;
    flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
}

* {
    outline: none !important;
}

*, ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    color: #222222;
    /*color: unset;*/
}

a:hover {
    text-decoration: none;
    color: unset;
}
button, .btn{
    border: none;
    border-radius: 0;
}
.form-control{
    border-radius: 0;
 }
.background-color-gray {
    background-color: #F0F1F4;
}

.bearing-link {
    margin-bottom: 5px;
}
.bearing-link a {
    color: #0D73FF;
    text-decoration: underline;
}

.bearing-link-right {
    position: absolute;
    top: 0;
    right: 0;
}

header:after {
    content: '';
    display: block;
    clear: both;
}

img {
    max-width: 100%;
}

p:not(:last-child) {
    margin-bottom: 0;
}

#header-top-wrap {
    height: 40px;
    line-height: 40px;
    background-color: #F0F1F4;
    float: left;
    width: 100%;
    font: 12px/20px Hiragino Kaku Gothic ProN W6;
}

#header-top-wrap .header-top-left {
    float: left;
    height: 40px;
    line-height: 40px;
}

#header-top-wrap .header-top-right {
    float: right;
}

#header-top-wrap .header-top-right ul {
    display: flex;
    height: 40px;
    align-items: center;
}

header .bor-right {
    border-right: 1px solid #222222;
}

#header-top-wrap .header-top-right ul li {
    padding-right: 15px;
    padding-left: 15px;
}
#header-top-wrap .header-top-right ul li > div{
    display: flex;
    align-items: center;
}
#header-top-wrap .header-top-right ul li:last-child {
    padding-right: 0;
}

#header-top-wrap .header-top-right ul li img {
    padding-left: 8px;
}

#header-mid-wrap {
    float: left;
    width: 100%;
    background-color: #fff;
    height: 70px;
    line-height: 70px;
}

#header-mid-wrap .header-logo {
    float: left;
}

#header-mid-wrap .header-logo ul {
    float: left;
}

#header-mid-wrap .header-logo ul li {
    float: left;
}

#header-mid-wrap .header-logo ul li:last-child {
    padding-top: 18px;
    padding-left: 20px;
}

#header-mid-wrap .header-logo ul li div.slogan {
    font: 11.5px/20px Hiragino Kaku Gothic ProN W6;
    color: #242424;
}

#header-mid-wrap .header-logo ul li div.slogan:first-child {
    font: 10px/17px Hiragino Kaku Gothic ProN W3;
    color: #8E8E8E;
}

#header-mid-wrap .header-mid-right {
    float: right;
}

#header-mid-wrap .header-mid-right ul {
    float: left;
}

#header-mid-wrap .header-mid-right > ul > li {
    float: left;
    cursor: pointer;
    height: 70px;
}

#header-mid-wrap .header-mid-right ul li:last-child {
    padding-top: 15px;
    padding-right: 0;
}

#header-mid-wrap .header-mid-right ul li div {
    float: left;
}

#header-mid-wrap .header-mid-right > ul > li > div {
    height: 30px;
    line-height: 30px;
    margin-top: 20px;
    padding-right: 18px;
    padding-left: 18px;
}
#header-mid-wrap .header-mid-right > ul > li > div:hover {
    color: #12448F;
}

#header-mid-wrap .header-mid-right ul li .icon {
    margin-right: 8px;
}

#header-mid-wrap .header-mid-right ul li .title {
    font: 12px/20px Hiragino Kaku Gothic ProN W6;
    line-height: 30px;
}

header .btn-cart {
    position: relative;
    background-color: #E30000;
    border-radius: 5px;
    height: 40px !important;
    font: 14px/24px Hiragino Kaku Gothic ProN W6;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0 !important;
    margin-left: 5px;
    padding: 0 37px !important;
}
header .btn-cart a {
    display: flex;
    color: #FFFFFF;
}
header .btn-cart:hover a{
    color: #FFFFFF;
}
header .btn-cart .link-cart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}
#header-mid-wrap .header-mid-right .nav-login {
    position: relative;
}

#header-mid-wrap .header-mid-right .box-info-login {
    position: absolute;
    background: #fff;
    top: 48px;
    left: -18px;
    width: 350px;
    padding: 37px 33px;
    border: 1px solid #AFAFAF;
    display: none;
    z-index: 9;
}

#header-mid-wrap .header-mid-right .box:before {
    content: "";
    position: absolute;
    top: -8px;
    left: 72px;
    transform: rotate(-45deg);
    width: 15px;
    height: 15px;
    display: block;
    z-index: -1;
}
#header-mid-wrap .container-company .header-mid-right .box:before{
    left: 35px;
}
#header-mid-wrap .header-mid-right .box-info-login:before {
    border: 1px solid #AFAFAF;
    border-width: 1px 1px 0 0;
    background-color: #fff;
}

#header-mid-wrap .header-mid-right .box-info-login input:not([type="radio"]):not([type="checkbox"]) {
    padding-left: 20px;
    margin-bottom: 15px;
}

#header-mid-wrap .header-mid-right .box-info-login .btn-login {
    height: 50px;
    width: 100%;
    background-color: #12448F;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 16px/27px Hiragino Kaku Gothic ProN W6;
    color: #FFFFFF;
    margin-bottom: 15px;
}

#header-mid-wrap .header-mid-right .box-info-login a {
    font: 12px/20px Hiragino Kaku Gothic ProN W6;
    color: #0D73FF;
    display: block;
    text-decoration: unset;
}

#header-mid-wrap .header-mid-right .box-my-page {
    background-color: #12448F;
    position: absolute;
    z-index: 99;
    top: 48px;
    left: -10px;
    width: 278px;
    display: none;
}

#header-mid-wrap .header-mid-right .box-my-page:before {
    border: 1px solid #12448F;
    border-width: 1px 1px 0 0;
    background-color: #12448F;
}

#header-mid-wrap .header-mid-right .box-my-page ul {
    width: 100%;
}

#header-mid-wrap .header-mid-right .box-my-page ul li {
    border-bottom: 1px solid #2C63B5;
    width: 100%;
}

#header-mid-wrap .header-mid-right .box-my-page ul li:hover {
    background-color: #0F2E5D;
}

#header-mid-wrap .header-mid-right .box-my-page ul li:last-child {
    border-bottom: 0px;
    padding-top: 0;
}

#header-mid-wrap .header-mid-right .box-my-page ul li a {
    font: 16px/24px Source Han Sans JP;
    color: #FFFFFF;
    display: block;
    padding: 10px 15px;
    text-decoration: unset;
}

#header-mid-wrap .header-mid-right > ul > li:hover > div > div.box{
    display: block;
}
#header-mid-wrap .header-mid-right > ul > li div.box:focus-within {
    display: block;
}

#header-menu-wrap {
    float: left;
    background-color: #12448F;
    height: 60px;
    line-height: 60px;
    width: 100%;
    position: relative;
}

#header-menu-wrap .menu-left {
    float: left;
    height: 100%;
}

#header-menu-wrap .menu-left > ul > li:not(:first-child):hover {
    background-color: #0F2E5D;
}

#header-menu-wrap .menu-left li.navi-menu > a {
    position: relative;
}

#header-menu-wrap .menu-left li.navi-menu > a > i.fa {
    position: absolute;
    left: 45%;
    bottom: -15px;
    color: #fff;
    font-size: 11px;
    display: none;
}

#header-menu-wrap .menu-left li.navi-menu:hover > a > i.fa {
    display: block;
}

#header-menu-wrap .menu-left li.navi-menu .mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 60px;
    background-color: #E8E8E8;
    display: none;
    z-index: 999;
    /*font-family: Noto Nastaliq Urdu;*/
}

#header-menu-wrap .menu-left li.navi-menu:hover > .mega-menu {
    display: flex;
}

#header-menu-wrap .menu-left li.navi-menu .mega-menu > ul {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

#header-menu-wrap .menu-left li.navi-menu .mega-menu > ul > li.left {
    padding: 0;
    width: calc(100% - 542px);
    height: 100%;
    padding-top: 28px;
    padding-bottom: 30px;
}

#header-menu-wrap .menu-left li.navi-menu .mega-menu > ul > li.right {
    padding: 0;
    width: 542px;
    overflow: hidden;
    max-height: 420px;
}

#header-menu-wrap .menu-left li.navi-menu .mega-menu > ul > li.right img {
    width: 100%;
    height: 100%;
}
#header-menu-wrap .menu-left .navi-menu .mega-menu .left ul {
    width: 100%;
}

#header-menu-wrap .menu-left .navi-menu .mega-menu .left ul li {
    padding-right: 15px;
    padding-left: 0;
    width: 50%;
}

#header-menu-wrap .menu-left .navi-menu .mega-menu .left .item {
    display: flex;
    height: 76px;
    background-color: #fff;
    align-items: center;
    margin-bottom: 5px;
    padding-left: 10px;
}

#header-menu-wrap .menu-left .navi-menu .mega-menu .left .item.active, #header-menu-wrap .menu-left .navi-menu .mega-menu .left .item:hover {
    background-color: #12448F;
}

#header-menu-wrap .menu-left .navi-menu .mega-menu .left .item .img-ava {
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
}
#header-menu-wrap .menu-left .navi-menu .mega-menu .left .item .img-ava img{
    width: 100%;
    height: 100%;
}
#header-menu-wrap .menu-left .navi-menu .mega-menu .left .item .title {
    line-height: 1.5;
}

#header-menu-wrap .menu-left .navi-menu .mega-menu .left .item .title a {
    color: #0D73FF;
    font-weight: 700;
    font-size: 14px;
    text-decoration: unset;
    line-height: 1;
}

#header-menu-wrap .menu-left .navi-menu .mega-menu .left .item.active .title a, #header-menu-wrap .menu-left .navi-menu .mega-menu .left .item:hover > .title a {
    color: #fff;
}

#header-menu-wrap .menu-left .navi-menu .mega-menu .left .btn-select {
    float: left;
    width: calc(100% - 15px);
    height: 76px;
    background-color: #12448F;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 35px;
    cursor: pointer;
}

#header-menu-wrap .menu-left .navi-menu .mega-menu .left .btn-select > i.fa {
    font-size: 11px;
    position: absolute;
    right: 45px;
    top: 45%;
}

#header-menu-wrap .menu-right {
    float: right;
}

#header-menu-wrap ul {
    float: left;
    height: 100%;
}

#header-menu-wrap ul li {
    float: left;
    padding: 0 20px;
    height: 100%;
}

#header-menu-wrap .menu-left ul li:first-child {
    padding-left: 0;
}

#header-menu-wrap .menu-left > ul > li > a {
    text-decoration: unset;
    color: #fff;
    font: 16px/27px Hiragino Kaku Gothic ProN W6;
}

#header-menu-wrap .menu-right ul li {
    padding: 0 8px;
}

#header-menu-wrap .menu-right ul li:first-child {
    padding-left: 0;
}

#header-menu-wrap .menu-right ul li:last-child {
    padding-right: 0;
}

#header-menu-wrap .menu-right .bnt-document {
    width: 220px;
    height: 40px;
    background-color: #FAC634;
    border-radius: 5px;
    font: 16px/27px Hiragino Kaku Gothic ProN W6;
    color: #222222;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#header-menu-wrap .menu-right .bnt-document i {
    margin-left: 12px;
    font-size: 11px;
}

#header-menu-wrap .menu-right .menu-search {
    position: relative;
}

#header-menu-wrap .menu-right .menu-search input {
    border: 1px solid #CDD6DD;
    height: 40px;
    line-height: 40px;
    width: 285px;
    margin-top: 10px;
    padding-left: 22px;
    padding-right: 35px;
}
#header-menu-wrap .menu-right .menu-search input::placeholder{
    font-size: 16px;
    /*font-family: Source Han Sans JP;*/
    color: #CDD6DD;
}
#header-menu-wrap .menu-right .menu-search .btn-hd-search {
    position: absolute;
    right: 0;
    top: 11px;
    background-color: transparent;
    width: 35px;
    height: 40px;
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header-menu-wrap .menu-right .menu-search img {

}
#header-menu-wrap.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    -webkit-animation: ctFadeInDown 900ms ease-in-out;
    -moz-animation: ctFadeInDown 900ms ease-in-out;
    -ms-animation: ctFadeInDown 900ms ease-in-out;
    animation: ctFadeInDown 900ms ease-in-out;
}

#header-menu-wrap .tab-menu-scoll {
    display: none;
}

#header-menu-wrap.fixed .menu-search {
    display: none;
}

#header-menu-wrap.fixed .menu-right {
    float: left;
}

#header-menu-wrap.fixed .menu-right .bnt-document {
    margin-left: 12px;
}

#header-menu-wrap.fixed .tab-menu-scoll {
    display: block;
    float: right;
    position: relative;
}

#header-menu-wrap.fixed .tab-menu-scoll > ul > li {
    padding-right: 0;
    padding-left: 15px;
}
#header-menu-wrap.fixed .tab-menu-scoll > ul > li:first-child{
    padding-left: 0;
}
#header-menu-wrap.fixed .tab-menu-scoll > ul > li:last-child {
    padding-top: 10px;
}

#header-menu-wrap.fixed .tab-menu-scoll > ul > li > div {
    cursor: pointer;
}
#header-menu-wrap.fixed .tab-menu-scoll .nav-login{
    position: relative;
}
#header-menu-wrap.fixed .tab-menu-scoll > ul > li > div.btn-cart{
    position: relative;
    padding: 0 20px;
}
#header-menu-wrap.fixed .tab-menu-scoll .btn-cart .icon {
    margin-right: 8px;
}
#header-menu-wrap.fixed .tab-menu-scoll > ul > li > div.btn-cart .link-cart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#header-menu-wrap.fixed .tab-menu-scoll .nav-login .box-my-page {
    display: none;
    background-color: #12448F;
    position: absolute;
    z-index: 1;
    top: 60px;
    right: -198px;
    width: 278px;
}

#header-menu-wrap.fixed .tab-menu-scoll > ul > li:hover > div > .box {
    display: block;
}

#header-menu-wrap.fixed .tab-menu-scoll > ul > li .box:focus-within {
    display: block;
}

#header-menu-wrap.fixed .tab-menu-scoll .nav-login .box-my-page > ul > li {
    border-top: 1px solid #2C63B5;
    padding: 5px 15px;
    width: 100%;
    line-height: 30px;
}

#header-menu-wrap.fixed .tab-menu-scoll .nav-login .box-my-page > ul > li > a {
    font: 16px/24px Source Han Sans JP;
    color: #FFFFFF;
    text-decoration: unset;
}

#header-menu-wrap.fixed .tab-menu-scoll .nav-login .box-my-page > ul > li:hover {
    background-color: #0F2E5D;
}

#header-menu-wrap.fixed .tab-menu-scoll .nav-login .box-info-login {
    display: none;
    position: absolute;
    background: #fff;
    z-index: 1;
    top: 60px;
    right: -120px;
    width: 332px;
    padding: 37px 33px;
    border: 1px solid #AFAFAF;
}

#header-menu-wrap.fixed .tab-menu-scoll .nav-login .box-info-login:before {
    border: 1px solid #AFAFAF;
    border-width: 1px 1px 0 0;
    background-color: #fff;
    content: "";
    position: absolute;
    top: -8px;
    right: 122px;
    transform: rotate(-45deg);
    width: 15px;
    height: 15px;
    display: block;
    z-index: -1;
}

#header-menu-wrap.fixed .tab-menu-scoll .nav-login .box-info-login input:not([type="radio"]):not([type="checkbox"]) {
    padding-left: 20px;
    margin-bottom: 15px;
    line-height: 1.5;
}

#header-menu-wrap.fixed .tab-menu-scoll .nav-login .box-info-login .btn-login {
    height: 50px;
    width: 100%;
    background-color: #12448F;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 16px/27px Hiragino Kaku Gothic ProN W6;
    color: #FFFFFF;
    margin-bottom: 15px;
}

#header-menu-wrap.fixed .tab-menu-scoll .nav-login .box-info-login a {
    font: 12px/20px Hiragino Kaku Gothic ProN W6;
    color: #0D73FF;
    display: block;
    text-decoration: unset;
}



#notice-top {
    background-color: #fff;
    float: left;
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #DDDDDD;
    overflow: hidden;
}
#notice-top .notice-wrap:after{
    clear: both;
    content: '';
    display: block;
}
#notice-top .notice-item{
    background-color: #fff;
}
#notice-top .notice-wrap .title {
    float: left;
    width: 129px;
    height: 42px;
    background-color: #F0F1F4;
    font: 14px/24px Hiragino Kaku Gothic ProN W6;
    color: #222222;
    margin-top: 9px;
    text-align: center;
    line-height: 42px;
}

#notice-top .notice-wrap .notice-cont {
    float: left;
}

#notice-top .notice-wrap .notice-cont ul li {
    float: left;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

#notice-top .notice-wrap .notice-cont .status {
    background-color: #F40909;
    border-radius: 15px;
    font: 12px/20px Hiragino Kaku Gothic ProN W6;
    color: #FFFFFF;
    padding: 5px 16px;
}

#notice-top .notice-wrap .notice-cont .time {
    font: 14px/24px Hiragino Kaku Gothic ProN W6;
    color: #222222;
}

#notice-top .notice-wrap .notice-cont .caption {
    font: 14px/24px Hiragino Kaku Gothic ProN W6;
    color: #1175FF;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-width: 500px;
}

#notice-top .notice-wrap .show-list {
    float: right;
    width: 126px;
    height: 40px;
    border-radius: 5px;
    background-color: #12448F;
    text-align: center;
    font: 14px/30px Source Han Sans JP;
    color: #FFFFFF;
    font-weight: 700;
    line-height: 40px;
    margin-top: 10px;
    cursor: pointer;
}

/*notification conversation*/
.load-mess {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    border: 0;
    z-index: 999;
    -webkit-animation: ctFadeInDown 300ms ease-in-out;
    -moz-animation: ctFadeInDown 300ms ease-in-out;
    -ms-animation: ctFadeInDown 300ms ease-in-out;
    animation: ctFadeInDown 300ms ease-in-out;
}

.load-mess .mess-wrap {
    background-color: #CB0C29;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: relative;
}
.load-mess.messages-danger .mess-wrap{
    background-color: #CB0C29;
}
.load-mess.messages-success .mess-wrap{
    background-color: #43A831;
}
.load-mess .mess-wrap .text {
    font: 14px/24px Hiragino Kaku Gothic ProN W6;
    color: #FFFFFF;
    line-height: 40px;
}

.load-mess .mess-wrap .close {
    position: absolute;
    top: 5px;
    right: 15px;
    opacity: 1;
    padding: 0;
}


.ct-mesage{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.ct-mesage.alert{
    margin-bottom: 0;
    border-radius: 0;
    font: 14px/24px Hiragino Kaku Gothic ProN W6;
    text-align: center;
    color: #fff;
}
.ct-mesage.alert-success{
    background-color: #43A831;
}
.ct-mesage.alert-dismissible .close{
    opacity: 1;
}
.ct-mesage.alert-dismissible .close:hover{
    color: #fff;
}
/*end load mesage*/

.menu-mb {
    display: none;
}

/* Start Loading page layout */
.page-loading {
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}
.page-loading.active {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    background-color: rgba(0,0,0,0.5);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.page-loading.active .loader {
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    border-top: 5px solid #12448F;
    width: 70px;
    height: 70px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* End Loading page layout */

@media (min-width: 1200px) {
    .container {
        max-width: 1230px;
    }
}
@media (max-width: 1200px) {
    #header-menu-wrap ul li {
        padding: 0 10px;
    }
}
@media (max-width: 1199px) {
    .container {
        max-width: 100%;
    }
}

@media (max-width: 1180px) {
    #header-menu-wrap .menu-left li.navi-menu .mega-menu > ul {
        padding: 15px;
    }

    #header-menu-wrap .menu-left li.navi-menu .mega-menu > ul > li.left {
        width: calc(100% - 400px);
        padding-top: 0;
        padding-bottom: 0;
    }

    #header-menu-wrap .menu-left li.navi-menu .mega-menu > ul > li.right {
        width: 400px;
    }

    #header-menu-wrap .menu-left .navi-menu .mega-menu .left .btn-select {
        margin-top: 20px;
        height: 60px;
        font-size: 18px;
    }
    #header-menu-wrap.fixed .tab-menu-scoll .btn-cart .title .name {
        /*display: none;*/
    }

}

@media (max-width: 1220px) {
    #header-mid-wrap .header-mid-right ul li .title {
        display: none;
    }
}

@media (max-width: 1100px) {
    #header-menu-wrap .menu-left > ul > li > a {
        font-size: 14px;
    }

    header .btn-cart .title{
        display: block !important;
        font-size: 11px;
    }

    header .btn-cart {
        width: unset;
        padding: 0 10px !important;
    }

    header .btn-cart .icon {
        padding-right: 5px;
    }

    #header-menu-wrap.fixed .tab-menu-scoll .btn-cart .icon {
        margin-right: 0;
    }

    #header-menu-wrap .menu-right .menu-search input {
        width: 270px;
    }

    #header-mid-wrap .header-mid-right ul li .icon {
        margin-right: 3px;
    }

    #header-mid-wrap .header-mid-right .box-info-login {
        padding: 20px 15px;
        left: unset;
        right: -137px;
        width: 300px;
    }

    #header-mid-wrap .header-mid-right .box-info-login:before {
        left: unset;
        right: 156px;
    }

    #header-mid-wrap .header-mid-right .box-my-page {
        width: unset;
        white-space: nowrap;
        min-width: 270px;
        left: unset;
        right: -137px;
    }

    #header-mid-wrap .header-mid-right .box-my-page:before {
        left: unset;
        right: 157px;
    }
    #header-menu-wrap.fixed .tab-menu-scoll .nav-login .box-my-page{
        right: -140px;
    }

}
@media (max-width: 1100px) and (min-width: 1025px) {
    #header-mid-wrap .header-mid-right ul li .title .name {
        /*display: none;*/
    }
}
@media (max-width: 1024px) {
    #header-mid-wrap .header-logo ul li div.slogan {
        font-size: 10px;
    }

    #header-mid-wrap .header-logo ul li div.slogan:first-child {
        font-size: 8px;
    }

    #header-menu-wrap .menu-right .bnt-document {
        font-size: 14px;
        width: 200px;
    }

    #notice-top .notice-wrap .notice-cont .status {
        font-size: 8px;
    }

    #notice-top .notice-wrap .notice-cont .time {
        font-size: 10px;
    }

    #notice-top .notice-wrap .notice-cont .caption {
        font-size: 12px;
    }

    #notice-top .notice-wrap .show-list {
        font-size: 10px;
    }

    #header-menu-wrap .menu-left .navi-menu .mega-menu .left ul li {
        padding-right: 10px;
    }

    #header-menu-wrap .menu-left .navi-menu .mega-menu .left .item .title a {
        font-size: 12px;
    }
}

@media (max-width: 1023px) {
    #header-menu-wrap.fixed .tab-menu-scoll .nav-login .box-my-page{
        right: -100px;
    }
    #header-mid-wrap .header-logo ul li:last-child{
        padding-left: 10px;
    }
    #notice-top .notice-wrap .title {
        display: none;
    }
    #header-menu-wrap.fixed .tab-menu-scoll > ul > li > div.btn-cart{
        padding: 0 5px;
    }
    #notice-top .notice-wrap .notice-cont ul li:first-child {
        padding-left: 0;
    }

    #header-mid-wrap .header-mid-right > ul > li > div {
        padding: 0 10px;
    }

    #header-mid-wrap .header-mid-right .box-info-login {
        right: -105px;
        width: 270px;
    }

    #header-mid-wrap .header-mid-right .box-info-login:before {
        right: 117px;
    }

    #header-mid-wrap .header-mid-right .box-my-page {
        right: -105px;
    }

    #header-mid-wrap .header-mid-right .box-my-page:before {
        right: 118px;
    }

    #header-menu-wrap .menu-left li.navi-menu .mega-menu > ul > li.right {
        width: 50%;
    }

    #header-menu-wrap .menu-left li.navi-menu .mega-menu > ul > li.left {
        width: 50%;
    }

    #header-menu-wrap .menu-left .navi-menu .mega-menu .left ul li {
        width: 100%;
    }

    #header-menu-wrap .menu-left .navi-menu .mega-menu .left .item .title a {
        font-size: 14px;
    }
    #header-menu-wrap.fixed .menu-right .bnt-document {
        margin-left: 0px;
        font-size: 10px;
        width: 115px;
    }

    #header-menu-wrap .menu-right .bnt-document i {
        margin-left: 5px;
        font-size: 9px;
    }
    #header-menu-wrap.fixed .tab-menu-scoll > ul > li{
        padding-left: 10px;
    }
    #header-menu-wrap ul li {
        padding: 0 5px;
        font-size: 13px;
    }
    #header-mid-wrap .header-logo .logo img{
        max-width: 220px;
    }
}

@media (max-width: 990px) {
    .menu-mb {
        display: block;
    }

    #header-top-wrap, #header-menu-wrap, #header-mid-wrap .header-logo ul li:last-child, #header-mid-wrap .header-mid-right > ul > li {
        display: none;
    }

    #header-mid-wrap .header-mid-right ul li:last-child {
        display: block;
    }

    #header-mid-wrap .header-mid-right ul li:last-child .title {
        display: block;
    }

    #header-mid-wrap {
        border-bottom: 1px solid #DDDDDD;
        height: 45px;
        line-height: 45px;
        position: relative;
        padding-left: 40px;
        padding-right: 100px;
    }
    #header-mid-wrap.fixed{
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index: 99;
        background-color: #fff;
    }
    #header-mid-wrap > .container {
        display: flex;
        justify-content: center;
    }

    #header-mid-wrap .menu-mb .icon-bar {
        position: absolute;
        left: 0px;
        top: 0;
        width: 40px;
        text-align: center;
        border-right: 1px solid #DDDDDD;
    }

    #header-mid-wrap .header-logo .logo img {
        max-width: 185px;
        width: 100%;
    }

    #header-mid-wrap .header-mid-right ul li:last-child {
        padding-top: 0;
        height: 45px;
    }

    header .btn-cart {
        height: 45px !important;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        border-radius: 0;
        min-width: 100px;
    }
    #header-mid-wrap .header-mid-right ul li .title{
        font-size: 11px;
    }
    #header-mid-wrap .header-mid-right ul li .icon img{
        max-width: 18px;
    }
    #mean-menu-mb {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #7A7A7A;
        z-index: 99;
        overflow-y: scroll;
        line-height: 1.5;
    }
    html.mm-opened {
        overflow: hidden;
    }
    .close-mb-menu {
        position: fixed;
        top: 18px;
        right: 15px;
    }

    .mean-menu-wrap {
        margin-right: 50px;
        background-color: #fff;
        font-family: Hiragino Kaku Gothic ProN W6;
        overflow: hidden;
    }

    .mean-menu-wrap > ul > li {
        border-bottom: 1px solid #EDEDED;
    }

    .mean-menu-wrap > ul > li.list-header-top {
        padding-left: 20px;
        padding-right: 20px;
    }

    .mean-menu-wrap > ul > li a {
        height: 60px;
        display: flex;
        align-items: center;
    }

    .mean-menu-wrap > ul > li a.menu-1 {
        padding-left: 20px;
        padding-right: 20px;
        position: relative;
    }

    .mean-menu-wrap > ul > li.shopping-cart {
        height: 70px;
        background-color: #E30000;
    }

    .mean-menu-wrap > ul > li .icon {
        display: inline-block;
        width: 37px;
        text-align: center;
    }

    .mean-menu-wrap > ul > li.has-child {
        position: relative;
    }

    .mean-menu-wrap > ul > li.has-child .box {
        background-color: #fff;
        border-top: 1px solid #EDEDED;
        padding: 25px 30px 35px;
    }

    .mean-menu-wrap > ul > li.has-child .box > div {
        max-width: 300px;
    }

    .mean-menu-wrap > ul > li.has-child .box input:not([type='checkbox']) {
        width: 100%;
        height: 40px;
        display: block;
        margin-bottom: 15px;
        padding-left: 20px;
    }

    .mean-menu-wrap > ul > li.has-child .box .btn {
        height: 50px;
        width: 100%;
        background-color: #12448F;
        color: #fff;
        font-size: 16px;
        border-radius: 0;
        margin-bottom: 10px;
        justify-content: center;
    }

    .mean-menu-wrap > ul > li.has-child .box a.text-link {
        color: #0D73FF;
        font-size: 12px;
        height: fit-content;
        margin-bottom: 5px;
    }

    .mean-menu-wrap > ul > li.has-child .box input::placeholder {
        color: #BFBFBF;
    }

    .mean-menu-wrap > ul > li.has-child i.fa {
        color: #1A1311;
        position: absolute;
        right: 15px;
        top: 0;
        height: 100%;
        align-items: center;
        justify-content: center;
        display: flex;
        font-size: 22px;
    }

    .mean-menu-wrap > ul > li.has-child.shopping-cart i.fa, .mean-menu-wrap > ul > li.has-child.shopping-cart .name {
        color: #FFFFFF;
    }

    .mean-menu-wrap > ul > li .name {
        margin-right: 8px;
    }

    .bg-color-1 {
        background-color: #F9FAF9 !important;
    }

    .mean-menu-wrap .list-header-top > div {
        border-bottom: 1px solid #EDEDED;
    }

    .mean-menu-wrap .list-header-top > div:last-child {
        border-bottom: 0;
    }

    .mean-menu-wrap .box-search {
        padding: 15px 20px;
    }
    .mean-menu-wrap .box-search span {
        color: #777777;
        display: block;
        font-size: 12px;
        margin-bottom: 10px;
    }

    .mean-menu-wrap .box-search .content-box{
        position: relative;
    }
    .mean-menu-wrap .box-search input {
        width: 100%;
        height: 57px;
        padding-left: 20px;
        border-color: #EDEDED;
        background-color: #F9FAF9;
        padding-right: 50px;
    }
    .mean-menu-wrap .box-search button{
        position: absolute;
        right: 1px;
        top: 1px;
        height: 55px;
        padding: 0 17px;
        background-color: #F9FAF9;
    }
    .mean-menu-wrap .menu-category {
        background-color: #F5F5F5;
        padding: 0;
        padding-bottom: 5px;
    }

    .mean-menu-wrap .menu-category__head {
        background-color: #F9FAF9;
        height: 40px;
        border-top: 2px solid #12448F;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
    }

    .mean-menu-wrap .menu-category__head .btn-more {
        background-color: #12448F;
        color: #fff;
        font-size: 12px;
        height: 100%;
        border-radius: 0;
    }

    .mean-menu-wrap .menu-category .sub-menu li {
        border-top: 1px solid #EDEDED;
        background-color: #fff;
        padding: 0 20px;
        display: flex;
        align-items: center;
        height: 55px;
    }

    .mean-menu-wrap .menu-category .sub-menu li .avata {
        margin-right: 18px;
        width: 50px;
        height: 50px;
    }

    .mean-menu-wrap .menu-category .sub-menu li .avata img {
        width: 100%;
        height: 100%;
    }

    .mean-menu-wrap .menu-category .sub-menu li .text {
        height: 55px;
        overflow: hidden;
        text-overflow: ellipsis;
        /*display: -webkit-box;*/
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .mean-menu-wrap .catalog-download {
        padding: 0;
    }

    .mean-menu-wrap .catalog-download .btn-catalog-download {
        background-color: #FAC634;
        height: 60px;
        border-radius: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
    }

    .mean-menu-wrap .catalog-download .btn-catalog-download i.fa {
        font-size: 22px;
        color: #222222;
    }

    .mean-menu-wrap .sub-menu-1 {
        background-color: #F9FAF9;
        padding-bottom: 6px;
    }

    .mean-menu-wrap .sub-menu-1 ul {
        background-color: #fff;
        padding: 0 20px 0px;
    }

    .mean-menu-wrap .sub-menu-1 ul li {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #EDEDED;
        background: #fff;
    }
    .mean-menu-wrap .sub-menu-1 ul li.bg-color-1{
        margin-left: -20px;
        margin-right: -20px;
        border-top: 1px solid #EDEDED;
    }
    .mean-menu-wrap .sub-menu-1 ul li a {
        height: 50px;
        margin-right: 8px;
    }
    .mean-menu-wrap .sub-menu-1 ul li:last-child{
        border-bottom: 0;
    }
}

@media (max-width: 767px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    #notice-top {
        float: unset;
        height: unset;
        line-height: unset;
    }

    #notice-top .notice-wrap {
        float: unset;
        position: relative;
    }

    #notice-top .notice-wrap .notice-cont {
        float: unset;
        padding: 5px 0;
    }

    #notice-top .notice-wrap .notice-cont::after {
        content: '';
        display: block;
        clear: both;
    }

    #notice-top .notice-wrap .notice-cont ul li {
        padding: 0;
        height: 20px;
        margin-bottom: 5px;
    }

    #notice-top .notice-wrap .notice-cont ul li:last-child {
        width: 100%;
    }

    #notice-top .notice-wrap .show-list {
        position: absolute;
        top: 6px;
        right: 0px;
        margin-top: 0;
        width: 85px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #notice-top .notice-wrap .notice-cont .status {
        padding: 0px 10px;
        margin-right: 5px;
    }

    #notice-top .notice-wrap .notice-cont .caption {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
}

@media (max-width: 575px){
    .hide-sp{
        display: none;
    }
}
@media (max-width: 374px) {
    .mean-menu-wrap .menu-category .sub-menu li .avata {
        margin-right: 10px;
    }

    .mean-menu-wrap .menu-category .sub-menu li .text {
        font-size: 12px;
    }
}


@-webkit-keyframes ctFadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes ctFadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.ctFadeInDown {
    -webkit-animation-name: ctFadeInDown;
    animation-name: ctFadeInDown;
}


/*fix bug css*/
@media (max-width: 1224px) {
    #header-menu-wrap.fixed .menu-right .bnt-document{
        margin-left: 15px;
    }
}

.navi-menu-more{
    color: #fff;
    font: 16px/27px Hiragino Kaku Gothic ProN W6;
    cursor: default;
}
.menu-cate__lv1{
    width: 100%;
    padding-top: 10px;
}
.menu-cate__lv1 > li{
    float: unset !important;
    padding: 0 0 10px !important;
    display: flex;
}
.menu-cate__lv1 > li > .cate-lv1-name{
    min-width: 200px;
}
.menu-cate__lv1 > li > .cate-lv1-name >a{
    padding: 0 10px;
    font-weight: 700;
    font-size: 16px;
    width: 100%;
    display: block;
    background-color: #3273d4;
    color: #fff;
}
.menu-cate__lv1 > li > .cate-lv1-name >a:hover{
    background-color: #12448F;
}
.menu-cate__lv2{
    display: flex;
    flex-wrap: wrap;
}
.menu-cate__lv2 > li{
    padding: 0 10px !important;
}
.menu-cate__lv2 .item{
    display: flex;
    background-color: #fff;
    align-items: center;
    margin-bottom: 5px;
    padding: 0 10px;
    height: 60px;
}
.menu-cate__lv2 .item .img-ava{
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
}
.menu-cate__lv2 .item .img-ava img {
    width: 100%;
    height: 100%;
}
.menu-cate__lv2 .item .title{
    line-height: 1.5;
}
.menu-cate__lv2 .item .title a {
    color: #0D73FF;
    font-weight: 700;
    font-size: 14px;
    text-decoration: unset;
    line-height: 1;
}
.menu-cate__lv2 .item:hover {
    background-color: #12448F;
}
.menu-cate__lv2 .item:hover > .title a {
    color: #fff;
}

.box-info-login .login-tabs{
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
    max-width: unset !important;
}
.box-info-login .login-tabs .tab-form{
    cursor: pointer;
    text-align: center;
    border: 1px solid #ccc;
    background: #fff;
    font-weight: 300;
    line-height: 40px;
    height: 40px;
    border-radius: 0;
}
.box-info-login .login-tabs .tab-form.active{
    background: #12448F;
    border: 1px solid #12448F;
    color: #fff;
}
.box-info-login .form-login-tab{
    display: none;
    max-width: unset !important;
    width: 100%;
}
.box-info-login .form-login-tab.active{
    display: block;
}

@media (min-width: 1200px) {
    .modal-open .mfp-zoom-out-cur #header-menu-wrap,
    .modal-open #header-menu-wrap{
        padding-right: 17px;
    }
    .modal-open .mfp-zoom-out-cur #header-menu-wrap:not(#header-menu-wrap.fixed),
    .modal-open #header-menu-wrap:not(#header-menu-wrap.fixed){
        padding-right: 0;
    }
    .modal-open .mfp-zoom-out-cur #header-menu-wrap,
    .modal-open #header-menu-wrap{
        padding-right: 17px;
    }
    .modal-open .mfp-zoom-out-cur #header-menu-wrap:not(#header-menu-wrap.fixed),
    .modal-open #header-menu-wrap:not(#header-menu-wrap.fixed){
        padding-right: 0;
    }
}

.banner {
    height: 100%;
    cursor: pointer;
}

.banner img {
    height: 100%;
}

@media screen and (max-width: 1200px) {
    .banner img {
        width: 500px;
    }
}