@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2018-03-27
******************************************************** */
.section{height:1000px;}
/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:500px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
/**
 * 4. Home Slider
 */

.home-slider {
    padding-top: 0 !important;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    overflow: hidden;
}
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.6;
    background: -moz-linear-gradient(top, black 0, transparent 50%, transparent 63%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-linear-gradient(top, black 0, transparent 50%, transparent 63%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, black 0, transparent 50%, transparent 63%, rgba(0, 0, 0, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#c9000000', GradientType=0);
    transition: all .65s ease;
}
.swiper-slide-duplicate-active .overlay,
.swiper-slide-active .overlay {
    opacity: 0.1;
}
.slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.slide-inner--image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 1;
    transform: scale(1.00);
    -webkit-transition: opacity .6s ease-in-out, transform 2s ease .7s;
    -moz-transition: opacity .6s ease-in-out, transform 2s ease .7s;
    transition: opacity .6s ease-in-out, transform 2s ease .7s;
}
.swiper-slide-duplicate-active .slide-inner--image,
.swiper-slide-active .slide-inner--image {
    opacity: 1;
    transform: scale(1);
}

/* 4.1 Slider navigation buttons */
.swiper-nav-btn{position: absolute; width: 100%; top: 50%; margin-top: 110px; left: 0; z-index: 999;}
.swiper-nav-btn .area-box{position: relative;}
.swiper-button-prev,
.swiper-button-next {
    text-transform: uppercase;
	position: static !important; width: auto !important; height: auto !important;
	display: inline-block; vertical-align: middle; color: #fff;
    font-size: 27px;
	margin-top: 0 !important;
    width: auto;
    background-image: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.swiper-button-prev i,
.swiper-button-next i{font-size: 27px;}
.swiper-button-prev{left: 0 !important;}
.swiper-button-next{right: auto !important; left: 50px !important;}

.swiper-pagination{position: static !important; width: auto !important; display: inline-block; vertical-align: middle; margin: 0 8px;}
.swiper-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin-left: 7px; display: inline-block; vertical-align: middle;
    border-radius: 0;
    background: #fff;
    opacity: .3;
}
.swiper-pagination .swiper-pagination-bullet:first-child{margin-left: 0;}
.swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
}



/* 4.3 Pagination */
.expanded-timeline {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: right;
        -ms-flex-pack: right;
            justify-content: right;
    z-index: 3;
    bottom: 2.8em;
    right: 3em;
    width: 40vh;
}
.swiper-pagination {
    z-index: 4;
    width: 100%;
    left: 0;
    right: 0;
}

/**
 * 11. Responsive Rules
 */
