@charset 'utf-8';

/* -------------------------------------------------------------------- */
/* HEADER AREA
/* -------------------------------------------------------------------- */

#header {
    width: 100%;
    /* height: 40px; */
    background: #f7f7f7;
    /* opacity: 0.9; */
    border-bottom: 1px solid rgba(97, 97, 97, 0.1);
}

/* header */
.header_area { position:relative; width:100%; /* height:40px; */ margin:0 auto; z-index:1000; } 
.header_area ul { margin-bottom: 0 !important; }
.header_area .header_info { float:left; }
.header_area .header_info li { float:left; color:#022640; font-size:14px; letter-spacing:0em; }
.header_area .header_info li:nth-child(1) { width:110px; height:40px; background-color:#022640; opacity: 1; text-align:center; margin:0 15px 0 0; padding-top:8px; }
.header_area .header_info li:nth-child(1) a { color:#fff ; }
.header_area .header_info li:nth-child(2) { margin:6px 15px 0 0; } 
.header_area .header_info li:nth-child(3) { margin:6px 15px 0 0; font-size:15px; }
.header_area .header_gnb { float:right; line-height: 40px; }
.header_area .header_gnb li { float:left; font-size:14px; color: rgba(195, 195, 195, 0.9); font-weight: 400; margin: 0px 5px; cursor:pointer;}
.header_area .header_gnb li:nth-last-child(even) { color: rgba(222,222,222,0.3); }
.header_area .header_gnb a { font-size:14px; color:#fff; }


.header_area .header_info_1 { display: inline-flex; }
.header_area .header_info_1 li { float:left; color:rgba(195, 195, 195, 0.9); font-size:14px; letter-spacing:0em; }
.header_area .header_info_1 li:nth-child(1) { width:110px; /* background-color:#022640; */ opacity: 1; text-align:center; margin:0 15px 0 0; padding:9px; }
.header_area .header_info_1 li:nth-child(1) a { color: rgba(0, 0, 0, 1); }
.header_area .header_info_1 li:nth-child(2) { margin:6px 15px 0 0; } 
.header_area .header_info_1 li:nth-child(3) { margin:6px 15px 0 0; font-size:15px; }
.header_area .header_gnb_1 { float:right; display: inline-flex; line-height: 40px; }
.header_area .header_gnb_1 li { text-align:center; font-size:14px; color: rgba(195, 195, 195, 0.45); font-weight: 400; padding: 0px 15px; /* border-right: 1px solid rgba(195, 195, 195, 0.9);*/ cursor:pointer;}
.header_area .header_gnb_1 li:nth-last-child(1) { border-right: 0px; } 
.header_area .header_gnb_1 a { font-size:14px; color: rgba(195, 195, 195, 0.9); font-weight: normal; }

.header_area::after {clear: both; content: "";}


/* -------------------------------------------------------------------- */
/* CAROUSEL AREA
/* -------------------------------------------------------------------- */

.mTitle-area > .container {
 /* display: flex; */
  align-items: center;
  justify-content: center;
/*  min-height: 100vh;
  background-color: #dedede; */
}

.mTitle-area > .container h1, .mTitle-area > .container p {
  position: relative;
  display: block;
  /* margin: 0;
  font-size: 4rem; */
  line-height: 1.1;
  transform: translateY(6rem);
  animation: up 600ms linear forwards;
  z-index: 1;
  text-shadow: 0px 1px 1px rgb(80,80,80);
  
  &::before,
  &::after {
    position: absolute;
    content: '';
    width: 0px;
    height: 1px;
    left: 0;
    background-color: rgba(0,0,0,0.2);
    z-index: -1;
  }
  
  &::before {
    top: 1.4rem;
    animation: draw 500ms linear 1s forwards;
  }
  
  &::after {
    bottom: 0.4rem;
    animation: draw 500ms linear 1s forwards;
  }
  
}

.mTitle-area > .container .title-container {
  font-size: 0;
  position: relative;
  /* overflow: hidden; */
  padding-bottom: 0.4rem;
}

@keyframes up {
  
  100% {
    transform: translateY(0);
  }
  
}

@keyframes draw {
  
  100% {
    width: 100%;
  }
  
}  

.roll-img-1 {
    background-image: url(/images/main/mainvisual04_4.png); 
    background-size: cover; 
    /* width: 100%; */    
    height: 46rem; 
    resize: both;
}
.roll-img-2 {
    background-image: url(/images/main/mainvisual01_1.png); 
    background-size: cover; 
    /* width: 100%; */    
    height: 46rem; 
    resize: both;
}

.roll-img-3 {
    background-image: url(/images/main/mainvisual01.png); 
    background-size: cover; 
    /* width: 100%; */    
    height: 46rem; 
    resize: both;
}

.roll-img-4 {
    background-image: url(/images/main/mainvisual04.png); 
    background-size: cover; 
    /* width: 100%; */    
    height: 46rem; 
    resize: both;
}

.new-roll-img-1 {
    background-image: url(/images/main/20921184-1.jpg?v=1); 
    background-position-y: 90%;
    background-size: cover; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    /* width: 100%; */    
    height: 35rem; /* height: 46rem; */
    resize: both;
}

.new-roll-img-2 {
    background-image: url(/images/main/cc_main_3.jpg?v=1); 
    background-size: cover; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    background-position-y: bottom;
    /* width: 100%; */    
    height: 35rem; /* height: 46rem; */
    resize: both;
    filter:grayscale(30%);
}

.new-roll-img-3 {
    background-image: url(/images/main/20464975-1.jpg?v=1); 
    background-size: cover; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    background-position-y: center;
    /* width: 100%; */    
    height: 35rem; /* height: 46rem; */
    resize: both;
}



.main-pc-title h1, .main-mobile-title h1 { 
  margin: 25px 0 30px; text-transform: uppercase; font-size: 5.0rem; font-weight: normal;
}
.main-pc-title p, .main-mobile-title p { 
  font-size: 2.0rem; font-weight: 300; line-height: 2.4rem; margin: 0; 
}

.main-mobile-title { display: none; }


/* -------------------------------------------------------------------- */
/* 공지팝업
/* -------------------------------------------------------------------- */

.multi_popup { background:#fff; color:#666; position:absolute; z-index:898; -webkit-box-shadow: 0px 0px 15px #000; -moz-box-shadow: 0px 0px 15px #000; box-shadow: 0px 0px 15px #000; }

.multi_popup .bottomarea { line-height: 37px; margin: 0 auto; }
.multi_popup .bottomarea span { cursor: pointer; margin-left: 10px; }
.multi_popup .todaycheck { font-size:15px; font-family:'돋움'; text-align: center; }
.multi_popup .todaycheck label {margin-bottom: 0px; }
.multi_popup .todaycheck input { margin-right:5px; width: 16px; height: 16px; vertical-align: middle; }
.multi_popup .todaycheck span { cursor: pointer; }



/* -------------------------------------------------------------------- */
/* WHAT WE DO SECTION
/* -------------------------------------------------------------------- */

section#whatwedo {
    /* float:left; */
    width:100%;
    background: #f6f7f8;  /* fallback for old browsers */
    padding:3.5rem 0 3rem 0;
}
#whatwedo h1{float:left; width:100%; color:#232323; margin-bottom:30px; font-size: 16px;}
#whatwedo h1 span{font-family: 'Libre Baskerville', serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}


#whatwedo .about ul { margin-top:70px;}
#whatwedo .about ul li { float:left;  position:relative; padding:0px 0 30px 127px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; text-align: left;}
#whatwedo .about ul li a i:before { content: none; }
#whatwedo .about ul li a i:after { width:110px; height:110px; border-radius:50%; background-color:rgba(67, 70, 88, 1) !important; display:block; position:absolute; left:0; top:0; }
#whatwedo .about ul li a i.fa-1:after { content:"\f19c"; padding: 25px 27px; font-size: 3.4rem; }
#whatwedo .about ul li a i.fa-2:after { content:"\f0f8"; padding: 24px 34px; font-size: 3.5rem; }
#whatwedo .about ul li a i.fa-3:after { content:"\f0f0"; padding: 19px 32px; font-size: 4.0rem; }
#whatwedo .about ul li a i.fa-4:after { content:"\f0ac"; padding: 18px 26px; font-size: 4.5rem; }

#whatwedo .about ul li:nth-child(1) a:before { background:url("/images/main/18dp.png") no-repeat center;}
#whatwedo .about ul li a { display:block; padding:0 0 10px 0;}
#whatwedo .about ul li dl {  /* line-height:1.2; */ margin-top:-5px; }
#whatwedo .about ul li dl dt { font-size:24px; color:rgba(116, 162, 163, 1); font-weight: normal; line-height: 2.5rem; }
#whatwedo .about ul li dl dd { font-size:14px; color:#707c88; /* letter-spacing: -2px; */}



/* -------------------------------------------------------------------- */
/* COUNTER SECTION
/* -------------------------------------------------------------------- */

#bg-counters {
  background-image: url("/images/main/counter-bg.jpg"); 
  background-size: cover; 
  background-repeat: no-repeat; 
  background-attachment: fixed; 
  background-position: center;
}

.counters .count_nums {
    font-size: 2.8rem;
    line-height: 5rem;
}

.counters .count_nums,
.counters i {
    vertical-align: middle;
}


.counters .count_nums_etc1 {
    font-size: 4rem !important; 
    line-height: 5rem; 
    font-weight: bold; 
    vertical-align: middle;
}
.counters .count_nums_etc2 {
    font-size: 4.75rem !important; 
    line-height: 5rem; 
    font-weight: bold; 
    vertical-align: middle;
}

.padding {
    padding: 4.5rem 0;
}
h4 {
    font-size: 1.125rem;
}
.counters .count_nums, .counters i {
    vertical-align: middle;
}



/* -------------------------------------------------------------------- */
/* CARDS SECTION
/* -------------------------------------------------------------------- */

section#cards {
    /* float:left; */
    width:100%;
    background: #fff;  /* fallback for old browsers */
    padding:3.5rem 0 7.5rem 0;
}
#cards h1{float:left; width:100%; color:#232323; margin-bottom:30px; font-size: 16px;}
#cards h1 span{font-family: 'Libre Baskerville', serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}
#cards h1 a{color:#131313; font-weight:bold;}

/*Profile Card 1*/
.profile-card-1 {
  font-family: 'Open Sans', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  color: #ffffff;
  text-align: center;
  height:368px;
  border:none;
}
.profile-card-1 .background {
  width:100%;
  vertical-align: top;
  opacity: 0.9;
  -webkit-filter: blur(5px);
  filter: blur(5px);
   -webkit-transform: scale(1.8);
  transform: scale(2.8);
}
.profile-card-1 .card-content {
  width: 100%;
  padding: 15px 25px;
  position: absolute;
  left: 0;
  top: 50%;
}
.profile-card-1 .profile {
  border-radius: 50%;
  position: absolute;
  bottom: 50%;
  left: 50%;
  max-width: 100px;
  opacity: 1;
  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 1);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.profile-card-1 h2 {
  margin: 0 0 5px;
  font-weight: 600;
  font-size:25px;
}
.profile-card-1 h2 small {
  display: block;
  font-size: 15px;
  margin-top:10px;
}
.profile-card-1 i {
  display: inline-block;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    border: 1px solid #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    margin:0 5px;
}
.profile-card-1 .icon-block{
    float:left;
    width:100%;
    margin-top:15px;
}
.profile-card-1 .icon-block a{
    text-decoration:none;
}
.profile-card-1 i:hover {
  background-color:#fff;
  color:#2E3434;
  text-decoration:none;
}

/*Profile card 2*/
.profile-card-2 .card-img-block{
    float:left;
    width:100%;
    height:150px;
    overflow:hidden;
}
.profile-card-2 .card-body{
    position:relative;
}
.profile-card-2 .profile {
  border-radius: 50%;
  position: absolute;
  top: -42px;
  left: 15%;
  max-width: 75px;
  border: 3px solid rgba(255, 255, 255, 1);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.profile-card-2 h5{
    font-weight:600;
    color:#6ab04c;
}
.profile-card-2 .card-text{
    font-weight:300;
    font-size:15px;
}
.profile-card-2 .icon-block{
    float:left;
    width:100%;
}
.profile-card-2 .icon-block a{
    text-decoration:none;
}
.profile-card-2 i {
  display: inline-block;
    font-size: 16px;
    color: #6ab04c;
    text-align: center;
    border: 1px solid #6ab04c;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    margin:0 5px;
}
.profile-card-2 i:hover {
  background-color:#6ab04c;
  color:#fff;
}

/*Profile Card 3*/
.profile-card-3 {
  font-family: 'Open Sans', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  width: 100%;
  text-align: center;
  height:368px;
  border:none;
}
.profile-card-3 .background-block {
    float: left;
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.profile-card-3 .background-block .background {
  width:100%;
  vertical-align: top;
  opacity: 0.9;
  -webkit-filter: blur(0.5px);
  filter: blur(0.5px);
   -webkit-transform: scale(1.8);
  transform: scale(2.8);
}
.profile-card-3 .card-content {
  width: 100%;
  padding: 15px 25px;
  color:#232323;
  float:left;
  background:#efefef;
  height:50%;
  border-radius:0 0 5px 5px;
  position: relative;
  z-index: 9999;
}
.profile-card-3 .card-content::before {
    content: '';
    background: #efefef;
    width: 120%;
    height: 100%;
    left: 11px;
    bottom: 51px;
    position: absolute;
    z-index: -1;
    transform: rotate(-13deg);
}
.profile-card-3 .profile {
  border-radius: 50%;
  position: absolute;
  bottom: 50%;
  left: 50%;
  max-width: 100px;
  opacity: 1;
  box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 1);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  z-index:99999;
}
.profile-card-3 h2 {
  margin: 0 0 5px;
  font-weight: 600;
  font-size:25px;
}
.profile-card-3 h2 small {
  display: block;
  font-size: 15px;
  margin-top:10px;
}
.profile-card-3 i {
  display: inline-block;
    font-size: 16px;
    color: #232323;
    text-align: center;
    border: 1px solid #232323;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    margin:0 5px;
}
.profile-card-3 .icon-block{
    float:left;
    width:100%;
    margin-top:15px;
}
.profile-card-3 .icon-block a{
    text-decoration:none;
}
.profile-card-3 i:hover {
  background-color:#232323;
  color:#fff;
  text-decoration:none;
}


/*Profile card 4*/
.profile-card-4 .card-img-block{
    float:left;
    width:100%;
    height:150px;
    overflow:hidden;
}
.profile-card-4 .card-body{
    position:relative;
}
.profile-card-4 .profile {
    border-radius: 50%;
    position: absolute;
    top: -62px;
    left: 50%;
    width:100px;
    border: 3px solid rgba(255, 255, 255, 1);
    margin-left: -50px;
}
.profile-card-4 .card-img-block{
    position:relative;
}
.profile-card-4 .card-img-block > .info-box{
    position:absolute;
    background:rgba(217,11,225,0.6);
    width:100%;
    height:100%;
    color:#fff;
    padding:20px;
    text-align:center;
    font-size:14px;
   -webkit-transition: 1s ease;
    transition: 1s ease;
    opacity:0;
}
.profile-card-4 .card-img-block:hover > .info-box{
    opacity:1;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
.profile-card-4 h5{
    font-weight:600;
    color:#d90be1;
}
.profile-card-4 .card-text{
    font-weight:300;
    font-size:15px;
}
.profile-card-4 .icon-block{
    float:left;
    width:100%;
}
.profile-card-4 .icon-block a{
    text-decoration:none;
}
.profile-card-4 i {
  display: inline-block;
    font-size: 16px;
    color: #d90be1;
    text-align: center;
    border: 1px solid #d90be1;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    margin:0 5px;
}
.profile-card-4 i:hover {
  background-color:#d90be1;
  color:#fff;
}

/*Profile Card 5*/
.profile-card-5{
    margin-top:20px;
}
.profile-card-5 .btn{
    border-radius:2px;
    text-transform:uppercase;
    font-size:12px;
    padding:7px 20px;
}
.profile-card-5 .card-img-block {
    width: 91%;
    margin: 0 auto;
    position: relative;
    top: -20px;
    
}
.profile-card-5 .card-img-block img{
    border-radius:5px;
    box-shadow:0 0 10px rgba(0,0,0,0.63);
}
.profile-card-5 h5{
    color: rgba(67, 70, 88, 1);
    font-weight:600;
}
.profile-card-5 p{
    font-size:17px;
    font-weight:300;
}
.profile-card-5 .btn-primary{
    background-color: rgba(67, 70, 88, 1);
    border-color: rgba(67, 70, 88, 1);
}  



/* -------------------------------------------------------------------- */
/* CUSTOMER SECTION
/* -------------------------------------------------------------------- */
.sub_visual.cut51 { background-image: url(/images/sub/19487226-1.jpg);  position: relative; overflow: hidden; }
.sub_visual.cut51 h2 { 
    font-size: 4rem; 
    color: #fff; 
    text-align: center; 
    line-height: 100%; 
    position: absolute; 
    width: 100%; 
/*    font-weight: 800; */
    padding-top: 9.5rem; 
    text-shadow: 1px 1px black;
    top: 0;
}
.cut51 p { color: #fff; text-align: center; line-height: 264px; position: absolute; width: 100%; padding-top: 6rem; margin: 0; }
.cut51 .container { position: absolute; height: 100%; margin: 0 auto; display: ruby-base-container; display: contents; } 
.cut51 .lay-human { 
    background: url(/images/sub/19487226-26.png);
    background-position-x: center;
    background-position-y: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}
.cut51 .lay-color { top: 0; }

@media (max-width: 460px){
  .cut51 .lay-human { 
    background: url(/images/sub/19487226-21.png); 
    background-position-x: center;
    background-position-y: -5px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;  }
}

@media (min-width: 461px) and (max-width: 600px){
  .cut51 .lay-human { 
    background: url(/images/sub/19487226-22.png); 
    background-position-x: center;
    background-position-y: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;  }
}

@media (min-width: 600px) and (max-width: 767px){
  .cut51 .lay-human { 
    background: url(/images/sub/19487226-24.png); 
    background-position-x: center;
    background-position-y: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;  }
}

@media (min-width: 768px) and (max-width: 1520px){
  .cut51 .lay-human { 
    background: url(/images/sub/19487226-25.png); 
    background-position-x: center;
    background-position-y: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;  }
}

@media (min-width: 1521px) {
  .cut51 .lay-human { 
    background: url(/images/sub/19487226-26.png); 
    background-position-x: center;
    background-position-y: -10px;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;  }
}

section#custom_area {
    /* float:left; */
    width:100%;
    background: #f6f7f8;
    padding:3rem 0 7rem 0;
}
#custom_area h1{float:left; width:100%; color:#232323; margin-bottom:30px; font-size: 16px;}
#custom_area h1 span{font-family: 'Libre Baskerville', serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}


#custom_area .rightarea {
  padding-left:0px !important; 
  padding-right:0px !important; 
  background-color:#fff; 
  border:1px solid #efefef; 
  /* box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1); */
}
#custom_area .notice_area {
  height:235px; 
  padding:0px 20px 10px 20px;
}

#custom_area .custom_title {
  display: inline-block; 
  width: 100%; 
  border-bottom: 1px solid #ddd; 
  margin-bottom: 5px; 
  padding: 15px 10px 8px 0px;
}

#custom_area .custom_title > span:first-child {
  float: left; 
  font-size: 20px; 
  font-weight: 600;
}
#custom_area .custom_title > span:last-child {
  float: right; 
  font-size: 15px; 
  color: #aeaeae;
}

