@charset "UTF-8";

@import url('//fonts.googleapis.com/css?family=Black+Han+Sans');
@import url('//fonts.googleapis.com/css?family=Noto+Sans+KR:400,700,900');

/* css reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}html,body{width:100%;height:100%}body{background-color:#fff;*word-break:break-all;-ms-word-break:break-all}body,input,button{color:#222;font:16px/1.3 HelveticaNeue,AppleSDGothicNeo, 'Noto Sans KR', sans-serif, 'Malgun Gothic','맑은 고딕', Dotum, '돋움', sans-serif}h1,h2,h3,h4,h5,h6{font-size:16px;text-align:left}img,fieldset,iframe{border:0 none}ul,li{list-style:none}ol{list-style:decimal inside}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}em,address{font-style:normal}input,select{vertical-align:middle}button,label{cursor:pointer;_cursor//:hand}hr,legend,caption{display:none}td{vertical-align:middle}a{color:#222;text-decoration:none}a:visited{color:#222}a:hover{text-decoration:none}@media print{body{color:#000}}.c{clear:both;font-size:0;line-height:0;margin:0!important;padding:0!important}.dispnone{display:none}.le{float:left}.ri{float:right}.txtce{text-align:center}.txtri{text-align:right}.txtbold{font-weight:700}.txtgrey{color:#999}.txtwht{color:#fff}.hrgrey{height:0;border-bottom:1px solid #c8c8c8;width:100%;display:block;font-size:0;margin-bottom:10px}.tsize75{font-size:75%;color:#999}.nonbrd{background:none;padding:0;border:none}.link{cursor:pointer}.ls{letter-spacing:-1px}.b{font-weight:700}.u{text-decoration:underline}.pr{position:relative}.pa{position:absolute}.fl{float:left}.fr{float:right}.al{text-align:left}.ar{text-align:right}.ac{text-align:center}.aj{text-align:justify}.at{vertical-align:top}.am{vertical-align:middle}.ab{vertical-align:bottom}.hide{display:none}.show{display:block}.noBg{background:none!important}.noBgImg{background-image:none!important}.noBorder{border:0 none!important}.trans{background-color:transparent}.blind{position:absolute;display:block;overflow:hidden;left:0;top:-5000px}.tblFixed{table-layout:fixed}.txtBlock{display:inline-block}
a { -webkit-tap-highlight-color: rgba(0,0,0,0.04) }

/* CSS Reset for m.chosun.com, by Roh modify 2017.01 */
/* Reset code base from //meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain) */

/* CSS style for m.chosun.com main, 2017.02*/

/* Custom CSS
 * --------------------------------------- */

.wrapping{width:100%; margin: 0 auto;}
.section_inner {position:relative; width:100%; height:100%; max-width:1920px; margin: 0 auto;}


