@charset "utf-8";

body {background-size: 100% auto;}
body,html {overflow-x: hidden;overflow-y: auto;}
.main-container {position: relative;margin-top: 80px;overflow: hidden;z-index: 1;pointer-events: none;min-height: 100vh;
-webkit-transition: -webkit-transform 500ms cubic-bezier(1, 0, 0, 1) 0ms;
-moz-transition: -moz-transform 500ms cubic-bezier(1, 0, 0, 1) 0ms;
transition: transform 500ms cubic-bezier(1, 0, 0, 1) 0ms;}

.main-container .main-wrapper {position: relative;overflow: hidden;min-height: 100vh;pointer-events: all;
-webkit-transition: -webkit-transform 500ms cubic-bezier(1, 0, 0, 1) 0ms;
-moz-transition: -moz-transform 500ms cubic-bezier(1, 0, 0, 1) 0ms;
transition: transform 500ms cubic-bezier(1, 0, 0, 1) 0ms;  }

.main-container .main-wrapper .mainContents {position: relative;min-height: 100vh;z-index: 10;overflow: hidden;
-webkit-transition: -webkit-transform 1000ms cubic-bezier(1, 0, 0, 1) 0ms, padding 500ms cubic-bezier(1, 0, 0, 1) 0ms;
-moz-transition: -moz-transform 1000ms cubic-bezier(1, 0, 0, 1) 0ms, padding 500ms cubic-bezier(1, 0, 0, 1) 0ms;
transition: transform 1000ms cubic-bezier(1, 0, 0, 1) 0ms, padding 500ms cubic-bezier(1, 0, 0, 1) 0ms;}

