@charset 'UTF-8';
img
{
    display: inline;
}

.carImgAreaApp img
{
    display: block;
}

.carImgAreaApp .innerApp
{
    top: 580px;
}

.carSmartphoneIntegrationWrap
{
    position: relative; 

    overflow: hidden;

    width: 100%;
    height: 625px;

    color: #fff;
    background-color: #020202;
}

.carSmartphoneIntegrationBG
{
    position: absolute;
    top: 0; 
    right: 0;
    left: 0;

    width: 100%;
    height: 821px;
    margin: auto;

    background: url(../img/si_001.png) center top no-repeat;
}

.carSmartphoneIntegrationTextBlock
{
    position: absolute;
    right: 0;
    left: 0;

    width: 980px;
    margin: auto;
}

.carSmartphoneIntegrationWrap h3
{
    font-size: 42px;
    font-weight: bold;
    line-height: 42px;

    position: absolute;
    top: 148px;
    left: 0;

    transition: all .5s ease;
    transform: translateX(-100px); 

    opacity: 0;
}

.carSmartphoneIntegrationWrap h3.show
{
    transition: all .5s ease;
    transform: translateX(0px); 

    opacity: 1;
}

.carSmartphoneIntegrationWrap div.block
{
    font-size: 15px;
    line-height: 27px;

    position: absolute;
    top: 262px;
    left: 0;

    width: 275px;

    transition: all .5s ease 0s;

    opacity: 0;
}

.carSmartphoneIntegrationWrap div.show
{
    transition: all .5s ease .3s;

    opacity: 1;
}

.carSmartphoneIntegrationWrap div.block span.title
{
    display: inline-block;

    width: 83px;
    margin: 18px 10px 7px 0; 

    text-align: center;

    border: 1px solid #fff;
}

.carSmartphoneIntegrationWrap div.block span.android
{
    /*width: 178px;*/
    margin-right: 0;
}

.carSmartphoneIntegrationWrap div.block a
{
    display: block;

    width: 205px;
    margin-top: 5px;

    transition: opacity .2s linear 0s;

    opacity: 1;
}

/*.carSmartphoneIntegrationWrap div.block a:hover{
	opacity: 0.5;
}*/
.carSmartphoneIntegrationWrap div.block a:last-child
{
    margin-right: 0;
}

.carSmartphoneIntegrationHand
{
    position: absolute;
    z-index: 10;
    top: 342px;
    right: -70px;

    transition: all .8s ease 0s;

    opacity: 0;
}

.carSmartphoneIntegrationTextBlock div.showHand
{
    top: 207px; 

    transition: all .8s ease .6s;

    opacity: 1;
}

/* Common - MotionBlock */
.carMotionBlock
{
    width: 100%;
    margin-top: -51px;
    padding-top: 51px; 

    color: #fff;
    background-color: #161519;
}

.carMotionBlock > div
{
    padding: 50px 0 0 0;

    text-align: center;

    border-bottom: 1px solid #c9cacb;
}

.carMotionBlock h3
{
    font-size: 35px;

    padding: 0 0 25px 0;
}

.carMotionBlock h3.carSlideIn,
.scrlFeatureSection h3.scrlSlideIn
{
    transition: all .5s ease 0s;
    transform: translateX(-150px); 

    opacity: 0;
}

.carMotionBlock h3.show,
.scrlFeatureSection h3.show
{
    transition: all .5s ease 0s;
    transform: translateX(0px); 

    opacity: 1;
}

.carMotionBlock h4.carSlideIn,
.scrlFeatureSection h4.scrlSlideIn
{
    transition: all .5s ease 0s;
    transform: translateX(-150px); 

    opacity: 0;
}

.carMotionBlock h4.show,
.scrlFeatureSection h4.show
{
    transition: all .5s ease 0s;
    transform: translateX(0px); 

    opacity: 1;
}

.carMotionBlock div.carFadeIn,
.scrlFeatureSection div.scrlFadeIn
{
    transition: all .5s ease 0s;

    opacity: 0;
}

.carMotionBlock div.showCarFadeIn,
.scrlFeatureSection div.showCarFadeIn
{
    transition: all .5s ease .2s;

    opacity: 1;
}

.carMotionBlock h3.low
{
    padding: 0 0 0 0;
}

.carMotionBlock h3 span
{
    font-size: 30px;
}

.carMotionBlock p
{
    display: block;

    margin: 0 auto;
}

.carMotionBlock p.b25
{
    padding-bottom: 25px;
}

.carMotionBlock p.w786
{
    font-size: 15px;

    width: 786px;
}

.carMotionBlock p.small
{
    font-size: 13px;

    padding: 15px 0 15px 0;
}

.carMotionBlock p.t25
{
    padding-top: 25px;
}

.carLastSection
{
    border-bottom: none !important;
}

.carFadeIn h4
{
    font-size: 25px;

    padding-bottom: 15px;
}

.carMotionBlock .carMotionImages
{
    position: relative;

    overflow: hidden; 
    /*height: 350px;*/

    width: 980px;
    margin-right: auto;
    margin-left: auto;

    transition: all .5s ease 0s;

    opacity: 0;
    border-bottom: 1px solid #fff;
}

.carMotionBlock .showCarMotionImages
{
    transition: all .5s ease .5s;

    opacity: 1;
}

.carMotionBlock .carMotionImages .iconList
{
    margin-top: 30px;
    margin-bottom: 30px;
}

.carMotionBlock .carMotionImages .iconList p
{
    margin-bottom: 10px;
}

.carMotionBlock .carMotionImages .iconList ul
{
    display: -ms-flexbox;
    display: flex;

    -ms-flex-pack: center;
    justify-content: center;
}

.carMotionBlock .carMotionImages .iconList ul li
{
    margin: 0 5px;
}

.carMotionBlock .carMotionImages .app
{
    display: -ms-flexbox;
    display: flex;

    padding-bottom: 50px; 

    -ms-flex-pack: center;
    justify-content: center;
}

