@charset "utf-8";

a, p, strong, span, em{font-family: "Noto Sans KR";font-weight:300;}

header{position:fixed;height:100%;z-index:100;background:#7b6c52;}
header:before{
    opacity:0; content:""; display:block; position:fixed; left:0; top:0; z-index:-1; width:0; height:0; background-color:rgba(0,0,0,0.5);
    transition:opacity 0.3s linear 0.3s;
    -webkit-transition:opacity 0.3s linear 0.3s;
}
header.blind:before{
    opacity:1; z-index:10; width:100%; height:100%;
    transition:opacity 0.3s linear;
    -webkit-transition:opacity 0.3s linear;
}

header .header_layout{position:relative; z-index:100; height:100%;width:160px;}
header .header_layout h1{height:160px;background:#88795d;}
header .header_layout h1 a{display:block;color:#fff;background: url(../img/logo.png)center top 35px no-repeat;text-align: center;padding: 83px 0 30px;line-height:1.4;}
header .header_layout h1 a strong{font-weight:500;display:block;}
header .mgnb{display:none; position:absolute;right:20px;top:0;}
header .mgnb a{display:block;padding:34px 20px;font-size:0;line-height:0;}
header .mgnb a span{display:inline-block;position:relative;width:20px;height:2px;background:#fff;transition:0.3s;-webkit-transition:0.3s;}
header .mgnb a span:before, header .mgnb a span:after{display:inline-block;position:absolute;right:0;width:25px;height:2px;background:#fff;content: '';transition:1s;-webkit-transition:1s;}
header .mgnb a span:before{top:-10px;}
header .mgnb a span:after{top:10px;}
header .mgnb a.on{}
header .mgnb a.on span{background:none;}
header .mgnb a.on span:before{transform: rotate(-45deg);transform-origin: 85% 0;width: 30px;}
header .mgnb a.on span:after{transform: rotate(45deg);transform-origin: 105% 0;width: 30px;}


header .header_layout .title_wrap strong{display:block;margin: 0 auto;padding: 30px 0;height: 220px;width:92px;background: url(../img/title_logo.png)center no-repeat;font-size:0;}
header .header_layout ul{text-align:center;}
header .header_layout ul li{position:relative;padding:10px 0;}
header .header_layout ul li:first-child:before{position:absolute;left:50%;bottom:-15px;display:inline-block;background:#fff;/* border-radius:10px */;width:1px;height:30px;content:'';}
header .header_layout ul li a{display:block;padding:20px 0;color:#fff;}

#body_layout{overflow:hidden; position:relative;min-height:700px; z-index:0; height:100%;padding-left:160px;}

footer{position:absolute;left:25px;bottom:25px;z-index:100;}
footer p{text-align:center;color:#c2bbb3;font-size:10px;line-height:1.4;}


/*music*/
.music{display:none !important; position:absolute;right:50px;top:40px;z-index:10000;}
.music a{display:block;background: url(../img/music_on.png) center no-repeat;width: 100px;height:80px;color:#fff;padding-top:85px;text-align:center;}
.music a:after {content:attr(data-title);}
.music a:before {content: attr(data-parent);}

/*intro*/
.intro{position:fixed;width:calc(100% - 160px);height:100%;background:url(../img/intro_bg.jpg)center no-repeat;background-size:cover;color:#fff;z-index:100;text-align:center;}
.intro .content{position:absolute;left:0;top:250px;width:100%;}
.intro .content .tit_logo{position:relative;}
.intro .content .tit_logo img{padding:40px 0;}
.intro .content .tit_logo strong{position:absolute;top:0;display:inline-block;width:100%;font-size:10em;font-weight:600;line-height:1;}
.intro .content .tit_logo strong.past{right:270px;opacity:.5;}
.intro .content .tit_logo strong.now{left:270px;opacity:.8;}
.intro .content p{margin:50px 0 80px;font-size:1.2em;}
.intro .content a{display: inline-block;width: 186px;height:60px;padding:17px 58px;background:url(../img/skip_bg.png)no-repeat;text-align:center;color: #fff;font-size: 1.2em;line-height: 1.2em;}
/* .intro .img_txt span{background:url(../img/intro_icon.png)left center no-repeat;padding:3px 0 3px 28px;} */
.intro .img_txt span.left{position:absolute;left:50px;bottom:30px;}
.intro .img_txt span.right{position:absolute;right:50px;bottom:30px;}

/*slogan*/
.slogan{position:absolute; left:160px; top:0; width:calc(100% - 160px);height:100%;background:url(../img/slogan_bg.jpg);background-size:cover;text-align:center;color:#fff;}
.slogan .tit_wrap{padding:150px 0 0;}
.slogan .tit_wrap span{display:inline-block;font-size:3.5em;vertical-align: middle;font-family:'Jeju Myeongjo', serif;letter-spacing:-3px;}
.slogan .tit_wrap .tit_01 span{opacity:0;}

.slogan .tit_wrap span.txt01{}
.slogan .tit_wrap span.txt02{width:152px;height:80px;background:url(../img/slogan_txt01.png);font-size:0;}
.slogan .tit_wrap span.txt03{}
.slogan .tit_wrap span.txt04{}
.slogan .tit_wrap span.txt05{width:185px;height:80px;background:url(../img/slogan_txt02.png);font-size:0;}
.slogan .tit_wrap span.txt06{}
.slogan .tit_wrap .tit_03{margin:20px 0 30px;;}
.slogan .tit_wrap .tit_03 span{font-size:1em;letter-spacing:3px;font-family: "Noto Sans KR";}
.slogan .tit_wrap .tit_03 em{color:#f1cc5c;}
.slogan strong{display:inline-block; position:relative;padding-top:120px;font-size:8.5em;font-weight:600; font-family:'Jeju Myeongjo', serif;letter-spacing:-8px;line-height:1;} 
.slogan strong:before{display:inline-block;position:absolute;left:50%;top:0;width:1px;height:100px;background:#fff;content: '';}
.slogan .img_caption{position:absolute;right:50px;bottom:30px;}
.slogan .img_caption span{background:url(../img/intro_icon.png)left center no-repeat;padding:3px 0 3px 30px;}
.slogan .scroll_down{position: absolute;bottom: 70px;left: calc(50% - 52px);} 
.slogan .scroll_down:before, .slogan .scroll_down:after{opacity:0;display:inline-block;position:absolute;left:calc(50% - 9px);width:19px;height:10px;background:url(../img/arrow_down.png) no-repeat;content:'';
    animation:quick_box_top infinite 2s linear;
    -webkit-animation:quick_box_top infinite 2s linear;
}
.slogan .scroll_down:after{top:85px;
animation-delay:1s; -webkit-animation-delay:1.5s;}
.slogan .scroll_down span{display:block;margin:10px 0;}

#body_layout.step_2 .slogan .tit_wrap .tit_01 span{
    animation:opacity01 1 2s alternate forwards;
    -webkit-animation:opacity01 1 2s alternate forwards;
}
#body_layout.step_2 .slogan .tit_wrap span.txt02{animation-delay:0.5s;}
#body_layout.step_2 .slogan .tit_wrap span.txt03{animation-delay:1s;}
#body_layout.step_2 .slogan .tit_wrap span.txt04{animation-delay:1.5s;}
#body_layout.step_2 .slogan .tit_wrap span.txt05{animation-delay:2s;}
#body_layout.step_2 .slogan .tit_wrap span.txt06{animation-delay:2.5s;}

@keyframes quick_box_top{
    0%{opacity:0; top:0px;}
    50%{opacity:0; top:80px;}
    90%{opacity:1; top:100px;}
    100%{opacity:0; top:103px;}
}
@-webkit-keyframes quick_box_top{
    0%{opacity:0; top:0px;}
    50%{opacity:0; top:80px;}
    90%{opacity:1; top:100px;}
    100%{opacity:0; top:103px;}
}
@keyframes opacity01{
    0%{
        opacity:0;
        transform:translate(50px,0);
    }
    100%{
        opacity:1;
        transform:translate(0,0);
    }
}
@-webkit-keyframes opacity01{
    0%{
        opacity:0;
        transform:translate(50px,0);
    }
    100%{
        opacity:1;
        transform:translate(0,0);
    }
}

@keyframes hand-move{
    0%,100%{transform:translateX(-7px);}
    50%{transform:translateX(7px);}
}


/*secene*/
.secene{position:relative;right:0; top:0; z-index:10; width:100%; height:100%;}
.secene .group{position:absolute;right:80px; top:40%; z-index:10; width:auto; height:100%;font-size:0;}
.secene .group .item{position:relative; text-align:right;}
.secene .group .item:before{
    content:attr(data-title); display:block; position:absolute; right:calc(100% + 20px); top:calc(50% - 33px); width:66px; height:66px; line-height:66px; text-align:center; font-size:14px; color:#fff; background-color:#005bab;
    border-radius:50%;
    -webkit-border-radius:50%;
    transform:scale(0);
    -webkit-transform:scale(0);
    transition:transform 0.3s ease;
    -webkit-transition:transform 0.3s ease;
}
.secene:not([data-cnt]) .group .item:nth-child(1):before,
.secene[data-cnt="1"] .group .item:nth-child(1):before,
.secene[data-cnt="2"] .group .item:nth-child(2):before,
.secene[data-cnt="3"] .group .item:nth-child(3):before,
.secene[data-cnt="4"] .group .item:nth-child(4):before,
.secene[data-cnt="5"] .group .item:nth-child(5):before{
    transform:scale(1);
    -webkit-transform:scale(1);
}
.secene .group .item a{
    overflow:hidden; display:inline-block; margin:10px 0;width:18px;height:3px; text-align:left; text-indent:-1000px; background-color:#fff;
    transition:all 0.3s linear;
    -webkit-transition:all 0.3s linear;
}
.secene .group .item a{font-size:0;}
.secene:not([data-cnt]) .group .item:nth-child(1) a,
.secene[data-cnt="1"] .group .item:nth-child(1) a,
.secene[data-cnt="2"] .group .item:nth-child(2) a,
.secene[data-cnt="3"] .group .item:nth-child(3) a,
.secene[data-cnt="4"] .group .item:nth-child(4) a,
.secene[data-cnt="5"] .group .item:nth-child(5) a{width:40px;height:6px;}
 
.secene .scene-layer{overflow: hidden;display:block; position:absolute; left:0; top:100%; width:100%;height:100%; background-repeat:no-repeat; background-position:center center;background-size:cover;transition:top 0.3s linear;-webkit-transition:top 0.3s linear;}
.secene .scene-layer:before{display:inline-block;position:absolute;left:0;top:0;width:100%;height:100%;content:'';background-size:cover;}
.secene .scene-layer#sceneLayer1:before{background-image:url(../img/secene01_bg.jpg);animation:bg_scale 1 7s alternate forwards;}
.secene .scene-layer#sceneLayer2:before{background-image:url(../img/secene02_bg.jpg);}
.secene .scene-layer#sceneLayer3:before{background-image:url(../img/secene03_bg.jpg);}
.secene .scene-layer#sceneLayer4:before{background-image:url(../img/secene04_bg.jpg);}
.secene .scene-layer#sceneLayer5:before{background-image:url(../img/secene05_bg.jpg);}
.secene .scene-layer .txt_wrap{position:absolute;left:200px;bottom:100px;color:#fff;}
.secene .scene-layer .txt_wrap .tit_wrap strong{position:relative;font-size:8em;font-family: 'Jeju Myeongjo', serif;letter-spacing:-18px;line-height:1.2;}
.secene .scene-layer#sceneLayer5 .txt_wrap .tit_wrap strong{font-size:5em;letter-spacing:-9px;line-height:1.2;}
.secene .scene-layer .txt_wrap .tit_wrap strong:before{display:inline-block;position:absolute;left: -65px;top:0;width: 56px;height: 40px;content:'';background-position:left 0 top 0;background-repeat:no-repeat;}
.secene .scene-layer#sceneLayer1 .txt_wrap .tit_wrap strong:before{background:url(../img/count01.png);}
.secene .scene-layer#sceneLayer2 .txt_wrap .tit_wrap strong:before{background:url(../img/count02.png);}
.secene .scene-layer#sceneLayer3 .txt_wrap .tit_wrap strong:before{background:url(../img/count03.png);}
.secene .scene-layer#sceneLayer4 .txt_wrap .tit_wrap strong:before{background:url(../img/count04.png);}
.secene .scene-layer#sceneLayer5 .txt_wrap .tit_wrap strong:before{background:url(../img/count05.png);}
.secene .scene-layer .txt_wrap .tit_wrap span{position:relative;font-size:3em;font-family: 'Jeju Myeongjo', serif;letter-spacing:-4px;padding-left: 30px;margin-left: 30px;}
.secene .scene-layer .txt_wrap .tit_wrap span:before{display:inline-block;position:absolute;left:0;top:6px;width:1px;height:35px;background:#8a8a8a;content:'';}
.secene .scene-layer .txt_wrap .content_wrap{width:350px;}
.secene .scene-layer .txt_wrap .content_wrap strong{display:inline-block;margin-bottom:10px;font-size: 2em;font-weight: 500;letter-spacing: -3px;line-height:1.3;}
.secene .scene-layer .txt_wrap .content_wrap p{font-size:1.2em;}
.secene .scene-layer .img_caption{position:absolute;right:50px;bottom:30px;color:#fff;}
.secene .scene-layer .img_caption span{background:url(../img/intro_icon.png)left center no-repeat;padding:3px 0 3px 30px;}



.secene[data-cnt="1"] .scene-layer#sceneLayer1{top:0;}
.secene[data-cnt="1"] .scene-layer#sceneLayer2, .secene[data-cnt="1"] .scene-layer#sceneLayer3, .secene[data-cnt="1"] .scene-layer#sceneLayer4, .secene[data-cnt="1"] .scene-layer#sceneLayer5{top:100%;}

.secene[data-cnt="2"] .scene-layer#sceneLayer1{top:-100%;}
.secene[data-cnt="2"] .scene-layer#sceneLayer2{top:0;}
.secene[data-cnt="2"] .scene-layer#sceneLayer3, .secene[data-cnt="2"] .scene-layer#sceneLayer4, .secene[data-cnt="2"] .scene-layer#sceneLayer5{top:100%;}

.secene[data-cnt="3"] .scene-layer#sceneLayer1, .secene[data-cnt="3"] .scene-layer#sceneLayer2{top:-100%;}
.secene[data-cnt="3"] .scene-layer#sceneLayer3{top:0;}
.secene[data-cnt="3"] .scene-layer#sceneLayer4, .secene[data-cnt="3"] .scene-layer#sceneLayer5{top:100%;}

.secene[data-cnt="4"] .scene-layer#sceneLayer1, .secene[data-cnt="4"] .scene-layer#sceneLayer2, .secene[data-cnt="4"] .scene-layer#sceneLayer3{top:-100%;}
.secene[data-cnt="4"] .scene-layer#sceneLayer4{top:0;}
.secene[data-cnt="4"] .scene-layer#sceneLayer5{top:100%;}

.secene[data-cnt="5"] .scene-layer#sceneLayer1, .secene[data-cnt="5"] .scene-layer#sceneLayer2, .secene[data-cnt="5"] .scene-layer#sceneLayer3, .secene[data-cnt="5"] .scene-layer#sceneLayer4{top:-100%;}
.secene[data-cnt="5"] .scene-layer#sceneLayer5{top:0;}




.secene .scene-layer:before{
    transform:scale(1);
    -webkit-transform:scale(1);
}
.secene[data-cnt="1"] .scene-layer#sceneLayer1:before,
.secene[data-cnt="2"] .scene-layer#sceneLayer2:before,
.secene[data-cnt="3"] .scene-layer#sceneLayer3:before,
.secene[data-cnt="4"] .scene-layer#sceneLayer4:before,
.secene[data-cnt="5"] .scene-layer#sceneLayer5:before{
    transform:scale(1.1);
    -webkit-transform:scale(1.1);
    transition:transform 7s linear;
    -webkit-transition:transform 7s linear;
}


.timeline{display:block; position:absolute; top:0;width:calc(100% - 160px);height:100%;background:url(../img/timeline_bg.jpg) center no-repeat;background-size:cover;}
.timeline .tit_wrap{display:block; position:absolute; left:0; top:10%; width:100%; text-align:center;color:#fff;}
.timeline .tit_wrap h2{font-size:2.5em;font-weight: 600;background: url(../img/timeline_logo.png) left center no-repeat;display: inline-block;padding-left: 55px;}
.timeline .tit_wrap p{font-size:1.2em;}
.timeline .content_wrap{width:100%;height:100%;}
.timeline .content_wrap .year_btn{position:absolute;left:0;bottom:18%; z-index:30; width:100%;}
.timeline .content_wrap .year_btn:before{display:inline-block;position: absolute;left:0;top:0;width:100%;height:1px;background:rgba(255,255,255,0.2);content: '';}
.timeline .content_wrap .year_btn ul{position:absolute; left:0; top:0; width:100%;padding:0 7% 0 0;}
.timeline .content_wrap .year_btn li{float:left;width:16%;text-align:center;}
.timeline .content_wrap .year_btn li a{display:block;position:relative;padding:20px 0 0 ;color:#fff;transition:1s;}
.timeline .content_wrap .year_btn li a:before{display:inline-block;position:absolute;left:48%;top:-3px;width:8px;height:8px;background:#fff;border-radius:10px;content:'';transition:1s;}
.timeline .content_wrap .year_btn li a:after{
    display:inline-block;position:absolute;left:calc(48% - 6px);top:-9px;width:16px;height:16px;border:2px solid rgba(255,255,255,0.5);border-radius: 14px; content:'';
    transform:scale(0);
    -webkit-transform:scale(0);
    transition:transform 0.3s ease;
    -webkit-transition:transform 0.3s ease;
}
.timeline .content_wrap .year_btn li a.on, .timeline .content_wrap .year_btn li a:hover, .timeline .content_wrap .year_btn li a:focus{color:#f1cc5c;}
.timeline .content_wrap .year_btn li a.on:before, .timeline .content_wrap .year_btn li a:hover:before, .timeline .content_wrap .year_btn li a:focus:before{background:#f1cc5c;}
.timeline .content_wrap .year_btn li a.on:after, .timeline .content_wrap .year_btn li a:hover:after, .timeline .content_wrap .year_btn li a:focus:after{
    transform:scale(1);
    -webkit-transform:scale(1);
}
.timeline .content_wrap .year_btn_next{display:none; position:absolute;right:3%;bottom:10px;z-index:100;}
.timeline .content_wrap .year_btn_next a{display:block;width:11px;height:11px;padding:16px;font-size:0;background:url(../img/year_btn_next.png) center no-repeat;}
.timeline .content_wrap .box_item{position:absolute; left:0; top:0; z-index:0; width:100%; height:100%;}
.timeline .content_wrap .box_item ul{overflow-x:auto; display:table; table-layout:fixed; position:absolute;left:0;top:0; width:100%; height:100%;}
.timeline .content_wrap .box_item ul li{display:table-cell;color:#fff;font-size:1.3em;width: 380px; vertical-align:middle; box-sizing:content-box;}
.timeline .content_wrap .box_item ul li:not(:nth-child(1)){padding-left:2em;}
.timeline .content_wrap .box_item ul li:nth-child(4n+1) .lay{margin-top:0;}
.timeline .content_wrap .box_item ul li:nth-child(4n+2) .lay,
.timeline .content_wrap .box_item ul li:nth-child(4n+4) .lay{margin-top:-3em;}
.timeline .content_wrap .box_item ul li:nth-child(4n+3) .lay{margin-top:-6em;}
.timeline .content_wrap .box_item ul li img{display:block;max-width:100%;}
.timeline .content_wrap .box_item ul li span{display:inline-block;}
.timeline .content_wrap .box_item ul li strong{display:inline-block;padding-left:3px;font-weight:400;font-size:0.8em}
.timeline .content_wrap .box_item ul li .txtbox{padding-left:3px;font-weight:400;font-size:0.8em;height:80px;overflow-y:scroll;}

.timeline .control_btn{position:absolute;right:20%;bottom:20%;}
.timeline .control_btn .paging{display:inline-block;margin-right:20px;vertical-align:middle;color:#fff;}
.timeline .control_btn .paging .total span{display:inline-block;position:relative;}
.timeline .control_btn .paging .total span.current{padding-right:20px;}
.timeline .control_btn .paging .total span.bar_wrap{display:inline-block;position:relative;height:3px;width:45px;background:#ccc;vertical-align:middle;}
.timeline .control_btn .paging .total span.bar_wrap span.bar{display:inline-block;position:absolute;left: 0;top:0; height:3px;width:10%;background:#0457b3;}
.timeline .control_btn .paging .total span.count{padding-left:20px;opacity:.6;}
.timeline .control_btn button{display:inline-block;position:relative;height:40px;width:40px;border:1px solid #fff;transition:0.3s;-webkit-transition:trsnsition:0.3s;}
.timeline .control_btn button:before{position: absolute;left: calc(50% - 3px);top: calc(50% - 7px);width: 10px;height: 10px;border-width: 2px 2px 0 0;border-style:solid;border-color: #fff;transform: rotate(225deg);content:'';}
.timeline .control_btn button:hover, .timeline .control_btn button:focus{background:#0457b3;border-color:#0457b3;}
.timeline .control_btn button.next:before{left: calc(50% - 8px);transform: rotate(45deg);}

.timeline .content_wrap .scroll{position:absolute;left:calc(50% - 147px);bottom:3%;text-align:center;z-index:100;}
.timeline .content_wrap .scroll a{display:block; padding:15px 40px;background:rgba(0,0,0,0.5);border-radius:40px; color:#fff;}
.timeline .content_wrap .scroll a img{vertical-align:middle;margin:0 10px;animation: hand-move 3s linear infinite;}
.timeline .content_wrap .box_item:before{display:none;position:absolute;left:0;top:10px;width:1px;height:100%;background:#fff;content:'';}
.timeline .content_wrap .box_item:after{display:none;position:absolute;left:-5px;top:10px;width: 11px;height: 11px;border-radius: 11px;background:#fff;content:'';}
.timeline .content_wrap .box_item ul:after {display:none;position:absolute;left:0;top:0; content:attr(data-title);color:#fff;font-size:16px;}



/* 효과 */
#body_layout>.secene,
#body_layout>.intro,
#body_layout>.slogan,
#body_layout>.timeline{
    transition:top 0.3s linear;
    -webkit-transition:top 0.3s linear;
}

/* step별 적용 */
#body_layout>.intro,
#body_layout.step_1>.intro{top:0; z-index:1000;}
#body_layout>.secene,
#body_layout.step_1>.secene,
#body_layout>.timeline,
#body_layout.step_1>.timeline,
#body_layout.step_1>.slogan{top:100%; z-index:10;}

#body_layout.step_2>.intro{top:-100%; z-index:10;}
#body_layout.step_2>.slogan{top:0; z-index:1000;}
#body_layout.step_2>.secene{top:100%; z-index:10;}
#body_layout.step_2>.timeline{top:100%; z-index:10;}

#body_layout.step_3>.intro{top:-100%; z-index:10;}
#body_layout.step_3>.slogan{top:-100%; z-index:10;}
#body_layout.step_3>.secene{top:0; z-index:1000;}
#body_layout.step_3>.timeline{top:100%; z-index:10;}

#body_layout.step_4>.intro{top:-100%; z-index:10;}
#body_layout.step_4>.slogan{top:-100%; z-index:10;}
#body_layout.step_4>.secene{top:-100%; z-index:10;}
#body_layout.step_4>.timeline{top:0; z-index:1000;}

@media screen and (max-width:1279px){
    .wrap{font-size:13px;}
    .intro .content .tit_logo strong{font-size:7em;}
    .intro .content .tit_logo strong.past{right:190px;}
    .intro .content .tit_logo strong.now{left:190px;}
    .intro .content .tit_logo img{padding:20px 0 0;width:70px;}
    
    .secene .group{right:40px;top:30%;}
    .secene .scene-layer .txt_wrap{left:110px;}
    .secene .scene-layer .img_caption{right:30px;}
    
}
@media screen and (min-width:767px){
    header .header_layout .title_wrap{display:block !important;}
    .timeline .content_wrap .year_btn li{position:absolute;}
    .timeline .content_wrap .year_btn li[data-page="1"]{left:0;}
    .timeline .content_wrap .year_btn li[data-page="2"]{left:16%;}
    .timeline .content_wrap .year_btn li[data-page="3"]{left:32%;}
    .timeline .content_wrap .year_btn li[data-page="4"]{left:48%;}
    .timeline .content_wrap .year_btn li[data-page="5"]{left:64%;}
    .timeline .content_wrap .year_btn li[data-page="6"]{left:80%;}
    .timeline .content_wrap .year_btn li[data-page="7"]{left:96%;}
    .timeline .content_wrap .box_item ul li .lay{position:relative;}
    .timeline .content_wrap .box_item ul li span{position:absolute;left:0;top:calc(100% + 0.5em);}
    .timeline .content_wrap .box_item ul li strong{position:absolute;left:0;top:calc(100% + 2.5em);}
	 .timeline .content_wrap .box_item ul li .txtbox{position:absolute;left:0;top:calc(100% + 2.5em);}
}
@media screen and (max-width:767px){
    .wrap{padding:0 40px;font-size:11px;}
    header{width:100%;height:70px;}
    header:before {display:inline-block;}
    header .header_layout{width:100%;background:#88795d;}
    header .header_layout h1{display:inline-block;height: 100%;margin-left:40px;}
    header .header_layout h1 a{display:inline-block;background-position:0 22px;padding:25px 0 25px 35px;background-size:27px;}
    header .header_layout h1 a strong{display:inline-block;padding-left:5px;}
    header .mgnb{display:block;}
    header .header_layout .title_wrap.on{display:block;}
    header .header_layout .title_wrap{display:none; position:absolute;right:0;top:70px;width:100%;padding:20px 0;background:#7b6c52;}
    header .header_layout .title_wrap strong{width:190px;height:auto;margin-top:10px;background:url(../img/title_logo_m.png) no-repeat;}
    header .header_layout ul li{padding:0;}
    #body_layout{padding-left:0;}
    footer{display:none;}
    
    .music{display:none;}
    .intro{width:100%;}
    .intro .content{position: inherit;margin-top:50%;}
    .intro .content .tit_logo strong{position:static;}
    .intro .content p{margin:30px 0 50px;}
    .intro .content p br{display:none;}
    .intro .img_txt{display:none;} 
    
    .slogan{width:100%;left:0;}
    .slogan .tit_wrap span.txt02{background-size: 100%;background-repeat: no-repeat;width: 89px;height:55px;}
    .slogan .tit_wrap span.txt05{background-size: 100%;background-repeat: no-repeat;width:120px;height:55px;}
    .slogan .scroll_down{left:calc(50% - 40px);}    
    
    .secene .group{display:none;}
    .secene .scene-layer .txt_wrap{left:40px;}
    .secene .scene-layer .txt_wrap .tit_wrap strong:before{left:0;top:-50px;}
    .secene .scene-layer .img_caption{display:none;}
    
    .timeline{width:100%;}
    .timeline .wrap{height:calc(100% - 120px); padding-bottom:50px; box-sizing:border-box;}
    .timeline .tit_wrap{position:inherit;margin-top:120px;}
    .timeline .tit_wrap h2{padding-left:45px;margin-bottom:5px;background-size:35px;}
    .timeline .content_wrap{height:calc(100% - 120px); margin-top:50px;}
    .timeline .content_wrap .box_item{position:relative;padding-left:20px;}
    .timeline .content_wrap .box_item:before{display:inline-block; height:calc(100% - 10px);}
    .timeline .content_wrap .box_item:after{display:inline-block;}
    .timeline .content_wrap .box_item ul{overflow:auto; left:0 !important; display:inline-block;position:inherit;height:calc(100% - 40px); padding-top:40px;}
    .timeline .content_wrap .box_item ul:after{display:block;}
    .timeline .content_wrap .box_item ul li{display:inline-block;width:100%;margin-bottom:30px;}
    .timeline .content_wrap .box_item ul li:not(:nth-child(1)){padding-left:0;}
    .timeline .content_wrap .box_item ul li:nth-child(4n+2) .lay, .timeline .content_wrap .box_item ul li:nth-child(4n+3) .lay, .timeline .content_wrap .box_item ul li:nth-child(4n+4) .lay{margin-top:0;}
    .timeline .content_wrap .box_item ul li img{margin-bottom:10px;}
    .timeline .content_wrap .year_btn{overflow:hidden;bottom:0;height:50px;padding-right:50px;}
    .timeline .content_wrap .year_btn:before{height:100%;background:url(../img/year_btn_bg.jpg) no-repeat;background-size:cover;}
    .timeline .content_wrap .year_btn li{width:25%;}
    .timeline .content_wrap .year_btn li a{padding:14px 0;font-size:14px;}
    .timeline .content_wrap .year_btn li a.on, .timeline .content_wrap .year_btn li a:hover, .timeline .content_wrap .year_btn li a:focus{font-weight:500;}
    .timeline .content_wrap .year_btn li:first-child a:before{display:none;}
    .timeline .content_wrap .year_btn li a:before{left:0;top:calc(50% - 7px);width:1px;height:14px;}
    .timeline .content_wrap .year_btn li a:after{display:none;}
    .timeline .content_wrap .year_btn_next{display:block;}
    .timeline .control_btn{display:none;}
    .timeline .content_wrap .scroll{display:none;}
    
}
@media screen and (max-width:500px){
    .wrap{padding:0 15px;}
    header .header_layout h1{margin-left:20px;}
    header .mgnb{right:0;}
    .intro{background: url(../img/intro_bgm.jpg)center no-repeat;}
    .intro .content{margin-top:50%;}
    .intro .content .tit_logo strong{font-size:5em;}
    .intro .content a{background-size:140px;width:auto;height:auto;padding:13px 56px;}
    .intro .content p{margin{20px 0;}}
    .slogan .scroll_down{display:none;}
    .secene .scene-layer .txt_wrap .tit_wrap span{display:block;padding-left:0;margin-left:0;}
    .secene .scene-layer .txt_wrap .tit_wrap span:before{display:none;}
    .secene .scene-layer .txt_wrap .content_wrap{width:250px;}
}