@import url("common.css");
/*
	메인페이지에 적용되는 css 입니다.
*/

h3, h4 {color:#fff}
h3 {font-size:20px;line-height:20px;font-weight:600}
h4 {font-size:15px;line-height:15px;font-weight:300}
section {padding-bottom:100px}
section .wrap {position:relative}
section h2 {font-size:35px;color:#1d1d1d;font-weight:normal;margin-bottom:50px}
section .more {position:absolute;top:5px;right:0;display:inline-block;font-size:12px;line-height:12px;color:#195dae;padding:5px 12px 5px 14px;border:1px solid #195dae;border-radius:50px;transition:0.3s}
section .more:hover {background:#195dae;color:#fff}
section .date {font-family:"RixGoM";font-size:15px;font-weight:bold;color:#1d1d1d;display:inline-block;position:absolute;right:0;bottom:0}

@media screen and (max-width:1200px){
	h3 {font-size:18px;line-height:18px}
	section {padding-bottom:55px}
	section h2 {font-size:28px;margin-bottom:40px}
	section .more {top:0}
}
@media screen and (max-width:550px){
	h4 {font-size:13px}
	section .more {top:33px;font-size:10px;line-height:10px;padding:3px 10px 3px 11px}
	section .date {font-size:13px}
}


.2024sp {background-color:#B80003; padding: 5px; width: 353px; text-align: center; margin: 0 auto; display: block; position: absolute; z-index: 99999; top:37%; left:40.5%;}

.2024sp a {color: #fff;}


/* 비주얼 */
.visual {padding-bottom:0;height:680px;border-bottom:1px solid #f4edde;position:relative;z-index:10}
.visual .typo {position:absolute;left:32%;bottom:50%;z-index:20;margin-bottom:-420px}
.visual .typo img {}
.visual .typo p {font-size:15px;margin-top:17%}
.visual .typo h2 {font-size:25px;font-weight:bold;color:#000;margin-top:3px}
.visual .bg {height:100%}
.visual .bg ul {position:relative;height:100%}
.visual .bg ul li {position:absolute;left:0;top:0;width:100%;z-index:11;height:100%;display:none}
.visual .bg ul li.active {display:block;z-index:12}
.visual .bg ul li:first-child {background:url(../images/main/visual_bg1.jpg) center center no-repeat;background-size:cover}
.visual .bg ul li:nth-child(2) {background:url(../images/main/visual_bg2.jpg) center center no-repeat;background-size:cover}
.visual .ctrl {position:absolute;left:0;top:50%;z-index:20;width:100%;margin-top:-75px}
.visual .ctrl a {background:url(../images/main/ic_visual_ctrl.png) left top no-repeat;display:inline-block;width:44px;height:74px;font-size:0;position:absolute;opacity:0.6;transition:0.3s}
.visual .ctrl .prev{left:50%;margin-left:-740px}
.visual .ctrl .next {transform:rotate(180deg);right:50%;margin-right:-740px}
.visual .ctrl a:hover {opacity:1}
.visual .paging {text-align:center;position:absolute;bottom:75px;z-index:40;width:100%}
.visual .paging ul {}
.visual .paging ul li {display:inline-block}
.visual .paging ul li a {font-size:0;background:url(../images/main/ic_visual_paging.png) left top no-repeat;width:14px;height:14px;margin:0 2px}
.visual .paging ul li a.show {background:url(../images/main/ic_visual_paging_on.png) left top no-repeat;width:40px}





@media screen and (max-width:1500px){
	.visual .typo {right:85px}
	.visual .ctrl .prev{left:0;margin-left:0}
	.visual .ctrl .next {right:0;margin-right:0}
}
@media screen and (max-width:1200px){
	.visual {height:470px;margin-top:60px;text-align:center}
	.visual .typo {right:50%;margin:0 -225px -380px 0}
	.visual .typo img {max-width:75%}
	.visual .typo p {margin-top:12%;color:#3d6e95}
	.visual .typo h2 {font-size:22px;margin-top:0}
	.visual .ctrl {margin-top:-36px}
	.visual .ctrl a {width:24px;height:54px;background-size:100%}
	.visual .ctrl .prev{left:0;margin-left:0}
	.visual .ctrl .next {top:-14px;right:0;margin-right:0}
	.visual .paging {bottom:20px}
	.visual .paging ul li {display:inline-block}
	.visual .paging ul li a {width:11px;height:11px;background-size:11px;margin:0}
	.visual .paging ul li a.show {width:33px;background-size:32px}
}
@media screen and (max-width:740px){
	.visual {height:360px;overflow:hidden}
	.visual .typo {margin:0 -225px -320px 0}
	.visual .typo img {max-width:60%}
	.visual .typo p {margin-top:6%;font-size:13px;line-height:18px}
	.visual .typo h2 {font-size:18px}
}
@media screen and (max-width:480px){
	.visual .typo {width:320px;margin:0 -164px -235px 0; left:10%}
	.visual .typo img {max-width:75%}
	.visual .typo p {text-shadow:1px 0 1px rgba(0, 14, 2, 0.3);color:#fffec4}
	.visual .typo p span {display:block}
	.visual .typo h2 {margin-top:10px}
	.visual .ctrl {}

	.visual .bg ul li:first-child {background:url(../images/main/m_visual_bg1.jpg) center center no-repeat;background-size:cover}
	.visual .bg ul li:nth-child(2) {background:url(../images/main/visual_bg2.jpg) center left 20% no-repeat;background-size:cover}
}

/* 퀵 메뉴 */
.quick {position:relative;top:-60px;z-index:30;padding-bottom:50px}
.quick ul {}
.quick ul li {display:inline-block;float:left;height:120px;overflow:hidden;transition:0.3s}
.quick ul li a {padding:32px 0}
.quick ul li a img {margin:0 25px 0 45px;vertical-align:top}
.quick ul li a h2 {color:#fff;font-size:20px;margin-bottom:0;display:inline-block}
.quick ul li a h2 span {display:block;font-size:15px;opacity:0.5;margin-top:5px;font-weight:normal}
.quick ul li:first-child {background:#e10000}
.quick ul li:nth-child(2) {background:#e52327}
.quick ul li:last-child {background:#ef5e65}
.quick ul li:last-child h2 {font-size:28px;font-weight:bold}
.quick ul li:last-child h2 span {margin:0;opacity:0.7}
.quick ul li:first-child:hover {background:#bd0000}
.quick ul li:nth-child(2):hover {background:#bd1c1f}
.quick ul li:last-child:hover {background:#b7494f}

@media screen and (max-width:1200px){
	.quick {padding-bottom:0;position:fixed;top:auto;left:0;bottom:0;z-index:100000;height:50px;width:100%;text-align:center;transition:1s;display:none}
	.quick.bt_fix {display:block}	
	.quick .wrap {margin:0}
	.quick ul li {height:100%}
	.quick ul li a {padding:13px 0}
	.quick ul li a img {display:none}
	.quick ul li a h2 {font-size:18px}
	.quick ul li a h2 span {display:none}
	.quick ul li:last-child h2 {font-size:18px}
	.quick ul li:last-child h2 span {display:inline-block;margin-right:10px}
	.quick ul li:last-child h2 em {display:none}
}
@media screen and (max-width:640px){
	.quick ul li a h2, 
	.quick ul li:last-child h2 {font-size:15px}
	.quick ul li:last-child h2 span {font-size:13px;margin-right:5px}
}
@media screen and (max-width:480px){
	.quick ul li:last-child h2 span {display:none}
}
@media screen and (max-width:360px){
	.quick ul li a h2, 
	.quick ul li:last-child h2 {font-size:13px}
}

/* 서비스(사업) */
.service {}
.service ul {}
.service ul li {display:inline-block;float:left;width:230px;margin-right:90px;text-align:center}
.service ul li:last-child {margin-right:0}
.service ul li img {}
.service ul li h2 {color:#000;font-size:20px;font-weight:bold;line-height:24px;margin-top:40px}
.service ul li p {border-top:1px solid #e8e8e8;margin:25px 0 35px 0;padding-top:30px;word-break:keep-all}
.service ul li a {border:1px solid #e10000;background:#fff;color:#e10000;padding:8px 0;transition:0.3s}
.service ul li a span {display:inline-block;background:url(../images/main/ic_service_more.png) center center no-repeat;width:11px;height:11px;margin-left:20px}
.service ul li a:hover {background:#e10000;color:#fff}
.service ul li a:hover span {background:url(../images/main/ic_service_more_on.png) center center no-repeat;
animation-name:ic_more_rotate;animation-duration:0.6s;animation-iteration-count:infinite;animation-timing-function:linear}

@keyframes ic_more_rotate{
	0% {transform:rotate(0);}
	100% {transform:rotate(180deg);}
}

@media screen and (max-width:1200px){
	.service {text-align:center;padding-top:55px}
	.service ul li {float:none;width:15%;margin-right:4%}
	.service ul li img {max-width:90%}
	.service ul li h2 {font-size:18px;margin:15px 0 0 0}
	.service ul li p {margin:15px 0 25px 0;padding-top:20px;line-height:21px;height:60px;overflow:hidden}
	.service ul li a {padding:6px 0}
	.service ul li a span {margin-left:15px}
}
@media screen and (max-width:900px){
	.service {padding-bottom:0;padding-top:40px}
	.service ul li {width:28%;margin-right:4%;margin-bottom:60px}
	.service ul li:nth-child(3n) {margin-right:0}
	.service ul li img {max-width:50%}
	.service ul li p {height:60px;padding-top:15px}
	.service ul li a {background:#e10000;color:#fff}
	.service ul li a span {background:url(../images/main/ic_service_more_on.png) center center no-repeat}
}
@media screen and (max-width:500px){
	.service ul li {width:100%;height:130px;margin:0 0 10px 0;position:relative;text-align:left}
	.service ul li img, 
	.service ul li h2, 
	.service ul li p {display:inline-block;float:left}
	.service ul li img {max-width:20%;margin-right:20px}
	.service ul li h2 {font-size:15px}
	.service ul li p {height:47px;padding-top:10px;margin:10px 0;width:65%}
	.service ul li a {display:inline-block;font-size:0;padding:0 6px;position:absolute;right:0;top:10px}
	.service ul li a span {margin-left:0;vertical-align:middle}
}
@media screen and (max-width:415px){
	.service ul li img {margin:5% 8px 5% 0}
}
@media screen and (max-width:340px){
	.service ul li {text-align:center}
	.service ul li h2 {margin:33px 0 0 0}
	.service ul li img, 
	.service ul li h2,
	.service ul li p {display:block;float:none}
	
	.service ul li img {position:absolute;left:0;top:0;height:60px;width:60px;margin:0}
	.service ul li p {width:100%}
	.service ul li a {top:25px}
}


/*포토갤러리*/
.photo {background:#f9f9f9;padding-top:100px}
.photo h2 {font-family:'Noto Sans KR', sans-serif;text-align:center}
.photo .contents li {width:48%;display:inline-block;float:left;box-shadow:2px 0 2px rgba(0,0,0,0.2);background:#fff;overflow:hidden;margin-right:20px}
.photo .contents li:nth-child(4n) {margin-right:0}
.photo .contents li a {display:block}
.photo .contents li a .img {width:285px;height:190px;background:#fff;overflow:hidden}
.photo .contents li a .img img {max-width:100%;height:auto}
.photo .contents li a h3, 
.photo .contents li a p {text-overflow:ellipsis;overflow:hidden;transition:0.3s}
.photo .contents li a h3 {color:#333;font-size:18px;line-height:23px;height:45px;word-break:keep-all;margin:20px; text-align:center;}
.photo .contents li a p {color:#666;font-size:13px;line-height:20px;height:58px;text-align:justify;margin:0 20px 20px 20px}
.photo .contents li a .date {display:block;position:relative;padding:0 20px 30px 0;text-align:right;transition:0.3s}
.photo .contents li:hover a p {color:#195dae;text-decoration:underline}
.photo .contents li:hover a h3,
.photo .contents li:hover a .date {color:#083163}


.insta {background:#f9f9f9}
.insta h2 {font-family:'Busan';text-align:center}
.insta .contents li {display:inline-block;float:left;width:285px;height:205px;margin:0 20px 20px 0;vertical-align:top;overflow:hidden;transition:0.3s}
.insta .contents li:hover {opacity:0.8}
.insta .contents li:nth-child(4n) {margin-right:0}
.insta .contents li a {display:block; width:100%;height:100%;background:#fff;overflow:hidden}
.insta .contents li a img {max-width:100%;height:auto}

/*1200 이하*/
@media screen and (max-width:1200px){
	/*포토갤러리*/
	.photo {padding-top:55px}
	.photo .contents {text-align:center}
	.photo .contents li{width:48%; float:none; margin:0 1% 1% 0; text-align:left}
	.photo .contents li:nth-child(2n){margin-right:0}
	.photo .contents li a .img{width:100%; height:190px}
	.photo .contents li a .img img{max-width:none;width:100%}
	.photo .contents li a h3{margin:4%;height:43px}
	.photo .contents li a p{margin:1% 0 3% 0; height:58px; margin:0 4% 4% 4%}
	.photo .contents li a .date{padding:0 4% 4% 0}
	/* 뷰*/
	.insta .contents {text-align:center}
	.insta .contents li {float:none;text-align:center;width:32%;height:auto;margin:0 1% 1% 0}
	.insta .contents li:nth-child(3n) {margin-right:0}
	.insta .contents li:nth-child(4n) {margin-right:1%}
	.insta .contents li:nth-child(7), 
	.insta .contents li:last-child {display:none}
	.insta .contents li a img {max-width:none;width:100%}

}

@media screen and (max-width:640px){
	.photo .contents li {width:100%;display:block;margin:0 0 2% 0}
	.photo .contents li img{width:100%}
	.photo .contents li:last-child {display:block;}
	.photo .contents li a h3 {font-size:16px;line-height:21px;height:41px}
	.insta .contents li {width:48%}
	.insta .contents li:nth-child(2n) {margin-right:0}
	.insta .contents li:nth-child(3n) {margin-right:auto}
	.insta .contents li:nth-child(3) {margin-right:1%}
	.insta .contents li:nth-child(4n) {margin-right:0}
}
/*
@media screen and (max-width:400px){
	#instafeed {height:350px}
	#instafeed a {width:105px;margin-bottom:5px}
}
*/
/*배너*/
.banner {background:#fff;border-top:1px solid #ccc;text-align:center;padding:20px 0;height:540px}
.banner .wrap {position:relative;overflow:hidden;height:100%}
.banner h2{ font-weight:normal; font-size:35px; color:#333; margin:50px 0;}
.banner .contents{}
.banner ul {position:absolute;left:0;top:0}
.banner ul li {display:inline-block;float:left;vertical-align:middle;}
.banner ul li img {max-width:80%}

@media screen and (max-width:1200px){
	.banner {padding:15px 0;height:40px}
}
@media screen and (max-width:640px){
	.banner {padding:3% 0;height:550px}
}


/* 190905 : 팝업 */
#divpop{position:fixed;right:30px;top:30px;z-index:10001;visibility:hidden}
#divpop table{width:500px;height:674px;position:relative}
#divpop table > tr {display:block;}
#divpop table .pop_img{border:1px solid #777;background:#fff;height:671px;display:block}
#divpop table td{color:#bbb;font-weight:200}
#divpop table td img{max-width:100%}
#divpop table .more_class{display:inline-block;position:absolute;bottom:85px;left:50%;margin-left:-61px;width:122px;height:41px}

#divpop .check_bar{background:#222;color:#fff;height:30px}
#divpop .check_bar td{padding-right:7px}
#divpop .check_bar input{font-size:15px}
#divpop .check_bar a{padding-left:5px;color:#ccc;font-size:15px;display:inline-block}
#divpop .check_bar a:hover{color:#fff}

@media screen and (max-width:960px) {
	#divpop{top:10px;left:0;right:0;margin-left:0}
	#divpop table{width:auto;height:auto}
	#divpop table .pop_img{height:auto}
	#divpop table .more_class{bottom:12%;margin-left:-12%;width:24%;height:6%}
	#divpop .check_bar {display:block;margin-top:-8px;height:25px}
	#divpop .check_bar td, #divpop .check_bar a{font-size:0.95em}
}

@media screen and (max-width:440px) {
	#divpop table .more_class{bottom:13%}
}


/* 2번 팝업 */
#divpop2{position:fixed;right:540px;top:30px;z-index:10002;visibility:hidden}
#divpop2 table{width:500px;height:620px;position:relative}
#divpop2 table > tr {display:block;}
#divpop2 table .pop_img{border:1px solid #777;background:#fff;height:614px;display:block}
#divpop2 table td{color:#bbb;font-weight:200}
#divpop2 table td img{max-width:100%}
#divpop2 table .more_class{display:inline-block;position:absolute;bottom:85px;left:50%;margin-left:-61px;width:122px;height:41px}

#divpop2 .check_bar{background:#222;color:#fff;height:30px}
#divpop2 .check_bar td{padding-right:7px}
#divpop2 .check_bar input{font-size:15px}
#divpop2 .check_bar a{padding-left:5px;color:#ccc;font-size:15px;display:inline-block}
#divpop2 .check_bar a:hover{color:#fff}

@media screen and (max-width:960px) {
	#divpop2{top:30px;left:0;right:0;margin-left:0;}
	#divpop2 table{width:auto;height:auto;}
	#divpop2 table .pop_img{height:auto;}
	#divpop2 table .more_class{bottom:12%;margin-left:-12%;width:24%;height:6%;}
	#divpop2 .check_bar {display:block;margin-top:-8px;height:25px}
	#divpop2 .check_bar td, #divpop .check_bar a{font-size:0.95em}
}

@media screen and (max-width:440px) {
	#divpop2 table .more_class{bottom:13%;}
}