@charset "utf-8";

@import url('./product_style.css');

/*-------------------------------------------------------------------
    ## Top section
-------------------------------------------------------------------*/
.top_sec { position: relative; height: 0; padding-bottom: 168.888%; background: url(../images/product/lf95_plus/bg_top_area.jpg) top center / cover no-repeat; overflow: hidden; }
.top_els { position: absolute; left: 0; right: 0; bottom: 0; top: 0; }
.top_els span { position: absolute; left: 0; bottom: 0; }
.top_els .pole_1 { top: 0; width: 100%; height: 0; padding-bottom: calc(659 / 390 * 100%); background: url(../images/product/lf95_plus/main_top_deco.png) top left / cover no-repeat; z-index: 2; opacity: 0; transform: translate(-100%, 0); }
.top_sec.ani_in .top_els .el_pole { animation: polesAni cubic-bezier(.2, .38, .24, 1) .9s forwards; animation-delay: 220ms; }
.top_els .el_bottom_bar { width: 0; height: 20.6207%; background: #11004c; left: 0; z-index: 1; }
.top_sec.ani_in .top_els .el_bottom_bar { animation: bottomBarAni cubic-bezier(.2, .38, .24, 1) 1s forwards; }
.el_bottom_bar .uel_logo { position: absolute; right: 44px; bottom:46px; width: 162px;opacity: 0; transition: ease-out .5s .8s;}
.ani_in .el_bottom_bar .uel_logo { margin-right: 0; opacity: 1; }
.top_els .graphic { position: absolute; width: 100%; left: 20px; top: 12px;box-sizing: border-box; text-align: left; z-index: 2; }
.top_els .cars { margin-top: 12px; }
.top_els .graphic .img { display: inline-block; vertical-align: top; }
.top_els .graphic .txt { opacity: 0; width: 145px; }
.top_sec.ani_in .top_els .graphic .txt { animation: elsInPoleAni ease-out .3s 540ms forwards; }
.top_els .graphic .cars img { opacity: 0; }
.top_sec.ani_in .top_els .graphic .cars img { height: 40px; width: auto; animation: elsInPoleAni ease-out .3s 580ms forwards; vertical-align: top; }
.top_sec .set_inner {position: relative;height: 100%;}
.tire_container {padding-bottom:0;}
@keyframes polesAni {
    0% {
        opacity: 0;
        transform: translate(-100%, 0);
    }
    20% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}
@keyframes bottomBarAni {
    0% {
        width: 0;
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        width: 100%;
    }
}
@keyframes elsInPoleAni {
    0% {
        transform: translate(-40px, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/* section_spec */
.section_spec {margin-bottom:55px;}

/* section_tire360 */
.section_tire360 .ttl_area {position:absolute; top:0; z-index:1; width:100%;padding:min(calc(140 / 390 * 100vw), 160px) 23px 0 23px;}
.section_tire360 .ttl_area img {max-height:32px;}
.section_tire360 .tire_area {position:relative;height:0;padding-bottom:calc(754 / 390 * 100%); background:url(../images/product/lf95_plus/bg_tire_sec.jpg) center/cover no-repeat;}
.section_tire360 .ttl_area p {margin-top:16px;font-size:14px;color:#4A2785;font-family: 'Hankook TTF Bold Oblique', 'Arial', Sans-Serif;}

/* section_grid_img */
.section_grid_img {padding:110px 0 38px;}
.section_grid_img .ttl_area .ttl {font-size:32px;line-height:38px;}
.section_grid_img .ttl_area .ttl [aria-hidden="true"] {height:48px;}
.section_grid_img .img_area {flex-direction:column;gap:min(calc(16 / 390 * 100vw), 32px);}
.section_grid_img .img_area,
.section_grid_img .img_area ul {display:flex;justify-content: space-between;}
.section_grid_img .img_grid_wrap {overflow:hidden;gap:min(calc(16 / 390 * 100vw), 32px);height:min(calc(240 / 390 * 100vw), 480px);}
.section_grid_img .img_grid_wrap.top .top_l {width:calc(200 / 350 * 100%);}
.section_grid_img .img_grid_wrap.top .top_r {width:calc(134 / 350 * 100%);}
.section_grid_img .img_grid_wrap.middle {height:min(calc(240 / 390 * 100vw), 480px);}
.section_grid_img .img_grid_wrap.middle .middle_l {width:100%;}
.section_grid_img .img_grid_wrap.btm {height:min(calc(240 / 390 * 100vw), 480px);}
.section_grid_img .img_grid_wrap.btm .btm_l {width:calc(134 / 350 * 100%);}
.section_grid_img .img_grid_wrap.btm .btm_r {width:calc(200 / 350 * 100%);}

/* section_overview */
.section_overview {position:relative;}
.section_overview .set_inner.gray {padding-top: 16px;padding-bottom: 40px;background-color:#E7E8E7;}
.section_overview .ttl_area {position:relative;z-index:1;padding:40px 0 30px;}
.section_overview h3 {margin-bottom:12px;font-size:15px;font-weight:600;color:#666;line-height:22px;}
.section_overview .features_area {margin-top:40px;}
.section_overview .features_area ol li {display:flex;align-items:center;border-bottom:1px solid #bbb;padding:12px 0;}
.section_overview .features_area ol li::before {display:none;}
.section_overview .features_area ol li:first-child {padding-top:0;}
.section_overview .features_area ol li:last-child {padding-bottom:0;border-bottom:none;}
.section_overview .features_area ol li p {font-size:14px;font-weight:500;color:#666;line-height:20px;word-break: break-word;}
.section_overview .features_area ol li span {flex:0 0 25px;font-size: 14px;font-weight: 700;line-height:20px;color:#A493C2;}
.section_overview .overview_area {display:flex;gap:32px;flex-direction:column;}
.section_overview .overview_area .overview_text .text_ttl {font-size:13px;font-weight:500;line-height:22px;}
.section_overview .overview_area .overview_text .text_ttl + p {margin-top:8px;font-size:12px;line-height:17px;}
.section_overview .overview_area .overview_label_img img {width:113px;}
.section_overview .application_list li img {width:100%;}
.section_overview .application_list li .tips p {margin-top:8px;font-size:12px;line-height:17px;text-align:center;color:#666;}
.vehicle_position_area .img_car {width:293px;}
.vehicle_position_area span {display:flex;gap:3px;align-items:center;margin-top:10px;font-size:10px;font-weight:500;color:#222;}
.section_overview .tire_area {position:relative;z-index:0;}
.section_overview .tire_area .bg_img {width:100%;}

/* section_mileage */
.section_mileage {position:relative;padding-bottom:40px;background-color: #F2F2F2;}
.section_mileage .ttl_area {background-image:url(../images/product/lf95_plus/img_section_bg_car.jpg);}
.section_mileage .info_list_wrap {margin-top:40px;}
.section_mileage .info_list_wrap .info_item {width:100%;}
.section_mileage .sub_txt p {font-size:11px;font-weight:500;line-height:16px;}
.section_mileage .sub_txt p.c_point {font-size:13px;line-height:19px;letter-spacing:-0.02em;}
.section_mileage .sub_txt p.c_point strong {margin-lefT:7px;font-size:22px;font-weight:600;line-height:32px;}
.section_mileage .sub_txt .road_item .percentage_area {display:flex;align-items:center;gap:3px;}
.section_mileage .sub_txt .road_item div {margin-top:-5px;font-size:12px;font-weight:500;line-height:17px;color:#666;}
.section_mileage .sub_txt .road_item.lf95_plus div {font-weight:600;color:#4A2785;}
.section_mileage .sub_txt .road_item .percentage {display:inline-block;font-size:14px;font-weight:600;line-height:20px;color:#939598;}
.section_mileage .sub_txt .road_item.lf95_plus .percentage {color:#4A2785;}
.section_mileage .sub_txt .road_item:nth-of-type(1) img {width:280px;}
.section_mileage .sub_txt .road_item:nth-of-type(2) img {width:195px;}
.section_mileage .sub_txt p.sub_txt_caution {margin-top:25px;font-size:12px;line-height:17px;color:#888;}

/* section_regrooving */
.section_regrooving {position:relative;padding:40px 0;}
.section_regrooving .info_list_wrap {margin-top:40px;}
.section_regrooving .info_list_wrap .swiper-slide,
.section_regrooving .info_item {width:268px;}
.section_regrooving .tbl_area {margin-top:40px;}
.section_regrooving .tbl_area table tbody tr:last-child {border-bottom-width:1px;}

/* section_traction */
.section_traction {position:relative;padding-bottom:40px;background-color: #F2F2F2;}
.section_traction .ttl_area {background-image:url(../images/product/lf95_plus/img_section_bg_tire.jpg);}
.section_traction .info_list_wrap {margin-top:40px;}
.section_traction .info_list_wrap .info_item .has_text_wrap {display:flex;gap:12px;}
.section_traction .info_list_wrap .info_item .has_text_wrap img {width:100%;height:100%;object-fit: contain;object-position: left bottom;}
.section_traction .info_list_wrap .info_item .has_text {display:flex;flex-direction:column;width:140px;}
.section_traction .info_list_wrap .info_item .has_text span {display:block;background-color:#fff;text-align:center;padding:5px 0;font-size:10px;line-height:15px;color:#000;}

@media all and (max-width:420px) {
    .section_overview .overview_area .overview_text .text_ttl + p br,
    .ttl_area .ttl .hide_sm_mobile {display:none;}
}
@media all and (max-width:360px) {
    .section_grid_img .ttl_area .ttl {font-size:28px;line-height:34px;}
	.section_grid_img .ttl_area .ttl [aria-hidden="true"] {height:42px;}
}

.lf95_plus_label_link {margin-top: 15px!important;}