/** fisrt page */
/*@font-face {
    font-family: "light";
    src: url('../fonts/light.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
}*/

@font-face {
    font-family: "sbchollima";
    src: url('../fonts/sbchollima.ttf');
    font-weight: normal;
    font-style: normal;
}

html {
    font-family: "sbchollima";
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

h1,h2,h3,h4,h5,h6 {
    font-family: "sbchollima" !important;
}

body {margin: 0;}
*{font-family: "sbchollima";}
.home_header{
    background: url(../image/header_top.jpg) no-repeat center;
    background-size: 100% 100%;
    width: 100%;
    height: 532px;
}
.logo_field{
    display: inline-block;
    width: 100%;
}
.logo_field h1{display: block;}
.logo_field img{
    width: 150px;
    padding: 20px 20px 0 0;
}
.home_header_container{position: relative;}
.langs{padding-top: 50px;text-align: right;}
.lang {
    color: #ababaa;
    font-size: 1rem;
    margin-left: 1.3rem;
}
.header a.active {
    color: #fff;
    border-bottom: solid 2px;
    padding-bottom: 2px;
    text-decoration: none;
}
a:hover{text-decoration: none;}
.home_header_container nav ul li{
    float: left;
    width: 25%;
    text-align: center;
}
nav li img{
    width: 50%;
    padding-bottom: 0.5rem;
}
.header_center{position: absolute;}
.home_header_container .f-r{float: right;}
.header_center{
    display: inline-block;
    width: 49%;
    height: 532px;
    top: 0;
    left: 27%;
    background: url(../image/home_bg.png) no-repeat center;
    background-size: 100% 100%;
}
.nav-item{
    display: inline-block;
    width: 100%;
    padding: 100px 0;
}
.nav_name{
    display: block;
    text-decoration: none;
    color: #fff;
}
.search-txt {
    height: 40px;
    background-color: #000000;
    border-radius: 26px;
    border: none;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    opacity: 0.5;
    padding: 6px 12px;
    width: 88%;
    margin: 50px 6% 0;
    position: relative;
}
.search-btn{
    position: absolute;
    right: 50px;
    top: 60px;
    font-size: 1rem;
    color: #fff;
}
.about_btn{
    display: inline-block;
    width: 50%;
    height: 200px;
    background:url(../image/home_logo.png) no-repeat center;
    background-size: 100% 100%;
    margin: 58px 25% 0;
}

.special-good{
    background: url(../image/home_special.png) no-repeat center;
    background-size: 100% 100%;
    height: 515px;
}
.special-good-list{padding-top: 170px;}
.product-img-wrapper {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 100%;
    overflow: hidden;
}
.special-pro{
    padding-bottom: 85%;
}
.product-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%); 
}

.special-list span{
    display: inline-block;
    width: 100%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000;
}

.slick-dots li button:before {
    background: #d3d3d3;
    height: 5px !important;
    width: 5px;
    display: inline-block;
    content: '' !important;
    margin-top: 7px;
    border-radius: 5px;
    opacity: 1;
}
.slick-dots li.slick-active button:before {
    background: #fcb214;
    height: 10px !important;
    width: 20px;
    display: inline-block;
    content: '';
    margin-top: 5px;
    border-radius: 5px;
}

.product-step-block{
    background: url(../image/home_content_bg.png) no-repeat center;
    background-size: 100% 100%;
    margin-top: -5px;
    padding: 50px;
}
.product-block{
    margin-top: 100px;
    border: 2px solid #fff;
    position: relative;
    padding: 35px;
}
.product-step-block .category-title{
    background: url(../image/section_top.png) no-repeat center;
    background-size: 100% 100%;
    display: inline-block;
    padding: 12px 40px;
    position: absolute;
    font-size: 1.5rem;
    font-weight: bold;
    top: -35px;
    right: 34px;
}
.cosmetics .category-title{
    left: 34px;
    right: unset !important;
}