.carMotionBlock .carMotionImages .app p
{
    margin: 0 0 0 10px;

    text-align: left;
}

.carMotionBlock .carMotionImages .app p a
{
    text-decoration: underline; 

    color: #fff;
}

.anchorAdjust
{
    margin-top: -51px;
    padding-top: 51px;
}

/* CarPlay */
.carPlayImages
{
    height: 382px;
}

.carPlayImages .playIcon
{
    position: absolute;
    top: 21px;
}

.carPlayImages #playIcon_1
{
    left: 223px;
}

.carPlayImages #playIcon_2
{
    left: 295px;
}

.carPlayImages #playIcon_3
{
    left: 367px;
}

.carPlayImages #playIcon_4
{
    left: 439px;
}

.carPlayImages .showIcon_1
{
    animation: showIcon_1 7.7s ease 0s 1 normal forwards;
}

.carPlayImages .showIcon_2
{
    animation: showIcon_2 7.7s ease 0s 1 normal forwards;
}

.carPlayImages .showIcon_3
{
    animation: showIcon_3 7.7s ease 0s 1 normal forwards;
}

.carPlayImages .showIcon_4
{
    animation: showIcon_4 7.7s ease 0s 1 normal forwards;
}

.carPlayImages .playBody
{
    position: absolute;
    top: 125px;
    left: 173px;
}

.carPlayImages .playPhone
{
    position: absolute;
    top: 123px;
    right: 177px;
}

.carPlayImages .playCable
{
    position: absolute;
    top: 317px;
    right: 225px;
}

.carPlayImages .showPlayCable
{
    animation: showCable 7.7s ease 0s 1 normal forwards;
}

.carPlayImages .playScreen
{
    position: absolute;
    top: 152px;
    left: 205px;
}

.carPlayImages #playScreen_1,
.carPlayImages #playScreen_2,
.carPlayImages #playScreen_3,
.carPlayImages #playScreen_4,
.carPlayImages #playPhone_2
{
    opacity: 0;
}

.carPlayImages .showScreen_1
{
    animation: showScreen_1 7.7s ease 0s 1 normal forwards;
}

.carPlayImages .showScreen_2
{
    animation: showScreen_2 7.7s ease 0s 1 normal forwards;
}

.carPlayImages .showScreen_3
{
    animation: showScreen_3 7.7s ease 0s 1 normal forwards;
}

.carPlayImages .showScreen_4
{
    animation: showScreen_4 7.7s ease 0s 1 normal forwards;
}

.carPlayImages .showPhone_2
{
    animation: showPhone_2 7.7s ease 0s 1 normal forwards;
}

.carPlayImages .showPlayWifi
{
    animation: showWifi 7.7s ease 0s 1 normal forwards;
}

.carPlayImages .showplayWifiWave
{
    animation: fade_in .3s ease-in 1.4s forwards,
    blink .7s ease-in-out 4 1.7s alternate;
}

.carPlayImages .playWifi
{
    position: absolute;
    top: 30px;
    right: 178px;
}

.carPlayImages .playWifiWave
{
    position: absolute;
    top: 175px;
    right: 306px;

    opacity: 0;
}

/*
0% 	初期画面
9% ケーブルが出始める
18% ケーブルが出終わる／スマホ画面が変わり始める
27% スマホ画面が変わり終わる
36% 本体画面1が出始める
45% 本体画面1が出終わる
54% 本体画面2が出始める
63% 本体画面2が出終わる
72% 本体画面3が出始める
81% 本体画面3が出終わる
90% 本体画面4が出始める
100% 本体画面4が出終わる
*/

@keyframes showCable
{
    from
    {
        transform: translateY(65px);
    }
    9%
    {
        transform: translateY(65px);
    }
    18%
    {
        transform: translateY(0px);
    }
    to
    {
        transform: translateY(0px);
    }
}

@keyframes showCable2
{
    from
    {
        transform: translateY(65px);

        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    to
    {
        transform: translateY(0px);

        opacity: 1;
    }
}

@keyframes showWifi
{
    from
    {
        transform: scale(1);
    }
    9%
    {
        transform: scale(1);
    }
    18%
    {
        transform: scale(1.1);
    }
    25%
    {
        transform: scale(1);
    }
    to
    {
        transform: scale(1);
    }
}

@keyframes blink
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: .1;
    }
}

@keyframes fade_in
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

@keyframes fade_out
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

@keyframes showIcon_1
{
    from
    {
        transform: scale(1);
    }
    25%
    {
        transform: scale(1);
    }
    30%
    {
        transform: scale(1.2);
    }
    35%
    {
        transform: scale(1);
    }
    to
    {
        transform: scale(1);
    }
}

@keyframes showIcon_2
{
    from
    {
        transform: scale(1);
    }
    40%
    {
        transform: scale(1);
    }
    45%
    {
        transform: scale(1.2);
    }
    50%
    {
        transform: scale(1);
    }
    to
    {
        transform: scale(1);
    }
}

@keyframes showIcon_3
{
    from
    {
        transform: scale(1);
    }
    55%
    {
        transform: scale(1);
    }
    60%
    {
        transform: scale(1.2);
    }
    65%
    {
        transform: scale(1);
    }
    to
    {
        transform: scale(1);
    }
}

@keyframes showIcon_4
{
    from
    {
        transform: scale(1);
    }
    70%
    {
        transform: scale(1);
    }
    75%
    {
        transform: scale(1.2);
    }
    80%
    {
        transform: scale(1);
    }
    to
    {
        transform: scale(1);
    }
}

@keyframes showIcon_5
{
    from
    {
        transform: scale(1);
    }
    85%
    {
        transform: scale(1);
    }
    90%
    {
        transform: scale(1.2);
    }
    95%
    {
        transform: scale(1);
    }
    to
    {
        transform: scale(1);
    }
}

