@charset "utf-8";

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

/*-------------------------------------------------------------------
    ## Top section
-------------------------------------------------------------------*/
.top_sec { position: relative; height: calc(100vh - 115px); background: url(../images/product/lf95_plus/bg_top_area.jpg) center center / cover no-repeat; }
.top_els { position: absolute; left: 0; right: 0; bottom: 0; top: 0; }
.top_els span { position: absolute; left: -155px; bottom: 0; }
.top_els .el_pole { width: 330px; top: 0; }
.top_els .pole_1 { background: rgba(12,0,75,0.45); transform: skew(-16deg, 0) translateX(-100%); }
.top_els .pole_2 { background: #4A2785; transform: skew(-16deg, 0) translateX(-100%); position: absolute; z-index: 1; -webkit-mask-image: linear-gradient(to top, black 210px, transparent 210px); mask-image: linear-gradient(to top, black 210px, transparent 210px); }
.top_els .pole_3 { position: absolute;left: 30px;top: auto;height: 75px;background:#4A2785;mask:radial-gradient(40px at top right,#0000 100%,#000);}
.top_sec.ani_in .top_els .el_pole { animation: polesAni cubic-bezier(.2, .38, .24, 1) .9s forwards; }
.top_sec.ani_in .top_els .pole_1 { animation-delay: 480ms; }
.top_els .el_bottom_bar { height: 35px; background: #4A2785; left: 0; }
.top_sec.ani_in .top_els .el_bottom_bar { animation: bottomBarAni cubic-bezier(.2, .38, .24, 1) 1s forwards; }
.top_els .graphic { position: absolute; left: 40px; top: 38px; }
.top_els .cars { margin-top: 28px; }
.top_els .graphic img { vertical-align: top; }
.top_els .graphic .txt { opacity: 0; }
.top_sec.ani_in .top_els .graphic .txt { animation: elsInPoleAni ease-out .4s 860ms forwards; }
.top_els .graphic .cars img { opacity: 0; }
.top_sec.ani_in .top_els .graphic .cars img { animation: elsInPoleAni ease-out .4s 860ms forwards; }
.top_sec.ani_in .top_els .graphic .cars img + img { animation-delay: 1060ms; }
.top_els .cars img + img { margin-left: 14px; }
.top_sec .set_inner { position: relative; height: 100%; }
.logo_partner { position: absolute; right: 0; top: 40px;}
.tire_container {padding-bottom:0;}
@keyframes polesAni {
    0% {
        opacity: 0;
        transform: skew(-16deg, 0) translateX(-100%);
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: skew(-16deg, 0) translateX(0);
    }
}
@keyframes bottomBarAni {
    0% {
        width: 0;
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        width: 100%;
    }
}
@keyframes elsInPoleAni {
    0% {
        transform: translateX(-40px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* section_tire360 */
.section_tire360 .ttl_area {position:absolute; top:0; z-index:1; width:100%; padding-top:350px;}
.section_tire360 .tire_area {position:relative;height: 2067px;/*padding-bottom: min(calc(1920 / 2067 * 100%), 2067px);*/ background:url(../images/product/lf95_plus/bg_tire_sec.jpg) center/cover no-repeat;}
.section_tire360 .ttl_area p {margin-top:40px;font-size:34px;line-height:49px;color:#4A2785;font-family: 'Hankook TTF Bold Oblique', 'Arial', Sans-Serif;}

/* section_grid_img */
.section_grid_img {padding:220px 0;}
.section_grid_img .ttl_area .ttl {font-size:70px;line-height:73px;}
.section_grid_img .img_grid_wrap.top {height:857px;overflow:hidden;}
.section_grid_img .img_grid_wrap.top .top_l {width:57%;}
.section_grid_img .img_grid_wrap.top .top_r {width:43%;}
.section_grid_img .img_grid_wrap.btm {padding-top:40px;}
.section_grid_img .img_grid_wrap.btm .btm_l {width:calc((381 / (1440 - 110)) * 100%);}
.section_grid_img .img_grid_wrap.btm .btm_r {width:calc((1015 / (1440 - 17)) * 100%);}

/* section_overview */
.section_overview {position:relative;background-color:#E7E8E7;padding:0 0 min(calc(900 / 1920 * 100%), 1000px);;}
.section_overview .ttl_area {padding:160px 0;background: linear-gradient(180deg, #FFF 67.09%, #e7e8e7 100%);}
.section_overview > .set_inner {display:flex;align-items:flex-start;justify-content:space-between;position:absolute;left:50%;z-index: 1;transform: translateX(-50%);}
.section_overview h3 {margin-bottom:12px;font-size:24px;font-weight:600;color:#666;line-height:35px;}
.section_overview .features_area ol li {display:flex;align-items:center;border-bottom:1px solid #bbb;padding:19px 0;}
.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:16px;font-weight:500;color:#666;line-height:23px;word-break: break-word;}
.section_overview .features_area ol li span {flex:0 0 50px;font-size: 32px;font-weight: 700;line-height:46px;color:#A493C2;}
.section_overview .overview_area {display:flex;gap:40px;flex-direction:column;width:420px;}
.section_overview .overview_area .overview_info dl {display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #bbb;}
.section_overview .overview_area .overview_info dt {font-size:16px;font-weight:600;color:#666;line-height:23px;}
.section_overview .overview_area .overview_info dd {font-size:16px;font-weight:500;color:#666;line-height:23px;}
.section_overview .overview_area .overview_text .text_ttl {font-size:24px;font-weight:500;line-height:36px;}
.section_overview .overview_area .overview_text .text_ttl + p {margin-top:8px;font-size:16px;line-height:26px;}
.section_overview .application_list {display:flex;gap:6px;}
.section_overview .application_list li {position: relative;}
.section_overview .application_list li .tips {position:absolute;display:none;bottom:-30px;left:50%;transform:translateX(-50%);background:url('/uk/front/images/product/tips_arrow_2.png') no-repeat center top/13px 6px;box-shadow:2px 2px 2px rgba(0,0,0,0.05);}
.section_overview .application_list li .tips.on {display:block;}
.section_overview .application_list li .tips p {display:inline-block;padding:3px 10px;background-color:#fff;font-size:10px;color:#222;white-space:nowrap;}
.vehicle_position_area {margin-top:30px;}
.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:absolute;left:50%;transform:translateX(-50%);bottom:0;width:100%;}
.section_overview .tire_area img {width:100%;vertical-align:bottom;}

/* section_property */
.section_property .category_area {width:100%;}

/* section_regrooving */
.section_regrooving {padding:160px 0;}
.section_regrooving .info_list_wrap {margin-top:60px;}
.section_regrooving .info_item {padding:0;}
.section_regrooving .tbl_area {margin-top:100px;}
.section_regrooving .tbl_area table tbody tr:last-child {border-bottom-width:1px;}

/* section_traction */
.section_traction {position:relative;padding:160px 0 530px;background-color:#F2F2F2;}
.section_traction .set_inner {position:relative;z-index:1;}
.section_traction .info_list_wrap {margin-top:100px;}
.section_traction .img_area {position: absolute;bottom: 0;left: 50%;width: calc(930 / 1920 * 100%);max-width: 930px;margin-left: 30px;}
.section_traction .img_area img {width: 100%;height: 100%;object-fit: contain;object-position: left bottom;}
.section_traction .info_list_wrap .info_item img {width:140px;}
.section_traction .info_list_wrap .info_item .has_text {display:flex;flex-direction:column;}
.section_traction .info_list_wrap .info_item .has_text + .has_text {margin-left:-12px;}
.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;}

/* section_mileage */
.section_mileage {position:relative;padding:160px 0 304px;background-color:#F2F2F2;}
.section_mileage .set_inner {position:relative;z-index:1;}
.section_mileage .info_list_wrap {margin-top:calc(((304 + 80) / 1920) * 100%);}
.section_mileage .img_area {position: absolute;bottom: 0;left: 50%;width: calc(930 / 1920 * 100%);max-width: 930px;margin-left: 30px;}
.section_mileage .img_area img {width: 100%;height: 100%;object-fit: contain;object-position: left bottom;}
.section_mileage .sub_txt {margin-top:34px;}
.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_caution {margin-top:19px;font-size:13px;line-height:18px;color:#888;}

@media only screen and (max-width: 1550px) {
    .section_grid_img .img_grid_wrap.top { height: auto; }
    .section_grid_img .img_grid_wrap.top .top_l {overflow: hidden; }
    .section_grid_img .img_grid_wrap.btm { padding-top: 20px; }
    .section_grid_img .img_grid_wrap.btm li:first-child { width:calc((381 / (1440 - 60)) * 100%) }
    .section_grid_img .img_grid_wrap.btm li:last-child { width: calc((1015 / 1440) * 100%); }
    .section_overview {padding:0 0 max(calc(740 / 1920 * 100%), 740px);}
    .section_overview .overview_area {width:300px;}
    .section_traction {padding-bottom:calc(884 / 1920 * 100%);}
    .section_traction .img_area {margin-left:0;padding-left:0;left:auto;right:0;}
    .section_mileage {padding-bottom:calc(884 / 1920 * 100%);}
    .section_mileage .img_area {margin-left:0;padding-left:0;left:auto;right:0;}
}

@media only screen and (max-width: 1280px) {
    .property_area_wrap.property_area_wrap {flex-direction: column;}
    .section_property .category_list {justify-content:flex-start;}
}

.Label_link_TBR{position: relative;font-weight: 500;font-size: 12px;text-align: left !important;color:#4a2c83;margin-top: 8px;}
.Label_link_TBR a{color:#4a2c83;}
.Label_link_TBR a:hover{text-decoration: underline;color:#4a2c83;}
.Label_link_TBR i {padding-left: 4px;}
.Label_link_TBR i::before{content:'';position:absolute;top: 7px;width: 4px;height: 4px;border-right: 2px solid #4a2c83;border-top: 2px solid #4a2c83;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:transform .15s linear;transition:transform .15s linear;}