.load-wrap {
    position: relative;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.load-wrap.loaded .mask {
    background: #fff
}

.load-wrap.loaded .load .time-count {
    color: #de0219
}

.load-wrap.loaded .load .time-count #count-up #loaded {
    visibility: visible
}

.load-wrap.loaded .load .time-count #count-up #minutes,
.load-wrap.loaded .load .time-count #count-up #seconds {
    visibility: hidden
}

.load-wrap.loaded .load .time-count .txt-loaded {
    visibility: visible
}

.load-wrap.loaded .load .time-count .txt-loaded.st01 {
    display: inline-block
}

.load-wrap.loaded .load .moon-icon svg .cls-1 {
    fill: #de0219 !important
}

.load-wrap .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: #de0219;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    -webkit-transition: all 500ms ease-out;
    transition: all 500ms ease-out
}

.load-wrap .load {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 600px;
    text-align: center;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.load-wrap .load .time-count {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 10;
    width: 100%;
    font-size: 50px;
    font-size: 5rem;
    font-weight: normal;
    line-height: 1;
    color: #fff;
    -moz-transform: translate(-50%, -30%);
    -ms-transform: translate(-50%, -30%);
    -webkit-transform: translate(-50%, -30%);
    transform: translate(-50%, -30%)
}

.load-wrap .load .time-count h3 {
    font-weight: normal
}

.load-wrap .load .time-count #count-up {
    position: relative;
    display: inline-block;
    font-size: 150px;
    font-size: 15rem;
    font-weight: 400
}

.load-wrap .load .time-count #count-up #loaded {
    visibility: hidden
}

.load-wrap .load .time-count #count-up #minutes,
.load-wrap .load .time-count #count-up #seconds {
    position: absolute;
    top: 0;
    width: 50%
}

.load-wrap .load .time-count #count-up #minutes {
    left: 0
}

.load-wrap .load .time-count #count-up #seconds {
    right: 0
}

.load-wrap .load .time-count .txt-loaded {
    visibility: hidden
}

.load-wrap .load .time-count .txt-loaded.st01 {
    display: none
}

.load-wrap .load .moon-icon {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 200px;
    margin: 0 auto
}

.load-wrap .load .moon-icon svg {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.load-wrap .load .moon-icon svg .cls-1 {
    fill: #fff !important
}

.load-wrap .load .moon-icon .moon-load {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    width: 100%;
    height: 50%;
    background: #de0219
}

.brand-history {
    position: relative;
    overflow: hidden
}

.brand-history .sp {
    display: none
}

.brand-history header .site_id,
.brand-history header .catch-page {
    z-index: 10
}

.brand-history .slider-block .slider>li.box01 .box-inner:before,
.brand-history .slider-block .slider>li.box01 .box-inner:after {
    display: none
}

.brand-history .slider-block .slider>li.box01 .box-inner .inner-text-01 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 94%;
    min-width: 960px;
    text-align: center;
    line-height: 1;
    color: #de0219;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.brand-history .slider-block .slider>li.box01 .box-inner .inner-text-01 .ttl {
    margin-bottom: 30px;
    font-size: 50px;
    font-size: 5rem;
    font-weight: normal
}

.brand-history .slider-block .slider>li.box01 .box-inner .inner-text-01 .year {
    font-size: 50px;
    font-size: 5rem;
    font-weight: normal
}

.brand-history .slider-block .slider>li.box01 .box-inner .inner-text-01 .year img {
    display: inline-block;
    vertical-align: bottom
}

.brand-history .slider-block .slider>li.box01 .box-inner .inner-text-01 .year .big {
    display: inline-block;
    font-size: 150px;
    font-size: 15rem;
    font-weight: 400
}

.brand-history .slider-block .slider>li.box01 .box-inner .inner-text-01 .moon {
    margin-top: -50px
}

.brand-history .slider-block .slider>li.box01 .box-inner .inner-text-01 .moon img {
    display: inline-block
}

.brand-history .slider-block .slider>li.box02 .box-inner:before {
    display: none
}

.brand-history .slider-block .slider>li.box02 .inner-cont {
    top: -100%
}

.brand-history .slider-block .slider>li.box09 .box-inner {
    background: #fff
}

.brand-history .slider-block .slider>li.box09 .box-inner:before,
.brand-history .slider-block .slider>li.box09 .box-inner:after {
    display: none
}

.brand-history .slider-block .slider>li.box09 .box-inner .inner-cont {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #000;
	height:auto;
}

.brand-history .slider-block .slider>li.box09 .box-inner .inner-cont a {
    display: block
}