.main-container .main-wrapper .mainContents section {position: relative;background-color:#FFF;}

.cover {position: fixed;left:0;right:0;top:0;bottom:0;background-color: #fff;z-index: 10000;}
.intro {position: fixed;top:70px;left:50px;right:50px;height: calc(100vh - 120px);overflow: hidden;}
.logoBox,.whBox,.blueBox {position: absolute;top: 0;bottom: 0;width: 100%;left:0;right:0;}
.blueBox {background: url('/2019/src/images/main_intro.png') right center no-repeat;background-size: cover;}
.whBox {background-color: #fff;}
.logoBox {display: flex;box-align: center;align-items: center;justify-content: center;}
.playIntro .info {border-left:10px solid red;}
.showIntro .reportWrap {left:100%;}
.playIntro .reportWrap {left:0;}
.reportWrap {position: absolute;top: 0;bottom: 0;width: 100%;-webkit-display: flex;-ms-display: flexbox;display: flex;box-align: center;-webkit-align-items: center;-ms-align-items: center;align-items: center;left:0;right:0;}
.reportWrap .txtWrap {margin-left:18.4%;margin-bottom: 4%;width:38%;}
.reportWrap .txtWrap .title {color:#FFF;font-family: 'AritaBuri';font-size: 1.8rem;line-height: 3.4rem;font-weight: 600;opacity: 0;transform: translate(-20%, 0%)}
.reportWrap .txtWrap .txtBox {margin-top: 6%;color: #fff;font-size: 2.0rem;font-weight: 500;line-height: 3.2rem;word-break: keep-all;opacity: 0;}
.logoBox {bottom:10vh;}
.logoBox .logoWrap {position: relative;overflow: hidden;width: 26.6vw;}
.logoBox .logoWrap span {display: block;opacity:0;}
.logoBox .logoWrap span img {width: 100%;}
.logoBox .copyWrap {display: none;padding-top: 13.5%;}
.logoBox .copyWrap {padding-top:0;}
.logoBox .copyWrap .title {color: #111111;font-size: 1.5rem;line-height: 2.4rem;font-weight: bold;opacity: 0;}
.logoBox .copyWrap .hTitle {position: relative;margin-top: 4%;color: #111111;font-family: 'AritaBuri';font-size: 9.6rem;line-height: 11rem;font-weight: 300;overflow: hidden;}
.logoBox .copyWrap .hTitle span {display: block;transform: translate(0%, 100%)}
.logoBox .copyWrap .coment {position:absolute;bottom:0vh;margin-top:0;opacity: 0;}
.logoBox .copyWrap .coment .txt1 {color: #666666;font-family: 'AritaBuri';font-size: 1.1rem;line-height: 1.8rem;}
.logoBox .copyWrap .coment .line {width: 0px;height: 1px;background-color: #111111;margin: 5% 0;}
.logoBox .copyWrap .coment .copyright {color: #333333;font-family: 'AritaBuri';font-size: 1.2rem;line-height:1.8rem;font-weight:bold;}
.preview { position: absolute;top:0;bottom:0;width: 100%;-webkit-display: flex;-ms-display: flexbox;display: flex;box-align: center;-webkit-align-items: center;-ms-align-items: center;align-items: center;left:0;right:0;}
.marT {margin-top: 100vh;}
.padT {padding-top: 200vh;}
.fullBox {position:relative;margin: 0 50px;margin-top: 0vh;margin-top: 170vh;overflow: hidden;}
.mainContents section {background-color: transparent;}
.mainContents section .textBox {position: relative;}
.mainContents section .textBox .txt {position: relative;overflow: hidden;text-align: start;}
.mainContents section .textBox .txt span {cursor: pointer;}
.mainContents section .textBox h1 {margin-bottom:60px;}
.mainContents section .textBox h1 .txt span {
  display:block;
  font-family: 'AritaBuri';
  font-size: 6.6rem;
  font-weight: 300;
  color: #111;
  line-height: 8.4rem;
  position: relative;
  text-shadow: 0 0 0 #222;
  position: absolute;
  left: 0;
  top: 100%;
}
.mainContents section .textBox h2 span {
  display: block;
  font-size: 2.6rem;
  font-weight: bold;
  color: #111;
  text-shadow: 0 0 0 #111;
  line-height: 1.3;
  position: absolute;
  left: 0;
  top: 100%;
}
.mainContents section .textBox p {
  font-size: 1.6rem;
  color: #333;
  line-height: 2.6rem;
  text-shadow: 0 0 0 #111;
  opacity: 0;
  word-break: keep-all;cursor: pointer;
  margin-top:18px;
}

.mainContents a.link {
  display: inline-block;
  position: relative;
  color: #3256a4;
  margin-top: 16px;
  font-weight: bold;
  font-size: 1.4rem;
  line-height: 2.8rem;
  opacity: 0;transform: translate(0%, 0%);margin-top:44px;
}
.mainContents a.link span {position: relative;display: inline-block;width: 40px;height: 40px;margin-left: 47px;margin-top: -2px;vertical-align: middle;overflow: hidden;background-color: #3256a4;border-radius: 100%;z-index: 1;}
.mainContents a.link span svg {fill:#fff;fill-rule: evenodd;position: absolute;top: 50%;left: 0px;margin-top: -5.5px;}
.mainContents a.link::after {content: '';position: absolute;top: 50%;right: 20px;width: 50px;height: 1px;margin-top: -.5px;background-color: #3256a4;}
.mainContents a.link span,.mainContents a.link::after {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;}
.mainContents a.link:hover span,.mainContents a.link:hover::after {animation-name: bounce;-moz-animation-name: bounce;}
@keyframes bounce {
	0%, 100%, 20%, 50%, 80% {
		-webkit-transform: translateX(0);
		-ms-transform:   translateX(0);
		transform:     translateX(0)
	}
	40% {
		-webkit-transform: translateX(20px);
		-ms-transform:   translateX(20px);
		transform:     translateX(20px)
	}
	60% {
		-webkit-transform: translateX(15px);
		-ms-transform:   translateX(15px);
		transform:     translateX(15px)
	}
}
.mainContents section {margin-top:-1px;}
.mainContents section .imgBox .ani_artwork {position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 0;}
.mainContents section .imgBox .ani_artwork div {position: absolute;opacity: 1;}
.mainContents section .imgBox .ani_artwork div img {display: block;width: 100%;height: 100%;}
.mainContents section {position: relative;overflow: hidden;}
.mainContents section.contens01 .imgBox .ani_artwork {right:50%;}
.mainContents section.contens03 .imgBox .ani_artwork {right:50%;}
.mainContents section.contens02 .imgBox .ani_artwork {left:50%;}

.mainContents section .chartBox {position: relative;/* padding-top:17vh; */ z-index:1;}
.mainContents section .chartWrap {display:none; min-height:272px;margin-bottom:-30px;}
.mainContents section .chartWrap p {color: #888;font-size: 1.4rem;line-height: 1.6rem;text-align: right;padding-top: 15px;}
.mainContents section .chart {border-bottom: 1px solid #ddd;position: relative;-webkit-display: flex;-ms-display: flexbox;display: flex;justify-content:flex-end;-webkit-align-items: flex-end;-ms-align-items: flex-end;align-items: flex-end;margin-bottom: -1px;height: 25vh;}
.mainContents section .barChart {width:126px;-webkit-display: flex;-ms-display: flexbox;display: flex;flex-direction:column;-webkit-align-content: flex-end;-ms-align-content: flex-end;align-content: flex-end;-webkit-align-items: flex-end;-ms-align-items: flex-end;align-items: flex-end;}
.mainContents section .barChart .value {font-family: "APHQ-Bold";letter-spacing:0;font-size:3.2rem;line-height:4.3rem;text-align: center;color: #666; opacity:0;width:86px;}
.mainContents section .barChart .value i {font-size:2rem;}
.mainContents section .barChart .bar {position: relative; width:86px; height:0px; background-color:#e6e6e6;}
.mainContents section .barChart .bar .year {display:none; position: absolute;left: 0;right: 0;bottom: 0;color: #999;font-size:1.6rem;line-height:3.0rem;text-align: center;font-weight: 600;letter-spacing:0;}
.mainContents section .barChart.point .value {color: #3256a4;}
.mainContents section .barChart.point .bar {height:0px; background-color: #3256a4;}
.mainContents section .barChart.point .bar .year {color: #fff;}
.mainContents section .chart::before {content: '';position: absolute;left: 0;bottom: -2px;width: 3px;height: 3px;background-color: #ddd;border-radius: 100%;}
.mainContents section.contens01 .chartBox {padding-right:0;}
.mainContents section.contens02 .chartBox {padding-left:0;}
.mainContents section.contens03 .chartBox {padding-top:14vh; padding-right:0;}

.mainContents section.contens01 .chart,
.mainContents section.contens02 .chart {width:470px;}

.mainContents section.contens02 .chart {justify-content: flex-start;}
.mainContents section.contens02 .barChart {align-items: flex-start;}
.mainContents section.contens02 .chart::before {left:auto;right:0;}
.mainContents section.contens02 .chartWrap p {text-align:left;}

.mainContents section .chartWrap.extra {min-width:450px;}
.mainContents section .chartWrap.extra .chart {border:none;}
.mainContents section .chartWrap.extra .chart:before {content:none;}
.mainContents section .chartWrap.extra .graphContainer {position:relative; width:100%; overflow: hidden;height: 200px;}
.mainContents section .chartWrap.extra .graphWrap {position:absolute;left:0;right:0;bottom:0;}
.mainContents section .chartWrap.extra .graphWrap .numbering {width:100%;text-align: center;overflow: hidden;margin-bottom: -26px;opacity:0;}
.mainContents section .chartWrap.extra .graphWrap .numbering .gaugeNum {font-family: "APHQ-Bold";letter-spacing:0;color:#666;font-size:2.0rem;line-height:3.0rem;display: inline-block;}
.mainContents section .chartWrap.extra .graphWrap.chart1 .numbering .gaugeNum {color:#3255a4;}
.mainContents section .chartWrap.extra .num2017 {padding-left:15px;float: left; padding-top: 28px;}
.mainContents section .chartWrap.extra .num2019 {padding-right:15px;float: right; padding-top: 17px;}
.mainContents section .chartWrap.extra .graphWrap .gaugeWrap {height:0;}
.mainContents section .chartWrap.extra .graphWrap .gaugeWrap img {display:block;width:100%;}
.mainContents section .chartWrap.extra .graphContainer .yearNum {position:absolute;left:0;right:0;bottom:0;-webkit-display: flex;-ms-display: flexbox;display: flex;flex-direction: row;align-items: baseline;opacity:0;justify-content: space-between;}
.mainContents section .chartWrap.extra .graphContainer .yearNum span {color:#999;font-size:1.3rem;line-height: 2.0rem;display: block;font-weight: 600;padding: 0 13px;letter-spacing:0;}
.mainContents section .textBox h2 {/* margin-top:60px; */}
/* .mainContents section.contens02 .textBox h2 {margin-top: 12.5%;}
.mainContents section.contens03 .textBox h2 {margin-top: 14%;margin-left: 1%;} */
/* .mainContents section.contens01 a.link {margin-top: 8%;}
.mainContents section.contens02 a.link {margin-top: 8%;}
.mainContents section.contens03 a.link {margin-top: 8%;margin-left: 1%;} */
.mainContents section.contens01 {
 padding-top: 28.5vh;
 padding-bottom: 23vh;
 padding-left:0;
 }
.mainContents section.contens01 .textBox {width:48%; z-index:1;}
.mainContents section.contens01 .textBox p {
  margin-right: 10%;
  /* margin-top: 2.5%; */
}
.fullBox.active {padding-top:0;}
.main-container .main-wrapper .mainContents section.contens00 {
    margin: 0 50px;
    background-color: transparent;
	margin-top:150vh;
}
.mainContents section .playerArea {position:relative; z-index:1;}
.mainContents section .playerArea video {width:100%; margin:0; padding:0; z-index:0; background-color:#000; vertical-align:top;}

/*.mainContents section .playerArea button {position:absolute; top:50%; left:50%; width:100px; height:100px; transform:translate(-50%,-50%); background-color:#fff; border-radius:100%; font-size:0; z-index:2; border:none;}
.mainContents section .playerArea button:not(.on):after {content:''; position:absolute; top:50%; left:50%; width:0; height:0; transform:translate(-50%,-50%); border-top:12px solid transparent; border-bottom:12px solid transparent; border-left:12px solid #000; border-right:none;}
.mainContents section .playerArea.on button {opacity:0; transition:opacity 0.5s;}
.mainContents section .playerArea.on button:hover {opacity:0.3;}
.mainContents section .playerArea.on button:before,
.mainContents section .playerArea.on button:after {content:''; position:absolute; top:50%; left:50%; width:14px; height:24px; border:none; border-left:4px solid #000; transform:translate(-50%,-50%);}
.mainContents section .playerArea.on button:after {border-left:none; border-right:4px solid #000;}*/
.mainContents section.contens01 .imgBox .imgWrap {width: 87%;position: relative;/* right: 0; */overflow: hidden;height: 92.5%;z-index: 1;float: right;}
.mainContents section.contens01 .imgBox .imgWrap img {transform: translate(-9%, -11%);}
.mainContents section .imgBox .ani_artwork div {opacity: 0;}


.mainContents section.contens01,
.mainContents section.contens02,
.mainContents section.contens03 {-webkit-display: flex;-ms-display: flexbox;display: flex;justify-content: space-around;}
.mainContents section.contens01,
.mainContents section.contens02 {align-items: baseline;}

/* s - ArtWork element */
.imgBox.pc_dom .ani_artwork div {opacity: 0;} 
.mainContents section.contens01 .imgBox.pc_dom .ani_artwork .drop_artwork1 {width: 16%;top:18%;right: 60%;}
.mainContents section.contens01 .imgBox.pc_dom .ani_artwork .drop_artwork2 {width: 7%;top: 38.5%;right: 66%;}
.mainContents section.contens01 .imgBox.pc_dom .ani_artwork .drop_artwork3 {width: 6%;top: 32.5%;right: 78%;}
.mainContents section.contens01 .imgBox.pc_dom .ani_artwork .drop_artwork4 {width: 6%;bottom: 21vh;left: 77%;}
.mainContents section.contens01 .imgBox.pc_dom .ani_artwork .drop_artwork5 {display:none; width: 10%;bottom:0;left: 28.5%;}
.mainContents section.contens01 .imgBox.pc_dom .ani_artwork .drop_artwork6 {width: 10%;bottom:12vh;left: 63.5%;}

.mainContents section.contens02 .imgBox.pc_dom .ani_artwork .drop_artwork1 {width: 7%;top:49%;right: 32%;}
.mainContents section.contens02 .imgBox.pc_dom .ani_artwork .drop_artwork2 {width: 9%;top: 61%;right: 47%;}
.mainContents section.contens02 .imgBox.pc_dom .ani_artwork .drop_artwork3 {width: 12%;top: 75%;right: 33%;}


.mainContents section.contens03 .imgBox.pc_dom .ani_artwork .drop_artwork1 {width: 13%;top:62%;right: 21%;}
.mainContents section.contens03 .imgBox.pc_dom .ani_artwork .drop_artwork2 {width: 7%;top: 58%;right: 9.3%;}
.mainContents section.contens03 .imgBox.pc_dom .ani_artwork .drop_artwork3 {width: 5%;top: 78%;right: 19.6%;}
















div[class^=draw_artwork],div[class^=paint_artwork] {opacity: 1;background-color: #fff;}
.draw_bg {position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
.imgBox.pc_dom .ani_artwork .draw_bg {background: url('/2019/src/images/main_con2_draw_bg2.png') center center no-repeat;background-size: 100% auto;}
.imgBox.pc_dom .ani_artwork .draw_artwork1 {width: 50%;bottom: 0%;right: 50%;height: 100%;}
.imgBox.pc_dom .ani_artwork .draw_artwork2 {width: 50%;bottom: 0%;right: 0%;height: 100%;}
/* e - ArtWork element */
.mainContents section.contens02 {padding-top: 0;padding-bottom: 23vh;/* background-color: aquamarine; */padding-right: 0;flex-direction: row-reverse;}
/* .mainContents section.contens02 .imgBox {position: absolute; bottom:12vh; right:0; width: 26%; height: 45vh;} */
.mainContents section.contens02 .imgBox .imgWrap {width: 88.5%;position: relative;overflow: hidden;height: 73.5%;z-index: 1;margin-left: 50px;}
.mainContents section.contens02 .imgBox .imgWrap img {
  transform: translate(-1%, -5%);
}
.mainContents section.contens02 .textBox {
  width: 49%;
  z-index:1;padding-right:6%;
}
/* .mainContents section.contens02 .textBox p {margin-top: 3.3%;margin-left: .5%;} */
.mainContents section.contens03 {padding-bottom: 36vh;padding-left:0;}
.mainContents section.contens03 .textBox {width: 39%; z-index:1;}
.mainContents section.contens03 .textBox p {margin-right: 12%;/* margin-left: 1.5%;margin-top: 3%; */}
/* .mainContents section.contens03 .imgBox {position: absolute;width: 32%;bottom: 20vh;top:0;left: 20.8vw;} */
/* .mainContents section.contens03 .imgBox .ani_artwork {width: 54%;right: 0;left: 47%;top: 0;} */
.mainContents section.contens03 .imgBox .ani_artwork .artwork1 {width: 52%;bottom: 5%;left: 0;opacity:0;}
.mainContents section.contens03 .imgBox .ani_artwork .artwork2 {width: 26%;bottom: 0;right: 0;opacity:0;}
.thumWrap {position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
.thumWrap div {position: absolute;width: 26.3%;}
.thumWrap div img {width: 100%;display: block;}
.thumWrap .thumImg1 {right: 35.8%;bottom: -17.8%;}
.thumWrap .thumImg2 {right: 26.1%;bottom: 3.0%;}
.thumWrap .thumImg3 {right: 8.8%;bottom: 4.2%;}
.thumWrap .thumImg4 {right: -0.2%;bottom: 26.2%;}
.thumWrap .thumImg5 {right: -19.2%;bottom: 21.8%;}
.thumWrap .thumImg6 {right: 40.8%;bottom: -48.8%;padding-top: 10%;}
.thumWrap .thumImg7 {right: -14.1%;bottom: -8.0%;}
.thumWrap .thumImg8 {right: 12.2%;bottom: -7.0%;}
.thumWrap .thumImg9 {right: -2.7%;bottom: -29.9%;width: 24%;}
.thumWrap .thumImg10 {right: 8.8%;bottom: 4.2%;}

/* 리스트타입 */
.listType {overflow:hidden;position:relative;}
.listType li {overflow:hidden;float:left;position:relative;width:33.33333333%;height:0;padding-top:24.99%;background-size:cover;background-repeat:no-repeat;background-position:50% 50%;}
.listType li > a {overflow:hidden;display:-webkit-box;display:flex;flex-direction:column;justify-content:flex-end;position:absolute;top:0;left:0;bottom:0;right:0;z-index:1;padding:10% 10.9%;color:#fff;}
.listType li > a:before {content:'';display:block;position:absolute;top:0;bottom:0;z-index:-1;left:0;right:0;opacity:0;transition:opacity 0.5s;}
.listType li > a > i {display:block;position:static;bottom:40%;margin-bottom:0.9rem;font-size:1.6rem;line-height:3.0rem;font-family:'AritaBuri';transition:bottom 0.5s;font-style:normal;}
.listType li > a > strong {display:block;font-size:2.6rem;line-height:3.6rem;font-weight:600;}
.listType li > a > span {display:none;opacity:0;margin:0 0 -6.0rem;font-size:1.8rem;line-height:3.0rem;MIN-height:6.0rem;transition:all 0.5s;}
.listType li > a:hover:before {opacity:1;}
.listType li > a:hover > i {position:absolute;left:10.9%;bottom:76.5%;font-style:normal;}
.listType li > a:hover > span {display:block;opacity:1;margin:0.7rem 0 0;}

/* 리스트타입 : 백그라운드 이미지 */
.listType li:nth-child(1) {background-image:url('/2019/src/images/mob/overview/overview1.png');}
.listType li:nth-child(2) {background-image:url('/2019/src/images/mob/overview/overview2.png');}
.listType li:nth-child(3) {background-image:url('/2019/src/images/mob/overview/overview3.png');}
.listType li:nth-child(4) {background-image:url('/2019/src/images/mob/overview/overview4.png');}
.listType li:nth-child(5) {background-image:url('/2019/src/images/mob/overview/overview5.png');}
.listType li:nth-child(6) {background-image:url('/2019/src/images/mob/overview/overview6.png');}
.listType li:nth-child(7) {background-image:url('/2019/src/images/mob/overview/overview7.png');}
.listType li:nth-child(8) {background-image:url('/2019/src/images/mob/overview/overview8.png');}
.listType li:nth-child(9) {background-image:url('/2019/src/images/mob/overview/overview9.png');}
.listType li:nth-child(10) {background-image:url('/2019/src/images/mob/overview/overview10.png');}
.listType li:nth-child(11) {background-image:url('/2019/src/images/mob/overview/overview11.png');}
.listType li:nth-child(12) {background-image:url('/2019/src/images/mob/overview/overview12.png');}
.listType li:nth-child(13) {background-image:url('/2019/src/images/mob/overview/overview13.png');}
.listType li:nth-child(14) {background-image:url('/2019/src/images/mob/overview/overview14.png');}

/* 리스트타입 : 백그라운드 컬러 */
.listType li:nth-child(1) > a:before,
.listType li:nth-child(6) > a:before,
.listType li:nth-child(8) > a:before,
.listType li:nth-child(10) > a:before {background:rgba(25,27,34,0.95);}
.listType li:nth-child(2) > a:before,
.listType li:nth-child(4) > a:before,
.listType li:nth-child(9) > a:before,
.listType li:nth-child(11) > a:before,
.listType li:nth-child(13) > a:before  {background:rgba(50,60,164,0.95);}
.listType li:nth-child(3) > a:before,
.listType li:nth-child(5) > a:before,
.listType li:nth-child(7) > a:before,
.listType li:nth-child(12) > a:before,
.listType li:nth-child(14) > a:before {background:rgba(51,51,51,0.95);}

/* contens05 */
.main-container .main-wrapper .mainContents section.contens05 {margin:0 50px;padding:143px 0 131px;background-color:#f6f6f6;}
.contens05 h1 {position:relative;padding-left:18%;padding-bottom:55px;color:#111;font-size:3.0rem;line-height:3.8rem;font-weight:600;opacity: 0;}
.contens05 h1 i {position:absolute;left:0;bottom:0;width:0%;height:1px;background-color:#dddddd;}
.contens05 .summaryBox {width:70%;margin:-5px 0 0 18%;display: table;justify-content: space-between;}
.contens05 .summaryBox > div {position:relative;display:table-cell;width:33.33333%;}
.contens05 .summaryBox > div > h2 {position:relative;color:#333;font-size:2.2rem;line-height:3.0rem;font-weight:500;padding:34px 0 15px;opacity:0;}
.contens05 .summaryBox > div > h2 > span {position:absolute;left:0;top:0;width:10px;height:10px;background-color:#333;border-radius:10px;transform: scale(0);}
.contens05 .summaryBox > div .illust {position:absolute;bottom:0;padding:0;display:none;}
.contens05 .summaryBox > div .illust.show {display:block;}
.contens05 .summaryBox .sub1 .illust {left:38%;top:34px;}
.contens05 .summaryBox .sub2 .illust {left:29%;top:30px;}
.contens05 .summaryBox .sub3 .illust {left:13%;top:34px;}
.contens03 .graphTitle {position:absolute;top:0;right:0;font-size:1.4rem;line-height:2.0rem;font-weight:600;}
.contens03 .graphTitle .title2::before,.contens03 .graphTitle .title3::before {content:"";display:inline-block;font-size:0;vertical-align:middle;width:6px;height:6px;margin-right:7px;border-radius:100%;}
.contens03 .graphTitle .title2 {color:#3255a4;}
.contens03 .graphTitle .title3 {color:#666666;}
.contens03 .graphTitle .title2::before {background-color:#3255a4;}
.contens03 .graphTitle .title3::before {background-color:#666666;}

.contentsFlex {display:flex;justify-content: space-between;width:63%;margin:0 auto;-webkit-align-items: flex-end;-ms-align-items: flex-end;align-items: flex-end;
-webkit-box-pack: justify; -ms-flex-pack: justify;}
.contens02 .contentsFlex {flex-direction: row-reverse;}

/******************** 미디어쿼리 ********************/
@media (max-width: 1440px) and (min-width: 768px) {
    .listType li > a {word-wrap:break-word;word-break:keep-all;}
    .listType li > a > span > br {display:none;}
}
@media (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
  .main-container {margin-top: 8vh;}
  .intro {height: calc(100vh - 16vh);left: 30px;right: 30px;top: 8vh;}
  .reportWrap .txtWrap {margin-left: 10%;}
  .fullBox {margin-left: 30px;margin-right: 30px;}
  .mainContents section .textBox h1 .txt span {font-size:5.8rem; line-height:6.2rem;}
  .mainContents section .textBox h1 .txt + .txt {margin-top:-5px;}
  .mainContents section.contens01 {padding-left:9vw;padding-right:30px;padding-top:7vh;}
  .mainContents section.contens03 {padding-left:10vw;}
  .bottomBar {height: 8vh;}
  .main-container .main-wrapper .mainContents section.contens00 {margin-left:30px;margin-right:30px;}
  .main-container .main-wrapper .mainContents section.contens05 {margin-left:30px;margin-right:30px;}
  .contentsFlex {width:75%;}
}






/* 1023이하 해상도 */
@media (max-width: 1023px) {
	.contentsFlex {width:100%;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;
    align-items: flex-start;}
	.contens02 .contentsFlex {-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
	.mainContents section.contens01 .chart, .mainContents section.contens02 .chart {
    width: 100%;
}

.mainContents section .textBox h1 {margin-bottom:19px;}
.mainContents section .textBox p {word-break: break-all;}
.mainContents section .textBox h2 {margin-bottom:14px;}
	.mainContents section.contens01,
.mainContents section.contens02,
.mainContents section.contens03 {display: block;}
	
	.intro {position:relative;}
	.logoBox {height:100vh;}
	.logoBox .copyWrap .hTitle {
	  margin-top: 0;
	  font-size: 4.8rem;
	  font-weight: 300;
	  line-height: 5.5rem;padding-bottom: 25px;
	}
	.logoBox .copyWrap .coment .txt1 {
	  font-size: 1rem;
	  color: #fff;
	  font-weight: 300;
	  margin-bottom: 3.9vh;
	  line-height: 1.6rem;
	}
	.logoBox .copyWrap .coment .copyright {
	  font-weight: 600;
	  font-size: 1.2rem;
	  color: #fff;
	  margin-top: 0;
	  margin-bottom: 4.2vh;
	  line-height: 1.7rem;
	}
	.reportWrap .txtWrap .title {
	  font-size: 1.2rem;
	  line-height: 2.6rem;
	}
	.reportWrap .txtWrap .txtBox {
	  font-size: 1.5rem;
	  font-weight: 300;
	  line-height: 2.4rem;
	  margin-top: 6%;
	  opacity: 0;
	}
	.mainContents section .textBox h1 .txt span {
	  font-size: 3.9rem;
	  line-height: 4.9rem;
	}
	.mainContents section .textBox h2 span {
	  font-size: 2.4rem;
	  line-height: 3rem;
	}
	 {
	  font-size: 1.4rem;
	  line-height: 2.2rem;
	  opacity: 0;
	}
	.mainContents a.link {
	  font-size: 1.3rem;
	  line-height: 2.1rem;
	  opacity: 0;
	}
/*     .mainContents section.contens01 .textBox h2 {margin-top: 13%;} */
	.mainContents section.contens02 .imgBox {width: 90%; right: -18%; bottom: auto; top: -8vh;}
/* 	.mainContents section.contens03 .imgBox {width: 28%; left: -11vw; bottom: auto; top: 0vh; height: 17vh;} */
	.guide1 {position: absolute;left: 0;top: 0;bottom: 0;background: url('/2019/src/images/M_01\ Main+artwork.png') left top no-repeat;background-size: 100% auto;opacity: .3;}
	.intro {
	  height: calc(100%);min-height: 100vh;
	  left: 0;
	  right: 0;
	  top: 0;
	  }
	.preview {position:relative;}
    .logoBox {transition: all 0.2s ease-in-out;
      justify-content: flex-start;
      left: 8.4%;
      bottom: 0;position:relative;
    }
    .logoBox .logoWrap {width: 65vw;position: fixed;left: 50%;top:45%;
      transform: translate(-50%, -50%)}
    .logoBox .logoWrap img {display:block;position:relative;width: 100%;transform: translate(0%, 0%)}
    .logoBox .copyWrap {width:100%;
      display: none;
	}
	.logoBox .copyWrap .title {display: none;  }
	.logoBox .copyWrap .hTitle span {display: block;transform: translate(0%, 120%)}
	.main01 .logoBox .copyWrap .hTitle span {transform: translate(0%, 100%)}
	.main02 .logoBox .copyWrap .hTitle span {transform: translate(100%, 0%)}
	.main02 .logoBox .copyWrap .coment .txt1 {transform: translate(100%, 0%);}
	.main02 .logoBox .copyWrap .coment .txt1,
	.main02 .logoBox .copyWrap .coment .copyright {overflow:hidden;opacity: 0;}
	.logoBox .copyWrap .coment {opacity: 1;bottom: 12vh;}
	.mainContents section .chartWrap {min-height:auto;}
	.main-container .main-wrapper .mainContents section.contens00 {margin:0;}
	.logoBox .copyWrap .coment .line {background-color: #fff;margin-top: 0;margin-bottom: 1vh;}
	.mainContents section .chartWrap.extra .graphWrap .numbering .gaugeNum {font-size:1.5rem;line-height:2.2rem;} 
	.mainContents section .chartWrap.extra .graphContainer .yearNum span {font-size:.9rem;}
	.reportWrap {transition: all 0.2s ease-in-out;
		-webkit-display: flex;-ms-display: flexbox;display: flex;
		-webkit-align-items: end;-ms-align-items: end;align-items: flex-end;
		position:relative;top: 0;bottom: 0;
		width: 100%;
	}
	.reportWrap .txtWrap {
	    margin-left: 11vw;
	    margin-bottom: 19%;
	    opacity: 1;width:80%;
	}
	.reportWrap .txtWrap .title {
	  font-size:1.4rem;
	}
	.main01 .reportWrap .txtWrap .title {  transform: translate(0%, 100%);}
	.main02 .reportWrap .txtWrap .title {  transform: translate(20%, 0%);}
	.main-container {margin-top: 0; }
	.fullBox {width: 100vw;height: 0; margin-left: 0;margin-right: 0; margin-top: 0vh;}
	.mainContents section {background-color:#FFF;}
	.mainContents a.link span {
	  position: relative;
	  display: inline-block;
	  width: 30px;
	  height: 30px;
	  margin-left: 32px;
	  vertical-align: middle;
	  overflow: hidden;
	  border-radius: 100%;
	  z-index: 1;
	  margin-top: -2px;
	}
	.mainContents a.link span svg {left:-4px;}
	.mainContents a.link::after {content: '';position: absolute;top: 50%;right: 0;width: 51px;height: 1px;margin-top: -.5px;background-color: #3255a4;}
	.mainContents section .chartBox {width:100% !important; padding-top: 5vh; padding-left:10vw !important; padding-right:10vw !important; box-sizing:border-box;}
	.mainContents section .chartWrap {display:block;min-height:221px;margin-bottom:0;}
	.mainContents section.contens03 .chartBox {padding-top:4vh;}
	.mainContents section.contens00 {width: 100vw; margin-left: 0;margin-right: 0;}

	.mainContents section .playerArea button:after {border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:6px solid #000; border-right:6px solid none;}
	/* .mainContents section.contens03 .textBox h2 {margin-top: 14%;margin-left: 1%;} */
	.mainContents section.contens01 a.link {margin-top: 7%;}
	.mainContents section.contens03 a.link {margin-top: 7%;margin-left: 0;}
	.mainContents section .chartWrap.extra .graphContainer {margin-top:3vh;}
	.mainContents section .chart {height:auto;}
	.mainContents section.contens01 .chart {min-height:188px;}
	.mainContents section.contens02 .chart {min-height:174px;}
	.mainContents section.contens01 {
	padding-top: 0;
	padding-bottom: 15%;
	padding-left: 0;
	padding-right: 0;
	}
	.mainContents section.contens01 .textBox {float: none;width: 100%;padding: 0 10vw;}
	.mainContents section.contens01 .textBox p {
	margin-right: 0;
	margin-top:0;
	margin-left:0;
	}	
	.mainContents section.contens01 .imgBox .imgWrap {width: 100%;height: 61%;float: none;margin: 0 auto;}
	.mainContents section.contens01 .imgBox .imgWrap img {transform: translate(0%, -13%);width: 120%;}
	.mainContents section.contens01 .imgBox .ani_artwork {position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 0;}
	.mainContents section.contens01 .imgBox .ani_artwork div {opacity: 0;}

    /* Mobile ArtWork element */
    .mainContents section.contens01 .imgBox.mob_dom .ani_artwork .drop_artwork1 {width: 14.5%; top: 3%; left: 10%;}
    .mainContents section.contens01 .imgBox.mob_dom .ani_artwork .drop_artwork2 {width: 7%; top: 9%; left: 8%;}
    .mainContents section.contens01 .imgBox.mob_dom .ani_artwork .drop_artwork4 {width: 7%; top: 23%; right: 12%;}
	.mainContents section.contens01 .imgBox.mob_dom .ani_artwork .drop_artwork5 {display:none; width: 12%;bottom:0;left: 40%;}
    .mainContents section.contens01 .imgBox.mob_dom .ani_artwork .drop_artwork6 {width:11%; top: 25%; right: 20%;}



	.mainContents section.contens02 .imgBox .imgWrap {width: 100%;height: 61%;float: none;margin: 0 auto;}
	.mainContents section.contens02 .imgBox .imgWrap img {transform: translate(0%, -13%);width: 120%;}
	.mainContents section.contens02 .imgBox .ani_artwork {position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 0;}
	.mainContents section.contens02 .imgBox .ani_artwork div {opacity: 0;}

    /* Mobile ArtWork element */
    .mainContents section.contens02 .imgBox.mob_dom .ani_artwork .drop_artwork1 {width: 12%;top: 3%;right: -3%;}
    .mainContents section.contens02 .imgBox.mob_dom .ani_artwork .drop_artwork2 {width: 12%;top: 9%;right: 11%;}
    .mainContents section.contens02 .imgBox.mob_dom .ani_artwork .drop_artwork3 {width: 14%;top: 14%;right:0%;}

	.mainContents section.contens03 .imgBox .imgWrap {width: 100%;height: 61%;float: none;margin: 0 auto;}
	.mainContents section.contens03 .imgBox .imgWrap img {transform: translate(0%, -13%);width: 120%;}
	.mainContents section.contens03 .imgBox .ani_artwork {position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 0;}
	.mainContents section.contens03 .imgBox .ani_artwork div {opacity: 0;}

    /* Mobile ArtWork element */
    .mainContents section.contens03 .imgBox.mob_dom .ani_artwork .drop_artwork1 {width: 19%;top: 3%;left: -7%;}
    .mainContents section.contens03 .imgBox.mob_dom .ani_artwork .drop_artwork2 {width: 9%;top: 1%;left: 20%;}
    .mainContents section.contens03 .imgBox.mob_dom .ani_artwork .drop_artwork3 {width: 8%;top: 10%;left: 5%;}



	/*
	.mainContents section.contens02 .imgBox.pc_dom .ani_artwork .drop_artwork1 {width: 7%;top:49%;right: 32%;}
.mainContents section.contens02 .imgBox.pc_dom .ani_artwork .drop_artwork2 {width: 9%;top: 61%;right: 47%;}
.mainContents section.contens02 .imgBox.pc_dom .ani_artwork .drop_artwork3 {width: 12%;top: 75%;right: 33%;}


.mainContents section.contens03 .imgBox.pc_dom .ani_artwork .drop_artwork1 {width: 13%;top:62%;right: 21%;}
.mainContents section.contens03 .imgBox.pc_dom .ani_artwork .drop_artwork2 {width: 7%;top: 58%;right: 9.3%;}
.mainContents section.contens03 .imgBox.pc_dom .ani_artwork .drop_artwork3 {width: 5%;top: 78%;right: 19.6%;}

	
	*/




    .imgBox.mob_dom .ani_artwork .draw_bg {background: url('/2019/src/images/main_con2_draw_bg2.png') right top no-repeat; background-size: 70% auto;}
    .imgBox.mob_dom .ani_artwork .draw_artwork1 {width: 50%;bottom: 0%;right: 0%;height: 100%;}
    .imgBox.mob_dom .ani_artwork .draw_artwork2 {width: 50%;bottom: 0%;right: 50%;height: 100%;}
    .imgBox.mob_dom .ani_artwork .paint_artwork1 {width: 75%;top: 0%;left: 0%;}
    .imgBox.mob_dom .ani_artwork .paint_artwork2 {width: 28%;bottom: 0%;right: 0%;}
    .mainContents section .textBox {z-index: 1;}
	.mainContents section.contens02 {padding-top: 0;padding-bottom:15%;padding-right: 0;padding-left: 0;}
	.mainContents section.contens02 .imgBox .imgWrap {width: 100%;height: 80%;}
	.mainContents section.contens02 .textBox {
	  float: none;
	  width: 100%;
	  margin-top: 0;
	  padding: 0 10.5vw;
	}
	.mainContents section.contens02 .textBox p {margin-top:0;}
	.mainContents section.contens02 .imgBox .imgWrap {margin: 0 auto;}
	.mainContents section.contens02 .imgBox .imgWrap img {width: 125%;}
	.mainContents section.contens03 {padding-top: 0;padding-bottom: 15%;padding-left: 0;}
	.mainContents section.contens03 .textBox {float: none;width: 100%;padding: 0 10vw;}
	.mainContents section.contens03 .textBox p {margin-right: 0;margin-left:0;margin-top:0;}
	.mainContents section.contens03 .imgBox .ani_artwork {width: 100%;float: none;left:0;}
	.mainContents section.contens03 .imgBox .imgWrap {width: 100%;height: 80%;float: none;margin: 0 auto;}
	.mainContents section.contens03 .imgBox .imgWrap img {transform: translate(-54%, -8%);width: 240%;}
	.contens03 .graphTitle {font-size:1.1rem;line-height:2.0rem;}
	.mainContents section .barChart .value {font-size:2.4rem;line-height:2.2rem;width:65px;}
	.mainContents section .barChart .value i {font-size:1.5rem;}
	.mainContents section .barChart .bar .year {font-size:1.2rem;line-height:2.2rem;}
	.mainContents section .barChart .bar {width:65px;}
	.mainContents section .barChart {width:95px;}
	.thumWrap div {width: 63.3%;}
	.thumWrap .thumImg1 {right: 13%;bottom: -27%;}
	.thumWrap .thumImg2 {right: -10.0%;bottom: -14.0%;}
	.thumWrap .thumImg4 {right: -73.5%;bottom: 1.0%;}
	.thumWrap .thumImg6 {left: -28.5%;bottom: -48.0%;}
	.thumWrap .thumImg7 {right: -19.5%;bottom: -49.5%;}
	.thumWrap .thumImg8 {right: -43.5%;bottom: -21.0%;}
	.thumWrap .thumImg10 {right: -52.2%;bottom: -14.5%;}
	.bottomBar {display: none;}

	/* contens05 */
	.main-container .main-wrapper .mainContents section.contens05 {margin:0;padding:74px 0 0;}
	.contens05 h1 {padding-left:40px;padding-bottom:49px;font-size:2.2rem;line-height:1.9rem;}
	.contens05 h1 i {display:none;}
	.contens05 .summaryBox {position:relative;width:100%;margin:0 0 0 40px;-webkit-display: flex;-ms-display: flexbox;display: flex;justify-content: space-between;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
	.contens05 .summaryBox i {position:absolute;top:15px;left:3.5px;width:1px;background-color:#ddd;height:0;}
	.contens05 .summaryBox > div {position:relative;display:block;width: auto;display: block;overflow: hidden;}
	.contens05 .summaryBox > div > h2 {position:relative;font-size:1.6rem;line-height:2.2rem;margin:0;display: inline-block;padding:8px 0 0 34px;width: 40%;vertical-align: top;}
	.contens05 .summaryBox > div > h2 > span {top:13px;width:8px;height:8px;border-radius:8px;}
	.contens05 .summaryBox > div .illust {position:static;bottom:0;padding:0;display:none;text-align: center;width: 40%;vertical-align: top;}
	.contens05 .summaryBox > div .illust.show {display:inline-block;}
	.contens05 .summaryBox .sub1 .illust {left: 0;}
	.contens05 .summaryBox .sub2 .illust {left:auto;}
	.contens05 .summaryBox .sub3 .illust {left:auto;}
	.contens05 .summaryBox .sub1 {min-height:18vh;}
	.contens05 .summaryBox .sub2 {min-height:18vh;}
	.contens05 .summaryBox .sub3 {min-height:17vh;}

	.mainContents section .chartWrap.extra {min-width:100%;}
}

/* 테블릿 */
@media (min-width: 769px) {
    .listType:before {content:'';display:block;position:absolute;bottom:0;right:0;width:33.33333333%;height:0;padding-top:24.99%;background:url('/2019/src/images/mob/overview/overview15.png') no-repeat 50% 50%;background-size:cover;}
}
@media (min-width: 768px) and (max-width: 1024px) {
	.mainContents section.contens01 .imgBox {height:85vh;}
	.mainContents section.contens02 .imgBox {height:70vh;}
	.mainContents section.contens03 .imgBox {height:68vh;}
	.thumWrap .thumImg2 img {margin-left:4%;}
}

/* 모바일 */
@media (max-width: 768px) {
    .listType li {width:50%;padding-top:39%;}
    .listType li > a {padding:7% 8.1%;}
    .listType li > a > i {margin-bottom:1.3rem;font-size:1.2rem; line-height:1.5rem;}
    .listType li > a > strong {font-size:2.0rem;line-height:2.7rem;}
	.listType li > a > 
    .listType li > a > span {margin-bottom:-3.6rem;font-size:1.4rem; line-height:1.8rem;min-height:3.6rem}
    .listType li > a:hover > i {bottom:65.5%;left:8.1%;}
	.listType li > a:hover > strong::after {content:"";display:inline-block;margin-left: 8px;width: 3.3vw;height: 2.5rem;vertical-align: top;background: url("../images/common/arr_white.png") center center no-repeat;background-size: 100% auto;}
	.whBox {height:100vh;}
	.mainContents section .chartWrap.extra .num2017 {padding-left:10px;}
	.mainContents section .chartWrap.extra .graphWrap .numbering {margin-bottom:-20px;}
}
@media (max-width: 640px) {
    .listType li {width:100%;padding-top:74.8%;}   
}


/* .contens00::after {content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.15);z-index:1;} */
.contens05 .summaryBox .sub1 .cls-1{fill:none;stroke:#333333;stroke-linecap:round;stroke-linejoin:round;stroke-width:10px;}
.contens05 .summaryBox .sub2 .cls-1{fill:none;stroke:#333333;stroke-linecap:round;stroke-linejoin:round;stroke-width:9px;}
.contens05 .summaryBox .sub3 .cls-1{fill:none;stroke:#333333;stroke-linecap:round;stroke-linejoin:round;stroke-width:6px;}

@media (min-width:1100px) and (max-width:1680px) {
	.reportWrap .txtWrap {margin-left: 10%;}
	.mainContents section.contens02 .textBox {padding-left:5vw;}
	body.en .logoBox .copyWrap .hTitle {padding-right:20px;font-size:8.6rem;margin-left:-10px;}
	
	/* .mainContents section.contens01 .chartBox {padding-right:5vw;}
	
	.mainContents section.contens03 .chartBox {padding-right:10vw;}

	.mainContents section.contens01 {padding-left:12vw;}
	.mainContents section.contens03 {padding-left:12vw;} */
} 

/* EN */
body.en .logoBox .copyWrap .hTitle {font-size:8.2;line-height:10rem;}
body.en .contens05 .summaryBox > div.sub3 .illust.show {left:20%;}
body.en .mainContents section .textBox p {word-break: keep-all;}
@media (max-width: 768px) {
	body.en .logoBox .copyWrap .hTitle {font-size:4.5rem;line-height:5rem;letter-spacing:-1px;}

}


@media (min-width: 320px) and (max-width: 375px) {

.mainContents section .chartWrap.extra .graphWrap .numbering {margin-bottom:-20px;}
.mainContents section .chartWrap.extra .num2017 {padding-top:18px;}
.mainContents section .chartWrap.extra .num2019 {padding-top:7px;}

}


	.mainContents section .playerArea button {width:0px; height:0px;opacity:0;font-size:0;line-height:0;position:absolute;left:-200px;}