@charset "utf-8";

/* 메인슬라이더 */
#visual{width:100%; height:70vh; margin:0 auto; position:relative; overflow:hidden; visibility:hidden; z-index:20;}
a{cursor:pointer}

#visual .sliderbx {z-index:10;width:100% !important; height:100vh; position:relative; top: 50px;}


#visual .sliderbx li{ width:100% !important; height:100%; background-repeat:no-repeat; background-position: center top; background-size: cover;  }

#visual .sliderbx li.mv01{background-image:url(../images/mvisual01.png)}
#visual .sliderbx li.mv02{background-image:url(../images/mvisual02.png)}
#visual .sliderbx li.mv03{background-image:url(../images/mvisual03.png)}
#visual .sliderbx li.mv04{background-image:url(../images/mvisual04.png)}
#visual .sliderbx li.mv05{background-image:url(../images/mvisual05.png)}

#visual .sliderbx li a{ display:block; width:100%; height:100%;}


#visual div.bx-pager{ position:absolute;  left:50%; margin-left:550px; z-index:101;}
#visual div.bx-pager div{ float:left; margin:0 3px;}
#visual div.bx-pager div a{ display:block; width:10px; height:10px; text-indent:-9999px; border-radius:9px; border:4px solid #fff;}
#visual div.bx-pager div a.active {border-color:#fff;}
#visual div.bx-controls-direction a {width:30px; height:30px; border-bottom:3px solid #FFF; border-left:3px solid #FFF; border-radius:0 0 0 5px; text-indent:-9999px; position:absolute; top:50%; margin-top:-25px !important; z-index:20;} 

@media (max-width: 1220px){
	#visual div.bx-pager{display:none;}
}


#visual .sliderbx li .abox_img {
  background: #333;
  opacity: 0.3;
  width: 100%;
  height: 100%;  

  animation: imagescale 15s ease-in-out infinite alternate;
  -webkit-animation: imagescale 15s ease-in-out infinite alternate;
  -moz-animation: imagescale 15s ease-in-out infinite alternate;
  -o-webkit-animation: imagescale 15s ease-in-out infinite alternate;
   position: relative;
}

#visual .sliderbx li .abox_img::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  opacity: 0.4;
}


#visual .sliderbx li .abox_img img {
  width: auto;
  height: 100%;
}
#visual .area_txt {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 1200px;
  z-index: 15;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: left;
  text-shadow:0px 0px 3px #000;
}


#visual .area_txt > h3 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.3em;
  text-transform: uppercase;
}
#visual .area_txt > h2 {
  font-size: 65px;
  font-weight: 600;
  text-transform: uppercase;
}
#visual .area_txt > p {
  display: block;
  padding: 5px 0 0;
  font-size: 22px;
  font-weight: 400;
  word-break: keep-all;
}

#visual .bx-controls {
}
#visual div.bx-pager {
  z-index: 50;
  position: absolute;
  top: 600px;
  left: calc((100% - 1200px) / 2);
  transform: translateY(-50%);
}
#visual div.bx-pager div {
  margin: 0 12px 0 0;
  float: left;
}
#visual div.bx-pager div:last-child {
  margin: 0;
}
#visual div.bx-pager div a {
  position: relative;
  font-size: 15px;
  font-weight: 400;
  color: #fff;
  transition: all 0.3s ease;
  opacity: 0.3;
}
#visual div.bx-pager div a.active {
  opacity: 1;
  font-weight: 600;
}

#visual .bx-controls-direction {
  display: none;
}