.brand-history .slider-block .slider>li.box09 .box-inner .inner-cont a:hover img {
    opacity: .7
}

.brand-history .slider-block .slider>li.box09 .box-inner .inner-cont .box-tl {
    margin-bottom: 30px;
    font-size: 28px;
    font-size: 2.8rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.6
}

.brand-history .slider-block .slider>li.box09 .box-inner .inner-cont .txt01 {
    margin-bottom: 20px;
    padding: 5px 0 0 8px;
    font-size: 18px;
    font-size: 1.8rem;
    border-top: 1px solid #6e6e6e;
    border-left: 1px solid #6e6e6e
}

.brand-history .slider-block .slider>li.box09 .box-inner .inner-cont .box01,
.brand-history .slider-block .slider>li.box09 .box-inner .inner-cont .box02 {
    width: 47.91667%
}

.brand-history .slider-block .slider>li.box09 .box-inner .inner-cont .box01 .txt02,
.brand-history .slider-block .slider>li.box09 .box-inner .inner-cont .box02 .txt02 {
    margin-bottom: 10px;
    text-align: center
}

.brand-history .slider-block .slider>li.box09 .box-inner .inner-cont .box01 {
    float: left
}

.brand-history .slider-block .slider>li.box09 .box-inner .inner-cont .box02 {
    float: right
}

.brand-history .slider-block .slider>li.box09 .box-inner .inner-cont .box03 {
    margin-top: 40px
}

.brand-history .year-count {
    position: relative;
    height: 100%;
    color: #fff;
    font-size: 150px;
    font-size: 15rem;
    line-height: 1;
    font-weight: bold;
    background: #de0219;
    overflow: hidden
}

.brand-history .year-count .num01 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -90px;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.brand-history .year-count .num01 img {
    height: 120px;
    width: auto
}

.brand-history .year-count .list-num {
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: 90px;
    opacity: 0;
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.brand-history .year-count .list-num li {
    margin-bottom: 20px
}

.brand-history .year-count .list-num li img {
    height: 120px;
    width: auto
}

.brand-history .year-count .list-num li:last-child {
    margin-top: 0;
    opacity: .4
}

.brand-history .year-count .list-num.complete {
    position: absolute;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    opacity: 1;
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.brand-history .year-count .list-num.complete li:last-child {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    margin-left: 80px;
    opacity: 1 !important;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.brand-history .year-num {
    margin-bottom: 20px;
    font-size: 60px;
    font-size: 6rem;
    font-weight: bold;
    line-height: 1;
    color: #de0219
}

.brand-history .btn-inner .btn-lightbox {
    position: relative;
    display: inline-block;
    padding: 7px 15px 6px 50px;
    min-width: 160px;
    font-weight: bold;
    color: #de0219;
    border: 2px solid #de0219;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

.brand-history .btn-inner .btn-lightbox:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 26px;
    height: 24px;
    background: url(../../img/brand_history/icon_btn.png) center no-repeat;
    background-size: contain;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	-moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
}

.brand-history .btn-inner .btn-lightbox:hover {
    color: #fff;
    background: #de0219;
	border: 2px solid #de0219;
}

.brand-history .btn-inner .btn-lightbox:hover:before {
    background: url(../../img/brand_history/icon_btn_on.png) center no-repeat;
    background-size: contain
}

.brand-history .box-inner {
    z-index: 0
}

.brand-history .box-inner:before,
.brand-history .box-inner:after {
    content: "";
    position: absolute;
    top: 50%;
    z-index: -1;
    width: 10%;
    max-width: 300px;
    padding-bottom: 1.0101%;
    background: url(../../img/brand_history/icon_repeat.png) no-repeat;
    background-size: contain;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.brand-history .box-inner:before {
    left: 65px
}

.brand-history .box-inner:after {
    right: 65px
}

.brand-history .inner-cont {
    position: absolute;
    top: 50%;
    left: 50%;
    /* width: 68.57143%; */
    width: 100%;
    max-width: 960px;
    height: 605px;
    background: #fff;
    -moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -moz-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease
}

.brand-history .inner-cont .text-box {
    width: 50%;
    float: left;
    padding: 3% 4.16667% 55px
}

.brand-history .inner-cont .text-box.box2011 {
    width: 56%
}

.brand-history .inner-cont .text-box.box2018 {
    width: 62%
}

.brand-history .inner-cont .text-box .ttl-box {
    font-size: 30px;
    font-size: 3rem;
    font-weight: normal;
    line-height: 1.3;
    margin-bottom: 20px
}

.brand-history .inner-cont .text-box .txt2011 {
    max-width: 240px
}

.brand-history .inner-cont .img-box {
    width: 50%;
    float: right
}

.brand-history .inner-cont .img-box.ps01 {
    position: absolute;
    bottom: 0;
    right: 50px;
    width: auto
}

.brand-history .inner-cont .img-box.ps02 {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 100%
}

.brand-history .inner-cont .img-box.ps02 img {
    width: 100%
}

.brand-history .inner-cont .btn-inner {
    position: absolute;
    bottom: 5.56667%;
    left: 4.16667%
}

.brand-history .light-box {
    display: none
}

.brand-history .light-box .mask {
    background: rgba(255, 255, 255, 0.8);
    height: 10000px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 11000
}

.brand-history .light-box .light-inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 70px 16.66667% 75px;
    background: #DE0219
}

.brand-history .light-box .light-cont {
    position: fixed;
    display: none;
    z-index: 11000;
    top: 50% !important;
    left: 50%;
    max-width: 600px;
    max-height: 90vh;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #DE0219
}

.brand-history .light-box .light-cont .btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #fff;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%
}

.brand-history .light-box .light-cont .btn-close span {
    position: relative;
    display: block;
    width: 35px;
    height: 35px;
    cursor: pointer
}

.brand-history .light-box .light-cont .btn-close span:before,
.brand-history .light-box .light-cont .btn-close span:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 25px;
    background: #DE0219;
    content: ""
}

.brand-history .light-box .light-cont .btn-close span:before {
    -moz-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg)
}

