@charset "utf-8";
/* CSS Document */

/*--GLOBAL CSS--*/
@import url('global.css');

body{font-family: 'Montserrat', sans-serif; font-weight:400; background:url(../images/background-top.png) center top no-repeat; background-size:100% auto;}
.hero{min-height:100vh; padding:200px 0;}
.header{padding:25px 0; min-height:150px;}
.header.position-fixed{left:0; top:0; z-index:999; width:100%;}
.logo img{max-width:150px;}
.menu ul li{margin-right:20px;}
.menu ul li:last-child{margin-right:0;}
.menu ul li a{display:block; font-family: 'Noto Sans KR', sans-serif; font-weight:400; letter-spacing:2px; padding:0 10px; font-size:16px; position:relative; line-height:1; color:#000;}
.menu ul li a:hover, .menu ul li a:focus{color:#ff5b01;}
.menu ul li a.active{position:relative;}
.menu ul li a.active:after{position:absolute; left:0; bottom:-4px; width:100%; height:8px; content:""; background-color:#dedede; z-index:-1;}
.hero-content h2{font-weight:900; padding-top:20px; position:relative;}
.hero-content h2:before{width:100px; height:10px; background-color:#C2C2C2; content:""; position:absolute; left:0; top:0;}
.hero-content .hero-btn{margin-top:40px;}
.guide-form{position:fixed; right:50px; bottom:100px; z-index:99;}
.guide-btn{width:60px; height:60px; border-radius:100%; background-color:#000; border:0; text-align:center; line-height:60px; color:#fff; padding:0; font-size:12px; cursor:pointer;}
.guide-btn i{font-size:26px; line-height:60px;}
.guide-textbox{width:350px; border-radius:25px; background-color:#000; border:0; height:44px; margin-right:10px; padding:5px 30px; font-size:14px;
background: rgb(234,234,234);
background: -moz-linear-gradient(left,  rgba(234,234,234,1) 0%, rgba(155,155,155,1) 100%); 
background: -webkit-linear-gradient(left,  rgba(234,234,234,1) 0%,rgba(155,155,155,1) 100%);
background: linear-gradient(to right,  rgba(234,234,234,1) 0%,rgba(155,155,155,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#9b9b9b',GradientType=1 );
}
.guide-form .guide-textbox{opacity:0; visibility:hidden; display:none;}
.guide-form .guide-submit-btn{opacity:0; visibility:hidden;}
.guide-form.guide-form-active .guide-textbox{opacity:1; visibility:visible;  display:block;}
.guide-form.guide-form-active .guide-submit-btn{opacity:1; visibility:visible;}
.guide-form .guide-not-active-btn{opacity:0; visibility:hidden; display:none;}

.mobile-frame{width:360px; height:725px; position:relative; padding:15px;}
.mobile-frame:before{background:url(../images/mobile-frame.png) center center no-repeat; background-size:100% 100%; position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; content:""; pointer-events:none;}
.mobile-frame:after{position:absolute; left:50%; top:16px; transform:translateX(-50%); pointer-events:none; background:url(../images/mobile-frame-top.png) center top no-repeat; background-size:100% auto; content:""; width:50%; height:100%; z-index:1; pointer-events:none;}
.mobile-frame-content{height:100%; background-color:#fff; border-radius:30px; box-shadow:10px 10px 50px rgba(0,0,0,0.6);}
.article{margin:0 -25px; transform:translateY(50%); opacity:0;
-o-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -khtml-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; -ms-transition: all 0.5s linear; transition: all 0.5s linear;
}
.article.fade-in{transform:translateY(0);  opacity:1;}
.article .article-column{padding:0 25px;}
.article h4{margin-bottom:25px;}
.contents{padding:200px 0; background:url(../images/background-bottom.png) center bottom no-repeat; background-size:100% auto;}
.section{padding:100px 0;}
.page-section{padding:30px 0;}
.section-headding{font-weight:900; margin-bottom:50px;}
.contact{background-color:#EDEDED; padding:80px; border-radius:10px; box-shadow:0 10px 20px rgba(0,0,0,0.2);} 
.contact .row.contact-row{margin:-25px;}
.contact .row.contact-row .column{padding:25px;}
.contact-form .form-control{height:50px; background-color:#DBDBDB; border-radius:4px; border:0; font-weight:600; padding:0 15px; font-size:15px;}
.contact-form .form-control:focus{box-shadow:none;}
.contact-form textarea.form-control{padding:15px; min-height:200px; resize:none;}
.contact-form .row.rows{margin:-10px;}
.contact-form .row.rows .columns{padding:10px;}
.submit-btn{border:0; border-radius:4px; background-color:#000; color:#fff; text-align:center; font-size:14px; font-weight:700; text-transform:uppercase; min-width:200px; padding:5px 15px; line-height:30px; height:40px;}
.submit-btn:hover{background-color:#ff5b01;}
.footer-logo{margin-bottom:30px;}
.contact-list li{margin-bottom:15px; color:#969696;}
.contact-list li a{color:#969696;}
.contact-list li a:hover{color:#ff5b01;}
.contact-list li:last-child{margin-bottom:0;}
.contact-list li i{margin-right:15px; font-size:18px;}
.contact-list li span{font-size:16px; font-weight:600;}
.footer{background-color:#000; padding:50px 0;}
.footer-block{margin-bottom:20px;}
.footer-block:last-child{margin-bottom:0;}
.footer-block p{font-size:12px; color:#fff; margin-bottom:5px;}
.footer-block p:last-child{margin-bottom:0;}
.screen-slider{overflow:hidden;}
.screen-slider .screen-slide{padding-top:70px; padding-bottom:70px;}
.screen-slider .screen-slide .mobile-frame{width:250px; height:503px;}
.screen-slider .screen-slide .mobile-frame:after{top:13px;}

.article-slider{height:100%;}
.article-slider.slick-slider, .article-slider .slick-list, .article-slider .slick-track, .article-slider .slick-slide div{height:100%;}
.article-slide-1{background:url(../images/article-slider/1.jpg) center center no-repeat; background-size:cover;}
.article-slide-2{background:url(../images/article-slider/2.jpg) center center no-repeat; background-size:cover;}

.demo-image{background:url(../images/1.jpg) center center no-repeat; background-size:cover;}
.image-1{background:url(../images/1.jpg) center center no-repeat; background-size:cover;}
.image-2{background:url(../images/2.jpg) center center no-repeat; background-size:cover;}
.image-3{background:url(../images/3.jpg) center center no-repeat; background-size:cover;}
.image-4{background:url(../images/4.jpg) center center no-repeat; background-size:cover;}

.image-slide-1{background:url(../images/image-slider/1.jpg) center center no-repeat; background-size:cover;}
.image-slide-2{background:url(../images/image-slider/2.jpg) center center no-repeat; background-size:cover;}
.image-slide-3{background:url(../images/image-slider/3.jpg) center center no-repeat; background-size:cover;}
.image-slide-4{background:url(../images/image-slider/4.jpg) center center no-repeat; background-size:cover;}
.image-slide-5{background:url(../images/image-slider/5.jpg) center center no-repeat; background-size:cover;}

.split-bg{overflow:hidden;}
.split-bg-top{background:url(../images/1-a.jpg) center bottom no-repeat; background-size:100% 100%;}
.split-bg-bottom{background:url(../images/1-b.jpg) center top no-repeat; background-size:100% 100%;}
.split-bg .split-bg-top, .split-bg .split-bg-bottom{-o-transition: all 0.8s linear; -moz-transition: all 0.8s linear; -khtml-transition: all 0.8s linear; -webkit-transition: all 0.8s linear; -ms-transition: all 0.8s linear; transition: all 0.8s linear;}
.split-bg .split-bg-top{transform:translateY(-100%);}
.split-bg .split-bg-bottom{transform:translateY(100%);}
.split-bg.active .split-bg-top{transform:translateY(0);}
.split-bg.active .split-bg-bottom{transform:translateY(0);}

.screen-slider-wrap{overflow:hidden;}
.slide-arrow{background-color:#BDBDBD; width:50px; height:50px; border-radius:100%; text-align:center; line-height:50px; position:absolute; top:50%; transform:translateY(-50%); z-index:99; font-size:30px; color:#000; box-shadow:0 0 10px rgba(0,0,0,0.2); -o-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -khtml-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;}
.slide-arrow.slide-left-arrow{left:-50px;}
.slide-arrow.slide-right-arrow{right:-50px;}
.screen-slider-wrap:hover .slide-arrow.slide-left-arrow{left:50px;}
.screen-slider-wrap:hover .slide-arrow.slide-right-arrow{right:50px;}

.nav-icon{width:36px; height:22px; position:relative; cursor:pointer;}
.nav-icon span{height:2px; background-color:#000;}
.nav-icon:before, .nav-icon:after{position:absolute; left:0; width:100%; height:2px; background-color:#000; content:"";}
.nav-icon:before{top:0;}
.nav-icon:after{bottom:0;}

@media(min-width:1351px){
	.container{max-width:1350px;}	
}
@media(max-width:1350px){
	.container{max-width:100%;}	
}
@media(max-width:1199px){
	.header{padding:20px 0; min-height:120px;}
	.menu ul li a{letter-spacing:1px; padding:0 5px; font-size:14px;}
	.logo img{max-width:130px;}
	.hero-content h2:before{width:80px; height:8px;}
	.hero{padding:150px 0;}
	.contact{padding:50px; border-radius:8px;}
	.section-headding{margin-bottom:40px;}
	.article{margin:-15px;}
	.article .article-column{padding:15px;}
	.contents{padding:100px 0;}
	.section{padding:70px 0;}
}
@media(min-width:992px){
	.screen-slider .slick-slide.slick-current .mobile-frame-content{box-shadow:none;}
	.screen-slider .slick-slide.slick-current .mobile-frame{transform:scale(1.2);}	
}
@media(max-width:991px){
	.header{padding:15px 0; min-height:100px;}
	.menu ul li a.active:after{bottom:-3px; height:6px;}
	.hero-content h2:before{width:60px; height:6px;}
	.hero-content .hero-btn{margin-top:30px;}
	.footer{padding:30px 0;}
	.contact{padding:40px; border-radius:6px;}
	.contact-wrap{display:flex; justify-content:center; text-align:center;}
	.contact-list li{justify-content:center;}
	.section-headding{margin-bottom:30px;}
	.contents{padding:80px 0;}
	.section{padding:50px 0;}
	.mobile-frame{width:300px; height:604px;}
	.article h4{margin-bottom:15px;}
}
@media(min-width:768px){
	.page-section:nth-child(odd) .mobile-frame-wrap{order:2;}
	.page-section:nth-child(odd) .article-contents{order:1; text-align:right;}	
	.nav-icon{display:none !important;}
	.menu{display:block !important;}
}
@media(max-width:767px){
	.header{padding:15px 0; min-height:80px;}
	.logo img{max-width:100px;}
	.menu ul li a{font-size:12px;}
	.menu ul li{margin-right:10px;}
	.menu ul li a.active:after{bottom:-2px; height:4px;}
	.hero{padding:100px 0;}
	.hero{display:-ms-flexbox; display:flex; -ms-flex-align:center; align-items:center;}
	.hero-content .hero-btn{margin-top:25px;}
	.footer{text-align:center;}
	.footer-block p{font-size:11px;}
	.contact{padding:40px 15px; border-radius:0;}
	.contact-list li span{font-size:13px;}
	.contact-list li i{font-size:15px; margin-right:10px;}
	.contact .row.contact-row{margin:-15px;}
	.contact .row.contact-row .column{padding:15px;}
	.contact-form .form-control{border-radius:0; height:44px; font-size:13px;}
	.contents{padding:60px 0;}
	.section{padding:40px 0;}
	.article{text-align:center;}
	.mobile-frame{margin:0 auto;}
	.mobile-frame{width:250px; height:503px;}
	.mobile-frame:after{top:13px;}
	.guide-form{right:20px; bottom:40px;}
	.screen-slider-wrap:hover .slide-arrow.slide-left-arrow{left:30px;}
	.screen-slider-wrap:hover .slide-arrow.slide-right-arrow{right:30px;}
	body{background:url(../images/mobile-bg.png) center top no-repeat; background-size:100% 100vh;}
	body.menu-active .header{background-color:#fff;}
	.menu{position:absolute; left:0; top:100%; width:100%; display:none; box-shadow:0 5px 10px rgba(226,226,226,0.3);}
	.menu ul li{margin:0; border-bottom:1px solid #ededed;}
	.menu ul li:last-child{border:0;}
	.menu ul li a.active:after{display:none;}
	.menu ul li a{padding:10px 15px; line-height:24px; background-color:#fff; color:#000;}
	.menu ul li a:hover{color:#000; background-color:#ededed;}
}
@media(max-width:640px){
	.screen-slider .screen-slide{transform:none;}
	.screen-slider-wrap:hover .slide-arrow.slide-right-arrow{right:15px;}
}
@media(max-width:575px){
	.hero-content .hero-btn{margin-top:20px;}
	.contents{padding:50px 0;}
	.section{padding:30px 0;}
	.guide-textbox{width:300px;}
}
@media(max-width:480px){
	.guide-textbox{width:260px;}	
}