@charset "utf-8";

/* Font */
@import url(font.css);

/* Guide
----------------------------------------------------------------------------------------------------------------------------------------------------------

▶사이즈
pc : 1200px
tablet : 980px ~
mobile : 767px ~ 320px

▶미디어쿼리는 (주석으로 구분 되어있는)파트마다 각각 작성함.

*/


/* Reset
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0; padding:0;}
	body,th,td,input,select,textarea,button{font-family:'SCoreDream', sans-serif; font-weight:400; font-size:16px; color:#4d4d4d;}
	.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family:'SCoreDream', sans-serif; font-weight: 600;}
	dl,ul,ol,menu,li {list-style:none;}
	*, *:before, *:after{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
	:focus{outline:0 !important;}
	iframe{border:none; width:100%;}
	a{color:inherit; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out;}
	a:hover, a:focus ,a:active{text-decoration:none !important;}
	img{max-width:100%;}
	textarea{max-width:100%; resize:none;}
	a:focus, a:hover {color: inherit;}
    
	@media only screen and (min-width: 320px){
		body{overflow-x:hidden;}
	}

	.hidden{font-size:0; line-height:0; text-indent:-9999em; overflow:hidden;}
    ::selection {
        background:#222281;
        color: #fff;
        text-shadow: none;
    }
    ::-moz-selection {
        background:#222281;
        color: #fff;
        text-shadow: none;
    }
    ::-webkit-selection {
        background:#222281;
        color: #fff;
        text-shadow: none;
    }


/* Parallax
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.parallax{background-position:0 0; background-repeat:no-repeat; background-size:100% auto; width:100%; background-size:cover; background-attachment:fixed;}


/* Preloader
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.animationload{position: fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; z-index:999999;}
	.loader {width:200px; height:200px; font-size: 24px; text-align: center; position:absolute; left:50%; top:50%; background-image:url(/images/basic_resp/img/preloader.gif); background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px;}


/* Back to top (탑 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.back-to-top{width:80px; height:80px; position:fixed; bottom:60px; right:20px; display:none; text-align: center; z-index: 10000; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background:#ffa800; box-shadow: 0px 15px 29px rgba(0,0,0,.3);}
	.back-to-top i{color: #fff; font-size: 30px; display: block; line-height: 78px;}
    
    @media only screen and (max-width: 980px) {
		.back-to-top {width: 60px; height: 60px;}
        .back-to-top i {line-height: 58px; font-size: 20px;}
	}

    @media only screen and (max-width: 768px) {
		.back-to-top {width: 40px; height: 40px;}
        .back-to-top i {line-height: 40px; font-size: 15px;}
	}
/* Layoyt (레이아웃)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	#wrapper{position:relative; width:100%; min-width:320px; height:100%;}
	.inner {width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 20px; padding-right: 20px;}


/* Header
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
    #header {z-index :666; width: 100%; background-color: #fff; position: relative;}
    #header #header_in {position: relative; margin: 0 auto; width: 100%; height: 100px; padding-left: 60px; padding-right: 20px; display: flex; align-items: center; justify-content: space-between;}
    #L_SITE_LOGO h1 a {display: block; width: 250px; height: 70px; text-indent: -9999px; background: url('/images/kor06r-18-0410/common/gnb_logo.png')no-repeat center center / 100% auto;}
    #nav{}
    .nav-btn {display:none;}
	.nav-bg {z-index:888; display:none; position:absolute; top:100%; width:100%; height:240px; background:#fff; border-top:1px solid #d4d4d4; border-bottom:3px solid #222281;}
    .navigation {display: flex;}
    .navigation > li {position:relative; text-align:center}
    .navigation .main-menu {padding: 0 45px; height: 100px; font-weight: 500; font-size: 20px; color: #000; display: flex; justify-content: center; align-items: center;}
    .navigation .sub-menu {display: none; z-index: 998; position: absolute; top: 100%; left: 0; right: 0; height: 240px; padding: 15px 0;}
    .navigation .sub-menu a {display: block; text-align: center; font-size: 14px; padding: 8px 15px;}
    .navigation .sub-menu .intro-menu {display:none;}

    @media only screen and (min-width: 981px) {
	}

	@media only screen and (min-width: 1201px) {
		.navigation > li:hover {background:#222281;}
		.navigation > li:hover > a {color:#fff;}
		.navigation > li:hover a {color:#fff;}
		.navigation > li:hover .sub-menu{background:#222281; display: block !important;}
		.navigation > li:hover:after {content:''; position:absolute; height:1px; width:100%; left:0; bottom:0; background-color:#4242ab; z-index:999;}
		.navigation .sub-menu a:hover{background:#3a3a9d; color:#fff;}
	}

	@media only screen and (max-width: 1200px) {
		#header #header_in {padding-left: 20px; padding-right: 0;}
		.navigation .main-menu {padding: 0 30px; font-size: 18px;}
		.navigation .sub-menu a {font-size: 13px; padding: 8px 0;}
	}

	@media only screen and (max-width: 980px) {
		#header{z-index:666; width:100%; background:#fff; border-bottom: 1px solid #e1e1e1;}
		#header #header_in {width: 100%; height: 65px; padding-left: 15px; display: flex; align-items: center; justify-content: space-between;}
		#L_SITE_LOGO h1 a {width: 180px; height: 65px; background-position: center top;}
		.nav-btn {z-index:999; display:block; position:absolute; top:20px; right:20px; width:30px; height:23px; cursor:pointer;}
		.nav-btn span{position:absolute; left:50%; display:block; margin-left:-15px; width:30px; height:3px; background:#000; transition:.2s all linear;}
		.nav-btn span:nth-child(1){top:0;}
		.nav-btn span:nth-child(2){top:10px;}
		.nav-btn span:nth-child(3){top:20px;}
		.nav-btn.nav-close{position:fixed;}
		.nav-btn.nav-close span:nth-child(1){top:50%; transform:rotate(45deg);}
		.nav-btn.nav-close span:nth-child(2){margin-left:0; width:0;}
		.nav-btn.nav-close span:nth-child(3){top:50%; transform:rotate(-45deg);}
		.nav-bg {display: none !important;}
		#nav{z-index:888; position:fixed; top:64px; right:-100%; display:block; padding:0 0 20px; width:100%; height:100%; background:#fff;}
		.navigation {display: block; border-top: solid 1px #e1e1e1;}
		.navigation .main-menu{padding:0 30px; width:100%; height:50px; font-weight:400; font-size:16px; color:#000; transition:none; justify-content: flex-start;}
        .navigation > li {width:100%; text-align:left; border-bottom:1px solid #e1e1e1;}
        .navigation > li.active {background:#222281;}
        .navigation > li.active > a {color:#fff;}
        .navigation .sub-menu {display:none; position:relative; top:0; height:inherit; background:#f5f5f5;} 
        .navigation .sub-menu li {}
		.navigation .sub-menu a{display:block; padding:0 30px; line-height:35px; font-size:14px; color:#555; text-align: left;}
		.navigation .sub-menu a:before{content:""; display:inline-block; margin:-2px 10px 0 0; width:5px; height:5px; vertical-align:middle; background:#b0b0b0;}
	}

	@media only screen and (max-width: 768px) {
		.nav-btn{right:10px;}
	}


/* Button (공통 버튼)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
	.btn{text-transform:uppercase; border-radius:0; line-height:24px;}
	.btn:focus, .btn:active{outline:none; color:#fff;}

	.btn-custom{border-radius:3px; padding:0.8em 1.8em; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:#509591; border-color: #509591; color:#fff;}
	.btn-custom:hover, .btn-custom:focus{background-color:#447774; border-color:#447774; color:#fff;}

	.btn-custom-outline{border-radius:3px; padding:0.8em 1.8em; color:#fff; -webkit-transition:all .2s ease-out; transition:all .2s ease-out; text-transform:uppercase; background-color:transparent; border-color:#fff;}
	.btn-custom-outline:hover, .btn-custom-outline:focus{color:#fff; background-color:rgba(255,255,255,.5);}
	.btn-bar a{margin-right:10px;}

	.form-control{box-shadow:none; -webkit-box-shadow:none; border-radius:3px; height:38px;}
	.form-control:focus{outline:none; box-shadow:none; -webkit-box-shadow:none; border-color: #509591;}

	@media only screen and (max-width: 980px) {

	}


/* Footer (하단메시지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
#footer {background: #161616;}
.ft-top {border-bottom: solid 1px #2e2e2e; padding: 30px 0;}
.ft-top__menu {display: flex;}
.ft-top__menu li {position: relative; padding-right: 20px; margin-right: 20px;}
.ft-top__menu li:last-child {padding-right: 0; margin-right: 0;}
.ft-top__menu li:after {content: ''; display: block; width: 1px; height: 12px; background: #5b5b5b; position: absolute; right: 0; top: 50%; margin-top: -6px;}
.ft-top__menu li:last-child:after {display: none;}
.ft-top__menu li a {display: block; color: #fff;}
.ft-bot {padding-top: 30px; padding-bottom: 60px;}
.ft-title {display: flex; align-items: center;}
.ft-title img {display: block;}
.ft-sns {margin-left: 40px; display: flex; margin-top: 10px;}
.ft-sns li {margin-right: 10px;}
.ft-sns li:last-child {margin-right: 0;}
.ft-sns li a {display: block; width: 40px; height: 40px; text-indent: -9999px; -webkit-border-radius: 50%; border-radius: 50%;}
.ft-sns li:nth-child(1) a {background: url('/images/kor06r-18-0410/common/footer_sns_1.png')no-repeat center center / cover;}
.ft-sns li:nth-child(2) a {background: url('/images/kor06r-18-0410/common/footer_sns_2.png')no-repeat center center / cover;}
.ft-list {margin-top: 50px; display: flex;}
.ft-info {width: 33.33%; padding-right: 50px;}
.ft-info dt {font-size: 16px; color: #fff; font-weight: 500;}
.ft-info dd {font-size: 14px; color: rgba(255,255,255,0.5); margin-top: 20px;}
.ft-info dd ul {display: flex; justify-content: space-between; margin: 10px 0;}
.ft-copy {font-size: 14px; color: #fff; margin-top: 60px;}


@media only screen and (max-width: 1200px) {
	.ft-info {padding-right: 30px;}
	.ft-info dd {font-size: 13px;}
	.ft-info dd ul {display: block;}
}

@media only screen and (max-width: 992px) {
	.ft-top__menu li a {font-size: 14px;}
	.ft-list {display: block;}
	.ft-info {width: 100%; margin-bottom: 30px; padding-right: 0;}
	.ft-info:last-child {margin-bottom: 0;}
	.ft-info dd {margin-top: 10px;}
	.ft-info dd ul {display: flex; justify-content: flex-start; margin: 0;}
	.ft-info dd ul li {margin-right: 30px;}
	.ft-info dd ul li:last-child {margin-right: 0;}
	.ft-copy {margin-top: 30px; font-size: 13px;}
}

@media only screen and (max-width:768px) {
	.ft-top {padding: 25px 0;}
	.ft-top__menu {justify-content: center;}
	.ft-top__menu li {padding-right: 15px; margin-right: 15px;}
	.ft-top__menu li a {font-size: 13px;}
	.ft-bot {padding-top: 20px; padding-bottom: 40px;}
	.ft-title {justify-content: space-between;}
	.ft-title img {width: 180px;}
	.ft-sns li {margin-right: 5px;}
	.ft-sns li a {width: 34px; height: 34px;}
	.ft-list {margin-top: 30px;}
	.ft-info dt {font-size: 14px;}
	.ft-info dd ul {margin: 5px 0;}
	.ft-info dd ul li {margin-right: 20px;}
	.ft-copy {font-size: 12px;}
}




/* Main Visual (메인이미지)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.carousel-inner > .item{height:810px;}
.main-visual {position: relative;}
.main-visual .slogan {height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; font-size: 60px; font-weight: 100; line-height: 1.2;}
.main-visual .slogan strong {font-weight: 600; display: block; font-size: 70px;}
.main-visual .carousel-control {display: none; background:none; text-shadow:none; width:10%; text-indent:-9999em; overflow:hidden;}
.main-visual .carousel-control, .main-visual .carousel-control:focus, .main-visual .carousel-control:hover{opacity:1;}
.main-visual .carousel-control.left{background:url("/images/kor06r-18-0410/main/visual_btn_prev.png") no-repeat center center;}
.main-visual .carousel-control.right{background:url("/images/kor06r-18-0410/main/visual_btn_next.png") no-repeat center center;}
.main-visual .carousel-indicators {display: flex; bottom: 110px; width: auto; margin-left: 0; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0);}
.main-visual .carousel-indicators li {margin: 0 10px; display: flex; align-items: flex-end;  font-size: 18px; color: #fff; line-height: 1.0; font-weight: 500; width:auto; height:auto; box-sizing:border-box; border: none; border-radius:0; text-indent: 0;}
.main-visual .carousel-indicators .active {background: none;}
.main-visual .carousel-indicators li:after {content: ''; display: block; width: 80px; height: 4px; background: rgba(255,255,255,0.3); margin-left: 10px;}
.main-visual .carousel-indicators .active:after {background: #fff;}

@media only screen and (max-width: 1200px){
	.carousel-inner > .item{height:600px;}
	.main-visual .slogan {font-size: 50px;}
	.main-visual .slogan strong {font-size: 60px;}
	.main-visual .carousel-indicators {bottom: 40px;}
}

@media screen and (max-width:980px){
	.carousel-inner > .item{height:500px;}
	.main-visual .slogan {font-size: 30px;}
	.main-visual .slogan strong {font-size: 40px;}
	.main-visual .carousel-indicators {bottom: 30px;}
	.main-visual .carousel-indicators li {margin: 0 10px; font-size: 14px;}
	.main-visual .carousel-indicators li:after {width: 60px; height: 3px; margin-left: 5px;}
}

@media screen and (max-width:768px){
	.carousel-inner > .item{height:400px;}
	.main-visual .slogan {font-size: 20px;}
	.main-visual .slogan strong {font-size: 30px;}
	.main-visual .carousel-indicators {bottom: 30px;}
	.main-visual .carousel-indicators li {margin: 0 3px; text-indent: -9999px;}
	.main-visual .carousel-indicators li:after {width: 30px; margin-left: 0;}
}


/* Main Contents (메인 컨텐츠)
---------------------------------------------------------------------------------------------------------------------------------------------------------- */
.container {width: 100%;}
#mainContainer{z-index:555;}

