@font-face {
    font-family: 'Athelas-Regular';
    src: url('../fonts/Athelas-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Athelas-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Athelas-Regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/Athelas-Regular.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/Athelas-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../fonts/Athelas-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
  }

  @font-face {
    font-family: 'HanYiChangMeiHeiJian';
    src: url('../fonts/HanYiChangMeiHeiJian'); /* IE9 Compat Modes */
    src: url('../fonts/HanYiChangMeiHeiJian.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/HanYiChangMeiHeiJian.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/HanYiChangMeiHeiJian.woff') format('woff'), /* Pretty Modern Browsers */
         url('../fonts/HanYiChangMeiHeiJian.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('../fonts/HanYiChangMeiHeiJian.svg#svgFontName') format('svg'); /* Legacy iOS */
         font-weight: normal;
         font-style: normal;
  }

 body{
      background:url(../image/korean-war-bg.jpg) repeat;
      color: #fff;
      overflow-x:hidden;
      letter-spacing: 0.02em;
      max-width: 100%;
   
 }
  
.view-desktop{
    display: block;
}
.view-mobile {
    display: none;
}
.btn-video {
    display: none;
}

.side-menu {
    display: none;
}
.year-n{
font-family: 'Athelas-Regular';
color:#fff;
font-size: 2em;
}
.year{
/* border-right: #fff solid 1px; */
font-family: 'HanYiChangMeiHeiJian';
color:#fff;
font-size: 2em;
padding-right: 0.2em;
}

 section{
     padding:0em 1em;
}
.modal {
    z-index: 1000000;
}
.btn-popup{
    z-index: 999999;
}
/* s1 */
.s1 .container-fluid{
    padding:0px
}
.landing-bg{
  position: relative;
}
.aeroplane{
    position: absolute;
    right: 5%;
    top: -12%;

}
.wait {
    width:40%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    z-index: 2;
}
.wait.img-2 {
    margin-top: 7rem;
    margin-left: -2.2rem;
    position: relative;
    z-index: 1;
}
.wait2{
    width: 40%;
}

.above-title{
    width:100%;
    background-image: url(../image/plane.gif);
    background-position: top right;
    background-repeat: no-repeat;
    height:360px;

}

.intro-text{
    color:#fff;
    line-height:0.6em;
    padding-bottom: 1em;
    /* margin-top: 3em; */
    /* margin-bottom: 3em; */ 
}



.year-ex{
    font-size: 1.2em;
    font-family: 'Athelas-Regular';
    color: #fff;
}

/* end s1 */

/* s2,s3 */
/* .story-text{
    width: 60%;
    margin:0 auto;
    margin-bottom: 5rem;
} */
/* .story-begin-title{
    width:500px;
} */

.story-begin-title {
    width: 35%;
    position: absolute;
    top: 0;
    left: 30%;
}
.s-mrkim-begin{
    /* background: url('../image/kim-story-begin-mobile-01.svg') no-repeat;
    background-position: bottom;
    background-size: 100%; */
    /* background-image: url(../image/kim-story-bg-01-01.svg) ; */
/*  
    
    height:1095px;
    background-repeat:no-repeat;
    background-position: bottom;
    background-size: 100%; */
    border-top: #444 solid 1px;
}
.story-bg-desktop {
    display: block;
}
.story-bg-mobile {
    display:none
}
.story-text-mobile {
    background-color: #fff;;
    display: none;
}
.story-text{
    margin-top: 1em;
    text-align: justify;
    margin-bottom: 1em;
    /* width: 35%;
    bottom: 12%;
    position: absolute;
    color: #000; */
}
.story .story-text {
    width: 35%;
    bottom: 2%;
    left: 9%;
    position: absolute;
    color: #000;
    margin-bottom: 0;
}
.story-middle-text {
    width: 45%;
    position: absolute;
    top: 27%;
    left: 29%;
}
.s-mrkim-story{
   background-color: #fff;
   
  
}
.left{
    width: 100%;
    height:120px;
}

object.sml {
    position: absolute;
    margin-top: 14em;
}

.kim-story-wrapper{
    height: 100%;
    position: relative;
}


.story-begin{
    color: #333;
    position: relative;
    /* bottom: 15%; */
    top: 50%;
    /* left: 18%; */
    left: 10%;
}

/* .kim{
    margin-left: 20em;
    width: 210px;
    margin-bottom: 4em;
 
    position: relative;
} */

/* end s3 */

/* s4 */

/* try to stick */
#kim-map-wrapper {
    margin-top:0;
  }

  #kim-map-wrapper:before {
    /* width: 100%; */
    height: 100px;
    content: ' ';
    position: absolute;
    border-top: dashed 1px #999;
    z-index: 10;
  }
  
  #kim-map-wrapper:after {
    /* width: 100%; */
    height: 100px;
    content: ' ';
    position: absolute;
    /* border-top: dashed 1px #999; */
    z-index: 10;
    left: 0;
  }

  #map-wrapper {
    /* width:85%; */
    /* height:800px; */
    /* float: right; */
    position: relative;
    /* height: 1000px; */
    /* background-color: #F3F99D; */
    
  }

  #kim-map {
    /* position: absolute; */
    /* width: 80%; */
    /* height: 100px; */
    background-color: rgb(150, 150, 150);
    top: 0;
    right: 10%;
  }
  
