@charset "utf-8";

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

/*-------------------------------------------------------------------
    ## Top section
-------------------------------------------------------------------*/
.top_sec { position: relative; height: calc(100vh - 115px); background: url(../images/product/xfit_at2/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; width:254px;}
@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/xfit_at2/bg_tire_sec.jpg) center/cover no-repeat;}

/* section_grid_img */
.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:#e5e6e5;padding:0 0 min(calc(740 / 1920 * 100%), 1000px);;}
.section_overview .ttl_area {padding:160px 0;background: linear-gradient(180deg, #FFF 67.09%, #E5E6E5 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%);padding-top: 40px;}
.section_overview .tooltip_ul {position:absolute;bottom:40px;left:50%;margin-left:284px;z-index:1;}
.section_overview .graph_area {position:relative;width:433px;height:430px;}
.section_overview .graph_area .graph_list {position:absolute;top:0;left:0;width:100%;height:100%;}
.section_overview .graph_area .graph_list li {position:relative;padding-left:26px;font-size: 18px;font-weight: 600;line-height:26px;}
.section_overview .graph_area .graph_list li + li {margin-top:4px;}
.section_overview .graph_area .graph_list li:first-child {color: #4A2885;}
.section_overview .graph_area .graph_list li:last-child {color: #666;}
.section_overview .graph_area .graph_list li::before {content: '';display: block;position: absolute;top: 50%;left:0;transform: translateY(-50%);width: 16px;height: 3px;}
.section_overview .graph_area .graph_list li:first-child::before {background: #4A2885;}
.section_overview .graph_area .graph_list li:last-child::before {background: #fff;}
.section_overview .graph_area .graph_summary li {position:absolute;text-align:left;}
.section_overview .graph_area .graph_summary li p {font-size: 16px;font-weight: 600;line-height:23px;color:#666;}
.section_overview .graph_area .graph_summary li span {font-size: 16px;font-weight: 600;line-height:23px;color:#4A2885;}
.section_overview .graph_area .graph_summary li:nth-child(1) {top: 8%;left: 41%;text-align: center;}
.section_overview .graph_area .graph_summary li:nth-child(2) {top: 24%;right: 1%;text-align: left;}
.section_overview .graph_area .graph_summary li:nth-child(3) {top: 59%;right: 0%;text-align: left;}
.section_overview .graph_area .graph_summary li:nth-child(4) {top: 89%;right: 15%;text-align: left;}
.section_overview .graph_area .graph_summary li:nth-child(5) {top: 89%;left: 8%;text-align: right;}
.section_overview .graph_area .graph_summary li:nth-child(6) {top: 59%;left: 0%;text-align: right;}
.section_overview .graph_area .graph_summary li:nth-child(7) {top: 24%;left: 9%;text-align: right;}
.section_overview .features_area {width:440px;}
.section_overview .features_area h3 {font-size:24px;font-weight:600;color:#666;line-height:35px;}
.section_overview .features_area ol {margin-top:24px;}
.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 #graphCanvas {position:absolute;top:88px;left:52px;width:304px;height:306px;}
.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_aggressive */
.section_aggressive {position:relative;padding:160px 0 366px;background: url(../images/product/xfit_at2/bg_aggressive.png) no-repeat center bottom / contain;}
.section_aggressive .info_list_wrap {margin-top:100px;}
.section_aggressive .img_area {position:absolute;bottom:-5px;right:0;width:calc(930 / 1920 * 100%);max-width:930px;margin-left:30px;}
.section_aggressive .img_area img {width:100%;}

/* section_durability */
.section_durability {padding:160px 0 75px;background-color:#f2f2f2;}
.section_durability .img_area {display:flex;gap:12px;align-items:flex-start;}
.section_durability .caution {font-size:12px;color:#444;line-height:17px;}
.section_durability .car_area {position:absolute;top:0;right:calc(360px + 64px);width:1256px;height:884px;}
.section_durability .car_area .car_img {position:absolute;top:0;left:0;opacity: 0;transform: translate(-100px, 100px);transition: cubic-bezier(.2, .38, .24, 1) 1s;}
.section_durability .car_area img[class^="arw_"] {position:absolute;top:0;left:0;opacity: 0;}
.section_durability .car_area.ani_in .arw_01 {animation-name: durabilityArrow1;}
.section_durability .car_area.ani_in .arw_02 {animation-name: durabilityArrow2;}
.section_durability .car_area.ani_in .arw_03 {animation-name: durabilityArrow3;}
.section_durability .car_area.ani_in .arw_04 {animation-name: durabilityArrow4;}
.section_durability .car_area.ani_in .arw_05 {animation-name: durabilityArrow5;}
.section_durability .car_area.ani_in .arw_06 {animation-name: durabilityArrow6;}
.section_durability .car_area.ani_in .arw_07 {animation-name: durabilityArrow7;}
.section_durability .car_area.ani_in .arw_08 {animation-name: durabilityArrow8;}
.section_durability .car_area.ani_in .car_img {opacity: 1;transform: translate(0, 0);}
.section_durability .car_area.ani_in img[class^="arw_"] {animation-timing-function: ease-out;animation-duration: 2.1s;animation-iteration-count: infinite;animation-delay: .5s;}

@keyframes durabilityArrow1 { 0% {opacity: 0;} 12.5% {opacity: 1;} 100% {opacity: 1;} }
@keyframes durabilityArrow2 { 12.5% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 1; } }
@keyframes durabilityArrow3 { 25% { opacity: 0; } 37.5% { opacity: 1; } 100% { opacity: 1; } }
@keyframes durabilityArrow4 { 37.5% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes durabilityArrow5 { 50% { opacity: 0; } 62.5% { opacity: 1; } 100% { opacity: 1; } }
@keyframes durabilityArrow6 { 62.5% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } }
@keyframes durabilityArrow7 { 75% { opacity: 0; } 87.5% { opacity: 1; } 100% { opacity: 1; } }
@keyframes durabilityArrow8 { 87.5% { opacity: 0; } 100% { opacity: 1; } }

/* section_adventure */
.section_adventure {padding:160px 0 204px;}
.section_adventure .car_area {position:absolute;bottom:-204px;left:50%;margin-left:30px;width:calc(930 / 1920 * 100%);}
.section_adventure .car_area img {width:100%;}
.section_adventure .img_item_area {display:flex;gap:18px;margin-top:25px;}
.section_adventure .img_item {display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:space-between;}
.section_adventure .img_item span {display:inline-block;font-size:12px;line-height:17px;}
.section_adventure .img_item:nth-child(1) {font-weight:600;}
.section_adventure .img_item:nth-child(2) {font-weight:500;}
.section_adventure .info_content .chart_item_area {display:flex;gap:4px;flex-direction:column;margin-top:18px;}
.section_adventure .info_content .chart_item {display:flex;align-items:center;justify-content: space-between;height:24px;padding:0 8px;color:#fff;font-size:13px;font-weight:500;}
.section_adventure .info_content .chart_item:nth-child(1) {width:315px;background-color:#4A2785;font-weight:600;}
.section_adventure .info_content .chart_item:nth-child(1) em {font-weight:600;}
.section_adventure .info_content .chart_item:nth-child(2) {width:256px;background-color:#77787B;}
.section_adventure .info_content .chart_item:nth-child(2) em {font-weight:500;}
.section_adventure .car_area .car_text_area {position:absolute;left:0;bottom:37px;display:flex;justify-content:center;width:100%;}
.section_adventure .car_area .car_text_area span {display:block;position:relative;flex:0 0 35%;text-align:center;}
.section_adventure .car_area .car_text_area span b {display:block;position:relative;font-size:26px;font-weight:700;color:#54338D;line-height:38px;}
.section_adventure .car_area .car_text_area span:nth-child(2)::before {content:'';display:block;position:absolute;left:50%;top:50%;width:279px;height:119px;background:url(../images/product/xfit_at2/bg_text.png) no-repeat center center / 279px 119px;transform:translate(-50%, -50%);}

/* section_performance */
.section_performance {padding:160px 0 0;background-color:#f2f2f2;}
.section_performance .category_area {display:flex;align-items:center;justify-content:center;}
.section_performance .category_area ul + ul::before {content:'';display:block;width:1px; height:100px;margin:0 30px 0 90px;background-color:#bbb;}
.section_performance .car_area {position:relative;margin: 100px auto -5px;}
.section_performance .car_area img {width:100%;}
.section_performance .car_area .car_text_area {position:absolute;left:0;bottom:49px;display:flex;justify-content:center;width:100%;}
.section_performance .car_area .car_text_area span {display:block;position:relative;flex:0 0 33.33%;text-align:center;}
.section_performance .car_area .car_text_area span b {display:block;position:relative;font-size:26px;font-weight:700;color:#54338D;line-height:38px;}
.section_performance .car_area .car_text_area span:nth-child(3)::before {content:'';display:block;position:absolute;left:50%;top:50%;width:279px;height:119px;background:url(../images/product/xfit_at2/bg_text_02.png) no-repeat center center / 215px 136px;transform:translate(-50%, -50%);}

/* section_experience */
.section_experience {padding:160px 0 0;}
.section_experience .tire_area {position:relative;margin: 100px auto -5px;}
.section_experience .tire_area img {width:100%;}

/* section_warranty */
.section_warranty {height:590px;margin-top:160px;background:url(../images/product/xfit_at2/bg_warranty.jpg) no-repeat center center / cover;}
.section_warranty .set_inner {display:flex;align-items:center;justify-content:space-between;height:100%;}
.section_warranty .warranty_title {width:calc(100% - 838px);display:flex;align-items:center;gap:40px;}
.section_warranty .warranty_title p {font-size: 48px;font-weight: 600;line-height: 56px;letter-spacing: -0.3px;color:#fff;word-break:break-word;}
.section_warranty .warranty_title a {display:inline-block;margin-top:10px;background-color:#fff;border-radius:20px;padding:10px 24px;font-size:14px;font-weight:500;color:#000;line-height:20px;}
.section_warranty .warranty_title a span {display:inline-flex;gap:10px;align-items:center;position:relative;font-size:16px;font-weight:500;color:#000;line-height:23px;}
.section_warranty .warranty_title a span::after {content:'';display:block;width:16px;height:16px;background:url(../images/product/ic_arrow_right.svg) no-repeat center center / 100% 100%;}
.section_warranty .warranty_list {display:flex;align-items:center;gap:26px;}
.section_warranty .warranty_list .warranty_item {width:190px;}
.section_warranty .warranty_list .warranty_item img {width:100%;}

@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 .features_area {width:300px;}
}

@media only screen and (max-width: 1280px) {
    .property_area_wrap.property_area_wrap {flex-direction: column;}
    .section_property .category_area {width:100%;}
    .section_property .category_list {justify-content:flex-start;}
    .section_warranty .warranty_title {width:100%;}
    .section_warranty .warranty_list {flex-wrap:wrap;}
}