/* 전체 오른쪽 fix 메뉴*/
.main-nav{position:fixed; top:50%; right:0; z-index:20; transform:translateY(-95px);}
.main-nav ul li {display:block;margin:7px 10px;color: #ffd616;position: relative; text-align:right;}
.main-nav ul li:after {content:""; display:block; position: absolute;top:50%; right:0; height:3px; background:#000; width:30px; transition: all 0.1s ease;}
.main-nav ul li.active:after {background:#ffd616; width:60px; transition: all 0.1s ease;}
.main-nav ul li.active a {visibility:visible; color:#ffd616; padding-right: 73px; transition: all 0.1s ease;}
.main-nav ul li a { visibility: hidden; font-size:20px; font-weight:700; color:#000; padding-right: 50px;}


@media all and (min-width: 769px) {
.main-nav ul li a { position: relative; visibility: visible; display: block; height: 25px; font-size: 0; z-index: 5 }
.main-nav ul li a:after { content: ' '; position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%;}
.main-nav ul li.active a {font-size: 20px;}
.main-nav ul li:after { z-index: 1 }
.main-nav ul li:hover{transition: all 0.3s ease;}
.main-nav ul li:hover a{text-decoration:none; visibility: visible; font-size: 20px; color:#ffd616; padding-right:73px;}
.main-nav ul li:hover:after {width:50px; background:#ffd616;}
}

/* ._motion {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
} */


/**************************  section1 **************************/
.section.sec01 {min-height:800px; position:relative;}
.section.sec01 .section_inner {min-height: 800px; background:#467fff}
.section.sec01 .intro_txt_box {position:absolute; top: 50%; left: 50%; transform: translate(-50%, -61%);text-align:center; z-index:1;}
.section.sec01 .intro_txt_box .intro_tit_box {position:absolute; top:56%; }
.section.sec01 .intro_txt_box .motion_eye{position:relative; width:510px; height:203px; background: url("//news.chosun.com/international/future100/img/main/eye_bg.png") no-repeat 0px 0px; margin:0 auto; }
.section.sec01 .intro_txt_box .ic_eye {position: absolute; top:85px; left:175px; width:259px; height:50px; background: url("//news.chosun.com/international/future100/img/main/eye_ic.png") no-repeat 0px 0px;}
.section.sec01 .intro_txt_box .title_txt{position:relative; margin:0 auto; padding-bottom:28px; }
.section.sec01 .intro_txt_box .title_txt img{text-align: center}
.section.sec01 .intro_txt_box .titie_desc {font-size:25px; color:#fff; padding-top:30px;line-height:1.520em; }
.section.sec01 .intro_txt_box .titie_desc em {display:inline-block; background:#ffd616; color:#000; font-weight:700; line-height: 1.2;}
.section.sec01 .intro_txt_box .titie_desc span{white-space:nowrap;}
.section.sec01 .intro_txt_box .titie_desc br{display: none}
.section.sec01 .intro_txt_box .flag {display:block; width:486px; height:251px; position:absolute; top:50%; left:50%;
  background-image: url("//news.chosun.com/international/future100/img/main//intro_flag.png");
  transform: translate(-54%, -144%);
  /*animation: flag_moving 3s steps(2) infinite normal;
   -webkit-animation: flag_moving 3s steps(2) infinite normal;
  -moz-animation: flag_moving 3s steps(2) infinite normal;
  -ms-animation: flag_moving 3s steps(2) infinite normal;
  -o-animation: flag_moving 3s steps(2) infinite normal;  */
}

.section.sec01 .motion_txt {
  -webkit-animation:fadetxt 2s cubic-bezier(0, 0, 0.43, 0.57) forwards;
  -moz-animation:fadetxt 2s cubic-bezier(0, 0, 0.43, 0.57) forwards;
  animation:fadetxt 2s cubic-bezier(0, 0, 0.43, 0.57) forwards;
} 
 @keyframes fadetxt {
    from{opacity:0}
    to{opacity:1; visibility:visible;}
  } 


@keyframes flag_moving {
  0% {background-position: 0px 0px; } 
  100% {background-position: -972px -0px; } 
}
@-webkit-keyframes flag_moving {
  0% {background-position: 0px 0px; } 
  100% {background-position: -972px -0px; } 
}
@-moz-keyframes flag_moving {
  0% {background-position: 0px 0px; } 
  100% {background-position: -972px -0px; } 
}


.section.sec01 .intro_bg {position:absolute; left:0%; bottom:0; width:100%; height:548px; background:url("//news.chosun.com/international/future100/img/main/intro_bg.png") no-repeat left bottom;}
.section.sec01 .building_left {position:absolute; left:0%; bottom:0; transform: translateX(3%); width:973px; height:243px; background:url("//news.chosun.com/international/future100/img/main/img_europe.png") no-repeat;}
.section.sec01 .building_right {position:absolute; right:0%; bottom:0; transform: translateX(-9%); width:768px; height:300px; background:url("//news.chosun.com/international/future100/img/main/img_amca.png") no-repeat;}
.section.sec01 .fly {position:absolute; z-index: 0}
.section.sec01 .cloud {position:absolute;}
.section.sec01 .cloud.l1 {top:7%; left:25%;}
.section.sec01 .cloud.l2 {top:35%; right:40%;}
.section.sec01 .cloud.r1 {top:20%; left:40%;}
.section.sec01 .cloud.r2 {top:30%; right:25%;}

.section.sec01 .intro_bg {
  -webkit-animation: come_up 1s ease;
  -moz-animation: come_up 1s ease;
  -ms-animation: come_up 1s ease;
	animation: come_up 1s ease;
}

.section.sec01 .building_left {
	-webkit-animation: come_up 1s ease;
  -moz-animation: come_up 1s ease;
  -ms-animation: come_up 1s ease;
	animation: come_up 1s ease;
}

.section.sec01 .building_right {
  -webkit-animation: come_up 1.5s ease;
  -moz-animation: come_up 1.5s ease;
  -ms-animation: come_up 1.5s ease;
  animation: come_up 1.5s ease;
}

/* .section.sec01 .titie_desc {
  -webkit-animation: text_up 1s ease;
  -moz-animation: text_up 1s ease;
  -ms-animation: text_up 1s ease;
  animation: text_up 1s ease;
} */

.section.sec01 .fly {
  -webkit-animation: fly 15s linear 0s infinite;
  -moz-animation: fly 15s linear 0s infinite;
  -ms-animation: fly 15s linear 0s infinite;
  animation: fly 15s linear 0s infinite;
}

.section.sec01 .cloud.l1 {
  -webkit-animation: moveclouds 70s linear infinite;
  -moz-animation: moveclouds 70s linear infinite;
  -ms-animation: moveclouds 70s linear infinite;
  animation: moveclouds 70s linear infinite;
}

.section.sec01 .cloud.l2 {
  -webkit-animation: moveclouds02 140s linear infinite;
  -moz-animation: moveclouds02 140s linear infinite;
  -ms-animation: moveclouds02 140s linear infinite;
  animation: moveclouds02 140s linear infinite;
}

.section.sec01 .cloud.r1 {
  -webkit-animation: moveclouds03 210s linear infinite;
  -moz-animation: moveclouds03 210s linear infinite;
  -ms-animation: moveclouds03 210s linear infinite;
  animation: moveclouds03 210s linear infinite;
}

.section.sec01 .cloud.r2 {
  -webkit-animation: moveclouds04 70s linear infinite;
  -moz-animation: moveclouds04 70s linear infinite;
  -ms-animation: moveclouds04 70s linear infinite;
  animation: moveclouds04 70s linear infinite;
}

@keyframes come_up {
	0% {opacity:0; bottom: -500px;}	
	75% {bottom:10px;}	
	100% {opacity: 1;bottom: 0;}
}
@-webkit-keyframes come_up {
	0% {opacity:0; bottom: -500px;}	
	75% {bottom:10px;}	
  100% {opacity:1; bottom: 0;}
}
@-moz-keyframes come_up {
	0% {opacity:0; bottom: -500px;}	
	75% {bottom:10px;}	
	100% {opacity: 1;bottom: 0;}
}


@keyframes text_up {
	0% {opacity:0; padding-top: 500px;}	
	100% {opacity: 1; padding-top: 40px;}
}
@-webkit-keyframes text_up {
	0% {opacity:0; padding-top: 500px;}	
	100% {opacity: 1; padding-top: 40px;}
}
@-moz-keyframes text_up {
	0% {opacity:0; padding-top: 500px;}	
	100% {opacity: 1; padding-top: 40px;}
}


@keyframes fly {
  0% {top:10%; right:0%;}
  75% {top:40%; right:50%;}
  100% {top:0%; right:100%;}
}
@-webkit-keyframes fly {
  0% {top:10%; right:0%;}
  75% {top:40%; right:50%;}
  100% {top:0%; right:100%;}
}
@-moz-keyframes fly {
  0% {top:10%; right:0%;}
  75% {top:40%; right:50%;}
  100% {top:0%; right:100%;}
}


@keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-webkit-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}


@keyframes moveclouds02 {
	0% {margin-right: 1000px;}
	100% {margin-right: -1000px;}
}
@-webkit-keyframes moveclouds02 {
	0% {margin-right: 1000px;}
	100% {margin-right: -1000px;}
}
@-moz-keyframes moveclouds02 {
	0% {margin-right: 1000px;}
	100% {margin-right: -1000px;}
}


@keyframes moveclouds03 {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-webkit-keyframes moveclouds03 {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds03 {
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}


@keyframes moveclouds04 {
	0% {margin-right: 1000px;}
	100% {margin-right: -1000px;}
}
@-webkit-keyframes moveclouds04 {
	0% {margin-right: 1000px;}
	100% {margin-right: -1000px;}
}
@-moz-keyframes moveclouds04 {
	0% {margin-right: 1000px;}
	100% {margin-right: -1000px;}
}






/**************************  section2 **************************/
.fp-controlArrow.fp-next {background:url("//image.chosun.com/interactive/mt100//sec02_arrow_next.png") no-repeat;border:0;width:39px;height:72px;}
.fp-controlArrow.fp-prev {background:url("//image.chosun.com/interactive/mt100//sec02_arrow_prev.png") no-repeat;border:0;width:39px; height:72px;}
.fp-slidesContainer {width: 100% !important;transform: none !important;}
.fp-slide {width: 100% !important; position: absolute;left: 0;top: 0;visibility: hidden;opacity: 0;z-index: 0;transition: all .1s ease-in-out;}
.fp-slide.active {visibility: visible;opacity: 1;z-index: 1;}

.section.sec02 {min-height: 800px; position:relative;}
.section.sec02 .section_inner {min-height: 800px}
.section.sec02 .contbox {position:relative; float:left; width:50%; height:100%; overflow: hidden}
.section.sec02 .photo{position:absolute; top:50%; left:50%; transform: translate(-50%,-80%);}
.section.sec02 .contbox .cont_bg {width:100%; height:100%; background-position:50% 50%;
  transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -webkit-transform: scale(1.5, 1.5);
  -moz-transform: scale(1.5, 1.5);
  -o-transform: scale(1.5, 1.5);
  transition: transform 18s ease-out, opacity 1s ease 0.3s;}

.section.sec02.fp-section.active .fp-table.active .contbox .cont_bg {transform: scale(1, 1);} 
.section.sec02 .contbox .cont_bg.reverse {transform: scale(1, 1); transition-delay: 0s;}
.section.sec02.fp-section.active .fp-table.active .contbox .cont_bg.reverse {
  transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  -webkit-transform: scale(1.5, 1.5);
  -moz-transform: scale(1.5, 1.5);
  -o-transform: scale(1.5, 1.5);
}

.section.sec02 .cont_bg.bg01 {background: url("//news.chosun.com/international/future100/img/main/p01_bg.jpg")no-repeat;}
.section.sec02 .cont_bg.bg02 {background: url("//news.chosun.com/international/future100/img/main/p02_bg.jpg")no-repeat;}
.section.sec02 .cont_bg.bg03 {background: url("//news.chosun.com/international/future100/img/main/p03_bg.jpg")no-repeat;}
.section.sec02 .cont_bg.bg04 {background: url("//news.chosun.com/international/future100/img/main/p04_bg.jpg")no-repeat;}
.section.sec02 .cont_bg.bg05 {background: url("//news.chosun.com/international/future100/img/main/p05_bg.jpg")no-repeat;}

.section.sec02 .tit_txt_bx {font-size:100px; position:absolute; bottom:12%; left:12%; z-index:2;}

.section.sec02 .tit_txt_bx .txt_bx_l {float:left;font-family: 'Black Han Sans', sans-serif;  text-align:right;}
.section.sec02 .tit_txt_bx .txt_bx_l:after {content:""; display:block; position:absolute; top:40px; left:440px; height:5px; background: #467fff; width:260px;}
.section.sec02 .tit_txt_bx .txt_bx_l span{display:block; color:#fff; line-height: 0.8em; margin-bottom:9px}
.section.sec02 .tit_txt_bx .txt_bx_l em{display:inline-block; padding-top:9px; line-height: 0.8em; background:#467fff;}
.section.sec02 .tit_txt_bx .txt_bx_l em i {display: inline-block; font-style: normal; font-size:120px;}
.section.sec02 .tit_txt_bx .txt_bx_r { font-size:70px; font-weight: 900; text-align:left; padding-left:710px; line-height:1.1em;}
.section.sec02 .tit_txt_bx .txt_bx_r span{display:block; color:#000}
.section.sec02 .tit_txt_bx .txt_bx_r span.txt_blue {color:#467fff;}

.section.sec02 .tit_txt_bx.yellow .txt_bx_l span{color:#000;}
.section.sec02 .tit_txt_bx.yellow .txt_bx_l em {background:#ffd616}
.section.sec02 .tit_txt_bx.yellow .txt_bx_l:after {background:#ffd616}
.section.sec02 .tit_txt_bx.yellow .txt_bx_r span.txt_ylw, .section.sec02 dl.art_txt_bx dd.up_tit.txt_ylw{color:#ffd616}

.section.sec02 dl.art_txt_bx { position:absolute; top:10%; left:8%; }
.section.sec02 dl.art_txt_bx dd.up_tit {font-size:30px; color:#467fff; font-weight: 900;}
.section.sec02 dl.art_txt_bx dt{font-size:50px; display: block; color:#fff; line-height: 1.2em; font-weight: 900;}
.section.sec02 dl.art_txt_bx dd.desc {font-size:17px; color:#fff; padding-top:20px; line-height:1.471em}
.section.sec02 dl.art_txt_bx dd.desc span{display:block}
.section.sec02 dl.art_txt_bx dd.p_by{font-size:14px; color:#fff; opacity: 0.5; margin:25px 0 50px 0}

.section.sec02 .fp-controlArrow.fp-prev {left:50%; top: auto; bottom:5%; transform: translateX(-200px);}
.section.sec02 .fp-controlArrow.fp-prev:hover { animation: btnArrHoverLeft infinite ease 1s ; -webkit-animation: btnArrHoverLeft infinite ease 1s ; }

.section.sec02 .fp-controlArrow.fp-next {right:50%; top: auto; bottom:5%; transform: translateX(-58px);}
.section.sec02 .fp-controlArrow.fp-next:hover { animation: btnArrHoverRight infinite ease 1s; -webkit-animation: btnArrHoverRight infinite ease 1s ; }



 .section.sec02.fp-section.active .fp-slide.fp-table.active .s_motion_photo {
  -webkit-animation:fadeDown .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  -moz-animation:fadeDown .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  animation:fadeDown .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  }
  
  .section.sec02.fp-section.active .fp-slide.fp-table.active .s_motion_txt {
  -webkit-animation:fadeUp .7s cubic-bezier(0, 0, 0.96, 1.21) forwards;
  -moz-animation:fadeUp .7s cubic-bezier(0, 0, 0.96, 1.21) forwards;
  animation:fadeUp .7s cubic-bezier(0, 0, 0.96, 1.21) forwards;
  } 

  .section.sec02.fp-section.active .fp-slide.fp-table.active .s_motion_art {
  -webkit-animation:fadeDownArt 1s cubic-bezier(0, 0, 0.96, 1.21) forwards;
  -moz-animation:fadeDownArt 1s cubic-bezier(0, 0, 0.96, 1.21) forwards;
  animation:fadeDownArt 1s cubic-bezier(0, 0, 0.96, 1.21) forwards;
  } 

  @keyframes fadeDown {
    from{transform: translate(-50%,-150%); -webkit-transform: translate(-50%,-150%); -moz-transform: translate(-50%,-150%); -ms-transform: translate(-50%,-150%); -o-transform: translate(-50%,-150%);opacity:0}
    to{transform: translate(-50%,-80%); -webkit-transform: translate(-50%,-80%); -moz-transform: translate(-50%,-80%); -ms-transform: translate(-50%,-80%); -o-transform: translate(-50%,-80%); opacity:1; visibility:visible;}
  } 

  @keyframes fadeUp {
    from{transform: translateY(50%); -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); opacity:0}
    to{transform: translateY(-11%); -webkit-transform: translateY(-11%); -moz-transform: translateX(-11px); -ms-transform: translateX(-11px); -o-transform: translateX(-11px); opacity:1; visibility:visible;}
  } 

  @keyframes fadeDownArt {
    from{opacity:0}
    to{opacity:1; visibility:visible;}
  } 

  @keyframes btnArrHoverLeft {
    0% { transform: translateX(-200px); -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -o-transform: translateX(-200px); }
    50% { transform: translateX(-210px); -webkit-transform: translateX(-210px); -moz-transform: translateX(-210px); -ms-transform: translateX(-210px); -o-transform: translateX(-210px); }
    100% { transform: translateX(-200px); -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); -ms-transform: translateX(-200px); -o-transform: translateX(-200px); }
  }
  @keyframes btnArrHoverRight {
    0% { transform: translateX(-58px); -webkit-transform: translateX(-58px); -moz-transform: translateX(-58px); -ms-transform: translateX(-58px); -o-transform: translateX(-58px); }
    50% { transform: translateX(-48px); -webkit-transform: translateX(-48px); -moz-transform: translateX(-48px); -ms-transform: translateX(-48px); -o-transform: translateX(-48px); }
    100% { transform: translateX(-58px); -webkit-transform: translateX(-58px); -moz-transform: translateX(-58px); -ms-transform: translateX(-58px); -o-transform: translateX(-58px); }
  }

  /* IE9는 \9를*/
  @media all and (monochrome:0) {
    .section.sec01 .fly { top:50%\9; left:75%\9; }
    .sec01.section .l2.cloud {top:20%\9; left:10%\9;}
    .sec01.section .r1.cloud {top:10%\9; left:87%\9;} 
  }
  /* IE10과 IE11은 -ms-high-contrast */
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .section.sec01 .fly { top:50%; left:75%; }
    .sec01.section .l2.cloud {top:20%; left:10%;}
    .sec01.section .r1.cloud {top:10%; left:87%;}
  }

  /* made by */
.itr_made { margin: 30px 0; padding: 25px 30px; background: #f8f8f8; border: solid 1px #d7d7d7; text-align: center }
.itr_made dl { display: inline-block; font-size: 14px; color: #777 }
.itr_made dl + dl { margin-left: 45px }
.itr_made dl dt { display: inline; margin-right: 10px; color: #000 }
.itr_made dl dd { display: inline }

.floating_banner {position:fixed; top:6%; right:0; z-index:20; transform: translateX(1px);}



/* 
 _____ ______   ________  ________  ___  ___       _______      
|\   _ \  _   \|\   __  \|\   __  \|\  \|\  \     |\  ___ \     
\ \  \\\__\ \  \ \  \|\  \ \  \|\ /\ \  \ \  \    \ \   __/|    
 \ \  \\|__| \  \ \  \\\  \ \   __  \ \  \ \  \    \ \  \_|/__  
  \ \  \    \ \  \ \  \\\  \ \  \|\  \ \  \ \  \____\ \  \_|\ \ 
   \ \__\    \ \__\ \_______\ \_______\ \__\ \_______\ \_______\
    \|__|     \|__|\|_______|\|_______|\|__|\|_______|\|_______|
*/


@media all and (max-width:768px) {
  
  .sec01,
  .sec01 .fp-tableCell { height: auto!important}
  .section.sec01, .section.sec02 {min-height:100vh;}
  .section.sec01 .section_inner{ min-height:100vh; background:#467fff}
  .section.sec02 .section_inner { min-height:100vh;}

  /* 모바일 전체 오른쪽 fix 메뉴*/
  .main-nav{position:fixed; top:0; left:0; z-index:20; transform:translateY(0); background:#467fff; overflow-x: scroll;-webkit-overflow-scrolling: touch;scroll-snap-type: mandatory;-webkit-scroll-snap-type: mandatory;}
  .main-nav ul {overflow:hidden; width: 600px; white-space: nowrap; height: 45px;}
  .main-nav ul li {float:left; padding:12px 10px; margin:0;color: #ffd616; position: relative;text-align: center;}
  .main-nav ul li:after {display: none}
  .main-nav ul li.active:after {content:""; display:block; position: absolute; top:auto; bottom:1px; right:0; height:2px; width:100%; background:#ffd616;}
  .main-nav ul li.active a {color:#ffd616; font-weight:600; padding-right:0}
  .main-nav ul li a {visibility:visible; font-size:17px; margin-right:0px; font-weight:normal; color: #fff;  padding-right:0; text-decoration: none}
  .main-nav ul li.active a {}

  .fp-responsive.fp-viewing-firstSection .main-nav {display: none}

  /* section01 */
  .fp-tableCell {display: block}
   .section.sec01 .building_left, .section.sec01 .building_right, .cloud.l2, .cloud.r1,
   .section.sec02 dl.art_txt_bx dd.desc span.txt_m_hidden
   {display:none}

  .section.sec01 .intro_bg {background:none}
  .section.sec01 .intro_bg.m {background: url("//news.chosun.com/international/future100/img/main//intro_bg_m.png")no-repeat left bottom; background-size:100%;}
  .section.sec01 .intro_txt_box{}
  .section.sec01 .intro_txt_box .flag {position: absolute; top:-116px; left:-84px; transform: scale(0.5); margin-left: 0; height:230px; background-image: url("//news.chosun.com/international/future100/img/main//intro_flag_m.png")}
  .section.sec01 .intro_txt_box .motion_eye {background-size:100%; width:255px; height:104px;}
  .section.sec01 .intro_txt_box .ic_eye {position: absolute; top:40%; left:89px; width:129px; height:25px; background-size:100%}

  .section.sec01 .intro_txt_box .title_txt {height:auto; width:auto; padding-bottom:15px;}
  .section.sec01 .intro_txt_box .title_txt img {width:195px;}
  .section.sec01 .intro_txt_box .titie_desc {font-size:15px}
  .section.sec01 .intro_txt_box .titie_desc br{display: block}
  .section.sec01 .fly {background-size:100%; transform: scale(0.5);}
  .section.sec01 .cloud.l1 {left:0; top: 9%; transform: scale(0.6);}
  .section.sec01 .cloud.r2 {bottom:25%; top:auto; transform: scale(0.7);}

  @keyframes moveclouds {
    0% {right:0%;}
    100% {right:0%}
  }

  @keyframes moveclouds04 {
	  0% {left:0%;}
    100% {left:100%;}
}

  /* section02 */
  .section.sec02 .contbox {width:100%; float:none; height:50%; z-index: 1;}
  .section.sec02 .contbox.c_over {z-index: 2; overflow: visible;}
  .section.sec02 .contbox.m_hight_fix {height:50%; overflow:hidden;}
  .section.sec02 .contbox.bg01 {float:left;}
  .section.sec02 .photo {position:static; top:auto;transform:translate(0%, 44%); text-align:center; opacity: 1;}
  .section.sec02 .photo img{height:237px}
  .section.sec02 .tit_txt_bx {font-size:30px; bottom:auto; top:5%; left:4%; overflow: hidden; width:100%;}
  .section.sec02 .tit_txt_bx .txt_bx_l:after {top:18px; left:126px; height:2px; width:45px;}
  .section.sec02 .tit_txt_bx .txt_bx_l em i {font-size:35px;}
  .section.sec02 .tit_txt_bx .txt_bx_r {font-size:18px; padding:8px 0 0 177px; font-weight:600; line-height:1.300em}
  .section.sec02 .tit_txt_bx .txt_bx_r:before {left:125px; height:2px; width:80px; top:17px; }
  .section.sec02 .tit_txt_bx .txt_bx_l span {margin-bottom:5px;}

  .section.sec02 .cont_bg.bg01,
  .section.sec02 .cont_bg.bg02,
  .section.sec02 .cont_bg.bg03, 
  .section.sec02 .cont_bg.bg04, 
  .section.sec02 .cont_bg.bg05 {background-size: 100%;}
  .section.sec02 dl.art_txt_bx {left:0; padding: 0 15px; top: 25%;}
  .section.sec02 dl.art_txt_bx dd.up_tit {font-size:20px;}
  .section.sec02 dl.art_txt_bx dd.desc {font-size:14px;}
  .section.sec02 dl.art_txt_bx dd.desc span {display:inline}
  .section.sec02 dl.art_txt_bx dt {font-size:20px;}
  .section.sec02 dl.art_txt_bx dd.p_by {margin: 15px 0 0 0;}
  .section.sec02 .art_txt_bx .map{display:none}

  .fp-controlArrow.fp-next {background:url("//news.chosun.com/international/future100/img/main//m_arrow_next.jpg") no-repeat;border:0;width:35px;height:40px;background-size: 100%;}
  .fp-controlArrow.fp-prev {background:url("//news.chosun.com/international/future100/img/main//m_arrow_prev.jpg") no-repeat;border:0;width:35px; height:40px;background-size: 100%;}
  .section.sec02 .fp-controlArrow.fp-prev {left:auto; top:auto; transform: translateX(0); bottom:0; right:35px; margin-top:0;}
  .section.sec02 .fp-controlArrow.fp-next {left:auto; top:auto; transform: translateX(0); bottom:0; right:0; margin-top:0;}

  .section.sec02.fp-section.active .fp-slide.fp-table.active .s_motion_photo {
    -webkit-animation:mfadeUp .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    -moz-animation:mfadeUp .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    animation:mfadeUp .6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
  }

  @keyframes btnArrHoverRight {
      0% { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(-58px); }
      50% { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(-48px); }
      100% { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(-58px); }
  }
    @keyframes btnArrHoverLeft {
      0% { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(-58px); }
      50% { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(-48px); }
      100% { transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(-58px); }
  }

  @keyframes mfadeUp {
    from{transform: translateY(44%); -webkit-transform:translateY(44%); -moz-transform:translateY(44%); -ms-transform:translateY(44%); -o-transform:translateY(44%);opacity:1}
    to {transform:translateY(44%);-webkit-transform:translateY(44%);-moz-transform:translateY(44%);-ms-transform:translateY(44%);-o-transform:translateY(44%);opacity: 1;visibility: visible;
    }
  }

  @keyframes fadeUp {
    from{top:-10%;left:0%; opacity:1}
    to{top:12%; left:0%; opacity:1; visibility:visible;}
  } 

   @keyframes fadeDownArt {
    from{opacity:1}
    to{opacity:1; visibility:visible;}
  } 

  .itr_made { margin: 20px 17px; padding: 10px 15px }
  .itr_made dl { font-size: 12px }
  .itr_made dl + dl { margin-left: 10px }
  .itr_made dl dt { margin-right: 5px }
  /* body.fp-responsive.fp-viewing-secondSection-0 .section.fp-section.active.fp-completely,
  body.fp-responsive.fp-viewing-thirdSection .section.fp-section.active.fp-completely,
  body.fp-responsive.fp-viewing-fourSection .section.fp-section.active.fp-completely,
  body.fp-responsive.fp-viewing-fiveSection .section.fp-section.active.fp-completely,
  body.fp-responsive.fp-viewing-sixSection .section.fp-section.active.fp-completely
  {top:45px !important} */

  .fp-responsive .floating_banner {position:fixed; top:8%; right:0; z-index:20; transform: translateX(1px); opacity: 0; 
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; zoom:0.5; display:none }
  .fp-responsive.fp-viewing-firstSection .floating_banner {position:fixed; top:8%; right:0; z-index:20; transform: translateX(1px); visibility:visible; display:block; opacity:1}
  .fp-responsive .floating_banner a {display: inline-block}
  /* .sec02, .sec03, .sec04, .sec05, .sec06   {padding-top:45px} */
}

/* 900 이하일때 (작은 노트북) */
@media all and (max-height: 900px) and (min-width: 1024px) {
  .section.sec01 .building_left {left:50%; transform: translateX(-50%);}
  .section.sec01 .intro_bg {display: none}
  .section.sec01 .building_right {display: none}
  .section.sec01 .intro_txt_box .flag {transform: scale(0.8) translate(-68%, -165%);}
  .section.sec01 .intro_txt_box .motion_eye {transform: scale(0.8);}
  .section.sec01 .intro_txt_box .title_txt {transform: scale(0.8); padding-bottom:0px;}

  .section.sec02 .tit_txt_bx {transform: scale(0.8); bottom: 17%;}
  .section.sec02 .tit_txt_bx .txt_bx_r {padding-left:619px;}
  .section.sec02 .tit_txt_bx .txt_bx_l:after {width:160px;}
  /* .section.sec02 .photo {transform: scale(0.8) translate(-50%,-80%);} */
  .section.sec02 .photo > img {transform: scale(0.8)}
  .section.sec02 dl.art_txt_bx dd.map {visibility: hidden}
}