@charset "utf-8";

.section-wrap{width:100%; /* height:100%;  */max-width:1200px; margin:0 auto; position:relative;}

.scroll{position:fixed; z-index:100; right:50px; bottom:50px;}
.scroll i{position:relative; display:block; opacity:0; margin:0 auto; width:0; height:0; border:4px solid transparent; border-top-color:#fff; animation:scrollDown 1.4s ease 0s infinite;}
.scroll i:after{content:''; position:absolute; opacity:0.6; top:0; left:0; z-index:-1; width:100%; height:100%; background:red; transform:scaleX(1); animation:scrollDown2 1.5s ease 0s infinite; border-radius:40px;}
.scroll i + i{margin-top:5px;}
.scroll i:nth-child(3){animation-delay:0.05s;}
.scroll i:nth-child(4){animation-delay:0.1s;}
.scroll p{font-size:15px; color:#fff; opacity:0.6; font-weight:600; display:inline-block; text-align:center; writing-mode:tb-rl; cursor:default; margin-bottom:10px; transition:all 0.4s;}

.fp-viewing-2 .scroll p, .fp-viewing-4 .scroll p{color:#888 !important;}
.fp-viewing-2 .scroll i, .fp-viewing-4 .scroll i{border-top-color:#ccc !important;}


@keyframes scrollDown{
	0%{opacity:0;}
	100%{opacity:1;}
}

@keyframes scrollDown02{
	0%{transform: scale(1); opacity: 0.2;}
	40%{opacity: 0.2;}
	100%{transform: scale(2); opacity: 0;}
}

/*==============================================================
	section0 - ABOUT
================================================================*/

.about{width:100%; height:100vh; margin:0; padding:0;}

/******************slide********************/
.unslider {
  position: relative;
  overflow:hidden !important;
}

 .unslider-nav {
  position: relative;
  z-index: 888;
  bottom: 50px;
}

.unslider-nav ol li {
  width: 7px !important;
  height: 7px !important;
  background: #fff !important;
  border:0 !important;
  border-radius:7px !important;
  opacity:0.4;
  transition:all 0.4s;
}

.unslider-nav ol li.unslider-active {
  opacity:0.9;
  width:25px !important;
}

.in {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

#slide {
  width: 100%;
  position: relative;
  /* transition:all 0.5s; */
}

.unslider, #slide, #slide .unslider-wrap li {
  height: 100vh;
}

#slide .unslider-wrap li:nth-of-type(1) {
  background: url(../../../images/thema/main/kr_main/main-slide04.jpg) no-repeat center center;
  background-size: cover;
}

 #slide .unslider-wrap li:nth-of-type(2) {
  background: url(../../../images/thema/main/kr_main/main-slide02.jpg) no-repeat center center;
  background-size: cover;
}

#slide .unslider-wrap li:nth-of-type(3) {
  background: url(../../../images/thema/main/kr_main/main-slide03.jpg) no-repeat center center;
  background-size: cover;
}

#slide .unslider-wrap li {
  transform:scale(1.08) rotate(0.1deg);
  transition:transform 5s linear;
}

#slide .unslider-wrap li.unslider-active {
  transform:scale(1) rotate(0deg);
}

#slide .wrap {
  position: relative;
  width:100%;  max-width:1200px;  margin:0 auto; overflow:hidden;
}

