.main .title_wrap {text-align: center; padding: 110px 0 75px;}
.main .title_wrap strong { display: block; font-size:  2.813rem; font-weight: 700; color: #222222; margin: 0 0 10px;}
.main .title_wrap p {font-size:  1.375rem; font-weight: 300; color: #666666;}
.main .title_wrap.white strong {color: #fff;}
.main .title_wrap.white p {color: #fff;}

.mouse_icon {position: fixed; top: 50%; transform: translate(0,-50%); right: 40px; z-index: 3;}
/* main_slide_area */
.main_slide_area .swiper-slide {display: table; height: 100vh; background-size: cover !important; background-position: center !important;}
.main_slide_area .swiper-slide > div {display: table-cell; vertical-align: middle;}
.main_slide_area .swiper-slide > div b {display: block; font-size: 3rem; font-weight: 700; color: #fff; line-height: 1.3; margin: 0 0 30px;}
.main_slide_area .swiper-slide > div p {font-size: 1.188rem; color: #fff; font-weight: 400; line-height: 1.7;}
.main_slide_area .swiper-pagination-bullet {position: relative; width:24px; height: 24px; transition: .3s ease; background: transparent; opacity: 1; margin: 0 15px !important;}
.main_slide_area .swiper-pagination-bullet::before {content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%,-50%); background: #fff; border-radius: 50%; transition: .3s ease;}
.main_slide_area .swiper-pagination-bullet::after {content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%,-50%); border: 4px solid #fff; border-radius: 50%; transition: .3s ease; opacity: 0; box-sizing: border-box;}
.main_slide_area .swiper-pagination-bullet-active::before {opacity: 0;}
.main_slide_area .swiper-pagination-bullet-active::after {opacity: 1;}

/* business_area */
.business_area .photo_list {height: 700px;}
.business_area .photo_list > li {position: relative; display: inline-block; float: left; width: 33.3333%; height: 100%; }
.business_area .photo_list > li .photo {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center !important; background-size: cover !important;}
.business_area .photo_list > li .txt_wrap {position: absolute; left: 50%; width: calc(100% - 80px); bottom: 50px; transform: translate(-50%,0);}
.business_area .photo_list > li .txt_wrap b {display: block; color: #fff; font-size: 2rem; font-weight: 700; margin: 0 0 10px;}
.business_area .photo_list > li .txt_wrap .hidden {display: none;}
.business_area .photo_list > li .txt_wrap li {position: relative; color: #fff; padding: 0 0 0 10px;}
.business_area .photo_list > li .txt_wrap li + li {margin: 6px 0 0;}
.business_area .photo_list > li .txt_wrap li::before {content: ""; position: absolute; left: 0; top: 12px; width: 3px; height: 3px; border-radius: 50%; background: #fff;}
.business_area .photo_list > li .txt_wrap a {display: inline-block; width: 46px; height: 46px; position: relative; border-radius: 50%; background: #fff; margin: 40px 0 0;}
.business_area .photo_list > li .txt_wrap a img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

/* product_area */
.product_area {max-width: 1920px; margin: 0 auto; padding: 0 0 100px; background: #f2f6fa url('/images/product_bg.png')no-repeat; background-position: right 20px top -45px;}
.product_area .swiper-slide {position: relative;}
.product_area .swiper-slide .photo {position: relative; height: 400px; background-position: center !important; background-size: cover !important; border-radius: 20px; overflow: hidden;}
.product_area .swiper-slide .photo::after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); z-index: 2; transition: .3s ease;}
.product_area .swiper-slide p {text-align: center; padding: 10px 0; font-size:  1.375rem; font-weight: 500; color: #aaa;}
.product_area .swiper-slide-active .photo::after {opacity: 0;}
.product_area .swiper-slide-active p {color: #333333;}
.product_area .swiper-button-wrap {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2;}
.product_area .swiper-button-wrap .swiper-button {position: absolute; width: 80px; display: block; margin: 0; top: -20px; left: auto; right: auto;}
.product_area .swiper-button-wrap .swiper-button::after {display: none;}
.product_area .swiper-button-wrap .swiper-button-prev {text-align: right; left: 0; }
.product_area .swiper-button-wrap .swiper-button-next {text-align: left; right: 0;}
.product_area .swiper-button-wrap .swiper-button p {display: block; color: #333333; font-size: 1.063rem;}
.product_area .swiper-button-wrap .swiper-button img {transform: translate(0,-14px);}

/* example_area */
.example_area {background: url("/images/main/example_area.jpg"); background-position: center !important; background-size: cover !important; padding: 0 0 110px;}
.example_area .swiper-container {padding: 0 0 90px;}
.example_area .swiper-pagination-bullet {opacity: 1; background: rgba(255,255,255,0.5); width: 15px; height: 15px; margin: 0 6px !important; transition: .3s ease;}
.example_area .swiper-pagination-bullet-active {width: 75px; background: #fff; border-radius: 10px;}
.example_area .swiper-slide {background: #fff; padding: 10px; }
.example_area .swiper-slide .photo {width: 100%; padding-bottom: 82%; background-position: center !important; background-size: cover !important;}
.example_area .swiper-slide .txt_wrap {padding: 25px 5px;}
.example_area .swiper-slide .txt_wrap b {display: block; font-size:  1.375rem; font-weight: 700; color: #333333; margin: 0 0 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.example_area .swiper-slide .txt_wrap p {font-size: 1.125rem; font-weight: 400; color: #666666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.example_area .swiper-slide .txt_wrap span {color: #888888; font-weight: 400; font-size: 1.063rem;}


@media screen and (max-width: 1300px) {

}
@media screen and (max-width: 1024px) {
    .main_slide_area .swiper-slide {min-height: 550px;}

    .business_area .photo_list {height: auto; width: calc(100% - 20px); margin: 0 auto;}
    .business_area .photo_list > li {width: 100%; border: 1px solid #ddd; margin: 0 0 20px;}
    .business_area .photo_list > li .photo {position: relative; padding-bottom: 50%; height: auto;}
    .business_area .photo_list > li .txt_wrap {position: relative; bottom: auto; left: auto;  transform: translate(0); width: 100%;  padding: 15px;}
    .business_area .photo_list > li .txt_wrap .hidden {display: block;}
    .business_area .photo_list > li .txt_wrap b {color: #333333;}
    .business_area .photo_list > li .txt_wrap li {color: #666666; font-size: 1.25rem; display: inline-block; float: left; margin: 0 10px 10px 0;}
    .business_area .photo_list > li .txt_wrap li + li {margin: 0 10px 10px 0;}
    .business_area .photo_list > li .txt_wrap li:last-child {margin: 0 0 10px;}
    .business_area .photo_list > li .txt_wrap li::before {background: #666; }
    .business_area .photo_list > li .txt_wrap a {display: none;}

    .product_area .swiper-container {padding: 0 50px;}
    .product_area .swiper-button-wrap {display: none;}
}
@media screen and (max-width: 768px) {
    .main_slide_area .swiper-slide > div b br,
    .main_slide_area .swiper-slide > div p br {display: none;}
    .main_slide_area .swiper-pagination-bullet {margin: 0 8px !important;}

    .main .title_wrap {padding: 80px 0 50px;}

    .product_area .swiper-slide .photo {height: auto; padding-bottom: 60%;}

    .product_area,
    .example_area{padding: 0 0 80px;}
}
@media screen and (max-width: 480px) {
    .main .title_wrap p {padding: 0 10px;}
    .main .title_wrap strong {font-size: 2.125rem;}

    .business_area .photo_list > li .txt_wrap b {font-size: 1.5rem;}

    .main_slide_area .swiper-slide > div b {font-size: 2.125rem; margin: 0 0 15px;}
    .main_slide_area .swiper-pagination-bullet {width: 18px; height: 18px;}

    .main .title_wrap {padding: 50px 0 25px;}

    .product_area .swiper-container {padding: 0 25px;}


    .product_area,
    .example_area{padding: 0 0 50px;}
    .example_area .limit1400 {padding: 0;}
    .example_area .swiper-container {padding: 0 0 50px;}
    .example_area .swiper-pagination-bullet-active {width: 50px;}

    .business_area .photo_list > li .txt_wrap li {margin: 0 10px 5px 0; padding: 0 0 0 8px;}
    .business_area .photo_list > li .txt_wrap li + li {margin: 0 10px 5px 0;}
    .business_area .photo_list > li .txt_wrap li:last-child {margin: 0 0 5px;}
}