@keyframes showIcon_new
{
    from
    {
        transform: scale(1);
    }
    20%
    {
        transform: scale(1);
    }
    50%
    {
        transform: scale(1.1);
    }
    80%
    {
        transform: scale(1);
    }
    to
    {
        transform: scale(1);
    }
}

@keyframes showScreen_1
{
    from
    {
        opacity: 0;
    }
    25%
    {
        opacity: 0;
    }
    30%
    {
        opacity: 1;
    }
    to
    {
        opacity: 1;
    }
}

@keyframes showScreen_2
{
    from
    {
        opacity: 0;
    }
    40%
    {
        opacity: 0;
    }
    45%
    {
        opacity: 1;
    }
    to
    {
        opacity: 1;
    }
}

@keyframes showScreen_3
{
    from
    {
        opacity: 0;
    }
    55%
    {
        opacity: 0;
    }
    60%
    {
        opacity: 1;
    }
    to
    {
        opacity: 1;
    }
}

@keyframes showScreen_4
{
    from
    {
        opacity: 0;
    }
    70%
    {
        opacity: 0;
    }
    75%
    {
        opacity: 1;
    }
    to
    {
        opacity: 1;
    }
}

@keyframes showScreen_5
{
    from
    {
        opacity: 0;
    }
    85%
    {
        opacity: 0;
    }
    90%
    {
        opacity: 1;
    }
    to
    {
        opacity: 1;
    }
}

@keyframes showPhone_2
{
    from
    {
        opacity: 0;
    }
    18%
    {
        opacity: 0;
    }
    27%
    {
        opacity: 1;
    }
    to
    {
        opacity: 1;
    }
}

/* AndroidAuto */
.carAndroidImages
{
    height: 379px;
}

.carAndroidImages .androidIcon
{
    position: absolute;
    top: 21px;
}

.carAndroidImages #androidIcon_1
{
    left: 223px;
}

.carAndroidImages #androidIcon_2
{
    left: 295px;
}

.carAndroidImages #androidIcon_3
{
    left: 367px;
}

.carAndroidImages #androidIcon_4
{
    left: 439px;
}

.carAndroidImages .showIcon_1
{
    animation: showIcon_1 7.7s ease 0s 1 normal forwards;
}

.carAndroidImages .showIcon_2
{
    animation: showIcon_2 7.7s ease 0s 1 normal forwards;
}

.carAndroidImages .showIcon_3
{
    animation: showIcon_3 7.7s ease 0s 1 normal forwards;
}

.carAndroidImages .showIcon_4
{
    animation: showIcon_4 7.7s ease 0s 1 normal forwards;
}

.carAndroidImages .androidBody
{
    position: absolute;
    top: 125px;
    left: 173px;
}

.carAndroidImages .androidPhone
{
    position: absolute;
    top: 123px;
    right: 177px;
}

.carAndroidImages .androidCable
{
    position: absolute;
    top: 317px;
    right: 225px;
}

.carAndroidImages .androidWifi
{
    position: absolute;
    top: 30px;
    right: 178px;
}

.carAndroidImages .androidWifiWave
{
    position: absolute;
    top: 175px;
    right: 306px;

    opacity: 0;
}

.carAndroidImages .showAndroidCable
{
    animation: showWifi 7.7s ease 0s 1 normal forwards;
}

.carAndroidImages .showAndroidWifi
{
    animation: showWifi 7.7s ease 0s 1 normal forwards;
}

.carAndroidImages .showAndroidWifiWave
{
    animation: fade_in .3s ease-in 1.4s forwards,
    blink .7s ease-in-out 4 1.7s alternate;
}

.carAndroidImages .androidScreen
{
    position: absolute;
    top: 152px;
    left: 205px;
}

.carAndroidImages #androidScreen_1,
.carAndroidImages #androidScreen_2,
.carAndroidImages #androidScreen_3,
.carAndroidImages #androidScreen_4,
.carAndroidImages #androidPhone_2
{
    opacity: 0;
}

.carAndroidImages .showScreen_1
{
    animation: showScreen_1 7.7s ease 0s 1 normal forwards;
}

.carAndroidImages .showScreen_2
{
    animation: showScreen_2 7.7s ease 0s 1 normal forwards;
}

.carAndroidImages .showScreen_3
{
    animation: showScreen_3 7.7s ease 0s 1 normal forwards;
}

.carAndroidImages .showScreen_4
{
    animation: showScreen_4 7.7s ease 0s 1 normal forwards;
}

.carAndroidImages .showAndroid_2
{
    animation: showPhone_2 7.7s ease 0s 1 normal forwards;
}

/* weblink */
.carWeblinkImages
{
    height: 379px;
}

.carWeblinkImages .weblinkIcon
{
    position: relative;

    margin: 0 5px;
}

.carWeblinkImages .icons
{
    position: absolute;
    top: 21px;
    left: 80px;
}

.carWeblinkImages .showIcon_1
{
    animation: showIcon_1 7.7s ease 0s 1 normal forwards;
}

.carWeblinkImages .showIcon_2
{
    animation: showIcon_2 7.7s ease 0s 1 normal forwards;
}

.carWeblinkImages .showIcon_3
{
    animation: showIcon_3 7.7s ease 0s 1 normal forwards;
}

.carWeblinkImages .showIcon_4
{
    animation: showIcon_4 7.7s ease 0s 1 normal forwards;
}

.carWeblinkImages .showIcon_5
{
    animation: showIcon_5 7.7s ease 0s 1 normal forwards;
}

.carWeblinkImages .weblinkBody
{
    position: absolute;
    top: 125px;
    left: 173px;
}

.carWeblinkImages .weblinkPhone
{
    position: absolute;
    top: 123px;
    right: 177px;
}

.carWeblinkImages .weblinkCable
{
    position: absolute;
    top: 317px;
    right: 225px;
}

.carWeblinkImages .weblinkWifi
{
    position: absolute;
    top: 30px;
    right: 178px;
}