.brand-history .light-box .light-cont .btn-close span:after {
    -moz-transform: translate(-50%, -50%) rotate(-45deg);
    -ms-transform: translate(-50%, -50%) rotate(-45deg);
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg)
}

.brand-history .light-box .light-arc {
    font-size: 16px;
    line-height: 1.8;
    color: #fff
}

.brand-history .light-box .light-arc .text {
    margin-bottom: 20px
}

.brand-history .light-box .light-arc .img {
    text-align: center
}

@media only screen and (min-width: 1600px) {
    .brand-history .box-inner:before,
    .brand-history .box-inner:after {
        width: 16%
    }
}

@media only screen and (min-width: 1500px) {
    .brand-history .box-inner:before,
    .brand-history .box-inner:after {
        width: 13%
    }
}

@media only screen and (min-width: 1400px) {
    .brand-history .slider-block .slider>li.box01 .box-inner .inner-text-01 img {
        width: 740px !important
    }
}

@media only screen and (min-width: 1200px) {
    /* .brand-history .inner-cont {
        width: 70%
    } */
    .brand-history .slider-block .slider>li.box01 .box-inner .inner-text-01 img {
        width: 600px
    }
}

@media only screen and (min-width: 769px) {
    .container.brand-history  footer {
        bottom: 0px;
    }
    .brand-history .slider-block .bx-wrapper .bx-viewport {
        min-height: 790px;
    }
    .brand-history .sp-part {
        display: none
    }
    .brand-history .slider-block {
        position: relative;
        top: 0;
        min-width: 960px
    }
    .brand-history .slider-block .slider>li {
        position: relative;
        float: left;
        width: 100%
    }
    .brand-history .slider-block .slider>li .box-inner {
        position: relative;
        width: 100%;
        height: 100vh;
        min-height: 790px;
        background-color: #de0219;
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover
    }
    .brand-history .slider-block .slider>li .box-inner .bnr-img {
        position: absolute;
        top: 50%;
        left: 50%;
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }
    .brand-history .slider-block .slider>li.box01 .box-inner {
        background-image: url(../../img/brand_history/slider-img01.jpg)
    }
    .brand-history .slider-block .slider>li.box01 .box-inner .inner-text-01 img {
        display: inline-block
    }
    .brand-history .slider-block .slider>li.box02 .box-inner:after {
        z-index: 0;
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0
    }
    .brand-history .slider-block .slider>li.box02 .box-inner.ani:after {
        filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
        opacity: 1
    }
    .brand-history .bx-wrapper .bx-controls-direction a {
        position: absolute;
        top: 50%;
        z-index: 9999;
        width: 65px;
        height: 48px;
        margin-top: -24px;
        text-indent: -9999px;
        outline: 0
    }
    .brand-history .bx-wrapper .bx-controls-direction a.disabled {
        display: none
    }
    .brand-history .bx-wrapper .bx-next:hover,
    .brand-history .bx-wrapper .bx-prev:hover {
        filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
        opacity: .7
    }
    .brand-history .bx-wrapper .bx-next {
        right: 35px;
        background: url(../../img/brand_history/ic_arr_sp.png);
        background-size: contain
    }
    .brand-history .bx-wrapper .bx-prev {
        left: 30px;
        background: url(../../img/brand_history/btn-prev-gray.png) no-repeat left center;
        background-size: contain
    }
    .brand-history .bx-wrapper .bx-pager {
        position: absolute;
        bottom: 50px;
        left: 0;
        z-index: 100;
        width: 100%;
        font-size: 0;
        padding-top: 0px;
    }
    .brand-history .bx-wrapper .bx-pager.bx-default-pager a {
        float: left;
        display: block;
        width: 11.11111%;
        height: 4px;
        margin: 0;
        background: #e5e5e5;
        text-indent: -9999px;
        outline: 0
    }
    .brand-history .bx-wrapper .bx-pager.bx-default-pager a:hover,
    .brand-history .bx-wrapper .bx-pager.bx-default-pager a.active {
        background: #000
    }
    .brand-history .bx-wrapper .bx-pager .bx-pager-item {
        display: block
    }
    .brand-history .sWrap .bx-wrapper .bx-controls-direction a {
        width: 22px;
        height: 48px;
        margin-top: -24px
    }
    .brand-history .sWrap .bx-wrapper .bx-controls-direction a.bx-prev {
        left: 35px;
        background: url(../../img/brand_history/ic_arr_l.png) no-repeat;
        background-size: contain
    }
    .brand-history .sWrap .bx-wrapper .bx-controls-direction a.bx-next {
        right: 35px;
        background: url(../../img/brand_history/ic_arr_r.png) no-repeat;
        background-size: contain
    }
    .brand-history .sWrap .bx-wrapper .bx-controls-direction a.bx-next:hover {
        background-position: 0 0
    }
    .brand-history .light-box .light-inner {
        min-width: 600px
    }
}