#custom_area .custom_list:after {
  clear: both;
}

#custom_area .custom_list li {
  clear:both; 
  line-height:30px;
}

#custom_area .custom_list li > span:first-child {
  float: left;
}

#custom_area .custom_list li > span:last-child {
  float: right;
}

.custom_title a:hover, 
.custom_title a:active, 
.custom_title a:focus, 
.custom_title a:visited {
  color: #666;
}

#custom_area .customtelarea { 
  padding-left: 0px !important; 
  padding-right: 0px !important;
  margin-top: 5px;
}

#custom_area .telareabox { 
  display: block; 
  width: 100%; 
  height: 100%; 
  background-color: #ffffff;
  border: 1px solid #efefef; 
  text-align: center; 
  color: #607D8B /*#fff*/;
  padding: 22px;
}

#custom_area .telareabox li:first-child {
  font-size: 36px;
}

#custom_area .telareabox li:nth-child(2) {
  font-size: 40px;
}

#custom_area .telareabox li:last-child {
  font-size: 16px;
}

#only { padding:20px 15px 20px 17px; min-height: 406px; margin: 0 -15px; }

.pdb100 {
    padding-bottom: 100px !important;
}
.pdt90 {
    padding-top: 90px !important;
}  
.custom_list a {
  color: #666;
}


/* -------------------------------------------------------------------- */
/* COMPANY ARTICLE
/* -------------------------------------------------------------------- */

.sub_visual { background-size: cover; background-repeat: no-repeat; background-position: center top; }
.sub_visual { height: 360px; position: relative; }