/* end try to stick */

/* .map-wrapper {
    width:85%;
    height:auto;
   
    float: right;
} */
.mrkim-story-wrapper{
    height:550px;
    overflow: auto;
    z-index: 0;
    /* top: 52.5%; */
    /* top: 1%;
    left: 45%;
    position: absolute; */
    /* overflow:hidden; */
    /* overflow-x: hidden; */
}

#mrkim-map{
    width:100%;

}
/* #kim-map{
    border: #1a1a1a solid px;
} */

.s-mrkim-map{
    background-color: #fff;
    color:#000;
    /* height: 100vh; */
}
.sticky{
    position: sticky;
    display: table;
    width: 100%;
    top: 0;
}



.scroll-down-icon{
    width: 70px;

    height:70px;
}
.date{
    font-size: 1.3em;
    font-family: 'HanYiChangMeiHeiJian';
    margin-top: 1.3em;

}
.date-sm{
    font-family: 'HanYiChangMeiHeiJian';
    font-size: 1.3em;
    margin-bottom: 0;
}

.img-item-mobile p{
    color: #a8a8a8;
    padding: 6px;
    margin-top: 0;
    line-height: 1.4em;
    margin-bottom: 0;
}

.dates{
    margin-top: 0.8em;
}

.city{
    font-size: 2.5em;
    font-family: 'HanYiChangMeiHeiJian';
    line-height: 1.2em;
}

.citys{
    font-size: 2em;
}
.city-sm{
    font-size: 1.8em;
    font-family: 'HanYiChangMeiHeiJian';
}
.citys-sm{
    font-size: 1.2em;
}
.circle {
    border-radius: 50%;
    background: #000;
    width: 230px;
    height: 230px;
    color: #fff;
    padding: 2em;
    margin: 0 auto;
}
.circle-start{
    background-image: url(../image/kim-father-photo.png);
    background-size:cover;
    width: 230px;
    height: 230px;
   background-position:center;
}

.circle-content{
    border-top: #000 solid 0.5px;
    border-bottom: #000 solid 0.5px;
    padding: 1em;
    width: 70%;
    margin: auto;
    margin-top: 0.8em;
}

.circle-content p{
 margin-top: 1em;
}

.date-d{
 
        margin-top: 2em;
        font-size: 1.5em;
    
}

.kim-fight{
    width: 5.5em;
    padding-top: 0.7em;
    margin-top: 0.5em;
    margin: 0 auto;
 
 }
 .kim-fight-s{
     margin: 0.35em;
     width:11em;
     margin: 0 auto;
 }

.story-content-wrap {
    height:100%;
    position: relative;
    margin-top: 20%;
}
#kim-map-wrapper.map-fixed{
    height:500px;
}
#map-wrapper.fixed {
    position: fixed;
    top:9%;
    /* top: 9%; */
    /* height: 500px; */
    /* position: absolute;
    width: 100%;
    top: 30%; */
}

/* end s4 */

/* s5 */
.s-mrkim-dream{
    background-image: url(../image/mrkim-dream-01.svg), url(../image/moon.svg);
    background-size: 100% , 40%;
    background-repeat: no-repeat;
    background-position:top, left bottom;
    padding-top: 27rem;
    height: 750px;
}

.moon{
    background-image: url(../image/moon.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position:bottom;
    margin-left: -8em;
    width: 850px;
    height: 850px;
    position: relative;
    z-index: -1;
}

.dream-content{
    z-index:1 ;
}
.subheading{
    font-family: 'HanYiChangMeiHeiJian' ;
    font-weight: 300;
    padding: 0;
    font-size:2em;  
}

.story-content p{
padding-left: 0.5em!important;

}

.story-content{
    border-left: #fff solid 1px;
    color: #fff;
    padding: 0em 1em;
    /* padding-top: 2.6em;
    padding-left: 0.5em!important; */
    /* margin-top: 0.8em; */
   
}

/* end s5 */

/* s6 */

.nowadays{
    margin-top: 0;
}

.s-mrkim-story-end{
    margin-top: 2em;
  
}

.year-nowadays{
    border: 0 !important;
}

.story-content-nowadays{
    margin-top: 0!important;
}

.end-story-content{
    width: 60%;
    margin: 0 auto;
}
.end-story-content .left, .end-story-content .right{
    display: inline-block;
    vertical-align: top;
}
.end-story-content .left{
    width: 30%;
    border: none;
}
.end-story-content .right{
    width: 69%;
    border-left: 1px solid #fff;
}
/* end s6 */

/* s7 */

.mrlee-profile{
    margin-top: 4em;
}

.mrlee-content{
    margin-top: 1em;
    padding: 0em 1em;
}
.mrlee-profile{
    width:50%;
}

.mrlee-content h3{
   font-weight: 200;
   border-bottom: #fff solid 0.5px;
   padding-bottom: 0.5rem;
   margin-top: 0.3rem;
}



/* end s7 */

/* s8 */

.headline {
    font-size: 2.5em;
 
}
.map-content{
    /* height: 500px; */
    height: 570px;
    overflow-y: auto;
    overflow-x:hidden;
    scrollbar-color: #fff #fbb03b;
    scrollbar-width: thin;
}
.map-content .content {
    /* height:100%; */
    height: 30em;
    /* border:1px solid #fff; */
}
.map-content .content .map-story.map-story-1{
    margin-top:3%
}
.map-content .content .map-story {
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    /* padding:20px; */
    width:95%;
    /* margin-top: 10%; */
    /* margin-top: 3%; */
}
.story-content-map{
    border-left: #fff solid 1px;
    color: #fff;
    height: 7em;
    padding-top: 1.6em;
    margin-top: 0.8em;
}

.story-content-map p{
    padding-left: 0.3em;
    font-family: 'HanYiChangMeiHeiJian';
    font-size: 2em;
}

.scroll-down-arrow-image{
    width:20%;
}

.mth-n{
    font-family: 'Athelas-Regular';
    color:#fff;
    font-size: 1.5em;
    padding-left: 0.3em;
  }
  .mth{
    font-family: 'HanYiChangMeiHeiJian';
    color:#fff;
    padding-left: 0.2em;
    font-size: 1.5em;
   
  }
.war-map{
    display: none;
}
.war-map#map-0{
    display: block;
}
.simplebar-scrollbar::before {
    background-color: #fff;
  }