.carWeblinkImages .weblinkWifiWave
{
    position: absolute;
    top: 175px;
    right: 306px;

    opacity: 0;
}

.carWeblinkImages .showweblinkCable
{
    animation: showWifi 7.7s ease 0s 1 normal forwards;
}

.carWeblinkImages .showweblinkWifi
{
    animation: showWifi 7.7s ease 0s 1 normal forwards;
}

.carWeblinkImages .showweblinkWifiWave
{
    animation: fade_in .3s ease-in 1.4s forwards,
    blink .7s ease-in-out 4 1.7s alternate;
}

.carWeblinkImages .weblinkScreen
{
    position: absolute;
    top: 152px;
    left: 205px;
}

.carWeblinkImages #weblinkScreen_1,
.carWeblinkImages #weblinkScreen_2,
.carWeblinkImages #weblinkScreen_3,
.carWeblinkImages #weblinkScreen_4,
.carWeblinkImages #weblinkScreen_5,
.carWeblinkImages #weblinkPhone_2
{
    opacity: 0;
}

.carWeblinkImages .showScreen_1
{
    animation: showScreen_1 7.7s ease 0s 1 normal forwards;
}

.carWeblinkImages .showScreen_2
{
    animation: showScreen_2 7.7s ease 0s 1 normal forwards;
}

.carWeblinkImages .showScreen_3
{
    animation: showScreen_3 7.7s ease 0s 1 normal forwards;
}

.carWeblinkImages .showScreen_4
{
    animation: showScreen_4 7.7s ease 0s 1 normal forwards;
}

.carWeblinkImages .showScreen_5
{
    animation: showScreen_5 7.7s ease 0s 1 normal forwards;
}

.carWeblinkImages .showPhone_2
{
    animation: showPhone_2 7.7s ease 0s 1 normal forwards;
}

/* WiFi */
.carWifiImages
{
    height: 350px;
}

.carWifiImages .wifiLogo
{
    position: absolute;
    top: 0; 
    left: 510px;
}

.carWifiImages .wifiBody_1
{
    position: absolute;
    left: 78px;

    transition: all .5s ease 0s;
}

/*.carWifiImages .hideBody_1{
	opacity: 0;
}*/
.carWifiImages .showBody_1
{
    animation: showBody_1 5s ease 0s 1 normal forwards;
}

.carWifiImages .wifiBody_2
{
    position: absolute;
    left: 78px;

    transition: all .5s ease 0s;
}

/*.carWifiImages .hideBody_2{
	opacity: 0;
}*/
.carWifiImages .showBody_2
{
    animation: showBody_2 5s ease 0s 1 normal forwards;
}

.carWifiImages .wifiHand_1
{
    position: absolute;
    top: 182px;
    right: 18px;

    transition: all .5s ease 0s;
}

/*.carWifiImages .hideHand_1{
	opacity: 0;
}*/
.carWifiImages .showHand_1
{
    animation: showHand_1 5s ease 0s 1 normal forwards;
}

.carWifiImages .wifiHand_2
{
    position: absolute;
    top: 50px;
    right: 50px;

    transition: all .5s ease 0s;
}

.carWifiImages .wifiHand_3
{
    position: absolute;
    top: 151px;
    left: 146px;

    transition: all .5s ease 0s;
}

.carWifiImages .playWifiWave
{
    position: absolute;
    top: 100px;
    left: 515px;

    transition: all .5s ease 0s;

    opacity: 0;
}

.carWifiImages .showplayWifiWave
{
    animation: fade_in .3s ease-in 1.4s forwards,
    blink .7s ease-in-out 4 1.7s alternate;
}

/*.carWifiImages .hideHand_3{
	opacity: 0;
	-webkit-transform: translateY(70px);
	-ms-transform: translateY(70px);
	transform: translateY(70px);
}*/
.carWifiImages .showHand_3
{
    animation: showHand_3 5s ease 0s 1 normal forwards;
}

.carWifiImages .waves
{
    position: absolute;
    top: 0;
    left: 0;

    transition: all .5s ease 0s;
}

.carWifiImages .hideWaves
{
    transition: all .5s ease 0s;

    opacity: 0;
}

.carWifiImages .showWaves
{
    transition: all .5s ease 1.2s;

    opacity: 1;
}

.carWifiImages .wave
{
    position: absolute;

    transition: all .3s ease 0s;
}

.carWifiImages .wave img
{
    transition: all .5s ease 0s;
}

.carWifiImages .hideWave_1
{
    opacity: 0;
}

.carWifiImages .singleWave_1
{
    animation: waveLoop_1 1.4s ease 1.0s 3 normal forwards, waveEnd_1 1.5s ease 5.2s 1 normal forwards; 

    opacity: 0;
}

.carWifiImages .singleWave_2
{
    animation: waveLoop_2 1.4s ease 1.0s 3 normal forwards, waveEnd_2 1.5s ease 5.2s 1 normal forwards; 

    opacity: 0;
}

.carWifiImages .singleWave_3
{
    animation: waveLoop_3 1.4s ease 1.0s 3 normal forwards, waveEnd_3 1.5s ease 5.2s 1 normal forwards; 

    opacity: 0;
}

.carWifiImages .showWave_1
{
    animation: showWave_1 5s ease 0s 1 normal forwards;
}

/*
0% 	初期画面
16% 電波が出はじめる
32% 電波が出終わる
48% 本体画面が切り替わりはじめる
64% 本体画面が切り替わり終わる
80% 手が移動しはじめる
100% 手が移動し終わる
*/

@keyframes showBody_1
{
    from
    {
        opacity: 0;
    }
    16%
    {
        opacity: 1;
    }
    32%
    {
        opacity: 1;
    }
    48%
    {
        opacity: 1;
    }
    64%
    {
        opacity: 0;
    }
    80%
    {
        opacity: 0;
    }
    to
    {
        opacity: 0;
    }
}

