

#ft {padding-top:0; }


/* -----------------------------
	메인비주얼
------------------------------*/

.swiper-container, .swiper-container2 {width: 100%; height: 100%; margin-left: auto; margin-right: auto; }
.swiper-slide {text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */
display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
  
.swiper-pagination-bullet {width: 12px !important;  height: 12px !important;  opacity: 0.7 !important;}
  
#mv_slide  {position:relative; width:100%; min-height:800px;  background-position:center; display:block; text-align:left; padding:0; margin:0; overflow:hidden; box-sizing:border-box; background-size:cover;}

#mv_slide .mv-shadow {z-index:2; background:rgba(0,0,0,0.3); }

#mv_slide h1, 
#mv_slide h2, 
#mv_slide h3 {display:block; color:#fff; text-shadow:0 0 7px rgba(0,0,0,0.3); margin:0; padding:0;}
#mv_slide h1 {font-weight:300; font-size:26px; line-height:1em; margin-bottom:15px; margin-top:150px; }
#mv_slide h2 {font-weight:500; font-size:90px; line-height:1em; letter-spacing:-2px; margin-bottom:50px; }
#mv_slide h3 {font-weight:200; font-size:17px; line-height:1.5em; letter-spacing:-0.2px; opacity:0.9; margin-bottom:50px;text-shadow:0 0 3px rgba(0,0,0,0.3); }

#mv_slide .btn {display:inline-block; width:auto; border-radius:5px; cursor:pointer;  transition:all .3s linear; letter-spacing:1px; text-transform:uppercase; -webkit-transition:all .3s linear; transition:all .3s linear; padding:7px 30px; font-size:20px; line-height:38px; font-weight:300; border:1px solid rgba(255,255,255,0.4); color:#fff;}
#mv_slide .btn:hover {background:#336699; border:1px solid transparent; color:#fff; }

/* 슬라이드1 */
#mv_slide .mv01 {position:relative; width:100%; height:100%; min-height:800px;  background-position:center; display:block; text-align:left; padding:0; margin:0; overflow:hidden; box-sizing:border-box; background-size:cover;}
#mv_slide .mv01 .container {height: 100%; padding-top:70px;}


/* 슬라이드2 */
#mv_slide .mv02 {position:relative; width:100%; padding:50px 0; overflow:hidden; background-size:cover; background-position:bottom center; }
#mv_slide .mv02 .container {height: 100%;}
#mv_slide .mv02 h2 {font-size:80px;}
#mv_slide .mv02 .mv02_text {position:absolute; left:0; top:170px; text-align:left; max-width:700px; z-index:2;}
#mv_slide .mv02 .mv02_btn {border-color:rgba(255,255,255,0.4); color:#fff;}
#mv_slide .mv02 .mv02_btn:hover {background:#432229;}
#mv_slide .mv02 .mv02_img {position:absolute; right:0; top:150px; text-align:right;z-index:1;}

/* 슬라이드3 */
#mv_slide .mv03 {position:relative; width:100%; padding:50px 0; overflow:hidden; background-color:#000;}
#mv_slide .mv03 video {position: absolute; left:0; top:0; min-width: 100%; min-height: 100%; width: auto; height: auto; opacity: 0.4}
#mv_slide .mv03 .container {height: 100%;}
#mv_slide .mv03 h2 {font-size:80px;}
#mv_slide .mv03 .mv03_text {position:absolute; left:0; top:170px; text-align:left; max-width:700px; z-index:2;}
#mv_slide .mv03 .mv03_btn {border-color:rgba(255,255,255,0.4); color:#fff;}
#mv_slide .mv03 .mv03_btn:hover {background:#88b04c;}
#mv_slide .mv03 .mv03_img {position:absolute; right:0; top:150px; text-align:right;z-index:1;}

@media(max-width:992px) {	
	#mv_slide h1 {margin-bottom:20px;}
	#mv_slide h2 {margin-bottom:40px; }
	#mv_slide h3 {margin-bottom:50px;}
	#mv_slide .mv01 {padding:0 30px; padding-top:150px;}
	#mv_slide .mv02 {padding:60px 30px; box-sizing:border-box;}
	#mv_slide .mv02 ul {padding:0px !important;}	
	#mv_slide .mv02 .usb-img img {width:100%; margin-top:30px; }
	#mv_slide .mv02 .btn {font-size:22px; width:100%;min-width:100%;}
	#mv_slide .mv03 {padding:60px 30px; box-sizing:border-box;}
	#mv_slide .mv03 ul {padding:0px !important;}	
	#mv_slide .mv03 .btn {font-size:22px; width:100%;min-width:100%;}
	#mv_slide video {margin-left:-512px;}
}
@media(max-width:480px) {
	#mv_slide h1 {font-size:14px; margin-bottom:10px; letter-spacing:-0.5px; }
	#mv_slide h2 {font-size:60px; margin-bottom:15px; }
	#mv_slide h3 {font-size:16px; margin-bottom:40px; font-weight:500; }#mv_slide .mv01 {padding:0 30px; padding-top:110px;}
}
 
#menual  {position:relative; width:100%; min-height:700px; background-position:center; display:block; text-align:center; padding:0; margin:0; box-sizing:border-box; background-image:url(http://chroma-x.com/tmpl/shop_basic/img/main/bg1.png); background-size:cover; background-position:0 center;} 

#menual h1{display:block; color:#fff; text-shadow:0 0 7px rgba(0,0,0,0.3); text-align:center; margin:0; padding:0;font-weight:300; font-size:30px; line-height:1em; margin-bottom:15px; padding-top:70px;
position: absolute; z-index: 3; width: 100%; text-align: center;}
#menual h1:after {content:""; display:block; width:200px; height:1px; border-bottom:1px solid rgba(255,255,255,0.2); margin:30px auto;}