/* end s8 */

/* s9 */
.evacation-img {
   
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
   
}
.excavation-history {
    margin-bottom: 5rem;
}
.excavation-wrapper {
    width: 60%;
    margin: 0 auto;
}
.excavation-subheading{
    font-size: 2em;
    line-height: 0.7;
   
    font-weight: 600;
    padding-bottom: 0.5em;         
}
.excavation-subheading-s{
    margin-left: 5.3em
}
.excavations-left, .excavations-right{
    display:inline-block;
    vertical-align: top;
}
.excavations-left {
    width: 28%;
    border-right:none
}

.excavations-right {
    width: 58%;
    border-left:1px solid #fff;
}

.year-text{
    margin-left: -1.2em;
}

.excavations .story-content{
    margin-top: 0;
}

.last{
    margin-bottom: 2em;
}
/* end s9 */

/* s10 */

.step-left, .step-right{
    display: inline-block;
}

.steps-title-grp small {
    background-color: #fbb03b;
    font-size: 93%;
    padding: 3px 9px;
    border-radius: 20px;
    color: #000;
}

.steps-title small {
    background-color: #fbb03b;
    font-size: 93%;
    padding: 3px 9px;
    border-radius: 20px;
    color: #000;
}

.steps-title-grp {
   
    text-align: center;
    margin: 0 auto;
}

.step1-content .step-left {
    border-top:none;
}
.step-left {
    width: 100%;
    border-right: none;
    border-top: 0;
    border-bottom: 1px solid #fff;
    margin-top: 0.5rem;
}
.step-right {
    width: 100%;
    height: 237px;
    color: #444;
    text-align: justify;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 0 0 12px 12px;
    padding: 1em 0;
   
}

.step-points{
    width: 90%;
    padding: 1em 0 0 0.7em;
}

.steps-img {
    width: 15%;
    margin: 0 auto;
}


.steps-content{ 
    padding: 0em 1em;
  
}


.steps-title h3{
    font-family: 'HanYiChangMeiHeiJian';
   
}
.steps-subtitle-img{
margin-bottom: 1em;
margin-right:10em;
height: 200px;
}

.steps-subtitle p{
    border-bottom: #999 solid 1px;
    border-top: #999 solid 1px;
    padding: 1.2em;
}
/* .steps-title-grp h3{
 
    margin-left: -2.5em;
    margin-top: 1.2em;
} */

/* end s10 */

/* s11 */
.experts-img{
    width: 60%;
}
/* end s11 */

/* s12 */
.relic-grp{
    padding-top: 15em;
}
.war-item {
    cursor: pointer;
}
.relic g[id^="tooltips"]{
    display: none;

}

.relic-slide{
    width: 300px;
    background-color: #fff;
    border-radius: 15px;
    color: #333;
    font-size: 0.9rem;
    padding: 0.5em;
    margin:1em;

}

.relic-slide p{
    margin: 0 8px 0 8px;
    border-top: #999 solid 1px;
    padding: 0.5em;
}

.slick-slide img {
    display: block;
    margin: 0 auto;
}

.marine-times .slick-prev:before {

    background-image: url(../image/arrow-left-solid-1-01.svg);
}
.marine-times .slick-next:before{
    background-image: url(../image/arrow-right-solid-1-01.svg);
}

.slick-prev:before {

    background-image: url(../image/arrow-left-solid.svg);
}
.slick-next:before{
    background-image: url(../image/arrow-right-solid.svg);
}
.slick-initialized .slick-slide:focus{
    outline: none;
}
/* end s12 */

/* s13 */
.unexcavation-map-title-s{
    margin-top: 1em;
}
.unexcavation-map-title-s{
 font-size: 2.5rem;
}
.unexcavation-map-title{
    font-size: 2.3em;
}
#unexcavated-map{
    border: #fff solid 5px;
    margin-top: 1em;
}
#unexcavated-map g[id^="place"] > path {
    cursor: pointer;
}
#unexcavated-map g[id^="tooltip"] > path {
    fill: #959595;
    /* cursor: pointer; */
}
#unexcavated-map g[id^="tooltip"]{
    display: none;;
}


