* {font-family: 'LotteMartDream'}

.index .subVisual{display:none;}

#header .top {width:1000px; margin:0 auto;}
#header .top h1 { text-align:center; padding-top:15px}
#header .top h1>a>img {width:160px;}

#header .top .top_menu {float:right; padding-top:40px;}
#header .top .top_menu li { float:left; height:14px; line-height:14px; padding:0 10px; background:url(../img/top_line.gif) no-repeat left;}
#header .top .top_menu li.last {padding-right:0;}
#header .top .top_menu li:first-child {background:none;}


#header .menu_wrap {    float: right; width: auto; padding-top:20px;}
#header .menu {width:auto; float:right; height:40px}

#header .menu .gnb li {float:left; width:220px;}
#header .menu .gnb li.last {width:220px;}
#header .menu .gnb li a {font-size:18px; color:#FFFFFF; text-align:center; display:block; height:40px; line-height:38px; letter-spacing:-1px;}
#header .menu .gnb li a.on {background:#007ba6;}


#header .menu .sub {width:1006px; height:136px;  position:absolute; background:url(../img/sub_bg.png) no-repeat left bottom; margin-left:-3px; display:none; z-index:100;}
#header .menu .sub ul {float:left;  width:220px; padding:8px 0px; text-align:center; margin-right:0px; line-height:26px; height:100%;}
#header .menu .sub ul.sub4 {margin-left:110px;}
#header .menu .sub ul.sub7 {width:100px;}
#header .menu .sub a {font-size:15px; display:block; color:#FFFFFF; letter-spacing:-1px;}

#header .menu .sub .sub2 .sub2_1 {display:none;}
#header .menu .sub .sub2 .sub2_1 a {font-size:14px;}







#main {width:100%; margin:0 auto;}
#main .main_bg { background:url(../img/bg_main_1.gif) repeat-y center top;}
#main .jibu_wrap {width:1000px; margin:0px auto 0; overflow:hidden;}
#main .jibu_wrap .tel {float:left; width:282px; background:#FFF;}
#main .jibu_wrap .jibu {float:right; width:678px; background:#0697E1; padding:20px 20px 20px;}
#main .jibu_wrap .jibu h2 {font-size:16px; border-bottom:1px solid white; padding-bottom:10px; font-weight:bold; margin-bottom:10px; color:#FFF;}
#main .jibu_wrap .jibu .jibu1 {float:left;}
#main .jibu_wrap .jibu .jibu2 {float:left; margin-left:50px;}
#main .jibu_wrap .jibu p {font-size:15px;margin-bottom:5px;}
#main .jibu_wrap .jibu p span {color:#FFF; }
#main .jibu_wrap .jibu p a { margin-right:5px; color:#FFF;}
#main .jibu_wrap .jibu p a:hover {color:#333;}


#main .main_bg2 {background:#0058a9;}
#main .box_wrap {width:1000px; margin:0px auto; overflow:hidden;}
#main .box_wrap .notice_wrap {width: 80%; overflow:hidden; float:left;background:#EEE;}
#main .box_wrap .notice_wrap .notice {float:left; position:relative; padding:20px 40px 20px 20px; width:299px; height:141px; background:#e0e0e0;}
#main .box_wrap .notice_wrap .notice h2 {font-weight:bold; font-size:26px; margin-bottom:5px;}
#main .box_wrap .notice_wrap .notice .more {position:absolute; right:20px; top:20px; background:url(../img/more.gif) no-repeat left center; text-indent:15px;}
#main .box_wrap .notice_wrap .notice ul {font-size:14px; line-height:24px; margin-top:20px;}
#main .box_wrap .notice_wrap .notice ul:after{display:block; content:''; clear:both;}
#main .box_wrap .notice_wrap .notice ul li{padding-left:10px; position:relative; font-size:18px; line-height:1.6;}
/* #main .box_wrap .notice_wrap .notice ul li:before{position:absolute; top:10px; left:0; display:block; content:''; width:2px; height:2px; background-color:#424242} */


#main .box_wrap .notice_wrap .notice.salim {background:#EEE; height:141px;}

#main .box_wrap .photo {width:1000px; background:#D8D8D8; float:left; padding:20px 20px 43px; position:relative;}
#main .box_wrap .photo h2 {font-weight:bold; font-size:16px; margin-bottom:5px; border-bottom:1px solid #a4a4a4; padding-bottom:10px;}
#main .box_wrap .photo .more  {position:absolute; right:60px; top:20px; background:url(../img/more.gif) no-repeat left center; text-indent:15px;}
#main .box_wrap .photo ul {margin-top:30px;}
#main .box_wrap .photo ul li {float:left; margin-left:13px;}
#main .box_wrap .photo ul li:first-child {margin-left:0;}