.main-title {padding-bottom: 20px;}
.main-title h3 {font-size: 40px; color: #000; text-transform: uppercase;}
.main-title h3 + a {margin-bottom: 30px;}
.main-title p {font-size: 16px; color: #666; margin-top: 10px;}
.main-title a {display: inline-flex; align-items: flex-end; line-height: 1.0; margin-top: 40px;}
.main-title a:after {content: ''; display: block; width: 20px; height: 6px; margin-left: 8px; margin-bottom: 2px; background: url('/images/kor06r-18-0410/main/main_arrow.png')no-repeat center center / cover;}

.main-top {padding-top: 80px; background: url('/images/kor06r-18-0410/main/main_bg.png')no-repeat right bottom;}
.main-overview {display: flex;}
.main-overview dt {font-weight: 400; width: 40%;}
.main-overview dd {width: 60%;}
.main-video {position: relative; padding-bottom: 56.25%;}
.main-video iframe {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.main-product {margin-top: 80px;}
.main-product__list {display: flex;}
.main-product__list li {width: 25%; -webkit-transition: all .3s ease-out; transition: all .3s ease-out;}
.main-product__list li:hover {width: 35%;}
.main-product__list li a {display: flex; align-items: center; justify-content: center; height: 540px; font-size: 26px; color: #fff; font-weight: 600; text-align: center; -webkit-transition: all .3s ease-out; transition: all .3s ease-out;}
.main-product__list li:nth-child(1) a {background: url('/images/kor06r-18-0410/main/main_product_1.jpg')no-repeat center center / cover;}
.main-product__list li:nth-child(2) a {background: url('/images/kor06r-18-0410/main/main_product_2.jpg')no-repeat center center / cover;}
.main-product__list li:nth-child(3) a {background: url('/images/kor06r-18-0410/main/main_product_3.jpg')no-repeat center center / cover;}
.main-product__list li:nth-child(4) a {background: url('/images/kor06r-18-0410/main/main_product_4.jpg')no-repeat center center / cover;}

.main-gallery {padding: 100px 0;}
.main-gallery__list {display: flex; margin: 0 -30px;}
.main-gallery__list li {width: 33.3333%; padding: 0 30px;}
.main-gallery__list li.none {width: 100%; text-align: center;}
.main-gallery__list li a {display: block; position: relative;}
.main-gallery__list li a em {display: block; padding-bottom: 63.8888%;}
.main-gallery__list li a p {font-size: 18px; font-weight: 600; margin-top: 15px; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.4; height: 2.8em; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.main-gallery__list li a span {width: 60px; height: 30px; background: #eb2f11; color: #fff; font-size: 14px; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;}

.main-cs {background: #2c60aa; color: #fff;}
.main-cs dl {display: flex; align-items: center; justify-content: space-between;}
.main-cs dl dt {display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 20px;}
.main-cs dl dt:before {content: ''; display: block; width: 142px; height: 130px; margin-right: 80px; background: url('/images/kor06r-18-0410/main/main_customer.png')no-repeat center bottom / 100% auto;}
.main-cs dl dt a {font-size: 40px; font-weight: 700; margin-left: 30px;}
.main-cs dl dd ul li {display: flex; align-items: center; margin-bottom: 10px; font-size: 20px;}
.main-cs dl dd ul li:last-child {margin-bottom: 0;}
.main-cs dl dd ul li:before {content: ''; display: block; width: 30px; height: 30px; margin-right: 20px; -webkit-border-radius: 50%; border-radius: 50%;}
.main-cs dl dd ul li:nth-child(1):before {background: #fff url('/images/kor06r-18-0410/main/main_customer_1.png')no-repeat center center / 22px auto;}
.main-cs dl dd ul li:nth-child(2):before {background: #fff url('/images/kor06r-18-0410/main/main_customer_2.png')no-repeat center center / 22px auto;}

@media only screen and (max-width: 1200px){
	.main-title h3 {font-size: 34px;}
	.main-title h3 + a {margin-bottom: 20px;}
	.main-title p {font-size: 14px;}
	.main-title a {margin-top: 30px; font-size: 14px;}
	.main-product__list li a {font-size: 20px; height: 400px;}
	.main-gallery__list {margin: 0 -15px;}
	.main-gallery__list li {padding: 0 15px;}
	.main-cs dl dt {font-size: 16px;}
	.main-cs dl dt:before {width: 100px; height: 100px; margin-right: 30px;}
	.main-cs dl dt a {font-size: 30px; margin-left: 20px;}
	.main-cs dl dd ul li {font-size: 14px; margin-bottom: 5px;}
	.main-cs dl dd ul li:before {margin-right: 10px; width: 24px; height: 24px; background-size: 18px auto !important;}
}

@media screen and (max-width:980px){
	.main-title h3 {font-size: 30px;}
	.main-title h3 + a {margin-bottom: 10px;}
	.main-title a {margin-top: 20px;}
	.main-product__list li a {font-size: 16px; height: 320px;}
	.main-gallery__list {margin: 0 -10px;}
	.main-gallery__list li {padding: 0 10px;}
	.main-gallery__list li a p {font-size: 14px;}
	.main-cs dl dt {font-size: 14px;}
	.main-cs dl dt:before {width: 80px; height: 80px; margin-right: 20px;}
	.main-cs dl dt a {font-size: 24px; margin-left: 10px;}
	.main-cs dl dd ul li {font-size: 13px;}
	.main-cs dl dd ul li:before {margin-right: 5px; width: 20px; height: 20px; background-size: 15px auto !important;}
}

@media screen and (max-width:768px){
	.main-title h3 {font-size: 26px;}
	.main-title a {font-size: 13px;}
	.main-title p {font-size: 13px;}
	.main-top {padding-top: 60px; background-size: 70% auto;}
	.main-overview {display: block;}
	.main-overview dt {width: 100%;}
	.main-overview dd {width: 100%;}
	.main-product {margin-top: 60px;}
	.main-product__list {flex-wrap: wrap;}
	.main-product__list li {width: 50%;}
	.main-product__list li:hover {width: 50%;}
	.main-product__list li a {height: 200px; font-size: 16px;}
	.main-gallery {padding: 60px 0;}
	.main-gallery__list {display: block; margin: 0;}
	.main-gallery__list li {width: 100%; padding: 0; margin-bottom: 20px;}
	.main-gallery__list li:last-child {margin-bottom: 0;}
	.main-gallery__list li a p {margin-top: 10px;}
	.main-cs {padding: 30px 0;}
	.main-cs dl {display: block;}
	.main-cs dl dt {display: block;}
	.main-cs dl dt:before {display: none;}
	.main-cs dl dt a {display: block; margin-left: 0;}
	.main-cs dl dd {margin-top: 10px;}
}