@charset "utf-8";
/******20210906 메인 추가*******/
.mainCon1 {position: relative; overflow:hidden;}
.mainCon1 .slder {position: relative; height: 554px;}
.mainCon1 .slder .item {height: 610px;}
.mainCon1 .slder .stxt {position: relative; z-index: 1; max-width:1194px; margin: 0 auto; padding-top: 130px; color: #fff;}
.mainCon1 .slder .stxt .h1 {margin-bottom: 10px; font-weight: 600; font-size: 50px; line-height: 1.2; }
.mainCon1 .slder .stxt .t1 {font-size: 18px;}
.mainCon1 .slder .stxt .btn {display: inline-block; vertical-align: top; margin-top: 60px; border: 1px solid #fff; width: 190px; height: 53px;  padding: 0 20px; line-height: 53px; font-size: 18px; color: #fff; }
.mainCon1 .slder .stxt .btn span {display: block; background: url(/assets/img/ico_arr1.png) right center no-repeat;}
.mainCon1 .slder .simg span {position: absolute; left: 0; top: 0; width: 100%; height: 610px; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.mainCon1 .slder .simg span.view {display: none;}
.mainCon1 .slder .simg span.hide {display: block;}
.iconWrap {position: relative;}
/* .iconWrap .botm {width: 100%;} */
.iconWrap .botm li {display: inline-block; vertical-align: top; width: 12.5%; text-align: center;}
.iconWrap .botm .inr {max-width:1218px; margin: 0 auto; padding: 50px 0 60px; text-align: center;}
.iconWrap .botm .owl-carousel {display: flex; justify-content: space-between;}
.iconWrap .botm .item {width: 100px;}
.iconWrap .botm .item a div {display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 82px; height: 82px; background: #f7f7f7; border-radius: 99px;}
.iconWrap .botm .item span {position: relative; display: block; padding-top: 11px; font-weight: 400; font-size: 16px; line-height: 1.5; color: #333;}
/* .iconWrap .botm .item span:after {content:""; position: absolute; left: 50%; top: 0; margin-left: -46px; width: 92px; height: 92px; background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease;} */
.iconWrap .botm .item:hover span {color: #004990; font-weight: bold;}
.iconWrap .botm .item:hover div {border: 2px solid #004990;}
/* .iconWrap .botm .b1 span:after {background-image: url(/assets/img/ico_main1.png);}
.iconWrap .botm .b2 span:after {background-image: url(/assets/img/ico_main2.png);}
.iconWrap .botm .b3 span:after {background-image: url(/assets/img/ico_main3.png);}
.iconWrap .botm .b4 span:after {background-image: url(/assets/img/ico_main4.png);}
.iconWrap .botm .b5 span:after {background-image: url(/assets/img/ico_main5.png);}
.iconWrap .botm .b6 span:after {background-image: url(/assets/img/ico_main6.png);}
.iconWrap .botm .b7 span:after {background-image: url(/assets/img/ico_main7.png);}
.iconWrap .botm .b8 span:after {background-image: url(/assets/img/ico_main8.png);} */

.etcConWrap {display: flex; margin: 60px auto; max-width: 1218px;}
.etcConWrap .etcCon1Wrap {display: flex; flex: 0 0 30%;}
.etcConWrap .etcCon1 {width: 60%; min-width: 224px; margin-right: 20px;}
.etcConWrap .etcCon1 ul {height: 100%;}
.etcConWrap .etcCon1 ul li {display: flex; flex-direction: column;align-items: flex-start; justify-content: space-around; height: 100%; padding: 22px 32px; border: 1px solid #dfdfdf;}
.etcConWrap .etcCon1 ul li:last-child {border-radius: 0 0 2px 2px;}
.etcConWrap .etcCon1 ul li img {margin-right: 20px;}
.etcConWrap .etcCon1 ul li h5 {margin-bottom: 10px;}
.etcConWrap .etcCon1 ul li a {position: relative; display: inline-block; padding: 8px 11px 8px 13px; min-width: 108px; background: #f7f7f7; border-radius: 99px;}
.etcConWrap .etcCon1 ul li a span {color: #999; font-size: 13px;}
.etcConWrap .etcCon1 ul li a span::after {content: ''; position: absolute; top: 13px; right: 4px; width: 20px; height: 20px; background: url('../img/ic_next.png') no-repeat; background-size: 9px 13px; }

.etcConWrap .etcCon2 {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; align-content: space-between; gap: 0.5rem; width: 40%; min-width: 238px; margin-right: 20px;}
.etcConWrap .etcCon2 div {display: flex; align-items: center; flex-direction: column; justify-content: center; width: 115px; height: 112px; border: 1px solid #dfdfdf; border-radius: 2px;}
.etcConWrap .etcCon2 div a {display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%;}
.etcConWrap .etcCon2 div a:hover img {transform: scale(1.15); transition: ease .3s;}
.etcConWrap .etcCon2 div a img {transition: ease .3s;}
.etcConWrap .etcCon2 div span:first-child {margin-top: -8px; width: 50px; height: 50px; text-align: center; line-height: 50px;}
.etcConWrap .etcCon2 div span {color: #333; font-size: 12px; font-weight: 400;}

.etcConWrap .etcCon3 {display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-width: 0;}
.etcConWrap .etcCon3 > div {position: relative; padding: 18px 17px 18px 14px; height: 112px; border: 1px solid #dfdfdf; border-radius: 2px;}
.etcConWrap .etcCon3 div h2 {display: inline-block; padding: 6px 18px; margin-bottom: 13px; min-width: 95px; background: #f6f6f6; border-radius: 99px; text-align: center; font-size: 13px; font-weight: 500;}
.etcConWrap .etcCon3 .swiper-slide {width: 100px !important;}
.etcConWrap .etcCon3 .control.bg {position: absolute; top: 25px; left: 120px; width: 20px; height: 20px; background: #f7f7f7; border-radius: 99px;}
.etcConWrap .etcCon3 .control button{position:absolute; margin-top:-11px;width:10px;height:21px;text-indent:-999px;overflow:hidden;background-position:center center;background-repeat:no-repeat;background-size:100%}
.etcConWrap .etcCon3 .mprevSlide, .etcConWrap .etcCon3 .nprevSlide{top:77px; left: 17px; background-image:url('../img/ic_before.png')}
.etcConWrap .etcCon3 .mnextSlide, .etcConWrap .etcCon3 .nnextSlide{top: 77px; right:17px; background-image:url('../img/ic_next.png')}
.etcConWrap .etcCon3 .mstopSlide, .etcConWrap .etcCon3 .nstopSlide{top:10.5px; left:0px; margin-top:-6px; width:20px !important; height:20px !important; background-image:url('../img/ic_stop.png'); background-size: 7px 8px !important;}
.etcConWrap .etcCon3 .mstartSlide, .etcConWrap .etcCon3 .nstartSlide{top:10.5px; left:0px; margin-top:-6px; width:20px !important; height:20px !important; background-image:url('../img/ic_play.png'); background-size: 7px 8px !important;}


.mainCon1 .owl-item .stxt {transition:all 1s linear; -webkit-transition:all 1s linear; -moz-transition:all 1s linear; -o-transition:all 1s linear; transition-delay: 1s; opacity:0;}
.mainCon1 .owl-item.active .stxt {opacity:1;}

.mainCon1 .owl-dots {position: absolute; left: 50%; top: 55px; margin-left: -597px; width: 100%; max-width:1194px;}
.mainCon1 .owl-dots .owl-dot {display: inline-block; width: 13px; height: 13px; margin: 0 2px; border: 2px solid #64b9f4; border-radius: 20px; transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease;}
.mainCon1 .owl-dots .owl-dot.active {width: 40px;}



@media (max-width:1260px){
	.mainCon1 .owl-dots {margin-left: 40px; margin-right: 40px; left: 0;}
	.mainCon1 .slder .stxt {margin-left: 40px; margin-right: 40px;}
	.mainCon1 .botm ul {margin-left: 40px; margin-right: 40px;}
}

 /* TABLET Device */
 @media all and (max-width:1000px){
	
	.etcConWrap {margin: 40px 27px;}
	.etcConWrap .etcCon1Wrap {flex-direction: column; width: 50%;}

	.etcConWrap .etcCon1 {width: 100%; margin-right: 0; margin-bottom: 10px;}
	.etcConWrap .etcCon1 ul {display: flex;}
	.etcConWrap .etcCon1 ul li {flex-direction: row; align-items: center; padding: 22px 19px; width: 100%;}
	/* .etcConWrap .etcCon1 ul li:first-child { border-right: 0; border-bottom: 1px solid #dfdfdf;} */
	.etcConWrap .etcCon1 ul li img {margin-right: 13px; width: 46px;}
	.etcConWrap .etcCon1 ul li h5 {font-size: .8rem;}
	.etcConWrap .etcCon1 ul li a {padding: 1px 8px 5px; min-width: 75px;}
	.etcConWrap .etcCon1 ul li a span {color: #888; font-size: 12px;}
	.etcConWrap .etcCon1 ul li a span::after {top: 7.5px; right: 9px; width: 6px; height: 8px; background-size: 6px 8px;}

	.etcConWrap .etcCon2 {flex-wrap: nowrap; padding: 0 15px; width: 100%; border: 1px solid #dfdfdf; border-radius: 2px;}
	.etcConWrap .etcCon2 div {border: 0;}

	.etcConWrap .etcCon3 {padding-left: 20px;}
	.etcConWrap .etcCon3 > div {padding: 12px 9px 12px 9px; height: 105px;}
	.etcConWrap .etcCon3 .control.bg {top: 18px;}

 }

@media (max-width:960px){
	.mainCon1 {margin-bottom: 20px;}
	.mainCon1 .slder,
	.mainCon1 .slder .item {height: 525px;}
	.mainCon1 .owl-dots {margin-left: 5%; margin-right: 5%; top: 35px;}
	.mainCon1 .slder .stxt {margin-left: 5%; margin-right: 5%; padding-top: 70px;}
	.mainCon1 .slder .stxt .h1 {font-size: 35px;}
	.mainCon1 .slder .stxt .t1 {font-size: 13px;}
	.mainCon1 .slder .stxt .btn {font-size: 13px; margin-top: 20px; width: 140px; height: 35px; line-height: 33px;}
	.mainCon1 .slder .stxt .btn span {background: url(/assets/img/ico_arr1.png) right center no-repeat; background-size: auto 10px;}
	.iconWrap .botm .inr {padding: 25px 0 40px;}
	.iconWrap .botm .item {width: 100px;}
	.iconWrap .botm .item a div {width: 60px; height: 60px;}
	.iconWrap .botm .item a div img, .iconWrap .botm .item a div img:hover {transform: scale(.75) !important;}
	.iconWrap .botm .item span {font-size: 13px;}
	/* .iconWrap .botm .item span:after {width: 60px; height: 60px; margin-left: -30px; } */


	.mainCon1 .slder .simg span.hide {display:none;}
	.mainCon1 .slder .simg span.view {display:block;}

}

@media (max-width: 640px){
	
	.iconWrap .botm .owl-carousel {flex-wrap: wrap;}
	.iconWrap .botm .item {margin-bottom: 26px; width: 25%;}

	.etcConWrap {display: block; margin: 35px 20px 45px;}
	.etcConWrap .etcCon1 ul li h5 {font-size: 14px;}
	.etcConWrap .etcCon1 ul li a {padding: 7px 8px 9px;}
	.etcConWrap .etcCon1 ul li a span::after {top: 12px;}

	.etcConWrap .etcCon1Wrap {width: 100%; margin-bottom: 35px;}
	.etcConWrap .etcCon3 {padding: 0; width: 100%;}
	.etcConWrap .etcCon3 > div {margin-bottom: 10px;}
	.etcConWrap .etcCon3 .control.bg {top: 16px;}
}

@media (max-width: 400px){
	
	.mainCon1 .owl-dots {top: 45px;}

	.etcConWrap .etcCon1 ul li {padding: 22px 1.2rem;}
	.etcConWrap .etcCon1 ul li img {margin-right: 11px; width: 36px;}
	.etcConWrap .etcCon1 ul li a span::after {top: 9.3px;}
}