@charset "utf-8";
/* CSS Document */



/* Header 메뉴 클릭시 css */
#spobee_container .header-container .header .gnb ul.depth-01>li>h2 a.select {color:#2ea7e0;}

/* Header 배너영역 */
#spobee_container .header-banner-container { width:100%; height: 410px; position: relative; background:url("../../../img/sub/spobee/company-bg.png") no-repeat center; display:table; background-size:cover}
#spobee_container .header-banner-container .title {width:1100px; height:330px;padding-top:80px; text-align: center; display: table-cell; vertical-align: middle;}
#spobee_container .header-banner-container .title .text-area {margin:0 auto; color: #fff;}
#spobee_container .header-banner-container .title .text-area p:nth-child(1) {font-size:1.4rem; letter-spacing: 0.86em; color: #b6b6b6; font-weight: lighter; text-shadow:2px 2px 5px rgba(0, 0, 0, 0.43);padding-left:9px;}
#spobee_container .header-banner-container .title .text-area p:nth-child(2) {font-size:4rem; letter-spacing: -0.02em; color: #fff;text-shadow:2px 2px 5px rgba(0, 0, 0, 0.43);padding-top:10px;}



/* 영역 공통 */
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area { width: 1100px; margin: 0 auto; padding: 80px 0; }
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area { display: block; text-align: center; height: 90px; width: 550px; margin: 0 auto 40px; position: relative; padding: 10px; }
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area h4 {position:relative; font-size:2.7rem; letter-spacing: -0.015em;color:#222;padding:25px 0; margin:0;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area h4:after {display:block;content:""; position:absolute; top:0; left:50%; margin-left:-15px;width:30px; height:3px; background:#2ea7e0;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area  .title-area p {letter-spacing: -0.015em; font-size: 1.7rem; color: #939393; }
@media all and (max-width: 1100px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area { width: 100%; padding: 80px 20px; }
}
@media all and (max-width: 640px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area { width: 100%; padding: 15px; height: auto; }
}



/* section1 - spobee */
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 > div {float: left;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .left-area {width:465px;margin-right:60px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .left-area img {width:195px; height:95px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .left-area h4 {font-size:2rem; line-height:3.5rem; letter-spacing: -0.05em; color:#555; padding-top:50px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .left-area p {font-size:1.5rem; line-height:2.8rem; letter-spacing: -0.05em; color: #8e8e8e; padding-top:40px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap {width:575px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap > div {float:left;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap .v-spobee {margin-right:10px;width:75px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap .v-spobee img {width:75px;height:330px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap .img-area {width:490px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap .img-area .box {float:left;width:240px; height:160px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap .img-area .box img {width:100%;height:100%;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap .img-area .box:nth-child(1), #spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap .img-area .box:nth-child(2) {margin-bottom:10px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap .img-area .box:nth-child(odd) {margin-right:10px;}
@media all and (max-width: 1100px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .left-area {float:none; margin:0 auto; text-align: center; margin-bottom: 50px;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area {float:none; margin:0 auto; width:575px;}
}
@media all and (max-width: 640px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .left-area img {width:150px; height:auto;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .left-area, #spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area, #spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap, #spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap .img-area, #spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap .img-area .box {width:100%;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap .v-spobee {display: none;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .right-area .right-wrap .img-area .box {width:50%;height:auto;margin:0 !important;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .left-area h4 {padding-top:20px;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .section1 .left-area p {padding-top:15px;}
}



/* section2 - 스포비 원포인트 서비스 */
#spobee_container .main-contents-area-wrap .section2-container {background:#f8f8f8;}
#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list {width:1100px; margin:80px auto 0;}
#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul li {float: left; position:relative; width:245px; height:282px;}
#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul li img {width:100%; height:100%;}
#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul li p {position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); font-size: 2rem; text-align: center;letter-spacing: 0.01em; color: #fff; width:100%;}
#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul .box02 {margin-left:-1px;}
#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul .box03 {margin-left:-1px;}
#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul .box04 {margin-left:-2px;}
#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul .box05 {margin-left:122px;margin-top:-72px;}
#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul .box06 {margin-top:-72px;margin-left:-1px;}
#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul .box07 {margin-top:-72px;margin-left:-2px;}
#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul .box08 {margin-top:-72px;margin-left:-2px;}
@media all and (max-width: 1100px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list {width: 520px;}
	#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul li {width:170px;height:auto;font-size:1.5rem;}
	#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul li p {font-size:1.7rem;}
	#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul .box04 {margin-top:-50px;margin-left:85px;}
	#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul .box05 {margin-top:-50px;margin-left:-2px;}
	#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul .box06, #spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul .box07, #spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul .box08 {margin-top: -51px;}	
}
@media all and (max-width: 480px)
{
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .title-area {margin-bottom:0;}
	#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list {width:300px;}
	#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul li {width:50%;height:auto;margin:0 !important;}
	#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul li:nth-child(even) {margin-left:-2px !important;}
	#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list ul li p {font-size:1.5rem;}
}



/* section3 - 연혁 */
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area {margin-top:80px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history {position:relative; background:url("../../../img/sub/spobee/his_line.jpg") 265px 0 repeat-y;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group {position:relative; padding-left:260px; padding-bottom:50px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group:last-child {padding-bottom:0;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group h3 {position:absolute; font-size:3rem; letter-spacing: -0.05em; color: #1b417b; top:-25px; left:120px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group ul li { background:url("../../../img/sub/spobee/his_dot01.png") 6px no-repeat;
	position:relative; padding-left: 150px; font-size:1.6rem; letter-spacing: -0.035em; color: #555; top:-12px; margin-bottom:40px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group ul li:nth-child(1){background:url("../../../img/sub/spobee/his_dot02.png") 0 5px no-repeat;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group ul li .month {font-size:2rem; color: #1b417b; display: inline-block; margin-top:-5px; margin-right:20px; margin-left:30px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group ul li .line1 {display: inline-block; padding: 0;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group ul li .line2 {padding-left:121px;}
#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group ul li .line2 a {color: #4867da;}
@media all and (max-width: 1100px)
{
	#spobee_container .main-contents-area-wrap .section3-container .contents-area {width:80%;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history {background: url(../../../img/sub/spobee/his_line.jpg) 120px 0 repeat-y;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group { padding-left: 115px;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group h3 {left:0;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group ul li { background:url("../../../img/sub/spobee/his_mo_dot01.png") no-repeat; background-position: 6px 3px; padding-left:40px;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group ul li:nth-child(1){background:url("../../../img/sub/spobee/his_mo_dot02.png") no-repeat;}
}
@media all and (max-width: 740px)
{
	#spobee_container .main-contents-area-wrap .section3-container .contents-area {width:100%;}
#spobee_container .main-contents-area-wrap .contents-area-container .onepoint-list {margin:30px auto;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area {margin-top:50px;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history {background-position:85px 0;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group {padding-left:80px;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group ul li .month {display: block;}
	#spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group ul li .line1, #spobee_container .main-contents-area-wrap .contents-area-container .contents-area .history-area .history .group ul li .line2 {padding-left:30px;}
}