/* main_common */
.main_tit { position: relative; margin-bottom: 30px; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.main_tit .left { font-weight: 700; font-size: 45px; }
.main_tit .right a { position: relative; display: inline-flex; flex-wrap: nowrap; align-items: center; }
.main_tit .right a span { display: inline-block; font-weight: 500; font-size: 16px; color: #676767; }
.main_tit .right a img { display: inline-block; width: 14px; }
.main_tit .right a::after { display: block; content: ''; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background-color: #676767; transition: width 0.3s; }
.main_tit .right a:hover::after { width: 100%; }

/* main_product */
#main_product { position: relative; padding: 120px 0; overflow: hidden; background: url(/image/main/product_bg.png) no-repeat center/cover; }
#main_product .main_tit .left { color: #333; }
#main_product .product_wrap { position: relative; }
#main_product .product_wrap .product_slick { position: relative; margin: -10px; }
#main_product .product_wrap .product_slick .product_li { padding: 10px; }
#main_product .product_wrap .product_slick .product_li a { position: relative; padding: 50px 15px 40px; display: block; height: 100%; text-align: center; background-color: #fff; }
#main_product .product_wrap .product_slick .product_li a .img_wrap { text-align: center; }
#main_product .product_wrap .product_slick .product_li a .img_wrap img { display: inline-block; max-width: 100%; }
#main_product .product_wrap .product_slick .product_li a p { margin-top: 20px; text-align: center; font-weight: 600; font-size: 18px; color: #000; }

#main_product .product_wrap .product_arrow { z-index: 1; position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; cursor: pointer; }
#main_product .product_wrap .arrow_left { left: -65px; background: url(/image/main/product_left.png) no-repeat center/cover; }
#main_product .product_wrap .arrow_right { right: -65px; background: url(/image/main/product_right.png) no-repeat center/cover;  }

@media (max-width: 1680px) {
    #main_product .product_wrap .product_slick .product_li a p { margin-top: 15px; }

    #main_product .product_wrap .product_arrow { width: 40px; height: 40px; }
    #main_product .product_wrap .arrow_left { left: -55px; }
    #main_product .product_wrap .arrow_right { right: -55px; }
}
@media (max-width: 1440px) {
    #main_product .product_wrap { padding: 0 50px; }

    #main_product .product_wrap .product_arrow { width: 30px; height: 30px; }
    #main_product .product_wrap .arrow_left { left: 0; }
    #main_product .product_wrap .arrow_right { right: 0; }
}
@media (max-width: 1024px) {
    #main_product .product_wrap { padding: 0 70px; }
    #main_product .product_wrap .product_arrow { width: 40px; height: 40px; }
}
@media (max-width: 767px) {
    #main_product .product_wrap { padding: 0 50px; }
    #main_product .product_wrap .product_arrow { width: 30px; height: 30px; }
}
@media (max-width: 624px) {
    #main_product .product_wrap { padding: 0; }
    #main_product .product_wrap .product_slick { margin: -5px; }
    #main_product .product_wrap .product_slick .product_li { padding: 5px; }
    #main_product .product_wrap .product_arrow { display: none; }
}

/* main_brand */
#main_brand { position: relative; padding: 120px 0; overflow: hidden; background: url(/image/main/brand_bg.png) no-repeat center/cover; }
#main_brand .main_tit .left { color: #fff; }
#main_brand .contents { position: relative; }
#main_brand .contents ul { display: flex; flex-wrap: nowrap; margin: -8px; }
#main_brand .contents ul li { position: relative; padding: 8px; }
#main_brand .contents ul li a { position: relative; display: block; background-color: #fff; }
#main_brand .contents ul li a img { width: 100%; }
#main_brand .contents ul li a p { padding: 15px 5px; text-align: center; font-weight: 500; font-size: 18px; color: #000; white-space: nowrap; }
@media (max-width: 1024px) {
    #main_brand .contents ul { margin: -5px; }
    #main_brand .contents ul li { padding: 5px; }
    #main_brand .contents ul li a p { padding: 13px 5px; }
}
@media (max-width: 767px) {
    #main_brand .contents ul { margin: 0; flex-wrap: wrap; justify-content: space-between; }
    #main_brand .contents ul li { padding: 0; width: 48%; }
    #main_brand .contents ul li:nth-of-type(n + 3) { margin-top: 4%; }
    #main_brand .contents ul li a p { padding: 10px 5px; }
}

/* main_service */
#main_service { position: relative; padding: 120px 0; overflow: hidden; border-bottom: 1px solid #e0e0e0; }
#main_service .main_tit .left { color: #333; }
#main_service .contents { position: relative; }
#main_service .contents ul { position: relative; display: flex; flex-wrap: nowrap; justify-content: space-between; }
#main_service .contents ul li { position: relative; width: 30.5%; }
#main_service .contents ul li a { position: relative; display: block; }
#main_service .contents ul li img { width: 100%; }
#main_service .contents ul li .circle { z-index: 2; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 215px; height: 215px; background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; }
#main_service .contents ul li .circle p { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; text-align: center; font-weight: 700; font-size:  24px; color: #000; line-height: 1.15; }
@media (max-width: 1680px) {
    #main_service .contents ul li .circle { width: calc(120px + 5vw); height: calc(120px + 5vw); }
}
@media (max-width: 767px) {
    #main_service .contents ul { flex-wrap: wrap; }
    #main_service .contents ul li { width: 48%; }
    #main_service .contents ul li:nth-of-type(n + 3) { margin-top: 4%; }
    #main_service .contents ul li .circle { width: calc(100px + 5vw); height: calc(100px + 5vw); }
}

/* main_contact */
#main_contact { position: relative; padding: 120px 0; overflow: hidden; }
#main_contact .main_tit .left { color: #333; }
#main_contact .iframe_wrap { position: relative; margin-top: 50px; width: 100%; height: 430px; }
#main_contact .iframe_wrap iframe { width: 100%; height: 100%; }
@media (max-width: 1680px) {
    #main_contact .iframe_wrap { height: calc(250px + 10vw); }
}
@media (max-width: 1280px) {
    #main_contact .iframe_wrap { height: calc(200px + 10vw); }
}