@charset "utf-8";
@import url("base.css");
@import url("board.css");
@import url("font.css");
@import url("jquery.modal.min.css");
body{}
body{width:100%; min-width:1280px; height:100%; }

.wrapBase{margin:0 auto; width:1200px; }
.wrapBase:after{content:""; display:block; clear:both;} 

.wrap{}
.wrap:after{content:""; display:block; clear:both;} 

#header .wrap, #footer .wrap{position:relative; margin:0 auto;  width:1200px;}

#header{min-width: 1280px;  width:100%; z-index: 999;}
#header *{}

#header .headerTop{position:relative; width:1200px; height:75px; line-height: 75px; margin:0 auto; text-align: center;}
#header h1 a{display:inline-block; width:170px; height:75px; background: url(../images/h1.png) 50% 50% no-repeat; vertical-align: top;}

#header .smenu{position:absolute; right:0; top:20px; }
#header .smenu > a{float:left; width:auto; height:35px; line-height:35px; margin-left:20px; text-align: center; font-size:13px; color:#777; box-sizing:border-box; }

#header .nav{ border-top:1px solid #eee; text-align: center;}
#header .nav li{display:inline-block; width: 13%;}

#header .nav li > a{display:block;  height:55px; line-height: 55px; padding:0 30px; color:#444; font-size:17px; font-weight: 400; letter-spacing: -0.025em;}
#header .nav li > a:hover{color:#4b7fd5;}




#container{clear: both; margin:0 auto; padding-bottom: 50px; }

#contents{clear: both; margin:0 auto; width:1000px; padding-bottom: 50px;}
#contents:after{content:""; display:block; clear:both;} 


#footer{display:block; width:100%; text-align: left; border-top:1px solid #ccc;}
#footer .link{hegiht:50px; line-height: 50px;}
#footer .link a{color:#999;}
#footer .link a:after{clear:both; display:inline-block; content: ''; height:10px; width:1px; background:#ddd; margin:0 10px; }

