﻿@charset "utf-8"; 
/*
  Project _ CSS Init
  FileName _ main.css - (메인레이아웃)
  Author _ 쮸양(태태태어멈)~★
  Date _ 2021. 12. 16
  Last _ 2021. 12. 16
*/

.innerLine {position:relative; overflow:hidden; border-top:1px solid #dadada; border-bottom:1px solid #dadada;}
.container {position:relative; width:1200px; margin:40px auto; overflow:hidden;}

/******************************************************************************************************************************************
	visual CSS (메인비주얼 스타일 설정) - 2021.12.16 쮸양~★
*******************************************************************************************************************************************/
#visual {position:relative; width:100%; height:460px; overflow:hidden; background:url('../img/main/mainV.jpg') no-repeat center center; background-size:cover; background-size:cover; z-index:-1;}
#visual p {text-align:left;}
#visual p.ti01 {padding-top:88px; font-size:60px; letter-spacing:-0.1em; color:#fff; text-shadow:3px 3px 2px #000000; word-break:keep-all; font-weight:500;}
#visual p.ti02 {color:#fff; font-size:60px; text-shadow: 3px 3px 2px #000000; font-weight:500; word-break:keep-all}
#visual p.ti03 {margin-top:30px; font-size:20px; color:#fff; word-break:keep-all}
#visual p.ti04 {font-size:20px; color:#fff; word-break:keep-all}


/******************************************************************************************************************************************
	content CSS (메인컨텐츠 스타일 설정) - 2021.12.16 쮸양~★
*******************************************************************************************************************************************/
#content {position:relative; width:100%; overflow:hidden; padding:0px 0px;}

/****************** picList (사진) ******************/
.conBox01 {position:relative; width:100%; padding:40px 0px; background:#f3f8fe;}

.picList {position:relative; width:1200px; height:320px; margin:0px auto; overflow:hidden; z-index:10;}
.picList ul {position:relative; width:600px; margin:0px auto;}
.picList ul li {float:left; text-align:center; width:calc((100% - 0px) / 3);}
.picList ul li a.tab_btn {position:relative; padding-bottom:10px; margin:0px 20px; display:block; cursor:pointer; font-size:20px; color:#7b8999;}
.picList ul li a.tab_btn:hover {text-decoration:none}

.picList ul li.on a.tab_btn {position:relative; margin:0px 20px; display:block; cursor:pointer; font-size:20px; color:#0c4a96; border-bottom:2px solid #0c4a96;}
.picList ul li.on a.tab_btn:hover {text-decoration:none}

.picList .list {display:none; position:absolute; top:0px; left:-50%; width:1200px; overflow:hidden; z-index:-1;}
.picList .list ul {padding:50px 0px; width:100%; min-height:340px;}
.picList .list ul li {float:left; text-align:left; width:25%; position:relative; font-size:18px; background:#fff; border:1px solid #c9c9c9; border-left:none; padding:10px 10px; margin-bottom:100px;}
.picList .list ul li:first-child {border-left:1px solid #c9c9c9;}
.picList .list ul li:last-child {}
.picList .list ul li a {display:block}

.picList .list ul li .tit {display:block; overflow:hidden; color:#333; font-size:18px; line-height:35px; letter-spacing:-0.08em;}
.picList .list ul li .date {display:block; overflow:hidden; color:#bfbfbf; font-size:13px; line-height:22px; letter-spacing:-0.08em; margin-bottom:30px;}
.picList .list ul li .pic {width:238px; height:205px;}
.picList .list ul li .pic img {width:100%;}

.picList li.tap01 .more {position:absolute; right:0px; top:-5px; z-index:2; text-indent:-9999px; display:block;}
.picList li.tap02 .more {position:absolute; right:0px; top:-5px; z-index:2; text-indent:-9999px; display:block;}
.picList li.tap03 .more {position:absolute; right:0px; top:-5px; z-index:2; text-indent:-9999px; display:block;}

.picList .more span {display:block; background:url('../img/common/i_plus_w.png') no-repeat 50%; transition:all 0.4s ease; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -ms-transition:all 0.4s ease; -o-transition:all 0.4s ease; width:43px; height:37px;}
.picList .on .more span {display:block; background:url('../img/common/i_plus.png') no-repeat 50%; transition:all 0.4s ease; -webkit-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -ms-transition:all 0.4s ease; -o-transition:all 0.4s ease; width:43px; height:37px;}
.picList .more:hover span {transform:rotate(360deg); -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg)}

/* 이전/다음 버튼 */
.conBox01 .bn_btn {position:relative; width:1200px; margin:0px auto;}
.conBox01 .bn_btn li a {width:12px; height:21px; display:block; z-index:2;}
.conBox01 .bn_btn li.bt_prev a {position:absolute; top:220px; left:-30px; background:url('../img/common/ic_prev.png') no-repeat 0px 0px; text-indent:-9999px;}
.conBox01 .bn_btn li.bt_next a {position:absolute; top:220px; right:-30px; background:url('../img/common/ic_next.png') no-repeat 0px 0px; text-indent:-9999px;}


/********** 견적/만족센터 **********/
.mainBanner {position:relative; width:1200px; margin:40px auto; box-sizing:border-box; overflow:hidden;}
.mainBanner li {float:left; width:50%; padding-left:265px; padding-top:40px; min-height:240px; box-sizing:border-box;}

.mainBanner li p.main_ti {font-size:35px; color:#313131; font-weight:400; line-height:120%; margin-bottom:20px;}
.mainBanner li p.main_ti span {font-weight:500;}

.mainBanner li p {font-size:17px; color:#313131; font-weight:400; line-height:120%;}
.mainBanner li p.txt {opacity:0.5;}  

.mainBanner li.orderBox {border:1px solid #f1f1f1; background:#f9fafb url('../img/main/pic01.jpg') no-repeat left center;}
.mainBanner li.callBox {border:1px solid #f1f1f1; border-left:none; background:url('../img/main/pic02.jpg') no-repeat left center;}

.mainBanner p.btn {position:relative; width:130px; height:30px; line-height:160%; background:rgba(0, 0, 0, 0.5); border-radius:100px; color:#fff; padding:3px 20px; font-size:13px; margin-top:20px;}
<!-- 아이콘 -->
.mainBanner p.btn i {width:14px; height:14px; display:block;}
.mainBanner p.btn i.ic_more {position:absolute; right:15px; top:7px; width:14px; height:14px; display:block; background:url('../img/main/i_next.png') no-repeat 0px 0px;}