#pie-chart, #bar-chart {
    height: 500px;
    /* width: 1000px; */
    width:100%;
    margin:0 auto;
}
#pie-chart {
    height: 375px;
}

.title {
    font-weight: 400;
}
/* end s13 */

/* s14 */

/* end s14 */

/* s15 */
.kim-looks-back{
 
    background: linear-gradient(rgba(225,225,225,0) 0%,
    rgba(225,225,225,0.8) 20%,
    rgba(225,225,225,1) 40%, 
    rgba(225,225,225,1) 80%, 
  
    rgba(225,225,225,0) 100%);

}

.marine-times{
    height: 420px;
    width: 500px;
    border-radius: 15px;
    color: #333;
    font-size: 0.9rem;
    padding: 1em;
    margin:2em;
    background-color: #fff;

}



.marine-times p{
    margin: 0 8px 0 8px;
    border-top: #999 solid 1px;
    padding: 0.5em;
    margin-top: 0.5em;
}
.look-back-title{
    width: 350px;
    margin-top: 5em;
    margin-bottom: 2em;
}
.looks-back-story{
  
    color: #111!important;
}

.looks-back-story-content{
    margin-top: 5em;
}

.kim-marines{
    background-image: url(../image/kim-marines-bg-01.svg);
    background-position: bottom;
    background-repeat:no-repeat;
    background-size: 100%;
    height:1100px;
}


/* end s15 */


/* s16 */

/* .mrlee-looks-back-story{
    border-bottom: #444 solid 1px;
} */

.reunification-title{
    width: 550px;
    text-align: center!important;
    /* margin-top: 5em;
    margin-bottom: 1em; */
}

.reunification{
  
    margin-bottom: 2em;

}

/* end s16 */

/* s17 */
/* .side-note{
    background-image: url(../image/side-note.jpg);
    background-position: bottom;
    background-size: 100%;
    background-repeat:no-repeat;
} */

.note {
    font-size: 0.9em;
    color: #444;
    background: #fff;
    margin: 2em 0;
    padding: 1.5em;
    border-radius: 15px;
}


.note-img {
    width: 5%;
    margin-bottom: 1em;
}



.note h4{
   font-weight: 600;
   font-size: 1.5rem;
    padding-bottom: 0.33em;
    /* margin-bottom: 1em; */
    border-bottom: #ccc solid 0.1px;
}

/* end s17 */

/* s18 */

.btn-video{
    background-image: url(../image/video-popup-icon.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    color: #222;
    position: fixed;
    bottom: -4em;
    right: 47%;
    width: 9em;
    height: 9em;
    z-index: 100000;
}
.btn-video:focus{
    outline: none;
    box-shadow: none;
}
.btn-video:not(:disabled):not(.disabled):active{
    background-image: url(../image/video-popup-icon.svg);
}
.video-popup-body{
    width:1080px;
}

.btn-video-mobile{
    background-image: url(../image/video-popup-icon-mobile-01.svg);
    background-repeat: no-repeat;
    background-color: transparent;
    color: #222;
    position: fixed;
    bottom: -4em;
    right: 41%;
    width: 4.5em;
    height: 10.7em;
    z-index: 100000;
    display: none;
}
#video-popup-label{
    font-size: 2em;
    color:#555;
    margin: 0 auto;
}

.modal-header .close{
    margin:0;
    padding:0;
}
/* end s18 */

#footer{
    color: #fff;
}

/* Scrollbar */

/* width */
::-webkit-scrollbar {
    width: 5px;
    -webkit-widht:5px;
}

/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px #fbb03b; 
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px #fbb03b; 
-webkit-border-radius: 10px;

}

/* Handle */
::-webkit-scrollbar-thumb {
    background:#fbb03b; 
    border-radius: 10px;
    -webkit-background:#fbb03b; 
    -webkit-border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background:#fff; 
    -webkit-background:#fff;
}
#fp-nav ul li a span{
    background: #fff;
    -webkit-background:#fff;
}



#fp-nav {
    top:20%;
}







/* Media Queries */

/* Ipad Pro Landscape */
@media screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) 
  and (orientation: landscape) {
    .story-begin {
        bottom: 17%;
    }
    .story-bg-desktop {
        display: none;
    }
    .story-bg-mobile {
        display:block;
    }
    .story-text-mobile {
        background: white;
        color: #000;
        margin-top: -2px;
        font-size: 1.5em;
        display: block;
    }
    .story .story-text {
        display: none;
    }
    .story-begin-title {
        width: 63%;
    }
    .story-middle-text {
        width: 46%;
        top: 16%;
        left: 31%;
        font-size: 1.5em;
    }
    .mrkim-story-wrapper {
        top: 56.8%;
    }
    .s-mrkim-map{
        height: 1200px;
    }
    .story-text-mobile .story-wrapper {
        width:67%;
        margin:0 auto;
    }
    .btn-video-mobile {
        display: none;
    }
    .btn-video {
        display: block;
    }
    .bottom-nav{
        display: none;
    }
}

