@charset "utf-8";

/* sub_visual */
.sub_visual{height:300px; background:#aaa;  background-size:cover; background-repeat:no-repeat; background-position:center;}
.sub_visual .inner{display:table; height:100%; margin:0 auto;}
.sub_visual .text{display:table-cell; vertical-align:middle; text-align:center;}
.sub_visual .text h2{position: relative; font-size:60px; color:#fff; letter-spacing:-0.04em; font-weight:700; line-height:1; margin:0;}
.sub_visual .text h2:after {position: absolute; left: calc(50% - 20px); top: 100%; display: block; width: 40px; height: 4px; margin-top: 25px; background: #e60012; content: '';}

/* sub 공통 */
.sub_tit {margin-bottom: 50px;}
.sub_tit h3 {color: #222222; font-weight: 700; font-size: 52px; letter-spacing: -0.04em; text-align: center;}
.sub_tit.left h3 {text-align: left;}
.sub_tit.prod_type h3 {position: relative; font-size:60px; color:#111111; letter-spacing:-0.04em; font-weight:700; line-height:1; margin:0;}
.sub_tit.prod_type h3:after {display: block; width: 40px; height: 4px; margin: 25px auto 0; background: #e60012; content: '';}

.prod_list ul {font-size: 0; letter-spacing: -4px;}
.prod_list ul li{display:inline-block; vertical-align:top;}
.prod_list ul li a{display:block;}
.prod_list ul li .img_box {position: relative; border-radius:20px; overflow:hidden; box-shadow: 4px 8px 30px rgb(0 0 0 / 8%);}
.prod_list ul li .img_box:after {position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.3); content: ''; opacity: 0; transition: all 0.3s;}
.prod_list ul li .img_box .img {position:relative; padding:50% 0;}
.prod_list ul li .img_box .img img{position:absolute; righT:0; top:0; bottom:0; left:0; max-width:100%; margin:auto;}
.prod_list ul li .img_box .btn {position: absolute; z-index: 1; right: 0; bottom: 0; border-top-left-radius: 20px; overflow: hidden; opacity: 0; transition: all 0.3s;}
.prod_list ul li .txt_box{padding-top:25px;}
.prod_list ul li .txt_box p{font-size:20px; letter-spacing:-0.04em; color:#444444; font-weight:500; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding-bottom:15px; border-bottom:1px solid #dddddd}
.prod_list ul li .txt_box span{display:block; padding-top:15px; font-size:16px; letter-spacing:-0.04em; color:#666666; font-weight:300; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.prod_list.grid4 ul li {width:calc(25% - 30px);margin-right:40px;}
.prod_list.grid4 ul li:nth-of-type(4n){margin-right:0;}
.prod_list.grid4 ul li:nth-of-type(n+5){margin-top:55px;}

.prod_list ul li:hover .img_box:after {opacity: 1;}
.prod_list ul li:hover .img_box .btn {opacity: 1;}

@media all and (max-width:1000px){
	.prod_list.grid4 ul li{width:calc(50% - 20px); }
	.prod_list.grid4 ul li:nth-of-type(2n){margin-right:0;}
	.prod_list.grid4 ul li:nth-of-type(n+3){margin-top:20px;}
}

.sub_tabbtn {border-radius: 10px; overflow: hidden;}
.sub_tabbtn ul {font-size: 0; letter-spacing: -4px;}
.sub_tabbtn ul li {display: inline-block; vertical-align: top;}
.sub_tabbtn ul li a {display: table; width: 100%; height: 60px; background: #eeeeee;}
.sub_tabbtn ul li + li a {border-left: 1px solid #dddddd; box-sizing: border-box;}
.sub_tabbtn ul li a span {display: table-cell; vertical-align: middle; text-align: center; color: #888888; font-weight: 500; font-size: 20px; letter-spacing: 0; padding: 10px;}
.sub_tabbtn ul li.on a {background: #2c2c76; border-color: transparent;}
.sub_tabbtn ul li.on a span {color: #ffffff;}
.sub_tabbtn.grid5 ul li {width: 20%;}

@media all and (max-width: 767px) {
	.sub_tabbtn ul li a span {font-size: 16px;}
}

.prod_filter ul {font-size: 0; letter-spacing: -4px;}
.prod_filter ul li {display: inline-block; vertical-align: top; margin-right: 10px; margin-bottom: 10px;}
.prod_filter ul li a {display: block; height: 50px; padding: 0 30px; border-radius: 20px; border: 1px solid #dddddd; box-sizing: border-box;}
.prod_filter ul li a i {display: none; vertical-align: middle; margin-right: 9px; width: 24px; height: 24px; background: url('/img/check_icon01.png') no-repeat;}
.prod_filter ul li a span {display: inline-block; vertical-align: middle; color: #888888; font-weight: 400; font-size: 18px; letter-spacing: 0; line-height: 48px;}
.prod_filter ul li.on a {background: #e21836;}
.prod_filter ul li.on a i {display: inline-block;}
.prod_filter ul li.on a span {color: #ffffff;}

@media all and (max-width: 1000px) {
	.prod_filter ul li a {padding: 0 15px;}
}

/* 회사소개 */
.intro_con01 {position: relative; z-index: 1; padding: 90px 0 150px; font-size: 0; letter-spacing: -4px;}
.intro_con01 .left_box {display: inline-block; vertical-align: top; width: 56.666667%; padding-right: 20px; box-sizing: border-box;}
.intro_con01 .right_box {display: inline-block; vertical-align: top; width: 43.333333%; position: relative;}
.intro_con01 ul li {position: relative; font-size:0; letter-spacing:-4px; padding-left: 20px; box-sizing: border-box; color: #666666; font-weight: 300; font-size: 20px; letter-spacing: -0.04em; line-height: 1.7; word-break: keep-all;}
.intro_con01 ul li:before {position: absolute; left: 0; top: 9.5px; display: block; width: 8px; height: 8px; border-radius: 2px; background: #2c2c76; content: '';}
.intro_con01 ul li b {color: #444444; font-weight: 500;}
.intro_con01 .img_box {width: 100%; border-radius: 20px; overflow: hidden;}
.intro_con01 .img_box img {width: 100%;}
.intro_con01 .img_box02 {width: 46.2%; margin-left: -11.5%; margin-top: -37.7%; border-radius: 20px; overflow: hidden; box-shadow: 10px 20px 40px rgb(17 34 61 / 20%);}
.intro_con01 .img_box02 img {width: 100%;}
.intro_con01 .deco_txt {position: absolute; z-index: -1; left: 0; bottom: 126px; color: #f3f3f3; font-weight: 700; font-size: 120px; letter-spacing: -0.025em; line-height: 1;}

@media all and (max-width:1000px){
	.intro_con01 {padding: 80px 0 100px; text-align: center;}
	.intro_con01 .left_box {width: 100%; padding-right: 0; text-align: left;}
	.intro_con01 .right_box {width: 100%; max-width: 520px; margin-top: 50px;}
}
@media all and (max-width:767px){
	.intro_con01 .img_box02 {margin-left: -2.5%;}
}

/* 20220627 추가 */
.intro_con02{padding:90px 0 140px; font-size: 0; letter-spacing: -4px; background:#f6f6f6;}
.intro_con02 .intro_con02_tit{font-size:52px; letter-spacing:-0.04em; color:#222; font-weight:bold; text-align:center; word-break:keep-all;}
.intro_con02 .intro_con02_list{padding-top:55px; }

.intro_con02 .intro_con02_list ul li{width:calc(20% - 16px); margin-right:16px; display:inline-block; vertical-align:top; box-sizing:border-box;}
.intro_con02 .intro_con02_list ul li:nth-of-type(5){margin-right:0px;}
.intro_con02 .intro_con02_list ul li .img_box img{width:100%;}
.intro_con02 .intro_con02_list ul li .intro_con02_txt p{font-size:20px; letter-spacing:-0.04em; color:#222; font-weight:500; text-align:center; word-break:keep-all;}

@media all and (max-width:1000px){
	.intro_con02 .intro_con02_list ul li{width:calc(50% - 10px);}
	.intro_con02 .intro_con02_list ul li:nth-of-type(2n){margin-right:0;}
}
@media all and (max-width:767px){
	.intro_con02 .intro_con02_list ul li{width:100%;}
}

/* 연혁 */
.history_con01 {padding: 90px 0 150px;}
.history_con01 .box{position:relative; padding:50px 0}
.history_con01 .box:before{content:''; position:absolute; left:50%; top:0; width:2px; height:100%; box-sizinG:border-box; border-left:1px solid #2c2c76; transform:translateX(-50%); z-index:1;}
.history_con01 .box dl{width:50%; position:relative; margin-left:auto; z-index:5;  padding-left:130px; padding-top: 30px; box-sizinG:border-box;}
.history_con01 .box dl dt{position:relative;}
.history_con01 .box dl dt:after{content:''; position:absolute; left:-136px; width:12px; height:12px; top:0; border-radius:50%; background:#253a93; transform:translateY(-50%); z-index:1;}
.history_con01 .box dl dt:before{content:''; position:absolute; left:-160px; width:60px; height:60px; top:0; border-radius:50%; background:rgbA(37,58,147,0.1);transform:translateY(-50%); z-index:5;}
.history_con01 .box dl dt .year{font-size:80px; font-weight:bold; letter-spacing:-0.025em; color:#253a93; position:relative;}
.history_con01 .box dl dt .year:before{content:''; position:absolute; left:-130px; width:calc(100% + 130px); height:1px; top:0; transform:translateY(-50%); border-top: 1px dashed #2c2c76;}
.history_con01 .box dl dt .year .color01 {color: #e2281b;}
.history_con01 .box dl dd ul li{position: relative; font-size:0; letter-spacing:-4px; padding-left: 20px; box-sizing: border-box;}
.history_con01 .box dl dd ul li + li{margin-top:10px;}
.history_con01 .box dl dd ul li:before {position: absolute; left: 0; top: 9.5px; display: block; width: 8px; height: 8px; border-radius: 2px; background: #2c2c76; content: '';}
.history_con01 .box dl dd ul li .mon{display:inline-block; vertical-align:top; width:50px; font-size:18px; font-weight:bold; letter-spacing:-0.04em; color:#444444;}
.history_con01 .box dl dd ul li .desc{display:inline-block; vertical-align:top; max-width:calc(100% - 50px); font-size:20px; font-weight:500; letter-spacing:-0.04em; line-height: 1.2; color:#444444; word-break:keep-all;}
.history_con01 .box dl.type02 dt:after{background:#e2281b;}
.history_con01 .box dl.type02 dt:before{background:rgbA(226,40,27,0.1);}

.history_con01 .box dl:nth-of-type(2n){margin-left:0; text-align:right; padding-left:0; padding-right:130px;}
.history_con01 .box dl:nth-of-type(2n) dt:after{left:auto; right:-136px;}
.history_con01 .box dl:nth-of-type(2n) dt:before{left:auto; right:-160px;}
.history_con01 .box dl:nth-of-type(2n) dt .year:before{left:auto; right:-130px;}
.history_con01 .box dl:nth-of-type(2n) dd ul li{padding-left: 0; padding-right: 20px;}
.history_con01 .box dl:nth-of-type(2n) dd ul li:before {left: auto; right: 0;}
.history_con01 .box dl:nth-of-type(2n) dd ul li .mon{text-align:left;}


@media all and (max-width:1000px){
	.history_con01 {padding: 80px 0 100px;}
	.history_con01 .box:before{left:20px; transform:none;}
	.history_con01 .box dl{width:100%; padding-left:60px;}
	.history_con01 .box dl dt:after{left:-45px;}
	.history_con01 .box dl dt:before{left:-70px;}
	.history_con01 .box dl dt .year {font-size: 54px;}
	.history_con01 .box dl dt .year:before{width:calc(100% + 30px); left:-30px;}
	.history_con01 .box dl dd ul li .desc {font-size: 18px;}
	.history_con01 .box dl:nth-of-type(2n){padding-right:0; padding-left:60px; text-align:left;}
	.history_con01 .box dl:nth-of-type(2n) dt:after{left:-45px; right:auto;}
	.history_con01 .box dl:nth-of-type(2n) dt:before{left:-70px; right:auto;}
	.history_con01 .box dl:nth-of-type(2n) dt .year:before{width:calc(100% + 30px); left:-30px; right:auto;}
	.history_con01 .box dl:nth-of-type(2n) dd ul li{padding-left: 20px; padding-right: 0;}
	.history_con01 .box dl:nth-of-type(2n) dd ul li:before {left: 0; right: auto;}
}

/* 오시는길 */
.contact_con01 {padding: 90px 0 150px;}
.contact_con01 .map_txt {position:relative; margin-top:100px;}
.contact_con01 .map_txt .map_box {height: 600px;}
.contact_con01 .map_txt .map_box .root_daum_roughmap {width: 100%; height: 100%;}
.contact_con01 .map_txt .map_box .root_daum_roughmap .wrap_map {height: 100%;}
.contact_con01 .map_txt .txt_box {position: absolute; z-index: 1; left:50%; top:-40px; transform:translatex(-50%); width:100%;}
.contact_con01 .map_txt .txt_box .txt {background: #2c2c76; border-radius: 20px; box-shadow: 10px 20px 40px rgb(0 0 0 / 20%); padding: 23.5px 020px; box-sizing: border-box;}
.contact_con01 .map_txt .txt_box .txt p {color: #ffffff; font-weight: 500; font-size: 22px; letter-spacing: -0.04em; text-align: center; word-break: keep-all;}
.contact_con01 ul {font-size: 0; letter-spacing: -4px; margin-top: 60px; margin-bottom: 50px;}
.contact_con01 ul li {position: relative; z-index: 1; display: inline-block; vertical-align: top; width: calc(33.33333% - 20px); margin-right: 30px; border: 1px solid #e1e1e1; box-sizing: border-box; border-radius: 20px; min-height: 160px; padding: 45px 30px 0 50px; overflow: hidden;}
.contact_con01 ul li:before {position: absolute; left: 0; top: 0; z-index: -1; width: 8px; height: 100%; display: block; background: #2c2c76; content: '';}
.contact_con01 ul li:nth-of-type(3n) {margin-right: 0;}
.contact_con01 ul li p {color: #2c2c76; font-weight: 700; font-size: 32px; letter-spacing: -0.025em; line-height: 1; margin-bottom: 10px;}
.contact_con01 ul li p .color01 {color: #e2281b; font-weight: 700; font-size: 32px; letter-spacing: -0.025em; line-height: 1;}
.contact_con01 ul li span {color: #444444; font-weight: 400; font-size: 17px; letter-spacing: 0; line-height: 1.6;}
.contact_con01 .traffic_box .tit {padding-bottom: 15px; box-sizing: border-box; border-bottom: 1px solid #2c2c76; margin-bottom: 40px;}
.contact_con01 .traffic_box .tit h4 {color: #2c2c76; font-weight: 700; font-size: 40px; letter-spacing: -0.04em; margin: 0;}
.contact_con01 .traffic_box .desc {font-size: 0; letter-spacing: -4px;}
.contact_con01 .traffic_box .desc p {display: inline-block; vertical-align: top; width: 50%; padding-right: 20px; box-sizing: border-box; color: #666666; font-weight: 300; font-size: 18px; letter-spacing: -0.04em; padding-left: 20px; position: relative; word-breaK: keep-all;}
.contact_con01 .traffic_box .desc p:before {position: absolute; left: 0; top: 16.5px; display: block; width: 8px; height: 8px; border-radius: 2px; background: #2c2c76; content: '';}
.contact_con01 .traffic_box .desc p .line_02 {display: inline-block; border-radius: 20px; padding: 8px 20px; box-sizing: border-box; color: #ffffff; font-weight: 500; background: #61af57; margin: 0 7px;}
.contact_con01 .traffic_box .desc p .line_bun {display: inline-block; border-radius: 20px; padding: 8px 20px; box-sizing: border-box; color: #ffffff; font-weight: 500; background: #e2b04f; margin: 0 7px;}
.contact_con01 .traffic_box .desc p b {color: #222222; font-weight: 500;}

@media all and (max-width:1200px){
	.contact_con01 ul li {padding: 35px 30px 0 50px;}
}
@media all and (max-width:1000px){
	.contact_con01 {padding: 80px 0 100px;}
	.contact_con01 .map_txt .map_box {height: 480px;}
	.contact_con01 ul li {padding: 35px 30px 0 40px;}
	.contact_con01 ul li span {font-size: 16px;}
}
@media all and (max-width:767px){
	.contact_con01 .map_txt .map_box {height: 360px;}
	.contact_con01 ul li {width: 100%; margin-right: 0; padding: 46px 30px 0 40px;}
	.contact_con01 ul li:nth-of-type(n+2) {margin-top: 30px;}
	.contact_con01 .traffic_box .desc p {width: 100%; padding-right: 0;}
	.contact_con01 .traffic_box .desc p + p {margin-top: 15px;}
}

/* 게시판 */
.board_con {padding-top: 100px;}

.programCon {margin-bottom: 150px;}

.pager_custom {margin-top: 95px; margin-bottom: 30px;}

.search_custom {margin-top: 30px; padding-top: 40px; border-top: 1px solid #dddddd;}

@media all and (max-width:1000px){
	.board_con {padding-top: 80px;}
	.programCon {margin-bottom: 100px;}
}

/* 제품소개 */
.products_con01 {padding: 90px 0 150px;}
.products_con01 .sub_tit {margin-bottom: 100px;}
.products_con01 .prod_filter {margin: 40px 0 50px;}

@media all and (max-width:1000px){
	.products_con01 {padding: 80px 0 100px;}
}

/* 제품소개 - 상세 */
.products_read_con01 {font-size: 0; letter-spacing: -4px; padding-top: 90px;}
.products_read_con01 .tit {padding-bottom: 15px; box-sizing: border-box; border-bottom: 1px solid #444444; margin-bottom: 60px;}
.products_read_con01 .tit h4 {color: #444444; font-weight: 700; font-size: 32px; letter-spacing: -0.04em; margin: 0;}
.products_read_con01 .left {display: inline-block; vertical-align: top; width: 50%;}
.products_read_con01 .left .top_slider li{position: relative; width: 100%; padding: 12.5% 0; overflow: hidden; border-radius:10px; box-sizing:border-box;box-shadow: 4px 8px 30px rgb(0 0 0 / 8%);}
.products_read_con01 .left .top_slider li img {position: absolute; left: 0; top: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto;}
.products_read_con01 .left .gal_slider{margin-top:30px}
.products_read_con01 .left .gal_slider .slick-slide{box-sizing:border-box; position:relative; margin:0 30px; border:2px solid #fff}
.products_read_con01 .left .gal_slider .slick-current{border-color:#2c2c76}
.products_read_con01 .left .gal_slider img{width:100%;}
.products_read_con01 .txt_box {display: inline-block; vertical-align: top; width: 50%; padding-left: 60px; padding-top: 20px; box-sizing: border-box;}
.products_read_con01 .txt_box dl {border-bottom: 1px solid #dddddd; font-size: 0; letter-spacing: -4px; padding: 15px 0 20px; box-sizing: border-box;}
.products_read_con01 .txt_box dl dt {display: inline-block; vertical-align: top; width: 120px; color: #444444; font-weight: 500; font-size: 18px; letter-spacing: -0.04em;}
.products_read_con01 .txt_box dl dd {display: inline-block; vertical-align: top; width: calc(100% - 120px); color: #666666; font-weight: 300; font-size: 18px; letter-spacing: -0.04em;}
.products_read_con01 .btn_box {text-align:right; padding-top:62px;}
.products_read_con01 .btn_box a {position: relative; font-size:18px; letter-spacing:-0.040em; font-weight:500; color:#ffffff; width:237px; height:70px; background:#2c2c76; box-sizing:border-box; border-radius:20px; padding:22px 60px;} 
.products_read_con01 .btn_box a:after{content: '';position: absolute;right: 15px;bottom: 15px; width: 12px; height: 12px; background: url("/img/btn_icon.png") no-repeat;}
.products_read_con02 {margin-top: 90px; padding-bottom: 150px;}
.products_read_con02 .tit {padding-bottom: 15px; box-sizing: border-box; border-bottom: 1px solid #444444; margin-bottom: 60px;}
.products_read_con02 .tit h4 {color: #444444; font-weight: 700; font-size: 32px; letter-spacing: -0.04em; margin: 0;}
.products_read_con02 .prod_desc img {width: 100%;}

@media all and (max-width: 1000px) {
	.products_read_con01 {padding-top: 80px; text-align: center;}
	.products_read_con01 .tit {text-align: left;}
	.products_read_con01 .left {width: 100%; max-width: 600px;}
	.products_read_con01 .txt_box {width: 100%; max-width: 600px; text-align: left; padding-left: 0; padding-top: 0; margin-top: 50px;}
	.products_read_con02 {padding-bottom: 100px;}
}