#footer .footer{ background: #3a3a3a; font-size:13px;  padding:40px 0;}
#footer .footer:after{clear:both; display: block; content: '';}
.footer ul{float:left; width:60%; min-height:50px; line-height: 1.6em; display:block; border-right:1px solid #666; vertical-align: middle;}
.footer li{ color:rgba(255,255,255,0.8); letter-spacing: -0.025em;}
.footer li:last-child{color:rgba(255,255,255,0.5); }


.footer p{float:right; width:40%; min-height:50px; color:#e9e9e9;  color:rgba(255,255,255,0.8); background: url(../images/footer_ico.png) 80px 50% no-repeat; padding-left:150px; vertical-align: middle;letter-spacing: -0.025em;}
.footer p b, #footer p i{display:block; line-height: 1.2em;}
.footer p b{font-size:30px; font-weight: 400; }
.footer p i{font-size:13px;color:rgba(255,255,255,0.5);}



/* subContents */
.subWrap{ position:relative; min-height:800px; margin:30px auto !important; box-sizing: border-box;}
.mt{margin-top:40px;}


/* visual */
.visual{position:relative; width:100%;}

.visualWrap .visual_txt{position:absolute; top:0; left:50%; margin-left:-400px; width:800px; height:320px; padding-top:65px; text-align: center; z-index: 2; }
.visualWrap .visual_txt em, .visualWrap .visual_txt i{display:block; margin:0 auto; line-height: 1.4em; text-align: center; color:#fff;  }
.visualWrap .visual_txt i{font-size:23px; letter-spacing: -0.05em; font-weight: 200;}
.visualWrap .visual_txt em{margin-top:10px; font-size:34px; letter-spacing: -0.05em; font-weight: 300;}
.visualWrap .visual_txt em b{font-weight:bold;}

a.btn_counsel{position:absolute; top:200px; left:50%; margin-left:-175px !important; display:inline-block; width:350px; height:60px; line-height: 60px; margin:0 auto; margin-top:60px; font-size:22px; font-weight: bold; background: #ff6b00; color:#fff; letter-spacing: -0.05em; border-radius:30px; z-index: 99999; text-align: center;}
a.btn_counsel2{position:absolute; top:100px; left:50%; margin-left:-175px !important; display:inline-block; width:350px; height:60px; line-height: 60px; margin:0 auto; margin-top:60px; font-size:22px; font-weight: bold; background: #ff6b00; color:#fff; letter-spacing: -0.05em; border-radius:30px; z-index: 99999; text-align: center;}

.btn_left, .btn_right{position:absolute; display:block; width:50px; height:50px; line-height: 50px; text-align: center; z-index: 99999; border:2px solid #fff; }
.btn_left{left:none; right:none; margin-left:340px; background: url(../images/arrow_l.png) 50% 50% no-repeat;}
.btn_right{right:400px !important; margin-left:-340px !important; background: url(../images/arrow_r.png) 50% 50% no-repeat;}
@media screen and (min-width:0\0){.btn_right{margin-left:40px !important;}}/*ie9+ 핵*/

.jssorb052 .i .b{fill: #fff !important;}




/* 메인슬라이드 20180729 */
.slideWrap{position:relative; width:100%;  overflow: hidden; height:400px; z-index: 1;}
#slides2{position:absolute; left:50%; max-width:1920px !important; width:1920px !important; margin:0 auto; margin-left:-960px; display:none; height:400px; margin-bottom:0px}

.slidesjs-pagination{position:absolute; left:50%; bottom:30px; width:400px; margin-left:-200px; text-align: center; z-index: 11111; }
.slidesjs-pagination li{display:inline-block; margin:0 5px; }
.slidesjs-pagination li a{display:block;overflow:hidden; width:15px;height:15px; font-size:0; background: #aaa;}
.slidesjs-pagination li a.active,.slidesjs-pagination li a:hover.active{ background: #fff;}
.slidesjs-pagination li a:hover{background-position:0 -26px}


.slidesjs-previous, .slidesjs-next{position:absolute; top:50%; display:block; width:50px; height:50px; line-height: 50px; text-align: center; z-index: 99999; border:2px solid #fff;}
.slidesjs-previous{left:50%; margin-left:-500px; background: url(../images/arrow_l.png) 50% 50% no-repeat;}
.slidesjs-next{right:50%; margin-right:-500px; background: url(../images/arrow_r.png) 50% 50% no-repeat;}

.slidesjs-container{width:100% !important; height:400px !important; z-index: 1;}
.slidesjs-control img{max-width:1920px; min-width:1920px; height:400 !important;  display:none;}



/*------------------------------------------------------------------------------------------------------------------------------------------------*/



/* 본문바로가기 */
.skip a{display:block;position:absolute;left:-9999px;width:200px;background:#c52227;color:#fff;text-align:center}
.skip a:hover,.skip a:focus,.skip a:active{left:50%;z-index:999999;margin-left:-100px}




.cs{padding:20px 0; border-bottom:1px solid #eee;}
/* 고객상담 현황 */
#vertical-ticker{float:left; width:870px; height: 105px; overflow: hidden; margin: 0; padding: 0; border-right:1px solid #eee;}
#vertical-ticker li {display: block;}
.cs .cs_cont{ width: 100%;  padding:5px 0;}
.cs .cs_cont:after{clear:both; display:block; content: '';}
.cs .cs_cont p{float:left; width:50%; height:25px; line-height: 25px; font-size:15px; color:#444; vertical-align: middle;}
.cs .cs_cont em, .cs .cs_cont i{display:inline-block; vertical-align: top;} 
.cs .cs_cont em{position:relative;  width:65%; padding-left:10px; overflow:hidden; white-space:nowrap !important; text-overflow:ellipsis; -o-text-overflow:ellipsis;}
.cs .cs_cont em:before{position:absolute;  top:10px; left:0; clear:both; display: inline-block; content:''; height:3px; width:3px; background: #ddd; margin-right:5px; vertical-align: middle;}
.cs .cs_cont i{width:55px; height:25px; line-height:25px;  margin-left:20px; font-size:13px; color:#fff; background: #a2a6ac; border-radius:13px; text-align: center;}
/*@media screen and (min-width:0\0){.cs .cs_cont i{line-height: 28px;}}*//*ie9+ 핵*/
.cs .cs_cont i.end{ background: #f77d47;}

.cs .contact{float:right; width:320px; padding-left:60px; padding-top:13px; line-height: 1.6em;}
.cs dl{float:right;width:280px;}
.cs dt{float:left; width:90px; font-size:16px; color:#333;}
.cs dd{float:right; width:180px; font-size:15px; color:#777;}
.cs .color{color:#ff6b00;}
.cs .call{font-size:35px; color:#ff6b00; line-height: 1em; margin-top:-7px;}



.banner-section-wrapper {
    margin: 50px auto !important;
    width: 1200px !important;
    height: 300px !important; /* 왼쪽 배너 높이에 맞춤 */
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important; /* 세로 가운데 정렬 */
}

.banner-section-wrapper::before,
.banner-section-wrapper::after {
    content: none !important;
    display: none !important;
}

/* 왼쪽 정사각형 배너 */
.banner-section-wrapper a.banner2-square { 
    flex: 0 0 300px !important;
    width: 300px !important;
    height: 300px !important;
    border: 1px solid #ddd !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

.banner-section-wrapper a.banner2-square img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    transition: opacity 0.3s ease-in-out !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    vertical-align: top !important;
}

/* 호버 효과 동일 유지 */
.banner-section-wrapper a.banner2-square .img-default { opacity: 1 !important; z-index: 1 !important; }
.banner-section-wrapper a.banner2-square .img-hover { opacity: 0 !important; z-index: 2 !important; }
.banner-section-wrapper a.banner2-square:hover .img-default { opacity: 0 !important; }
.banner-section-wrapper a.banner2-square:hover .img-hover { opacity: 1 !important; }

/* 오른쪽 긴 배너 */
.banner-section-wrapper .banner1 {
    flex: 1 1 auto !important;
    height: 200px !important;
    border: 1px solid #ddd !important;
    background: url(../images/m_banner1.png) 0 0 no-repeat !important;
    color: #318595 !important;
    background-size: cover !important;
    box-sizing: border-box !important;
    display: block !important;
    padding: 10px 0 !important; /* 텍스트 간격 조정 */
}

.banner-section-wrapper .banner1 em, 
.banner-section-wrapper .banner1 span, 
.banner-section-wrapper .banner1 i {
    display: block !important;
    text-align: center !important;
    line-height: 1.6em !important;
}

.banner-section-wrapper .banner1 em {
    font-size: 22px !important;
    padding-top: 20px !important;
    font-weight: 300 !important;
}

.banner-section-wrapper .banner1 span {
    font-size: 32px !important;
    font-weight: 500 !important;
}

.banner-section-wrapper .banner1 i {
    font-size: 24px !important;
    font-weight: 500 !important;
    font-style: normal !important;
}





.case{background: #ededed; text-align: center; padding:50px 0;}
.wrapTit{display:block; margin:0 auto; margin-bottom:30px; font-size:20px; color:#333; letter-spacing: 0; }
.wrapTit:before, .wrapTit:after{clear:both; display:inline-block; content: ''; width:65px; height:1px; background: #333; vertical-align: middle; margin:0 15px; }


.case .wrapBase{}
.case .caseCont{margin-left:-10px; margin-right:-10px;}
.case dl, .case p{width:calc(25% - 20px); float:left; margin:0 10px 20px 10px; height:220px;}   
 .case p.wide{width:calc(50% - 20px); margin:0 10px 20px 10px;}   

.case dl{position:relative; padding-top:40px; line-height: 3em; background: url(../images/case.png) 0 0 no-repeat; background-size:cover; color:#fff;}
.case dt{ color:#ffe4c7; font-size:30px;}
.case dd{font-size:17px; color:#fff5ea; font-weight:300;}
.case dd:last-child{position:absolute; right:30px; bottom:25px; color:#c2d8ee; line-height:1.4em;}
.case dd:last-child a{  color:#c2d8ee; line-height:1.4em;}

.case p{}
.case p a{position:relative; display:block; height:220px; width:100%; background: #fff; vertical-align: middle;}
.case p em, .case p span{position:absolute; top:0; left:0; width:100%; height:220px; vertical-align: middle;}
.case p em{ line-height: 220px; padding:0 30px; z-index: 9; background: rgba(0,0,0,0.7); color:#fff !important; opacity: 0; transition:all ease 0.2s;}
.case p em i{ display:inline-block; padding:30px 10px; font-size:20px; line-height: 1.6em; border-top:1px solid rgba(255,255,255,0.3); border-bottom:1px solid rgba(255,255,255,0.3); vertical-align: middle; word-break: keep-all;}

.case p span{z-index: 1; overflow: hidden;}
.case p span img{height:100%;}

.case p a:hover em{ opacity: 1; }



.moving{text-align: center; margin-top:50px;}
.moving .wrapBase{ /*height:280px;*/}
.moving dl{float:left; width:700px; height:100%; background:#f4f4f4 url(../images/m_banner2.png) right 50% no-repeat; padding:40px 0 0 65px; color:#1a7789; text-align: left;}
.moving dt{font-size:45px; margin-bottom:30px;line-height: 1em;}
.moving dt i{font-size:20px;}
.moving dd{font-size:16px; line-height: 1.6em;}

/*
.moving .wrapBase div{float:right; width:500px; height:100%; background: #eee;}
*/





/* 상담 팝업*/
.modal{width:800px;}
.modal a.close-modal {background: url(../images/ico_close.png) 50% 50% no-repeat;}

.modal-header{width:100%; height:70px; line-height: 70px; border-bottom:1px solid #ddd; font-size:24px; font-weight: 300; text-align: center; box-sizing:border-box;}
.counsel_pop{background:#f8f8f8; padding:30px 100px 50px 100px; }
#counsel_pop .btns{width:100%; display:block; color:#fff; font-weight:bold;background: #ff6900; font-size:30px; height:75px; line-height: 75px;}
.pop_info{width:100%; font-size:18px; line-height: 1.6em; margin-bottom:25px; text-align: center;}


/*input  첨부파일*/
.fileBox{height:45px; line-height: 45px;}
.fileBox:after{content:""; display:block; clear:both;} 
.fileBox .fileName {float:left; width:calc(100% - 100px); height:45px; margin-right:0px; border-radius:0 5px 5px 0; line-height:45px;border:1px solid #aaa;background-color:none;vertical-align:middle}
.fileBox .btn_file {float:left; width:100px;height:45px; line-height:45px; border-radius:5px 0px 0 5px; font-size:0.95em; background: #858a92; text-align:center;vertical-align:middle; color:#fff;}
.fileBox input[type="file"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}















/* jssor slider loading skin spin css */
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }


				.visualWrap{position:relative; height:400px; overflow: hidden;}
				.slideWrap2{position:absolute; left:50%; margin-left:-960px; min-width:1920px; overflow: hidden; height:400px; z-index: 1;}
				
				#jssor_1{position:absolute; left:0% !important; margin-left:-360px; width:1920px !important; min-width: 1920px !important; height:400px !important; }
				#jssor_1 img{width:1920px !importnat; min-width: 1920px !important; height:400px !important; resize: none !important;}
				
        .jssorb052 .i {position:absolute;cursor:pointer;}
        .jssorb052 .i .b {fill:#000;fill-opacity:0.3;}
        .jssorb052 .i:hover .b {fill-opacity:.7;}
        .jssorb052 .iav .b {fill-opacity: 1;}
        .jssorb052 .i.idn {opacity:.3;}

        .jssora053 {display:block;position:absolute;cursor:pointer;}
        .jssora053 .a {fill:none;stroke:#fff;stroke-width:640;stroke-miterlimit:10;}
        .jssora053:hover {opacity:.8;}
        .jssora053.jssora053dn {opacity:.5;}
        .jssora053.jssora053ds {opacity:.3;pointer-events:none;}
				
				.visual_txt{position:relative;margin:0 auto; width:450px;height:300px; z-index:99; font-size:16px;color:#fff;line-height:24px;text-align:center;padding:5px;box-sizing:border-box; margin:0 auto;}














.main-top-banner { height:90px; background-color:#ff6b00; }
.main-top-banner-inner { width:1200px; height:90px; margin:0 auto; }



/**************/

.wrapBase .movie_box { float:left; margin-bottom:30px;  }
.wrapBase .movie_box.margin_r { margin-right:30px; }