#main .box_wrap .photo2 {width:100%; background:#D8D8D8; padding:20px 20px 20px; position:relative; overflow:auto;}
#main .box_wrap .photo2 h2 {font-weight:bold; font-size:16px; margin-bottom:5px; border-bottom:1px solid #a4a4a4; padding-bottom:10px;}
#main .box_wrap .photo2 .more  {position:absolute; right:60px; top:20px; background:url(../img/more.gif) no-repeat left center; text-indent:15px;}
#main .box_wrap .photo2 ul {width:960px; margin-top:30px; overflow-x:auto; white-space:nowrap;}
#main .box_wrap .photo2 ul li {display:inline-block; margin-left:13px;}
#main .box_wrap .photo2 ul li:first-child {margin-left:0;}

/* slide */
#main .swiper-slide{background-image:url('../img/MainBg.png'); background-repeat:no-repeat; background-size:100%; background-position:center; height:600px;}
#main .swiper-slide a div{color:#373c3f}
.swiper-container{position:relative; overflow:hidden;}
.MainImg{position:absolute;  top:0; bottom:0; left:20%; margin:auto;  width:33%;  margin-bottom:5%}
.txtBox{position:absolute; top:0; bottom:0; right:20%; margin:auto; height:35%; text-align:right; line-height: 1.3;   }
.txtBox * {font-family: 'LotteMartDream'}
.txtBox .txt{font-size: 26px; margin-top: 20px;}
.MainBtn{border: 1px solid #424242; padding: 8px 30px; margin-top: 20px; display: inline-block; border-radius: 20px;}
.swiper-container h3{line-height:1.2}
.MainBtn:hover{border-color:#0058a9; background-color:#0058a9; color:#fff}

/* 211028 */
.MainImg{top:-100%; bottom:auto; opacity: 0}
.txtBox{overflow:hidden}
.txtBox h3{position:relative; right:-100%; opacity: 0}
.txtBox p.txt span{display:block; width:100%; position:relative; opacity: 0}
.txtBox p.txt span:nth-child(1){right:-130%}
.txtBox p.txt span:nth-child(2){right:-150%}
.txtBox p.txt span:nth-child(3){right:-170%}

.swiper-pagination{bottom:15px;left:0;right:0;margin:auto;}
.swiper-pagination-bullet-active {background:#fff!important; opacity:1!important;}
.swiper-pagination-bullet {
    background: #fff;
    opacity: 0.5;
    margin-right: 7px;
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
}
.swiper-pagination-bullet:last-child{margin-right:0;}

#main .site_link_wrap {width:100%; height:50px; background:#FFFFFF;}
#main .site_link_wrap .site_link {width:1000px;margin:0 auto; text-align:center; padding-top:9px;}
#main .site_link_wrap .site_link a {vertical-align:middle; margin:0 10px;}

/*180531수정추가*/

#header .menu .gnb li a{color:black; font-size: 18px;}
#header .menu .gnb{    float: right;}
#header .menu .sub{width:100%; right:0; background-image:none; background-color:rgba(255,255,255,1); display: none; justify-content: center;  box-shadow: 3px 8px 10px rgba(0,0,0,.1); top:60px;}
#header .menu .sub ul li a{color:black; padding:2px 0; letter-spacing: -1.5px; }
#header .menu .sub {
    margin-left: 0px;
    width:660px;
}
.sub_wrap{width:auto; float:right; position:absolute; right:0; height:100%;}
#header .menu .gnb li:hover a{color:#255991;}
#header .menu .sub ul{transition:all 0.4s ease; text-indent: 0px; height:100%;}
#header .menu .sub ul:hover{background:#255991;}
#header .menu .sub ul li a{transition:all 0.4s ease; text-align: center;}
#header .menu .sub ul li:hover a{color:white;}

#header{position:absolute; top:0; left:0; width:100%; height:80px; box-sizing:border-box; z-index: 100;}
#header .top{width:auto; position:absolute; top:0; left:30px;}


#main .box_wrap{width:100%; display: flex;}
#main .box_wrap .notice_wrap .notice{height:100%; width:50%; box-sizing: border-box;     background: #eff5f3; padding:30px;}
#main .box_wrap .notice_wrap .notice.salim {
    height: 100%;
    box-sizing: border-box;
    background: #DCDCDC;
}
#main .box_wrap .quick{width:355px;}
#main .box_wrap .notice_wrap .notice h2{color:black; font-size: 26px;}
#main .box_wrap .notice_wrap .notice ul{font-size: 16px; color:black;}
#main .box_wrap .notice_wrap .notice .more{right:30px; top:30px;}


/*0725 색상조정*/
#main .box_wrap .notice_wrap .notice{ background-color: #E6E6E6;}



#main .box_wrap .notice_wrap .quick{background-color:#fff;}
#main .box_wrap .notice_wrap .quick ul{margin-top:30px;}
#main .box_wrap .notice_wrap .quick ul li{width:25%; float:left; list-style: none; padding-left:0;}
#main .box_wrap .notice_wrap .quick ul li dl dt{width:65px; margin:0 auto; position:relative; z-index:2}
#main .box_wrap .notice_wrap .quick ul li dl dd{text-align:center; margin-top:20px; font-weight:bold; color:#464646}
#main .box_wrap .notice_wrap .quick ul li:hover dl dd{color: #0058a9;}
#main .box_wrap .notice_wrap .quick ul li dl dt:before{display:block; content:''; width:80px; height:80px; position:absolute; top:-8px; left:-7px; z-index:-1; border-radius:50%; background-color:#a7d9fd; transition:all .5s ease;transform:scale(0.0)}
#main .box_wrap .notice_wrap .quick ul li:hover dl dt:before{transform: scale(1.2); opacity:.6}
.etc{width:30%;}
/*.etc div{width:100%; float:left;}
 .etc .portfolio{
    height: 100%;
    background-position: 70% 0%;
    position:relative;
   display:block;content:'';background-repeat: no-repeat;
   background-size: auto 100%; background-image: url(../img/port_bg.jpg);
  }
.etc .portfolio:hover{background-size:auto 150%;transition:all 1s ease;}
.etc .portfolio .port_wrap{display:block; padding:40px 30px 30px 30px; text-align:center; background-color:rgba(0, 0, 0, .8);width:100%; height:100%}
.etc .portfolio .port_wrap:hover{background-color:rgba(0, 0, 0, .5)} */
.port_wrap span{display:block; font-size:26px; color:#fff; padding-top:5px;}
.contact{padding:30px; box-sizing:border-box;}
.contact h2{color:#fff; font-size:26px; margin-bottom:5px;}
.contact span{display:block; font-size:20px;margin-top: 20px;}
.contact span.text-yellow.tel{color:#ffce34; font-size: 40px; margin-top: 24px; font-weight: bold;}
.contact em{margin-right:10px; padding-right:10px; border-right:1px solid rgba(255, 255, 255, .3)}

.contact .btn_consult{    display: inline-block;
    margin-top: 20px;
    font-size: 18px;
    vertical-align: bottom;
    }
.contact .btn_consult img{width: 45%;
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}






 @media (max-width:1700px){
  #main .swiper-slide{
  background-size:auto 100%;
  }
}

@media (max-width: 1370px){
html body{margin-top:0}
body #header .menu .sub{top:60px}

}


@media (max-width: 1400px){
  .MainImg {left: 15%; width: 33%; margin-bottom: 12%;}
  #main .box_wrap .notice_wrap .notice h2,
  .contact h2{font-size:22px;}
  #main .box_wrap .notice_wrap .notice ul li{font-size:16px;}
  .contact span.text-yellow.tel { font-size: 32px; margin-top:15px;}
  .contact span {margin-top: 15px; font-size:17px;}
  .contact .btn_consult {margin-top: 25px;}
  .etc .portfolio .port_wrap {padding:30px}
  .port_wrap span {font-size: 22px; padding-top: 10px;}

}



@media (max-width: 1280px){

  .etc .portfolio .port_wrap {padding:30px;}
  .contact span.text-yellow.tel { font-size: 30px;}
  .contact span { font-size: 16px;}
  .contact .btn_consult { margin-top: 35px;}
  .contact .btn_consult img { margin-top: 3px;}

  .txtBox{right:10%}
  .MainImg {width:46%}

}

@media (max-width: 1024px){

  .MainImg {width:60%; left:10%}
  #main .box_wrap .notice_wrap .notice,
  .contact{padding:20px;}
  .etc .portfolio .port_wrap {padding:35px 15px 15px 15px}
  .etc .portfolio .port_wrap img{width:45%;}
  #main .box_wrap .notice_wrap .notice .more {right: 20px; top: 16px;}
  #main .box_wrap .notice_wrap .notice ul li { font-size: 14px;}
  #main .box_wrap .notice_wrap .notice h2, .contact h2 { font-size: 20px;}
  #main .box_wrap .notice_wrap .notice ul { margin-top: 20px;}
  .contact span.text-yellow.tel { font-size: 26px;}
  .contact span { font-size: 13px;}
  .port_wrap span { font-size: 18px; padding-top: 15px;}
  .etc .portfolio:hover { background-position: 64% 0%;}

}