/*메인-중간컨텐츠*/
#middle{ width:100%; padding:55px 0 85px 0; background: #d7eafd;}
#middle_in{box-sizing: border-box; }
#middle_in:after{ display:block; content:""; clear:both;}
#middle .abox{ float:left; box-sizing: border-box;}
#middle .abox01{width:100%; }
#middle .abox02{width:30%; margin: 50px 0 0 0;}
#middle .abox03{width:70%; margin: 85px 0 0 0;}
#middle .abox_img img{ width:100%; overflow:hidden;}
#middle dl{ color:#444; position:relative; padding:35px 46px;}
#middle dt{ font-size:23px; font-weight:500; color:#444;}
/*#middle dt:before{ display:block; content:""; width:30px; height:3px; background:#1f3c88; margin-bottom:7px;}*/
#middle p{ font-size:13px; color:#999; margin-bottom:25px;}
#middle dd{ font-size:18px; color:#000; margin:20px 0 25px 0; line-height:1.5em; font-weight: 400;}
#middle .abox01:after{content: ''; clear: both; display: block;}
#middle .abox01 h3 {display: inline-block; font-size: 30px; color: #285bb1; font-weight: 400;}
#middle .abox01 a.mbtn{background:#3f51b5; line-height:35px; color:#fff; padding:8px 24px; transition:all 0.5s; font-size:16px; font-weight: 400; border-radius: 30px; float: right; margin: 0 44px;}
#middle .abox01 a.mbtn:hover{color:#fff; background:#1f3c88; transition:all 0.5s;}
#middle .abox03 .tel_icon{ float:left; width:50px; height:50px; border-radius:50%; line-height:50px; text-align:center; color:#fff; background:#5893d4; font-size:1.8em;
margin:3px 18px 0 0;}
#middle .abox03 .tel_wrap{ float:left;}
#middle .abox03 a{ display:block; font-family:Tahoma, Geneva, sans-serif;}
#middle .abox03 a.tel{ font-size:37px; color:#333; font-weight:500; line-height:1em;}
#middle .abox03 a.fax{ font-size:23px; color:#888; font-weight:500; line-height:1em; margin:7px 0 5px 3px;}
#middle .abox03 a.mail{ font-size:14px; color:#5893d4; font-weight:600; line-height:1em; letter-spacing:0; margin-left:3px;}


#middle2{ width:100%; background:#fff; margin:0 0 50px;}
#middle2_in{box-sizing: border-box;display: -webkit-box; display: -ms-flexbox; display: flex;-webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
#middle2_in:after{ display:block; content:""; clear:both;}
#middle2 .abox{width:50%; box-sizing: border-box;}
#middle2 .abox h3{ font-size: 36px; color: #285bb1; font-weight: 400;}
#middle2 .abox01{ padding-right:30px;}
#middle2 .abox02{padding-left:30px;}
#middle2 .abox03{padding-right:30px;}
#middle2 .abox04{padding-left:30px;}


/* 메인비쥬얼 하단 배너4개 */	
#area_bn{margin:100px 0;}
#area_bn .bn_list{text-align:center;}
#area_bn .bn_list:after{ display:block; content:""; clear:both;}
#area_bn .bn_list > li{float:left; vertical-align:top; margin:0 30px 0 0; border:1px solid #eee; background:#fff; width:calc((100% / 4) - 23px); width:-webkit-calc((100% / 4) - 23px); box-sizing:border-box;}
#area_bn .bn_list > li:last-child{margin:0;}
#area_bn .bn_list > li > a{display:block; height:100%;}
#area_bn .bn_list > li > a .area_img{width:100%; height:220px; overflow:hidden;}
#area_bn .bn_list > li > a .area_img img{width:100%; height:100%; transform: scale(1.0); transition: all 0.3s cubic-bezier(0.51, 0.21, 1, 1);}
#area_bn .bn_list > li:hover > a .area_img img{transform: scale(1.05);}
#area_bn .bn_list > li > a .area_txt{text-align:left; padding:10px 15px 15px; box-sizing:border-box;}
#area_bn .bn_list > li > a .area_txt span{line-height:1em; font-size:12px; font-weight:400; color:#999;}
#area_bn .bn_list > li > a .area_txt h3{display:block; padding:5px 0 0; font-size:19px; font-weight:500; color:#333;}


/*배너롤링*/
#banner_wrap {width:100%; height:auto; border-top: 1px solid #d4d3d3; text-align:center}
#banner {width:100%; height:auto; margin:0 auto; padding:40px 0 30px 0; position:relative;}
#banner .bannerlink div{text-align: center; width:1200px; margin: 0 auto}
#banner .bannerlink div a{margin: 0 25px;}
#banner .bannerlink div img {width:170px;}