#menual .swiper-container2 {position:absolute; width:100%; height:700px; z-index:2; background:rgba(0,0,0,0.4); box-sizing:border-box; padding-top:80px; }
#menual .swiper-slide {background:transparent;}
#menual h2 {display:block; color:#fff; text-shadow:0 0 7px rgba(0,0,0,0.3); text-align:center; margin:0; padding:0;font-weight:500; font-size:15px; line-height:1em; letter-spacing:-0.5px; margin-bottom:20px; }

#menual .btn {position:absolute; z-index:3; display:inline-block; width:auto; border-radius:2px; cursor:pointer;  transition:all .3s linear; letter-spacing:1px; text-transform:uppercase; -webkit-transition:all .3s linear; transition:all .3s linear; padding:5px 10px; font-size:12px; line-height:18px; font-weight:300; border:1px solid rgba(255,255,255,0.3); color:#fff; left:50%; margin-left:-45px;}
#menual .btn:hover {background:#e33a1f; border:1px solid transparent; color:#fff; }

/* 슬라이드1 */
#menual .mv01 {position:relative; width:100%; height:100%; height:700px; background-position:center; display:block; text-align:left; padding:0; margin:0; overflow:hidden; box-sizing:border-box; background-size:cover;}
#menual .mv01 .container {height: 100%; text-align:center; margin-top:80px;}
#menual iframe, #menual video {margin:0px; padding:0; margin-top:60px;}

/*------------------------------------------
  index - 가격안내링크
------------------------------------------*/
#index_price {background-color:#88b04c; padding:20px 0; text-align: center}
#index_price span {display: inline-block; color:#fff; font-size:20px; line-height: 40px;margin-right:10px;}
#index_price a.btn {border: 2px solid #fff; border-radius: 30px; color:#fff; font-size:18px; margin-top:-6px;transition:all .3s linear; letter-spacing:1px; text-transform:uppercase; -webkit-transition:all .3s linear; transition:all .3s linear;}
#index_price a.btn:hover {background-color:#fff; color:#88b04c; font-weight: bold;}
@media(max-width:480px) {
	#index_price {padding:10px;}
	#index_price span {font-size:16px; }
	#index_price a.btn {font-size:14px;}
}