/* mac 16 inch */
@media (min-width:1440px) {

    .content-empty{
        height:15rem;
    }

    .story .story-text {
        width: 35%;
        bottom: 16%;
    }
    .end-story-wrapper{
        margin-top: -0.5em;
    }
}
/* Ipad Pro */
@media (min-width:993px) and (max-width: 1024px) {  
 .date-d{
    font-size: 1.3em;
}
.date {
    font-size: 1.2em;
}

.excavations-right {
    width: 65%;
}

.content-empty{
    height: 5rem;
}
  .btn-video-mobile{
    right: 47%;
    height: 10.9em;
    }
    .experts-img{
        width: 100%;
    }

    .steps-title h3{
        font-size:1.5rem
    }
    .steps-subtitle-img {
        margin-top:2rem;
    }
  
    .look-back-title {
        margin-bottom:0.5em;
        margin-top: 3em;
    }

    .btn-video-mobile{
        display:block;
    }
    .btn-video{
        display: none;
    }

    .story-begin-title {
        width: 55%;
        top: 5%;
    left: 20%;
    }

    .headline {
        font-size: 2.8em;
    }

    .s-mrkim-begin {
        /* height: 750px;
        background: url('../image/kim-story-begin-mobile-01.svg') no-repeat;
    background-position: bottom;
    background-size: 100%; */
    }
    .nowadays {
        margin-top: 20em;
    }
    .story-begin{
       
        bottom: 0%;
        line-height: 1.2em;
    }
    .mrlee-profile {
        width: 90%;
    }
    /* .story-begin {
        line-height: 1.5em;
        top: 21%;
        left: 18%;
        color: #fff;
    } */
    
    .headline {
        font-size: 2em;
      
    }
   

    .mrkim-story-wrapper {
        height: 450px;
        /* left: 45%; */
    }

    .start-btn {
        font-size: 40px;
        font-family: 'HanYiChangMeiHeiJian';
        margin-top: 1em;
    }
    .circle {
        width: 200px;
        height: 200px;
    }
    .city {
        font-size: 2em;
    }
    .citys {
        font-size: 1.8em;
        margin-top: -0.6em;
    }

    .kim-fight{
        width:5em;
        margin-top: 0.3em!important;
     
     }
     .kim-fight-s{
         width:8em;
     }

    .circle-content{
        padding:0;
    }

    .s-mrkim-dream {
        padding-top: 20rem;
        height: 650px;
    }

    .above-title {
        background-size: 30%;
        height: 250px;
    } 



    .note-img{
        width:16%;
        margin-bottom: 1em;
    }

    .step-left {
        width: 100%;
        border-right: none;
        border-top: 0;
        border-bottom: 1px solid #fff;
        margin-top: 0.5rem;
    }

    .steps-title-grp {
        width: 58%;
        text-align: center;
        margin: 0 auto;
    }
    .step-right {
        width: 100%;
        height:300px;
        color: #444;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 0 0 12px 12px;
        padding: 1em 1em 1em 0em;
    }
    
    .reunification {
      
        height: 1100px;
    }
    .kim-marines{
        height:700px;
    }
  
    .map-content {
        height:450px;
    }
    .story-bg-desktop {
        display: none;
    }
    .story-bg-mobile {
        display:block;
    }
    .story-middle-text {
        width: 70%;
        top: 18%;
        left: 17%;
        font-size: 1.5em;
    }
    .story .story-text {
        display: none;
    }
    .story-text-mobile {
        background: white;
        color: #000;
        margin-top: -2px;
        font-size: 1.5em;
        display: block;
    }
    .story-text-mobile .story-wrapper {
        width:72%;
        margin:0 auto;
    }
}

/* Medium size devices */
@media (min-width:769px) and (max-width: 992px) { 
    .story-bg-desktop {
        display: none;
    }
    .story-bg-mobile {
        display:block;
    }
    .story-begin-title {
        width: 50%;
        top:5%;
        left:24%;
    }
    .story-middle-text {
        width: 66%;
        top: 15%;
        left: 20%;
      
    }
    .story .story-text{
        display: none;
    }
    .story-text-mobile {
        background: white;
        color: #000;
        margin-top: -2px;
     
        display: block;
    }
    .story-text-mobile .story-wrapper {
        width:72%;
        margin:0 auto;
    }
    .btn-video-mobile{
        display:block;
    }
    .btn-video{
        display: none;
    }
}

/* Ipad Landscape */
@media screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {
    .evacation-img {
        height: 315px;
    }
    .excavation-subheading{
        font-size: 2em;
        line-height: 0.8;
        padding-bottom: 0.3em;
        border-left: #ffac00 solid;
        font-weight: 600;
        text-align: left;
    }

    .above-title {
        background-size: 30%;
        height: 250px;
    }

    .story-begin-title {
        width: 60%;
    }

    .s-mrkim-begin {
        /* height: 680px; */
        margin-top: 1em;
        background: url('../image/kim-story-begin-mobile-01.svg') no-repeat;
    background-position: bottom;
    background-size: 100%;
    }

    #navbar-bottom .navbar-nav a {
        padding: 0.5em 0.2em;
        display: block;
        width: 100%;
        color: #000;
        border: #fbb03b solid 1px;
        background: #fff;
    }

    .story-begin {
        top: 21%;
        left: 18%;
    }

    
    .s-mrkim-story {
     
        height: 300px;
    }
    /* .intro-img{
        width:45%;
    } */
    .kim-fight{
        width:5em;
        margin-top: 0.3em;
     
     }
     .kim-fight-s{
         width:8em;
     }
    .map-content{
        height: 450px;
        /* margin-bottom: 2rem; */
    }
   
    .story-bg-desktop {
        display: none;
    }
    .story-bg-mobile {
        display:block;
    }
    .story-middle-text {
        width: 53%;
        top: 16%;
        left: 28%;
        font-size: 1.5em;
    }
    .story .story-text{
        display: none;
    }
    .story-text-mobile {
        background: white;
        color: #000;
        margin-top: -2px;
        font-size: 1.5em;
        display: block;
    }
    .story-text-mobile .story-wrapper {
        width:72%;
        margin:0 auto;
    }
    
  
}