@media only screen and (max-width: 805px) {
    .overlay {
        background: -moz-linear-gradient(top, black 0, transparent 35%, transparent 45%, rgba(0, 0, 0, 0.9) 100%);
        background: -webkit-linear-gradient(top, black 0, transparent 35%, transparent 45%, rgba(0, 0, 0, 0.9) 100%);
        background: linear-gradient(to bottom, black 0, transparent 35%, transparent 45%, rgba(0, 0, 0, 0.9) 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#c9000000', GradientType=0);
    }
    .swiper-button-prev,
    .swiper-button-next {
        top: 50vh;
    }
    .swiper-button-prev {
        padding-left: 3em;
    }
    .swiper-button-next {
        padding-right: 3em;
    }
    .swiper-button-prev::after,
    .swiper-button-next::after {
        width: 2em;
    }
    .swiper-button-prev:hover {
        padding-left: 3em;
    }
    .swiper-button-prev:hover::after {
        width: 2em;
    }
    .swiper-button-next:hover {
        padding-right: 3em;
    }
    .swiper-button-next:hover::after {
        width: 2em;
    }
    .expanded-timeline {
        display: none;
    }
    .ms-btn--slider {
        margin: 15px auto;
        display: inline-block;
        letter-spacing: .15em;
        background: #df1f29;
        color: #fff;
        padding: .5em 0;
    }
    .ms-btn--slider::before {
        content: '';
        display: none;
        width: 0;
    }
    .ms-container {
        padding-top: 6em;
        padding-bottom: 3em;
    }
    .ms-container.home-slider {
        padding-bottom: 0 !important;
    }
}


/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; top:50%; margin-top: 50px; left:0px; width:100%; z-index: 99;
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.main-visual-txt-con .main-visual-txt1{display:block; font-size:54px; line-height: 64px; font-weight:900; letter-spacing:-0.1px; color:#fff; margin-bottom:20px;}
.main-visual-txt-con .main-visual-txt2{font-size:18px; font-weight: 400; line-height: 30px; letter-spacing:-0.5px; color:rgba(255,255,255,0.6); margin-bottom:120px;}
.main-visual-txt-con .main-visual-more-btn{position:relative; display:inline-block; width: 180px; height: 53px; line-height: 53px; font-size:15px; font-weight:400; letter-spacing: -0.5px; color:rgba(255,255,255,0.9); border:2px solid rgba(255,255,255,0.3); border-right: 2px solid #fff; border-left: 2px solid #fff; text-align: center;}


.main-visual-txt-con .main-visual-more-btn:before,
.main-visual-txt-con .main-visual-more-btn:after{
    display:inline-block; position:absolute; top:-2px; content:""; 
    -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.main-visual-txt-con .main-visual-more-btn:before{left:0; width:20px; height:53px; border-top:2px solid #fff; border-bottom:2px solid #fff}
.main-visual-txt-con .main-visual-more-btn:after{right:0; width:20px; height:53px; border-top:2px solid #fff; border-bottom:2px solid #fff}
.main-visual-txt-con .main-visual-more-btn span{position:relative; z-index:1;}


@media all and ( min-width: 800px ){
	.main-visual-txt-con .main-visual-more-btn:hover:before,
	.main-visual-txt-con .main-visual-more-btn:hover:after{width:50%;}
}


/* 메인 비주얼 :: active효과 */
.swiper-slide-active .main-visual-txt1,
.swiper-slide-active .main-visual-txt2,
.swiper-slide-active .main-visual-txt3,
.swiper-slide-active .main-visual-more-btn{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.swiper-slide-active .main-visual-txt1{ -webkit-animation-delay:0.1s; animation-delay:0.1s;}
.swiper-slide-active .main-visual-txt2{ -webkit-animation-delay:0.8s; animation-delay:0.8s;}
.swiper-slide-active .main-visual-more-btn{-webkit-animation-delay:1.2s; animation-delay:1.2s;}

@-webkit-keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-ms-transform: translateX(-50px); 
		-o-transform: translateX(-50px); 
		-moz-transform: translateX(-50px);
		-webkit-transform: translateX(-50px); 
		transform: translateX(-50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-ms-transform: translateX(0); 
		-o-transform: translateX(0); 
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
 }
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-ms-transform: translateX(-50px); 
		-o-transform: translateX(-50px); 
		-moz-transform: translateX(-50px);
		-webkit-transform: translateX(-50px); 
		transform: translateX(-50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-ms-transform: translateX(0); 
		-o-transform: translateX(0); 
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}



@-webkit-keyframes content-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-ms-transform: translateY(-50px); 
		-o-transform: translateY(-50px); 
		-moz-transform: translateY(-50px);
		-webkit-transform: translateY(-50px); 
		transform: translateY(-50px);
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-ms-transform: translateY(0); 
		-o-transform: translateY(0); 
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
 }
@keyframes content-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-ms-transform: translateY(-50px); 
		-o-transform: translateY(-50px); 
		-moz-transform: translateY(-50px);
		-webkit-transform: translateY(-50px); 
		transform: translateY(-50px);
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-ms-transform: translateY(0); 
		-o-transform: translateY(0); 
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}



/* 메인 비주얼 :: 글자 깨는 효과 */
.glow-text {
	white-space: pre;
	font-weight:600;
}
.glow-text span{display:inline-block; }
.swiper-slide-active .glow-text span {
  -webkit-animation: letter-glow 0.5s 0.5s ease both;
          animation: letter-glow 0.5s 0.5s ease both;
}

@keyframes letter-glow {
  0% {
    opacity: 0;
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.1);
	transform: translateY(10px);
  }
  66% {
    opacity: 1;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9);
	transform: translateY(0px);
  }
  77% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0);
	transform: translateY(0px);
  }
}



/* ******************  메인 컨텐츠 :: product ********************** */
.horizontal-cm-tit{margin-bottom: 30px;}
.horizontal-cm-tit h3{display: inline-block; vertical-align: top; font-size: 46px; letter-spacing: -0.25px; color: #222; font-weight: 800;}
.horizontal-cm-tit h3:after{display: inline-block; vertical-align: middle; margin: 0 40px; content: ''; width: 35px; height: 3px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8a333+1,f06421+100 */
background: rgb(248,163,51); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(248,163,51,1) 1%, rgba(240,100,33,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(248,163,51,1) 1%,rgba(240,100,33,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(248,163,51,1) 1%,rgba(240,100,33,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8a333', endColorstr='#f06421',GradientType=0 ); /* IE6-9 */}
.horizontal-cm-tit p{display: inline-block; vertical-align: middle; font-size: 16px; line-height: 28px; font-weight: 400; letter-spacing: -0.5px; color: #888; width: calc(100% - 320px); -ms-word-break: keep-all; word-break: keep-all;}


.prd-main-list-container {width:100%; height:550px;}
.prd-main-list-img-thum{position:relative; width:100%; height:550px; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s}

.prd-main-list-container.main-size {width:100%; height:500px;}
.prd-main-list-img-thum.main-size{position:relative; width:100%; height:500px; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s}

.prd-main-list-img-thum.prd-list01{background-position:center top !important;}
.prd-main-list-img-thum.prd-list02{background-position:center top !important;}
.prd-main-list-img-thum.prd-list03{background-position:center top !important;}
.prd-main-list-img-thum.prd-list04{background-position:right top !important;}
.prd-main-list-img-thum.prd-list05{background-position:center top !important;}

.prd-main-txt-thum{position:absolute; top:0; left:0; bottom:0; right:0;}
.prd-main-txt-thum:before{position: absolute; top: 0; right: 0; display: block; content: ''; width: 1px; height: 100%; background-color: rgba(255,255,255,0.4);}
.prd-main-list-container li:last-child .prd-main-txt-thum:before{display: none;}
.prd-main-txt-thum-tit{position:absolute; width: 550px; left:21px; bottom:19px; font-size:28px; line-height:28px; letter-spacing: 2px; color:#fff; font-weight:600; opacity:1.0;filter:Alpha(opacity=100); visibility:visible; -webkit-transition:bottom 0.4s, left 0.4s; -moz-transition:bottom 0.4s, left 0.4s; -o-transition:bottom 0.4s, left 0.4s;-ms-transition:bottom 0.4s, left 0.4s; transition:bottom 0.4s, left 0.4s;}
.prd-main-txt-thum-tit span{display:block;}



/* 제품 메인 :: 설명 */
.prd-main-txt-thum-inner{width: calc(100% - 91px); padding: 0 10px; position:absolute; text-align: center; left:0; top: 50%; opacity:0;filter:Alpha(opacity=0); visibility:hidden; -ms-transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -moz-transform:translate(0, -50%); -o-transform:translate(0, -50%); transform:translate(0, -50%);
-webkit-transition: opacity 0.6s; -moz-transition: opacity 0.6s; -o-transition: opacity 0.6s; -ms-transition: opacity 0.6s; transition: opacity 0.6s; 
-webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; -o-transition-delay:0.3s; transition-delay:0.3s; -ms-word-break: keep-all; word-break: keep-all;}
.prd-main-list-inner-tit{font-size:46px; color:#fff; font-weight:600; letter-spacing:-0.25px;}
.prd-main-inner-txt{margin-top: 20px; font-size:16px; line-height:28px; color:rgba(255,255,255,0.8); letter-spacing:-0.5px;}
.prd-main-inner-btn{margin-top: 40px;}
.prd-main-inner-btn ul{text-align: center;}
.prd-main-inner-btn ul li{/* width: 17%; */width: 185px; display: inline-block; margin: 0 1px;}
.prd-main-inner-btn ul li .btn-a{position: relative; display: block;  width: 100%; border: 1px solid rgba(255,255,255,0.4); background-color: rgba(0,0,0,0.4); height: 60px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.prd-main-inner-btn ul li .btn-a:before{position: absolute; top: 0; left: 0; content: ''; left:0px; width:0px; height:58px; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; -ms-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8a333+1,f06421+100 */
background: rgb(248,163,51); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(248,163,51,1) 1%, rgba(240,100,33,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(248,163,51,1) 1%,rgba(240,100,33,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(248,163,51,1) 1%,rgba(240,100,33,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8a333', endColorstr='#f06421',GradientType=0 ); /* IE6-9 */
}
.prd-main-inner-btn ul li .btn-a span{position:relative; z-index:1; display: table; table-layout: fixed; width: 100%; height: 60px; font-size: 15px; font-weight: 700; color: #fff; text-align: center;}
.prd-main-inner-btn ul li .btn-a em{display: table-cell; vertical-align: middle; padding: 0 5px;}

@media all and (min-width:800px){
	.prd-main-inner-btn ul li .btn-a:hover:before{width:100%}
}

.prd-main-inner-btn.ver2{width: 470px; margin: 40px auto 0;}
.prd-main-inner-btn.ver2 li{width: 100%; margin: 2px 0;}
.prd-main-inner-btn.ver2 li .btn-a{}
.prd-main-inner-btn.ver2 li .btn-a span{text-align: left;}
.prd-main-inner-btn.ver2 li .btn-a span em{padding: 0 25px;}
.prd-main-inner-btn.ver2 li .btn-a span p{position: relative; padding-left: 15px;}
.prd-main-inner-btn.ver2 li .btn-a span p:before{position: absolute; top: 6px; left: 0; display: block; content: ''; width: 4px; height: 4px; background-color: rgba(255,255,255,0.7);}


/* 제품 메인 :: More 버튼 */
.prd-main-more-box{position:absolute; top:0; right:0; width:71px; height:0; opacity:0;filter:Alpha(opacity=0); visibility:hidden; 
-webkit-transition:all 0.6s; -moz-transition:all 0.6s; -o-transition:all 0.6s; -ms-transition:all 0.6s; transition:all 0.6s;
-webkit-transition-delay:0s; -moz-transition-delay:0s; -o-transition-delay:0s; transition-delay:0s;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8a333+1,f06421+100 */
background: rgb(248,163,51); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(248,163,51,1) 1%, rgba(240,100,33,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(248,163,51,1) 1%,rgba(240,100,33,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(248,163,51,1) 1%,rgba(240,100,33,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8a333', endColorstr='#f06421',GradientType=0 ); /* IE6-9 */
}
.prd-main-more-box > p{position:relative; width:100%; height:100%;}
.prd-main-more-box > p span{display:block; width:150px; position:absolute; bottom:60px; left:50%; font-size:16px; color:#fff; letter-spacing:3px; 
-ms-transform:translate(-50%, -50%) rotate(-270deg); -webkit-transform:translate(-50%, -50%) rotate(-270deg); -moz-transform:translate(-50%, -50%) rotate(-270deg); -o-transform:translate(-50%, -50%) rotate(-270deg); transform:translate(-50%, -50%) rotate(-270deg);}
.prd-main-more-box > p em{position:relative; top:26px; display:block; width:100%; text-align:center;}

.prd-main-list-container li > .inner{display: block;}

/* 제품 메인 :: Hover 시 */
.prd-main-list-container li.kwicks-expanded .prd-main-txt-thum-tit, .prd-main-list-container li.selected .prd-main-txt-thum-tit{bottom:-10px; opacity:0;filter:Alpha(opacity=0); visibility:hidden;}
.prd-main-list-container li.kwicks-expanded .prd-main-txt-thum-inner, .prd-main-list-container li.selected .prd-main-txt-thum-inner{left:0; opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}
.prd-main-list-container li.kwicks-expanded .prd-main-txt-thum-inner{left: 50%; margin-left: -447px; width: 800px;}
.prd-main-list-container li.kwicks-expanded .prd-main-more-box, .prd-main-list-container li.selected .prd-main-more-box{height:100%; opacity:1.0;filter:Alpha(opacity=100); visibility:visible; -webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; -o-transition-delay:0.3s; transition-delay:0.3s;}
.prd-main-list-container li.kwicks-collapsed .prd-main-txt-thum-tit, .prd-main-list-container li.noselected .prd-main-txt-thum-tit{left:50%; bottom: 0; text-align: center;}
.prd-main-list-container li.kwicks-collapsed .prd-main-txt-thum-tit span, .prd-main-list-container li.noselected .prd-main-txt-thum-tit span{width:550px; position:absolute; bottom:225px; left:0; -ms-transform:translate(-50%, -50%) rotate(-270deg); -webkit-transform:translate(-50%, -50%) rotate(-270deg); -moz-transform:translate(-50%, -50%) rotate(-270deg); -o-transform:translate(-50%, -50%) rotate(-270deg); transform:translate(-50%, -50%) rotate(-270deg);}

/* 기본 셀렉트 */
.prd-main-list-container li.selected{width: 71.8% !important; position: relative !important;}
.prd-main-list-container li.noselected{width: 9.4% !important; position: relative !important; left: 0 !important;}
.prd-main-list-container li.noselected .prd-main-img-cover {visibility: visible; opacity: 1 !important; filter: Alpha(opacity=100) !important;}


/* 아코디언 01 :: 레이아웃 */
.accordian-list-box{display: none;}
.accordian-list-box .accordian-list{ display: table; width:100%; height: 670px; }
.accordian-item{width:250px; display:table-cell; height:100%; margin:0}
.accordian-item .accordian-inner{display:block; position:relative; height:100%; margin:0}
.accordian-item .accordian-inner:after{
	position:absolute; bottom:0px; left:0px; width:100%; height:100%; content:"";
	opacity:0.3;filter:Alpha(opacity=30); background-color: #000;
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s;}
/* 아코디언 01 :: 타이틀 및 내용 */
.accordian-item .accordian-inner .accordian-tit{
	position:absolute; top:50%; color:#fff; font-size:25px; font-weight:600; width:100%; text-align:center; margin-top:-13px; z-index:1;
	opacity:1.0;filter:Alpha(opacity=100);
	-webkit-transition:all 0.3s; -moz-transition:all 0.3s; -o-transition:all 0.3s; -ms-transition:all 0.3s; transition:all 0.3s;
}
.accordian-item .accordian-inner .more-btn{display: block; height:50px; position:absolute; bottom:0px; left: 0; right:0px; z-index:1; -webkit-transition:all 0.2s 0s;-moz-transition:all 0.2s 0s;-o-transition:all 0.2s 0s;-ms-transition:all 0.2s 0s;transition:all 0.2s 0s;  opacity:0;filter:Alpha(opacity=0); visibility: hidden;}
.accordian-item .accordian-inner .more-btn:before{position:absolute; bottom:0px; left:0px; width:0; height:50px; content:""; -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s; z-index:1;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8a333+1,f06421+100 */
background: rgb(248,163,51); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(248,163,51,1) 1%, rgba(240,100,33,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(248,163,51,1) 1%,rgba(240,100,33,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(248,163,51,1) 1%,rgba(240,100,33,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8a333', endColorstr='#f06421',GradientType=0 ); /* IE6-9 */
}
.accordian-item .accordian-inner .more-btn span{position: absolute; top: 17.5px; left: 20px; z-index: 2; display: block; font-size: 12px; line-height: 15px; font-weight: 600; letter-spacing: 2px; color: #fff;}
.accordian-item .accordian-inner .more-btn img{position: absolute; top: 17.5px; right: 20px; z-index: 2; display: block; height: 15px; -webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s; -ms-transition:all 0.2s;transition:all 0.2s; opacity:0;filter:Alpha(opacity=0); visibility:hidden; transition-delay: 0.4s;}
/* 아코디언 01 :: Active */
.accordian-item.active .accordian-inner:after{opacity:0;filter:Alpha(opacity=0); }
.accordian-item.active .accordian-inner .accordian-tit{opacity:0;filter:Alpha(opacity=0); transition:all 0s;}
.accordian-item.active .prd-main-txt-thum-inner{left:0; opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}
.accordian-item.active .accordian-inner .more-btn{visibility: visible; opacity:1.0;filter:Alpha(opacity=100);}
.accordian-item.active .accordian-inner .more-btn:before{width:100%; opacity:1.0;filter:Alpha(opacity=100);}
.accordian-item.active .accordian-inner .more-btn img{visibility: visible; opacity:1.0;filter:Alpha(opacity=100);}

@media all and ( min-width: 800px ){
	#mainBusiness.active .horizontal-cm-tit, #mainBusiness.active .pc-accordian-list-box, #mainBusiness.active .accordian-list-box{
		-webkit-animation: content-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
		animation: content-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	}
	#mainBusiness.active .pc-accordian-list-box, #mainBusiness.active .accordian-list-box{-webkit-animation-delay:0.7s; animation-delay:0.7s;}
}



/* ******************  메인 컨텐츠 :: solution ********************** */
.vertical-cm-tit{text-align: center;}
.vertical-cm-tit h3{width: 100%; display: inline-block; font-size: 46px; letter-spacing: -0.25px; color: #222; font-weight: 800;}
.vertical-cm-tit h3:after{display: block; margin: 25px auto; content: ''; width: 35px; height: 3px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f8a333+1,f06421+100 */
background: rgb(248,163,51); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(248,163,51,1) 1%, rgba(240,100,33,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(248,163,51,1) 1%,rgba(240,100,33,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(248,163,51,1) 1%,rgba(240,100,33,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8a333', endColorstr='#f06421',GradientType=0 ); /* IE6-9 */}
.vertical-cm-tit p{width: 100%; display: inline-block; font-size: 16px; line-height: 28px; font-weight: 400; letter-spacing: -0.5px; color: #888;}

#mainSolution{background: url("../images/main/main_solution_bg.jpg") 50% 50% no-repeat; -webkit-background-size: cover; background-size: cover;}
.main-solution-wrapper{margin-top: 55px;}
ul.main-solution-list{margin: 0 -0.8%;}
ul.main-solution-list li{float: left; width: 31.73%; margin: 0 0.8%;}
ul.main-solution-list li a{display: block; width: 100%;}
ul.main-solution-list li a .tit-con{position: relative; padding: 0 30px; width: 100%; height: 70px; background-color: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ul.main-solution-list li a .tit-con:before{position: absolute; top: 0; left: 0; content: ''; background-color: #f06421; left:0px; width:0px; height:70px;  -webkit-transition: width 0.3s; -moz-transition: width 0.3s; -ms-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s;}
ul.main-solution-list li a .tit-con .inner{position:relative; z-index:1; display: table; table-layout: fixed; width: 100%; height: 70px;}
ul.main-solution-list li a .tit-con p{width: 100%; display: table-cell; vertical-align: middle; font-size: 22px; font-weight: 800; color: #333; letter-spacing: -0.25px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
ul.main-solution-list li a .tit-con i{display: block; position: absolute; top: 50%; right: 0; margin-top: -12px; font-size: 24px; color: #f06421; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
ul.main-solution-list li a .img-con{position: relative; width: 100%; height: 0; padding-top: 68%; overflow: hidden;}
ul.main-solution-list li a .img-con:before{position: absolute; top: 0; left: 0; display: block; content: ''; width: 100%; height: 100%; border: 3px solid transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; z-index: 1;}
ul.main-solution-list li a .img-con img{width: 100%; height: 100%; position: absolute; top: 0; left: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}


@media all and (min-width:800px){
	ul.main-solution-list li a:hover .tit-con:before{width:100%}
	ul.main-solution-list li a:hover .tit-con p, ul.main-solution-list li a:hover .tit-con i{color: #fff;}
	ul.main-solution-list li a:hover .tit-con i{animation: rtmotion 0.3s ease-in-out;}
	ul.main-solution-list li a:hover .img-con img{-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);}
	ul.main-solution-list li a:hover .img-con:before{border-color: #f06421;}
}

@media all and ( min-width: 800px ){
	#mainSolution.active .vertical-cm-tit, #mainSolution.active ul.main-solution-list li a{
		-webkit-animation: content-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
		animation: content-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	}
	#mainSolution.active ul.main-solution-list li.li-01 a{-webkit-animation-delay:0.5s; animation-delay:0.5s;}
	#mainSolution.active ul.main-solution-list li.li-02 a{-webkit-animation-delay:0.7s; animation-delay:0.7s;}
	#mainSolution.active ul.main-solution-list li.li-03 a{-webkit-animation-delay:0.9s; animation-delay:0.9s;}
}



/* ******************  메인 컨텐츠 :: about ********************** */
#mainAbout{position: relative; overflow: hidden;}
.main-about-con{left: 0; top: 0; overflow: hidden; position: absolute; width: 100%; height: 100%; padding-top: 0;}
.main-about-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../images/main/main_about_bg.jpg") 50% 50% no-repeat; -webkit-background-size: cover; background-size: cover;}
#mainAbout.active .main-about-bg{-webkit-transform: scale(1.2); transform: scale(1.2); 
-webkit-animation: mainMotion 3s ease-out 1s 1 both; animation: mainMotion 3s ease-out 1s 1 both;}
#mainAbout .vertical-cm-tit h3{color: #fff;}
#mainAbout .vertical-cm-tit p{color: rgba(255,255,255,0.7);}
#mainAbout .vertical-cm-tit p .pc-br,#mainAbout .vertical-cm-tit p .pc-br.m-br{display: block;}
#mainAbout .vertical-cm-tit p .m-br{display: none;}


.main-about-con .area-box{width: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.main-about-wrapper{margin-top: 130px;}
ul.main-about-list{text-align: center;}
ul.main-about-list li{position: relative; width: 17%; display: inline-block;}
ul.main-about-list li:before{position: absolute; top: 0; left: 0; content: ''; width: 1px; height: 135px; background-color: rgba(255,255,255,0.4);}
ul.main-about-list li:first-child:before{display: none;}
ul.main-about-list li a{display: block;}
ul.main-about-list li a .img-con{text-align: center;}
ul.main-about-list li a .img-con img{display: inline-block; height: 77px;}
ul.main-about-list li a .txt-con{margin-top: 30px; font-size: 20px; font-weight: 400; letter-spacing: -0.5px; color: rgba(255,255,255,0.9);}

@keyframes navani{
	0% {transform: scaleX(1);}
	25% {transform: scaleX(0);}
	50% {transform: scaleX(1);}
	75% {transform: scaleX(0);}
	100% {transform: scaleX(1)}
}


@-webkit-keyframes mainMotion { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(1) rotate(0.01deg); transform: scale(1) rotate(0.01deg); } }

@keyframes mainMotion { 0% { -webkit-transform: scale(1.2); transform: scale(1.2); }
  100% { -webkit-transform: scale(1) rotate(0.01deg); transform: scale(1) rotate(0.01deg); } }



@media all and ( min-width: 800px ){
	.main-about-list li a:hover .img-con img {animation: navani 0.4s ease-in-out;}
}

@media all and ( min-width: 800px ){
	#mainAbout.active .vertical-cm-tit, #mainAbout.active ul.main-about-list li a{
		-webkit-animation: content-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
		animation: content-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	}
	#mainAbout.active ul.main-about-list li.li-01 a{-webkit-animation-delay:0.5s; animation-delay:0.5s;}
	#mainAbout.active ul.main-about-list li.li-02 a{-webkit-animation-delay:0.7s; animation-delay:0.7s;}
	#mainAbout.active ul.main-about-list li.li-03 a{-webkit-animation-delay:0.9s; animation-delay:0.9s;}
}


/* ******************  메인 컨텐츠 :: customer ********************** */
#mainCustomer{}
#mainCustomer .fp-tableCell {vertical-align: bottom;}
#mainCustomer .fp-tableCell > div {padding-top: 50px; padding-bottom: 150px;} /* ori. paggding-bottom:80px; */
.main-customer-con{/* padding: 195px 0 120px; min-height: 310px; */}
/* 공지사항 */
.main-board-box{position:relative; float:left; width:47%}
.main-board-box .main-board-tit{color:#333; font-weight: 600; font-size:30px; letter-spacing:-0.5px; padding-bottom:15px; border-bottom:2px solid #333;}
.main-board-con{}
.main-board-con li{overflow:hidden; position:relative; padding-left:25px; padding-top:17px; padding-bottom: 17px; border-bottom: 1px solid #ddd;}
.main-board-con li:before{display:block; content:""; width:3px; height:3px; background-color:#777; position:absolute; top:22px; left:10px;}
.main-board-con li .bbs-tit{display:block; float:left; width:75%; color:#777; font-size:16px; letter-spacing:-0.75px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-board-con li .bbs-date{padding-right: 10px; float:right; width:20%; color:#9c9c9c; font-size:16px; letter-spacing:-0.25px; text-align:right;}
.main-board-box .board-more-btn{position:absolute; top:0px; right:0px; color:#000;}
.main-board-box .board-more-btn i{font-size:30px}
/* 자료실, 문의 */
.main-menu-box{float: right; width: 48%;}
.main-menu-box ul{margin: 0 -2%;}
.main-menu-box ul li{float: left; width: 46%; margin: 0 2%;}
.main-menu-box ul li .inner{display: block; position: relative; height: 0; padding-top: 300px;}
.main-menu-box ul li.li-01 .inner{background-color: #f8a433;}
.main-menu-box ul li.li-02 .inner{background-color: #f06421;}
.main-menu-box ul li .inner > div{text-align: center; position: absolute; left: 15px; right: 15px; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);}
.main-menu-box ul li .icon-con{}
.main-menu-box ul li .icon-con img{display: inline-block; height: 60px;}
.main-menu-box ul li .txt-con{margin-top: 20px;}
.main-menu-box ul li .txt-con .tit{font-size: 24px; font-weight: 600; letter-spacing: -0.5px; color: #fff;}
.main-menu-box ul li .txt-con .txt{margin-top: 10px; font-size: 15px; line-height: 1.4; letter-spacing: -0.75px; color: rgba(255,255,255,0.8); -ms-word-break: keep-all; word-break: keep-all;}
.main-menu-box ul li .view-con{margin-top: 30px;}
.main-menu-box ul li .view-con i{display: block; margin: 0 auto; font-size: 30px; color: #fff;}

@media all and ( max-height: 900px ) and ( min-width: 1101px ){
	#mainCustomer .fp-tableCell > div {padding-top: 50px; padding-bottom: 50px;}
}

@media all and ( min-width: 800px ){
	.main-menu-box ul li .inner:hover .icon-con img{animation: navani 0.4s ease-in-out;}
	.main-menu-box ul li .inner:hover .view-con i{animation: rtmotion 0.4s ease-in-out;}
	.main-board-con li:hover{background-color: #f2f2f2;}
	.main-board-con li:hover .bbs-tit{color: #f06421;}
}

@keyframes rtmotion{
	0% {transform: rotate(0deg);}
	25% {transform: rotate(45deg);}
	50% {transform: rotate(90deg);}
	75% {transform: rotate(135deg);}
	100% {transform: rotate(180deg)}
}


@media all and ( min-width: 800px ){
	#mainCustomer.active .main-board-box, #mainCustomer.active .main-menu-box ul li{
		-webkit-animation: content-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
		animation: content-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	}
	#mainCustomer.active .main-menu-box ul li.li-01{-webkit-animation-delay:0.5s; animation-delay:0.5s;}
	#mainCustomer.active .main-menu-box ul li.li-02{-webkit-animation-delay:0.8s; animation-delay:0.8s;}
}



/* ******************  메인 컨텐츠 :: footer ********************** */
#mainFooter{}





/* ******************  메인컨텐츠 :: rightBar ********************* */
#fp-nav.right.right {opacity: 1; right:3%;}
#fp-nav.right.right ul li, .fp-slidesNav ul li{width:42px; height:25px; margin:20px 0px;}
/* #fp-nav.right.right ul li:last-child, .fp-slidesNav ul li:last-child{display: none !important;} */
#fp-nav.right ul li a, .fp-slidesNav ul li a {position: relative; display:block; width:25px; height: 25px; float:right;}
#fp-nav.right ul li a:before, .fp-slidesNav ul li a:before{position: absolute; top: 0; left: 0; display: block; content: ''; width:25px; height: 25px; border:1px solid transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
#fp-nav.right ul li a.active:before, .fp-slidesNav ul li a.active:before{
	border-color: #fff;
	-webkit-animation: ball-scale-multiple 1s 0s linear infinite;
    animation: ball-scale-multiple 1s 0s linear infinite;
}
#fp-nav.right ul li a span, .fp-slidesNav ul li a span{background-color:#fff;}
#fp-nav.right ul li .fp-tooltip.right{top:0px; right:40px;}
#fp-nav.right ul li .fp-tooltip{width:70px; height:24px; font-weight: 400; line-height:24px; font-size:12px; text-align:right; color: rgba(255,255,255,0.5);	
	-webkit-transition: width .3s ease 0s;
	transition: width .3s ease 0s;
}
#fp-nav.right ul li a.active .fp-tooltip{color: #fff;}
#fp-nav.right ul li .fp-tooltip span{
	opacity:1;filter:Alpha(opacity=100);
	-webkit-transition: opacity .3s ease 0s;
	transition: opacity .3s ease 0s;
}
#fp-nav.right ul li a.active, .fp-slidesNav ul li a.active{border-color:#fff;}
#fp-nav.right ul li:hover .fp-tooltip,
#fp-nav.right a.active + .fp-tooltip {
    width: 70px;
	opacity:1.0;filter:Alpha(opacity=100);
	-webkit-transition: width .7s ease 0s;
	transition: width .7s ease 0s;
}
#fp-nav.right ul li:hover .fp-tooltip span,
#fp-nav.right a.active + .fp-tooltip span{
	opacity:1.0;filter:Alpha(opacity=100);
	-webkit-transition: opacity .7s ease 0s;
	transition: opacity .7s ease 0s;
}

/* black ver. */
#fp-nav.right.black ul li a span, #fp-nav.right.black .fp-slidesNav ul li a span{background-color: #c7c7c7;}
#fp-nav.right.black ul li a.active span, #fp-nav.right.black .fp-slidesNav ul li a.active span{background-color: #f06421;}
#fp-nav.right.black ul li a.active:before, #fp-nav.right.black .fp-slidesNav ul li a.active:before {border-color: #f06421;}

@media all and (max-width:1780px){
	#fp-nav{display: none !important;}
}

@keyframes ball-scale-multiple {
	0% {
		-webkit-transform: scale(0.33);
        transform: scale(0.33);
		opacity: 0.3; 
	}
	5% {
		opacity: 0.8; 
	}
	100% {
		-webkit-transform: scale(1);
        transform: scale(1);
		opacity: 0; 
	}  
}

@-webkit-keyframes ball-scale-multiple {
	0% {
		-webkit-transform: scale(0.33);
        transform: scale(0.33);
		opacity: 0.3; 
	}
	5% {
		opacity: 0.8; 
	}
	100% {
		-webkit-transform: scale(1);
        transform: scale(1);
		opacity: 0; 
	}  
}

#mainVisual .fp-tableCell > div, #mainFooter .fp-tableCell > div{padding-top: 0;}
.fp-tableCell > div{padding-top: 100px;}