/*mainStyle.css*/
@font-face {
    font-family: 'GongGothicLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body.dark-mode { background:#333; }
body.dark-mode h1, h2 , h3, p { color:#fff; }
body.dark-mode p,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode a { color:#fff; }
body.dark-mode button {
    background-color:#c71526;
    color:#fff;
}
body.light-mode h1, h2, h3, p, a { color:#333; }
body.light-mode button {
    background-color:#c71526;
    color:#eee
}
button { background:#c71526; }

#darkLight {width:70px; height:90px; font-size:3em;padding-left:0.5%;position:fixed;right:0; bottom:3%;border-radius:100px 0 0 100px;transition:all .3s;z-index:99999;}
#darkLight:hover {width:130px;padding-left:1%;background-color:#111;}

#container{overflow: hidden; font-family: 'GongGothicLight';}
.bannerWrap{width: 100%; position: relative;}
.coreComWrap {width: 100%; position: relative;}
.consertWrap {width: 100%; position: relative;}
.contactWrap {width: 100%; position: relative;}

.bannerWrap .swiper-slide .pc_only{display:block;}
.bannerWrap .swiper-slide .mobile_only{display:none;}
.bannerWrap .sliderkit-text {position:absolute;left:50%;top:50%;margin-left:-291px;margin-top:-150px;z-index:999 }
.bannerWrap .sliderkit-text .square {font-size: 100px; color: #fff;color: #fff;width:100%;}
.bannerWrap .sliderkit-text .square img {margin:0 auto 20px;}
.bannerWrap .sliderkit-text h2{font-size: 48px; letter-spacing: -1px; line-height: 1.2; margin-bottom: 40px;text-align:center;color: #fff;}
.bannerWrap .sliderkit-text p{font-size: 28px; line-height: 1.5;text-align:center;color: #fff;}
.bannerWrap .sliderkit-text p span{display: block;}
/*
.bannerWrap .sliderkit-text .lo {height: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
*/
.bannerWrap .sliderkit-text .square_bracket1{background-image: url(../img/main/square_bracket1.png);left:  50px;background-size: 100% 100%;width: 37px; height: 192px; position: absolute;z-index: 10; top: 10px;}
.bannerWrap .sliderkit-text .square_bracket2{background-image: url(../img/main/square_bracket2.png);right: 50px;background-size: 100% 100%;width: 37px; height: 192px; position: absolute;z-index: 10; top: 10px;}
.bannerWrap .backgroundimg {width:100%;}
.bannerWrap .backgroundimg img {width:100%;height: auto;}

.inner.box{padding: 0 20px 120px;} 
.main_title{padding: 100px 0;}
.main_title h2{font-size: 60px; line-height: 1.0; color: #777; text-align: center;}
.main_title h2::after{content: ""; display: block; width: 1px; height: 35px; background: #223040; margin: 55px auto;}
.main_title h2 span{color: #d40424; font-weight: 600; margin-right: 20px;}
.main_title p{width: 70%; margin: 0 auto; text-align: center; font-size: 20px; line-height: 1.5;}
.detail{width: 100%; margin: 0 auto;}
.detail > ul{width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 auto;}
.detail > ul li{float: left; width: 32%; padding: 13px 0;}
.detail > ul li.second{margin: 0 2%;}
.detail > ul li img{margin: 30px auto 35px;}
.detail > ul li p{color: #666; font-size: 28px; margin-bottom: 26px;}
.detail > ul li p span{display: block;}
.detail > ul li strong{display: block; font-size: 35px; line-height: 1.5; color: #333; margin: 0 auto; text-align: center;} 
.detail > ul li strong span{font-size: 44px; color: #223040; display: inline-block; font-weight: bold; margin-right: 10px;}
.detail > ul li p{text-align: center;}
.coreComWrap{width: 100%; background: url(../img/main/bg_img1.png); background-size: 100% auto; background-position: center;}
.coreComWrap .main_title h2::after{background: #fff;}
.coreComWrap .main_title h2, .coreComWrap .main_title h2 span, .coreComWrap .main_title p{color: #fff;}
.coreComWrap .main_title h2{letter-spacing: -4px; font-weight: 600;}
.coreComWrap .main_title h2 span{letter-spacing: 0;}
.coreComWrap .detail ul li{background: #fff; border-radius: 10px; padding: 44px 0;}
.coreComWrap .detail ul li strong{font-weight: bold; margin-bottom: 26px;}
.coreComWrap .detail ul li p{font-size: 22px; line-height: 1.4; margin-bottom: 0;}

.hot_icon .latest_wr > div.ing_projects{ }
.pic_lt li .hot_icon { float:left; margin:1%; }

.contactWrap{background: url(../img/main/bg_img2.png); background-size: cover; background-position: center;}
.contactWrap .inner{padding-bottom: 170px;}
.contactWrap .main_title{padding-bottom: 70px;}
.contactWrap .main_title h2::after{display: none;}
.contactWrap .main_title h2, .contactWrap .main_title h2 span, .contactWrap .main_title p{color: #fff;}
.contactWrap .main_title p{padding-top: 50px;}
.contactWrap .detail{width: 100%; height: 420px;}
.contactWrap .root_daum_roughmap{height: 100%;}
.contactWrap .root_daum_roughmap .wrap_map{height: 100%;}

@media screen and (max-width: 1199px){

 
	.bannerWrap .sliderkit-text .square_bracket1{left:  40px;background-repeat: no-repeat;background-size: 60% 120%;width: 37px; height: 100px; position: absolute;z-index: 10; top: 10px;}
	.bannerWrap .sliderkit-text .square_bracket2{right: 20px;background-repeat: no-repeat;background-size: 60% 120%;width: 37px; height: 100px; position: absolute;z-index: 10; top: 10px;}
	.bannerWrap .sliderkit-text h2{font-size: 25px;margin-bottom:10px;}
	.bannerWrap .sliderkit-text p{font-size: 16px;}


    .inner{width: 100%; padding: 0 20px 60px;} 
    .main_title{padding: 60px 0;}
    .main_title h2{font-size: 42px;}
    .main_title h2::after{width: 1px; height: 24px; margin: 35px auto;}
    .main_title h2 span{margin-right: 15px;}
    .main_title p{width: 100%; font-size: 16px; padding: 0 30px;} 
    .detail > ul li p{font-size: 20px; margin-bottom: 0;}
    .detail > ul li strong{font-size: 26px;} 
    .detail > ul li strong span{font-size: 30px;}
    .detail > ul li, .detail > ul li img{-webkit-transition-duration: 0.3s;transition-duration: 0.3s; -webokit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition: 0.3s; -0-transition-duration: 0.3s;} 
    .coreComWrap{background-size: auto 100%;}
    .coreComWrap .main_title h2{letter-spacing: -2px;}
    .coreComWrap .detail ul li strong{margin-bottom: 0; font-size: 26px;}
    .coreComWrap .detail ul li p{padding: 0 20px; font-size: 20px;}  
    .contactWrap .inner {padding-bottom: 100px;}
    .contactWrap .main_title {padding-bottom: 50px;}  
}

@media screen and (max-width:1000px){
	.bannerWrap .sliderkit-text {padding-top:20px;}
	.bannerWrap .square_logo {width:110px;}
	.bannerWrap .swiper-pagination{display:none;}
}
@media screen and (max-width:767px){
	.bannerWrap .swiper-slide .pc_only{display:none;}
	.bannerWrap .swiper-slide .mobile_only{display:block;}
	.bannerWrap .swiper-slide {width:100%; height:auto;}
	.bannerWrap .swiper-slide div.backgroundimg{height:auto; }

	.bannerWrap .sliderkit-text .square_bracket1{left:  40px;background-repeat: no-repeat;background-size: 60% 120%;width: 37px; height: 90px; position: absolute;z-index: 10; top: 10px;}
	.bannerWrap .sliderkit-text .square_bracket2{right: 20px;background-repeat: no-repeat;background-size: 60% 120%;width: 37px; height: 90px; position: absolute;z-index: 10; top: 10px;}
	.bannerWrap .square_logo {width:90px;}
	.bannerWrap .sliderkit-text .square {font-size: 30px; color: #fff;color: #fff;width:100%;}
	.bannerWrap .sliderkit-text .square img {margin:0 auto 20px;}
	.bannerWrap .sliderkit-text h2{font-size: 20px;margin-bottom:10px;}
	.bannerWrap .sliderkit-text p{font-size: 14px;}

	.swiper-pagination-bullet {width: 20px !important;}
	.bannerWrap .swiper-button-next, .bannerWrap .swiper-button-prev{display:none !important;}

    .detail > ul{width: 80%; display: inherit;}
    .detail > ul li{width: 100%;}
    .detail > ul li.second{margin: 0;}
    .detail > ul li p{font-size: 20px; margin-bottom: 0;}
    .detail > ul li strong{font-size: 26px;} 
    .detail > ul li strong span{font-size: 30px;}
}

@media screen and (min-width:481px) and (max-width:767px){
    .coreComWrap .detail ul{width: 40%; min-width: 320px;}
    .coreComWrap .detail img{margin: 10px auto 20px;}
    .coreComWrap .detail > ul li.second{margin: 20px 0;}
}
@media screen and (max-width: 480px){
    .bannerWrap > div{width: 100%;}
	.bannerWrap .swiper-pagination{display:none;}
    .bannerWrap .square_bracket1{left: 100px;}
    .bannerWrap .square_bracket2{right: 100px;}
    .bannerWrap > div h2{font-size: 20px;}
    .bannerWrap > div p{font-size: 12px;}

    .main_title{padding: 40px 0;}
    .main_title h2{font-size: 27px;}
    .main_title h2::after{width: 1px; height: 13px; margin: 20px auto;}
    .main_title h2 span{margin-right: 10px;}
    .main_title p{width: 100%; font-size: 12px; padding: 0 20px;} 
    .detail > ul{width: 240px;}
    .detail > ul li{width: 100%; height: 100px; overflow: hidden;}
    .detail > ul li img{width: 56px; margin: 0px auto 30px;} 
    .detail > ul li p{font-size: 16px;}
    .detail > ul li strong{font-size: 23px; line-height: 1.5; margin: 0 auto; text-align: left; line-height: 1.0;} 
    .detail > ul li strong span{font-size: 35px; color: #223040; display: inline-block; font-weight: bold; margin-right: 10px;} 
    .detail > ul li p, .detail > ul li strong{text-align: left; width: 152px; margin-right: 0px;}
    .coreComWrap .detail ul li{padding: 40px 0; height: 240px;}
    .coreComWrap .detail > ul li.second{margin: 15px 0;}
    .coreComWrap .detail ul li strong, .coreComWrap .detail ul li p{width: 100%;}
    .coreComWrap .detail ul li strong{margin-bottom: 15px; text-align: center; font-size:23px;}
    .coreComWrap .detail ul li p{font-size: 14px; margin-bottom: 0; text-align: center;} 
    .contactWrap .inner{padding-bottom: 50px;}
    .contactWrap .main_title{padding-bottom: 30px;}
    .contactWrap .detail{height: 220px; overflow: hidden;}  
}