@keyframes showBody_2
{
    from
    {
        opacity: 0;
    }
    16%
    {
        opacity: 0;
    }
    32%
    {
        opacity: 0;
    }
    48%
    {
        opacity: 0;
    }
    64%
    {
        opacity: 1;
    }
    80%
    {
        opacity: 1;
    }
    to
    {
        opacity: 1;
    }
}

@keyframes showHand_1
{
    from
    {
        opacity: 0;
    }
    16%
    {
        opacity: 1;
    }
    32%
    {
        opacity: 1;
    }
    48%
    {
        opacity: 1;
    }
    64%
    {
        opacity: 1;
    }
    80%
    {
        opacity: 1;
    }
    90%
    {
        opacity: 0;
    }
    to
    {
        opacity: 0;
    }
}

@keyframes showHand_2
{
    from
    {
        opacity: 0;
    }
    16%
    {
        opacity: 0;
    }
    32%
    {
        opacity: 0;
    }
    48%
    {
        opacity: 0;
    }
    64%
    {
        opacity: 0;
    }
    80%
    {
        opacity: 0;
    }
    to
    {
        opacity: 1;
    }
}

@keyframes showHand_3
{
    from
    {
        transform: translateY(70px); 

        opacity: 0;
    }
    16%
    {
        opacity: 0;
    }
    32%
    {
        opacity: 0;
    }
    48%
    {
        opacity: 0;
    }
    64%
    {
        opacity: 0;
    }
    90%
    {
        transform: translateY(70px); 

        opacity: 0;
    }
    to
    {
        transform: translateY(0px); 

        opacity: 1;
    }
}

@keyframes waveLoop_1
{
    from
    {
        opacity: 0;
    }
    10%
    {
        opacity: 0;
    }
    40%
    {
        opacity: 1;
    }
    80%
    {
        opacity: 1;
    }
    to
    {
        opacity: 0;
    }
}

