html,body { width:100%; height: initial; padding:0; margin:0; } 
body { overflow-x:hidden; } 
#wrap, .container { position:relative; } 
#wrap { background-color: #000000; color: #ffffff; } 

.loading { position:fixed; width:100%; height:calc(var(--outervh, 1vh) * 100); display:flex; align-items: center; justify-content: center; background-color: black; z-index:100; font-size: 24px; } 
.intro { position: relative; } 
.intro .intro-text { width: 100%; height: auto; margin: 0 auto; text-align: center; } 
.intro .intro-text p { font-family: 'Noto Serif KR', serif; line-height: 33px; word-break: keep-all; font-size: 20px; width:650px; margin:0 auto;} 
.intro .intro-text p strong { font-weight: 600; } 
.intro .intro-text .text-wrapper { height: calc(var(--vh, 1vh) * 100); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; flex-direction: column;} 
.intro .intro-text img { width: 500px; } 

.intro .intro-text .img-wrapper{width:70%;margin:300px auto;}
.intro .intro-text .img-wrapper figure{padding-bottom:50px;}
.intro .intro-text .img-wrapper img{width:80%;}
.intro .intro-text .img-wrapper:nth-child(3) img,.intro .intro-text .img-wrapper:nth-child(5) img{width:700px;}
.intro .intro-text p.desc{width:80%;font-size:17px;}
.intro .intro-text .text-wrapper:last-child { height:calc(var(--vh, 1vh) * 30); margin-top:calc(var(--vh, 1vh) * 30); } 
.intro .intro-text .text-wrapper p.caption {opacity: 0.4; margin-top: 8px; text-align: center;}

.intro .intro-scene { position:relative; } 
.intro .intro-scene .title-text { position:relative; z-index: 5; text-align: center; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: absolute; top:calc(var(--outervh, 1vh) *70); } 
.intro .intro-scene .title-text .bg { position:absolute; top:0; height:100%; opacity:0; } 
.intro .intro-scene .title-text .sub-title { font-size:18px; font-weight:300; padding-bottom: 40px; } 
.intro .intro-scene .title-text .title { font-weight: 900; font-size:91px; line-height: 60px; padding-bottom: 50px; font-family: "PyeongChangPeace-Bold"; text-shadow: 0px 0px 3px #ffffff; } 
.intro .intro-scene .title-text .info { font-size: 15px; font-weight: 300; display: -webkit-box; display: -ms-flexbox; display: flex; color: #bbbbbb; } 
.intro .intro-scene .title-text .info p:first-child { padding-right: 20px; } 
.intro .intro-scene .title-text .info strong { font-weight: 500; } 
.intro .intro-scene .intro-canvas-parent { width: 100vw; height: calc(var(--vh, 1vh) * 100); position: -webkit-sticky; position: sticky; top: 0; z-index: 0; } 
.intro .intro-scene .intro-canvas-parent canvas { opacity:0; } 
.intro .intro-scene .intro-scroller { width: 100%; top: calc(var(--vh, 1vh) * 100);; height: calc(var(--vh, 1vh) * 700); z-index: 10; } 
.intro .intro-scene .intro-scroller .spacer { height: calc(var(--vh, 1vh) * 100); } 
.intro .intro-scene .intro-scroller .text-box { height: calc(var(--vh, 1vh) * 100); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 99999; } 
.intro .intro-scene .intro-scroller .text-box p { width: 33%; padding: 10px; margin-top: 30vh; font-size: 17px; font-weight:300; line-height: 30px; position: absolute; font-size: 18px; word-break: keep-all; background-color: #000000cc; } 
.intro .intro-scene .intro-scroller #a1 p { width: auto; } 
.intro .intro-scene .intro-scroller .text-box img { height: 30%; width: auto; } 
.intro .intro-scene .intro-scroller .image-box { height: calc(var(--outervh, 1vh) * 100); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 
.intro .intro-scene .intro-scroller .image-box img { width: 20%; height: auto; } 
.intro .icon_scroll { position: fixed; left: 50%; bottom: 5%; width: 18px; height: 56px; margin-left: -9px; background: url('https://image.donga.com/policy/original/jameswebb/dist/images/common/icon_scroll.png') no-repeat 0 0; z-index: 1; -webkit-animation: pulse 1s infinite; animation: pulse 1s infinite; -webkit-transition: all 0.3s; transition: all 0.3s; } 

@media (max-width: 720px){
    .intro .intro-text .img-wrapper{width:100%;}
}

@media all and (max-width: 900px){
.loading { font-size: 17px; } 
.intro .intro-text { width:100%; } 
.intro .intro-text p { width:60%; line-height: 30px; font-size: 17px; } 
.intro .intro-text .img-wrapper figure{width:100%;margin:0;}
.intro .intro-text .img-wrapper img { width:100% !important;} 
.intro .intro-scene .title-text .sub-title { font-size:15px; padding-bottom: 10px; } 
.intro .intro-scene .title-text .title { font-weight: 900; font-size:45px; padding-bottom: 30px; width:70%; word-break: keep-all; text-shadow: 0px 0px 2px #ffffff; } 
.intro .intro-scene .title-text .info { font-size: 14px; flex-direction: column; line-height:25px; width:100%} 
.intro .intro-scene .title-text .info p:first-child { padding:0; } 
.intro .intro-scene .intro-scroller .text-box p { font-size:17px; width:70%; z-index: 99999; } 
.intro .intro-scene .intro-scroller #a1 p { width: 70%; } 
.intro .icon_scroll { background: url('https://image.donga.com/policy/original/jameswebb/dist/images/intro/chevron.png') no-repeat 0 0; background-size: contain; width: 25px; } 
}
@-webkit-keyframes pulse { 
0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 
50% { -webkit-transform: translate(0, 10px); transform: translate(0, 10px); } 
100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 
}

@keyframes pulse { 
0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 
50% { -webkit-transform: translate(0, 10px); transform: translate(0, 10px); } 
100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 
}