/*  Ipad Portrait */
@media (min-width:577px) and (max-width: 768px) {  
   .btn-video-mobile{
       right: 46%;
   }
    
    .experts-img{
        width: 100%;
    }
    .headline {
        font-size: 1.5em;
    }
    .btn-video-mobile{
        display:none;
    }
    .btn-video{
        display: none;
    }
    .above-title {
        background-size: 30%;
        height: 150px;
    }

    .s-mrkim-dream {
        padding-top: 15rem;
        height: 500px;
    }
    .date{
       
        margin-top: 1em;
        font-size: 1.1em;
        line-height: 1.3em
    }

    .date-d{
        margin-top: 2em;
        font-size: 1.2em;
    }

    .note-img{
    width:16%;
    margin-bottom: 1em;
    }
    .year{
        font-size: 2em;
    }

    .subheading {
        font-size: 1.5em;
    }

    .start-btn {
        font-size: 35px;
        font-family: 'HanYiChangMeiHeiJian';
        margin-top: 1.2em;
    }

    .kim-fight{
        width: 5em;
        padding-top: 0.5em;
     
     }
     .kim-fight-s{
         width:8em;
     }

    .circle {
        width: 188px;
        height: 188px;
    }
    .headline {
        font-size: 2em;
 
    }

    .city {
       
        line-height: 0.5em;
        font-size: 1.9em;
        margin-top: 1em;
    }
    
    .steps-title-grp {
        width: 58%;
        text-align: center;
        margin: 0 auto;
    }
    
    .map-content .content .map-story {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        /* padding: 0.5em; */
        width: 98%;
        margin-top: 0;
    }
    #kim-map{
        width:80%;
    }
    .mth-n{
        font-size: 1.8em;
    }

    .mth{
        font-size: 1.8em;
    }

    .mth-s{
        font-size: 1.7em;
    }

    .story-content-map {
       
        display: contents;
        padding-top: 2.6em;
        margin-top: 0.8em;
    }

    .story-content-map p {
      
        font-size: 1.6em;
    }

    .reunification {
  
        height: 1000px;
    }

    .kim-map {
    
        border: #1a1a1a solid 2px;}

    .step1-content .step-left {
        border-top:none;
    }
   
    .step-left {
        width: 100%;
        border-right: none;
        border-top: 0;
        border-bottom: 1px solid #fff;
        margin-top: 0.5rem;
    }

    .kim-marines{
        height:980px;
    }

    .marine-times {
        height: 410px;
        padding: 2em;
    }
    
    .looks-back-story-content {
        margin-top: -13em;
    }

    .scroll-down-arrow-image {
        width: 10%;
    }

    .step-right {
        width: 100%;
        height:auto;
        color: #444;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 0 0 12px 12px;
        padding: 1em 0;
    }
   .steps-img {
       text-align: center !important;
   }
    .step4-content {
        margin-bottom: 4rem;
    }
    .step-wrapper{
        text-align: center;
    }
    .step-points {
        width: 100%;
        text-align: left;
        /* margin:0 auto; */
    }
    .excavations-left {
        width: 32%;
    }
    .excavations-right{
        width: 66%;
    }

    
    .intro{
        padding: 5em;
    }
    .story-begin-title {
        width: 62%;
        top: 2%;
        left: 17%;
    }
    .story-begin{
        line-height: 1.5em;
        bottom: 20%;
        left: 15%;
    }

    .s-mrkim-story {
       
        height: 320px;
    }
    .map-wrapper {
        width: 98%;
    }

    .steps-img {
        width: 10%;
    }

    .mrkim-story-wrapper {
        height: 350px;
        /* position: absolute; */
        /* top: 90%; */
    }
    .s-mrkim-map {
        /* height: 400px; */
        padding-bottom: 5rem;
    }
    .citys {
        font-size: 1.8em;
        margin-top: -0.6em;
        line-height: 1.2em;
    }

  
    .circle-content{
        padding:0;
        width: 82%;
    }

    .look-back-title {
        width: 300px;
        margin-top: 2em;
    }
    .map-content{
        height: 350px; 
        /* height: 660px; */
        /* margin-bottom: 2rem; */
    }
    .end-story-content{
        width:100%;
    }
    .end-story-content .right {
        width: 68%;
    }
    .wait.img-2 {
        margin-top: 4.5rem;
        margin-left: -1.5rem;
    }
    .story-bg-desktop {
        display: none;
    }
    .story-bg-mobile {
        display:block;
    }
    .story-middle-text {
        width: 62%;
        position: absolute;
        top: 15%;
        left: 20%;
        font-size: 1em;
        line-height: 1.8em;
        /* letter-spacing: 0.2em; */
    }
    .story .story-text{
        display: none;
    }
    .story-text-mobile {
        background: white;
        color: #000;
        margin-top: -2px;
        /* font-size: 1.3em; */
        display: block;
    }
    .story-text-mobile .story-wrapper {
        width:66%;
        margin:0 auto;
    }
    .excavation-wrapper {
        width: 73%;
    }
    
}