.nav {position:absolute; top:10px; left:0px;}
.nav button {width:22px; height:22px; border:1px solid #bbb; background:#fff;}
.RollDiv {width:1130px; height:70px; margin:0 auto;overflow:hidden;}  
.RollDiv > div{overflow:hidden;height:70px;width:1130px; margin:0 auto;}
.RollDiv > div > a {float:left; display:block; margin:0 4px; border:1px solid #CCCCCC; padding:2px;}  
.RollDiv > div > a > img {width:auto;}




/**/
.inr {width: 1200px; position: relative; margin: 0 auto;}

/* 항상 오른쪽 배너*/
.alwaysfix{position: fixed; right: 3%; top: 50%; transform: translateY(-50%); z-index: 29;}
.alwaysfix ul li {margin: 20px 0;}
.alwaysfix ul li a {font-size: 16px; color: #354ab4; text-align: center;}
.alwaysfix ul li a img{margin: 0 0 10px 0;}



/*테이블*/
.tbl02 { border: 0;
    width: calc(100% - 60px);
    margin: 10px 30px;
}
.tbl02 table {width: 100%;
    border-collapse: collapse;
}
.tbl02 tbody th {
    font-size: 18px;
    border: 0;
    color: #353535;
    line-height: 1.5;
    background: #99ccff;
    height: 1.5em;
    padding: 10px 5px;
    text-align: center;
    font-weight: 400;
}
.tbl02 tr {border-bottom: 1px solid #d7eafd}
.tbl02 tr:first-child {color: #285bb1;}
.tbl02 td {font-size: 18px;
    border: 0;
    color: #5c5c5c;
    text-align: center;
    padding: 7px 5px;
    line-height: 1.5;
    word-break: break-all;
    vertical-align: middle;
    background: #fff;
}


.tbl02.st2 tr:first-child {color: #FFF;}
.tbl02.st2 thead th {
    background: #5988cc;
    line-height: 40px;
    border-right: 1px solid #FFF;
}
.tbl02.st2 tr {border-bottom: 1px solid #5988cc}


@media (max-width:1400px) {
.inr {width: 1100px;}
#middle .abox03 { margin: 52px 0 0 0;}
#visual .area_txt {width: 90%;}
#visual div.bx-pager { left: 5%;}
    #visual div.bx-pager div {margin: 0 20px 0 0;}
}

@media (max-width:1200px) {
.inr {width: 1050px;}
#middle .abox03 {margin: 2px 0 0 0;}
}
@media (max-width:1100px) {
	.inr {width: 90%;}
	#middle dd {font-size: 18px;}
    .tbl02 tbody th {font-size: 20px;}
    .tbl02 tbody td {font-size: 20px;}
    #middle .abox03 {margin: 50px 0 0 0;}
	#area_bn .bn_list > li > a .area_img{height:200px;}
}

@media (max-width: 1024px) {
	#area_bn .bn_list > li{margin:0 20px 0 0; width:calc((100% / 4) - 15px); width:-webkit-calc((100% / 4) - 15px);}
	#area_bn .bn_list > li > a .area_img{height:180px;}
}
@media (max-width: 1000px) {
    #middle .abox01 {margin: 0 0 30px 0;}
    #middle .abox02 {width: 40%; margin: 0;}
    #middle .abox03 {width: 60%; margin: 0;}
    #middle .abox01 a.mbtn {line-height: 30px;padding: 4px 20px;font-size: 16px; border-radius: 30px; width: 120px; margin: 0;}
    #middle .abox01 h3 {font-size: 30px;}
    #middle dd {font-size: 16px;}
    .tbl02 tbody th {font-size: 20px;}
    .tbl02 td {font-size: 20px;}
    #middle2 {margin: 80px 0 0;}
    #middle dl {margin: 18px 0 0 0;}
}
    
@media (max-width: 900px) {
.inr {width:90%; margin: 0 auto;}
#visual{width:100%; }
#visual #slogan{top:300px; word-break: keep-all; word-wrap:break-word; text-shadow:0;}
#visual #slogan .img01{ font-size:20px; line-height:1.7;}
#visual #slogan .img02{ font-size:40px; line-height:1.2; margin:5px 0;}
#visual #slogan .mt{  font-size:14px; line-height:1.2em;}
#visual .sliderbx li{ width:100% !important; background-position:center top; background-size:cover;}

#visual div.bx-controls-direction{ display:none;}  

/*메인-중간컨텐츠*/
#middle {width:100%; min-width:100%; margin: 0 auto;}
#middle .abox{ float:left; width:50%;}
#middle .abox_img img{ height:auto;}
#middle dl{ padding:30px}
#middle dt{ font-size:18px;}
#middle dt:before{ width:25px; margin:0 auto 7px auto;}
#middle p{ margin-bottom:15px;}
#middle a.mbtn{ width:90px; padding:0; line-height:25px; font-size:1em; margin:10px auto 0 auto;}

    
#middle .abox03 .abox_img{ display:none;}
#middle .abox03 dt:before{ display:none;}
#middle .abox03 .tel_icon{ width:40px; height:40px; line-height:40px; font-size:1.5em;margin:3px 15px 0 0;}
#middle .abox03 a.tel{ font-size:35px;}
#middle .abox03 a.fax{ font-size:21px;}
#middle .abox03 a.mail{ font-size:12px;}

#middle2{ width:100%; margin:60px 0 0;}

#banner_wrap {width:90%; min-width:90%; margin:0 auto; background:#fff; overflow:hidden;}
#banner{ width:100%; padding:60px 0 30px 0; position:relative;}
.nav{ position:absolute; top:30px; left:0px;}
#banner_wrap {width:100%; min-width:100%; margin: 0 auto;}
.RollDiv {width:100%; min-width:100%; margin: 0 auto;}  
.RollDiv > div{width:100%; min-width:100%; margin: 0 auto;}    
.alwaysfix {display: none;}    

#banner .bannerlink div{text-align: center; width:100%; margin: 0 auto}
#banner .bannerlink div a{margin: 0 4px;}

#area_bn .bn_list > li > a .area_img{height:160px;}
}



@media (max-width: 800px) {
	#area_bn{margin:60px 0;}
	#area_bn .bn_list > li{margin:0 20px 20px 0; width:calc((100% / 2) - 10px); width:-webkit-calc((100% / 2) - 10px);}
	#area_bn .bn_list > li:nth-child(2n){margin:0;}
	#area_bn .bn_list > li:nth-child(n+3){margin-bottom:0;}
	#area_bn .bn_list > li > a .area_img{height:250px;}
}





@media (max-width: 700px) {
    #middle .abox02 {width: 100%;margin: 0;}
    #middle .abox03 {width: 100%;margin: 0;}
    #middle .abox03 dl{ padding:0;}
    .tbl02 {margin: 0; width: 100%;}
	#area_bn .bn_list > li > a .area_img{height:220px;}

}

@media (max-width: 600px) {
    #middle2_in{ width:90%;}
    #middle2 .abox{ float:none; width:100%; min-height:auto; overflow:hidden;}
    #middle2 .abox01{ padding-right:0px;}
    #middle2 .abox03{ padding-right:0px;}
	#middle2 .abox04,
    #middle2 .abox02{padding:0;}
        .tbl02 tbody th {font-size: 16px;}
    .tbl02 tbody td {font-size: 16px;}
	#area_bn .bn_list > li{margin:0 12px 12px 0; width:-webkit-calc((100% / 2) - 6px); width:calc((100% / 2) - 6px);}
	#area_bn .bn_list > li > a .area_img{height:180px;}
	#area_bn .bn_list > li > a .area_txt{padding:5px 10px 10px;}
	#area_bn .bn_list > li > a .area_txt h3{padding:2px 0 0; font-size:18px;}

}



@media (max-width: 500px) {
#banner_wrap {width:100%; height:auto; border-top: 1px solid #d4d3d3; text-align:center}
#banner {width:100%; height:auto; margin:0 auto; padding:10px 0px; position:relative;}
#banner .bannerlink div{ width:100%; margin: 0 auto; }
#banner .bannerlink div a{margin:3px; display:inline-block;}
#banner .bannerlink div img {width:162px; height:55px; padding:6px 12px; border:1px solid #e6e6e6; }




/* 메인슬라이더 */

#visual {width:100%; height:500px; margin:0 auto; position:relative; overflow:hidden; visibility:hidden;}
#visual .sliderbx {z-index:10;width:100% !important; height:500px; position:relative; top: 50px;}
#visual .sliderbx li {width:100% !important; height:500px; background-repeat:no-repeat; background-position: center top; background-size: cover;  }


#visual .area_txt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  z-index: 15;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  text-shadow:0px 0px 3px #000;
}



    #visual .area_txt > h3 {
    font-size: 30px;
    font-weight: 500;
    line-height: 1.3em;
    letter-spacing: -2px;
}
    #visual .area_txt > p {
    padding: 20px 0 0;
    font-size: 17px;
	word-break:keep-all; 
	word-wrap:break-word ;
    font-weight: 400;
}





}


@media (max-width: 450px) {
	#middle2{margin:30px 0 0;}
	#area_bn{margin:30px 0;}
	#area_bn .bn_list > li > a .area_img{height:160px;}
	#area_bn .bn_list > li > a .area_txt span{font-size:11px;}
	#area_bn .bn_list > li > a .area_txt h3{font-size:17px;}
}




@-webkit-keyframes scrollDownPointer {
  60% {
    -webkit-transform: translate(0, 200%);
    transform: translate(0, 200%);
  }
  70% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}
@keyframes scrollDownPointer {
  60% {
    -webkit-transform: translate(0, 200%);
    transform: translate(0, 200%);
  }
  70% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes imagescale {
  0% {
    transform: scale(1) rotate(0.001deg);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }

  100% {
    transform: scale(1.8) rotate(0.001deg);
    -webkit-transform: scale(1.8);
    -moz-transform: scale(1.8);
    -o-transform: scale(1.8);
  }
}

@keyframes mimagescale {
  0% {
    transform: scale(1) rotate(0.001deg);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }

  100% {
    transform: scale(1.2) rotate(0.001deg);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
  }
}