/*------------------------------------------
  index - usb패키지
------------------------------------------*/
#usbset {position:relative; width:100%; padding:50px 0; text-align:center; overflow:hidden; }
#usbset h1 {color:#474d4b; font-size:32px; text-transform:uppercase; font-weight:400; margin:0; margin-bottom:40px; }
#usbset h2 {color:#808080; font-size:16px; line-height:30px; text-transform:uppercase; font-weight:400; margin:0; margin-bottom:40px; }
#usbset .usb-img {text-align:center; }
#usbset ul.pt50 {padding-top:100px !important}
/*#usbset .usb-img img {width:100%; max-width:700px; height:auto; }*/
#usbset .btn {border:1px solid #336699; padding:10px; font-size:25px; line-height:38px; color:#336699; font-weight:300; min-width:320px; letter-spacing:1px; text-transform:uppercase; -webkit-transition:all .3s linear; transition:all .3s linear; }
#usbset .btn:hover {background:#336699; border:1px solid transparent; color:#fff; }

@media(max-width:768px) {
	#usbset {padding:60px 30px; box-sizing:border-box;}
	#usbset ul {padding:0px !important;}
	#usbset h1 {font-size:27px; margin-bottom:30px; }
	#usbset h2 {font-size:14px; line-height:25px; margin-bottom:30px; }
	#usbset ul.pt50 {padding-top:30px !important}
	#usbset .usb-img img {width:100%; margin-top:30px; }
	#usbset .btn {font-size:22px; width:100%;min-width:100%;}
}
@media(max-width:480px) {
	
}


/*------------------------------------------
  index - PORTFOLIO
--------------------------------------------*/

#portfolio .portfolio-items-list {margin:0; padding:0 }

/* Portfolio Item */
 
div.pp_default .pp_description {font-size:15px; line-height:15px; }
.portfolio-item {position:relative; padding:0; margin:0; overflow:hidden; font-size:0}
.portfolio-item a {cursor:url(../img/main/pointer.png), crosshair; }
.portfolio-item .hover-overlay {width:100%; height:auto; padding:0; margin:0; }
.portfolio-item .hover-overlay img {-webkit-transition:all 600ms; -moz-transition:all 600ms; -o-transition:all 600ms; transition:all 600ms; width:100% !important; height:auto !important; }