@media only screen and (max-width: 1100px) {
    .brand-history .inner-cont {
        width: 100%
    }
    .brand-history .inner-cont .text-box .year-num {
        margin-bottom: 10px;
        font-size: 56px;
        font-size: 5.6rem
    }
    .brand-history .inner-cont .text-box .ttl-box {
        margin-bottom: 10px;
        font-size: 26px;
        font-size: 2.6rem
    }
}

@media only screen and (max-width: 980px) {
    .load-wrap .load .time-count {
        font-size: 40px;
        font-size: 4rem
    }
    .load-wrap .load .time-count #count-up {
        font-size: 130px;
        font-size: 13rem
    }
    .brand-history .inner-cont .text-box .year-num {
        font-size: 52px;
        font-size: 5.2rem
    }
    .brand-history .inner-cont .text-box .ttl-box {
        font-size: 24px;
        font-size: 2.4rem
    }
}

@media only screen and (min-width: 769px) and (max-width: 1100px) {
    .brand-history .box-inner:before,
    .brand-history .box-inner:after {
        display: none
    }
}

@media only screen and (min-width: 769px) and (max-width: 960px) {
    .brand-history {
        width: 960px
    }
}

@media only screen and (max-width: 768px) {
    .load-wrap.loaded .load .time-count .txt-loaded.st01 {
        width: 13.2%;
        margin-left: -2%
    }
    .load-wrap .load {
        width: 80%;
        max-width: 500px
    }
    .load-wrap .load .time-count {
        margin-top: -5%;
        font-size: 30px;
        font-size: 3rem;
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    .load-wrap .load .time-count .txt-loaded {
        width: 53.33333%
    }
    .load-wrap .load .time-count #count-up {
        width: 24.66667%;
        font-size: 100px;
        font-size: 10rem
    }
    .load-wrap .load .moon-icon {
        height: 170px
    }
    .brand-history .sp {
        display: block
    }
    .brand-history .pc {
        display: none
    }
    .brand-history .slider-block {
        display: none
    }
    .brand-history .year-num {
        margin-bottom: 0;
        color: #fff
    }
    .brand-history .light-box .light-cont {
        position: absolute;
        width: 94%;
        max-width: 640px
    }
    .brand-history .block-mv img {
        width: 100%
    }
    .brand-history .cont {
        position: relative;
        padding: 12.5% 3%;
        background: #DE0219
    }
    .brand-history .cont:after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: 1;
        width: 3.125%;
        padding-bottom: 21.875%;
        background: url(../../img/brand_history/icon_repeat_sp.png) repeat-y;
        background-size: contain;
        -moz-transform: translate(-50%, -30%);
        -ms-transform: translate(-50%, -30%);
        -webkit-transform: translate(-50%, -30%);
        transform: translate(-50%, -30%)
    }
    .brand-history .cont.cont07 {
        padding-bottom: 10.66667%
    }
    .brand-history .cont.cont07:after {
        display: none
    }
    .brand-history .cont.cont08 {
        padding-top: 0;
        margin-top: 5%;
        background: #fff
    }
    .brand-history .cont.cont08 .wrap {
        padding-top: 5%;
        border-top: 2px solid #d4d4d4
    }
    .brand-history .cont.cont08:after {
        display: none
    }
    .brand-history .cont.cont08 .box-tl {
        margin-bottom: .8em;
        font-size: 22px;
        font-size: 2.2rem;
        text-align: center;
        font-weight: 600;
        line-height: 1.6
    }
    .brand-history .cont.cont08 .box01,
    .brand-history .cont.cont08 .box02 {
        margin-top: 20px
    }
    .brand-history .cont.cont08 .box01 .txt02,
    .brand-history .cont.cont08 .box02 .txt02 {
        margin-bottom: 10px
    }
    .brand-history .cont.cont08 .box01 .image img,
    .brand-history .cont.cont08 .box02 .image img {
        width: 100%
    }
    .brand-history .cont.cont08 .box03 {
        margin-top: 40px
    }
    .brand-history .cont .wrap {
        max-width: 560px;
        margin: 0 auto
    }
    .brand-history .cont .box-inner {
        padding: 6% 0;
        background: #fff;
        -moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75);
        -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.75)
    }
    .brand-history .cont .box-inner img {
        margin-bottom: 4%;
        width: 100%
    }
    .brand-history .cont .box-inner .box-text {
        padding: 0 5%;
        margin-bottom: 4%
    }
    .brand-history .cont .box-inner .box-text .ttl-box {
        font-size: 24px;
        font-size: 2.4rem
    }
    .brand-history .cont .box-inner .btn-inner {
        text-align: center
    }
}

