/*a:focus {outline: dashed 3px #0088ff;}*/
html,body {height: 100%;}
.img-responsive {display: block;max-width: 100%;}
.img-center {margin: 0 auto;}

::-webkit-scrollbar {width: 9px;}
::-webkit-scrollbar-thumb {background-color: #c3c6cd;border-radius: 15px;background-clip: padding-box;border: 2px solid transparent;}
::-webkit-scrollbar-track {background-color: #fff;border-radius: 15px;box-shadow: inset 0px 0px 5px white;}

header { background: #fff; padding: 0;background-color: #fff;position: relative;z-index: 1000; }
.header-top {background-color: #f5f7fb;height: 74px;display: flex;align-items: center;position: relative;z-index: 100;}
.header-bottom {position: relative;z-index: 80px;}
.header-top-inner {position: relative;height: 100%;display: flex;align-items: center;justify-content: center;}
.logo-area {position: absolute;left: 0;top: 0;height: 100%;display: flex;align-items: center;justify-content: center;}
.utils {display: flex;align-items: center;position: absolute;right: 0;top: 0;height: 100%;}
.utils .login {margin-right: 25px;font-size: 15px;color: #1f3aae;font-weight: 600;letter-spacing: -0.5px;}
.utils .login:hover {text-decoration: underline;}
.utils .lan {margin-right: 20px;font-size: 15px;color: #333333;font-weight: 600;letter-spacing: -0.5px;}
.utils .lan:hover {text-decoration: underline;}
.utils .lan span {display: inline-flex;padding-right: 15px;position: relative;}
.utils .lan span:after {content: '';display: block;width: 7px;height: 4px;background-image: url('../img/common/lan_arrow.png');background-position: 0 0;background-repeat: no-repeat;position: absolute;right: 0;top: 7px;}
.utils .sitemap {width: 24px;height: 24px;position: relative;}
.utils .sitemap span,
.utils .sitemap:before,
.utils .sitemap:after {content: '';display: block;width: 24px;height: 2px;background-color: #333;position: absolute;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;}
.utils .sitemap:before {top: 4px;left: 0;}
.utils .sitemap span {top: 11px;left: 0;}
.utils .sitemap:after {top: 18px;left: 0;}

.is-nav .utils .sitemap span {opacity: 0;}
.is-nav .utils .sitemap:before {transform: rotate(45deg);top: 10px;}
.is-nav .utils .sitemap:after {transform: rotate(-45deg);top: 10px;}

.utils .search {margin-right: 10px;display: none;}
.utils .search img {display: block;}
.header-top-inner.is-search .top_search_box {display: block;}
.lan_wrap {position: relative;}
.lan_wrap ul {position: absolute;left: -12px;width: 60px;top: 30px;border: 1px solid #ddd;background-color: #fff;display: none;z-index: 12;}
.lan_wrap ul li a {font-size: 15px;color: #333;font-weight: 600;padding: 10px 10px 10px 13px;display: flex;align-items: center;}
.lan_wrap ul li a:hover {text-decoration: underline;}
.lan_wrap.on ul {display: block;}

.top_search_box {width: 540px;height: 50px;border: 1px solid #5463e2;background-color: #fff;border-radius: 10px;position: relative;padding-left: 125px;padding-right: 60px;z-index: 10;}
.tsb_th {width: 125px;position: absolute;left: 0;top: 0;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 16px;color: #62656a;font-weight: 500;padding-right: 10px;}
.tsb_th select {width: 100%;height: 100%;font-size: 14px;color: #62656a;font-weight: 500;border: none;border-radius: 10px;background-color: transparent;padding: 0 10px;outline: none;}
.tsb_th:after {content: '';display: block;width: 1px;height: 16px;background-color: #dddddd;position: absolute;right: 0;top: 50%;margin-top: -8px;}
.tsb_btn {width: 60px;height: 100%;position: absolute;top: 0;right: 0;}
.tsb_btn .submit {width: 100%;height: 100%;background-image: url('../img/common/top_search.png');position: absolute;right: 0;top: 0;background-repeat: no-repeat;background-position: center center;background-color: #fff;text-indent: -99999px;font-size: 0;border-radius: 10px;border: none;cursor: pointer;}
.tsb_input,
.tsb_input .input {height: 100%;width: 100%;}
.tsb_input .input {border: none;outline: none;padding-left: 15px;font-size: 18px;color: #000;font-weight: 500;}

.nav_box {padding: 5px 0;}
.nav_wrap {padding-left: 303px;position: relative;}
.categorys_wrap {position: absolute;left: 0;top: 0;height: 46px;}
.categorys {height: 100%;background-color: #282929;font-size: 16px;color: #fff;font-weight: 600;width: 300px;display: flex;align-items: center;padding-left: 25px;border-radius: 5px;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;}
.categorys:hover {background-color: #393939;}
.categorys .ham {position: absolute;right: 22px;top: 15px;width: 18px;height: 16px;display: flex;align-items: center;justify-content: center;}
.categorys .ham span,
.categorys .ham:before,
.categorys .ham:after {content: '';display: block;width: 100%;height: 2px;background-color: #fff;position: absolute;left: 0;transition: all .5s ease;}
.categorys .ham:before {top: 0;}
.categorys .ham span {top: 7px;}
.categorys .ham:after {top: 14px;}
.is-cate .categorys .ham span {opacity: 0;}
.is-cate .categorys .ham:before {transform: rotate(45deg);top: 7px;}
.is-cate .categorys .ham:after {transform: rotate(-45deg);top: 7px;}
.is-cate .category_list {display: block;}

.sitemap_wrap {position: absolute;left: 0;top: 0;background-color: #fff;padding: 50px;width: 100%;transform: translateY(-100%);z-index: 90;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;border-top: 1px solid #ddd;}
.is-nav .sitemap_wrap {translate: none;rotate: none;scale: none;opacity: 1;transform: translate(0px, 74px);}
body:before {content: '';display: block;position: fixed;width: 100%;height: 100vh;background-color: rgb(0 0 0 / 30%);z-index: 5;visibility: hidden;opacity: 0;}
body.is-nav:before {visibility: visible;opacity: 1;transition: all .5s ease;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;}
ul.sitemap_menu:before {content: '';display: table;}
ul.sitemap_menu:after {content: '';display: table;clear: both;}
ul.sitemap_menu > li {float: left;width: 25%;}
ul.sitemap_menu > li > a {font-size: 30px;color: #333;font-weight: 600;letter-spacing: -0.5px;display: flex;align-items: center;justify-content: center;margin-bottom: 20px;}
ul.sitemap_menu > li > a:hover {color: #5463e2;}
.sitemap_wrap .sm_tit {background-color: #ececec;font-size: 20px;color: #333;font-weight: 600;display: flex;align-items: center;justify-content: center;padding: 8px 5px;letter-spacing: -0.5px;margin-bottom: 10px;border-radius: 3px;}
.sm_smenu li a {font-size: 18px;color: #333;font-weight: 500;letter-spacing: -0.5px;display: flex;align-items: center;padding: 5px 20px;}
.sm_smenu li a:hover {text-decoration: underline;color: #5463e2;}
.sm_bmenu li a {font-size: 20px;color: #333;font-weight: 600;display: flex;align-items: center;letter-spacing: -0.5px;padding: 10px;justify-content: center;}
.sm_bmenu li a:hover {text-decoration: underline;color: #5463e2;}

#nav {padding-left: 80px;}
#nav > ul:before {content: '';display: table;}
#nav > ul:after {content: '';display: table;clear: both;}
#nav > ul > li {float: left;}
#nav > ul > li > a {font-size: 18px;color: #111111;font-weight: 500;height: 46px;display: flex;align-items: center;justify-content: center;padding: 0 50px;}
#nav > ul > li > a:hover {color: #1f3aae;}
.category_list {padding: 10px 0;border: 1px solid #ddd;border-radius: 5px;background-color: #fff;margin-top: 5px;height: 358px;z-index: 10;}
.category_list {position: relative;}
.category_list > li > a {display: flex;align-items: center;padding: 0 20px;font-size: 16px;color: #111;font-weight: 400;height: 40px;letter-spacing: -0.5px;}
.category_list > li > a:hover {background-color: #edf0f5;color: #1f3aae;}
.sub_category {position: absolute;width: 300px;right: -300px;top: -1px;display: none;padding-left: 3px;z-index: 10;}
.sub_category_box {padding: 10px 0;border: 1px solid #ddd;border-radius: 5px;background-color: #fff;height: 358px;}
.category_list > li.on .sub_category {display: block;}
.sub_category_box > ul > li > a {font-size: 16px;color: #111111;font-weight: 300;height: 40px;display: flex;align-items: center;padding: 0 20px;}
.sub_category_box > ul > li > a:hover {color: #1f3aae;}
footer {padding: 50px 0;border-top: 1px solid #ddd;margin-top: 120px;}
.footer {display: flex;justify-self: center;}
.footer h2 {margin-right: 55px;}
.footer p {font-size: 15px;color: #8a8b8b;font-weight: 400;line-height: 1.5;}
.search_close {display: none;width: 45px;height: 100%;align-items: center;justify-content: center;position: absolute;right: 0;top: 0;}
.search_close img {width: 13px;}

/*supplers*/
.cate_wrap {margin-bottom: 45px;}
.cate_wrap:before {content: '';display: table;}
.cate_wrap:after {content: '';display: table;clear: both;}
.cate_wrap .cate_cell {float: left;width: 11%;}
.cate_wrap a {display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;}
.cate_txt {font-size: 15px;color: #111111;font-weight: 400;margin-top: 15px;text-align: center;}
.cate_wrap a .box {background-color: #fff;width: 96px;height: 96px;border-radius: 20px;box-shadow: 0 0 7px rgb(0 0 0 / 10%);display: flex;align-items: center;justify-content: center;transition: all .1s ease;position: relative;overflow: hidden;}
.cate_wrap a .box span {display: block;height: 62px;background-repeat: no-repeat;background-position: 0 0;position: relative;z-index: 2;}
.cate_wrap a:hover .box {box-shadow: 1px 1px 12px rgb(0 0 0 / 20%);}
.cate_wrap a .box .before_b {display: block;position: absolute;bottom: -100%;left: 0;width: 100%;height: 100%;z-index: 1;border-radius: 20px;background-color: #5463e2;}
.cate_wrap a .box .after_b {position: absolute;top: -100%;left: 50%;width: 100%;height: 100%;z-index: 0;background-color: #5463e2;border-radius: 20px;transform: translate(-50%, -50%);display: none;}
.cate_wrap a .box .on,
.cate_wrap a .box .off {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.cate_wrap a .box .on {opacity: 0;}

.cate_wrap .cate0 .box span {width: 53px;background-image: url('../img/main/m_ico0.png');}
.cate_wrap .cate1 .box span {width: 53px;background-image: url('../img/main/m_ico1.png');}
.cate_wrap .cate2 .box span {width: 43px;background-image: url('../img/main/m_ico2.png');}
.cate_wrap .cate3 .box span {width: 50px;background-image: url('../img/main/m_ico3.png');}
.cate_wrap .cate4 .box span {width: 58px;background-image: url('../img/main/m_ico4.png');}
.cate_wrap .cate5 .box span {width: 70px;background-image: url('../img/main/m_ico5.png');}
.cate_wrap .cate6 .box span {width: 60px;background-image: url('../img/main/m_ico6.png');}
.cate_wrap .cate7 .box span {width: 52px;background-image: url('../img/main/m_ico7.png');}
.cate_wrap .cate8 .box span {width: 42px;background-image: url('../img/main/m_ico8.png');}

.cate_wrap .cate0 .box .on {background-position: -53px 0;}
.cate_wrap .cate1 .box .on {background-position: -53px 0;}
.cate_wrap .cate2 .box .on {background-position: -43px 0;}
.cate_wrap .cate3 .box .on {background-position: -50px 0;}
.cate_wrap .cate4 .box .on {background-position: -58px 0;}
.cate_wrap .cate5 .box .on {background-position: -70px 0;}
.cate_wrap .cate6 .box .on {background-position: -60px 0;}
.cate_wrap .cate7 .box .on {background-position: -52px 0;}
.cate_wrap .cate8 .box .on {background-position: -42px 0;}

.top {position: fixed;right: 30px;bottom: 30px;width: 54px;height: 54px;background-color: #f5f7fb;border-radius: 50%;opacity: 0;overflow: hidden;}
.top .off {background-position: 0 0;}
.top .on {background-position: -14px 0;opacity: 0;}
.top span {transform: translate(-50%, -50%);position: absolute;left: 50%;top: 50%;width: 14px;height: 17px;display: block;background-image: url('../img/common/ico_top.png');background-repeat: no-repeat;z-index: 1;}
.scrolled .top {opacity: 1;}

.top_b {display: block;position: absolute;bottom: -100%;left: 0;width: 100%;height: 100%;z-index: 1;border-radius: 50%;background-color: #000;}

.mb100 {margin-bottom: 100px;}
.mb90 {margin-bottom: 90px;}
.mb80 {margin-bottom: 80px;}
.mb70 {margin-bottom: 70px;}
.mb60 {margin-bottom: 60px;}
.mb50 {margin-bottom: 50px;}
.mb40 {margin-bottom: 40px;}
.mb30 {margin-bottom: 30px;}
.mb20 {margin-bottom: 20px;}
.mb15 {margin-bottom: 15px;}
.mb10 {margin-bottom: 10px;}

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

@media (max-width: 1399px) {
    #nav > ul > li > a {font-size: 16px;padding: 0 30px;}
}

@media (max-width: 1199px) {
    #nav {padding-left: 25px;}
    .category_list {display: none;}
    ul.sitemap_menu > li > a {font-size: 20px;}
    .sitemap_wrap .sm_tit,
    .sm_bmenu li a {font-size: 16px;}
    .sm_smenu li a {font-size: 14px;padding: 5px 10px;}
    .sitemap_wrap .container {width: 100%;}
}

@media (max-width: 991px) {
    .logo-area img {width: 100px;}
    .top_search_box {width: 370px;}
    .utils .login {margin-right: 15px;font-size: 13px;}
    .tsb_th {font-size: 13px;}
    .tsb_btn {width: 45px;}
    .tsb_btn .submit {background-size: 15px auto;}
    .top_search_box {padding-right: 45px;padding-left: 100px;height: 45px;}
    .tsb_input .input {font-size: 16px;}
    .tsb_th {width: 100px;}
    .tsb_th select {font-size: 12px;padding: 0 5px;}
    .header-top {height: 65px;}
    .category_list {height: 302px;}
    .category_list > li > a {font-size: 13px;padding: 0 15px;height: 35px;}
    .categorys {width: 230px;font-size: 13px;padding-left: 15px;}
    .sub_category_box > ul > li > a {font-size: 13px;height: 35px;padding: 0 15px;}
    .sub_category_box {height: 302px;}
    .sub_category {width: 220px;right: -220px;}
    .nav_wrap {padding-left: 233px;}
    #nav > ul > li > a {font-size: 14px;padding: 0 10px;}
    .footer {display: block;}
    .footer h2 img {width: 180px;}
    .footer h2 {margin-right: 0;margin-bottom: 20px;}
    .footer p {font-size: 13px;}

    .cate_wrap .cate_cell {width: 25%;margin-bottom: 15px;}
    .cate_txt {margin-top: 10px;}
    .cate_wrap {margin-bottom: 15px;}
    .sitemap_wrap {padding: 20px 0;}
    .sitemap_wrap .container {width: 100%;}
    .is-nav .sitemap_wrap {transform: translate(0px, 65px);}
    .mb60 {margin-bottom: 40px;}
}

@media (max-width: 767px) {
    .top_search_box {width: 240px;}
    .nav_wrap {padding-left: 0;}
    .categorys_wrap {position: relative;top: auto;left: auto;}
    .categorys {position: relative;width: 100%;}
    #nav {padding-left: 0;}
    #nav > ul {display: flex;align-items: center;justify-content: space-around;}
    #nav > ul > li {float: none;}
    footer {padding: 30px 0;}
    .tsb_th select {padding: 0 0;}
    .tsb_th {padding-right: 0;}
    .tsb_th {width: 85px;}
    ul.sitemap_menu > li {width: 100%;}
    ul.sitemap_menu > li > a,
    .sm_bmenu li a {justify-content: start;}
    .sm_bmenu li a {padding-left: 0;padding-right: 0;}
    .sitemap_wrap .sm_tit {display: inline-flex;padding-left: 15px;padding-right: 15px;}
    ul.sitemap_menu > li > a {margin-bottom: 10px;}
    ul.sitemap_menu > li {margin-bottom: 20px;border-bottom: 1px solid #ddd;}
    .sm_smenu_wrap {padding-left: 20px;margin-bottom: 10px;}
    ul.sitemap_menu > li:last-child {border-bottom: none;}
    ul.sitemap_menu > li:last-child,
    ul.sitemap_menu > li:last-child .sm_smenu_wrap {margin-bottom: 0;}
    .mb10 {margin-bottom: 5px;}
    .mb30 {margin-bottom: 10px;}
    .mb40 {margin-bottom: 20px;}
    .mb50 {margin-bottom: 30px;}
    .mb60 {margin-bottom: 30px;}
    .mb15 {margin-bottom: 10px;}
}

@media (max-width: 575px) {
    .top_search_box {width: 100%;display: none;}
    #nav > ul > li > a {font-size: 13px;padding: 0 5px;height: 40px;}
    .footer {text-align: center;}
    .category_list {height: 282px;overflow-y: auto;padding: 0;}
    .sub_category {display: block;position: static;padding-left: 0;width: 100%;}
    .sub_category_box {border: none;height: auto;border-bottom: 1px solid #ddd;padding-left: 15px;border-radius: 0;}
    .category_list > li > a {border-bottom: 1px solid #ddd;font-weight: 500;}
    .category_list > li:last-child > a {border-bottom: none;}
    .utils .search {display: block;}
    .tsb_btn {width: 90px;}
    .search_close {display: flex;}
    .tsb_btn .submit {width: 35px;right: 35px;}
    .top_search_box {padding-right: 75px;}
    .tsb_input .input {font-size: 15px;}

    .cate_wrap a .box {width: 70px;height: 70px;}
    .cate_txt {font-size: 12px;}

    .cate_wrap a .box span {background-size: auto 31px;height: 31px;}
    .cate_wrap .cate0 .box span {width: 27px;}
    .cate_wrap .cate1 .box span {width: 27px;}
    .cate_wrap .cate2 .box span {width: 22px;}
    .cate_wrap .cate3 .box span {width: 25px;}
    .cate_wrap .cate4 .box span {width: 29px;}
    .cate_wrap .cate5 .box span {width: 35px;}
    .cate_wrap .cate6 .box span {width: 30px;}
    .cate_wrap .cate7 .box span {width: 26px;}
    .cate_wrap .cate8 .box span {width: 21px;}

	.cate_wrap .cate0:hover .box span {background-position: -27px 0;}
    .cate_wrap .cate1:hover .box span {background-position: -27px 0;}
    .cate_wrap .cate2:hover .box span {background-position: -22px 0;}
    .cate_wrap .cate3:hover .box span {background-position: -25px 0;}
    .cate_wrap .cate4:hover .box span {background-position: -29px 0;}
    .cate_wrap .cate5:hover .box span {background-position: -35px 0;}
    .cate_wrap .cate6:hover .box span {background-position: -30px 0;}
    .cate_wrap .cate7:hover .box span {background-position: -26px 0;}
    .cate_wrap .cate8:hover .box span {background-position: -21px 0;}

	.cate_wrap .cate0 .box .on {background-position: -27px 0;}
    .cate_wrap .cate1 .box .on {background-position: -27px 0;}
    .cate_wrap .cate2 .box .on {background-position: -22px 0;}
    .cate_wrap .cate3 .box .on {background-position: -25px 0;}
    .cate_wrap .cate4 .box .on {background-position: -29px 0;}
    .cate_wrap .cate5 .box .on {background-position: -35px 0;}
    .cate_wrap .cate6 .box .on {background-position: -30px 0;}
    .cate_wrap .cate7 .box .on {background-position: -26px 0;}
    .cate_wrap .cate8 .box .on {background-position: -21px 0;}

    footer {margin-top: 50px;}
    .mb60 {margin-bottom: 30px;}
    .top {display: none;}

    .sitemap_wrap {padding: 75px 0 10px 0;height: 100vh;}
    .is-nav .sitemap_wrap {transform: translate(0px, 0);}
    ul.sitemap_menu > li > a {font-size: 16px;}
    .sitemap_wrap .sm_tit, .sm_bmenu li a {font-size: 14px;}
    .sm_bmenu li a {padding-top: 5px;padding-bottom: 5px;}
    ul.sitemap_menu > li {margin-bottom: 10px;}
    .sm_smenu_wrap {margin-bottom: 5px;}
}