/* Overlay Content  */
.portfolio-item .overlay-content {position:absolute; bottom:0; left:0; z-index:20; width:100%; zoom:1; opacity:0; -webkit-transition:all 200ms ease-out; -moz-transition:all 200ms ease-out; -o-transition:all 200ms ease-out; transition:all 200ms ease-out; }
.portfolio-item .overlay-content h4 {color:#fff; font-size:17px; line-height:17px; text-transform:uppercase; margin-bottom:8px; padding-left:20px; }
.portfolio-item .overlay-content p {color:#fff; font-size:15px; line-height:20px; padding:0 20px; }

/* Overlay Background */ 
.portfolio-item .item-overlay {opacity:0; -moz-opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(10, 10, 10, 0.75); -moz-transition:opacity 400ms ease-out; -webkit-transition:opacity 400ms ease-out; -o-transition:opacity 400ms ease-out; transition:opacity 400ms ease-out; }

/* Image Hover Effect  */
.portfolio-item .hover-overlay:hover > img {transform:scale(1.2); -ms-transform:scale(1.2); -webkit-transform:scale(1.2); -o-transform:scale(1.2); -moz-transform:scale(1.2); }
.portfolio-item .hover-overlay:hover .item-overlay {opacity:1; -moz-opacity:1; }
.portfolio-item:hover .overlay-content {bottom:10%; opacity:1; -moz-opacity:1; }


/*------------------------------------------
  index - About
------------------------------------------*/

/* 메인컨텐츠 */
.mAbout {position:relative; width:100%; padding:0; margin:0; display:block; text-align:left; margin-top:80px; }

.mAbout h1 {color:#474d4b; font-size:32px; text-align:center; text-transform:uppercase; font-weight:300; margin-bottom:40px; }
.mAbout h2 {color:#808080; font-size:16px; line-height:30px; text-align:center; text-transform:uppercase; font-weight:400; }
.mAbout h2:after {content:""; position:relative; display:block; background:url(../img/main/line.png) center no-repeat; height:10px; width:100%; margin:60px 0; }

.mAbout-icon ul {position:relative; clear:both; }
.mAbout-icon ul li {float:left; margin-bottom:70px; }

.mAbout-icon li.mh_ko_KR {min-height:0;}
.mAbout-icon li.mh_en_US {min-height:0;}
.mAbout-icon li.mh_zh_CN {min-height:120px;}
.mAbout-icon li.mh_ja_JP {min-height:0;}    
@media(max-width:1102px) {
    .mAbout-icon li.mh_ko_KR {min-height:145px;}
    .mAbout-icon li.mh_en_US {min-height:186px;}
    .mAbout-icon li.mh_zh_CN {}
    .mAbout-icon li.mh_ja_JP {}    
}
@media(max-width:991px) {
    .mAbout-icon li.mh_ko_KR {min-height:120px;}
    .mAbout-icon li.mh_en_US {min-height:142px;}
    .mAbout-icon li.mh_zh_CN {}
    .mAbout-icon li.mh_ja_JP {min-height:165px;}    
}
@media(max-width:768px) {
    .mAbout-icon li.mh_ko_KR {min-height:0;}
    .mAbout-icon li.mh_en_US {min-height:0;}
    .mAbout-icon li.mh_zh_CN {min-height:0;}
    .mAbout-icon li.mh_ja_JP {min-height:0;}    
}


.mAbout-icon ul li span {float:left; width:20%; vertical-align:top; font-size:13px; font-weight:normal; color:#777777; line-height:22px; }
.mAbout-icon ul li span:last-child {width:65%; padding:0; }
.mAbout-icon ul li span strong {display:block; margin-bottom:10px; font-size:16px; font-weight:bold; color:#000; } 
 
@media(max-width:768px) {
	.mAbout {padding:60px 30px 60px 30px; margin:0; box-sizing:border-box;}
	.mAbout h2:after {margin:40px 0; }
	.mAbout h1 {font-size:27px; margin-bottom:30px; }
	.mAbout h2 {font-size:14px; line-height:25px; margin-bottom:30px; }
	
	.mAbout-icon ul li {margin-bottom:30px; height:auto; }
	.mAbout-icon ul li span {width:20%; font-size:13px; line-height:20px; }
	.mAbout-icon ul li span img {width:45px; height:auto;}
	.mAbout-icon ul li span:last-child {width:80%;}
	.mAbout-icon ul li span strong {font-size:17px;} 
}
  
@media(max-width:480px) {
}
/*------------------------------------------
  index - cp배너
------------------------------------------*/
#CPmember {position:relative; width:100%; padding:80px 0; text-align:center; overflow:hidden; }

.cpbg {position:absolute; left:0; top:0; display:block; width:100%; height:100%; background-image:url(../img/main/cpbg.jpg); background-position:center; background-size:cover; opacity:0.08}
.gradientCp {background:#88b04c; /* Old Browsers */
	background:-moz-linear-gradient(left, #88b04c 0%, #3fbf73 100%); /* FF3.6+ */
	background:-webkit-gradient(left top, right top, color-stop(0%, #88b04c), color-stop(100%, #3fbf73)); /* Chrome, Safari4+ */
	background:-webkit-linear-gradient(left, #88b04c 0%, #3fbf73 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(left, #88b04c 0%, #3fbf73 100%); /* Opera 11.10+ */
	background:-ms-linear-gradient(left, #88b04c 0%, #3fbf73 100%); /* IE 10+ */
	background:linear-gradient(to right, #88b04c 0%, #3fbf73 100%); /* W3C */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#88b04c', endColorstr='#3fbf73', GradientType=1 ); /* IE6-9 */
}

#CPmember h1 {color:#fff; font-size:32px; text-align:center; text-transform:uppercase; font-weight:300; margin:0; margin-bottom:40px; }
#CPmember h2 {color:#fff; font-size:15px; line-height:30px; text-align:center; text-transform:uppercase; font-weight:400; margin:0; margin-bottom:40px; }
   
#CPmember .btn {border:1px solid #fff; padding:10px; font-size:25px; line-height:38px; color:#fff; font-weight:300; min-width:320px; letter-spacing:1px; text-transform:uppercase; -webkit-transition:all .3s linear; transition:all .3s linear; }
#CPmember .btn:hover {background:#fff; border:1px solid transparent; color:#3fbf73;}

@media(max-width:768px) {
	#CPmember {padding:60px 30px 60px 30px; margin:0; box-sizing:border-box;}
	#CPmember h1 {font-size:27px; margin-bottom:30px; }
	#CPmember h2 {font-size:14px; line-height:25px; margin-bottom:30px; }  
	#CPmember .btn {font-size:22px; width:100%;min-width:100%;} 
}  
@media(max-width:480px) {
}



 
/* 메인컨텐츠 공통
#main h1 {font-family:'Open Sans', sans-serif; font-size:32px; color:#3f3d48; font-weight:600; text-align:center; line-height:40px; margin-bottom:15px; }
#main h2 {background:url(../img/main/subtitle-line.png) center repeat-x; line-height:27px; text-align:center; margin-bottom:40px; }
#main h2 span {font-family:'notokr-l'; letter-spacing:-1px; background:#fff; padding:0 10px; color:#888; font-size:15px; }
#main h3 {font-family:'notokr-r'; text-align:center; color:#46413b; font-size:20px; line-height:32px; }
#main h3:before {content:""; display:inline-block; clear:both; background:url(../img/main/quotation01.png) left top no-repeat; width:21px; height:24px; margin-right:10px; }
#main h3:after {content:""; display:inline-block; clear:both; background:url(../img/main/quotation02.png) right top no-repeat; width:21px; height:24px; margin-left:10px; }
  */

/* 대표상품 
#mBest {position:relative; width:100%; padding:0; margin:0; display:block; text-align:left; }
#mBest .sct_10 {width:100%}
#mBest .sct_10 .sct_li {position:relative; width:25% !important; height:360px !important; margin:0 !important; padding:0; float:left; overflow:hidden; transition-property:background-color; transition-duration:0.5s; transition-timing-function:ease-out; background-color:white; }
#mBest .sct_10 .sct_img{margin:0; padding:0; overflow:hidden; text-align:center; height:100%; }
#mBest .sct_10 .sct_img img{width:100%; height:auto !important; transition-property:opacity, width; transition-duration:0.5s; transition-timing-function:ease-out; }
#mBest .sct_10 .sct_cost {display:none; }
#mBest .sct_10 .sct_txt, 
#mBest .sct_10 .sct_basic {position:absolute; bottom:50px; left:50px; margin:0; padding:0; transition-property:opacity; transition-duration:0.5s; transition-timing-function:ease-out; opacity:0; }
#mBest .sct_10 .sct_txt {bottom:80px}
#mBest .sct_10 .sct_txt a {color:white; font-weight:800; font-size:18pt; }
#mBest .sct_10 .sct_basic {color:white; font-size:14pt; }
#mBest .sct_10 .sct_li:hover {transition-property:background-color; transition-duration:0.5s; transition-timing-function:ease-out; background:black; }
#mBest .sct_10 .sct_li:hover img {transition-property:opacity, width; transition-duration:0.5s; transition-timing-function:ease-out; opacity:0.5; width:110%; }
#mBest .sct_10 .sct_li:hover .sct_txt, #mBest .sct_10 .sct_li:hover .sct_basic{transition-property:opacity; transition-duration:0.5s; transition-timing-function:ease-out; opacity:1; }


@media(max-width:992px) {
	#mBest .sct_10 .sct_li {width:50% !important; height:320px !important; }
	#mBest .sct_clear, #mBest .sct_last {clear:none; }
}
@media(max-width:768px) {
	#mBest .sct_10 .sct_li {height:220px !important; }
}
@media(max-width:480px) {
	#mBest .sct_10 .sct_li {height:130px !important; }
}
*/



/*------------------------------------------
  코드입력
------------------------------------------
#exhib {position:relative; width:100%; padding:80px 0; text-align:center; overflow:hidden; }

#exhib h1 {color:#474d4b; font-size:32px; text-transform:uppercase; font-weight:300; margin:0; margin-bottom:40px; }
#exhib h2 {color:#808080; font-size:16px; line-height:30px; text-transform:uppercase; font-weight:400; margin:0; margin-bottom:40px; }

#exhib h2:after {content:""; position:relative; display:block; background:url(../img/main/line.png) center no-repeat; height:10px; width:100%; margin:60px 0; }
*/
