@charset "utf-8"; 
/*-------------------------------------------------------------------
    파일정의 : style
    작성날짜 : 2021-06-16 김하연
    참고사항 : 이 파일은 전체 style을 정의한다.
    분류순서 : 기본정책 > 유틸리티 > 사용자정의(컬러, 폰트, 보더, 간격 등)
    속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

html{font-family:"Roboto",Tahoma,Verdana,sans-serif;overflow-y:scroll !important}/* 20211028 modify */


/* 20250325 Hankook font 추가 */
@font-face {
    font-family:'Hankook'; font-style:normal; font-weight:400;
    src:url('/common/font/HankookTTFRegular.woff2') format('woff2'),
        url('/common/font/HankookTTFRegular.woff') format('woff');
}
@font-face {
    font-family:'Hankook'; font-style:normal; font-weight:500;
    src:url('/common/font/HankookTTFMedium.woff2') format('woff2'),
        url('/common/font/HankookTTFMedium.woff') format('woff');
}
/* //20250325 Hankook font 추가 */

/*-------------------------------------------------------------------
    ## Top section
-------------------------------------------------------------------*/
.top_sec {
    position: relative;
    height: 100vh;
    background: url(../img/bg_top_area.png) top center / cover no-repeat;
}
 
.top_sec:before {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    content: '';
    background: -moz-linear-gradient(top, rgba(220, 221, 223, 0) 0%, rgba(220, 221, 223, 1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(220, 221, 223, 0) 0%, rgba(220, 221, 223, 1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(220, 221, 223, 0) 0%, rgba(220, 221, 223, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00dcdddf', endColorstr='#dcdddf', GradientType=0); /* IE6-9 */
}

.top_els {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 200px;
}

.top_els span {
    position: absolute;
    left: -94px;
    bottom: 0;
}

.top_els .el_pole {
    width: 335px;
    top: 0;

}

.top_els .pole_1 {
    background: #11004c;
    border-radius: 0 140px 0 0;
    -webkit-transform: skew(-16deg, 0) translateX(-100%);
    -moz-transform: skew(-16deg, 0) translateX(-100%);
    -ms-transform: skew(-16deg, 0) translateX(-100%);
    -o-transform: skew(-16deg, 0) translateX(-100%);
    transform: skew(-16deg, 0) translateX(-100%);
}
.top_els .pole_2 {
    background: #4b2885;
    left: -262px;
    border-radius: 0 70px 0 0;
    -webkit-transform: skew(-16deg, 0) translateX(-100%);
    -moz-transform: skew(-16deg, 0) translateX(-100%);
    -ms-transform: skew(-16deg, 0) translateX(-100%);
    -o-transform: skew(-16deg, 0) translateX(-100%);
    transform: skew(-16deg, 0) translateX(-100%);

}
.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_sec.ani_in .top_els .pole_2{
    animation-delay: 250ms;
}
@keyframes polesAni {
    0% {
        opacity: 0;
        -webkit-transform: skew(-16deg, 0) translateX(-100%);
        -moz-transform: skew(-16deg, 0) translateX(-100%);
        -ms-transform: skew(-16deg, 0) translateX(-100%);
        -o-transform: skew(-16deg, 0) translateX(-100%);
        transform: skew(-16deg, 0) translateX(-100%);
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: skew(-16deg, 0) translateX(0);
        -moz-transform: skew(-16deg, 0) translateX(0);
        -ms-transform: skew(-16deg, 0) translateX(0);
        -o-transform: skew(-16deg, 0) translateX(0);
        transform: skew(-16deg, 0) translateX(0);
    }
}

.top_els .el_bottom_bar {
    height: 35px;
    background: #4b2885;
    left: 0;
}
.top_sec.ani_in .top_els .el_bottom_bar{
    animation: bottomBarAni cubic-bezier(.2, .38, .24, 1) 1s forwards;
}
@keyframes bottomBarAni {
    0% {
        width: 0;
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        width: 100%;
    }
}

.top_els .graphic {
    position: absolute;
    width: 335px;
    left: 0;
    top: 72px;
    text-align: center;
    padding-right: 7px;
    box-sizing: border-box;
}

.top_els .cars {
    margin-top: 45px;
}

.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;
}
@keyframes elsInPoleAni {
    0% {
        -webkit-transform: translateX(-40px);
        -moz-transform: translateX(-40px);
        -ms-transform: translateX(-40px);
        -o-transform: translateX(-40px);
        transform: translateX(-40px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

.top_els .cars img + img {
    margin-left: 14px;
}

.top_sec .set_inner {
    position: relative;
    height: 100%;
}

.logo_partner {
    position: absolute;
    right: 0;
    Top: 72px;
}


/*-------------------------------------------------------------------
    ## Tire section
-------------------------------------------------------------------*/
.tire_sec {
    padding: 350px 0 0;
}

.tire_sec .ttl_area {
    margin-bottom: 200px;
}

.tire_area {
    position: relative;
    height: 0;
    padding-bottom: 66.979166%;
    background: url(../img/bg_tire_sec.jpg) center / cover no-repeat;
}

.rotating_box {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
    bottom: 115px;
}

.tire_img {
    display: inline-block;
    position: relative;
    padding: 0 50px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: grab
}

.tire_img:active {
    cursor: grabbing
}

.tire_img:before,
.tire_img:after {
    display: block;
    content: '';
    position: absolute;
}

.tire_img:before {
    left: 50%;
    bottom: 90px;
    z-index: 2;
    width: 1000px;
    max-width: 100%;
    height: 0;
    padding-bottom: 14%;
    background-image: url(../img/img_360_line.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

.tire_img:after {
    left: 50%;
    bottom: 0;
    z-index: 0;
    width: 920px;
    height: 920px;
    margin-left: -460px;
    background-image: url(../img/tire_shadow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.tire_img img {
    position: relative;
    z-index: 1;
    pointer-events: none
}

/* 20210827 update - Max */

.tire_controls {
    position: absolute;
    bottom: 120px;
    z-index: 4;
    left: 50%;
    margin-left: -80px;
    text-align: center;
    padding: 0 30px;
}

.tire_controls:before {
    display: inline-block;
    content: '';
    position: relative;
    width: 100px;
    height: 20px;
    background: url(../img/img_rotate_txt.png) center no-repeat;
    vertical-align: top;
}

/* //20210827 */

.tire_controls .arw {
    display: block;
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background-repeat: no-repeat;
    background-position: center;
}

.tire_controls .arw.prev {
    left: 0;
    background-image: url(../img/arw_rotate_l.png);
}

.tire_controls .arw.next {
    right: 0;
    background-image: url(../img/arw_rotate_r.png);
}

.dummy {
    display: none;
}

/*-------------------------------------------------------------------
    ## Image section
-------------------------------------------------------------------*/
.img_sec {
    padding: 410px 0 0;
}

.img_sec .img_area {
    margin-top: 330px;
}

.img_grid_wrap:after {
    display: block;
    clear: both;
    content: '';
}

.img_grid_wrap {
    margin: -20px -22px;
}

.img_grid_wrap li {
    float: left;
    padding: 20px 22px;
    box-sizing: border-box;
}

.img_grid_wrap li img {
    max-width: inherit;
    width: 100%;
}

.img_grid_wrap.top {
    height: 857px;
    overflow: hidden;
}

.img_grid_wrap.top .top_l {
    width: 57%;
}

.img_grid_wrap.top .top_r {
    width: 43%;
}

.img_grid_wrap.btm {
    padding-top: 40px;
}

/*-------------------------------------------------------------------
    ## Summary section
-------------------------------------------------------------------*/
.summary_sec {
    padding: 53.5416% 0 288px;
    background: url(../img/bg_summary_sec.png) top center / contain no-repeat;
}
.summary_sec .ttl_area{
    margin-top: 40px;
}
.summary_sec .graph_area {
    width: 760px;
    height: 541px;
    margin: 65px auto 0;
}

#summaryGraph>svg{min-height:530px!important}
#summaryGraph>svg>defs+g>g>g>path[stroke-linecap="butt"]{
    fill-opacity: 0!important;
}

.features_area {
    margin: -23px -45px 0;
}

.feature_item {
    float: left;
    padding: 0 45px;
    box-sizing: border-box;
}

.feature_item > .ttl {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 14px;
    border-bottom: 2px solid #bbb;
    color: #666;
}

.feature_item ul {
    padding-top: 20px;
}

.feature_item ul:after {
    display: block;
    clear: both;
    content: '';
}

.feature_item li {
    text-align: center;
}

.feature_item li p {
    font-weight: 700;
    color: #666;
}

.feature_item.property {
    width: 13.24503%;
}

.feature_item.benefit {
    width: 33.77483%;
}

.feature_item.award {
    width: 52.98013%;
}

.feature_item.property li {
    float: left;
    width: 50%;
}

.feature_item.benefit li {
    float: left;
    width: 25%;
}

.award_group {
    max-height: 185px;
    overflow: auto;
    margin-top: 20px;
    font-size: 0;
}

.award_item {
    float: left;
    width: 50%;
    height: 185px;
}

.award_item .img_box {
    display: inline-block;
    min-width: 124px;
    text-align: right;
    padding-right: 20px;
    vertical-align: top;
}

.award_item .info_box {
    display: inline-block;
    vertical-align: top;

}

.award_item .info_box .ttl {
    font-family: 'Hankook TTF Semibold Oblique', 'Arial', Sans-Serif;
    font-size: 14px;
    color: #444;
    margin-bottom: 14px;
}

.award_item dl > div + div {
    margin-top: 3px;
}

.award_item dt {
    display: inline-block;
    width: 80px;
    font-size: 12px;
    color: #aaa;
    vertical-align: middle;
}

/* 20210827 update - Max */
.award_item dd {
    display: inline-block;
    font-size: 14px;
    color: #444;
    vertical-align: middle;
    padding-left: 35px;
}

/* //20210827 */
.feature_item.size{
    width: 100%;
    /*margin-top: 35px;*/
}
/*-------------------------------------------------------------------
    ## Video section
-------------------------------------------------------------------*/
.video_sec{
    position: relative;
    min-height: 0;
    background: #fff;
}
.video_sec:before{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 170px;
    content: '';
    z-index: 2;
    background-image: url(../img/bg_gradient.png);
    background-size: 1px 170px;
    background-repeat: repeat-x;
    background-position: left bottom;
}
.video_sec iframe{
    -webkit-transform: scale(1.35);
    -moz-transform: scale(1.35);
    -ms-transform: scale(1.35);
    -o-transform: scale(1.35);
    transform: scale(1.35);
}
.video_sec.last .video_wrap{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video_sec.last:before{
    display: none;
}
.video_sec.last .video_wrap iframe{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.video_wrap .txt_area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding-top: 110px;
}

.video_wrap .txt_area .ttl {
    color: #fefefe;
    font-size: 70px;
    line-height: 1.25;
}

/*-------------------------------------------------------------------
    ## benefit section
-------------------------------------------------------------------*/
.benefit_sec {
    position: relative;
    height: 100vh;
}

.benefit_sec .info_area_warp {
    width: 43%;/* 20210827 update - Max */
}

.benefit_sec .bg_wrap{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: -50px;
    -webkit-transition: opacity ease-out .3s;
    -moz-transition: opacity ease-out .3s;
    -ms-transition: opacity ease-out .3s;
    -o-transition: opacity ease-out .3s;
    transition: opacity ease-out .3s;
    max-width: 60%;
}
.benefit_sec.handling .bg_wrap{
    left: auto;
    width: 100%;
}
.benefit_sec.detail_on .bg_wrap{
    opacity: 0!important;
}
.benefit_sec .animation_area{
    position: relative;
    height: 100%;
}
.benefit_sec .animation_area:after{
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    content: '';
}
.benefit_sec .set_inner {
    height: 100%;
}

.benefit_sec .info_area {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.benefit_sec .bg_area{
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.benefit_txt {
    color: #222;
}

.benefit_txt .ttl {
    font-size: 72px;
    line-height: 1;
}

.benefit_txt .txt {
    font-size: 24px;
    line-height: 1.5;
    margin-top: 36px;
}

.benefit_box {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.benefit_graph {
    margin-top: 40px;
    border: 1px solid #b6babf;
    text-align: center;
    padding: 44px 31px 48px;
    font-size: 0;
}

.benefit_item {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.benefit_item:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 1px solid #231916;
    border-radius: 50%;
    content: '';
}

.benefit_item + .benefit_item {
    margin-left: 38px;
}

.btn_detail {
    display: block;
    position: absolute;
    width: 36px;
    height: 36px;
    overflow: visible;
    right: 20px;
    bottom: -4px;
}
.btn_detail i{
    background: #222;
    border-radius: 50%;
}
.btn_detail:before {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    content: '';
    background: rgba(0, 0, 0, .3);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    animation-duration: 1.4s;
    animation-name: detailCircle;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.09, .56, .96, .8);
}
.btn_detail.is_active i{
    background-color: #4d2385;
}
.btn_detail.is_active:before{
    background: rgba(169,155,191,.3);
}
.benefit_item:nth-of-type(2) .btn_detail:before {
    animation-delay: .3s;
}

.benefit_item:nth-of-type(3) .btn_detail:before {
    animation-delay: .6s;
}

.benefit_sec.braking .benefit_graph {
    width: 578px;
    height: 425px;
    padding: 38px 0;
}

.benefit_sec.braking .btn_detail {
    bottom: 161px;
    right: 3px;
}

.benefit_sec.braking .benefit_item:before {
    display: none;
}
.benefit_sec.handling .info_area {
    right: auto;
    left: 0;
}
.benefit_sec.handling .handling_road{
    position: absolute;
    bottom: 0;
    right: 0;
}
.benefit_sec.handling .ic_box,
.benefit_sec.handling .ic_box img{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.benefit_sec.handling .bg_area i{
    display: inline-block;
    vertical-align: bottom;
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
}
.benefit_sec.traction .bg_area{
    right: auto;
    left: 0;
    bottom: 0;
    top: auto;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.benefit_sec.traction .traction_car{
    opacity: 0;
    -webkit-transform: translate(-100px, 100px);
    -moz-transform: translate(-100px, 100px);
    -ms-transform: translate(-100px, 100px);
    -o-transform: translate(-100px, 100px);
    transform: translate(-100px, 100px);
    -webkit-transition: cubic-bezier(.2, .38, .24, 1) 1s;
    -moz-transition: cubic-bezier(.2, .38, .24, 1) 1s;
    -ms-transition: cubic-bezier(.2, .38, .24, 1) 1s;
    -o-transition: cubic-bezier(.2, .38, .24, 1) 1s;
    transition: cubic-bezier(.2, .38, .24, 1) 1s;
}
.benefit_sec.traction .bg_wrap.ani_in .traction_car{
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.benefit_sec.traction .traction_arw{
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
}
.benefit_sec.traction .ani_el.ani_in .traction_arw{
    animation-timing-function: ease-out;
    animation-duration: 2.1s;
    animation-iteration-count: infinite;
    animation-delay: .5s;
}
.benefit_sec.traction .ani_el.ani_in .traction_arw.arw_1{
    animation-name: tractionArrow1;
}
.benefit_sec.traction .ani_el.ani_in .traction_arw.arw_2{
    animation-name: tractionArrow2;
}
.benefit_sec.traction .ani_el.ani_in .traction_arw.arw_3{
    animation-name: tractionArrow3;
}
.benefit_sec.traction .ani_el.ani_in .traction_arw.arw_4{
    animation-name: tractionArrow4;
}
.benefit_sec.traction .ani_el.ani_in .traction_arw.arw_5{
    animation-name: tractionArrow5;
}
.benefit_sec.traction .ani_el.ani_in .traction_arw.arw_6{
    animation-name: tractionArrow6;
}
.benefit_sec.traction .ani_el.ani_in .traction_arw.arw_7{
    animation-name: tractionArrow7;
}
@keyframes tractionArrow1 {
    0%{
        opacity: 0;
    }
    14%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }

}
@keyframes tractionArrow2 {
    14%{
        opacity: 0;
    }
    28%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }

}
@keyframes tractionArrow3 {
    28%{
        opacity: 0;
    }
    42%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }

}
@keyframes tractionArrow4 {
    42%{
        opacity: 0;
    }
    57%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
@keyframes tractionArrow5 {
    57%{
        opacity: 0;
    }
    71%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
@keyframes tractionArrow6 {
    71%{
        opacity: 0;
    }
    85%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}
@keyframes tractionArrow7 {
    85%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes detailCircle {
    0% {
        width: 36px;
        height: 36px;
    }
    75% {

        opacity: 1;
    }
    100% {
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

.ic_plus {
    position: relative;
    display: block;
    height: 100%;
}

.ic_plus:before,
.ic_plus:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: 12px;
    height: 2px;
    background: #fff;
    margin: -1px auto 0;
    content: '';
}

.ic_plus:before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.bg_wrap .handling_road:before{
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    bottom: 0;
    background: #dcdddf;
    content: '';
    -webkit-transition: cubic-bezier(.2, .38, .24, 1) 1.4s;
    -moz-transition: cubic-bezier(.2, .38, .24, 1) 1.4s;
    -ms-transition: cubic-bezier(.2, .38, .24, 1) 1.4s;
    -o-transition: cubic-bezier(.2, .38, .24, 1) 1.4s;
    transition: cubic-bezier(.2, .38, .24, 1) 1.4s;
}
.bg_wrap.ani_in .handling_road:before{
    height: 0;
}
.bg_wrap .handling_road:after{
    position: absolute;
    left: 0;
    right: 0;
    top: -200px;
    height: 200px;
    background: -moz-linear-gradient(top,  rgba(220,221,223,0) 0%, rgba(220,221,223,1) 40%, rgba(220,221,223,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(220,221,223,0) 0%,rgba(220,221,223,1) 40%,rgba(220,221,223,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(220,221,223,0) 0%,rgba(220,221,223,1) 40%,rgba(220,221,223,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00dcdddf', endColorstr='#dcdddf',GradientType=0 ); /* IE6-9 */
    content: '';
    -webkit-transition: ease-out 1s;
    -moz-transition: ease-out 1s;
    -ms-transition: ease-out 1s;
    -o-transition: ease-out 1s;
    transition: ease-out 1s;
}
.bg_wrap.ani_in .handling_road:after{
    top: 100%;
}
.bg_wrap .handling_tire{
    display: block;
    opacity: 0;
    -webkit-transform: translate(50px, -20px);
    -moz-transform: translate(50px, -20px);
    -ms-transform: translate(50px, -20px);
    -o-transform: translate(50px, -20px);
    transform: translate(50px, -20px);
}
.bg_wrap.ani_in .handling_tire{
    opacity: 0;
    animation: tireAnimation ease-out .6s .4s forwards;
}
@keyframes tireAnimation {
    0%{
        opacity: 0;
        -webkit-transform: translate(50px, -20px);
        -moz-transform: translate(50px, -20px);
        -ms-transform: translate(50px, -20px);
        -o-transform: translate(50px, -20px);
        transform: translate(50px, -20px);
    }
    30%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}
.bg_wrap .ic_box img{
    opacity: 0;
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: cubic-bezier(.2, .38, .24, 1) .4s;
    -moz-transition: cubic-bezier(.2, .38, .24, 1) .4s;
    -ms-transition: cubic-bezier(.2, .38, .24, 1) .4s;
    -o-transition: cubic-bezier(.2, .38, .24, 1) .4s;
    transition: cubic-bezier(.2, .38, .24, 1) .4s;
}
.bg_wrap.ani_in .ic_box img{
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.bg_wrap .ic_box .ic_bg_dry{
    -webkit-transition-delay: .7s;
    -moz-transition-delay: .7s;
    -ms-transition-delay: .7s;
    -o-transition-delay: .7s;
    transition-delay: .7s;
}
.bg_wrap .ic_box .ic_bg_wet{
    -webkit-transition-delay: .9s;
    -moz-transition-delay: .9s;
    -ms-transition-delay: .9s;
    -o-transition-delay: .9s;
    transition-delay: .9s;
}
.bg_wrap .ic_box .ic_bg_snow{
    -webkit-transition-delay: 1.1s;
    -moz-transition-delay: 1.1s;
    -ms-transition-delay: 1.1s;
    -o-transition-delay: 1.1s;
    transition-delay: 1.1s;
}
.animation_item.video{
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    max-width: 50%;
}
.handling .animation_item.video{
    left: auto;
    right: 0;
}
.animation_item .video_wrap{
    position: relative;
    width: 563px;
    background-color: #fff;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
    z-index: 2;
    opacity:  0;
    max-width: 100%;
}
.animation_item .video_wrap.has_img{
    background: transparent;
}
.animation_item .video_area{
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.animation_item .video_area video{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.animation_item .video_area .img_box{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url(../img/img_handling_animation.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.animation_item .video_area .arrow{
    position: absolute;
    left: 22.5%;
    top: 49%;
    width: 21%;
    text-align: center;
}
.animation_item .video_area .arrow .bar{
    display: inline-block;
    position: relative;
    width: 26%;
    height: 2px;
    background: #44187f;
    -webkit-transition: step-start 0s 0s;
    -moz-transition: step-start 0s 0s;
    -ms-transition: step-start 0s 0s;
    -o-transition: step-start 0s 0s;
    transition: step-start 0s 0s;
}
.animation_item.is_show .video_area .arrow .bar{
    width: 54%;
    -webkit-transition: ease-out .7s .3s;
    -moz-transition: ease-out .7s .3s;
    -ms-transition: ease-out .7s .3s;
    -o-transition: ease-out .7s .3s;
    transition: ease-out .7s .3s;
}
.animation_item .video_area .arrow .arw_r{
    position: absolute;
    top: -4px;
    right: -15px;
    width: 0;
    height: 0;
    border: 10px solid #44187f;
    content: '';
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 5px solid transparent;
}
.animation_item .video_area .arrow .arw_l{
    position: absolute;
    top: -4px;
    left: -15px;
    width: 0;
    height: 0;
    border: 10px solid #44187f;
    content: '';
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
}
.animation_item .txt_box{
    position: relative;
    max-width: 650px;
    z-index: 2;
    margin-top: 38px;
}
.animation_item .txt_box .ttl{
    font-size:  24px;
    font-weight: 700;
    color: #4d2385;
    line-height: 1;
    padding-bottom: 22px;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
    opacity:  0;
}
.animation_item .txt_box .txt{
    font-size:  18px;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    opacity:  0;
}
.animation_item.video.is_show .video_wrap,
.animation_item.video.is_show .txt_box .ttl,
.animation_item.video.is_show .txt_box .txt{
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: ease-out .3s;
    -moz-transition: ease-out .3s;
    -ms-transition: ease-out .3s;
    -o-transition: ease-out .3s;
    transition: ease-out .3s;
}
.animation_item.video.is_show .txt_box .ttl{
    -webkit-transition-delay: .1s;
    -moz-transition-delay: .1s;
    -ms-transition-delay: .1s;
    -o-transition-delay: .1s;
    transition-delay: .1s;
}
.animation_item.video.is_show .txt_box .txt{
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    -ms-transition-delay: .2s;
    -o-transition-delay: .2s;
    transition-delay: .2s;
}
.benefit_sec.braking .bg_area{
    height: 670px;
    left: 0;
}
.benefit_sec.braking .bg_area>img,
.benefit_sec.braking .bg_area>span{
    position: absolute;
    left: 0;
    top: 50%;
    opacity: 0;
}
.benefit_sec.braking .bg_area .txt{
    z-index: 1;
    margin-top: -10px;
    opacity: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: ease-out .4s .2s;
    -moz-transition: ease-out .4s .2s;
    -ms-transition: ease-out .4s .2s;
    -o-transition: ease-out .4s .2s;
    transition: ease-out .4s .2s;
}
.benefit_sec.braking .bg_area .car_1{
    z-index: 2;
    margin-left: 2px;
}
.benefit_sec.braking .bg_area .car_2{
    z-index: 3;
}
.benefit_sec.braking .bg_area>span em{
    position: absolute;
    right: 5%;
    bottom: 26.5%;
    font-size: 2.4vw;
    color: #fff;
    font-weight: 700;
    -webkit-transform: skew(20deg, 0);
    -moz-transform: skew(20deg, 0);
    -ms-transform: skew(20deg, 0);
    -o-transform: skew(20deg, 0);
    transform: skew(20deg, 0);
}
.benefit_sec.braking .bg_area .txt_wrap{
    position: absolute;
    right: 4%;
    bottom: 21%;
    color: #fff;
    -webkit-transform: rotateX(15deg);
    -moz-transform: rotateX(15deg);
    -ms-transform: rotateX(15deg);
    -o-transform: rotateX(15deg);
    transform: rotateX(15deg);
}
.benefit_sec.braking .bg_area .txt_wrap strong{
    display: block;
    line-height: 1.2;
    letter-spacing: .05em;
}
.benefit_sec.braking .bg_area .txt_wrap .txt_1{
    font-size: .72vw;
}
.benefit_sec.braking .bg_area .txt_wrap .txt_2{
    font-size: 2.5vw;
    line-height: 1;
    margin-top: 4px;
}
.benefit_sec.braking .bg_wrap.ani_in .bg_area>span em:before {
    display: inline-block;
    vertical-align: middle;
    content:'8';
    /* content: counter(count); */
    /* animation: counter 1.4s .6s ease-out forwards alternate; */
    
    /* -moz-animation-name: counter;
    -webkit-animation-name: counter;
    animation-name: counter;
    
    -moz-animation-duration: 1.4s;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
    animation--delay: 0.6s;
    
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    
    
    counter-reset: count 0; */
}
.benefit_sec.braking .bg_wrap.ani_in .bg_area>span em:after{
    display: inline-block;
    vertical-align: middle;
    content: '\00a0%';
}
.benefit_sec.braking .bg_wrap .txt_wrap strong{
    opacity: 0;
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    transform: translateY(10px);
}
.benefit_sec.braking .bg_wrap.ani_in .txt_wrap strong{
    opacity: 1;
    -webkit-transition: ease-out .4s;
    -moz-transition: ease-out .4s;
    -ms-transition: ease-out .4s;
    -o-transition: ease-out .4s;
    transition: ease-out .4s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.benefit_sec.braking .bg_wrap.ani_in .txt_wrap .txt_1{
    -webkit-transition-delay: .6s;
    -moz-transition-delay: .6s;
    -ms-transition-delay: .6s;
    -o-transition-delay: .6s;
    transition-delay: .6s;
}
.benefit_sec.braking .bg_wrap.ani_in .txt_wrap .txt_2{
    -webkit-transition-delay: 2s;
    -moz-transition-delay: 2s;
    -ms-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
}

@keyframes counter {
    0% {
        counter-increment: count 0;
    }
    12.5% {
        counter-increment: count 1;
    }
    25% {
        counter-increment: count 2;
    }
    37.5% {
        counter-increment: count 3;
    }
    50% {
        counter-increment: count 4;
    }
    62.5% {
        counter-increment: count 5;
    }
    75% {
        counter-increment: count 6;
    }
    87.5% {
        counter-increment: count 7;
    }
    100% {
        counter-increment: count 8;
    }
}

@-webkit-keyframes counter {
    0% {
        counter-increment: count 0;
    }
    12.5% {
        counter-increment: count 1;
    }
    25% {
        counter-increment: count 2;
    }
    37.5% {
        counter-increment: count 3;
    }
    50% {
        counter-increment: count 4;
    }
    62.5% {
        counter-increment: count 5;
    }
    75% {
        counter-increment: count 6;
    }
    87.5% {
        counter-increment: count 7;
    }
    100% {
        counter-increment: count 8;
    }
}

@-moz-keyframes counter {
    0% {
        counter-increment: count 0;
    }
    12.5% {
        counter-increment: count 1;
    }
    25% {
        counter-increment: count 2;
    }
    37.5% {
        counter-increment: count 3;
    }
    50% {
        counter-increment: count 4;
    }
    62.5% {
        counter-increment: count 5;
    }
    75% {
        counter-increment: count 6;
    }
    87.5% {
        counter-increment: count 7;
    }
    100% {
        counter-increment: count 8;
    }
}
.benefit_sec.braking .bg_wrap.ani_in .txt{
    opacity: 1;
}
.benefit_sec.braking .bg_wrap.ani_in .car_1,
.benefit_sec.braking .bg_wrap.ani_in .car_2{
    opacity: 0;
    animation: brakingCarAni cubic-bezier(.2, .38, .24, 1) 1.2s forwards;
}
.benefit_sec.braking .bg_wrap.ani_in .car_2{
    animation-delay: .3s;
    perspective: 400px;
}
@keyframes brakingCarAni {
    0%{
        opacity: 0;
        -webkit-transform: translate(-200px, -50%);
        -moz-transform: translate(-200px, -50%);
        -ms-transform: translate(-200px, -50%);
        -o-transform: translate(-200px, -50%);
        transform: translate(-200px, -50%);
    }
    40%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%);
    }
}




@media only screen and (max-width: 1550px) {
    .logo_partner{
        right: 40px;
    }
    .tire_img{
        height: 720px;
    }
    .tire_img img{
        max-height: 100%;
    }
    .img_sec{
        padding-top: 200px;
    }
    .img_sec .img_area{
        margin-top: 230px;
    }
    .img_grid_wrap{
        margin: -10px;
    }
    .img_grid_wrap li{
        padding: 10px;
    }
    .img_grid_wrap.top{
        height: auto;
    }
    .img_grid_wrap.top .top_l{
        max-height: 54.7vw;
        overflow: hidden;
    }
    .img_grid_wrap.btm{
        padding-top: 20px;
    }
    .img_grid_wrap.btm li:first-child{
        width: 27%;
    }
    .img_grid_wrap.btm li:last-child{
        width: 73%;
    }
    .features_area {
        margin: 128px -20px 0;
    }
    .feature_item{
        padding: 0 20px;
    }
    .award_item:first-child{
        padding-right: 10px;
    }
    .award_item .img_box,
    .award_item .info_box{
        float: left;
        box-sizing: border-box;
    }
    .award_item .img_box{
        min-width: 100px;
        width: 100px;
    }
    .award_item .info_box{
        width: 100%;
        margin-left: -100px;
        padding-left: 100px;

    }
    .award_item dl>div{
        position: relative;
        padding-left: 80px;
    }
    .award_item dl dt{
        position: absolute;
        left: 0;
        top: 1px;
    }
    .award_item dl dd{
        word-break: break-word;
    }
    .summary_sec{
        padding-bottom: 200px;
    }
    .benefit_sec .info_area{
        right: 40px;
        width: 450px;
    }
    .benefit_sec.handling .info_area{
        left: 40px;
    }
    .benefit_sec .benefit_graph img{
        max-width: 100%;
        max-height: 100%;
    }
    .benefit_sec .benefit_item{
        height: 100%;
    }
    .benefit_txt .ttl{
        font-size: 62px;
    }
    .benefit_txt .txt{
        font-size: 16px;
    }
    .benefit_sec.braking .benefit_graph{
        width: 428px;
        height: 345px;
        padding: 30px 20px;
    }
    .animation_item .txt_box{
        margin-top: 20px;
    }
    .animation_item .txt_box .ttl{
        font-size: 20px;
        padding-bottom: 12px;
    }
    .animation_item .txt_box .txt{
        font-size: 14px;
    }
    .benefit_sec.handling .benefit_item,
    .benefit_sec.traction .benefit_item {
        display: block;
    }
    .benefit_sec.handling .benefit_item:before,
    .benefit_sec.traction .benefit_item:before {
        width: 170px;
        margin: 0 auto;
    }
    .benefit_sec.handling .btn_detail,
    .benefit_sec.traction .btn_detail {
        right: 50%;
        margin-right: -80px;
        border-top: 10px;
    }
    .benefit_item + .benefit_item{
        margin-left: 0;
        margin-top: 20px;
    }
    .benefit_sec.traction .bg_area{
        top: 50%;
        bottom: auto;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        overflow-y: hidden;
    }
    .benefit_sec.traction .bg_area:before{
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 80px;
        background: -moz-linear-gradient(top,  rgba(220,221,223,0) 0%, rgba(220,221,223,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(220,221,223,0) 0%,rgba(220,221,223,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(220,221,223,0) 0%,rgba(220,221,223,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00dcdddf', endColorstr='#dcdddf',GradientType=0 ); /* IE6-9 */
        content: '';
        z-index: 2;
    }
    .benefit_sec.braking .btn_detail{
        bottom: 131px;
        right: -3px;
    }
    
   /* 20210822 툴팁스타일 추가 */
   .ift_tooltip_ul {
    position: absolute;
    top: -10%!important;
    left: 64.5%!important;
    }

}

@media only screen and (max-width: 1280px) {
    .award_item{
        width: 100%;
        height: auto;
    }
    .award_item+.award_item{
        margin-top: 15px;
        padding-top: 15px;
        padding-bottom: 15px;
        border-top: 1px solid rgba(187,187,187,.4);
    }
    .award_item:first-child{
        padding-right: 0;
    }
    .benefit_sec.handling .bg_area{
        right: -40px;
    }
    .benefit_sec .info_area{
        width: 360px;
    }
    .benefit_sec.braking .info_area{
        width: 428px;
    }
    .benefit_txt .txt br{
        display: none;
    }
    .video_wrap .txt_area{
        padding-top: 40px;
    }
    .video_wrap .txt_area .ttl{
        font-size: 40px;
    }

}


@media only screen and (max-width: 980px) {
    .benefit_sec.braking .info_area{
        width: 350px;
    }
    .benefit_sec.braking .benefit_graph{
        width: 100%;
    }
    .benefit_sec .info_area{
        width: 315px;
    }
}

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

}

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

}

@media only screen and (max-width: 800px) {
}

@media only screen and (max-width: 767px) {
}

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

}

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

}


/* 20210822 툴팁스타일 추가 */
.ift_tooltip_ul{position:absolute; top:-11%;left:68.5%;}
.ift_tooltip_li{float:left;position:relative}
.ift_tooltip_li:nth-of-type(2){margin-left:20px;}
.ift_tooltip_li span {display:none;}    
.ift_tooltip_li:hover span{display:block;}

.invis_rect.type_01{width:54px;height:34px;margin-bottom: .5em;}
.invis_rect.type_02{width:56px;height:52px;margin-top:-15px;    margin-bottom: .5em;}
.pos_01{z-index:999;position:absolute;top:-58px;left:9px;padding-bottom: 10px;background: url(../img/tips_arrow_1.png) no-repeat left bottom;}
.ift_tooltip_li span p{padding: 10px;background-color: #e5e5e6;border: 1px solid #d0d0d0;border-bottom: 0;font-size: 12px;color: #434343;white-space: nowrap;width: auto;font-weight: bold;}
.pos_02{z-index:999;position:absolute;top:-64px;left:9px;padding-bottom: 10px;background: url(../img/tips_arrow_1.png) no-repeat left bottom;}

/* 20210823 pdf 다운로드 */
.feature_item.download{width:100%;margin-bottom:67px;}
.ifit_download_wrap{float:right;}
.ifit_download_tit{font-size:16px; font-weight:bold; color:#444;margin-bottom: 8px;}
.ifit_download_tit::before{content:'';display:inline-block; width:14px; height:14px; background:url(../img/icon_ifit_down_pdf.png)no-repeat;margin-right:6px;}

/* 20210823 test result 팝업 */
.content {width:100%;-webkit-transform-style: preserve-3d; -webkit-transition: opacity 400ms; transition: opacity 400ms;}
.b-close, .btn_close_layer{position:absolute;top:-30px;right:-30px;width:24px;height:24px;background:url('../img/btn_close_layer.png') no-repeat;text-indent:-1000em;overflow:hidden;cursor:pointer}


/* available sizes */
.accordion_sec{min-height:auto;border-bottom: 2px solid #cfcfcf}/* 20210916 update - Max */
.sfit_dl_label{font-size:14px; color:#4a2885; margin-top:16px;font-weight: 600;display:inline-block}
.sfit_dl_label::after{content:'';display:inline-block;width:6px;height:10px;background:url(../img/p_arrow.png)no-repeat;vertical-align:middle;margin-left:16px;}


/* Service */
ul.tabs2 {padding:4px 0 0 0; list-style:none; width:100%; font-size:0; text-align:center; background:#fff;}
ul.tabs2 li {display:inline-block; font-size:14px; text-align:center; cursor:pointer; margin:0 10px; padding:14px 17px; color:#8c8c8c !important; font-family:Tahoma,Verdana,Arial,sans-serif; font-weight:200; overflow:hidden; position:relative;}
ul.tabs2 li.active {color:#000 !important; border-bottom:3px solid #4a2885}
.tab_container2 {clear:both; float:left; width:100%; height:565px;}
.tab_content2 {display:none; height:565px; background:#f4f4f4; padding:35px 50px 60px 50px; line-height:21px; font-size:14px; font-weight:300 !important; color:#8c8c8c; overflow-y:scroll; overflow-x:hidden;}
.tab_container2 .tab_content2 ul {width:100%; margin:0px; padding:0px;}
.tab_content2 h2 {font-family:Tahoma,Verdana,Arial,sans-serif; margin:0; padding:0; font-size:20px; color:#000; font-weight:200 !important;line-height: 2.5em;}
.tab_content2 h3 {font-family:Tahoma,Verdana,Arial,sans-serif; font-size:14px!important; color:#4a2885!important; font-weight:200 !important;margin-top:1.5em;text-align:left!important;height:auto!important;line-height:1.4!important;border-top:0!important}
.tab_content2 h4 {font-family:Tahoma,Verdana,Arial,sans-serif; font-size:16px!important; color:#4b4b4b!important; font-weight:200 !important;}

ul.tabs3 {padding:14px 0 0 0; list-style:none; width:100%; font-size:0; text-align:center; overflow:hidden;background:#fff}
ul.tabs3 li {display:inline-block; font-size:14px; text-align:center; cursor:pointer; margin:0 10px; padding:14px 17px; color:#8c8c8c !important; font-family:Tahoma,Verdana,Arial,sans-serif; font-weight:200; overflow:hidden; position:relative;}
ul.tabs3 li.active {color:#000 !important; border-bottom:3px solid #4a2885}
.tab_container3 {clear:both; float:left; width:100%; height:565px; background:#f4f4f4;}
.tab_content3 {display:none; height:565px; background:#f4f4f4; padding:35px 50px 60px 50px; line-height:21px; font-size:14px; font-weight:300 !important; color:#8c8c8c; overflow-y:scroll; overflow-x:hidden;}
.tab_container3 .tab_content3 ul {width:100%; margin:0px; padding:0px;}
.tab_content3 h2 {font-family:Tahoma,Verdana,Arial,sans-serif; margin:0; padding:0; font-size:20px!important; color:#000!important; font-weight:200 !important;line-height: 2.5em;text-align:left}
.tab_content3 h3 {font-family:Tahoma,Verdana,Arial,sans-serif; font-size:14px!important; color:#4a2885!important; font-weight:200 !important; margin-top:1.5em;text-align:left!important;height:auto!important;line-height:1.4!important;border-top:0!important}
.tab_content2 h4 {font-family:Tahoma,Verdana,Arial,sans-serif; font-size:16px!important; color:#4b4b4b!important; font-weight:200 !important;}
/* //Service */

/* table tab */
.sixth1 {width:100%;}
.tab_container {clear:both; float:left; width:100%;}
.tab_content {display:none;height:400px;overflow-y:auto;}
.tab_container .tab_content ul {width:100%; margin:0px; padding:0px;}
.tab_content table {border:0; margin:33px 0 0 0; width:100%; font-family:Tahoma,Verdana,Arial,sans-serif; border-bottom:1px solid #c8c8c8}
.tab_content table th {font-size:13px; font-weight:200; color:#fff; padding:8px 0; text-align:center; background:#000;}
.tab_content table td {font-size:15px; font-weight:200; color:#8c8c8c !important; padding:10px 0; text-align:left; border-bottom:1px dotted #c8c8c8}
.tab_content table td span {color:#8c8c8c}
.sizeBody table {margin:0 !important;}

/* 20210823 accordion  */
#accordion h3{width:100%; font-size:36px; color:#222; text-align:center;height:110px;line-height:110px;border-top:2px solid #cfcfcf}
#accordion .feature_item ul {padding-top: 0px!important;}
#accordion .window{min-height:350px;}
#accordion .tab_cnts .tab_cnt{padding:0 0!important; height:500px; overflow:scrol!important;}
#accordion .feature_item{padding: 0 0!important}
#accordion .tabs li{width:12.5%;}
.accd_tit_wrap{width:400px; margin:0 auto; text-align:left;}/* 20210901 update - Max */
.accd_tit_arrow{height:20px;width:34px;background:url(../img/accd_tit_arrow.png)no-repeat;float:right;display: inline-block;margin-top: 50px;-moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";}
.accd_tit_arrow.on{transform: scaleY(1);}

.feature_item.size li{border-bottom:4px solid #eee}
.feature_item.size li.is_active{border-bottom-color: #4a2885;}
.feature_item.size li > button {background:#eee!important;height:56px!important;}


/* 20250319 GNB style 변경 */
#newheader {position:fixed; top:0; left:0; width:100%; background:#fff; z-index:999;}
#newheader .newheader_wrap {position:relative;}
#newheader .newheader_wrap .newgnb_bglayer {display:none; position:absolute; z-index:0; top:80px; left:0; width:100%; background:rgba(0,0,0,.9);}
#newheader .newheader_wrap .wrap {position:relative; min-width:1240px; max-width:1440px; margin:0 auto;}
#newheader h1 {position:absolute; top:25px; left:0; z-index:10; padding:0;}
#newheader h1 img {display:block;}

#newgnb {height:80px; position:relative; z-index:5;}
#newgnb .newgnb_wrap {padding-top:20px;}
#newgnb .newgnb_wrap::after {content:''; display:block; clear:both;}
#newgnb .menus {float:right;}
#newgnb .menus >li {float:left;font-family: "Roboto", Tahoma, Verdana, sans-serif;}
#newgnb .menus >li >a {display:inline-block; height:40px; margin:0 20px 20px;}
#newgnb .menus >li >a >span {position:relative; display:block; color:#000; font-size:17px;font-weight:500;line-height:40px; text-align:center;}
#newgnb .menus >li >a >span::after {content:''; position:absolute; left:50%; bottom:0; width:0; height:2px; background:#000; opacity:0; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); -webkit-transition:width .3s; transition:width .3s;}
#newgnb .menus >li.select >a >span::after {width:100%; opacity:1;}
#newgnb .menus >li.hover >a >span::after {width:100%; opacity:1;}
#newgnb .menus >li:last-child >a {margin-right:0;}
#newgnb .menus_subwrap {display:none; position:absolute; z-index:1; top:80px; left:0; width:100%; height:401px; padding:25px 0 80px 104px; box-sizing:border-box;}/* 20200828 hide menu, Nicole */
#newgnb .menus_subwrap::before {content:''; position:absolute; z-index:-1; top:0; left:50%; margin-left:-960px; width:1920px; height:100%;}
#newgnb .menus_subwrap .menus_dep2 >li {position:relative;}
#newgnb .menus_subwrap .menus_dep2 >li >a {position:relative; display:block; width:273px; margin-top:-1px; border-top:1px solid #4f4f4f; border-bottom:1px solid #4f4f4f; color:#fff; font-weight:500; font-size:25px; line-height:1.2; white-space:nowrap; -webkit-transition:color .4s; transition:color .4s;}
#newgnb .menus_subwrap .menus_dep2 >li >a i {position:absolute; top:50%; right:0; margin:-7px 0 0; width:13px; height:13px; opacity:0; -webkit-transform:translateX(-20px); -ms-transform:translateX(-20px); transform:translateX(-20px); -webkit-transition-property:opacity, transform; transition-property:opacity, transform;}
#newgnb .menus_subwrap .menus_dep2 >li >a i::before {content:''; display:block; width:13px; height:13px; border-right:2px solid #a17eea; border-bottom:2px solid #a17eea; box-sizing:border-box; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg);}
#newgnb .menus_subwrap .menus_dep2 >li >a::before {content:''; display:inline-block; vertical-align:middle; height:79px;}
#newgnb .menus_subwrap .menus_dep2 >li >a >span {display:inline-block; vertical-align:middle; line-height:1.2; white-space:normal;}
#newgnb .menus_subwrap .menus_dep2 >li.dimmed >a {color:#888;}
#newgnb .menus_subwrap .menus_dep2 >li.hover >a {color:#a17eea;}
#newgnb .menus_subwrap .menus_dep2 >li.hover >a i {opacity:1; -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); -webkit-transition-duration:.6s, .4s; transition-duration:.6s, .4s;}
#newgnb .menus_subwrap .menus_dep2 >li.hover .menus_dep3 {z-index:1; height:auto; overflow:visible; opacity:1; -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); -webkit-transition-duration:.6s, .4s; transition-duration:.6s, .4s; -webkit-transition-delay:.1s; transition-delay:.1s;}
#newgnb .menus_subwrap .menus_dep3 {height:0; position:absolute; top:20px; left:273px; padding-left:60px; overflow:hidden; opacity:0; -webkit-transform:translateX(-30px); -ms-transform:translateX(-30px); transform:translateX(-30px); -webkit-transition:opacity, transform; transition:opacity, transform;}
#newgnb .menus_subwrap .menus_dep3 >li::after {content:''; display:block; clear:both;}
#newgnb .menus_subwrap .menus_dep3 >li >a, #newgnb .menus_subwrap .menus_dep3 >li >.dep_label {float:left; padding:10px 0 11px; color:#dfdfdf; font-size:18px; line-height:22px; -webkit-transition:color .2s; transition:color .2s;}
#newgnb .menus_subwrap .menus_dep3 >li >a .prd_concept {display:inline-block; vertical-align:middle; height:18px; margin:-3px 0 0 10px; padding:3px 6px 0; background:#2a2a2c; color:#888; font-size:14px; line-height:1; border-radius:2px; white-space:nowrap; box-sizing:border-box;}
#newgnb .menus_subwrap .menus_dep3.type2 >li >a, #newgnb .menus_subwrap .menus_dep3.type2 >li >.dep_label {width:177px;}
#newgnb .menus_subwrap .menus_dep3 >li:hover >a {color:#a17eea;}
#newgnb .menus_subwrap .menus_dep4 {float:left; padding-bottom:16px;}
#newgnb .menus_subwrap .menus_dep4 >li >a {display:inline-block; vertical-align:top; padding:10px 0 5px; color:#dfdfdf; font-size:17px; line-height:22px; -webkit-transition:color .2s; transition:color .2s;}
#newgnb .menus_subwrap .menus_dep4 >li:hover >a {color:#a17eea;}
/* //20250319 GNB style 변경 */

/* 20250319 브랜드 메시지 및 한국타이어 링크 추가 */
html.page_newheader.no_section body {padding-top:115px; box-sizing:border-box;}
html.page_newheader.no_section .wrapper {margin:-264px auto 0;}
html.page_newheader.no_section .wrapper .wrapper_inner {padding:314px 0 97px;}
html.page_newheader #top_img {padding-top:115px; background:#000 !important;}
/* //20250319 브랜드 메시지 및 한국타이어 링크 추가 */

@media all and (max-width:1600px) {
    #newheader .newheader_wrap {padding:0 10px;}
}
@media screen and (max-width:1023px) {
    html.page_newheader.no_section .wrapper {margin:-334px auto 0;}
    html.page_newheader.no_section .wrapper .wrapper_inner {padding:384px 0 110px}
}
/* 20200811 GNB Renew - Nicole */

#newgnb .menus_subwrap .right_area {position:absolute; z-index:1; top:35px; right:10px;}
#newgnb .menus_subwrap .tbrban {position:relative; display:block; width:282px; height:153px; padding:13px 0 0; background:url('../../images/common/bg_gnb_tbrban.png') no-repeat 0 0; color:#fff; color:rgba(255,255,255,.65); box-sizing:border-box;}
#newgnb .menus_subwrap .tbrban .txt_t {display:block; min-height:90px; padding-bottom:18px; font-size:18px; line-height:22px; font-weight:400; letter-spacing:-0.01em; box-sizing:border-box;}
#newgnb .menus_subwrap .tbrban .txt_btn {display:inline-block; font-size:15px; line-height:20px; font-weight:400;}
#newgnb .menus_subwrap .tbrban .txt_btn i {display:inline-block; vertical-align:middle; margin:-1px 0 0 6px; width:7px; height:7px;}
#newgnb .menus_subwrap .tbrban .txt_btn i::before {content:''; display:block; width:7px; height:7px; border-right:2px solid #fff; border-bottom:2px solid #fff; opacity:.65; box-sizing:border-box; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg);}
#newgnb .menus_subwrap .tbrban .txt_btn >span {display:inline-block; vertical-align:middle;}
#newgnb .menus_subwrap .tbrban:hover .txt_btn >span::after {content:''; display:block; margin:0 0 -1px; border-bottom:1px solid;}

/* 20250325 브랜드 메시지 및 한국타이어 링크 추가 */
.header_utility {background-color:#000;}
.header_utility .container {display:flex;align-items:center;justify-content:space-between;height:35px;width:auto;max-width:1440px;margin:0 auto;box-sizing:border-box;}
.header_utility .brand_message {font-family:'Hankook';font-weight:500;font-size:12px;line-height:35px;color:#fff;}
.header_utility .utility_nav {display:flex;align-items:center;gap:0 20px;}
.header_utility .utility_nav .utility_nav_item {position:relative;}
.header_utility .utility_nav .utility_nav_item + .utility_nav_item::before {content:'';display:block;position: absolute;left: -11px;top: 50%;width:1px;height:10px;margin-top:-5px;background-color:rgba(247,247,247,0.4);} 
.header_utility .utility_nav .utility_nav_item a {display:inline-block;font-family:'Hankook';font-weight:500;font-size:12px;line-height:35px;color:#fff;}
.header_utility .utility_nav .utility_nav_item:first-child a {font-weight:400;}
.header_utility .utility_nav .utility_nav_item.arrow_item {padding-right:24px;}
.header_utility .utility_nav .utility_nav_item.arrow_item::after {content:'';display:inline-block;position:absolute;right:0;top:50%;width:16px;height:16px;margin-top:-10px;background:url('../../images/common/ico_arrow_white.svg') no-repeat center/19px 19px;}
@media all and (max-width:1440px) {
    .header_utility .container {padding:0 10px;}
}
/* //20250325 브랜드 메시지 및 한국타이어 링크 추가 */

/* footer */
/* 20230103  SNS Update - Zzj */
.footer{position:static;bottom:0;width:100%;padding:15px 0 15px;background:#27134a;color:#c6b5e4;font-weight:300;font-size:12px;line-height:1.8;min-height:66px;box-sizing:border-box;font-family:"Roboto",Tahoma,Verdana,sans-serif;}/* 20220608 Footer.v2 - Max */
.no_section .footer{position:static;}
.footer a{position:relative;color:#c6b5e4;padding:0 12px 0 5px;display:inline-block;font-size:14px;font-weight:300;font-family:"Roboto",Tahoma,Verdana,sans-serif;}/* 20200701 MainPage Renew - Min */
.footer a:hover{text-decoration:underline;}
.footer a:after{content:"|";position:absolute;top:0;right:0;line-height:inherit;font-size:15px;}/* 20220608 Footer.v2 - Max */
.footer .footer_cancelline:after{content:" ";position:absolute;/*top:0;*/top:0;right:0;/*line-height:1.2*/line-height:inherit;font-size:15px;}
.footer p{display:inline;color:#c6b5e4;font-size: 12px!important;}/* 20220608 Footer.v2 - Max */
.footer .footer_content {width: 1440px;margin: 0 auto;display: flex;justify-content: space-between;}
.footer .footer_right a:after{display: none;}
.footer .footer_right a {padding: 0!important;}
.footer .footer_right .instagram {padding-left: 18px!important;}
.footer .footer_right {margin-top: 4px!important;display: flex;}
.footer .footer_text {padding:0 12px 0 0;margin-bottom: 10px;}
.footer .footer_left {text-align: left!important;}
.footer .footer_sponsorship_area {position: relative;}
.footer .footer_sponsorship_area:after {content: "|";position: absolute;top: -2px;right: -3px;color: #3A2958;font-size: 40px;}
.footer .footer_sponsorship_area,.footer .footer_sns_area {display: flex;align-items: center;}
.footer .footer_sponsorship_area p{padding-right: 20px;}
.footer .footer_sns_area p {padding: 0 10px 0 20px;}
.footer .footer_sponsorship_area #sponsor-uel_lc {margin-right: 22px;}
.footer .footer_sns_area svg {margin-top: 8px;}
/* //20230103 */

/* 20210831 Boxes 처리 */
#boxes{display:none;}

/* 20210831 Label_link_PCR_N 스타일 지정 */
.Label_link_PCR_N{font-size: 14px;color: #4a2885;margin-top: 16px;font-weight: 500;display: inline-block;}
.Label_link_PCR_N::after{content: '';display: inline-block;width: 6px;height: 10px;background: url(../img/p_arrow.png)no-repeat;vertical-align: middle;margin-left: 16px;}

/* mask display:none 스타일 지정 */
#mask {position:fixed;left:0;top:0;z-index:999;background-color:#000;background-color:rgba(0,0,0,0.8);display:none;}
.universe{-webkit-box-sizing:unset}

/* cookie_notice */
/* 20231123 PRIVACY POLICY PAGE UPDATE - Max */
.cookie_notice{display:none;position:relative;padding:10px;background:#4a2885;color:#fefefe;font-weight:400;font-size:80%;box-sizing:border-box;text-align:center;font-family: "Roboto",Tahoma,Verdana,sans-serif;}
.cookie_notice p{display:inline;text-align:center;}
.cookie_notice .btn_underline{border-bottom:1px solid #fff;white-space:nowrap;color:#fff;margin:0 10px;}
.cookie_notice .btn_close{display:inline-block;width:20px;height:20px;margin:0 0 0 50px;background:url('/de/front/images/common/btn_close01.png') no-repeat 0 0;text-indent:-10000em;overflow:hidden;}
.cookie_notice .btn {display:inline-block;height:26px;line-height:26px;padding:0 10px;background:#fff;color:#6938bd;font-size:12px;margin-left:10px;}
/* //20231123 */ 

/* 20210913 그래프 지표 modify */

.summary_words{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.summary_words li{
    position: absolute;
    font-size: 18px;
    font-weight: 700;
    color: #666;
    white-space: pre-line;
}
.summary_words li:nth-of-type(1){
    bottom: 93%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    text-align: center;
}
.summary_words li:nth-of-type(2){
    left: 82%;
    top: 38%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.summary_words li:nth-of-type(3){
    left: 71%;
    top: 87%;
}
.summary_words li:nth-of-type(4){
    right: 71%;
    top: 87%;
    text-align: right;
}
.summary_words li:nth-of-type(5){
    right: 82%;
    top: 38%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: right;
}

/* 20210914 accd modify */
.mod_accd{display:none;}
.mod_accd.on{display:block;}

/* 20211028 add */
.ifit .loading_wrap {background:transparent}