@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Noto+Sans+KR');

.sction-title {line-height: 1; text-align: center; margin-top: -5px;}
.sction-title > .main {font-size: 3rem; color: #333; padding:20px; 0px 0px 0px font-family:"NotoKR-md"}
.sction-title > .sub {font-size: 1.7rem; color: #666; margin-top: -20px; font-family:"NotoKR-md"}
.sction-title > .sub > span {display: block;}
.sction-title > .sub > span + span {margin-top: 10px;}

.sns-section {background-color: #c7e9ff; padding-bottom: 80px;}
.sns-section .sns-content {color: #666; padding: 0px 0px; margin-top: 10px;}
.sns-section .sns-content > div {float: left; width: 50%; padding: 10px 10px;}
.sns-section .sns-content > div a {
  	position: relative;
	display: block; width: 100%; height: 50px;
    color: #666; background: #fff; border-radius: 100px;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
	overflow: hidden;}
.sns-section .sns-content > div a::before,
.sns-section .sns-content > div a::after{
	content: '';
	position: absolute; bottom: 100%; left: 0;
	height: 100%; width: 100%;
	z-index: 1;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);}
.sns-section .sns-content > div.naver a::before {background: rgba(58, 204, 21, 0.5);}
.sns-section .sns-content > div.facebook a::before {background: rgba(60, 90, 154, 0.5);}
.sns-section .sns-content > div.telegram a::before {background: rgba(99, 179, 244, 0.5);}
.sns-section .sns-content > div.kakao a::before {background: rgba(255, 192, 0, 0.5);}
.sns-section .sns-content > div.naver a::after {background: rgba(58, 204, 21, 1);}
.sns-section .sns-content > div.facebook a::after {background: rgba(60, 90, 154, 1);}
.sns-section .sns-content > div.telegram a::after {background: rgba(99, 179, 244, 1);}
.sns-section .sns-content > div.kakao a::after {background: rgba(255, 192, 0, 1);}
.sns-section .sns-content > div a:hover {color: #fff;}
.sns-section .sns-content > div a:hover::before,
.sns-section .sns-content > div a:hover::after {
	-webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);}
.sns-section .sns-content > div a:hover::before {}
.sns-section .sns-content > div a:hover::after {
	-webkit-transition-delay: 0.175s; transition-delay: 0.175s;}
.sns-section .sns-content > div a span {position: absolute; font-size:14px; font-family:"tahoma"; top: 50%; left: 50%; display: inline-block; line-height: 1; padding-left: 20px; white-space: nowrap; transform: translate(-50%,-50%); z-index: 2;}
.sns-section .sns-content > div a span:before {
	content: '';
	position: absolute; left: 0; top: 50%;
	width: 25px; height: 24px;
	background-repeat: no-repeat; background-position: center;
	transform: translate(-50%,-50%);}
.sns-section .sns-content > div.naver a span:before {background-image: url(http://lrdream.net/img/sns1_off.png);}
.sns-section .sns-content > div.facebook a span:before {background-image: url(http://lrdream.net/img/sns2_off.png);}
.sns-section .sns-content > div.telegram a span:before {background-image: url(http://lrdream.net/img/sns3_off.png);}
.sns-section .sns-content > div.kakao a span:before {background-image: url(http://lrdream.net/img/sns4_off.png);}

.sns-section .sns-content > div.naver a:hover span:before {background-image: url(http://lrdream.net/img/sns1_on.png); transition-delay: 0.175s;}
.sns-section .sns-content > div.facebook a:hover span:before {background-image: url(http://lrdream.net/img/sns2_on.png); transition-delay: 0.175s;}
.sns-section .sns-content > div.telegram a:hover span:before {background-image: url(http://lrdream.net/img/sns3_on.png); transition-delay: 0.175s;}
.sns-section .sns-content > div.kakao a:hover span:before {background-image: url(http://lrdream.net/img/sns4_on.png); transition-delay: 0.175s;}