@media only screen and (max-width: 640px) {
    .brand-history .cont:after {
        -moz-transform: translate(-50%, -20%);
        -ms-transform: translate(-50%, -20%);
        -webkit-transform: translate(-50%, -20%);
        transform: translate(-50%, -20%)
    }
}

@media only screen and (max-width: 480px) {
    .load-wrap .load .time-count {
        font-size: 18px;
        font-size: 1.8rem
    }
    .load-wrap .load .time-count #count-up {
        font-size: 80px;
        font-size: 8rem
    }
    .load-wrap .load .moon-icon {
        height: 130px
    }
    .brand-history .year-num {
        margin-bottom: 5px;
        font-size: 45px;
        font-size: 4.5rem
    }
    .brand-history .light-box .light-inner {
        padding: 60px 9% 40px
    }
    .brand-history .light-box .light-inner .btn-close {
        top: 10px;
        right: 10px
    }
    .brand-history .cont {
        padding: 7% 3%
    }
    .brand-history .cont:after {
        -moz-transform: translate(-50%, -23%);
        -ms-transform: translate(-50%, -23%);
        -webkit-transform: translate(-50%, -23%);
        transform: translate(-50%, -23%)
    }
    .brand-history .cont .box-inner .box-text .ttl-box {
        font-size: 20px;
        font-size: 2rem
    }
    .brand-history .cont.cont08 {
        padding-top: 0;
        margin-top: 40px;
        background: #fff
    }
    .brand-history .cont.cont08:after {
        display: none
    }
    .brand-history .cont.cont08 .box-tl {
        font-size: 20px;
        font-size: 2rem
    }
    .brand-history .cont.cont08 .txt01 {
        font-size: 15px;
        font-size: 1.5rem
    }
    .brand-history .cont.cont08 .box03 {
        margin-top: 30px
    }
}

@media only screen and (max-width: 414px) {
    .brand-history .cont:after {
        -moz-transform: translate(-50%, -19%);
        -ms-transform: translate(-50%, -19%);
        -webkit-transform: translate(-50%, -19%);
        transform: translate(-50%, -19%)
    }
}

@media only screen and (max-width: 375px) {
    .load-wrap .load .time-count {
        margin-top: 0
    }
}

@media only screen and (max-width: 360px) {
    .brand-history .cont:after {
        -moz-transform: translate(-50%, -14%);
        -ms-transform: translate(-50%, -14%);
        -webkit-transform: translate(-50%, -14%);
        transform: translate(-50%, -14%)
    }
}