@charset "UTF-8";
.wrap-sns-box{padding: 100px 0 0 0;}
.sns-header .container::after{content:""; display: table; clear: both;}
.sns-left{float: left; width: calc(100% - 300px);}
.sns-left::after{content:""; display: table; clear: both;}
.sns-left h1{font-family: "Mont Regular;"; font-size: 60px; margin-right: 75px; display: inline-block; vertical-align: top;}
.sns-left h1 span{font-family: "Mont SemiBold";}
.sns-left p{font-size: 24px; margin-top: 40px; display: inline-block; vertical-align: top;}
.sns-right{float: right; margin-top: 25px; width: 300px;}
.sns-right ul::after{content:""; display: table; clear: both;}
.sns-right li{float: left; width: 60px; height: 60px; margin-right: 20px;}
.sns-right li:last-child{margin-right: 0;}
.sns-right li button{width: 100%; height: 100%; display: block; text-indent: -9999px;}
.sns-right li.facebook button{background: url(../images/ico-sns1.png) no-repeat center bottom; background-size: cover;}
.sns-right li.youtube button{background: url(../images/ico-sns2.png) no-repeat center top; background-size: cover;}
.sns-right li.youtube button:hover{background-position: center bottom;}
.sns-right li.insta button{background: url(../images/ico-sns3.png) no-repeat center top; background-size: cover;}
.sns-right li.insta button:hover{background-position: center bottom;}
.sns-right li.blog button{background: url(../images/ico-sns4.png) no-repeat center top; background-size: cover;}
.sns-right li.blog button:hover{background-position: center bottom;}
.wrap-sns{margin-top: 130px; position: relative;}
.wrap-sns::before{content:""; display: block; position: absolute; width: 33.15%; height: 123%; background-color: #c09970; left: 7.3%; top: -22.7%;}
.wrap-sns .slick-list{overflow: inherit;}
.wrap-sns li{margin: 0 25px; position: relative; transition: all .3s;}
.wrap-sns li img{box-shadow: -9px 7px 20px rgba(0,0,0,0.15)}
.wrap-sns li a{position: relative; z-index: 2; display: block; width: 100%; height: 100%;}
.wrap-sns li.slick-active:not(.slick-center){top: -40px;}
.wrap-sns li.slick-current ~ .slick-active{top: 0;}
.wrap-sns li .desc{display: none; font-size: 20px; line-height: 25px; color: white; margin-top: 25px; height: 75px; overflow: hidden;}
.wrap-sns li.slick-active:not(.slick-center) .desc{display: block;}
.wrap-sns li.slick-current ~ .slick-active .desc{display: none;}
.wrap-sns li.slick-current ~ .slick-active::after{display: none;}
.wrap-sns-box .control{display: block; position: absolute; width: 29.5%; top: 55.5%; z-index: 2; margin: 0 20px; left: 9%;}
.wrap-sns-box .control button{width: 37px; height: 52px; text-indent: -9999px; display:block;}
.wrap-sns-box .control .prev{float: left; background: url(../images/sns_prev.png);}
.wrap-sns-box .control .prev:hover{background: url(../images/sns_prev_on.png);}
.wrap-sns-box .control .next{float: right; background: url(../images/sns_next.png);}
.wrap-sns-box .control .next:hover{background: url(../images/sns_next_on.png);}

@media all and (max-width: 1900px){
	.wrap-sns::before{left: 8.3%;}
	.wrap-sns-box .control{left: 8%;}
}

@media all and (max-width: 1350px){
	.sns-left h1{font-size: 45px; margin-right: 20px;}
	.sns-left p{font-size: 20px; margin-top: 28px;}
	.sns-right{margin-top: 10px;}
}

@media all and (max-width: 1024px){
	.wrap-sns-box{padding: 65px 0 0 0;}
	.wrap-sns{margin-top: 85px;}
	.wrap-sns::before{left: 3%; top: -18.7%; width: 42%; height: 119%;}
	.wrap-sns .slick-list{padding: 0 25% 0 7% !important;}
	.wrap-sns li{margin: 0 20px;}
	.wrap-sns li .desc{font-size: 16px; line-height: 20px; height: 60px; margin-top: 20px;}
	.sns-left{width: calc(100% - 252px);}
	.sns-left h1{font-size: 40px; margin-right: 20px; display: block; float: left;}
	.sns-left p{font-size: 20px; margin-top: 25px; display: block;}
	.sns-right{margin-top: 10px; width: 252px;}
	.sns-right li{width: 48px; height: 48px;}
	.wrap-sns-box .control{left: 0; width: 43%; top: 52.5%;}
}

@media all and (max-width: 870px){
	.sns-left h1{float: none;}
	.sns-left p{margin-top: 0;}
}

@media all and (max-width: 768px){
	.wrap-sns-box{padding: 45px 0 0 0;}
	.sns-left{width: auto;}
	.sns-left h1{font-size: 24px;}
	.sns-left p{display: none;}
	.wrap-sns{margin-top: 48px; position: relative;}
	.wrap-sns .slick-list{padding: 0 13% !important;}
	.sns-right{width: auto; margin-top: 0;}
	.sns-right li{width: 38px; height: 38px; margin-right: 13px;}
	.wrap-sns::before{left: 20px; top: -30px; width: calc(100% - 40px); height: calc(100% + 30px); background-color: #c09970; z-index: -1;}
	.wrap-sns li.slick-active .desc{display: block; margin-bottom: 40px;}
	.wrap-sns-box .control{width: calc(100% - 40px); top: 50%;}
}