/* Small size devices */
@media (min-width:200px) and (max-width: 576px) { 
    .view-mobile {
        display: block;
    }
    .view-desktop {
        display: none !important;
    }
    .row {
        margin-left: 0px !important;
        margin-right: 0px !important;
        }

    .intro-text {
     
        padding: 1 1em;
        line-height: 1.5em;
    }

    .intro-text p{
        margin-bottom: 0;
    }
    .experts-img{
        width: 100%;
        margin-top: 0.8em;
    }
    /* .landing-bg{
        background-image: url(../image/landing-mobile-01.svg);
    
        background-repeat:no-repeat;
 
        background-size: 100%;
    } */
    .above-title{
        background-size: 70%;
    }

    .kim-fight{
       width:5em;
       margin-top: 0.4em;
    
    }
    .kim-fight-s{
        width:8em;
    }

    .story-content-map p {
       
        font-size: 1.2em;
    }

    .map-content .content .map-story {
        /* padding: 5px */
    }

    .steps-subtitle{
        font-weight: 200;
        padding: 0;
    }

   
    .intro{
        margin-top: 0;
    }

    .headline {
        font-size: 1.5em;
        line-height: 1.2;
     
    }

    .story-begin {
        line-height: 1.5em;
        bottom: 5%;
        padding: 20px;
    }

    .story-begin-title {
        width: 88%;
        left: -1%;
        top:2%;
    }
   

    .s-mrkim-story {
        
        height: 450px
    }

    .story-content {
        border-top: #fff solid 1px;
        margin: 0em 1.2em;
        border-left: 0;
        padding: 0.8em 0;
    }
    .year{
        border:none;
    }

    .s-mrkim-dream {
        background-image: url(../image/mrkim-dream-01.svg), url(../image/moon.svg);
        background-size: 100% , 0%;
        background-repeat: no-repeat;
        background-position: top, left bottom;
        padding-top: 7rem;
        height: 280px;
    }

   


.mrlee-content h3 {
    font-size: 1.5em;
 
    line-height: 1.3;
}

    .note-img {
        width:16%;
        margin-bottom: 1em;
    }
  
    .steps-title-grp h3{
        font-size: 1.3rem;
        margin-top: 0.2rem;
    }
    .steps-title-grp{
        width: 58%;
        text-align: center;
        margin: 0 auto;
   
    }

    .steps-title{
        text-align: center;
    }

    .thumb-title {
     
        font-size:0.7em;
    }
    .step1-content .step-left {
        border-top:none;
    }
    .step-left {
        width: 100%;
        border-right: none;
        border-top: 0;
        border-bottom: 1px solid #fff;
        margin-top: 0.5rem;
    }
    .step-right {
        width: 100%;
        height:auto;
        color: #444;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 0 0 12px 12px;
        padding: 1em 0;
       
    }

    .bar{
        background-color: rgb(251, 176, 59);
      }

    .start-btn {
        font-size: 32px;
        font-family: 'HanYiChangMeiHeiJian';
        margin-top: 0.7em;
    }
    
    .circle-content {
   
        padding: 0;
        width: 100%;
    }
    .circle {
        width: 150px;
        height: 150px;
    } 

    .step-points{
        width: 90%;
        padding: 1em 0 0 0.7em;
    }
    
    .steps-img {
        width: 15%;
        margin: 0 auto;
    }
   
    
    .map-wrapper {
        width: 100%;
        border: none;
    }
    .story-content-wrap {
        margin-top: 0;
    }
    .city {
        font-size: 2em;
    }
    .citys{
        font-size: 1.6em;
    }
    .excavation-history{
        margin-bottom: 1em;
    }

    .excavations-left {
        width: 69%;
        /* margin: 0 auto; */
        text-align: center !important;
        border-bottom:0;
        
    }
    .excavations-right {
        width:100%;
        border:none;
        text-align: left;
        padding-left: 0!important;
        padding-top: 0.5rem!important;
        border-top: 1px solid #fff;
    }
    .excavation-wrapper {
        width:100%;
        text-align: center;
    }
    
    .unexcavation-map-title {
        font-size: 1.5em;
    }
    .end-story-content{
        width:100%;
    }
    .end-story-content .left{
        width: 100%;
        text-align: center !important;
        border-bottom: 1px solid #fff;
        height: 54px;
        margin-bottom: 0.5rem;
    }
    .end-story-content .right{
        width: 100%;
        border:none;
        padding-left: 0!important;
        
    }

    .steps-subtitle-img {
        height: 152px;
        margin-left: -9em;
        margin-right: 0;
    }
    .look-back-title {
        width: 250px;
        margin-top: 2em;
    }

    .reunification-title {
        width: 350px;
    }

    .reunification {
        height: 980px;
    }

    .kim-marines{
        height: 900px;
        background-image: url(../image/kim-marinas-mobile-01.svg);
    }

    .marine-times{
        width: 300px;
        height: 295px;
    }

   
    .looks-back-story-content {
        margin-top: -10em;
    }

    .long-text {
        line-height: 1.5em;
        padding: .4em .5em !important;
        letter-spacing: initial !important;
    }
    .map-content {
        /* height: 323px; */
        height:500px;
        margin-bottom: 2rem;
    }

    .steps-subtitle p {
        padding: 0.6em;
    }
  
    




    
    .wait.img-2 {
        margin-top: 4.85rem;
        margin-left: -1.6rem;
    }
    .story{
        padding-top: 10rem;
    }
    .story-bg-desktop {
        display: none;
    }
    .story-bg-mobile {
        display:block;
    }
    .story-middle-text {
        width: 83%;
        left: 8%;
        top: 13%;
    } 

    .subheading {
       
        font-size: 1.3em;
    }
    .btn-video{
        top: 83.5%;
        left: 37%;
        width: 90px;
        z-index: 0;
    }
    .story-text-mobile {
        background: white;
        color: #000;
        margin-top: -2px;
        font-size: 1em;
        display: block;
    }
    

    #map-wrapper {
        width:100%;
       
    }
    .mrkim-story-wrapper{
        /* top:27.5%; */
        position: relative;
        left: 0;
        height: 450px;
        top: 0;
    }
    .excavation-subheading{
        font-size: 1.5em;
        line-height: 0.8;
        margin-top: 1em;
        padding-bottom: 0;
        padding-left: 0.3em;
        border-left: #ffac00 solid;
        font-weight: 600;
        margin-left: 0;
        text-align: left;
    }
}

