/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:90vh; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual .main-visual-con, 
#mainVisual .slick-list,  
#mainVisual .slick-track, 
.item{
	height:100%;
}

.main-visual-con {position:relative; z-index:2;}

/* 메인 비주얼 ::이미지 */
.item {position:relative;}
.item .pc_img{
	width:100%;
	height:100%;
	background-size:cover !important;
	-ms-transform:scale(1.1,1.1);
    -o-transform:scale(1.1,1.1); 
    -moz-transform:scale(1.1,1.1); 
    -webkit-transform:scale(1.1,1.1); 
     transform:scale(1.1,1.1);
	-webkit-transition:transform 5000ms  ease-in-out ;
	-moz-transition:transform 5000ms ease-in-out ;
	-o-transition:transform 5000ms ease-in-out ;
	-ms-transition:transform 5000ms ease-in-out ;
    transition:transform 5000ms ease-in-out ;	
}
.item .m_img{display:none;}

/* 메인 비주얼 ::텍스트 */
.item .text_box {position:absolute; width:1400px; top:44%; left:calc(50% - 700px); margin-top:-168px; letter-spacing:0.02em; }
.item .text_box h3.title,
.item .text_box p,
.item .text_box .main-visual-more-btn{
	font-family: 'Noto Serif SC', serif;
	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);
	-webkit-transition:opacity 1.0s, transform 1.0s;
	-moz-transition:opacity 1.0s, transform 1.0s;
	-o-transition:opacity 1.0s, transform 1.0s;
	-ms-transition:opacity 1.0s, transform 1.0s;
	transition:opacity 1.0s, transform 1.0s;
}
.item .text_box h3.title {display:block;font-size:95px; font-weight:500; line-height:120%; color:#fff;}
.item .text_box h3.title em {font-style:normal; font-size: 40px; font-weight:300; display: block; margin-left: 5px; line-height:120%;}
.item .text_box p{margin-top:15px; font-weight:300; font-size:25px; color:#fff; line-height:140%; -webkit-transition-delay:0.3s;-moz-transition-delay:0.3s;-o-transition-delay:0.3s;-ms-transition-delay:0.3s;transition-delay:0.3s;}
.item .text_box .main-visual-more-btn {display:inline-block; letter-spacing:0.05em; font-size:16px; font-weight:400; margin-top:45px; color:#fff; text-transform:uppercase; width:180px; line-height:48px; height:50px; border:1px solid rgba(256,256,256,0.3); text-align:center; -webkit-transition-delay:0.5s;-moz-transition-delay:0.5s;-o-transition-delay:0.5s;-ms-transition-delay:0.5s;transition-delay:0.5s;}

/* 메인 비주얼 ::active효과 */
.item.active-item .pc_img{
	-ms-transform:scale(1.0,1.0) rotate(0.0001deg);
    -o-transform:scale(1.0,1.0) rotate(0.0001deg);
    -moz-transform:scale(1.0,1.0) rotate(0.0001deg);
    -webkit-transform:scale(1.0,1.0) rotate(0.0001deg);
     transform:scale(1.0,1.0) rotate(0.0001deg);
}
.item.active-item h3.title,
.item.active-item p,
.item.active-item .main-visual-more-btn{
	opacity:1.0;filter:Alpha(opacity=100);
	-ms-transform:translateX(0px); 
    -o-transform:translateX(0px); 
    -moz-transform:translateX(0px);
    -webkit-transform:translateX(0px); 
     transform:translateX(0px);
}

	@media screen and (max-width:1429px){
		.item .text_box {width:100%; left:auto; padding:0 5%;}
	}

	@media screen and (max-width:1199px){
		.item .text_box h3.title {font-size:85px;}
		.item .text_box h3.title em {font-size:30px;}
		.item .text_box p {font-size:22px;}
	}

	@media screen and (max-width:1024px){
		.item .text_box {top:50%;}
		.item .text_box h3.title {font-size:360%;}
		.item .text_box h3.title em {font-size:45%;}
		.item .text_box p {font-size:130%;}
		.item .text_box .main-visual-more-btn {font-size:100%; width:180px;}
	}

	@media screen and (max-width:999px){
		.item .text_box {top:55%;}
		.item .text_box h3.title {font-size:260%;}
		.item .text_box p {font-size:110%;}
		.item .text_box .main-visual-more-btn {font-size:100%; width:180px;}
	}

	@media screen and (max-width:799px){
		.item .text_box {top:65%;}
		.item .text_box h3.title {font-size:200%;}
		.item .text_box h3.title em {font-size:35%;}
		.item .text_box p {font-size:90%;}
		.item .text_box .main-visual-more-btn {margin-top:30px; font-size:80%; width:150px; line-height:38px; height:40px;}
	}
	@media screen and (max-width:499px){
		.item .text_box h3.title {font-size:180%;}
		.item .text_box h3.title em {margin-bottom:5px;}
		.item .text_box p {font-size:80%;}
	}
	@media screen and (max-width:499px){
		.item .text_box {top:40vh;}
		.item .text_box h3.title {font-size:160%;}
		.item .text_box .main-visual-more-btn {font-size:60%; width:100px; line-height:34px; height:34px;}

	}


#mainVisual .slick-arrow {position: absolute; bottom: 155px; width: 70px; height: 70px; background-color:inherit; background-repeat: no-repeat; background-position: 50% 50%; margin-top: -35px; cursor: pointer; border: 0; cursor: pointer; z-index: 9999; font-size: 0; border: 1px solid rgba(255,255,255,0.3); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#mainVisual .slick-arrow.slick-prev {left:calc(50% - 700px); background-image:url('../img/main/prevBtn.png');}
#mainVisual .slick-arrow.slick-next {left:calc(50% - 631px); background-image:url('../img/main/nextBtn.png'); border-left:0;}

#mainVisual .slick-dots {position:absolute; right:calc(50% - 619px); top:50%; z-index:1099; text-align:right;}
#mainVisual .slick-dots li {display:block; margin:20px 0; width:15px; height:15px;font-size:0; }
#mainVisual .slick-dots li button {width:100%; height:100%; border-radius:50%;  overflow:hidden; border:3px solid #fff; background:none;}
#mainVisual .slick-dots li.slick-active button {background:#fff;}

	@media screen and (max-width:1419px){
		#mainVisual .slick-dots {right:3%;}
	}

	@media screen and (max-width:1024px){
		#mainVisual .slick-dots {top:40%;}
	}

	@media screen and (max-width:999px){
		#mainVisual {height:70vh;}
		#mainVisual .slick-dots {width:100%; top:auto; bottom:5%; right:auto; text-align:center;}
		#mainVisual .slick-dots li {display:inline-block; margin:0 10px;}
	}

	@media screen and (max-width:799px){
		#mainVisual {height:60vh;}
		#mainVisual .slick-dots li {width:10px; height:10px; margin:0 5px;}
		#mainVisual .slick-dots li button {border:2px solid #fff;}
	}


#mainContents {}
#mainContents .mainBannerWrap {}
#mainContents .mainBannerWrap .container {position:relative; display:flex;}
#mainContents .mainBannerBox {position:relative; width:25%; padding:139px 0 206px;}
#mainContents .mainBannerBox:before {position:absolute; top:0; width:2px; height:100%; background:#ebebea; content:'';}
#mainContents .mainBannerBox:nth-child(1):before {left:95px;}
#mainContents .mainBannerBox:nth-child(2):before {left:133px;}
#mainContents .mainBannerBox:nth-child(3):before {left:168px;}
#mainContents .mainBannerBox:nth-child(4):before {left:206px;}
#mainContents .mainBanner {position:relative; width:100%; color:#fff; background-size:cover; max-height:465px; height:53vmin; z-index:9;}
#mainContents .mainBanner a {position:absolute; width:100%; height:100%; top:0; left:0; padding:38px 37px;}
#mainContents .mainBanner .textBox {}
#mainContents .mainBanner .textBox h4 {font-size:30px; font-family:'Noto Serif SC', sans-serif; font-weight:600; letter-spacing:0.06em; margin-bottom:9px;}
#mainContents .mainBanner .textBox p {font-size:12px;}
#mainContents .mainBanner .textBox p .br {display:block;}

#mainContents .mainBanner.banner01 {margin-top:51px; background-image:url('../img/main/mainBannerImg01.jpg');}
#mainContents .mainBanner.banner02 {background-image:url('../img/main/mainBannerImg02.jpg');}
#mainContents .mainBanner.banner02 .textBox {position:absolute; width:85%; bottom:35px;}
#mainContents .mainBanner.banner03 {margin-top:46px; background-image:url('../img/main/mainBannerImg03.jpg');}
#mainContents .mainBanner.banner04 {background-image:url('../img/main/mainBannerImg04.jpg');}

	@media screen and (max-width:1419px) {
		#mainContents .mainBanner a {padding:8% 7%;}
	}

	@media screen and (max-width:1119px) {
		#mainContents .mainBannerBox {padding:109px 0 176px;}
		#mainContents .mainBanner {height:420px;}
		#mainContents .mainBanner a {padding:10% 7%;}
		#mainContents .mainBanner .textBox p {}
		#mainContents .mainBanner .textBox p .br {display:inline;}
	}

	@media screen and (max-width:999px) {
		#mainContents .mainBannerWrap {width:600px; margin:0 auto; padding:79px 0;}
		#mainContents .mainBannerWrap .container {flex-wrap:wrap; padding:0;}
		#mainContents .mainBannerBox {width:50%; padding:0;}
		#mainContents .mainBannerBox:nth-child(1):before,
		#mainContents .mainBannerBox:nth-child(2):before {top:-79px;}
		#mainContents .mainBannerBox:nth-child(3):before,
		#mainContents .mainBannerBox:nth-child(4):before {top:79px;}
		#mainContents .mainBanner.banner03 {margin-top:0;}
		#mainContents .mainBanner.banner04 {margin-top:-51px;}
		#mainContents .mainBanner a {padding:10% 7%;} 
		#mainContents .mainBanner .textBox h4 {font-size:160%;}
		#mainContents .mainBanner .textBox p {font-size:85%;}
		#mainContents .mainBanner.banner02 .textBox {bottom:7%;}
	}

	@media screen and (max-width:649px) {
		#mainContents .mainBannerWrap {width:100%; padding:79px 2%;}
		#mainContents .mainBanner {height:70vmin;}
		#mainContents .mainBannerBox:nth-child(1):before,
		#mainContents .mainBannerBox:nth-child(2):before {left:60%;}
		#mainContents .mainBannerBox:nth-child(3):before {left:40%;}
		#mainContents .mainBannerBox:nth-child(4):before {left:40%;}
		#mainContents .mainBanner .textBox p {font-weight:300;}
	}

	@media screen and (max-width:499px) {
		#mainContents .mainBanner .textBox h4 {font-size:110%; text-shadow:1px 1px 1px rgba(0,0,0,0.2);}
		#mainContents .mainBanner .textBox p {font-size:65%; line-height:120%; text-shadow:1px 1px 1px rgba(0,0,0,0.2);}
		#mainContents .mainBanner .textBox p {font-weight:100;}
	}


#mainContents .sixIndustry {position:relative;}
#mainContents .sixIndustry .imageBox {position:relative; width:60%; top:-56px; left:-15%; z-index:2; text-align:right;}
#mainContents .sixIndustry .imageBox img {max-width:100%;}
#mainContents .sixIndustry .textBox {position:absolute; width:60%; top:0; left:40%; padding-left:10%; background:#f5f5f5; z-index:1;}
#mainContents .sixIndustry .textBox .textInfo {width:100%; padding:11% 0 13%}
#mainContents .sixIndustry .textBox .textInfo h4 {font-size:54px; font-weight:500; font-family:'Noto Sans SC', sans-serif; margin-bottom:28px;}
#mainContents .sixIndustry .textBox .textInfo h4 .six {display:inline-block; width:63px; height:72px; font-size:0; background:url('../img/main/sixIndustryLogo.png') center no-repeat; vertical-align:top; background-size:contain;}
#mainContents .sixIndustry .textBox .textInfo .sTit {font-size:24px; line-height:120%; font-family:'Noto Serif SC', sans-serif; margin-bottom:40px; }
#mainContents .sixIndustry .textBox .textInfo .sTit .br {display:block;}
#mainContents .sixIndustry .textBox .textInfo p {font-size:16px; font-weight:300; }
#mainContents .sixIndustry .textBox .textInfo p .br {display:block;}

#mainContents .sixIndustry .industryBox {padding:86px 0 139px; text-align:center;}
#mainContents .sixIndustry .industryBox .industry {position:relative; display:inline-block; width:320px; padding-top:320px; border-radius:50%; margin:0 36px;}
#mainContents .sixIndustry .industryBox .industry:before {position:absolute; width:88%; height:88%; top:6%; left:6%; background:#fff; border-radius:50%; content:'';}
#mainContents .sixIndustry .industryBox .industry .industryText {position:absolute; width:100%; height:100%; top:0; z-index:9;}
#mainContents .sixIndustry .industryBox .industry .industryText h5 {position:relative; width:80%; top:54px; left:-7px; font-size:30px; font-weight:600; letter-spacing:-0.05em; text-align:center; line-height:80%;}
#mainContents .sixIndustry .industryBox .industry .industryText .sTit {display:block; font-size:18px; font-weight:300; color:#1d1d1d;}
#mainContents .sixIndustry .industryBox .industry .industryText .image {position:absolute; bottom:0; right:0;}

#mainContents .sixIndustry .industryBox .firstIndustry {background:#d5e9d5;}
#mainContents .sixIndustry .industryBox .firstIndustry h5 {color:#2e922f;}
#mainContents .sixIndustry .industryBox .firstIndustry .industryText .image {right:-60px; bottom:-1px;}
#mainContents .sixIndustry .industryBox .secondIndustry {background:#d2e1f4;}
#mainContents .sixIndustry .industryBox .secondIndustry h5 {color:#1c6bc7;}
#mainContents .sixIndustry .industryBox .secondIndustry .industryText .image {right:-34px; bottom:25px;}
#mainContents .sixIndustry .industryBox .thirdIndustry {background:#fce3de;}
#mainContents .sixIndustry .industryBox .thirdIndustry h5 {color:#f66277;}
#mainContents .sixIndustry .industryBox .thirdIndustry .industryText .image {right:5px; bottom:7px;}

	@media screen and (max-width:1419px) {
		#mainContents .sixIndustry .imageBox {left:-10%;}
		#mainContents .sixIndustry .textBox {left:45%;}
		#mainContents .sixIndustry .textBox .textInfo h4 {font-size:44px;}
		#mainContents .sixIndustry .textBox .textInfo h4 .six {width:46px; height:58px;}
		#mainContents .sixIndustry .textBox .textInfo .sTit {font-size:20px;}
		#mainContents .sixIndustry .textBox .textInfo p {font-size:15px;}

		#mainContents .sixIndustry .industryBox .industry .industryText h5 {font-size:30px; line-height:90%;}
		#mainContents .sixIndustry .industryBox .industry .industryText .sTit {font-size:16px;}
	}

	@media screen and (max-width:1199px) {
		#mainContents .sixIndustry .textBox .textInfo h4 {font-size:34px;}
		#mainContents .sixIndustry .textBox .textInfo h4 .six {width:36px; height:48px;}
		#mainContents .sixIndustry .textBox .textInfo .sTit {font-size:18px; line-height:140%; margin-bottom:30px;}
		#mainContents .sixIndustry .textBox .textInfo p {font-size:15px;}

		#mainContents .sixIndustry .industryBox .industry {width:25%; padding-top:25%; margin:0 3%;}
		#mainContents .sixIndustry .industryBox .industry .industryText .image  {width:65%;}
		#mainContents .sixIndustry .industryBox .industry .industryText .image img {max-width:100%;}
		#mainContents .sixIndustry .industryBox .firstIndustry .industryText .image  {width:75%;}
	}

	@media screen and (max-width:999px) {
		#mainContents .sixIndustry {padding:0 5%;}
		#mainContents .sixIndustry .imageBox {width:100%; left:auto; top:0; text-align:left;}
		#mainContents .sixIndustry .textBox {position:relative; width:100%; left:auto; padding-left:0; top:0; z-index:2;}
		#mainContents .sixIndustry .textBox .textInfo {padding:50px 5%;}
		#mainContents .sixIndustry .textBox .textInfo h4 {font-size:220%;}
		#mainContents .sixIndustry .textBox .textInfo .sTit {font-size:130%;}
		#mainContents .sixIndustry .textBox .textInfo .sTit .br {display:inline;}
		#mainContents .sixIndustry .textBox .textInfo p {font-size:110%;}
		#mainContents .sixIndustry .textBox .textInfo p .br {display:inline;}
		#mainContents .sixIndustry .industryBox {width:106%; padding:46px 0 69px; margin:0 -3%;}
		#mainContents .sixIndustry .industryBox .industry {width:30%; padding-top:30%; margin:0 1%;}
		#mainContents .sixIndustry .industryBox .industry .industryText h5 {font-size:190%; left:4%;}
		#mainContents .sixIndustry .industryBox .industry .industryText .sTit {font-size:60%;}
		#mainContents .sixIndustry .industryBox .firstIndustry .industryText .image {width:70%;}
		#mainContents .sixIndustry .industryBox .firstIndustry .industryText .image {bottom:-10%; right:-25%;}
		#mainContents .sixIndustry .industryBox .secondIndustry .industryText .image {bottom:-10%; right:-20%;}
		#mainContents .sixIndustry .industryBox .thirdIndustry .industryText .image {bottom:-10%; right:-10%;}
	}

	@media screen and (max-width:799px) {
		#mainContents .sixIndustry .textBox .textInfo h4 {font-size:200%;}
		#mainContents .sixIndustry .textBox .textInfo h4 .six {width:33px; height:44px;}
		#mainContents .sixIndustry .textBox .textInfo .sTit {font-size:110%;}
		#mainContents .sixIndustry .textBox .textInfo p {font-size:100%;}
		#mainContents .sixIndustry .industryBox .industry .industryText h5 {font-size:180%; top:25%; left:0; width:90%;}
		#mainContents .sixIndustry .industryBox .industry .industryText .image {width:50%; }
		#mainContents .sixIndustry .industryBox .firstIndustry .industryText .image {bottom:0; right:-10%;}
		#mainContents .sixIndustry .industryBox .secondIndustry .industryText .image {bottom:0; right:-10%;}
		#mainContents .sixIndustry .industryBox .thirdIndustry .industryText .image {bottom:0; right:-10%;}
	}

	@media screen and (max-width:599px) {
		#mainContents .sixIndustry .industryBox {padding:36px 0 49px;}
		#mainContents .sixIndustry .industryBox .industry .industryText h5 {font-size:140%; top:20%;}
	}

	@media screen and (max-width:499px) {
		#mainContents .sixIndustry .industryBox .industry {width:60%; padding-top:60%;}
		#mainContents .sixIndustry .industryBox .industry .industryText h5 {font-size:160%;  width:80%;}
		#mainContents .sixIndustry .industryBox .industry .industryText .image {width:60%;}
		#mainContents .sixIndustry .textBox .textInfo {padding:30px 5%;}
		#mainContents .sixIndustry .textBox .textInfo h4 {font-size:140%; margin-bottom:18px;}
		#mainContents .sixIndustry .textBox .textInfo h4 .six {width:24px; height:27px;}
		#mainContents .sixIndustry .textBox .textInfo .sTit {font-size:90%; margin-bottom:15px;}
		#mainContents .sixIndustry .textBox .textInfo p {font-size:80%;}
	}


#mainContents .certification {clear:both; position:relative; background:#f5f5f5;}
#mainContents .certification .titleBox {display:inline-block; width:360px; color:#fff; background:#669933; padding:151px 0;}
#mainContents .certification .titleBox:before {position:absolute; width:30%; height:100%; top:0; left:0; background:#669933; content:''; z-index:1;}
#mainContents .certification .titleBox h4 {position:relative; font-weight:300; font-size:38px; line-height:140%; z-index:2;}
#mainContents .certification .titleBox h4 .br {display:block;}
#mainContents .certification .contentBox {display:inline-block; width:calc(100% - 370px);  vertical-align:top; text-align:center; padding:60px 0;}
#mainContents .certification .contentBox ul.certiUl {padding-left:20px;}
#mainContents .certification .contentBox ul.certiUl li {display:inline-block; vertical-align:top; font-family:'Noto Sans SC', sans-serif; width:18%; margin:0 0.5%;}
#mainContents .certification .contentBox ul.certiUl li h5 {font-size:17px; color:#4f4f4f; margin:25px 0 12px; letter-spacing:-0.03em; font-weight:500;}
#mainContents .certification .contentBox ul.certiUl li h5 span.br {display:block;}
#mainContents .certification .contentBox ul.certiUl li .mark img {max-width:100%;}
#mainContents .certification .contentBox ul.certiUl li .num {font-size:14px; font-weight:300; color:#d53f3f; line-height:100%; letter-spacing:-0.07em;}
	
	@media screen and (max-width:1419px) {
		#mainContents .certification .container {padding:0;}
		#mainContents .certification .titleBox {position:relative;  width:30%; padding-left:5%;}
		#mainContents .certification .contentBox {width:69%;}
		#mainContents .certification .contentBox ul.certiUl {padding-left:0;}
	}

	@media screen and (max-width:1199px) {
		#mainContents .certification .titleBox {width:25%; padding:100px 0 100px 3%;}
		#mainContents .certification .titleBox h4 {font-size:30px;}
		#mainContents .certification .contentBox {width:74%; padding:50px 0 0;}
		#mainContents .certification .contentBox ul.certiUl li {margin:0 0.3%;}
		#mainContents .certification .contentBox ul.certiUl li .mark img {height:13vmin;}
		#mainContents .certification .contentBox ul.certiUl li h5 {margin:15px 0 6px;}
	}

	@media screen and (max-width:1024px) {
		#mainContents .certification .titleBox h4 {font-size:180%;}
		#mainContents .certification .contentBox ul.certiUl li .num {font-size:13.8px;}
	}

	@media screen and (max-width:999px) {
		#mainContents .certification .titleBox {width:100%; padding:60px 0;}
		#mainContents .certification .titleBox h4 {text-align:center;}
		#mainContents .certification .titleBox h4 .br {display:inline;}
		#mainContents .certification .contentBox {width:100%; padding:70px 0;}
		#mainContents .certification .contentBox ul.certiUl li {width:17%; margin:0;}
	}

	@media screen and (max-width:799px) {
		#mainContents .certification .titleBox {padding:40px 2%;}
		#mainContents .certification .titleBox h4 {font-size:140%; }
		#mainContents .certification .contentBox ul.certiUl li {width:18%;}
		#mainContents .certification .contentBox ul.certiUl li h5 {font-size:95%;}
		#mainContents .certification .contentBox ul.certiUl li .num {font-size:70%; line-height:120%;}
	}

	@media screen and (max-width:699px) {
		#mainContents .certification .contentBox ul.certiUl {margin-top:-20px;}
		#mainContents .certification .contentBox ul.certiUl li {width:26%; margin-top:20px;}
		#mainContents .certification .contentBox ul.certiUl li .mark img {height:auto;}
		#mainContents .certification .contentBox ul.certiUl li h5 {font-size:105%;}
		#mainContents .certification .contentBox ul.certiUl li .num {font-size:80%;}
	}

	@media screen and (max-width:599px) {
		#mainContents .certification .contentBox ul.certiUl {margin-top:-20px;}
		#mainContents .certification .contentBox ul.certiUl li {width:32%; margin-top:20px;}
		#mainContents .certification .contentBox ul.certiUl li .mark img {height:14vmin;}
		#mainContents .certification .contentBox ul.certiUl li h5 {font-size:95%;}
	}

	@media screen and (max-width:499px) {
		#mainContents .certification .titleBox h4 {font-size:106%;}
		#mainContents .certification .contentBox ul.certiUl {margin-top:-20px;}
		#mainContents .certification .contentBox ul.certiUl li:nth-child(1) {width:100%;}
		#mainContents .certification .contentBox ul.certiUl li {width:49%; margin-top:20px;}
		#mainContents .certification .contentBox ul.certiUl li .mark img {height:30vmin;}
		#mainContents .certification .contentBox ul.certiUl li h5 {font-size:95%;}
	}


#mainContents .csCenterSns {padding:59px 0;}
#mainContents .csCenterSns .csCenter {display:inline-block; width:295px; text-align:center; font-size:25px; color:#8fc21f; font-family:'NanumSquare',sans-serif; font-weight:600;}
#mainContents .csCenterSns .csCenter .icon {display:block; width:147px; height:147px; margin:0 auto; background-image:url('../img/common/csCenterIcon.png'); background-position:center; background-repeat:no-repeat; margin-bottom:20px;}
#mainContents .csCenterSns .csCenter .icon:before {position:relative; display:block; width:100%; height:100%; border-radius:50%; background:#8fc21f; z-index:-1; content:'';}
#mainContents .csCenterSns ul.snsBox {display:inline-block; width:calc(100% - 300px); overflow:hidden; vertical-align:top; margin-top:38px;}
#mainContents .csCenterSns ul.snsBox li {position:relative; float:left; width:25%; text-align:center;}
#mainContents .csCenterSns ul.snsBox li:before {position:absolute; display:inline-block; width:1px; height:70px; top:-2px; left:0; background:#e0e0e0; content:'';}
#mainContents .csCenterSns ul.snsBox li .icon {display:block; width:69px; height:68px; margin:0 auto; background-image:url('../img/common/snsIcon.png');}
#mainContents .csCenterSns ul.snsBox li h5 {font-size:20px; color:#555; text-transform:capitalize; margin-top:20px; letter-spacing:0.05em;}
#mainContents .csCenterSns ul.snsBox li.instagram .icon {background-position:0 0;}
#mainContents .csCenterSns ul.snsBox li.facebook .icon {background-position:-71px 0;}
#mainContents .csCenterSns ul.snsBox li.blog .icon {background-position:-142px 0;}
#mainContents .csCenterSns ul.snsBox li.mall .icon {background-position:-495px 0;}

	@media screen and (max-width:1419px) {
		#mainContents .csCenterSns ul.snsBox {width:calc(100% - 280px);}
		#mainContents .csCenterSns ul.snsBox li h5 {font-size:18px;}
		#mainContents .csCenterSns .csCenter {width:275px; font-size:23px;}
		#mainContents .csCenterSns .csCenter .icon {width:127px; height:127px;}
		
	}

	@media screen and (max-width:1024px) {
		#mainContents .csCenterSns {padding:49px 0;}
	}

	@media screen and (max-width:999px) {
		#mainContents .csCenterSns .csCenter {width:30%; font-size:140%;}
		#mainContents .csCenterSns ul.snsBox {width:69%;}
		#mainContents .csCenterSns ul.snsBox li h5 {font-size:100%;}
	}

	@media screen and (max-width:799px) {
		#mainContents .csCenterSns .csCenter {font-size:120%;}
		#mainContents .csCenterSns ul.snsBox li .icon {width:46px; height:45px; background-size:187px;}
		#mainContents .csCenterSns ul.snsBox li h5 {font-size:90%;}
		#mainContents .csCenterSns ul.snsBox li.facebook .icon {background-position:-46px 0;}
		#mainContents .csCenterSns ul.snsBox li.blog .icon {background-position:-94px 0;}
		#mainContents .csCenterSns ul.snsBox li.mall .icon {background-position:-141px 0;}
	}

	@media screen and (max-width:649px) {
		#mainContents .csCenterSns {padding:29px 0;}
		#mainContents .csCenterSns .csCenter {width:100%; font-size:180%;}
		#mainContents .csCenterSns .csCenter .icon {display:inline-block; width:65px; height:65px; background-size:35px;vertical-align: middle; margin-right:10px; margin-bottom:0;}
		#mainContents .csCenterSns ul.snsBox {width:100%; margin-top:28px;}
		#mainContents .csCenterSns ul.snsBox li:first-child:before {display:none;}
		#mainContents .csCenterSns ul.snsBox li h5 {font-size:90%;}
	}

	@media screen and (max-width:499px) {
		#mainContents .csCenterSns {padding:39px 0;}
		#mainContents .csCenterSns .csCenter {font-size:160%;}
		#mainContents .csCenterSns ul.snsBox li h5 {font-size:70%; line-height:140%; margin-top:10px;}
	}


.sec-footer {margin-top:0 !important;}