@charset "UTF-8";
/* 공통*/
#mainContents > article+article {margin-top: 3rem;}
.main_tit {text-align: center; font-weight: 600; font-size: 1.625rem; margin-bottom: 3rem;}
.main_desc {font-size: 1.125rem;}

/* mainvisual */
#mainVisual {width: 100%; height: 620px; max-width:1920px; margin: auto; position: relative;}
#mainVisual ul {height: 100%; overflow: hidden;}
#mainVisual li {height: 620px; -webkit-background-size: cover; background-size: cover;}
#mainVisual .visual_tit{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; color: #fff; font-weight: 600; width:90%;}
#mainVisual .visual_tit .st1 {font-size: 1.5rem; text-shadow: 0 0 10px rgb(0 0 0 / 30%); line-height: 1.4; margin-bottom: 0.5em;}
#mainVisual .visual_tit .st2 {font-size: 2.5rem; text-shadow: 0 0 10px rgb(0 0 0 / 30%); line-height: 1.4;}
#mainVisual .visual_tit .st2 .p_br {display: block;}
#mainVisual .slideArrow {position: absolute; top:50%; left: 50%; transform:translate(-50%, -50%); z-index: 99; }
#mainVisual .slideArrow .slide_prev {position: absolute; left: 0; cursor: pointer;}
#mainVisual .slideArrow .slide_next {position: absolute; right: 0; cursor: pointer;}

/* 서비스소개 */
.mainProduct {background-color: #e8eef5; padding: 80px 0;}
.prdList {box-shadow:0px 0px 15px rgb(0 0 0 / 30%);}
.prdList li {float: left; width: 25%; position: relative; background: #f0f0f0;}
.prdList li img {opacity:0.08;transition:opacity 0.3s linear; width: 100%; height: 250px;}
.prdList li .prd_tit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.5px; width: 100%; text-align: center; padding: 0.375rem 0 0.5rem;}
.prdList li:hover img {opacity:1;transition:opacity 0.3s linear;}
.prdList li:hover .prd_tit {color: #fff; display: inline-block; box-sizing:border-box; width: 80%; text-shadow: 0 0 10px rgba(0,0,0,0.8);}
.prdList li:nth-child(1),
.prdList li:nth-child(3),
.prdList li:nth-child(6),
.prdList li:nth-child(8){background: #205c9b;}
.prdList li:nth-child(1) a,
.prdList li:nth-child(3) a,
.prdList li:nth-child(6) a,
.prdList li:nth-child(8) a{color: #fff;}
.prdList li:nth-child(1) img,
.prdList li:nth-child(3) img,
.prdList li:nth-child(6) img,
.prdList li:nth-child(8) img{opacity:0.3;transition:opacity 0.3s linear;}
.prdList li:nth-child(1):hover img,
.prdList li:nth-child(3):hover img,
.prdList li:nth-child(6):hover img,
.prdList li:nth-child(8):hover img{opacity:1;}

/* 게시판 */
.new {font-size: 12px; display: inline-block; background: var(--keycolor); border-radius: 4px; color: #fff; width: 19px; height: 19px; text-align: center; line-height: 17px; vertical-align: middle; margin-top: -3px;}
.cscenter {position: relative;}
.cscenter .board {float: left; width:50%; height: 450px; background: #fdfdfd; box-sizing: border-box; border: 1px solid #ddd; padding: 3.375rem 3rem;}
.bdtabs {margin-bottom: 2rem;}
.bdtabs li {display: inline-block; }
.bdtabs li + li {margin-left: 2rem; padding-left: 2rem;position: relative; }
.bdtabs li + li:before {content:''; background: #ddd; width: 1px; height: 22px; position: absolute; left: 0; top: 8px;}
.bdtabs li a { font-size: 1.375rem; font-weight: 500; color: #9f9f9f; border-bottom: 3px solid transparent; padding-bottom: 0.25rem;}
.bdtabs li a.on, .bdtabs li:hover a {color: inherit; border-bottom-color: var(--keycolor);}
.board_con > div {display: none; position: relative;}
.board_con > div.active {display: block;}
.board_con .more {position: absolute; right: 0; top: -4.375rem;}
.board_con .more a {width: 30px; height: 30px;  background: #fff; border: 1px solid #ddd;}
.board_con .more a img {display: block; margin: auto; margin-top: 7px;}
.board_con li {padding: 0.75rem 0; border-bottom: 1px solid #ddd;}
.board_con li:after {content:''; clear: both; height: 0; display: block;}
.board_con li a {font-size: 1.125rem; float: left; width: calc(100% - 130px); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.board_con li .date {float: right; width: 85px; text-align: right; font-size: 15px; color: #999;}

.cs {float: left; width: 50%;}
.cs .conTop {height: 225px; background:url('../img/main/main_bg_cs.jpg') center no-repeat; position: relative;}
.cs .conTop .con-wrap {position: absolute; left: 50%; top:50%; transform:translate(-50%, -50%);}
.cs dl {width: 420px; box-sizing: border-box; color: #fff; letter-spacing:-0.5px; display: flex; align-items: center; }
.cs dl + dl {margin-top: 2rem;}
.cs dl dt {width: 45%; font-size: 1.625rem; font-weight: 500; line-height: 1.2;}
.cs dl dd {width: 55%; font-size: 1.5rem; font-weight: 500; line-height: 1; letter-spacing:-1px;}
.cs dl dd p+p {margin-top: 0.5em;}
.cs dl dd .bar {margin: 1px 0.5rem 0; display: inline-block; vertical-align: top; font-size: 20px;}
.cs .btn_more a {color: #fff; font-size: 1.125rem; font-weight: 400; border: 1px solid #fff; padding: 0.375rem 1rem 0.5rem; width: 100%; background: url('../img/main/icon_more2.png') 93% center no-repeat; box-sizing: border-box; margin-top: -0.375rem;}

/*  */
.cs .conBot .sub01 > div {float: left; width: 50%; height: 225px;  overflow: hidden;}
.conBot > div .f_left, .subMenu > div .f_right {width: 50%; box-sizing:border-box; color: #fff;}
.conBot > div .f_left .main_tit {text-align: left; font-size: 1.5rem; margin-bottom: 0.625rem;}
.conBot > div .f_left .main_desc {font-size: 1rem; line-height: 1.4; letter-spacing: -0.5px;}
.conBot > div .f_left .main_desc .p_br {display: block;}
.conBot > div .f_left  {padding: 1.5rem 2rem; position: relative;}
.conBot .f_left {background: #cb2d31; }
.conBot > div .f_left .arrow {position: absolute; right: 1rem; bottom:1rem;}
.arrow a {display: inline-block; text-align: center; padding: 0.5rem; box-sizing: border-box; vertical-align: middle;}

.caseList .case {position: relative; height: 225px; }
.caseList .case:before {position:absolute; bottom: 0; right:0; content:''; width:100%; height:30%; background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5));}
.caseList .case .case_item_tit {position: absolute;  bottom: 5px; right:10px; color: #fff; text-align: right; z-index:1; }

/* partner */
.partner {padding-bottom: 6rem;}
.partner .partnerList {display: flex; justify-content: center;gap:20px;}
.partner .partnerList .item {display: flex; justify-content: center; align-items: center;  border:1px solid #dddddd; width: 350px; height:100px; }
.partner .partnerList .item img{max-width: 90%;}