.unslider-arrow{width:50px; height:50px; z-index:99 !important; top:46%; border:1px solid #fff; border-radius:50%; box-sizing:border-box; opacity:0.6; text-align:center; line-height:45px; transition:all 0.4s;} 
.prev:before{content: "\e93d"; font-family:'xeicon'; color:#fff; left:20px !important; font-size:28px;}
.next:before{content: "\e940"; font-family:'xeicon'; color:#fff; left:20px !important; font-size:28px;}
.unslider-arrow:hover{opacity:1;}
.in{margin:-24px auto 0 !important;}

.slide-text-box{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; color:#fff; z-index:10; width:80%;}
.slide-text-box h3{font-size:40px; font-weight:400; margin-bottom:5px; opacity:0.9;}
.slide-text-box h1{font-size:60px; font-weight:700; opacity:0.95;}


/*==============================================================
	section1 - TECHNOLOGY
================================================================*/
#section1{width:100%; background:#fafafa;}
/* .technology{width:100%;} */
#progress-slider{width:100%; height:100%; position:relative; overflow:hidden;}
.tech-img{width:100%; min-width:960px; height:100vh; background-size:cover !important; background-position:center center !important;}

/* #progress-slider .slick-list{width:100%; height:100%; overflow:hidden;} */
/* #progress-slider .slick-list .slick-slide{min-width:960px;} */
/* #progress-slider .slick-slide{width:100% !important; max-width:960px;} */

.progress-slider-nav{width:320px; height:120px; background:#fafafa; position:absolute; bottom:0; right:0; z-index:88;}
.progress-slider-nav a{width:50%; height:100%; float:left; display:block; position:relative; cursor:default;}
.progress-slider-nav a:before{font-family: 'xeicon'; color:#555; position:absolute; top:40%; left:50%; transform:translate(-50%, -50%); font-size:20px; font-weight:700;}
.progress-slider-prev:before{content: "\e908";}
.progress-slider-prev:after{content:''; width:1px; height:20px; background:#ededed; position:absolute; right:0; top:40%; transform:translateY(-40%);}
.progress-slider-next:before{content: "\e90b";}

.slider-progress{width:55%; height:2px; background:rgba(0,0,0,0.1); position:absolute; top:65%; left:50%; transform:translateX(-50%); overflow:hidden;}
.slider-progress .progress{width:0%; height:2px; background:#555; }

.tech-right{position:relative; height:100vh; display:table;}
.tech-txt{position:absolute; top:calc(50% + 50px); left:50%; transform:translate(-50%, -50%); margin-left:-50px; text-align:center; width:80%;}
/* .tech-txt{text-align:center; display:table-cell; padding:100px 10%; vertical-align:middle; box-sizing:border-box;} */
.tech-txt h1{font-size:32px; font-weight:600; color:#444; margin-bottom:40px; position:relative;}
.tech-txt h1:before{content:''; width:1px; height:50px; position:absolute; top:-65px; left:50%; transform:translateX(-50%); animation:lineFlow 2.5s linear infinite;
background: #00efd1; /* Old browsers */
background: -moz-linear-gradient(top, #00efd1 0%, #00acea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #00efd1 0%,#00acea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #00efd1 0%,#00acea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00efd1', endColorstr='#00acea',GradientType=0 ); /* IE6-9 */}
.tech-txt p{font-size:18px; color:#555; margin-bottom:40px;}



@keyframes lineFlow {
    0%{height:0;}
    50%{height:25px;}
    100%{height:50px;}
}

/*==============================================================
	section2 - SOLUTION
================================================================*/
.solution{width:100%;}

.table{display:table; width:100%;}
.table > div{display:table-cell;}

.solution .sol-bg{width:33.33%; position:relative; z-index:11; vertical-align:middle; padding-top:100px; box-sizing:border-box;}
.sol-bg01 .fix-after{background:url(../../../images/thema/main/kr_main/solution01-on.jpg)no-repeat center center; background-size:cover;}
.sol-bg02 .fix-after{background:url(../../../images/thema/main/kr_main/solution02-on.jpg)no-repeat center center; background-size:cover;}
.sol-bg03 .fix-after{background:url(../../../images/thema/main/kr_main/solution03-on.jpg)no-repeat center center; background-size:cover;}

.sol-tit, .fix-after, .fix-bg > div{transition: all 1s cubic-bezier(.23,1,.32,1); -moz-transition: all 1s cubic-bezier(.23,1,.32,1); -webkit-transition: all 1s cubic-bezier(.23,1,.32,1); -o-transition: all 1s cubic-bezier(.23,1,.32,1);}

.fix-after{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:#fff; z-index:1;}
.sol-wrap{position:relative; z-index:2; width:80%; margin:0 auto; cursor:default;}
.sol-tit{text-align:center; opacity:0.95;}
.sol-icon{display:block; position:relative;}
.sol-icon img{max-width:100%; display:block; transition:all 0.4s; margin:0 auto 20px;}
.sol-icon img.icon-on{position:absolute; z-index:10; top:0; left:50%; transform:translateX(-50%); opacity:0; transition:all 0.4s;}
.sol-tit p{font-size:18px; color:#fff; line-height:28px; margin-bottom:5px;}
.sol-tit h1{font-size:32px; color:#fff;/*  margin-bottom:40px; */}

.sol-bg03 .sol-tit{margin-top:40px;}

.sol-link{/* display:table;  */margin:0 auto 0; opacity:0; -webkit-transition:all 0.5 ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}
.sol-link a{/* display:table; */ margin:10px auto;}
.has-active .sol-link{margin:40px auto 0; opacity:1; -webkit-transition:all 0.5 ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}

.fix-bg{position:absolute; left:0; top:0; width:100%; height:100%;}
.fix-bg *{color:#fff;}
.fix-bg > div{width:100%; height:100%; text-align:center; position:absolute; top:0; left:0; right:0; bottom:0; opacity:0; visibility:hidden;}
.fix-bg > div.is-active{opacity:1; visibility:visible;}

.fix-div01{background:url(../../../images/thema/main/kr_main/solution01-on.jpg)no-repeat center center; background-size:cover;}
.fix-div02{background:url(../../../images/thema/main/kr_main/solution02-on.jpg)no-repeat center center; background-size:cover;}
.fix-div03{background:url(../../../images/thema/main/kr_main/solution03-on.jpg)no-repeat center center; background-size:cover;}
.fix-bg > div > div{display:table-cell; vertical-align:top; padding:10% 30px 30px 30px;}

.fix-active .fix-after{width:0;}
.fix-active .solution > div{border-right:1px solid rgba(255,255,255,0.2);}

.has-active .icon-on{opacity:1 !important;}


/*==============================================================
	section3 - INFO
================================================================*/
#section3{width:100%; background:#fafafa;}
.info{width:100%; padding-top:120px;}

.info-txt{margin-bottom:55px;}
.info-txt h1{font-size:38px; color:#333; margin-bottom:30px;}
.info-txt h1 > span{font-size:26px; font-weight:500;}
.info-txt p{font-size:18px; line-height:28px; color:#555;}

.info-box1{background:url(../../../images/thema/main/kr_main/s3-bg01.jpg)no-repeat center center;}
.info-box2{background:url(../../../images/thema/main/kr_main/s3-bg02.jpg)no-repeat center center; margin-top:40px; margin-left:-40px;}
.info-box3{background:url(../../../images/thema/main/kr_main/s3-bg03.jpg)no-repeat center center; width:120% !important; max-width:480px !important; margin-right:0 !important; padding:40px; box-sizing:border-box; min-height:540px; position:relative; margin-top:-220px; margin-left:-80px;}
.info-box{width:95%; max-width:320px; background-size:cover; position:relative; margin-right:40px; float:left;}
.info-box > a:not(.btn-more){padding:40px; min-height:320px; box-sizing:border-box; width:100%; height:100%; display:block;}
.info-box h1{opacity:0.9; color:#fff; transition:all 0.4s;}
.info-box .plus2{opacity:0.4; color:#fff; position:absolute; right:40px; bottom:40px; font-size:26px; transition:all 0.4s;}
.info-box3 p{font-size:18px; color:#fff; opacity:0.8; margin:40px 0;}
.info-box3 .btn-more{margin:0;}

.info-box > a:hover .plus2{transform:rotate(180deg); opacity:0.8;}
/* .info-box > a:hover h1{opacity:1;} */
















@media all and (max-width:1199px){
	.scroll{right:20px; bottom:20px;}
	
	.tech-img{min-width:780px;}
	
	.tech-txt{margin-left:0;}
	.tech-txt h1, .sol-tit h1{font-size:26px;}
	.tech-txt p{font-size:16px;}
	
	.info-txt h1{font-size:34px;}
	.info-txt h1 > span{font-size:22px;}
	.info-txt p, .info-box p{font-size:16px; line-height:26px;}
	.info-box{margin-left:0 !important; max-width:100%;}
	.info-box3{width:100% !important;}
	.info-box h1{font-size:26px;}
}

@media all and (max-width:767px){	
	.fp-section{height:auto !important;}
	.scroll{display:none !important;}
	
	/* ABOUT */
	.slide-text-box h3{font-size:34px; margin-bottom:0;}
	.slide-text-box h1{font-size:48px;}
	
	/* TECHNOLOGY */
	.tech-img, .tech-right{height:50vh;}
	#progress-slider{overflow:visible;}
	.progress-slider-nav{background:#fafafa; height:60px; bottom:-60px; width:100%;}
	.progress-slider-nav a::before{top:50%; transform:translate(-50%, -50%);}
	.progress-slider-prev::after{top:50%; transform:translateY(-50%);}
	.slider-progress{width:100%; top:0;}
	.tech-txt{width:90%; padding:50px 0; overflow:hidden;}
	.tech-txt h1{font-size:22px; margin-bottom:30px;}
	.tech-txt p{font-size:14px;}
	
	/* SOLUTION */		
	.sol-tit p{font-size:14px; line-height:26px; margin-bottom:0;}
	.sol-tit h1{font-size:22px;}
	#section2 .fp-tableCell, .solution, .fix-after{height:600px !important;}
	.solution .sol-bg{padding-top:0;}
	.sol-icon img{max-width:40px;}
	.sol-link a{margin:0 auto;}
	.sol-link .btn-more{width:80%; padding:13px;}
		
	/* INFO */
	.info{padding:80px 2.5%; overflow:hidden;}
	.info-txt{margin-bottom:40px;}
	.info-txt h1{font-size:26px; margin-bottom:20px;}
	.info-txt h1 > span{font-size:18px;}
	.info-txt p, .info-box p{font-size:14px;}
	.info-box h1{font-size:22px;}
	.info-box{width:calc(100% - 10px);}
	.info-box > a:not(.btn-more){min-height:200px;}
	.info-box2{margin-top:0; margin-left:10px !important;}
	.info-box3{margin-top:20px; max-width:100% !important; min-height:auto;}
	.info-box3 p{margin:20px 0 30px;}	
	
	
}

@media all and (max-width:525px){
	.slide-text-box h3{font-size:24px;}
	.slide-text-box h1{font-size:38px;}
	
	.tech-img{min-width:600px;}
	.tech-img, .tech-right{height:auto; min-height:300px;}
	.tech-right{min-height:500px;}
	
	#section2 .fp-tableCell, .solution, .fix-after{height:auto !important; min-height:100%; display:block;}
	.solution .sol-bg{width:100%; padding:30px 0; /* min-height:200px;  */display:block; overflow:hidden;}
	.sol-tit p{display:none;}
	.sol-tit h1{font-size:18px;}
	.sol-icon img{margin:0 auto 10px;}
	.sol-bg03 .sol-tit{margin-top:0;}
	.sol-link, .has-active .sol-link{margin:20px auto 0; opacity:1;}
	.fix-active .solution > div{border-right:0; border-bottom:1px solid rgba(255,255,255,0.2);}
	.fix-active .fix-after{width:100%; height:0 !important; min-height:0;}
	
	.info{padding:60px 2.5%;}
	.info-box{width:calc(100% - 5px);}
	.info-box > a:not(.btn-more){padding:30px;}
	.info-box .plus2{right:30px; bottom:40px;}
	.info-box2{margin-left:5px !important;}
	.info-box3{margin-top:10px; padding:30px 30px 40px;}
}

@media all and (max-width:360px){
	
}