.vis51 { background-image: url(/images/sub/sub_visual_6_n.jpg); }  
.vis51 h2 { font-size: 52px; color: #fff; text-align: center; line-height: 360px; position: absolute; width: 100%; font-weight: 800; }
.vis51 p { color: #fff; text-align: center; line-height: 264px; position: absolute; width: 100%; padding-top: 6rem; margin: 0; }

#company { position: absolute; bottom: 0; left: 0; border-bottom: 2px solid #e9e9e5; background: #fff;  width: 100%; }
#company { height: 80px; box-sizing: border-box; }
#company ul { font-size: 0; text-align: center; width: 100%; height: 100%; margin: 0 auto;}
#company ul li { display: inline-block; overflow: hidden; }
#company ul li a { display: block; position: relative; padding:0px 42px; box-sizing: border-box; font-size: 20px; font-weight: 100; line-height: 80px; color:#666; text-decoration:none; }
#company ul li a:hover { color: #d11212; }
#company ul li a::after { display: block; content:''; position: absolute; bottom: 0px; width: 0; height: 3px; background: #d11212; left: 50%; transition: all 0.5s ease; }
#company ul li:hover a::after { width: 100%; left: 0;  }
#company ul li a.current {color: #d11212; }
#company ul li a.current::after { width: 100%; left: 0; } 
#company.subOn { position: fixed; top: 0; z-index: 999;}


/* -------------------------------------------------------------------- */
/* SLOGAN AREA
/* -------------------------------------------------------------------- */

#slogan {
    /* float:left; */
    width:100%;
    background: #f6f7f8;
    padding:5rem 0;
}


.box_head_align{text-align:center; margin-top:30px;}
.web_design_head{color:#1f86c5; font:normal 48px advent; text-transform:uppercase;}
.blue_head_text{ background:linear-gradient(to top, #fff, #fff, #fff 67%, #1f86c5 67%, #1f86c5, #1f86c5) repeat scroll 0 0 #fff; color:#7d7d7d; font-size:13px; border:1px solid #1f86c5; padding:15px 10px; box-shadow: 5px 5px rgba(193,193,193,.75); min-height:345px; margin-bottom:20px;
    
}
.img_text{font-size:23px; line-height:24px; color:#fff;}
.img_text2{font-size:13px; color:#fff;}
.img_content{text-align:justify; margin-top:10px;}
.img-round{
  margin:0 auto;
  font-size:60px !important;
  padding:25px;
  color:#1f86c5;
  -webkit-border-radius: 54px 55px 55px 54px/54px 54px 55px 55px;
  -moz-border-radius: 54px 55px 55px 54px/54px 54px 55px 55px;
  border-radius: 54px 55px 55px 54px/54px 54px 55px 55px;
  background-color: #fff;
  border: solid 1px #1f86c5;
  }
.div_margin
{
  margin-top:25px;
}
/******************web design box close******/

/******************portfolio slider*************/

.portfolio_bg{text-align:center; margin-top:30px; background:#eeeeee; padding:25px 15px;}
.portfolio_content{color:#7c7c7c;}
.rounded_box{ text-align:center; margin:5px auto;
  /*-webkit-border-radius: 5px; padding:25px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: rgba(251,174,23,0);
  border: solid 3px #e5e5e5;*/
}
.rouded_text{ font-size:24px; color:#fff; margin-top:20px;}
@media (min-width:768px) and (max-width:1920px) {
.cut_box1{
  background-color: #eee;
  background-image: -webkit-linear-gradient(-134deg, #f6f7f8 6%, #1277b5 6%, #2388c6);
  background-image: -moz-linear-gradient(-134deg, #f6f7f8 6%, #1277b5 6%, #2388c6);
  background-image: -o-linear-gradient(-134deg, #f6f7f8 6%, #1277b5 6%, #2388c6);
  background-image: -ms-linear-gradient(-134deg, #f6f7f8 6%, #1277b5 6%, #2388c6);
  background-image: linear-gradient(-134deg, #f6f7f8 6%, #1277b5 6%, #2388c6);
 color:#7d7d7d; font-size:13px; border:0px solid #1f86c5; padding:15px 10px; min-height:320px; margin-bottom:20px; padding-top:50px; text-align:center;
  
}
.cut_box1 i{color:#fff; border:4px solid #fff; padding:40px; border-radius:12px;}



.cut_box2{ 
background-color: #eee;
  background-image: -webkit-linear-gradient(-134deg, #f6f7f8 6%, #3090ca 6%, #3191ca 6%, #45a1d9);
  background-image: -moz-linear-gradient(-134deg, #f6f7f8 6%, #3090ca 6%, #3191ca 6%, #45a1d9);
  background-image: -o-linear-gradient(-134deg, #f6f7f8 6%, #3090ca 6%, #3191ca 6%, #45a1d9);
  background-image: -ms-linear-gradient(-134deg, #f6f7f8 6%, #3090ca 6%, #3191ca 6%, #45a1d9);
  background-image: linear-gradient(-134deg, #f6f7f8 6%, #3090ca 6%, #3191ca 6%, #45a1d9);
 color:#7d7d7d; font-size:13px; border:0px solid #1f86c5; padding:15px 10px; min-height:320px; margin-bottom:20px; padding-top:50px; text-align:center;
  
}
.cut_box2 i{color:#fff; border:4px solid #fff; padding:40px; border-radius:12px;}
.cut_box3{ 
background-color: #eee;
  background-image: -webkit-linear-gradient(-134deg, #f6f7f8 6%, #5ab4eb 6%, #59b3ea 6%, #46a0d9);
  background-image: -moz-linear-gradient(-134deg, #f6f7f8 6%, #5ab4eb 6%, #59b3ea 6%, #46a0d9);
  background-image: -o-linear-gradient(-134deg, #f6f7f8 6%, #5ab4eb 6%, #59b3ea 6%, #46a0d9);
  background-image: -ms-linear-gradient(-134deg, #f6f7f8 6%, #5ab4eb 6%, #59b3ea 6%, #46a0d9);
  background-image: linear-gradient(-134deg, #f6f7f8 6%, #5ab4eb 6%, #59b3ea 6%, #46a0d9);
 color:#7d7d7d; font-size:13px; border:0px solid #1f86c5; padding:15px 10px; min-height:320px; margin-bottom:20px; padding-top:50px; text-align:center;
  
}
.cut_box3 i{color:#fff; border:4px solid #fff; padding:40px; border-radius:12px;}
.cut_box4{ 
background-color: #eee;
  background-image: -webkit-linear-gradient(-134deg, #fff 6%, #59b3ea 6%, #5ab4ea 6%, #72c6f9);
  background-image: -moz-linear-gradient(-134deg, #fff 6%, #59b3ea 6%, #5ab4ea 6%, #72c6f9);
  background-image: -o-linear-gradient(-134deg, #fff 6%, #59b3ea 6%, #5ab4ea 6%, #72c6f9);
  background-image: -ms-linear-gradient(-134deg, #fff 6%, #59b3ea 6%, #5ab4ea 6%, #72c6f9);
  background-image: linear-gradient(-134deg, #fff 6%, #59b3ea 6%, #5ab4ea 6%, #72c6f9);
 color:#7d7d7d; font-size:13px; border:0px solid #1f86c5; padding:15px 10px; min-height:320px; margin-bottom:20px; padding-top:50px; text-align:center;
  
}
.cut_box4 i{color:#fff; border:4px solid #fff; padding:40px; border-radius:12px;}
}
.cut_box_main{ border:1px solid red;}




/******************portfolio slider close*************/

@media (max-width:768px) {
  .request_top{border:none !important; background:none !important; margin-top:15px;}
.navbar-bg{background:#1f86c5; width:100%;}
.navbar-bg a{color:#fff;}
.navbar-bg a:hover{color:#1f86c5;}

.cut_box1a{
background-color: #eee;
  background-image: -webkit-linear-gradient(-134deg, #fff 6%, #1277b5 6%, #2388c6);
  background-image: -moz-linear-gradient(-134deg, #fff 6%, #1277b5 6%, #2388c6);
  background-image: -o-linear-gradient(-134deg, #fff 6%, #1277b5 6%, #2388c6);
  background-image: -ms-linear-gradient(-134deg, #fff 6%, #1277b5 6%, #2388c6);
  background-image: linear-gradient(-134deg, #fff 6%, #1277b5 6%, #2388c6);
 color:#7d7d7d; font-size:13px; border:0px solid #1f86c5; padding:15px 10px; min-height:320px; margin-bottom:20px; padding-top:50px; text-align:center;
  
}
.cut_box1a i{color:#fff; border:4px solid #fff; padding:40px; border-radius:12px;}


.cut_box2a{ 
background-color: #eee;
  background-image: -webkit-linear-gradient(-134deg, #fff 6%, #3090ca 6%, #3191ca 6%, #45a1d9);
  background-image: -moz-linear-gradient(-134deg, #fff 6%, #3090ca 6%, #3191ca 6%, #45a1d9);
  background-image: -o-linear-gradient(-134deg, #fff 6%, #3090ca 6%, #3191ca 6%, #45a1d9);
  background-image: -ms-linear-gradient(-134deg, #fff 6%, #3090ca 6%, #3191ca 6%, #45a1d9);
  background-image: linear-gradient(-134deg, #fff 6%, #3090ca 6%, #3191ca 6%, #45a1d9);
 color:#7d7d7d; font-size:13px; border:0px solid #1f86c5; padding:15px 10px; min-height:320px; margin-bottom:20px; padding-top:50px; text-align:center;
  
}
.cut_box2a i{color:#fff; border:4px solid #fff; padding:40px; border-radius:12px;}
.cut_box3a{ 
background-color: #eee;
  background-image: -webkit-linear-gradient(-134deg, #fff 6%, #5ab4eb 6%, #59b3ea 6%, #46a0d9);
  background-image: -moz-linear-gradient(-134deg, #fff 6%, #5ab4eb 6%, #59b3ea 6%, #46a0d9);
  background-image: -o-linear-gradient(-134deg, #fff 6%, #5ab4eb 6%, #59b3ea 6%, #46a0d9);
  background-image: -ms-linear-gradient(-134deg, #fff 6%, #5ab4eb 6%, #59b3ea 6%, #46a0d9);
  background-image: linear-gradient(-134deg, #fff 6%, #5ab4eb 6%, #59b3ea 6%, #46a0d9);
 color:#7d7d7d; font-size:13px; border:0px solid #1f86c5; padding:15px 10px; min-height:320px; margin-bottom:20px; padding-top:50px; text-align:center;
  
}
.cut_box3a i{color:#fff; border:4px solid #fff; padding:40px; border-radius:12px;}
.cut_box4a{ 
background-color: #eee;
  background-image: -webkit-linear-gradient(-134deg, #fff 6%, #59b3ea 6%, #5ab4ea 6%, #72c6f9);
  background-image: -moz-linear-gradient(-134deg, #fff 6%, #59b3ea 6%, #5ab4ea 6%, #72c6f9);
  background-image: -o-linear-gradient(-134deg, #fff 6%, #59b3ea 6%, #5ab4ea 6%, #72c6f9);
  background-image: -ms-linear-gradient(-134deg, #fff 6%, #59b3ea 6%, #5ab4ea 6%, #72c6f9);
  background-image: linear-gradient(-134deg, #fff 6%, #59b3ea 6%, #5ab4ea 6%, #72c6f9);
 color:#7d7d7d; font-size:13px; border:0px solid #1f86c5; padding:15px 10px; min-height:320px; margin-bottom:20px; padding-top:50px; text-align:center;
  
}
.cut_box4a i{color:#fff; border:4px solid #fff; padding:40px; border-radius:12px;}

  #home-banner {
    margin-top: 50px
  }

}


/* -------------------------------------------------------------------- */
/*  PHILOSOPHY SECTION
/* -------------------------------------------------------------------- */

section#philosophy {
    /* float:left; */
    width:100%;
    background: #fff; 
    padding:5rem 0 1rem 0;
}

#philosophy .sub_title{margin-bottom:4.5rem}
#philosophy .sub_title h2{font-size:36px; color:#333; font-weight:normal; margin-bottom:10px;}
#philosophy .sub_title p{font-size:13px; color:#555; }

#philosophy .sub_title2{ margin-bottom:4.5rem; text-align:center;}
#philosophy .sub_title2 h2{font-size:40px; color:#333; font-weight:normal; margin-bottom:10px; text-align:center; }
#philosophy .sub_title2 p{font-size:17px; color:#6b6b6b; line-height:24px; }
#philosophy .sub_title2 p.p-img { padding:2rem 0; }


/* -------------------------------------------------------------------- */
/*  ORGAN SECTION
/* -------------------------------------------------------------------- */

section#organ {
    /* float:left; */
    width:100%;
    background: #fff; 
    padding:0 0 1rem 0;
}

#organ .sub_title{margin-bottom:4.5rem}
#organ .sub_title h2{font-size:36px; color:#333; font-weight:normal; margin-bottom:10px;}
#organ .sub_title p{font-size:13px; color:#555; }

#organ .sub_title2{ margin-bottom:4.5rem; text-align:center;}
#organ .sub_title2 h2{font-size:40px; color:#333; font-weight:normal; margin-bottom:10px; text-align:center; }
#organ .sub_title2 p{font-size:17px; color:#6b6b6b; line-height:24px; }
#organ .sub_title2 p.p-img { padding:2rem 0; }


/* -------------------------------------------------------------------- */
/*  LOCATION SECTION
/* -------------------------------------------------------------------- */

.vis14 { background-image: url(/images/sub/sub_visual_6_n.jpg); }  
.vis14 h2 { font-size: 52px; color: #fff; text-align: center; line-height: 360px; position: absolute; width: 100%; font-weight: 800; }
.vis14 p { color: #fff; text-align: center; line-height: 264px; position: absolute; width: 100%; padding-top: 6rem; margin: 0; }

.road_info {
    clear: both;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: #f6f6f6;
    margin: 20px 0 50px 0;
    font-size: 18px;
}
ul.road_info_add {
    position: relative;
    clear: both;
    padding: 20px 20px;
    overflow: hidden;
    margin-bottom: 0;
}

ul.road_info_add i { color: #3a99dd; }

ul.road_info_add > li {
    width: 25%;
    float: left;
}
ul.road_info_add > li:first-child {
    width: 50%;
}
ul.road_info_add li div {
    display: flex;
    margin-top: 8px;
    padding: 0;
    line-height: 30px;
}
ul.road_info_add li span {
    padding: 0 5px;
}

@media (max-width:991px) {
    ul.road_info_add > li { display: contents; }
}

/* -------------------------------------------------------------------- */
/* BUSINESS ARTICLE
/* -------------------------------------------------------------------- */

.vis51 { background-image: url(/images/sub/sub_visual_6_n.jpg); }  
.vis51 h2 { font-size: 52px; color: #fff; text-align: center; line-height: 360px; position: absolute; width: 100%; font-weight: 800; }
.vis51 p { color: #fff; text-align: center; line-height: 264px; position: absolute; width: 100%; padding-top: 6rem; margin: 0; }

#business { position: absolute; bottom: 0; left: 0; border-bottom: 2px solid #e9e9e5; background: #fff;  width: 100%; }
#business { height: 80px; box-sizing: border-box; }
#business ul { font-size: 0; text-align: center; width: 100%; height: 100%; margin: 0 auto;}
#business ul li { display: inline-block; overflow: hidden; }
#business ul li a { display: block; position: relative; padding:0px 42px; box-sizing: border-box; font-size: 20px; font-weight: 100; line-height: 80px; color:#666; text-decoration:none; }
#business ul li a:hover { color: #d11212; }
#business ul li a::after { display: block; content:''; position: absolute; bottom: 0px; width: 0; height: 3px; background: #d11212; left: 50%; transition: all 0.5s ease; }
#business ul li:hover a::after { width: 100%; left: 0;  }
#business ul li a.current {color: #d11212; }
#business ul li a.current::after { width: 100%; left: 0; } 
#business.subOn { position: fixed; top: 0; z-index: 999;}



/* -------------------------------------------------------------------- */
/* JOININFO SECTION
/* -------------------------------------------------------------------- */

section#joininfo {
    /* float:left; */
    width:100%;
    background: #fff;  /* fallback for old browsers */
    padding:3.5rem 1.5rem 7.5rem 1.5rem;
}
.person .TopTitle {
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 30px;
    color: #C94D65;
}
.person dl {
    margin-bottom: 20px;
    position: relative;
}
.person dt {
    line-height: 1.5em;
    color: #555;
    font-size: 16px;
    padding-bottom: 5px;
}
.person dd {
    line-height: 25px;
    font-size: 15px;
    /* padding-left: 20px; */
}
.person dd.pl {
    padding-left: 45px;
}



/* -------------------------------------------------------------------- */
/* MARKETING SECTION
/* -------------------------------------------------------------------- */

section#marketing {
    /* float:left; */
    width:100%;
    background: #fff;  /* fallback for old browsers */
    padding:3.5rem 1.5rem 25.5rem 1.5rem;
}



/* -------------------------------------------------------------------- */
/* MEMBER SECTION
/* -------------------------------------------------------------------- */

section#member {
    /* float:left; */
    width:100%;
    background: #fff;  /* fallback for old browsers */
    padding:3.5rem 1.5rem 7.5rem 1.5rem;
}
.person2 dd {
    padding-left: 0;
}
.person h2 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: normal;
    color: #C94D65;
    padding-top: 15px;
}


/* -------------------------------------------------------------------- */
/* OFFER SECTION
/* -------------------------------------------------------------------- */

section#offer {
    /* float:left; */
    width:100%;
    background: #fff;  /* fallback for old browsers */
    padding:3.5rem 1.5rem 7.5rem 1.5rem;
}
.person dt.tit {
    font-size: 18px;
    font-weight: normal;
    color: #333;
    padding-top: 15px;
}



/* -------------------------------------------------------------------- */
/* INFORMATION ARTICLE
/* -------------------------------------------------------------------- */

#information { position: absolute; bottom: 0; left: 0; border-bottom: 2px solid #e9e9e5; background: #fff;  width: 100%; }
#information { height: 80px; box-sizing: border-box; }
#information ul { font-size: 0; text-align: center; width: 100%; height: 100%; margin: 0 auto;}
#information ul li { display: inline-block; overflow: hidden; }
#information ul li a { display: block; position: relative; padding:0px 42px; box-sizing: border-box; font-size: 20px; font-weight: 100; line-height: 80px; color:#666; text-decoration:none; }
#information ul li a:hover { color: #d11212; }
#information ul li a::after { display: block; content:''; position: absolute; bottom: 0px; width: 0; height: 3px; background: #d11212; left: 50%; transition: all 0.5s ease; }
#information ul li:hover a::after { width: 100%; left: 0;  }
#information ul li a.current {color: #d11212; }
#information ul li a.current::after { width: 100%; left: 0; } 
#information.subOn { position: fixed; top: 0; z-index: 999;}



/* -------------------------------------------------------------------- */
/* PRIVACY SECTION
/* -------------------------------------------------------------------- */

section#privacy {
    /* float:left; */
    width:100%;
    background: #fff;  /* fallback for old browsers */
    padding:3.5rem 1.5rem 7.5rem 1.5rem;
}
#privacy .sub_title{margin-bottom:4.5rem}
#privacy .sub_title h2{font-size:36px; color:#333; font-weight:normal; margin-bottom:10px;}
#privacy .sub_title p{font-size:13px; color:#555; }

#privacy table {margin:0;padding:0;word-break:break-all;border-collapse:collapse; }
#privacy caption { position: absolute; visibility: hidden; width: 0; height: 0; overflow: hidden; font-size: 0; }

#privacy .tbl-ty1{}
#privacy .tbl-ty1 th,
#privacy .tbl-ty1 td{border-left:1px solid #e9e9e9; padding:13px 0 15px 0;}
#privacy .tbl-ty1 thead th{font-size:13px; color:#fff; background-color:#6a7d94; text-align:center; padding:15px 0; font-weight:normal;}
#privacy .tbl-ty1 tr th:first-child{border-left:0;}
#privacy .tbl-ty1 tr td:first-child{border-left:0;}
#privacy .tbl-ty1 td{color:#333745; border-bottom:1px solid #e9e9e9; padding-left:13px;}
#privacy .tbl-ty1 td.tc{padding-left:0;}



/* -------------------------------------------------------------------- */
/* EMAILINFO SECTION
/* -------------------------------------------------------------------- */

section#emailinfo {
    /* float:left; */
    width:100%;
    background: #fff;  /* fallback for old browsers */
    /* padding:3.5rem 1.5rem 7.5rem 1.5rem; */
}
#emailinfo .sub_title{margin-bottom:4.5rem}
#emailinfo .sub_title h2{font-size:36px; color:#333; font-weight:normal; margin-bottom:10px;}
#emailinfo .sub_title p{font-size:13px; color:#555; }

#emailinfo .contsbox { font-size: 14px; /* padding: 40px 20px; */ }
#emailinfo .email_contain { background-color: #fff; border: 1px solid #d4d4d4; margin-top: 20px; }
#emailinfo .email_contain .tit { overflow: hidden; height: 85px; background: #fff; border-bottom: 1px solid #e5e5e5; }
#emailinfo .email_contain .tit h2 { font-size: 20px; letter-spacing: -2px; color: #333; padding: 35px 0 0 100px; background: url(/images/sub/email_img01.png) 30px 10px no-repeat; height: 100%; }
#emailinfo .email_contain .tit img{ padding-top:10px; }
#emailinfo .email_contain .con p{ text-align:center; }
#emailinfo .email_contain .con .text_in { margin:30px 20px; }
#emailinfo .email_contain .con .text_in .text{}
#emailinfo .email_contain .con .text_in .text li.first { margin-bottom:15px; border-bottom:1px solid #04305d; padding-bottom:10px; }
#emailinfo .email_contain .con .text_in2 { margin:30px 20px; border:1px solid #d4d4d4; background:#fcfeff; padding:15px; }
#emailinfo .email_contain .con .text_in2 .text li.first { margin-bottom:15px; }
#emailinfo .txt_b { font-weight: bold; }
#emailinfo .txt1 { color: #2a9db9; font-weight: bold; }



/* -------------------------------------------------------------------- */
/* SPONSOR SECTION
/* -------------------------------------------------------------------- */

section#sponsor {
    /* float:left; */
    width:100%;
    background: #fff;  /* fallback for old browsers */
    padding:3.5rem 1.5rem 7.5rem 1.5rem;
}
#sponsor .sub_title{margin-bottom:4.5rem}
#sponsor .sub_title h2{font-size:36px; color:#333; font-weight:normal; margin-bottom:10px;}
#sponsor .sub_title p{font-size:13px; color:#555; }

#sponsor table {margin:0;padding:0;word-break:break-all;border-collapse:collapse; }
#sponsor caption { position: absolute; visibility: hidden; width: 0; height: 0; overflow: hidden; font-size: 0; }
#sponsor td { font-size: 12px; }

.bonusAverage { width: 100%; }
.bonusAverage h3 { font-size: 20px; margin-bottom: 10px; color: #333; font-weight: normal; }
.staticTb { width: 100%; border-top: 1px solid #494949; border-bottom: 1px solid #ddd; text-align: center; }
.staticTb th { background: #f9f9f9; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 20px 5px; line-height: 20px; color: #333; font-weight: normal; }
.staticTb td { border-top: 1px solid #ddd; border-right: 1px solid #ddd; color: #777; padding: 10px 25px; }
.staticTb tr th:last-child, .staticTb tr td:last-child { border-right: 0; }



/* -------------------------------------------------------------------- */
/* CUSTOMER ARTICLE
/* -------------------------------------------------------------------- */

.sub_visual.vis41 { background-image: url(/images/sub/sub_visual_4_n.jpg); }  
.sub_visual.vis41 h2 { font-size: 52px; color: #fff; text-align: center; line-height: 100%; position: absolute; width: 100%; font-weight: 800; padding-top: 8rem; }
.sub_visual.vis41 p { color: #fff; text-align: center; line-height: 100%; position: absolute; width: 100%; padding-top: 12rem; }

#customer { position: absolute; bottom: 0; left: 0; border-bottom: 2px solid #e9e9e5; background: #fff;  width: 100%; }
#customer { height: 80px; box-sizing: border-box; }
#customer ul { font-size: 0; text-align: center; width: 100%; height: 100%; margin: 0 auto;}
#customer ul li { display: inline-block; overflow: hidden; }
#customer ul li a { display: block; position: relative; padding:0px 42px; box-sizing: border-box; font-size: 20px; font-weight: 100; line-height: 80px; color:#666; text-decoration:none; }
#customer ul li a:hover { color: #d11212; }
#customer ul li a::after { display: block; content:''; position: absolute; bottom: 0px; width: 0; height: 3px; background: #d11212; left: 50%; transition: all 0.5s ease; }
#customer ul li:hover a::after { width: 100%; left: 0;  }
#customer ul li a.current {color: #d11212; }
#customer ul li a.current::after { width: 100%; left: 0; } 
#customer.subOn { position: fixed; top: 0; z-index: 999;}


/* -------------------------------------------------------------------- */
/* PRODUCT ARTICLE
/* -------------------------------------------------------------------- */

.sub_visual.vis31 { background-image: url(/images/sub/sub_visual_3_n.jpg); }  
.sub_visual.vis31 h2 { font-size: 52px; color: #fff; text-align: center; line-height: 100%; position: absolute; width: 100%; font-weight: 800; padding-top: 9rem; }
.sub_visual.vis31 p { color: #fff; text-align: center; line-height: 100%; position: absolute; width: 100%; padding-top: 13rem; }

#prodlist { position: absolute; bottom: 0; left: 0; border-bottom: 2px solid #e9e9e5; background: #fff;  width: 100%; }
#prodlist { height: 80px; box-sizing: border-box; }
#prodlist ul { font-size: 0; text-align: center; width: 100%; height: 100%; margin: 0 auto;}
#prodlist ul li { display: inline-block; overflow: hidden; }
#prodlist ul li a { display: block; position: relative; padding:0px 42px; box-sizing: border-box; font-size: 20px; font-weight: 100; line-height: 80px; color:#666; text-decoration:none; }
#prodlist ul li a:hover { color: #d11212; }
#prodlist ul li a::after { display: block; content:''; position: absolute; bottom: 0px; width: 0; height: 3px; background: #d11212; left: 50%; transition: all 0.5s ease; }
#prodlist ul li:hover a::after { width: 100%; left: 0;  }
#prodlist ul li a.current {color: #d11212; }
#prodlist ul li a.current::after { width: 100%; left: 0; } 
#prodlist.subOn { position: fixed; top: 0; z-index: 999;}



/* -------------------------------------------------------------------- */
/* PRODINFO SECTION
/* -------------------------------------------------------------------- */

section#prodinfo {
    /* float:left; */
    width:100%;
    background: #fff;  /* fallback for old browsers */
    padding: 2.5rem 1.5rem;
}
#prodinfo .sub_title{margin-bottom:4.5rem}
#prodinfo .sub_title h2{font-size:36px; color:#333; font-weight:normal; margin-bottom:10px;}
#prodinfo .sub_title p{font-size:13px; color:#555; }

#prodinfo table {margin:0;padding:0;word-break:break-all;border-collapse:collapse; }
#prodinfo caption { position: absolute; visibility: hidden; width: 0; height: 0; overflow: hidden; font-size: 0; }
/* #prodinfo td { font-size: 1rem; } */

.bonusAverage { width: 100%; }
.bonusAverage h3 { font-size: 20px; margin-bottom: 10px; color: #333; font-weight: normal; }
.staticTb { width: 100%; border-top: 1px solid #494949; border-bottom: 1px solid #ddd; text-align: center; }
.staticTb th { background: #f9f9f9; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 20px 5px; line-height: 20px; color: #333; font-weight: normal; }
.staticTb td { border-top: 1px solid #ddd; border-right: 1px solid #ddd; color: #777; padding: 10px 25px; }
.staticTb tr th:last-child, .staticTb tr td:last-child { border-right: 0; }


/********************* Shopping -7 **********************/
.product-grid7{position:relative;z-index:1;margin-bottom:30px;}
/* .product-grid7:before{content:"";height:81%;width:100%;background:#fff;border:1px solid #022640;opacity:0;position:absolute;top:0;left:0;z-index:-1;transition:all .5s ease 0s} */
.product-grid7:hover:before{opacity:1;height:100%;}
.product-grid7:hover{box-shadow: 3px 0px 15px rgba(67, 70, 88, 0.5); transition:all .3s}
.product-grid7 .product-image7{border:1px solid rgba(0,0,0,.1);overflow:hidden;perspective:1500px;position:relative;transition:all .3s ease 0s; height:420px; display: table-cell; vertical-align: middle; }
.product-grid7 .product-image7 a{display:block}
.product-grid7 .product-image7 img{width:100%;height:auto}
.product-grid7 .pic-1{opacity:1;transition:all .5s ease-out 0s}
.product-grid7 .pic-2{opacity:0;transform:rotateY(-90deg);position:absolute;top:0;left:0;transition:all .5s ease-out 0s}
/* .product-grid7:hover .pic-2{opacity:1;transform:rotateY(0)} */
.product-grid7:hover .product-image7 img{transform:scale(1.1);}
.product-grid7 .social{padding:0;margin:0;list-style:none;position:absolute;bottom:3px;left:-25%;z-index:1;transition:all .5s ease 0s}
.product-grid7:hover .social{left:17px}
.product-grid7 .social li a{color:#fff;background-color:#333;font-size:16px;line-height:40px;text-align:center;height:40px;width:40px;margin:15px 0;border-radius:50%;display:block;transition:all .5s ease-in-out}
.product-grid7 .social li a:hover{color:#fff;background-color:#78e08f}
.product-grid7 .product-new-label{color:#fff;background-color:#333;padding:5px 10px;border-radius:5px;display:block;position:absolute;top:10px;left:10px}
.product-grid7 .product-content{text-align:center;padding:20px 0; /* border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1); */ overflow:hidden; /* background-color:#f6f6f6; */}
.product-grid7 .title{font-size:20px;font-weight:500;text-transform:capitalize;margin:0 0 5px;transition:all .3s ease 0s}
.product-grid7 .title a{ /* color:#3d3d3d; */ }
.product-grid7 .title a:hover{ color: #666; text-decoration: none; } 
.product-grid7 .stitle{min-height: 20px; font-size:15px; font-weight:500; line-height:20px; text-transform:capitalize;margin:0 0 10px;transition:all .3s ease 0s}
.product-grid7 .stitle a:hover{ color: #666; text-decoration: none; }
.product-grid7 .rating{color:#78e08f;font-size:12px;padding:0;margin:0 0 10px;list-style:none}
.product-grid7 .price{color:#333;font-size:16px;font-weight:400;margin-bottom:8px;text-align:center;transition:all .3s}
.product-grid7 .price span{color:#999;font-size:14px;font-weight:400;/*text-decoration:line-through;*/margin-left:7px;display:inline-block}



/* -------------------------------------------------------------------- */
/* PRODCART SECTION
/* -------------------------------------------------------------------- */

section.prodcart {
    /* padding: 2.5rem 1.5rem; */
}

.prodcart a:hover {
    color: #666;
    text-decoration: none;
}



/* -------------------------------------------------------------------- */
/* MBRREGI SECTION
/* -------------------------------------------------------------------- */

.layer-wrap {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
.layer-wrap:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -.25em;
}
.pop-layer {
    display: inline-block;
    vertical-align: middle;
    width: 350px;
    height: auto;
    background-color: #fff;
    border: 0px solid #3571B5;
    z-index: 10;
}

.pop-layer .pop-container {
    padding: 0;
}
.pop-layer .pop-head {
    position: relative;
    width: 100%;
    height: 60px;
    color: #fff;
    font-size: 18px;
    padding: 20px;
    background-color: #3571B5;   
    text-align: left; 
}
.pop-head .msgtitle {
    position: absolute;
}
.pop-head .close {
    margin-top: 4px;
    padding: 5px;
    border: none;
    color:white !important;
    text-align: center;
    font-size: 30px;
    opacity: 0.5;
}
.pop-layer .pop-body {
    width: 100%;
    font-size: 18px;
    margin: 10px 0 20px 0;
    padding: 15px;
    text-align: center;
}
.pop-layer .pop-bottom {
    width: 100%;
    height: 66px;
    padding: 15px 0 15px;
    border-top: 1px solid #ddd;
    text-align: center;
  /*  border:1px solid #efefef; */
}
.pop-bottom a {
    display: inline-block;
    height: 35px;
    padding: 3px 15px 27px 15px;
    font-size: 16px;
    color: #fff;
    line-height: 25px;  
}

a.confirm {
    /* border: 1px solid #304a8a; */
    background-color: #3f5a9d;
} 

a.btn-layerClose {
    /* border: 1px solid rgba(153,153,153,1); */
    background-color: rgba(153,153,153,1);
    margin-left: 10px;
} 

.confirm-none {
    background-color: #e1e1e1 !important;
    border-color: #e1e1e1 !important;
    pointer-events: none;
    cursor: default;
} 

#choiceLayer .left-title {
  display: block;
  text-align: left;
  font-size: 16px;
  color: #888;
  padding-left: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  margin-top: 7px;
  float: left;
  /* width: 25%; */
}

#choiceLayer input {
  background-color: #fff;
}



/* -------------------------------------------------------------------- */
/* MEMBERSHIP ARTICLE
/* -------------------------------------------------------------------- */

.membership { background-size: cover; background-repeat: no-repeat; background-position: center top; }
.membership { height: 460px; position: relative; }
.membership.vis3 { background-image: url(/images/sub/sub_visual_3.jpg); }  
.membership h2 { font-size: 52px; color: #fff; text-align: center; line-height: 375px; position: absolute; width: 100%; font-weight: 800; /* padding-top: 25px; */}



/* -------------------------------------------------------------------- */
/* ESTIMATE SECTION
/* -------------------------------------------------------------------- */

.sub_visual.est41 { background-image: url(/images/sub/com_img01_n.jpg); position: relative; background-position-y: bottom; }
.sub_visual.est41 h2 { 
    font-size: 4rem; 
    color: #fff; 
    text-align: center; 
    line-height: 100%; 
    position: absolute; 
    width: 100%; 
 /*    font-weight: 800; */
    padding-top: 9.5rem; 
    text-shadow: 1px 1px black;
}
.est41 p { color: #fff; text-align: center; line-height: 264px; position: absolute; width: 100%; padding-top: 6rem; margin: 0; }

#estimate { width: 100%; }

.custom-select { border-radius: 0; }

.input-group-text { border-radius: 0; }
.custom-file { height: calc(2.25rem + 9px); }
.custom-file-input { height: calc(2.25rem + 9px); }
.custom-file-label { height: calc(2.25rem + 9px);  padding: 0.675rem 0.75rem; color: #aaa; border-radius: 0; }
.custom-file-label::after { display: none; }


.form-group i {
    z-index: 5;
    font-size: 20px;
}

.form-control-feedback {
  top: 29px;
}

.form-control-feedback {
  top: 0;
}

.form-control-feedback {
  width: 50px;
  height: 40px;
  line-height: 40px !important;
  top: 0;
  right: 18px;
  color: #777777;
  position: absolute;
  text-align: center;
  margin-top: 0;
}

.form-control-feedback {
  height: 48px;
  top: 0px;
}

.input-group input {margin-left: 0px !important;padding-right: 40px;}
.form-group i { z-index: 5; font-size: 20px; }

.form-control { margin-bottom: 0px !important; padding:13px; font-size: 1.0rem !important; }
.search-btn .form-control { padding: 5px; }

.form-group { display: flex; }
.form-group label { font-size: 1.1rem !important; display: inline-block; width: 80px; margin-bottom: 0px; }

.agreeCheck {
    width: 16px;
    height: 16px;
}

#personModal .modal-dialog {
    max-width: 59em;
    height: 40em;
    margin: 10rem auto;
    overflow: auto;
}
#personModal .modal-body {
    padding: 3rem;
}

#viewbtn { height: 30px; padding: 1px 15px 5px 15px; }

@media (max-width: 991px) {

    .form-group { display: block; width: 100%; line-height: inherit; }

    #personModal { top: 0; }

    #personModal .modal-dialog {
        max-width: 90%;
        height: 35em;
        margin: 10rem auto;
        overflow: auto;
    }

}



/* -------------------------------------------------------------------- */
/* PORTFOLIO SECTION
/* -------------------------------------------------------------------- */

#portfolio * {
  z-index: 2;
}

#portfolio .portfolio-item {
 /* right: 0; */
  margin: 0 0 15px;
}

#portfolio .portfolio-item .portfolio-link {
  position: relative;
  display: block;
  max-width: 400px;
  margin: 0 auto;
  cursor: pointer;
  border:1px solid #ddd;    
}

#portfolio i {
    font-size: 35px;    
}   

#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all .5s ease;
  opacity: 0;
  background: rgba(254,209,54,.9);
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
  opacity: 1;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  background-color: rgba(62,130,193,0.7);
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  font-size: 20px;
  position: absolute;
  top: 50%;
  width: 100%;
  height: 20px;
  margin-top: -12px;
  text-align: center;
  color: #fff;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
  margin-top: -5px;
}

#portfolio .portfolio-caption {
  /* max-width: 400px; */
  margin: 0 auto;
  padding: 12px;
  text-align: center;
  background-color: #fff;
}


#portfolio .prodTitle {
    text-align:left; 
    font-size:16px; 
    font-weight:normal; 
   /* padding:15px 0 0 0; */
    color:#1d1d1d; 
    line-height:24px; 
    letter-spacing:0.025em;
}

#portfolio .prodPrice {
    text-align:left;
     font-size:14px; 
     font-weight:normal; 
     color:#494949; 
     line-height:24px; 
     letter-spacing:0.025em;
}


#portfolio .portfolio-link img {
    -webkit-transform:scale(0.9);
    -moz-transform:scale(0.9);
    -ms-transform:scale(0.9); 
    -o-transform:scale(0.9);  
    transform:scale(0.9);
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
    transition:.3s;
}
#portfolio .portfolio-link:hover img {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1);   
    -o-transform:scale(1);
    transform:scale(1);
}


/* py-5 */
.subtit { border: 1px solid #ddd; padding: 15px 35px !important; min-width: 150px; text-align: center; margin: 10px 15px 10px 0 !important; }
.subtit.active { /* background-color: #f5f5f5; */ }

/* py-5 */
.filtr-item .titleBox {
    position: absolute;
    z-index: 10;
    opacity: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-bottom: 0px;
    background: #000;
    background: rgba(0, 0, 0, 0.5);
    color: #FFF;
    padding: 10px;
    text-align: center;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.filtr-item:hover .titleBox {
    margin-bottom: 0;
    opacity: 1;
}

#portfolio .filtr-loading { display: none; }
.totcnt { /* float:right; margin: 0px; padding-right: 5px; padding-top: 10px; */ margin: 10px 5px 10px -15px; }

.board-search-wrap .searchbutton { margin: 0; padding-left:20px; padding-right:20px; border-color: #aaa; }

.filtr-controls { display: flex; margin: 30px 0 !important; }
.titarea { display: block; }
.titbox { display: flex; padding-left: 5px;}


@media (max-width: 991px) {
    .filtr-controls { display: unset; }
    .titarea { display: unset; }
    .titbox { display: unset; }
    .totcnt { width: 100%; }
}



/* -------------------------------------------------------------------- */
/* CLEAN SECTION
/* -------------------------------------------------------------------- */

.clean-ul { margin-bottom: 4rem; width: 100%; }
.clean-ul li { line-height: 1.8rem; }
.clnTitle {
  display: inline-block;
  padding: 10px 30px 15px;
  border: 1px solid #ddd;
  border-radius: 30px;
  font-size: 18px;
  background: #4faaf2;
  color: white;
}

.clnTitle-2 {
    display: inline-block;
    padding: 5px 0px;
    font-size: 1.6rem;
    width: 100%;
    /* background-color: #41484acc; */
    color: #444;
    font-size: 25px;
    margin-left: 15px;
    margin-right: 15px;
    border-bottom: 1px solid #a8a8a8;
}


/*
.clnTitle-2:before {
    font-family: FontAwesome;
    content: "\f00c";
    position: relative;
    left: 0px;
    top: 0px;
    padding-right: 10px;
}
*/

.clnTitle-2:after {
}

.clntxt { font-size: 18px; margin: 50px 0 20px; }
.clntxt div { display: inline-flex; border: 1px solid #ddd; padding: 5px 15px; background: #5e6275; color: white; }
.clntxt .subclntxt { padding-left: 20px; margin-bottom: 5px; }


.section-block-grey {
    /* padding: 0px 0px 60px 0px; */
    /* background-color: #f9f9f9; */
}

.serv-section-2 {
    position: relative;
    border: 1px solid #eee;
    background: #fff;
    box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16);
    border-radius: 5px;
    overflow: hidden;
    padding: 30px;
}

.serv-section-2:before {
    position: absolute;
    top: 0;
    right: 0px;
    z-index: 0;
    content: " ";
    width: 90px;
    height: 90px;
    background: #f5f5f5;
    border-bottom-left-radius: 136px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

.serv-section-2-icon {
    position: absolute;
    top: 11px; 
    right: 25px;
    max-width: 35px;
    z-index: 1;
    text-align: center;
}

.serv-section-2-icon i {
    color: #5f27cd;
    font-size: 48px;
    line-height: 65px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

.serv-section-desc {
    position: relative;
    width: 95%;
}

.serv-section-2 h4 {
    color: #333;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
}

.serv-section-2 h5 {
    color: #808080;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 5px;
}

.section-heading-line-left {
    content: '';
    display: block;
    width: 70px;
    height: 1px;
    background: #189fcf;
    border-radius: 25%;
    margin-top: 15px;
    margin-bottom: 5px;
}

.serv-section-2 p {
    margin-top: 25px;
    padding-right: 50px;
}

.serv-section-2:hover .serv-section-2-icon {
    color: #fff !important;
}

.serv-section-2:hover:before {
    background: #4faaf2;
}


.serv-section-3 {
    position: relative;
    border: 1px solid #eee;
    background: #fff;
   /* box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16); */
    border-radius: 5px;
    overflow: hidden;
    padding: 90px 0px;
}

.bgimg-1 {
    background: url(/images/sub/ex-img-1.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 50%;
    background-color: #e2e3e5;
}

.bgimg-2 {
    background: url(/images/sub/ex-img-2.jpg);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 50%;
    text-align: right;
    background-color: rgba(250, 235, 215, 0.5);
}

.bgimg-3 {
    background: url(/images/sub/ex-img-3.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-position-y: top;
    background-size: 50%;
    background-color: #e2e3e5;
}

.bgimg-4 {
    background: url(/images/sub/ex-img-4.jpg);
    background-repeat: no-repeat;
    background-position: left;
    background-position-y: top;
    background-size: 50%;
    text-align: right;
    background-color: rgba(250, 235, 215, 0.5);
}

.bgimg-5 {
    background: url(/images/sub/ex-img-5.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-position-y: top;
    background-size: 50%;
    background-color: #e2e3e5;
}

.serv-section-3-icon {
    position: absolute;
   /* top: 18px; */
    right: 22px;
    max-width: 100px;
    z-index: 1;
    text-align: center;
}

.serv-section-3-icon i {
    color: #5f27cd;
    font-size: 48px;
    line-height: 65px;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

.serv-section-3 .serv-section-desc {
    position: relative;
    text-align: center; 
}
.left-a { width: 50%; float: left; }
.right-a { width: 50%; float: right; }

.serv-section-3 .serv-section-desc:nth-child(2n) { text-align: right!important; }

.serv-section-3 h4 {
    color: #333;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
}

.serv-section-3 h5 {
    color: #808080;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 5px;
   /* padding-left: 20px; */
}

.serv-section-3 p {
    margin-top: 25px;
    padding-right: 50px;
}

.serv-section-3:hover .serv-section-3-icon {
    color: #fff !important;
}

.serv-section-3:hover:before {
    background: #4faaf2;
}


.clean-info {
  padding-left: 0px; 
  padding-right: 0px; 

}

 .svg-inline--fa.fa-w-18 {
        width: 1.0em;
       /* color: #000; */
    }
    .svg-inline--fa.fa-w-20 {
        width: 1.0em;
    }                  
    .svg-inline--fa.fa-w-16 {
        width: 0.8em;
    }    

@media (max-width: 767px) {
    .serv-section-3.bgimg-1, .serv-section-3.bgimg-2, .serv-section-3.bgimg-3,
    .serv-section-3.bgimg-4, .serv-section-3.bgimg-5  { background-size: cover !important; }
    .serv-section-3 h4 { 
      color: #fff; font-size: 28px; 
    /*  text-shadow: 2px 2px black; */
    }
    .serv-section-3 h5 { 
      color: #fff; font-size: 20px; 
    /*  text-shadow: 2px 2px black;  */
    }

    .serv-section-3.bgimg-1, .serv-section-3.bgimg-3, .serv-section-3.bgimg-5  { background-color: rgba(240, 255, 255, 0.5) !important; }
    .serv-section-3.bgimg-2, .serv-section-3.bgimg-4  { background-color: rgba(250, 235, 215, 0.5) !important; }

    .serv-section-3 .serv-section-desc.left-a {
       width: 100% !important; 
       padding: 0 5% !important; 
       text-align: center !important;
       background-color: #0000006e; 
    }
    .serv-section-3 .serv-section-desc.right-a {
      width: 100% !important; 
      padding: 0 5% !important; 
      text-align: center !important; 
      background-color: #0000006e; 
    }

    .clnTitle-2 { font-size: 1.4rem; }

}
@media (min-width: 768px) and (max-width: 991px) {
    .serv-section-3.bgimg-1 .serv-section-desc  { width: 50%; padding: 0px 5%; }
    .serv-section-3.bgimg-2 .serv-section-desc  { width: 50%; padding: 0px 7%; float: right; }
    .serv-section-3.bgimg-3 .serv-section-desc  { width: 50%; padding: 0px 5%; }
    .serv-section-3.bgimg-4 .serv-section-desc  { width: 50%; padding: 0px 7%; float: right; }
    .serv-section-3.bgimg-5 .serv-section-desc  { width: 50%; padding: 0px 5%; }

}



.process-box{
    background: #fff;
    padding: 10px;
    border-radius: 15px;
    position: relative;
    box-shadow: 2px 2px 7px 0 rgba(0,0,0,0.34);
    -webkit-box-shadow: 2px 2px 7px 0 rgba(0,0,0,0.34);
    -moz-box-shadow: 2px 2px 7px 0 rgba(0,0,0,0.34);
}
.process-left:after{
        content: "";
    border-top: 15px solid rgba(255,255,255,1);
    border-bottom: 15px solid rgba(255,255,255,1);
    border-left: 15px solid #ffffff;
    border-right: 15px solid #ffffff;
    display: inline-grid;
    position: absolute;
    right: -15px;
    top: 42%;
    transform: rotate(45deg);
    box-shadow: 3px -2px 3px 0px rgba(0,0,0,0.21);
    -webkit-box-shadow: 3px -2px 3px 0 rgba(0,0,0,0.21);
    -moz-box-shadow: 3px -2px 3px 0 rgba(0,0,0,0.21);
    z-index: 1;
}
.process-right:after{
    content: "";
    border-top: 15px solid rgba(255,255,255,0);
    border-bottom: 15px solid rgba(255,255,255,1);
    border-left: 15px solid #ffffff;
    border-right: 15px solid #ffffff;
    display: inline-grid;
    position: absolute;
    left: -15px;
    top: 42%;
    transform: rotate(45deg);
    box-shadow: -1px 1px 3px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: -1px 1px 3px 0 rgba(0,0,0,0.21);
    -moz-box-shadow: -1px 1px 3px 0 rgba(0,0,0,0.21);
    border
    z-index: 1;
}
.process-step{
    background: #00BCD4;
    text-align: center;
    width: 80%;
    margin: 0 auto;
    color: #fff;
    height: 100%;
    padding-top: 8px;
    position: relative;
    top: -26px;
    border-radius: 0px 0px 10px 10px;
    box-shadow: -6px 8px 0px 0px rgba(0,0,0,0.08);
    -webkit-box-shadow: -6px 8px 0px 0px rgba(0,0,0,0.08);
    -moz-box-shadow: -6px 8px 0px 0px rgba(0,0,0,0.08);
    z-index: 1;
}

.process-point-right:before{
    content: "";
    height: 140px;
    width: 11px;
    background: #5c5c5c;
    display: block;
    transform: rotate(36deg);
    -webkit-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    position: relative;
    left: -50px;
    top: -0px;
}

.process-point-right{
    background: #ffffff;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 8px solid #00bcd4;
    box-shadow: 0 0 0px 4px #5c5c5c;
    margin: auto 0;
    position: absolute;
    bottom: 40px;
    left: -63px;
}
/*
.process-point-left:before {
    font-family: FontAwesome;
    content: "\f715";
    background: red;
    display: block;
    transform: rotate(-38deg);
    -webkit-transform: rotate(-38deg);
    -ms-transform: rotate(-38deg);
    position: relative;
    height: 144px;
    left: 0px;
    top: 0px;
}
*/

.process-point-left:before {
    content: "";
    height: 140px;
    width: 11px;
    background: #5c5c5c;
    display: block;
    transform: rotate(-38deg);
    -webkit-transform: rotate(-38deg);
    -ms-transform: rotate(-38deg);
    position: relative;
    left: 50px;
    top: 0px;
}


.process-point-left{
    background: #ffffff;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 8px solid #00bcd4;
    box-shadow: 0 0 0px 4px #5c5c5c;
    margin: auto 0;
    position: absolute;
    bottom: 40px;
    right: -63px;
}
.process-last:before{
    display: none;
}
.process-box p{
    z-index: 9;
}

.process-box h5{
    font-size: 1.15rem;
}

.process-step p{
    font-size: 20px;
}
.process-step h2{
    font-size: 39px;
}
.process-step:after{
    content: "";
    border-top: 8px solid rgba(4,136,152,0);
    border-bottom: 8px solid rgba(4,136,152,1);
    border-left: 8px solid rgba(4,136,152,0);
    border-right: 8px solid rgba(4,136,152,1);
    display: inline-grid;
    position: absolute;
    left: -16px;
    top: 0;
}
.process-step:before{
    content: "";
    border-top: 8px solid rgba(255,0,0,0);
    border-bottom: 8px solid rgba(4,136,152,1);
    border-left: 8px solid #048898;
    border-right: 8px solid rgba(255,0,0,0);
    display: inline-grid;
    position: absolute;
    right: -16px;
    top: 0;
}
.process-line-l{
    background: #f3f3f3;
    height: 4px;
    position: absolute;
    width: 111px;
    right: -133px;
    top: 60px;
    z-index: 9;
}
.process-line-r{
    background: #f3f3f3;
    height: 4px;
    position: absolute;
    width: 114px;
    left: -132px;
    top: 60px;
    z-index: 9;
}

@media (max-width: 767px) {
    .process-point-left { display: none; }
    .process-point-right { display: none; }
    .process-line-l { display: none; }
    .process-line-r { display: none; }

    .serv-section-desc {
        width: 96%;
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    .process-point-left:before {
        content: "";
        height: 96px;
        width: 11px;
        background: #5c5c5c;
        display: block;
        transform: rotate(-8deg);
        -webkit-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        position: relative;
        left: 6px;
        top: 18px;
    }
    .process-point-right:before {
        content: "";
        height: 96px;
        width: 11px;
        background: #5c5c5c;
        display: block;
        transform: rotate(8deg);
        -webkit-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        position: relative;
        left: -9px;
        top: 19px;
    }
    .process-line-l { display: none; }
    .process-line-r { display: none; }
    .process-last:before { display: none; }

}

@media (min-width: 992px) and (max-width: 1200px) {
    .process-point-left:before {
        content: "";
        height: 108px;
        width: 11px;
        background: #5c5c5c;
        display: block;
        transform: rotate(-28deg);
        -webkit-transform: rotate(-28deg);
        -ms-transform: rotate(-28deg);
        position: relative;
        left: 28px;
        top: 10px;
    }
    .process-point-right:before {
        content: "";
        height: 105px;
        width: 11px;
        background: #5c5c5c;
        display: block;
        transform: rotate(25deg);
        -webkit-transform: rotate(25deg);
        -ms-transform: rotate(25deg);
        position: relative;
        left: -30px;
        top: 12px;
    }
    .process-line-r { width: 80px; left: -102px; }
    .process-last:before { display: none; }

}





/* -------------------------------------------------------------------- */
/* GREETING SECTION
/* -------------------------------------------------------------------- */

.greetTxt {
    position: relative;
    margin: 0rem 0 1.5rem;
}

/*
.greetTitle:before{
    font-family: FontAwesome;
    content: "\f10d";
    display: block;
    position: absolute;
    color: #ccd8e2;
    left: 0px;
    top: -35px;
}
.greetTitle:after{
    font-family: FontAwesome;
    content: "\f10e";
    display: block;
    position: absolute;
    color: #ccd8e2;
    right: 0px;
}
*/

.greetTxt .greetTitle {
    font-size: 25px;
/*   font-weight: 600; */
    padding-top: 11px;
    text-align: center;
}

.greetImg {  }

.greetMtxt { font-size: 20px; color: #3dbbde; padding-top: 0; line-height: 8mm; }

.greetingBox { margin-top: 60px; }

.greetEnd { font-size: 1.2rem; }

.f-blue {
    color: #2c6aba;
}

@media (max-width: 768px) {
  .greetingBox { margin-top: 30px; }
  .greetTxt { margin-bottom: 20px; }
  .greetTxt .greetTitle {
      font-size: 20px;
  }

 .greetImg { text-align: center; padding: 20px 0 30px; }
  
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .greetTxt .greetTitle { font-size: 20px; }
    .greetTxt { margin: 0rem 0 0; }
    .greetImg { text-align: center; padding: 20px 0 50px; }

}



/* -------------------------------------------------------------------- */
/*  ORGANIZATION SECTION
/* -------------------------------------------------------------------- */

.organ {display: inline-block; margin-top: 2rem; margin-bottom: 4rem; height: 100%;}
.organWrap div.gray {
   /* border: 1px solid #38b0cc; */
}

	.organ .gray { width:300px; margin: 0 auto; margin-bottom:0 !important}
	.topline { padding-top:40px;background:url("/images/sub/line_dot.png") repeat-x center bottom; margin-left: 137px; /* margin:0 auto; */ width: 62.6%; }
	.topline-s { padding-top:40px;background:url("/images/sub/line_dot.png") repeat-x center bottom; margin:0 auto; width: 50.2%; }
	.orga_01 { padding-top:40px; }
	.orga_01 > ul,
	.orga_01 > ul > li > ul{ /* overflow:hidden; */ } 
	.orga_01 > ul > li > ul { padding:18px 17px; }
	.orga_01 > ul > li { width: 25%; float:left;}
	.orga_01 > ul > li > ul > li { float:left; width: 100%; }
	.orga_01 > ul > li > .wid { margin: 0 auto; }
	.orga_01 > ul > li > ul > li { background:url("/images/sub/line_dot.png") repeat-y center top;padding-top:16px; }
	.orga_01 > ul > li > ul > li div { margin:0 3px; }
	.orga_01 > ul > li > ul > li div a { display:block;background:#FFF;text-align:center; /* line-height:125%;min-height:220px; */ border:1px solid #ddd;padding:15px;}

.organWrap div.gray, .organWrap div.wid, .organWrap div.wid-1 {
    background: #FFF;
   /* box-shadow: 0 3px #eeeeee; */
    height: 60px;
    padding-top: 15px;
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

    background: #555962;
    color: white;
}

.organWrap div.wid {
   /* border: 1px solid #8fc320; */
    background: #9499a4;
    color: white;
}

.organWrap div.wid-1 {
    background: #9499a4;
    color: white;
    margin: 0 auto;
}

.orga_01 > ul > li > div.wid:before {
    content:"";
    position: absolute;
    z-index: -1;
    top: -41px;
    bottom: 0;
    left: 50%;
    border-left: 1px solid #ccc;
    transform: translate(-50%);
}

.orga_01 > ul > li > div.wid-1:before {
    content:"";
    position: absolute;
    z-index: -1;
    top: -41px;
    bottom: -40px;
    left: 50%;
    border-left: 1px solid #ccc;
    transform: translate(-50%);
}

.sbl:before {
    content:"";
    position: absolute;
    z-index: -1;
    top: -40px;
    bottom: 0;
    left: 50%;
    border-left: 1px solid #ccc;
    transform: translate(-50%);
}

.sbl-s:before {
    content:"";
    position: absolute;
    z-index: -1;
    height: 160px;
    top: -1px;
    bottom: 0;
    left: 50%;
    border-left: 1px solid #ccc;
    transform: translate(-50%);
}

.gray:before {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: -40px;
    left: 50%;
    border-left: 1px solid #ccc;
    transform: translate(-50%);
}


.orga_01 > ul > li > ul > li div a:hover {
   /* background: #666; */
   color: #666;
}

.orga_01 > ul > li > div:hover {
   /* background: #8fc320; 
    color: white; */
}

.organWrap div.gray:hover {
  /* background: #38b0cc;
    color: white; */
}


	@media screen and (min-width:1200px) {
  	.orga_01 > ul > li > .wid { width:240px; }
  	.orga_01 > ul > li > .wid-1 { width:240px; }
  }

	@media (min-width:992px) and (max-width:1199px) {
  	.orga_01 > ul > li > .wid-1 { width:240px; }
    .orga_01 > ul > li > ul { padding: 18px 0px; }
    .orga_01 > ul > li { padding-left: 5px; padding-right: 5px; }

  	.topline { margin-left: 115px; }
  }

	@media screen and (max-width:991px) {
    .organ {display: block; margin-top: 0rem; margin-bottom: 0rem; height: 100%;}
    .topline { display: none; }
    .organ .gray { width: 100%; }
		.orga_01 > ul > li { float:none; width:100% !important; margin-top: 2rem; }
		.orga_01 > ul > li > .wid{width:100%;}
		.orga_01 { padding-top: 8px; background:none; }
		.orga_01 > ul > li > ul { background:none !important; padding: 18px 0px; margin-top: 0px !important; }
		.orga_01 > ul > li > ul > li{float:none; width:100%;}
		.orga_01 > ul > li > ul > li div{margin:0;}
		.orga_01 > ul > li > ul > li div a{min-height:auto;padding:15px;}

    .orga_01 > ul > li > div.wid-1:before { top: 0px; }
		.orga_01 ul.og-left > li > div { width: 98%; }
		.orga_01 ul.og-left > li > div { width: 98%; }
		.orga_01 ul.og-right > li > div { width: 98%; margin-left: 2%; }
		.orga_01 ul.og-right > li > div { width: 98%; margin-left: 2%; }

    .gray:before { border-left: 0px; }
    .orga_01 > ul > li > div.wid:before { top: 0; bottom: -31px; }
    .sbl:before { border-left: 0px; }
	}
	@media screen and (max-width:320px) {
		.organ .gray{width:95%;}
	}



/* -------------------------------------------------------------------- */
/* COMPANY SECTION
/* -------------------------------------------------------------------- */

#summary { margin-bottom: 4rem; }
#summary table {margin:0;padding:0;word-break:break-all;border-collapse:collapse; }
#summary caption { position: absolute; visibility: hidden; width: 0; height: 0; overflow: hidden; font-size: 0; }

#summary.table{}
#summary.table th{ 
  color:#fff; background-color:#6a7d94; text-align:center; 
  /* padding: 15px .75rem; */
  font-weight:normal;
}
#summary.table td{color:#666; padding-left: 30px; border-right: 1px solid #e9e9e9;}
#summary.table td.tc{padding-left:0;}
#summary.table tr:last-child td:last-child{border-bottom:1px solid #e9e9e9;}

.t_area h6 { padding-top: 25px; padding-bottom: 50px; text-align: center; margin: 0 auto; max-width: 46%; color: #9E9E9E; }
.visionImg { text-align: center; margin-bottom: 0.0rem; }

#vision.table {margin:0;padding:0;word-break:break-all;border-collapse:collapse; font-size: 1.3em;}
#vision.table td{ color:#7c7c7c; border: 0px;}
#vision.table td.tc{padding-left:0;}
#vision.table td > i { padding: 0 10px; }
#vision.table td > i.i-color { color: #00BCD4; }
#vision.table td .txt1 { font-size: 20px; font-weight: bold; line-height: 9mm; color: #6c6c6c; }
#vision.table td .txt2 { color: #3dbbde; font-size: 30px; font-weight: bold; }


@media screen and (max-width:991px) {
    .t_area h6 { max-width: 90%; }

	  #summary.table { border: 1px solid #d2d2d2; }
    #summary.table td{ padding-left: 10px; }
}

@media( max-width: 640px ) {
  #summary table {margin-top:1rem;}

	#summary,
	#summary thead,
	#summary tbody,
	#summary tr,
	#summary th,
	#summary td {
		/* display: block; */
	}

	#summary th,
	#summary td {
		/* border-top: none; */
		border-bottom: none;
		padding: 0.6rem .5rem !important; 
	}
}



/* -------------------------------------------------------------------- */
/* HEADER MENUBOX
/* -------------------------------------------------------------------- */

.menubox {
  display: inline-block;
  cursor: pointer;
  background: #189fcf;
  margin: 10px -15px 10px;
  padding: 5px 10px;
  color: #fff;
  /* margin-right: -15px; */
}

.bar1, .bar2, .bar3 {
  width: 23px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-5px, 5px);
  transform: rotate(-45deg) translate(-5px, 5px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}



/* -------------------------------------------------------------------- */
/* NEW CAROUSEL AREA
/* -------------------------------------------------------------------- */

.estarea { 
  position: absolute; 
  width: 100%; 
  top: 0; 
  height: 46rem; 
}

.estarea:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: hsla(213, 16%, 9%, 0.20);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
  

.estrow { position: relative; height: 46rem; }
.estbox {
    position: absolute; 
    display: block;
    /* border: 2px solid #2196f3; */
    background-color: hsla(0, 0%, 100%, 0.8);
    width: 20rem;
    height: 33rem;
    bottom: 110px;
    right: 15px;

    padding: 43px 25px; 
    text-align: center;
/*
    -webkit-box-shadow: 0px 0px 15px #000; 
    -moz-box-shadow: 0px 0px 15px #000; 
    box-shadow: 0px 0px 15px #000;
*/
}
.form-control { padding: 10px; }
.bgc { background-color: hsla(0, 0%, 100%, 0.5); }

.mntitle { 
    position: absolute;
    left:0;
    color: white;
    vertical-align: middle;
    display: block;
    top: 22%;
    text-shadow: 1px 0px 0px hsl(0, 0%, 33%);; 
    text-align: center;
    width : 100%
    
}
.mntitle .mntxt-0 { 
  font-size: 1.2rem; 
  color: bisque;
  letter-spacing: 1px; 
  word-spacing: 1px; 
  margin-bottom: -0.5rem; 
  padding-left: 5px;
}
.mntitle .mntxt-1 { 
  position: relative; display: inline-block; 
  font-size: 3.2rem; /* letter-spacing: -2.5px; word-spacing: -3px; */ 
  line-height: 4.0rem; padding: 20px 5px; 
} 

.mntitle .mobile-show { 
  display: none ;
}

  
.mntitle .mntxt-11 { position: relative; display: inline-block; font-size: 3.5rem; /* letter-spacing: -2.5px; word-spacing: -3px; */ line-height: 5.0rem; padding: 20px 5px; }
.mntitle .mntxt-2 { font-size: 1.3rem; letter-spacing: 1px; word-spacing: 1px; padding-left: 5px; }
/*
.titleline {background: #ffc000;
    display: block;
    position: absolute;
    content: '';
    bottom: 15px;
    width: 100%;
    height: 12px;
    z-index: -1;
    left: 50%;
    transform: translate(-50%,0);}
*/



/* -------------------------------------------------------------------- */
/* MAIN LOCATION AREA
/* -------------------------------------------------------------------- */

#location { position: relative; background: #41474d; padding: 2.5% 0; }
.ct-txt-1, .ct-txt-2 { word-break: keep-all; }
.ct-txt-1 { 
    font-size: 2.0rem;
    font-weight: 100;
    color: #fff;
    letter-spacing: -2px;
    margin-bottom: 2%; 
}

.ct-txt-2 { 
    font-size: 2.5rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 100;
    letter-spacing: 1.6px;
    line-height: 1.2;
    margin-bottom: 3%;
}
/* ------
.ct-txt-2:before {
    content: ' \260E' !important;
    margin-right: 8px !important;
    position: inherit !important;
    border-bottom: 0px !important;
    color: #bbb !important;
}
*/

#location dl { padding: 3px 0; margin-bottom: 0rem; }
#location dl dt { width: 110px; margin-bottom: 0rem; }
#location dl dt:before {
    content: ' \25A3' !important;
    margin-right: 8px !important;
    position: inherit !important;
    border-bottom: 0px !important;
    color: #bbb !important;
}
#location dl dt, #location dl dd {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 100;
    display: inline-block;
    margin-bottom: 0rem;
}
.nt-area { padding-top: 3%; }
.ct-title { border-bottom: 1px solid #bbb; width: 90%; padding: 0 0 5px 5px; margin-bottom: 10px; }
.ct-title span a { color: antiquewhite; font-size: 1.2rem; }
.ct-title span:before {
    content: ' \271A' !important;
    margin-right: 8px !important;
    position: inherit !important;
    border-bottom: 0px !important;
    color: #bbb !important;
}

.ct-list { padding-left: 5px; }
.ct-list li { padding: 3px 0; }
.ct-list .nt-title:before {
    content: ' \2022' !important;
    margin-right: 8px !important;
    position: inherit !important;
    border-bottom: 0px !important;
    color: #bbb !important;
}
.ct-list a, .nt-date { color: #bbb; padding-left: 3px; }

#location .map-area { /* padding-top: 110px; */ height: 100%; }

#location .root_daum_roughmap { width: 100% !important; height: 100% !important; }
#location .root_daum_roughmap .wrap_map { height: 92.5% !important; }



@media (max-width:991px) {

}
@media (max-width: 383px) {
  #location dl dt { font-size: 0.9rem; width: 100%; }
  #location dl dd { font-size: 0.9rem; width: 100%; padding-left: 20px; }
}
@media (max-width: 499px) {
  #location { padding: 8% 0 10% 0; }
  .nt-area { padding-top: 10%; }
  .ct-txt-1 { font-size: 2.0rem; }
  .ct-txt-2 { font-size: 2.0rem; }
  .ct-title { width: 100%;}

  #location dl dt { font-size: 0.8rem; width: 80px; }
  #location dl dd { font-size: 0.8rem; }
  #location .map-area { padding-top: 50px; height: 16rem; }
}
@media (min-width: 500px) and (max-width: 575px) {
  #location { padding: 15% 0; }
  .nt-area { padding-top: 10%; }
  .ct-txt-1 { font-size: 2.6rem; }
  .ct-txt-2 { font-size: 3.1rem; }
  .ct-title { width: 100%;}

  #location dl dt, #location dl dd { font-size: 1.0rem; }
  #location .map-area { padding-top: 50px; height: 16rem; }
}
@media (min-width: 576px) and (max-width: 767px) {
  #location { padding: 15% 0; }
  .nt-area { padding-top: 10%; }
  .ct-txt-1 { font-size: 2.7rem; }
  .ct-txt-2 { font-size: 3.3rem; }
  .ct-title { width: 100%;}

  #location dl dt, #location dl dd { font-size: 1.0rem; }
  #location .map-area { padding-top: 50px; height: 16rem; }
}
@media (min-width: 768px) and (max-width: 991px) {
  #location { padding: 10% 0; }
  .nt-area { padding-top: 10%; }
  .ct-txt-1 { font-size: 2.9rem; }
  .ct-txt-2 { font-size: 3.6rem; }
  .ct-title { width: 100%;}

  #location .map-area { padding-top: 50px; height: 18rem; }
}
@media (min-width: 992px) and (max-width: 1200px) {
  #location { padding: 10% 0; }
  .ct-txt-1 { font-size: 3.0rem; }
  .ct-txt-2 { font-size: 3.9rem; }
  .ct-title { width: 95%;}

  #location dl dt, #location dl dd { font-size: 1.0rem; }

}



/* -------------------------------------------------------------------- */
/* MAIN SWIPER AREA
/* -------------------------------------------------------------------- */

.t_txt { color: #747474; margin-top: 30px; text-align: center; font-size: 1.1rem; }


.swiper-container {
    margin: 0 auto 3rem auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}
.swiper-container ul {
    font-size: 0;
    width: 100%;
    max-width: 1300px;
    margin: 50px auto;
}
.swiper-container ul li {
    display: inline-block;
    width: calc(25% - 10px);
    margin-right: 10px;
    font-size: 14px;
    position: relative;
}
.swiper-container ul li .img {
    position: relative;
   /* border: 1px solid #ddd; */
    overflow: hidden;
    display: block;
}
.swiper-container ul li em {
    position: absolute;
    display: block;
    width: 100%;
    margin-top: 20px;
    font-size: 16px;
    line-height: 1;
    text-align: center;
}


.cln-over {
    display: inline-block !important;
    font-size: 1.4rem !important;
    /* font-weight: bold !important; */
    padding: 12px 0 16px 0;
    color: #fff;
    bottom: 20px;
    /* text-shadow: 2px 3px 1px #000; */
    background-color: rgba(12, 76, 163, 0.5) !important;
    transition: all .3s ease-in-out;

    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

#m-business { background: rgba(249,249,249,0.8); }

@media (max-width:991px) {

}

@media (max-width: 499px) {
  #m-business .t_area h2 {font-size: 30px;}
  .swiper-container ul { margin: 0 auto; }
  .swiper-container ul li { width: calc(50% - 10px);  margin-bottom: 4rem; }
  
 .subContainer { 
    padding: 60px 0 0px 0 !important;
 }

 .t_area {
   margin-bottom: 0em !important;
 }

 #home-banner .slider-wrap {
   padding: 0 0 2rem 0 !important;
 }

}

@media (min-width: 500px) and (max-width: 575px) {
  .swiper-container ul { margin: 0 auto; }
  .swiper-container ul li { width: calc(50% - 10px);  margin-bottom: 4rem; }

}

@media (min-width: 576px) and (max-width: 767px) {
  .swiper-container ul { margin: 0 auto; }
  .swiper-container ul li { width: calc(50% - 10px);  margin-bottom: 4rem; }
}

@media (min-width: 768px) and (max-width: 991px) {

}

@media (min-width: 992px) and (max-width: 1200px) {

}



/* -------------------------------------------------------------------- */
/* MAIN CLEAN AREA
/* -------------------------------------------------------------------- */

.cln { display: block; position: relative; width: 100%; padding: 0rem 0; }
.cln-t1, .cln-t2 { display: block; font-size: 1.5rem; text-align: center; padding: 20px; width: 50%; margin: 0 auto; color: white; /* border: 1px solid #ddd; */ background: rgb(108, 117, 125); } 
.cln-t2 { margin: 0 auto; }
.cln-tbox { margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; }
.cln-tbox ul { 
  font-size: 0; 
  width: 100%; 
 max-width: 1300px; 
  margin: 0 auto; 
  text-align: center; 
}
.cln-tbox ul li { 
  display: inline-block; 
 width: calc(33.3% - 10px);  
  margin-right: 10px; font-size: 14px; 
  position: relative; 
  border: 1px solid #ddd; 
  overflow: hidden;  
 /* background: -webkit-linear-gradient(top, rgba(234, 234, 234, 0.6) , #ffffff); */
  }
  
.cln-tbox ul li:hover {
/*
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
*/
}
.cln-tbox ul li span { display: block; padding: 15px; height: 15rem; }
.cln-tbox ul li span.over {
    opacity: 1;
    transition: all .3s ease-in-out;
    position: absolute;
    width: 100%;
    height: calc(100% - 0px);
    top: 0;
    left: 0;
   /* background-color: rgba(12, 76, 163, 0.5); */
    text-align: center;
    padding: 10px;
    color: #fff;
}
.cln-tbox ul li span.over:hover {
    opacity: 1;
}
.cln-tbox .cln-p3:before { 
    font-family: FontAwesome;
   /* content: "\f101"; */
   content: "";
    left: 0px;
    top: 0px;
    /* padding-right: 20px; */
    display: block;
   /* color: rgba(24, 159, 207, 0.6); */

   width: 80px; 
   height: 1px; 
   background: #189fcf99; 
   margin: 0 auto; 
   margin: 20px auto;   
}

.cln-tbox .cln-p3.changed:before { 
   background: #f4a460 !important; 
}


.cln-tbox .cln-p1 { font-size: 1.5rem; color: #189fcf; }
.cln-tbox .cln-p2 { font-size: 1.0rem; color: #189fcf;  margin-top: 0.5rem;  margin-bottom: 0.5rem;}
.cln-tbox .cln-p3 { font-size: 1.3rem; color: #189fcf; }


.cln-tbox .cln-p-1 { 
  font-size:3.5rem; margin-bottom: 0.5rem; 

  -webkit-animation-duration: 1s;
  animation-duration: 1s; 
  -webkit-animation-fill-mode: both; 
  animation-fill-mode: both; 
}

 @-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
 } 
 
 @keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
 }
 
 .bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
 }


.cln .cln-li-1 { 
   /* background-image: url(/images/main/20719450.jpg); */
    background-size: cover; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    /* width: 100%; */    
    height: 17rem; 

    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transition: all 0.3s ease-in-out;  
}
.cln .cln-li-2 { 
   /* background-image: url(/images/main/20943280.jpg); */
    background-size: cover; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    /* width: 100%; */    
    height: 17rem; 

    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transition: all 0.3s ease-in-out;  
}
.cln .cln-li-3 { 
   /* background-image: url(/images/main/20958912.jpg); */
    background-size: cover; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    /* width: 100%; */    
    height: 17rem; 

    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transition: all 0.3s ease-in-out;  
}

.uparrow {
    background-image: url(/images/main/up_arrow.jpg); 
    background-size: cover; 
    width: 235px;
    height: 56px;
    margin: 25px auto 30px auto;
 }
.downarrow {
    background-image: url(/images/main/down_arrow.jpg); 
    background-size: cover; 
    width: 235px;
    height: 56px;
    margin: 30px auto 25px auto;
 }


@media (max-width:991px) {

}

@media (max-width: 499px) {
  #m-clean .t_area h2 {font-size: 30px;}
  .cln-t1, .cln-t2 { width: 100%; font-size: 1.0rem; }
  .cln { padding: 0; }
  .cln-tbox ul li { display: block; width: 100%; margin: 15px auto; }
}

@media (min-width: 500px) and (max-width: 575px) {
  .cln-t1, .cln-t2 { width: 100%; font-size: 1.0rem; }
  .cln-tbox ul li { display: block; width: 100%; margin: 15px auto; }
}

@media (min-width: 576px) and (max-width: 767px) {
  .cln-t1, .cln-t2 { width: 100%; }
  .cln-tbox .cln-p-1 { font-size: 2.0rem; }
  .cln-tbox .cln-p3 { font-size: 1.1rem; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .cln-t1, .cln-t2 { width: 100%; }
  .cln-tbox .cln-p-1 { font-size: 2.5rem; }

}

@media (min-width: 992px) and (max-width: 1200px) {

}



/* -------------------------------------------------------------------- */
/* MAIN HOME-BANNER AREA
/* -------------------------------------------------------------------- */

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

#home-banner {
    background-color: rgba(198,216,222,0.4); /* background-color: rgba(249,249,249,0.5); */
}

#home-banner .carousel-item {
    height: 32rem !important;
    background-color: rgba(249,249,249,0.5);
}

#home-banner #carousel-example-generic .carousel-inner .item {
    padding: 4% 0;
}
#home-banner #carousel-example-generic .carousel-inner .text-wrap h2 {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 1rem 0;
}
#home-banner #carousel-example-generic .carousel-inner .text-wrap {
    padding: 8% 0 8% 0;
}
#home-banner #carousel-example-generic .carousel-inner .text-wrap p {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    line-height: 2rem;
}
#home-banner #carousel-example-generic .carousel-control {
    width: 2%;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
}
#home-banner #carousel-example-generic .carousel-inner .text-wrap .button-wrap {
    margin-bottom: 2rem;
}
#home-banner #carousel-example-generic .carousel-inner .text-wrap .button-wrap .redamore.btn {
    background: #1a9dcc;
    border-radius: 0;
    padding: 10px 20px;
    color: #fff;
}

#home-banner .carousel-control-next-icon, #home-banner .carousel-control-prev-icon {
    width: 50px;
    height: 50px;
    background: #615f5fb3;
}
#home-banner .carousel-control-next-icon:after {
    font-family: FontAwesome;
    content: "\f105";
    display: block;
    position: absolute;
    font-size: 3rem;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    margin: -12px 0 0 15px;
    color: #fff;
    font-weight: bold;
}

#home-banner .carousel-control-prev-icon:after {
    font-family: FontAwesome;
    content: "\f104";
    display: block;
    position: absolute;
    font-size: 3rem;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    margin: -12px 0 0 15px;
    color: #fff;
    font-weight: bold;
}

#home-banner .carousel-control-next-icon:hover, #home-banner .carousel-control-prev-icon:hover {
    background-color: black;
}

#home-banner .slider-wrap { padding: 2rem 0; }
#home-banner .carousel-indicators { display: none; }

#home-banner #carbtn { margin-top: -55px; margin-left: 20px; position: absolute; display: block; }




@media (min-device-width : 768px) and (max-device-width : 1024px) {
  #home-banner .carousel-item { height: 25rem !important; }
}

@media screen and (max-width:575px){
  #home-banner .t_area h2 {font-size: 30px;}
  #home-banner #carbtn { display: none !important; }
  #home-banner #carousel-example-generic {
      padding: 0rem;
  }
  #home-banner #carousel-example-generic .carousel-inner .text-wrap {
      text-align: center;
  }
  #home-banner #carousel-example-generic .carousel-inner .text-wrap h2 {
      font-size: 19px;
      margin: 0 0 .5rem 0;
  }
  #home-banner #carousel-example-generic .carousel-inner .text-wrap .button-wrap .redamore.btn {
     padding: 7px 14px;
     font-size: 14px;
  }
}


/* -------------------------------------------------------------------- */
/* OUR COMPANY
/* -------------------------------------------------------------------- */

.sub_visual.bgi-v11 { 
    background: url(/images/sub/19770672-1.jpg); 
    background-position-x: center;
    background-position-y: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}  
.sub_visual.bgi-v11 h2 { 
    font-size: 4rem; 
    color: #fff; 
    text-align: center; 
    line-height: 100%; 
    position: absolute; 
    width: 100%; 
    /* font-weight: 800;  */
    padding-top: 9.5rem; 
    text-shadow: 1px 1px black;
}
.sub_visual.bgi-v11 p { 
    color: #fff; 
    text-align: center; 
    line-height: 100%; 
    position: absolute; 
    width: 100%; 
    padding-top: 12rem; 
}

.vs li { line-height: 3.5rem; }
.vs li dt { font-size: 1.4rem; font-weight: normal; color: #3cbbde; }
.vs li dd { font-size: 1.1rem; line-height: 1.5rem; margin-left: 28px; }

.vs-txt { font-size: 2.0rem; font-weight: normal; line-height: 4.0rem; margin-top: 30px; width: 100%; text-align: center;}
.vs-txt span.txt1 { margin-left: -70px; font-size: 2.4rem; z-index: 1; }
.vs-txt span.txt2 { font-size: 2.4rem; }
.vs-txt span.txt1, .vs-txt span.txt2 { font-weight: normal; }
.vs-txt:before {
    font-family: FontAwesome;
    content: "\f0a3";
    position: relative;
    left: 0px;
    top: 0px;
    font-size: 6rem;
    color: rgba(69,182,222,0.2);
    z-index: -1;
}
.vs-txt:after {
    font-family: FontAwesome;
    content: "\f0a3";
    position: relative;
    right: 50px;
    top: 35px;
    font-size: 6rem;
    color: rgba(69,182,222,0.2);
    z-index: -1;
}

/* -------------------------------------------------------------------- */
/* CLEAN
/* -------------------------------------------------------------------- */

.sub_visual.bgi-v21 { 
    background: url(/images/sub/20110078_1.jpg); 
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}  
.sub_visual .lay-color { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: hsla(221, 10%, 15%, 0.32);
  /*  filter: blur(3px); 
    -webkit-filter: blur(3px); */
}


.sub_visual.bgi-v21 h2 { 
    font-size: 4rem; 
    color: #fff; 
    text-align: center; 
    line-height: 100%; 
    position: absolute; 
    width: 100%; 
   /* font-weight: 800;  */
    padding-top: 9.5rem; 
    text-shadow: 1px 1px black;
}
.sub_visual.bgi-v21 p { 
    color: #fff; 
    text-align: center; 
    line-height: 100%; 
    position: absolute; 
    width: 100%; 
    padding-top: 12rem; 
}


/* -------------------------------------------------------------------- */
/* CASE LIST
/* -------------------------------------------------------------------- */

.sub_visual.case31 { background-image: url(/images/sub/20921182-1.jpg); background-position-y: center; position: relative; }
.sub_visual.case31 h2 { 
    font-size: 4rem; 
    color: #fff; 
    text-align: center; 
    line-height: 100%; 
    position: absolute; 
    width: 100%; 
 /*  font-weight: 800;  */
    padding-top: 9.5rem; 
    text-shadow: 1px 1px black;
}
.case31 p { color: #fff; text-align: center; line-height: 264px; position: absolute; width: 100%; padding-top: 6rem; margin: 0; }



/* -------------------------------------------------------------------- */
/* COMPANY BOX 
/* -------------------------------------------------------------------- */

.company-box {
    background-color: #f5f5f5;
    padding-bottom: 60px;
}
.company-box .info {
    margin: 0 auto;
    position: relative; 
}
.company-box .info ul {
    padding-top: 70px;
    font-size: 0;
}
.company-box .info ul li {
    background-color: #fff;
    display: inline-block;
    width: calc(50% - 10px);
    margin-right: 10px;
    margin-top: 20px;
    height: 160px;
}

.company-box .info ul li:hover { background-color: rgba(24, 159, 207, 0.8);  box-shadow: 5px 5px 5px 5px #ccc; transition: all .3s ease-in-out; }
.company-box .info ul li:hover strong { color: white; }
.company-box .info ul li:hover em { color: white; }
.company-box .info ul li:hover span { color: white; }


.company-box .info ul li a {
    display: block;
    padding: 39px 42px;
    height: 100%;
    box-shadow: 0 1px 1px #e3e3e3;
    text-align: left;
    position: relative;
}
.company-box .info ul li a strong {
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    color: #333;
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.company-box .info ul li a div {
    float: right;
    text-align: right;
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.company-box .info ul li a div em {
    font-size: 30px;
    line-height: 1;
    font-family: 'Titillium Web';
    display: block;
    color: #333;
}
.company-box .info ul li a div span {
    font-size: 16px;
    color: #666;
    line-height: 26px;
}

.company-box .info ul li:nth-child(even) { margin-right: 0; }
.company-box .info ul li a:after { content: ''; display: block; clear: both; }

@media (max-width: 1023px) { 
  .company-box { padding-bottom: 27px; }
  .company-box .info { margin: 0 15px; width: auto; }
  .company-box .info:before { display: none; }
  .company-box .info ul { padding-top: 30px; }
  .company-box .info ul li { height: 160px; float: left; }
  .company-box .info ul li a strong, .company-box .info ul li a div { float: none; position: static; transform: translateY(0); }
  .company-box .info ul li a div { text-align: left; margin-top: 10px; }
  .company-box .info ul li a div em { margin-bottom: 4px; }
  .company-box .info ul:after { content: ''; display: block; clear: both; } 
}

@media (max-width: 767px) { 
  .company-box .info { width: auto; max-width: none; margin: 0 15px; position: relative; }
  .company-box .info ul { padding-top: 42px; }
  .company-box .info ul li { width: 100%; height: 90px; margin-top: 8px; margin-right: 0; }
  .company-box .info ul li a { padding: 20px; }
  .company-box .info ul li a strong { position: relative; top: 50%; transform: translateY(-50%); }
  .company-box .info ul li a strong { font-size: 18px; float: left; }
  .company-box .info ul li a div { float: right; text-align: right; margin-top: 0; position: relative; transform: translateY(-50%); }
  .company-box .info ul li a div em { font-size: 17px; margin-bottom: 4px; }
  .company-box .info ul li a div span { font-size: 15px; line-height: 17px; } 
}




/* -------------------------------------------------------------------- */
/* BAND BOX 
/* -------------------------------------------------------------------- */

.band-box { background-image:url('/images/main/cc_20707832.jpg') }
.band-box { background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; background-size: cover; position: relative; width: 100%; height: 460px; text-align: center; color: #fff; }
.band-box:before {content: '';display: block;width: 100%;height: 100%; background-color: rgba(27, 36, 44, 0.65); position: absolute;top: 0;left: 0;z-index: 0;}
.band-box strong { width: 100%; padding-top: 90px; font-size: 3rem; display: block; margin-bottom: 28px; position: relative; z-index: 1; }
.band-box .line { display: block; width: 1px; height: 30px; background-color: #fff; margin: 0 auto 24px auto; position: relative; z-index: 1; }
.band-box p { width: 100%; font-size: 2.1rem; line-height: 60px; margin-bottom: 24px; position: relative; z-index: 1; }
.band-box span { width: 100%; }
.band-box .btn { font-size: 1.2rem; background-color: transparent; border: 1px solid #fff; color: #fff; position: relative; padding: 8px 25px 10px 25px; z-index: 1; border-radius: 4px; }
.band-box .btn:hover { border: 1px solid rgba(36,132,206,1); background-color: rgba(36,132,206,1); }

@media (max-width: 383px) {
  .band-box { height: 350px; }
  .band-box strong { font-size: 1.8rem; padding-top: 50px; }
  .band-box p { font-size: 1.3rem; line-height: 33px; }
  .band-box .btn { font-size: 1.1rem; }
}
@media (min-width: 384px) and (max-width: 499px) {
  .band-box { height: 380px; }
  .band-box strong { font-size: 2.0rem; padding-top: 65px; }
  .band-box p { font-size: 1.5rem; line-height: 38px; padding: 0 20px;}
  .band-box .btn { font-size: 1.0rem; }
}
@media (min-width: 500px) and (max-width: 575px) {
  .band-box { height: 400px; }
  .band-box strong { font-size: 2.1rem; padding-top: 70px; }
  .band-box p { font-size: 1.6rem; line-height: 38px; padding: 0 20px; }
  .band-box .btn { font-size: 1.2rem; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .band-box strong { font-size: 2.1rem; }
  .band-box p { font-size: 1.8rem; line-height: 46px; }
  .band-box .btn { font-size: 1.2rem; }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .band-box strong { font-size: 2.3rem; }
  .band-box p { font-size: 2.1rem;  line-height: 48px; }
}

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

.band-box-2 { background-image:url('/images/main/cc_20707832.jpg') }
.band-box-2 { background-repeat: no-repeat; background-position: center bottom; background-attachment: fixed; background-size: cover; position: relative; width: 100%; height: 100%; text-align: center; color: #fff; }
.band-box-2:before {content: '';display: block;width: 100%;height: 100%; background-color: rgba(27, 36, 44, 0.45); position: absolute;top: 0;left: 0;z-index: 0;}
.band-box-2 strong { width: 100%; font-size: 2.6rem; display: block; position: relative; z-index: 1; }
.band-box-2 .line { display: block; width: 1px; height: 25px; background-color: #fff; margin: 0 auto 24px auto; position: relative; z-index: 1; }
.band-box-2 p { width: 100%; font-size: 2.1rem; line-height: 32px; margin-bottom: 10px; position: relative; z-index: 1; }
.band-box-2 p.p-txt1 { font-size: 2.2rem; margin-bottom: 10px; }
.band-box-2 p.p-txt2 { font-size: 1.5rem; margin-bottom: 0px; }
.band-box-2 span { width: 100%; }
.band-box-2 .btn { font-size: 1.5rem; background-color: transparent; border: 1px solid #fff; color: #fff; position: relative; padding: 6px 20px 8px 20px; z-index: 1; }

.company-info {
      padding-bottom: 40px !important;
  }

.company-core {
     min-height: 400px !important; 
  }


@media (max-width: 383px) {
  .band-box-2 { height: 350px; }
  .band-box-2 strong { font-size: 1.8rem; }
  .band-box-2 p { font-size: 1.4rem !important; line-height: 33px; }
  .band-box-2 .btn { font-size: 1.1rem; }
}
@media (min-width: 384px) and (max-width: 499px) {
  .band-box-2 strong { font-size: 2.0rem; }
  .band-box-2 p { font-size: 1.77rem !important; line-height: 38px; }
  .band-box-2 .btn { font-size: 1.0rem; }
}
@media (min-width: 500px) and (max-width: 575px) {
  .band-box-2 strong { font-size: 2.1rem; }
  .band-box-2 p { font-size: 1.6rem !important; line-height: 38px; }
  .band-box-2 .btn { font-size: 1.2rem; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .band-box-2 strong { font-size: 2.1rem; }
  .band-box-2 p { font-size: 1.8rem !important; line-height: 46px; }
  .band-box-2 .btn { font-size: 1.2rem; }
}
@media (min-width: 768px) and (max-width: 1200px) {
  .band-box-2 strong { font-size: 2.3rem; }
  .band-box-2 p { font-size: 2.1rem !important;  line-height: 48px; }
}


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

.vs-t1 {
    position: relative;
    background-color: #fff;
    padding: 30px 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 20px;
    text-align: center; 
    border: 1px solid #ddd;
}
.box-shadow {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.10);
}

.vs-t1 span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  /* background-color: #fff; */
    margin: 0 auto 20px auto;
    position: relative;
    font-size: 1.5rem;
    min-height: 50px;
}

.vs-t1-span-1 {
    height: 80px;
}

.vs-t1-span-2 {
    font-size: 1.1rem !important;
    margin-bottom: 40px !important;
}
.vs-t1-span-3 {
    font-size: 1.5rem !important;
    height: 100px;
}
.vs-t1-span-3 div {
    width: 100px;
    height: 100px;
    padding: 30px 20px;
    border-radius: 100%;
    color: white;

}

.vs-t1-p-1,
.vs-t1-p-2,
.vs-t1-p-3 {
    margin: 10px auto 15px auto;
    font-size: 1.5rem;
    min-height: 50px;
    height: 60px;
}


.bgcolor-lightblue {
    background-color: rgba(25,158,205,0.8);
}

.bgcolor-lightgreen {
    background-color: rgba(149,183,53,0.7);
}

.bgcolor-lightgold {
    background-color: rgba(185,147,35,0.7);
}


.vs-t1-p-1:after { 
   content: "";
   display: block;
   width: 80px; 
   height: 1px; 
   background: rgba(25,158,205,0.8); 
   margin: 0 auto; 
   margin: 10px auto;   
}


.vs-t1-p-2:after { 
   content: "";
   display: block;
   width: 80px; 
   height: 1px; 
   background: rgba(149,183,53,0.7); 
   margin: 0 auto; 
   margin: 10px auto;   
}

.vs-t1-p-3:after { 
   content: "";
   display: block;
   width: 80px; 
   height: 1px; 
   background: rgba(185,147,35,0.7); 
   margin: 0 auto; 
   margin: 10px auto;   
}


@media (max-width: 767px) {
  .company-core {
    margin-bottom: 40px !important; 
  }

  .vs-t1 {
    padding: 20px 20px;
  }
  
  .sub_visual.bgi-v11 {
      background-position-x: left;
  }  
  
}


.vs-t2 {
    position: relative;
    /* background-color: #fff; */
    padding: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 20px;
    text-align: center; 
    /* border: 1px solid #ccc;    */
}
.vs-t2 span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  /* background-color: #fff; */
    margin: 0 auto;
    position: relative;
    font-size: 1.5rem;
  /*  min-height: 60px; */
}

.vs-t2-line-1 { padding: 15px; }
.vs-t2-line-2 { padding: 25px 15px 5px 15px; }

.vs-t2-span-1 {
    height: 80px;
}

.vs-t2-span-2 {
    font-size: 1.0rem !important;
  /* margin-bottom: 40px !important; */
}
.vs-t2-span-3 {
    font-size: 1.5rem !important;
    height: 100px;
}
.vs-t2-span-3 div {
    width: 100px;
    height: 100px;
    padding: 30px 20px;
    border-radius: 100%;
    color: white;

}

.vs-t2-p-1,
.vs-t2-p-2,
.vs-t2-p-3 {
    margin: 10px auto 15px auto;
    font-size: 1.5rem;
    min-height: 50px;
    height: 60px;
}


.vs-t2-p-1:after { 
   content: "";
   display: block;
   width: 80px; 
   height: 1px; 
   background: #199ecdd4; 
   margin: 0 auto; 
   margin: 10px auto;   
}


.vs-t2-p-2:after { 
   content: "";
   display: block;
   width: 80px; 
   height: 1px; 
   background: #95b735c2; 
   margin: 0 auto; 
   margin: 10px auto;   
}

.vs-t2-p-3:after { 
   content: "";
   display: block;
   width: 80px; 
   height: 1px; 
   background: #b99323ba; 
   margin: 0 auto; 
   margin: 10px auto;   
}


@media (max-width: 414px) {
  .vs-t2-line-1, .vs-t2-line-2 { padding: 0px; }
  .vs-t2 { 
    padding: 5px; 
    /* min-height: 155px;  */
    }
}

@media (min-width: 415px) and (max-width: 767px) {
  .company-core {
    margin-bottom: 40px !important; 
  }

  .vs-t2 {
    padding: 5px;
  /*  min-height: 140px; */
  }
  
  .vs-t2-line-1, .vs-t2-line-2 { padding: 0px; }

  .sub_visual.bgi-v11 {
      background-position-x: left;
  }  
  
}

@media (min-width: 768px) and (max-width: 1200px) {
  .vs-t2-line-1, .vs-t2-line-2 { padding: 0px; }
  .vs-t2 span { 
   /* min-height: 130px; */
  }
}



/* -------------------------------------------------------------------- */
/* BOARD AREA
/* -------------------------------------------------------------------- */

.board_info_area {
    position: relative;
    min-height: 46px;
    margin: 0 8px 15px 8px;
    font-size: 1rem;
}
.board_info_area .l_sec {
    position: absolute;
    left: 0;
    bottom: 0;
}
.board_info_area .r_sec {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
    text-align: right;
    margin-right: -15px;

}
.board_search {
    position: relative;
    display: inline-block;
    padding: 0 10px;
    margin: 0 5px;
    border: 1px solid #2d5b79;
    background-color: #fff;
    width: 420px;
}
.board_info_area .board_search {
    width: 258px;
    margin: 0;
    vertical-align: top;
}
.board_info_area .board_search.tp2 {
    width: auto;
    padding-right: 38px;
}

.board_info_area .board_search input {
    border: 0 none;
    height: 44px;
    line-height: 44px;
    width: 377px;
}
.board_info_area .board_search input {
    width: 200px;
}
.sp_com {
    display: inline-block;
    overflow: hidden;
    background: url(/images/common/search-img.jpg) no-repeat 0 0;
    line-height: 999px;
    vertical-align: top;
}
.board_search .sp_com {
    position: absolute;
    right: 15px;
    top: -3px;
    width: 30px;
    height: 28px;
    background-position: -9px -11px;
}


/* 시공사례 : 총 건수 */
.board_info_area .l_sec { 
   display: block;
 }

@media (max-width: 1200px) {
  #detail .detail { padding: 20px 10px !important; } 
  #atta .bdr { padding: 10px 10px 0px 10px !important; } 
  .nxtbakwd, #backTitle, #nextTitle { padding: 10px !important; } 
}

@media (max-width: 767px) {
    .board_info_area .l_sec { display: none !important; }

    .board_info_area { margin: 0px 0px 15px 0px; }
    .board_info_area .r_sec { padding-left: 0px; padding-right: 0px; margin-left: 0px; margin-right: 0px; }
    .board_info_area .board_search.tp2 { width: inherit; }
    .board_info_area .board_search input { width: inherit; }

    .nxtbakwd, #backTitle, #nextTitle { font-size: 14px !important; } 

}



 .filtr-container .filtr-item {
  padding: 15px !important;
 }
 
/* .bs-btn {
  margin: 0 0 30px 0;
 }
*/
  #detail .detail {
    padding: 30px; 
  } 
 
}

.visionImg { height: 65%; overflow: hidden; }
.em-msbox { padding: 15px 0 0 0px; }
.em-msbox p:first-child { color: coral; font-size: 0.9rem; margin-bottom: 0; }
.em-msbox p:last-child { color: #666; font-size: 1.0rem; }

@media (max-width:991px) {
  .visionImg { display: none; }
  #estimate {
    padding-left: 0px !important; 
    padding-right: 0px !important; 
  }
  .em-msbox { padding: 15px 15px 0 15px; }
  
}



/* -------------------------------------------------------------------- */
/* Scaffolding AREA
/* -------------------------------------------------------------------- */
.scaffol-info {
  padding-left: 0px; 
  padding-right: 0px; 
}

.scaffol-item-title {
  font-size: 1.2rem;
/*  border-bottom: 1px solid #bbb; */
  margin-bottom: 1.5rem;
}

.scaffol-item-title:after {
   content: "";
   display: block;
   width: 92px;
   border-bottom: 1px solid #bbb;
   margin: 8px 1px;  
}



/* -------------------------------------------------------------------- */
/* INFORMATION USEINFO SECTION
/* -------------------------------------------------------------------- */

.sub_visual.info91 { background-image: url(/images/sub/cc_20708753.jpg); background-position-y: top; position: relative; }
.sub_visual.info91 h2 { 
    font-size: 4rem; 
    color: #fff; 
    text-align: center; 
    line-height: 100%; 
    position: absolute; 
    width: 100%; 
    font-weight: 800; 
    padding-top: 9.5rem; 
    text-shadow: 2px 2px black;
}
.info91 p { color: #fff; text-align: center; line-height: 264px; position: absolute; width: 100%; padding-top: 6rem; margin: 0; }

.sub_visual.info91 .lay-color { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(125,125,125,0.25); 
    filter: blur(3px); 
    -webkit-filter: blur(3px);
}


#info .person .TopTitle {
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 30px;
    color: #C94D65;
}
#info .person dl {
    margin-bottom: 20px;
    position: relative;
}
#info .person dt {
    line-height: 1.5em;
    color: #555;
    font-size: 16px;
    padding-bottom: 5px;
}
#info .person dd {
    line-height: 25px;
    font-size: 15px;
    /* padding-left: 20px; */
}
#info .person dd.pl {
    padding-left: 45px;
}



/* -------------------------------------------------------------------- */
/* MAIN 시공사례
/* -------------------------------------------------------------------- */

.product-grid6,.product-grid6 .product-image6{overflow:hidden}
.product-grid6{margin-bottom: 25px;text-align:left;position:relative;transition:all .5s ease 0s}
.product-grid6:hover{box-shadow:0 0 10px rgba(0,0,0,.3)}
.product-grid6 .product-image6 a{display:block}
.product-grid6 .product-image6 img{width:100%;height:auto;transition:all .5s ease 0s}
.product-grid6:hover .product-image6 img{transform:scale(1.1)}
.product-grid6 .product-content{padding:12px 12px 15px;transition:all .5s ease 0s}
.product-grid6:hover .product-content{opacity:0}
.product-grid6 .title{font-size:16px;font-weight:normal;text-transform:capitalize;margin:2px;transition:all .3s ease 0s}
.product-grid6 .title a:hover{color:#2e86de}
.product-grid6 .price{font-size:16px;font-weight:normal;color:#666}
.product-grid6 .price span{color:#999;font-size:15px;font-weight:400;text-decoration:line-through;margin-left:7px;display:inline-block}
.product-grid6 .social{rgba(198,216,222,0.4);width:100%;padding:0;margin:0;list-style:none;opacity:0;transform:translateX(-50%);position:absolute;bottom:-50%;left:50%;z-index:1;transition:all .5s ease 0s;text-align: center;}
.product-grid6:hover .social{opacity:1;bottom:20px}
.product-grid6 .social li{display:inline-block}
.product-grid6 .social li a{color:#909090;font-size:16px;line-height:45px;text-align:center;height:45px;width:45px;margin:0 7px;border:1px solid #909090;border-radius:50px;display:block;position:relative;transition:all .3s ease-in-out}
.product-grid6 .social li a:hover{color:#fff;background-color:#2e86de;width:80px}
.product-grid6 .social li a:after,.product-grid6 .social li a:before{content:attr(data-tip);color:#fff;background-color:#2e86de;font-size:12px;letter-spacing:1px;line-height:20px;padding:1px 5px;border-radius:5px;white-space:nowrap;opacity:0;transform:translateX(-50%);position:absolute;left:50%;top:-30px}
.product-grid6 .social li a:after{content:'';height:15px;width:15px;border-radius:0;transform:translateX(-50%) rotate(45deg);top:-20px;z-index:-1}
.product-grid6 .social li a:hover:after,.product-grid6 .social li a:hover:before{opacity:1}
.product-new-label{background-color:#e67e22;color:#fff;font-size:17px;padding:2px 10px;position:absolute;right:10px;top:10px;transition:all .3s}
@media only screen and (max-width:990px){.product-grid6{margin-bottom:30px}
}

.mainCaseImg  { min-width: 100%; height: 400px !important; }

@media (max-width:575px) {
  .mainCaseImg { height: 390px !important; }
  #cnt-4, #cnt-5 { display: none; }
}

@media (min-width:576px) and (max-width:767px) {
  .mainCaseImg { height: 290px !important; }
}

@media (min-width:768px) and (max-width:991px) {
  .mainCaseImg { height: 250px !important; }
}


/* -------------------------------------------------------------------- */
/* FAQ 자주하는질문
/* -------------------------------------------------------------------- */

#customerList { padding: 20px 0; }
#customerList .q span { font-size: 1.5rem; padding-right: 10px; }
#customerList .a span { font-size: 1.5rem; padding-right: 10px; margin-left: -35px; }
#customerList .a span.attach { margin: 0 5px; font-size: 1rem; color: #fff; }
#customerList .a a i { width: 17px; color: #fff; }  
#customerList .a a .fa-file { width: 17px; color: #fff; }  
#customerList .a a:hover { text-decoration: underline; text-underline-position: under; }



/* -------------------------------------------------------------------- */
/* 고객센타
/* -------------------------------------------------------------------- */

.btndown {
    background: #0887c2;
    font-size: 14px;
    line-height: inherit;
    padding: 0px 10px 2px 0px;
    font-weight: 400;
    margin: 0 5px;
    color: #fff;
}
.fa-file-download { font-size: 1.3rem; margin-left:10px; }

.file-dw { border: 1px solid #ddd; padding: 2px 15px 5px 0px; line-height: 2rem; margin-left: -13px; }
.file-dw i, .file-dw svg { height: 0.75em; }

#attafile { margin-top: 10px; }
#attafile li { line-height: 1.8rem; }
#attafile li a i, #attafile li a svg { height: 0.75em; }

.tblView td a { display: initial; }

.img-size { width: 100% !important; height: auto !important; }