/* BASIC css start */
/* 젝시믹스소개 css시작 */
/* text fadeUp */
#fullpage { position:relative; }
#wrap {width:100%; height:100%;}
.fp-tableCell{ display:table-cell; vertical-align:middle; width:1280px; max-width:100%; height:100%;}
.section-con { opacity:0; transition:all 1s 0s; -webkit-transform: translate3d(0,50%,0); -moz-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0);}
.active .section-con {   -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; transition-delay:.6s !important;}
.section{ position:relative; text-align:center; background-position:center center; background-repeat:no-repeat; width:100%; background-size:cover; display:table; table-layout:fixed;  overflow:hidden; }
.story-logo { position:fixed; top:-25px; left:114px; z-index:2; transform:rotate(-90deg);}
.story-tit { position:fixed; right:78px; top:45px; color:#fff; font-size:18px; z-index:99; }

.go-home{ position:fixed; bottom:39px; right:50px; z-index:2;}
.go-home a{ color:#fff; display:inline-block; border-radius:30px; border:1px solid #fff; padding:10px 35px; font-size:13px;}
.go-home a:hover{ background:#111; transition: 0.5s; border: 1px solid #111;}

#section1{background-image:url("http://xexymix.jpg3.kr/xexymix/PL/img/story_01.jpg");}
#section2{background-image:url("http://xexymix.jpg3.kr/xexymix/PL/img/story_02.jpg");}
#section3{background:#ac846a;}
#section4{background-image:url("http://xexymix.jpg3.kr/xexymix/PL/img/story_03.jpg");}
#section5{background-image:url("http://xexymix.jpg3.kr/xexymix/PL/img/story_05.jpg");}
#section6{background-image:url("http://xexymix.jpg3.kr/xexymix/PL/img/story_05_1.jpg");}
/*#section7{background-image:url("http://xexymix.jpg3.kr/xexymix/PL/img/story_05.jpg");}*/
#section8{background-image:url("http://xexymix.jpg3.kr/xexymix/PL/img/story_10.jpg");}

.section .txt-con { text-align:left; }
.section .txt-con p:nth-child(1) { font-size:48px; font-weight:bold; color:#fff; }
.section .txt-con p:nth-child(2) { font-size:16px; color:#fff; line-height:1.6; }

#section1 .txt-con { text-align:center; line-height:1; }
#section1 .txt-con p { margin-top:37px; margin-bottom:33px; line-height:1.25; }
#section1 .txt-con span { font-size:11px; color:#a09289; }
#section1 .logo{opacity: 0.5;}
#section1 .logo img{width:80px;}

#section2 .txt-con, #section4 .txt-con, #section8 .txt-con { margin-left:20%; }
#section2 .txt-con p:last-child { margin-top:40px; font-weight:300; }

#section3 .txt-con { margin-left:20%; }
#section3 .txt-con:after { content:''; display:block; clear:both; }
#section3 .txt-con .col:first-child { float:left; width:500px; margin-right:150px;   }
#section3 .txt-con .col:last-child { float:left; width:500px; }
#section3 .txt-con p:nth-child(2) { margin-top:50px; font-weight:300; }
#counter{-webkit-text-stroke: 1px #fff; font-weight: 600;font-size: 150px; color: transparent;}
.counter.on{opacity: 1;}

#section4 .txt-con p:first-child { font-weight:300 !important; }
#section4 .txt-con p:first-child span { font-weight:bold; }
#section4 .txt-con p:last-child { font-size:18px; margin-top:65px; }

#section5 .txt-con{ width:645px; margin:auto; position:relative;}
#section5 .txt-con .fulltText01{text-align: center;}
#section5 .Text01{ position:absolute; top:94px; left:64px; }
#section5 .Text01 span{ color:#fff; font-size:60px; font-weight:600; }
#section5 .Text01 .txt01{ position:absolute; left:23px;}
#section5 .Text01 .txt02{ position:absolute; left:160px;}
#section5 .Text01 .txt03{ position: absolute; left: 377px;}
#section5 p{font-size:14px; color:#fff;}
#section5 .plusBtn{ opacity: 0; position: absolute; top:109px;}
#section5 .btn01{ position: absolute; left: 150px!important;}
#section5 .btn02{ position: absolute; right: 202px; left: inherit!important;}
#section5 .txt-con p { font-size:16px; line-height:1.6; text-align:center; font-weight: 300; }

#section6 .section-con { margin-left:28%; width:1280px; }
#section6 .section-con:after { content:''; display:block; clear:both; }
#section6 .fp-tableCell { display:inherit; }
#section6 h2 { font-size:48px; opacity:0.6; letter-spacing:-1px; line-height:1.25; font-weight:500; text-align:left; margin-top:115px; color:#fff; }
#section6 .history-con { margin-top:94px; }
#section6 .history-con:after { content:''; display:block; clear:both; }
#section6 .year-tit { width:380px; float:left; font-size:110px; font-weight:500; color:#fff; text-align:left; line-height:1; }
#section6 .history-list { float:left; width:800px; height:570px; overflow:auto; text-align:left; -ms-overflow-style:none; }
#section6 .history-list::-webkit-scrollbar { display:none; }
#section6 .history-list .year:not(:first-child) { padding-top:210px; }
#section6 .history-list .year:last-child { padding-bottom:200px; }
#section6 .history-list .month { font-size:18px; opacity:0.6; font-weight:600; margin-bottom:10px; margin-top:40px; color:#fff; }
#section6 .history-list .month.mt { margin-top:15px; }
#section6 .history-list .month-des { color:#fff; font-size:18px; line-height:25px; font-weight:400; }
.both:after { content:''; display:block; clear:both; }
.both > div { float:left; width:33.3333%; vertical-align:top; }

#section7 .img-list-wrap:after { content:''; display:block; clear:both; }
#section7 .img-list-wrap .img-list { cursor:pointer; float:left; width:25%; }
#slider { position:relative; height:100%; overflow:hidden; }
.slider-img-wrap { height:650px; width:10000px; }
.slider-item { position:relative; height:650px; overflow:hidden; transition:all 0.5s;}
.image { float:left; position:relative; transition:all 0.5s; cursor:pointer; }
.item-img-1, .item-img-2 { width:100%; height:100%; position:absolute; top:0px; background-size:cover !important; background-position:center; transition:all 0.5s; }
.item-img-1:hover, .item-img-2:hover { background-size:cover !important; }
.item-img-2 { opacity:0; position:relative; }
.item-img-2 span { display: block; padding-top: 30%; color: #fff; font-size: 45px; font-weight: 500; }
#section7 .slider-txt-wrap { position:absolute; left:0; top:0; width:100%; height:100%; display:none; z-index:9999; }
#section7 .slider-txt-wrap .slider-txt { width:100%; height:100%; padding-left:300px; }
#section7 .slider-txt-wrap .slider-txt p:nth-child(1) { font-size:56px; font-weight:bold; color:#fff; padding-top:200px; padding-bottom:65px; text-align:left; }
#section7 .slider-txt-wrap .slider-txt p:nth-child(2) { font-size:20px; color:#fff; line-height:1.5; text-align:left; font-weight: 300; }
#section7 .slider-txt-wrap .slider-txt.type01 { background:url('http://ftp.xexymix.jpg3.kr/xexymix/introimg/brand_sec07_full01.jpg') 100% no-repeat; background-size: cover; }
#section7 .slider-txt-wrap .slider-txt.type02 { background:url('http://ftp.xexymix.jpg3.kr/xexymix/introimg/brand_sec07_full02.jpg') 100% no-repeat; background-size: cover; }
#section7 .slider-txt-wrap .slider-txt.type03 { background:url('http://ftp.xexymix.jpg3.kr/xexymix/introimg/brand_sec07_full03.jpg') 100% no-repeat; background-size: cover; }
#section7 .slider-txt-wrap .slider-txt.type04 { background:url('http://ftp.xexymix.jpg3.kr/xexymix/introimg/brand_sec07_full04.jpg') 100% no-repeat; background-size: cover; }
.btn-fullback { padding-top:140px; display:block; text-align:left; width:101px; height:14px; }

#section8 .txt_con::after { content:''; display:block; clear:both; }
/* #section8 .section-con .col { float:left; } */
#section8 .section-con .col:first-child { float:left; margin-right:150px; }
#section8 .mission { font-size:18px; font-weight:400; }
#section8 .txt01 { font-size:60px; font-weight:bold; margin-top:90px; margin-bottom:30px; }
#section8 .txt02 { height:200px; font-size:16px; line-height:1.75; color:#fff; margin-bottom:90px; font-weight: 300; }
#section8 .txt03 { font-size:28px; color:#fff; line-height:1.4; }

#section9 { background: #111; }
#section9 .video-select-wrap { position:absolute; left:200px; top:180px; }
#section9 .video-wrap .video-bg { width:100%; height:100%; }
#section9 .video-select-wrap p { position:relative; font-size:48px; font-weight:bold; color:#fff; height:90px; }
#section9 .video-select-wrap p:after { content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background-color:#fff; opacity:0.4; }
#section9 .next-video-wrap .video-sum { cursor:pointer; position:absolute; right:370px; bottom:220px; width:287px; height:158px; }
#section9 .btn-play { display:none; position:absolute; left:200px; top:300px; }
#section9 .btn-pause { width:24px; position:absolute; left:200px; top:300px; }
#section9 .btn-pause img { width:100%; max-width:100%; }
#time { position:absolute; top:297px; left:250px; color:#fff; font-size:24px; }


/* 내비게이션 */
#menu{position:fixed; top:38%; right:80px; z-index: 1;}
#menu li{display: block; width: 25px; height: 1px; margin: 25px 0; position: relative;}
#menu li a{  display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer;  position: absolute; z-index: 1; height: 100%; width: 100%; border: 0; background: #fff; left: 50%; top: 50%;-webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;}
#menu li a span{   font-size:0;  }
#menu li.active a span, #menu li a:hover span{   font-size:0;   color: #fff; position: absolute; left: -55px; top: -7px; font-size: 11px;}
#menu li.active  a{font-size:12px; color:#fff;}
#menu li.active  a, #menu li a:hover{width:43px; background:#a47b72;left:-3px;}


.fp-scrollable{    overflow: hidden; position: relative;}
.fp-scroller{overflow: hidden;}

@media screen and (max-width:1440px) {
    #section3 .txt-con, #section8 .txt-con { margin-left:12%; }
    #section8 .txt01 { margin-top:30px; }
    #section3 .txt-con .col:first-child { margin-right:5%; }
}
/* BASIC css end */