.container{position:relative;}
.interactive-image{display:block;height:100%;width:100%;object-fit:scale-down;}


.hotspot{position:absolute;margin:0;padding:0;transform:translate(-50%, -50%);z-index:0;}
.hotspot:hover .hotspot-button:after,.hotspot:active .hotspot-button:after{1background-color:#fbb03b;}
.hotspot.hotspot-selected{z-index:999;}
.hotspot.hotspot-selected .hotspot-label{display:block;}
.hotspot-label{color:#333;position:absolute;padding:1em;min-width:20em;max-width:30em;text-align:center;background:#fff;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);line-height:1.3;z-index:10000;border-radius:50px;user-select:none;display:none;transition:all 0.1s linear;}
.hotspot-button{z-index:100001;}
.hotspot-button:hover{background:#fbb03b;transform:scale(1.4)!important;border:1px solid #fff;}
.hotspot-label h4{margin:0;padding:0 0 0.6em 0;}
.hotspot-label p{margin:0;padding:0;}
.relic{margin-bottom:2em;}
.relic .view-desktop .hotspot-label{padding:1em 1.6em;}
.relic .view-desktop p{border:none;}
.relic .view-desktop.item_img .container{width:100%;height:100%;}

.hotspot#item-Bottle{bottom:38%;left:18%;}
.hotspot#item-Bottle .hotspot-label{top:-6em;left:-2em;}
.hotspot#item-Shoe{bottom:32%;left:32%;}
.hotspot#item-Shoe .hotspot-label{top:-6em;}
.hotspot#item-ShoeSole{bottom:36%;left:47%;}
.hotspot#item-ShoeSole .hotspot-label{top:-6em;}
.hotspot#item-Pen{bottom:36%;left:60%;}
.hotspot#item-Pen .hotspot-label{top:-7em;}
.hotspot#item-Can{bottom:36%;left:80%;}
.hotspot#item-Can .hotspot-label{top:-6em;left:-10em;}
.hotspot#item-Mirror{bottom:16%;left:14%;}
.hotspot#item-Mirror .hotspot-label{top:-5em;left:-2em;}
.hotspot#item-Spoon{bottom:16%;left:26%;}
.hotspot#item-Spoon .hotspot-label{top:-4em;left:-2em;}
.hotspot#item-Whistle{bottom:16%;left:40%;}
.hotspot#item-Whistle .hotspot-label{top:-6em;left:-2em;}
.hotspot#item-String{bottom:16%;left:60%;}
.hotspot#item-String .hotspot-label{top:-6em;left:-4em;}
.hotspot#item-Button{bottom:14%;left:80%;}
.hotspot#item-Button .hotspot-label{top:-6em;left:-4em;}

.pulse,.hotspot-button{background:rgba(255,255,255,1);border-radius:50%;height:16px;width:16px;box-shadow:0 0 0 0 rgba(222, 84, 72, 1);transform:scale(1);animation:pulse 2s infinite;z-index:100001;cursor:pointer;
    /* -ms-transition:0.3s;-moz-transition:0.3s;-o-transition:0.3s;-webkit-transition:0.3s;transition:0.3s;*/}

@keyframes pulse {
0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(250,176,60,0.7);}
70%{transform:scale(1);box-shadow:0 0 0 15px rgba(250,176,60,0);}
100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(250,176,60,0);}
}