﻿@charset "UTF-8";

.main-container {padding:20px; background:#fff;}

/* Main Visual */
.main-visual {width:100%; height:auto; position:relative; }
.main-visual-slogan {position:absolute; top:30px; left:30px; z-index:20;}
.main-visual-slogan p {color:#fff;}
.main-visual-slogan p:nth-child(-n+2) {font-size:30px; line-height:1.3;}
.main-visual-slogan p:nth-child(2) {font-weight:600;}

/* Main Visual - 슬라이더 */
.swiper {width:100%; height:100%;}
.swiper-slide {
text-align: center;
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-slide img {display:block; width:100%; height:100%; object-fit:cover; }

/* Solution */
.main-solution-box {position:relative; width:100%; height:210px; color:#fff; padding:20px; cursor:pointer;}
@media (min-width:600px) {
  .main-solution-box {height:300px;}
}
.solution-box-tit {color:#fff; font-size:18px; line-height:1.1;}
.solution-box-tit font {font-weight:600;}
.solution-box-more {position:absolute; bottom:0; right:0; width:80px; height:40px; background:#cd1f47; color:#fff; padding-top:10px;}
.solution-box-more font {float:left; font-size:12px;}
.solution-box-more font:nth-child(2) {float:left; font-size:8px; margin:1px 0 0 3px;}
.box-bg-system {background:url(../images/main/bg_system.jpg); background-size:cover;}
.box-bg-consulting {background:url(../images/main/bg_consulting.jpg); background-size:cover;}

/* Project */
.main-project-box {width:100%; height:210px; margin-bottom:10px; position:relative; cursor:pointer;}
@media (min-width:600px) {
  .main-project-box {height:300px;}
}

.main-project-box-tit {color:#fff; width:100%; height:80px; position:absolute; bottom:0; padding:32px 15px 15px 15px; background:linear-gradient( to top, rgba( 0, 0, 0, 0.6 ), rgba( 0, 0, 0, 0.0));}
.main-project-box-tit p {color:#fff; font-size:14px; line-height:1.2;}
.main-project-box-tit p:nth-child(1) {width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-project-box-tit p:nth-child(2) {opacity:0.7;}

/* News */
.main-news {padding:40px 20px; background:#f2f2f2;}
.main-news-box {display:block;}
.main-news-box div:nth-child(1) {background:#fff;}
.main-news-box img {width:100%; height:210px;}
@media (min-width:600px) {
  .main-news-box img {height:400px;}
}
.main-news-box-tit {margin-top:10px; text-align:left;}
.main-news-box-tit p {font-size:14px; line-height:1.2;}
.main-news-box-tit p:nth-child(1) {width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main-news-box-tit p:nth-child(2) {color:#999;}

/* 문의하기 */
.btn-main-ask {width:80px; height:32px; border:1px solid rgba( 255, 255, 255, 0.5 ); background: rgba( 255, 255, 255, 0.0 ); color:#fff; font-size:12px;}
.main-ask {width:100%; height:150px; background:url(../images/main/bg_ask.jpg); background-size:cover; color:#fff; padding-top:20px; cursor:pointer;}
.main-ask p {color:#fff; text-align:center;}

/* 공통 */
.main-tit {font-weight:600; font-size:18px;}
.btn-main-more {cursor:pointer; margin-top:6px;}
.btn-main-more font {float:left;}
.btn-main-more font:nth-child(1) {font-weight:600; font-size:12px;}
.btn-main-more font:nth-child(2) {color:#cd1f47; font-size:8px; margin:1px 0 0 3px;}

/* 동영상 - Tab */
.tabs__head {margin-bottom:10px;}
.tabs__head:before, .tabs__head:after {content: ""; display: table;}
.tabs__head:after {clear: both;}
.tabs__body {width:100%; margin:0 auto;}
.tabs__tab {
    font-family:Noto Sans KR;
    width:100%;
    height:50px;
    font-size: 16px;
    font-weight:500;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background: none;
	cursor: pointer;
}
.tabs__tab_active {cursor: default;}
.tabs__icon, .tabs__head-text {display: inline-block;vertical-align: middle;}
.tabs__pane {display: none;}
.tabs__pane_active {display: block;}
.tabs_style_default .tabs__tab { 
    line-height: 1px;
    color: #333;
    border:3px solid #333;
    margin-right: 3px;
}
.tabs_style_default .tabs__tab_active {
    line-height: 1px;
    color: #fff;
    border:3px solid #cd1f47;
    background: #cd1f47;
}