.advertisement{background-color: #fff;padding: 20px;}
.pro-image{border: 1px solid #fcb214;}
.product-pro-name{
    display: inline-block;
    width: 100%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000;
    padding: 5px 0;
}
.enterprise-block-title{
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    width: 100%;
    padding: 20px 0;
}
.our-enterprise .container .enterprise-block-main .company-photo {
    position: relative;
    z-index: 1;
    height: 260px;
    padding: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}
.our-enterprise .container .enterprise-block-main .company-photo .photo-size {
    height: 200px;
}
.our-enterprise .container .enterprise-block-main .company-photo .photo-size a img {
    width: 100%;
    height: 100%;
}
.company_name{
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    color: #000;
    line-height: 40px;
}
.loading-wrapp {
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 20%;
    position: fixed;
    z-index: 3000;
    background: rgba(0, 0, 0, 0.2);
    font-size: 45px;
    color: black;
    display: none; 
}
.visible {display: block; }


/** footer */
.footer {
    background-image: url(../image/footer.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-top: 4px solid #e7e7e7; 
    margin : 0 auto;
}

.bottom-menu {
    padding: 50px 0;
    text-align: center;
}
.bottom-menu ul {padding-left: 0; }
.bottom-menu ul li {
    display: inline-block;
    vertical-align: top;
    padding: 0 15px;    
    color: #EEE;
}
.desc{font-size: 22px;}
.bottom-menu ul li a {
    color: #EEE;
    font-weight: bold; 
}
.bottom-menu ul li:hover {border-bottom: 1px solid #EEE; }
.bottom-menu ul li:hover a {text-decoration: none;}
.bottom-menu .cur-contact {
    font-size: 1.3rem;
    margin-bottom: 20px;
}
.bottom-menu .cur-contact li:first-child {border-right: solid 1px;border-bottom:none;}
.bottom-menu .cur-contact li:nth-child(2) {border-right: solid 1px;border-bottom:none;}
.bottom-menu .cur-contact li:nth-child(3) {border-bottom:none;}
.kftrade {margin-left: 25px; margin-bottom: 20px; margin-right: 25px;}
.dprkportal{margin-left: 25px; margin-bottom: 20px; margin-right: 25px;}
/**footer */
@media(max-width:1200px){
    .lang{margin-left: 0.3rem;}
}
@media(max-width:767px){
    .lang{font-size: 3vw;}
    .home_header{height: 68vw;}
    .logo_field{height: 20vw;}
    .logo_field div, h1{
        width: 50%;
        float: left;
        margin: 0;
    }  
    .logo_field a.loading{
        width: 50%;
        height: 20vw;
        display: inline-block;
        position: relative;
    }
    .logo_field img{
        width: 100%;
        padding: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .langs{padding-top: 2vw;}
    .logo_field a.lang{
        width: 50%;
        margin-left: 50%;
        line-height: 5vw;
        padding: 0.5vw 0;
    }
    .header_center{
        width: 60%;
        left: 20%;
        top: 28vw;
        height: 40vw;
    }
    .search-txt{
        position: relative;
        top: -6.2vw;
        width: 110%;
        margin: 0;
        left: -6%;
    }
    .search-btn{
        top: -5vw;
        right: 0;
    }
    .about_btn{
        height: 20vw;
        margin: 0 25%;
    }
    .home_header_container nav ul.col-sm-6{width: 20%;}
    .home_header_container nav ul:first-child{
        margin-right: 60%;
        position: absolute;
        left: 0;
    }
    .home_header_container nav ul:last-child{
        position: absolute;
        right: 0;
    }
    .home_header_container nav ul li:first-child{margin-top: 10vw;}
    .home_header_container nav ul li{width: 100%;}
    .special-good-list{padding-top: 12vw;}
    .special-good{
        /* background-size: auto; */
        height: 41vw;
    }
    .special-pro{padding-bottom: 60%;}
    .product-block{padding: 2vw;}
    .nav-item{padding: 3vw 0;}
    .product-step-block{
        padding: 0;
        margin-top: -2.5vw;
    }
    .product-step-block .category-title{top: -7vw;}
    a.typical-pro{width: 100%;}
    .container {width: 100%;}
    .desc{
        font-size: 3.5vw;
        line-height: 5vw;
    }
}
@media(max-width:670px){
    .search-txt {
        position: relative;
        top: -7.2vw;
        width: 110%;
        margin: 0;
        left: -6%;
    }
    .search-btn{top: -6vw;}
}
@media(max-width:640px){
    .search-txt{top: -7.5vw;}
    .search-btn{top: -6vw;}
    .special-good {
        background: url(../image/home_special_mob_kp.png) no-repeat center;
        background-size: 100% 100%;
        height: 45vw;
    }
    .special-pro{padding-bottom: 50%;}
    .product-step-block{margin-top: 0;}
    .pro-image{width: 100%;}
    .advertisement{position: relative;}
    .pro-slide{
        position: absolute;
        top: 15px;
        width: 100%;
        left: 0;
    } 
    .advertisement .col-xs-8{
        width: 100%;
        margin-top: 86vw;
    }
    .advertisement .col-xs-3,.company-photo{width: 50%;}
    .product-step-block .category-title{
        padding: 15px 0;
        font-size: 16px;
        height: 50px;
        top: -49px;
        right: 10px;
        width: 250px;
        text-align: center;
    }
    .cosmetics .category-title{
        left: 10px;
        right: unset !important;
    }
}
@media(max-width:560px){
    .search-txt {top: -8vw;}
    .search-btn{top: -6.4vw;}
}
@media(max-width:550px){
    .search-txt {top: -8.7vw;}
    .search-btn{top: -7vw;}
}
@media(max-width:480px){
    .about_btn {
        height: 20vw;
        margin: -4vw 25%;
    }
    .search-txt {top: -9.3vw;}
    .search-btn{top: -7.3vw;}
    .special-pro {padding-bottom: 47%;}
}
@media (max-width: 452px){
    .bottom-menu ul li {
        display: block;
        line-height: 30px;
    }
    .bottom-menu .cur-contact {
        text-align: left;
        font-size: 0.8rem;
    }
}

@media(max-width:420px){
    .search-txt {top: -10.4vw;height: 9vw;}
    .search-btn {top: -8.5vw;}
    .nav-item {padding: 2vw 0;}
    .nav_name {font-size: 3vw;}
    .langs {padding-top: 1vw;line-height: 3vw;}
    .company-photo {width: 100%;}
}
@media(max-width:360px){
    .search-txt {top: -11.2vw;}
    .search-btn {top: -9.4vw;}
    .nav_name {font-size: 2.8vw;}
    .special-pro {padding-bottom: 42%;}
}
@media(max-width:340px){
    .search-btn {top: -10vw;}
}
@media(max-width:320px){
    .nav_name{font-size: 2.6vw;}
    .search-btn {top: -8.2vw;}
    .search-txt{
        height: 9vw;
        top: -9.2vw;
    }
    .special-pro {
        padding-bottom: 21%;
    }
    .product-step-block .category-title{right: 16px !important;left: unset;}
}