@keyframes waveLoop_2
{
    from
    {
        opacity: 0;
    }
    20%
    {
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    80%
    {
        opacity: 1;
    }
    to
    {
        opacity: 0;
    }
}

@keyframes waveLoop_3
{
    from
    {
        opacity: 0;
    }
    30%
    {
        opacity: 0;
    }
    60%
    {
        opacity: 1;
    }
    80%
    {
        opacity: 1;
    }
    to
    {
        opacity: 0;
    }
}

@keyframes waveEnd_1
{
    from
    {
        opacity: 0;
    }
    10%
    {
        opacity: 0;
    }
    40%
    {
        opacity: 1;
    }
    to
    {
        opacity: 1;
    }
}

@keyframes waveEnd_2
{
    from
    {
        opacity: 0;
    }
    20%
    {
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    to
    {
        opacity: 1;
    }
}

@keyframes waveEnd_3
{
    from
    {
        opacity: 0;
    }
    30%
    {
        opacity: 0;
    }
    60%
    {
        opacity: 1;
    }
    to
    {
        opacity: 1;
    }
}

@keyframes showWave_1
{
    from
    {
        opacity: 0;
    }
    16%
    {
        opacity: 1;
    }
    32%
    {
        opacity: 0;
    }
    48%
    {
        opacity: 0;
    }
    64%
    {
        opacity: 1;
    }
    80%
    {
        opacity: 1;
    }
    to
    {
        opacity: 1;
    }
}

/* Sound Optimization */
#scrlSoundWrap
{
    position: relative;

    overflow: visible;

    width: 100%;
    height: 625px;

    background-color: #000;
}

#scrlSound
{
    position: absolute;
    top: 0;
    left: 0; 

    overflow: visible;

    width: 100%;
    height: 625px;

    background: #d9dfe6 url(../img/scrl_18.png) no-repeat;
    background-position: center -190px;
}

#scrlSound #scrlSoundInner
{
    line-height: 1.5; 

    width: 980px;
    margin: 0 auto;
}

#scrlSound #scrlSoundName
{
    font-size: 42px;
    font-weight: bold;

    display: block;

    margin-left: -300px;
    padding: 100px 0 12px 0;

    transition: all .5s ease 0s; 

    opacity: 0;
}

#scrlSound .showSoundName
{
    margin-left: 0 !important;

    opacity: 1 !important;
}

#scrlSound #scrlSoundTxt
{
    font-size: 15px;

    display: block;

    width: 500px;

    transition: all .5s ease 0s; 

    opacity: 0;
}

#scrlSound .showSoundTxt
{
    transition: all .5s ease .2s !important;

    opacity: 1 !important;
}

#scrlSound #scrlSoundImg
{
    position: absolute;
    top: 300px;
    right: 50%;

    padding-right: 92px;

    transition: all .5s ease 0s; 

    opacity: 0;
}

#scrlSound .showSoundImg
{
    top: 400px !important; 

    transition: all .8s ease .4s !important;

    opacity: 1 !important;
}

.scrlSoundFeatureWrap
{
    width: 100%; 

    background-color: #d9dfe6;
}

/*.scrlSlideIn{
	opacity: 0;
	margin-left: -100%;
}
.scrlFadeIn {
	opacity: 0;
}*/
.scrlFeatureSection .scrlImgArea
{
    position: relative;

    overflow: hidden;

    width: 980px;
    margin-right: auto;
    margin-left: auto;
    padding: 26px 0 0 0; 

    transition: all .5s ease 0s;

    opacity: 0;
}

.scrlFeatureSection .showCarMotionImages
{
    transition: all .5s ease .5s;

    opacity: 1;
}

.scrlFirstSection
{
    padding-top: 98px !important;
}

.scrlFeatureSection
{
    width: 980px;
    margin: 0 auto;
    padding: 50px 0 47px 0;

    text-align: center;

    border-bottom: 1px solid #fff;
}

.scrlDarkBorder
{
    border-bottom: 1px solid #c9cacb !important;
}

.scrlLastSection
{
    border-bottom: none;
}

.scrlNoPadSection
{
    padding-bottom: 0 !important;
}

.scrlFeatureSection h3,
.scrlOtheSection h3
{
    font-size: 35px;

    padding: 0 0 25px 0;
}

.scrlFeatureSection h3 span,
.scrlOtheSection h3 span
{
    font-size: 30px;
}

.scrlFeatureSection p,
.scrlOtheSection p
{
    font-size: 15px;
    line-height: 1.6; 

    display: block;

    margin: 0 auto;
}

.scrlFeatureSection p.b25,
.scrlOtheSection p.b25
{
    padding-bottom: 25px;
}

.scrlFeatureSection p.w786,
.scrlOtheSection p.w786
{
    font-size: 15px; 

    width: 786px;
}

.scrlFadeIn h4
{
    font-size: 25px;

    padding-bottom: 15px;
}

h3.scrlSlideIn img.mark-new
{
    margin: 0 0 6px 6px;
}

@media screen and (min-width: 769px)
{
    /* Fixed Navigation */
    #scrlNav
    {
        font-size: 12px;

        position: fixed;
        z-index: 800;
        top: 360px;
        right: 16px;

        display: block;

        text-align: right; 

        color: #666464;
    }
    div.scrlBrightText li
    {
        color: #fff;
    }
    #scrlNav .scrlNavItem .scrlNavLabel
    {
        line-height: 24px;

        height: 24px;

        opacity: 0;
    }
    #scrlNav .scrlNavItem .scrlNavDot
    {
        display: block;
        float: right; 

        width: 24px;
        height: 24px;

        background: url(../img/scrl_nav01.png) top right no-repeat;
    }
    #scrlNav .scrlNavItem .scrlNavDotActive
    {
        background-position: bottom right;
    }
    .carSmartphoneIntegrationWrap div.block a:hover
    {
        opacity: .5;
    }
}

/* SP */
@media only screen and (max-width: 768px)
{
    /* Fixed Navigation */
    #scrlNav
    {
        display: none;
    }
    .carSmartphoneIntegrationWrap
    {
        height: 450px;
    }
    .carSmartphoneIntegrationBG
    {
        height: 600px;

        background-size: auto 600px;
    }
    .carSmartphoneIntegrationWrap h3
    {
        font-size: 36px;
        line-height: 36px; 

        top: 40px;
        left: 10px;
    }
    .carSmartphoneIntegrationWrap div.block
    {
        font-size: 18px;
        line-height: 23px; 

        top: 134px;
        left: 10px;

        width: 275px;
    }
    .carSmartphoneIntegrationHand
    {
        top: 237px; 
        right: 0;
    }
    .carSmartphoneIntegrationHand img
    {
        width: 210px;
    }
    .carSmartphoneIntegrationTextBlock
    {
        width: 100%;
    }
    .carSmartphoneIntegrationTextBlock div.showHand
    {
        top: 183px;
    }
    .carMotionBlock .carMotionImages
    {
        width: 100%;
    }
    .carMotionBlock p
    {
        font-size: 20px;
        line-height: 1.6;
    }
    .carMotionBlock p.w786
    {
        font-size: 20px; 

        width: 95%;
    }
    .carPlayImages #playIcon_1
    {
        left: 13%;
    }
    .carPlayImages #playIcon_2
    {
        left: 23%;
    }
    .carPlayImages #playIcon_3
    {
        left: 33%;
    }
    .carPlayImages #playIcon_4
    {
        left: 43%;
    }
    .carPlayImages .playWifiWave
    {
        top: 190px;
        right: 180px;

        width: 50px;
    }
    .carPlayImages .playBody
    {
        top: 125px;
        left: 30px;

        width: 370px;
    }
    .carPlayImages .playPhone
    {
        top: 123px;
        right: 70px;
    }
    .carPlayImages .playCable
    {
        top: 317px;
        right: 117px;
    }
    .carPlayImages .playScreen
    {
        top: 143px;
        left: 54px;

        width: 318px;
    }
    .carAndroidImages #androidIcon_1
    {
        left: 13%;
    }
    .carAndroidImages #androidIcon_2
    {
        left: 23%;
    }
    .carAndroidImages #androidIcon_3
    {
        left: 33%;
    }
    .carAndroidImages #androidIcon_4
    {
        left: 43%;
    }
    .carAndroidImages .androidBody
    {
        top: 125px;
        left: 30px;

        width: 370px;
    }
    .carAndroidImages .androidPhone
    {
        top: 123px;
        right: 70px;
    }
    .carAndroidImages .androidCable
    {
        top: 317px;
        right: 117px;
    }
    .carAndroidImages .androidWifi
    {
        top: 30px;
        right: 70px;
    }
    .carAndroidImages .androidWifiWave
    {
        top: 190px;
        right: 180px;

        width: 50px;
    }
    .carAndroidImages .androidScreen
    {
        top: 143px;
        left: 54px;

        width: 318px;
    }
    /* car wifi*/
    .carWifiImages
    {
        height: 230px;
    }
    .carWifiImages .wifiLogo
    {
        right: auto;
        left: 48.5%;

        width: 80px;
    }
    .carWifiImages .wifiBody_1
    {
        /*78 -> 20 = -58*/
        top: 0;
        left: 20px;

        width: 270px;
    }
    .carWifiImages .wifiBody_2
    {
        top: 0;
        left: 20px;

        width: 270px;
    }
    .carWifiImages .wifiHand_2
    {
        top: 20px;
        right: 3%;

        width: 193px;
    }
    .carWifiImages .playWifiWave
    {
        top: 60px;
        left: 50.5%;

        width: 50px;
    }
    .carMotionImages.carWeblinkImages
    {
        overflow: visible; 

        margin-top: 80px;
    }
    .carWeblinkImages .icons
    {
        top: -50px; 
        left: 0;

        width: 70%;
    }
    .carWeblinkImages .icons .weblinkIcon
    {
        margin-bottom: 10px;
    }
    .carWeblinkImages .weblinkBody
    {
        top: 125px;
        left: 30px;

        width: 370px;
    }
    .carWeblinkImages .weblinkPhone
    {
        top: 123px;
        right: 70px;
    }
    .carWeblinkImages .weblinkCable
    {
        top: 317px;
        right: 117px;
    }
    .carWeblinkImages .weblinkWifi
    {
        top: 30px;
        right: 70px;
    }
    .carWeblinkImages .weblinkWifiWave
    {
        top: 190px;
        right: 180px;

        width: 50px;
    }
    .carWeblinkImages .weblinkScreen
    {
        top: 143px;
        left: 54px;

        width: 318px;
    }
    #scrlSound #scrlSoundName
    {
        font-size: 36px;

        padding: 50px 0 12px 20px;
    }
    #scrlSound #scrlSoundTxt
    {
        font-size: 18px;

        width: 60%;
        padding-left: 20px;
    }
    #scrlSound #scrlSoundImg
    {
        top: 300px;
        right: auto;
        left: 20px;

        padding-right: 92px;
    }
    .scrlFeatureSection
    {
        width: 100%;
    }
    .scrlFeatureSection p.w786,
    .scrlOtheSection p.w786
    {
        font-size: 20px; 

        width: 95%;
    }
    .scrlFeatureSection p,
    .scrlOtheSection p
    {
        font-size: 20px;
    }
    .scrlFeatureSection .scrlImgArea
    {
        width: 100%;
    }
    .scrlFeatureSection .scrlImgArea img
    {
        width: 100%;
        height: auto;
    }
    .scrlFeatureSection .scrlImgArea div.underApp img
    {
        float: left;

        width: 80px;
        margin: -7px 12px 0 0;
    }
}

.mb0
{
    margin-bottom: 0;
}

.movieWrapWidht
{
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
}

.movieWrap
{
    position: relative;
    top: -50%; 

    margin: 0 auto;
    padding-top: 56.25%;
}
.movieWrap.full
{
    width: 100%;
    max-width: 100%;
}
.movieWrap iframe
{
    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    height: 100%;
}

.message-center
{
    margin: 0 auto;
    padding: 80px 0 50px 0;

    background-color: #000;
}
.message-center .scrlFeatureSection
{
    font-size: 35px;
    font-weight: bold; 

    display: -ms-flexbox;
    display: flex;

    box-sizing: border-box;
    height: 600px;

    background: url(../img/durability_top_image.jpg) no-repeat center center #000;
    background-size: cover;

    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.carOtherFeatureWrap .scrlFeatureSection .scrlImgArea img
{
    width: auto;
}

.carOtherFeatureWrap.bg-black
{
    color: #fff; 
    background: #000;
}
.carOtherFeatureWrap.bg-black .scrlFeatureSection
{
    border: 0 !important;
}

.carOtherFeatureWrap.bg-gray
{
    background: #e0e0e0;
}

.carOtherFeatureWrap.bg-opticalBondingDisplay
{
    color: #fff;
    background: url('../img/bg_optical_bonding_display.jpg') no-repeat center center;
    background-size: cover;
}
.carOtherFeatureWrap.bg-opticalBondingDisplay .scrlFeatureSection
{
    border: 0 !important;
}

.carOtherFeatureWrap.bg-dynamicGUI
{
    color: #fff;
    background: url('../img/bg_dynamic_gui.jpg') no-repeat center center;
    background-size: cover;
}
.carOtherFeatureWrap.bg-dynamicGUI .scrlFeatureSection
{
    border: 0 !important;
}

.carOtherFeatureWrap.bg-liveWallPaper
{
    color: #fff;
    background: url('../img/bg_live_wallpaper.png') no-repeat center center;
    background-size: cover;
}
.carOtherFeatureWrap.bg-liveWallPaper .scrlFeatureSection
{
    border: 0 !important;
}

.carOtherFeatureWrap.bg-4camera
{
    color: #fff;
    background: url('../img/bg_4camera.jpg') no-repeat center center;
    background-size: cover;
}
.carOtherFeatureWrap.bg-4camera .scrlFeatureSection
{
    border: 0 !important;
}

.carOtherFeatureWrap.bg-soundQuality
{
    height: 600px; 

    color: #fff;
    background: url('../img/bg_k2.jpg') no-repeat center center;
    background-size: cover;
}
.carOtherFeatureWrap.bg-soundQuality .scrlFeatureSection
{
    border: 0 !important;
}

.carOtherFeatureWrap.bg-highQuality
{
    color: #fff;
    background: url('../img/bg_high_reso.jpg') no-repeat center center;
    background-size: cover;
}
.carOtherFeatureWrap.bg-highQuality .scrlFeatureSection
{
    border: 0 !important;
}

.carOtherFeatureWrap.bg-internetRadio
{
    background: #d9dfe6;
}
.carOtherFeatureWrap.bg-internetRadio .carFeatureCategory
{
    padding-top: 50px;

    color: inherit; 
    background: none;
}

.carOtherFeatureWrap .ta-l
{
    padding: 0 20px; 

    text-align: left;
}
@media screen and (min-width: 768px)
{
    .carOtherFeatureWrap .ta-l
    {
        padding: 0;
    }
}

.carOtherFeatureWrap .ly-flex
{
    padding: 0 20px;
}
.carOtherFeatureWrap .ly-flex.p-00
{
    padding: 0;
}
@media screen and (min-width: 768px)
{
    .carOtherFeatureWrap .ly-flex
    {
        display: -ms-flexbox;
        display: flex; 

        text-align: left;
    }
    .carOtherFeatureWrap .ly-flex.reverse
    {
        -ms-flex-flow: row-reverse;
            flex-flow: row-reverse;
    }
    .carOtherFeatureWrap .ly-flex.reverse .txt
    {
        padding-right: 0;
        padding-left: 40px;
    }
    .carOtherFeatureWrap .ly-flex .txt
    {
        padding-right: 40px; 

        -ms-flex: 1;
            flex: 1;
    }
    .carOtherFeatureWrap .ly-flex h4
    {
        padding-bottom: 0;
    }
    .carOtherFeatureWrap .ly-flex .scrlImgArea
    {
        width: 450px;
        padding-top: 0;
    }
    .carOtherFeatureWrap .ly-flex .scrlImgArea img
    {
        max-width: 100%; 
        height: auto;
    }
}

#anchorBluetooth .carFeatureCategory
{
    padding-top: 50px;

    color: inherit; 
    background: none;
}

#anchorGeneral .carFeatureCategory
{
    margin-bottom: 0;
    padding-top: 50px;
    padding-bottom: 0; 

    color: inherit;
    background: #e0e0e0;
}

.scroll-animation
{
    position: relative;

    overflow: hidden; 

    width: 100%;
    max-width: 980px;
    margin: 0 auto;

    transition: all ease .3s;

    opacity: 0;
}
.scroll-animation.in-view
{
    opacity: 1;
}
.scroll-animation.in-view .animation-1
{
    animation: fade_in .3s ease-in 1.4s forwards,
    blink .7s ease-in-out 4 1.7s alternate;
}
.scroll-animation.in-view .animation-2
{
    animation: fade_in .3s ease-in forwards;
    animation-delay: 1.4s !important;
}
.scroll-animation.in-view .animation-3
{
    animation: fade_in .3s ease-in forwards;
    animation-delay: 3.4s !important;
}
.scroll-animation.in-view .animation-4
{
    animation: fade_in .3s ease-in forwards;
    animation-delay: 4.4s !important;
}
.scroll-animation.in-view .animation-5
{
    animation: fade_in .3s ease-in forwards;
    animation-delay: 5.4s !important;
}
.scroll-animation.in-view .animation-6
{
    animation: fade_in .3s ease-in forwards;
    animation-delay: 6.4s !important;
}
.scroll-animation.in-view .animation-7
{
    animation: fade_in .3s ease-in forwards;
    animation-delay: 7.4s !important;
}
.scroll-animation.in-view .animation-wifi
{
    animation: fade_in .3s ease-in forwards,
    blink .7s ease-in-out 4 alternate,
    fade_out .3s ease-in forwards;
    animation-delay: 1.4s ,1.7s,7.4s !important;
}
.scroll-animation.in-view .animation-8
{
    z-index: 0; 

    animation: showCable2 .5s ease-in forwards;
    animation-delay: 8.4s !important;
}
.scroll-animation.in-view .animation-9
{
    animation: fade_in .3s ease-in forwards;
    animation-delay: 9.9s !important;
}
.scroll-animation.in-view .animation-10
{
    animation: fade_in .3s ease-in forwards;
    animation-delay: 10.9s !important;
}
.scroll-animation.in-view .animation-11
{
    animation: fade_in .3s ease-in forwards;
    animation-delay: 11.9s !important;
}
.scroll-animation.in-view .animation-12
{
    animation: fade_in .3s ease-in forwards;
    animation-delay: 12.9s !important;
}
.scroll-animation.in-view .animation-13
{
    animation: fade_in .3s ease-in forwards;
    animation-delay: 13.9s !important;
}
.scroll-animation.in-view .animation--icon
{
    animation: showIcon_new 1.2s ease  normal forwards;
}
.scroll-animation img
{
    position: absolute;
    z-index: 1; 
    top: 0;
    left: 0;

    transition: all ease .3s;

    opacity: 0;
}
.scroll-animation img.base
{
    position: static; 

    opacity: 1;
}
.scroll-animation img.default
{
    opacity: 1;
}
.scroll-animation .icons
{
    position: absolute;
    top: 20px;
    left: 120px;

    width: 395px;
}
.scroll-animation .icons ul
{
    display: -ms-flexbox;
    display: flex;

    -ms-flex-pack: center;
    justify-content: center;
}
.scroll-animation .icons ul li
{
    margin: 0 5px;
}
.scroll-animation .icons img
{
    position: relative;

    opacity: 1;
}
@media only screen and (max-width: 768px)
{
    .scroll-animation
    {
        width: 100%;
    }
    .scroll-animation .icons
    {
        top: 20px;
        left: 17%;

        width: 30%;
    }
}

.videoWrapper
{
    max-width: 720px;
    margin: 0 auto; 
    padding: 0	20px;
}
.videoWrapper video
{
    max-width: 100%;
}

.videoLayout__block
{
    margin-bottom: 30px;
}

.videoLayout__ttl
{
    font-size: 16px;
    font-weight: bold;

    box-sizing: border-box; 
    max-width: 720px;
    margin: 0 auto 10px;
    padding-left: 10px;

    text-align: left;

    color: #fff;
    border-left: 5px solid #fff;
}

.timealignment
{
    box-sizing: border-box; 
    padding: 20px !important;

    background: #dcdfe8;
}
.timealignment .ly-flex
{
    margin-bottom: 10px; 
    padding: 0;

    -ms-flex-pack: justify;
    justify-content: space-between;
}
.timealignment .ly-flex > div
{
    font-size: 12px;

    width: 48%;

    color: #333;
}

.new.not-pile
{
    top: -20px !important;
}

.color-red
{
    text-decoration: underline; 

    color: #f00;
}

.app.ly-flex
{
    display: -ms-flexbox;
    display: flex;

    margin-top: 30px; 

    -ms-flex-pack: center;
    justify-content: center;
}

.app.ly-flex p
{
    margin: 0 0 0 10px;

    text-align: left;
}

.app.ly-flex p a
{
    text-decoration: underline;
}

.listArea .tableArea
{
    border-right: 0;
}
.listArea .tableArea table
{
    width: 100%;
}
.listArea .tableArea table th
{
    font-size: 140%; 
    font-weight: bold;

    background: #fafafa;
}
.listArea .tableArea table th,
.listArea .tableArea table td
{
    padding: 10px;

    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.listArea .tableArea table td:last-child
{
    width: 65%;
}