body {
  font-family: "NanumSquare", Arial, sans-serif;
  box-sizing: border-box !important;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.7;
  color: #232323;
  background: #fff;
}
@media screen and (max-width: 992px) {
	span.block{
		display:block;
	}
}
@media screen and (max-width: 390px) {
	body {
		font-size: 14px;
	}
}

#page {
  position: relative;
  overflow-x: hidden;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

p {
  margin-bottom: 20px;
}

h1, h2, h3, h4, h5, h6, figure {
  color: #000;
  font-family: "NanumSquare", Arial, sans-serif;
  font-weight: 400;
  margin: 0 0 20px 0;
}

::-webkit-selection {
  color: #fff;
  background: #2F5597;
}

::-moz-selection {
  color: #fff;
  background: #2F5597;
}

::selection {
  color: #fff;
  background: #2F5597;
}
#page .contents .ft-wh {
	color:#FFF !important;
}
#page .contents .ft-bk {
	color:#333 !important;
}
#page .contents .ft-pink {
	color:#e40580;
}
#page .contents .ft-orange {
	color:#f05120;
}
#page .contents .ft-gray {
	color:#a3a3a3;
	font-weight:600;
}
#page .contents .ft-lt {
	text-decoration:line-through;
}
#page .contents .ft-14 {
	font-size:14px;
	line-height: 1.3em;
}
#page .contents .ft-16 {
	font-size:16px;
	line-height: 1.3em;
}
#page .contents .ft-18 {
	font-size:18px;
	line-height: 1.3em;
}
#page .contents .ft-20 {
	font-size:20px;
	line-height: 1.3em;
}
#page .contents .ft-24 {
	font-size:24px;
	line-height: 1.3em;
}
#page .contents .ft-30 {
	font-size:30px;
	line-height: 1.3em;
}
#page .contents .ft-36 {
	font-size:30px;
	line-height: 1.3em;
}
#page .contents .ft-40 {
	font-size:40px;
	line-height: 1.3em;
}
#page .contents .ft-48 {
	font-size:48px;
	line-height: 1.3em;
}
#page .contents .ft-w400 {
	font-weight:400 !important;
}
#page .contents .ft-w600 {
	font-weight:600 !important;
}
#page .contents .bg-pink {
	background:#ffe3f2;
}
#page .contents .bg-white {
	background:#FFF !important;
}
@media screen and (max-width: 768px) {
	#page .contents .ft-14 {
		font-size:10px !important;
	}
	#page .contents .ft-16 {
		font-size:12px !important;
	}
	#page .contents .ft-18 {
		font-size:14px !important;
	}
	#page .contents .ft-20 {
		font-size:16px !important;
	}
	#page .contents .ft-24 {
		font-size:18px !important;
	}
	#page .contents .ft-30 {
		font-size:20px !important;
	}
	#page .contents .ft-36 {
		font-size:20px !important;
	}
	#page .contents .ft-40 {
		font-size:22px !important;
	}
	#page .contents .ft-48 {
		font-size:24px !important;
	}
	#page .contents.gray-bg2 {
		padding:1em 0 0 0 !important;
	}
}

#fh5co-header,
#fh5co-partner,
.fh5co-bg {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
}

.fh5co-bg {
  background-size: cover;
  background-position: center center;
  position: relative;
  width: 100%;
  float: left;
  position: relative;
}

header .navbar {
  border-bottom: 1px solid #ffffff91;
}

#page.phone #fh5co-header{
  background-position: right 25% center !important;
}
#page.callcenter #fh5co-header{
  background-position: right center !important;
}
#fh5co-header a {
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
#fh5co-header a:hover {
  color: white;
  border-bottom: 1px solid white;
}

.fh5co-cover {
  height: 795px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  float: left;
  width: 100%;
  overflow: hidden;
}
#fh5co-header.title-banner-ev {
	height: 500px;
	overflow:hidden;
}

#fh5co-header.title-banner-led {
	height: 90vh;
	overflow:hidden;
}
#fh5co-header.title-banner-led .top-banner{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:120vh;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: top center;
}
#fh5co-header.title-banner-led #car {
	width: 100%;
    height:45vh;
    position: absolute;
    bottom: 0;
    right: 0;
	border: 0px solid red;
    background-repeat: no-repeat;
    background-size: 60vh;
    background-position: 150% -100px;

	animation-name: car_move;
	animation-delay: 1s;
	animation-duration: 10s;
	animation-iteration-count:infinite;
	animation-direction: normal;
	animation-fill-mode: backwards;
}
@keyframes car_move{
  0%{
    background-position: 100vw 0;
    background-size: 60vh;
  }
  50%{
    background-position: 35vw 10vh;
    background-size: 63vh;
  }
  100%{
    background-position: -70vw 20vh;
    background-size: 66vh;
  }
}
@media screen and (max-width: 768px) {
	#fh5co-header.title-banner-ev {
		background-position: top left;
	}
	#fh5co-header.title-banner-led {
		height: 50vh;
	}
	#fh5co-header.title-banner-led .top-banner{
		height: 50vh;
	}
	#fh5co-header.title-banner-led #car {
		height: 26vh;
		background-size: 35vh;
		animation-name: car_move_m;
		animation-delay: 1s;
		animation-duration: 10s;
		animation-iteration-count:infinite;
		animation-direction: normal;
		animation-fill-mode: backwards;
	}
	#fh5co-header.title-banner-led.fh5co-cover .display-tc h1{
		margin-top: -80px;
	}
	@keyframes car_move_m{
	  0%{
		background-position: 100vw 0;
		background-size: 35vh;
	  }
	  50%{
		background-position: 35vw 5vh;
		background-size: 38vh;
	  }
	  100%{
		background-position: -100vw 10vh;
		background-size: 41vh;
	  }
	}
}
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 768px) {
	@keyframes car_move{
	  0%{
		background-position: 100vw 0;
		background-size: 60vh;
	  }
	  50%{
		background-position: 35vw 10vh;
		background-size: 63vh;
	  }
	  100%{
		background-position: -120vw 20vh;
		background-size: 66vh;
	  }
	}
}
/*
.fh5co-cover .overlay {
  z-index: 99;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(42, 51, 86, 0);
  animation: fade-out 3s steps(50) 1;
}

@keyframes fade-out{
  0%{
    background: rgba(42, 51, 86, 1);
    opacity:1;
  }
  30%{
    background: rgba(42, 51, 86, 0.5);
    opacity:0;
  }
  100%{
    background: rgba(42, 51, 86, 0);
    opacity:0;
  }
}
*/
.fh5co-cover.title-banner {
  background-size: 100% auto;
  background-position: center 70%;
  animation: banner 2s ease-out alternate infinite;
}
.fh5co-cover.title-banner h1{
  font-weight: 600;
}
.fh5co-cover h1{
  font-weight: 600;
}
@keyframes banner{
  from {
    background-position: center 70%;
  }
  to {
    background-position: center 70%;
  }
}

@media screen and (max-width: 992px) {
  .fh5co-cover.title-banner {
    background-size: 100% auto;
    background-position: center bottom;
    animation: banner 2s ease-out alternate infinite;

  }
  @keyframes banner{
    from {
      background-position: center bottom;
    }
    to {
      background-position: center bottom;
    }
  }
}

.fh5co-cover .overlay.gradient {
  z-index: 99;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;

  background: linear-gradient( 8deg, #ffffff00 70%, #424242 );
  opacity: 0.4;
}
.fh5co-cover .overlay.gradient.white {
  background: linear-gradient( 330deg, #ffffff00 70%, #d1d1d1 );
}

.fh5co-cover .slide {
  width: 100%;
  height: 800px;
  display: flex;
  overflow: hidden;
  background-image: url("/images/front/main/main_banner1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;

  transform: scale(1.2);
  opacity: 1;
  transition: all 1s ease-in-out;
}
.fh5co-cover .slide.hide {
  display:none;
}
.fh5co-cover .showing {
  z-index: 1;
  transform: none;
  opacity: 1;
}
.fh5co-cover .slide:first-child {
  background-image: url("/images/front/main/main_banner3.jpg");
}
.fh5co-cover .slide:last-child {
  background-image: url("/images/front/main/main_banner1.jpg");
}

.fh5co-cover .slide-title {
  z-index: 0;
  transition: 0.3s;
  opacity: 0;
  box-sizing: border-box;
}

.fh5co-cover .showing-title {
  z-index: 1;
  transition: 0.3s;
  opacity: 1;
}

.fh5co-cover > .fh5co-container {
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  .fh5co-cover {
    height: 595px;
  }
  .fh5co-cover .slide {
    height: 600px;
  }
  .fh5co-cover .slide:nth-child(1) {
    background-position: center left 40%;
  }

  .fh5co-cover .slide:nth-child(2) {

    background-position: center left 60%;
  }

}
.fh5co-cover .display-t,
.fh5co-cover .display-tc {
  z-index: 999;
  height: 900px;
  display: table;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .fh5co-cover .display-t,
  .fh5co-cover .display-tc {
    height: 600px;
  }
  .fh5co-cover .display-t {
    padding-left: 30px;
    padding-right: 30px;
  }
}
.fh5co-cover.fh5co-cover-sm {
  height: 600px;
}
@media screen and (max-width: 768px) {
  .fh5co-cover.fh5co-cover-sm {
    height: 400px;
  }
}
.fh5co-cover.fh5co-cover-sm .display-t,
.fh5co-cover.fh5co-cover-sm .display-tc {
  height: 600px;
  display: table;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .fh5co-cover.fh5co-cover-sm .display-t,
  .fh5co-cover.fh5co-cover-sm .display-tc {
    height: 400px;
  }
}

.fh5co-cover .display-tc p {
  margin: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .fh5co-cover .display-tc p {
    font-size: 20px;
  }
}

.container {
  position: sticky;
  z-index: 9;
}

/* 메인 타이틀 */
#fh5co-header.fh5co-cover .display-tc.slide-title:nth-child(2) {
  position: absolute;
  top: 50%;
}
#fh5co-header.fh5co-cover .display-tc.slide-title:nth-child(1) {
  position: absolute;
  top: 15%;
  left:35%;
  color:#774100;
}

#fh5co-header.fh5co-cover .display-tc.slide-title:nth-child(2) .main-title:nth-child(2) {
  font-weight: 700;
}

#fh5co-header.fh5co-cover .display-tc.slide-title:nth-child(1) .main-title:nth-child(2) {
  padding-left:20%;
  font-weight: 900;
}

@media screen and (max-width: 768px) {
  #fh5co-header.fh5co-cover .display-tc.slide-title:nth-child(1) {
    left:0;
    text-align: right;
    padding-right:30px;
  }
  .main-title {
    width:90%;
    display:inline-block;
    margin-bottom: 0;
  }

}
@media (min-width: 768px) {
  .container {
    width:96%;
  }
  .main-title {
    width:90%;
    display:inline-block;
    margin-bottom: 0;
  }

}
@media (min-width: 1200px) {
  .container {
    width: 1280px;
  }
  .main-title {
    width:750px;
    display:inline-block;
    margin-bottom: 20px;
  }
}


.main-title:not(.gray) span {
  position: relative;
  color: white;
  transform: translate(-50%, -50%);

}
.main-title:not(.gray) span::before {
  z-index:-1;
  content: "";
  position: absolute;
  width: 100%;
  height: 120%;
  top: -3px;
  left: 0;
  background: rgb(238, 249, 255);
  color: rgb(238, 249, 255);
  filter: blur(20px);
  opacity: 0;

  animation: flash 2s ease-out alternate infinite;
}


#fh5co-header .display-tc .main-title.gray, #fh5co-header .display-tc .main-title.gray span {
  color: #353535;
}
#fh5co-header .display-tc .main-title.gray::before {
  z-index:-1;
  content: "";
  position: absolute;
  width: 230px;
  height: 45px;

  background: rgb(255, 255, 255);
  background-position: center center;
  filter: blur(20px);
  opacity: 0.5;
}
@media screen and (max-width: 768px) {
  #fh5co-header .display-tc .main-title.gray::before {
    filter: blur(10px);
    opacity: 0.5;
  }
}

@keyframes flash{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.5;
  }
}


.fh5co-staff {
  text-align: center;
  margin-bottom: 30px;
  background: #fff;
  padding: 30px;
  float: left;
  width: 100%;
}
.fh5co-staff img {
  width: 100px;
  margin-bottom: 20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.fh5co-staff h3 {
  font-size: 24px;
  margin-bottom: 5px;
}
.fh5co-staff p {
  margin-bottom: 30px;
}
.fh5co-staff .role {
  color: #bfbfbf;
  margin-bottom: 30px;
  font-weight: normal;
  display: block;
}

.pagination a {
  background: none;
  border: none !important;
  color: gray !important;
}
.pagination a:hover, .pagination a:focus, .pagination a:active {
  background: none !important;
}
.pagination > li > a {
  margin: 0 2px;
  font-size: 18px;
  padding: 0 !important;
  background: none;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  -ms-border-radius: 50% !important;
  -o-border-radius: 50% !important;
  border-radius: 50% !important;
  height: 50px;
  width: 50px;
  line-height: 50px;
  display: table-cell;
  vertical-align: middle;
}
.pagination > li > a:hover {
  color: #000;
  background: #e6e6e6 !important;
}
.pagination > li.disabled > a {
  background: none;
}
.pagination > li.active > a {
  background: #F73859 !important;
  -webkit-box-shadow: 4px 11px 35px -14px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 4px 11px 35px -14px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 4px 11px 35px -14px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 4px 11px 35px -14px rgba(0, 0, 0, 0.5);
  box-shadow: 4px 11px 35px -14px rgba(0, 0, 0, 0.5);
  color: #fff !important;
}
.pagination > li.active > a:hover {
  cursor: pointer;
  background: #f96982 !important;
}

.fh5co-social-icons {
  margin: 0;
  padding: 0;
}
.fh5co-social-icons li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}
.fh5co-social-icons li a {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  color: #F73859;
  padding-left: 10px;
  padding-right: 10px;
}
.fh5co-social-icons li a i {
  font-size: 20px;
}

.fh5co-contact-info ul {
  padding: 0;
  margin: 0;
}
.fh5co-contact-info ul li {
  padding: 0 0 0 70px;
  margin: 0 0 30px 0;
  list-style: none;
  position: relative;
}
.fh5co-contact-info ul li:before {
  color: #ccddea;
  position: absolute;
  left: 0;
  top: .05em;
  font-family: 'NanumSquare';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fh5co-contact-info ul li.address:before {
  font-size: 30px;
  content: "\e9d1";
}
.fh5co-contact-info ul li.phone:before {
  font-size: 23px;
  content: "\e9f4";
}
.fh5co-contact-info ul li.email:before {
  font-size: 23px;
  content: "\e9da";
}
.fh5co-contact-info ul li.url:before {
  font-size: 23px;
  content: "\e9af";
}

#fh5co-header .display-tc,
#fh5co-partner .display-tc,
#fh5co-news .display-tc,
.fh5co-cover .display-tc {
  display: table-cell/* !important*/;
  vertical-align: middle;
}
#fh5co-header .display-tc h1, #fh5co-header .display-tc h2,
#fh5co-partner .display-tc h1,
#fh5co-partner .display-tc h2,
.fh5co-cover .display-tc h1,
.fh5co-cover .display-tc h2 {
  margin: 0;
  padding: 0;
  color: white;
  font-family: "NanumSquare", Arial, sans-serif;
}
#fh5co-header .display-tc h1,
#fh5co-partner .display-tc h1,
.fh5co-cover .display-tc h1 {
  margin-bottom: 0px;
  margin-top: 0;
  font-size: 65px;
  line-height: 1.3;
}

#fh5co-header .display-tc h2,
#fh5co-partner .display-tc h2,
.fh5co-cover .display-tc h2 {
  font-size: 25px;
  line-height: 1.5;
  margin-bottom: 0;
  text-transform: uppercase;
}

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

  #fh5co-header .display-tc h1,
  #fh5co-partner .display-tc h1,
  .fh5co-cover .display-tc h1 {
    font-size: 30px;
  }

  #fh5co-header .display-tc h2,
  #fh5co-partner .display-tc h2,
  .fh5co-cover .display-tc h2 {
    font-size: 15px;
    font-weight: 600;
  }


}

@media (min-width: 768px) {
  #fh5co-header .display-tc h1,
  #fh5co-partner .display-tc h1,
  .fh5co-cover .display-tc h1 {
    font-size: 45px;
  }

  #fh5co-header .display-tc h2,
  #fh5co-partner .display-tc h2,
  .fh5co-cover .display-tc h2 {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {

  #fh5co-header .display-tc h1,
  #fh5co-partner .display-tc h1,
  .fh5co-cover .display-tc h1 {
    font-size: 55px;
  }

  #fh5co-header .display-tc h2,
  #fh5co-partner .display-tc h2,
  .fh5co-cover .display-tc h2 {
    font-size: 20px;
  }

}
#fh5co-header .display-tc .btn,
#fh5co-partner .display-tc .btn,
.fh5co-cover .display-tc .btn {
  padding: 15px 30px;
  background: #F73859;
  color: #fff;
  border: none !important;
  font-size: 18px;
  text-transform: uppercase;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
#fh5co-header .display-tc .btn:hover,
#fh5co-partner .display-tc .btn:hover,
.fh5co-cover .display-tc .btn:hover {
  background: #f6163c !important;
  -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
  -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
  box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
}
#fh5co-header .display-tc .or,
#fh5co-partner .display-tc .or,
.fh5co-cover .display-tc .or {
  color: rgba(255, 255, 255, 0.3);
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
  padding: 0 20px;
}
#fh5co-header .display-tc .link-watch,
#fh5co-partner .display-tc .link-watch,
.fh5co-cover .display-tc .link-watch {
  border-bottom: none;
}
#fh5co-header .display-tc .form-inline .form-group,
#fh5co-partner .display-tc .form-inline .form-group,
.fh5co-cover .display-tc .form-inline .form-group {
  width: 100% !important;
  margin-bottom: 10px;
}
#fh5co-header .display-tc .form-inline .form-group .form-control,
#fh5co-partner .display-tc .form-inline .form-group .form-control,
.fh5co-cover .display-tc .form-inline .form-group .form-control {
  width: 100%;
  background: #fff;
  border: none;
}

.fh5co-bg-section {
  background: #F0F5F9;
}

#fh5co-services,
#fh5co-started,
#fh5co-news,
#fh5co-blog,
#fh5co-project,
#fh5co-title,
#fh5co-about,
#fh5co-team,
#fh5co-contact {
  padding: 7em 0;
  clear: both;
}

@media screen and (max-width: 768px) {
  #fh5co-services,
  #fh5co-started,
  #fh5co-news,
  #fh5co-blog,
  #fh5co-project,
  #fh5co-title,
  #fh5co-about,
  #fh5co-team,
  #fh5co-contact {
    padding: 3em 0;
  }
}

#fh5co-news img {
  -webkit-box-shadow: -2px 11px 20px -10px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: -2px 11px 20px -10px rgba(0, 0, 0, 0.9);
  box-shadow: -2px 11px 20px -10px rgba(0, 0, 0, 0.9);
}
#fh5co-project h2, #fh5co-project h3,
#fh5co-news h2, #fh5co-news h3 {
  font-weight: 700;
}
#fh5co-news .news {
  display: flex;
  flex-wrap: wrap;
}
#fh5co-news .news blockquote {
  border-left: none;
  padding: 0;
  margin: 0;
}
#fh5co-news .news p {
  color: #666666;
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 6px;
}

#fh5co-news .news p:last-child {
  margin-bottom: 0;
}

#fh5co-news .news.fh5co-selected {
  background: #F73859;
  bottom: 10px;
  -webkit-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
}

#fh5co-blog .fh5co-post {
  background: #fff;
  float: left;
  width: 100%;
  margin-bottom: 30px;
  padding: 30px;
  -webkit-box-shadow: -2px 11px 24px -10px rgba(0, 0, 0, 0.09);
  -moz-box-shadow: -2px 11px 24px -10px rgba(0, 0, 0, 0.09);
  box-shadow: -2px 11px 24px -10px rgba(0, 0, 0, 0.09);
  position: relative;
  bottom: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
#fh5co-blog .fh5co-post h3 {
  margin-bottom: 20px;
}
#fh5co-blog .fh5co-post h3 a {
  color: #F73859;
}
#fh5co-blog .fh5co-post h3 a:hover {
  color: #f35f55;
}
#fh5co-blog .fh5co-post .fh5co-date {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 12px;
  color: #cccccc;
  letter-spacing: .07em;
}
#fh5co-blog .fh5co-post p.author {
  color: #b3b3b3;
}
#fh5co-blog .fh5co-post p.author img {
  width: 50px;
  margin-right: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
#fh5co-blog .fh5co-post p.author cite {
  font-style: normal;
  font-size: 13px;
}
#fh5co-blog .fh5co-post p:last-child {
  margin-bottom: 0;
}
#fh5co-blog .fh5co-post:hover, #fh5co-blog .fh5co-post:focus {
  bottom: 10px;
}
@media screen and (max-width: 768px) {
  #fh5co-blog .fh5co-post:hover, #fh5co-blog .fh5co-post:focus {
    bottom: 0;
  }
}
#fh5co-team {
	word-break: keep-all;
	color:#363636;
	font-size:18px;
	font-weight:800;
	line-height: 2;
}
@media screen and (max-width: 768px) {
	#fh5co-team {
		font-size:14px;
	}
}

#fh5co-partner {
  background: #fff;
  padding: 7em 0;
  text-align: center;
}
#fh5co-partner p {
  color: #666666;
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 6px;
}
@media screen and (max-width: 768px) {
  #fh5co-partner {
    padding: 3em 0;
  }
}
#fh5co-partner .counter {
  font-size: 50px;
  margin-bottom: 10px;
  color: #F73859;
  font-weight: 100;
  display: block;
}
#fh5co-partner .counter-label {
  margin-bottom: 0;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: .1em;
}
#fh5co-partner .feature-center:hover .counter {
  color: #fff;
}
@media screen and (max-width: 768px) {
  #fh5co-partner .feature-center {
    margin-bottom: 30px;
  }
}
#fh5co-partner .icon {
  width: 70px;
  text-align: center;
  margin-bottom: 20px;
  background: none !important;
  border: none !important;
}
#fh5co-partner .icon i {
  height: 70px;
}
#fh5co-partner .icon i:before {
  color: #cccccc;
  display: block;
  text-align: center;
  margin-left: 3px;
}


.slider-container {
  width: 100%;
  height: 500px;
  display: flex;
  overflow: hidden;
}
.slider-container > .slider-list {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: loop 80s linear infinite;
  -webkit-animation: loop 80s linear infinite;
}


.slider-container > .slider-list .slide-img {
  width: 500px;
  height: auto;
  margin: 40px 0;
}
.slider-container > .slider-list .slide-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


@keyframes loop {
  from {
    transform : translateX(0);
  }
  to {
    transform : translateX(-100%);
  }
}
@-webkit-keyframes loop {
  from {
    transform : translateX(0);
  }
  to {
    transform : translateX(-100%);
  }
}


.slider-container:hover > .slider-list {
  animation-play-state: paused;
 }


 #fh5co-partner .slider-container {
  width: 100%;
  height: 100px;
  display: flex;
  overflow: hidden;
}

#fh5co-partner .slider-container > .slider-list .slide-img {
  width: 130px;
  height: auto;
  margin: 0 60px;
}
@media screen and (max-width: 768px) {
  #fh5co-partner .slider-container > .slider-list .slide-img {
    width: 110px;
    height: auto;
    margin: 0 20px;
  }
}

#fh5co-project .fh5co-project > a {
  display: block;
  color: #000;
  position: relative;
  bottom: 0;
  overflow: hidden;

  -webkit-box-shadow: 0px 5px 20px -2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 5px 20px -2px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 5px 20px -2px rgba(0, 0, 0, 0.4);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
#fh5co-project .fh5co-project > a img {
  position: relative;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

#fh5co-project .fh5co-project > a .fh5co-copy {
  z-index: 12;
  position: absolute;
  right: 20px;
  left: 20px;
  bottom: 20px;
  text-align: left;
   /*opacity: 1;
  visibility: hidden;*/
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

#fh5co-project .fh5co-project > a .fh5co-copy h3 {
  z-index:1;
  margin: 0 0 5px 0;
  padding: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

#fh5co-project .fh5co-project > a .fh5co-copy p {
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
}
#fh5co-project .fh5co-project > a .fh5co-copy p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #fh5co-project .fh5co-project > a .fh5co-copy {
    z-index: 12;
    position: absolute;
    right: 20px;
    left: 20px;
    bottom: 20px;
    text-align: left;
     /*opacity: 1;
    visibility: hidden;*/
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
}
#fh5co-project .fh5co-project > a:hover {
  -webkit-box-shadow: 0px 18px 51px -10px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 18px 51px -10px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 18px 51px -10px rgba(0, 0, 0, 0.75);
}
@media screen and (max-width: 768px) {

}
#fh5co-project .fh5co-project > a:hover:after {
  opacity: 0;
  visibility: visible;
}
@media screen and (max-width: 768px) {

}
#fh5co-project .fh5co-project > a:hover .fh5co-copy {
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}
@media screen and (max-width: 768px) {

}


#fh5co-services.border-bottom {
  border-bottom: 1px solid #dae6ef;
  -webkit-box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 5px 7px -7px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 10;
}

.feature-center {
  padding: 30px;
  float: left;
  width: 100%;
  position: relative;
  bottom: 0;
  margin-bottom: 40px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (max-width: 768px) {
  .feature-center {
    margin-bottom: 50px;
  }
}
.feature-center .desc {
  padding-left: 180px;
}
.feature-center .icon {
  margin-bottom: 20px;
  display: block;
}
.feature-center .icon i {
  font-size: 40px;
  color: rgba(42, 54, 59, 0.2);
}
.feature-center .icon2 {
  float: left;
}
.feature-center .icon2 i {
  font-size: 100px;
}
.feature-center p:last-child {
  margin-bottom: 0;
}
.feature-center p, .feature-center h3 {
  margin-bottom: 30px;
}
.feature-center h3 {
  font-size: 22px;
  color: #5d5d5d;
}
.feature-center:hover, .feature-center:focus {
  background: #F73859;
  bottom: 10px;
  -webkit-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 18px 71px -10px rgba(0, 0, 0, 0.75);
}
.feature-center:hover p:last-child, .feature-center:focus p:last-child {
  margin-bottom: 0;
}
.feature-center:hover .icon i, .feature-center:focus .icon i {
  color: rgba(255, 255, 255, 0.7);
}
.feature-center:hover p, .feature-center:hover h3, .feature-center:focus p, .feature-center:focus h3 {
  color: #fff !important;
}
.feature-center:hover a, .feature-center:focus a {
  color: rgba(255, 255, 255, 0.7);
}
.feature-center:hover a:hover, .feature-center:focus a:hover {
  color: #fff;
}
@media screen and (max-width: 768px) {
  .feature-center:hover, .feature-center:focus {
    bottom: 0;
  }
}

.project-grid {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  height: 350px;
  margin-bottom: 40px;
}
.project-grid:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}
.project-grid .desc {
  background: rgba(247, 56, 89, 0.9);
  padding: 10px 20px;
  position: absolute;
  bottom: -93px;
  left: 0;
  right: 0;
  -webkit-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}
.project-grid .desc h3 a {
  color: white;
}
.project-grid .desc span {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
}
@media screen and (max-width: 768px) {
  .project-grid .desc {
    bottom: 0;
  }
}
.project-grid:hover:before, .project-grid:focus:before {
  opacity: 1;
}
.project-grid:hover .desc, .project-grid:focus .desc {
  bottom: 0;
}

.project-content {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  float: left;
  padding: 7em 0;
}
@media screen and (max-width: 768px) {
  .project-content {
    padding: 3em 0;
  }
}
.project-content .col-half {
  width: 50%;
  float: left;
  padding-left: 10px;
  padding-right: 10px;
}
@media screen and (max-width: 480px) {
  .project-content .col-half {
    width: 100%;
  }
}
.project-content .col-half .project, .project-content .col-half .project-grid {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.project-content .col-half .project:before, .project-content .col-half .project-grid:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}
.project-content .col-half .project:hover:before, .project-content .col-half .project:focus:before, .project-content .col-half .project-grid:hover:before, .project-content .col-half .project-grid:focus:before {
  opacity: 1;
}
.project-content .col-half .project:hover .desc, .project-content .col-half .project:focus .desc, .project-content .col-half .project-grid:hover .desc, .project-content .col-half .project-grid:focus .desc {
  bottom: 0;
}
@media screen and (max-width: 480px) {
  .project-content .col-half .project, .project-content .col-half .project-grid {
    height: 340px !important;
    margin-bottom: 20px;
  }
}
.project-content .col-half .project {
  height: 800px;
}
.project-content .col-half .project-grid {
  height: 390px;
  margin-bottom: 20px;
}
.project-content .col-half .project-grid:last-child {
  margin-bottom: 0;
}
.project-content .desc {
  background: rgba(247, 56, 89, 0.9);
  padding: 10px 20px;
  position: absolute;
  bottom: -93px;
  left: 0;
  right: 0;
  -webkit-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s;
}
.project-content .desc h3 {
  color: white;
}
.project-content .desc span {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
}
@media screen and (max-width: 768px) {
  .project-content .desc {
    bottom: 0;
  }
}
.fh5co-mid-heading {
  color: #354656;
  font-size: 20px;
  font-weight: 800;
}
.fh5co-mid2-heading {
  color: #354656;
  font-size: 18px;
  font-weight: 800;

}
.fh5co-heading {
  margin-bottom: 1em;
}
.fh5co-heading.fh5co-heading-sm {
  margin-bottom: 2em;
}
.fh5co-heading h2 {
  font-size: 40px;
  margin-bottom: 0px;
  line-height: 1.5;
  font-weight: 700;
  color: #000;
}
.fh5co-heading h2.blue {
  font-size: 25px;
  font-weight: 800;
  color: #2F5597;
}
.fh5co-heading.underline-thin {
  border-bottom: 2px solid #cccccc;
}
.fh5co-heading.underline-thin {
  border-bottom: 2px solid #cccccc;
}
.fh5co-heading p {
  font-size: 18px;
  line-height: 1.5;
  color: #828282;
}
.fh5co-heading span {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 2px;
  color: #cccccc;
}

#fh5co-bottom .row.bottom {
  max-height: 1200px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#fh5co-bottom .row.bottom video {
  width:100%;
  vertical-align: baseline;
}


#fh5co-started .fh5co-heading h2 {
  color: #fff;
  margin-bottom: 20px !important;
  font-weight: 300;
}
#fh5co-started .fh5co-heading p {
  color: rgba(255, 255, 255, 0.5);
}
#fh5co-started .form-control {
  background: rgba(255, 255, 255, 0.2);
  border: none !important;
  color: #fff;
  font-size: 16px !important;
  width: 100%;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
#fh5co-started .form-control::-webkit-input-placeholder {
  color: #fff;
}
#fh5co-started .form-control:-moz-placeholder {
  /* Firefox 18- */
  color: #fff;
}
#fh5co-started .form-control::-moz-placeholder {
  /* Firefox 19+ */
  color: #fff;
}
#fh5co-started .form-control:-ms-input-placeholder {
  color: #fff;
}
#fh5co-started .form-control:focus {
  background: rgba(255, 255, 255, 0.3);
}
#fh5co-started .btn {
  height: 54px;
  border: none !important;
  background: #F73859;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 400;
  padding-left: 30px;
  padding-right: 30px;
}
#fh5co-started .btn:hover {
  background: #f6163c !important;
  -webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75) !important;
  -moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75) !important;
  box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75) !important;
}
#fh5co-started .form-inline .form-group {
  width: 100% !important;
  margin-bottom: 10px;
}
#fh5co-started .form-inline .form-group .form-control {
  width: 100%;
}


.uppercase {
  font-size: 14px;
  color: #000;
  margin-bottom: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.btn {
  margin-right: 4px;
  margin-bottom: 4px;
  font-family: "NanumSquare", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  padding: 8px 20px;
}
.btn.btn-md {
  padding: 8px 20px !important;
}
.btn.btn-lg {
  padding: 18px 36px !important;
}
.btn:hover, .btn:active, .btn:focus {
  box-shadow: none !important;
  outline: none !important;
}

.btn-primary {
  background: #2F5597;
  color: #fff;
  border: 2px solid #2F5597;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #4e7bc9 !important;
  border-color: #4e7bc9 !important;
}
.btn-primary.btn-outline {
  background: transparent;
  color: #2F5597;
  border: 2px solid #2F5597;
}
.btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active {
  background: #2F5597;
  color: #fff;
}

.btn-success {
  background: #5cb85c;
  color: #fff;
  border: 2px solid #5cb85c;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background: #4cae4c !important;
  border-color: #4cae4c !important;
}
.btn-success.btn-outline {
  background: transparent;
  color: #5cb85c;
  border: 2px solid #5cb85c;
}
.btn-success.btn-outline:hover, .btn-success.btn-outline:focus, .btn-success.btn-outline:active {
  background: #5cb85c;
  color: #fff;
}

.btn-info {
  background: #5bc0de;
  color: #fff;
  border: 2px solid #5bc0de;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background: #46b8da !important;
  border-color: #46b8da !important;
}
.btn-info.btn-outline {
  background: transparent;
  color: #5bc0de;
  border: 2px solid #5bc0de;
}
.btn-info.btn-outline:hover, .btn-info.btn-outline:focus, .btn-info.btn-outline:active {
  background: #5bc0de;
  color: #fff;
}

.btn-warning {
  background: #f0ad4e;
  color: #fff;
  border: 2px solid #f0ad4e;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background: #eea236 !important;
  border-color: #eea236 !important;
}
.btn-warning.btn-outline {
  background: transparent;
  color: #f0ad4e;
  border: 2px solid #f0ad4e;
}
.btn-warning.btn-outline:hover, .btn-warning.btn-outline:focus, .btn-warning.btn-outline:active {
  background: #f0ad4e;
  color: #fff;
}

.btn-danger {
  background: #d9534f;
  color: #fff;
  border: 2px solid #d9534f;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background: #d43f3a !important;
  border-color: #d43f3a !important;
}
.btn-danger.btn-outline {
  background: transparent;
  color: #d9534f;
  border: 2px solid #d9534f;
}
.btn-danger.btn-outline:hover, .btn-danger.btn-outline:focus, .btn-danger.btn-outline:active {
  background: #d9534f;
  color: #fff;
}

.btn-outline {
  background: none;
  border: 2px solid gray;
  font-size: 16px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.btn-outline:hover, .btn-outline:focus, .btn-outline:active {
  box-shadow: none;
}

.btn.with-arrow {
  position: relative;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.btn.with-arrow i {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0px;
  top: 50%;
  margin-top: -8px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
.btn.with-arrow:hover {
  padding-right: 50px;
}
.btn.with-arrow:hover i {
  color: #fff;
  right: 18px;
  visibility: visible;
  opacity: 1;
}

.form-control {
  box-shadow: none;
  background: transparent;
  border: 2px solid rgba(0, 0, 0, 0.1);
  height: 54px;
  font-size: 18px;
  font-weight: 300;
}
.form-control:active, .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #F73859;
}


.pt30p {
  padding-top: 30% !important;
}

.pt10p {
  padding-top: 10% !important;
}

.pt5p {
  padding-top: 5% !important;
}

.pt30 {
  padding-top: 30px !important;
}
.pt20 {
  padding-top: 20px !important;
}
.pt10 {
  padding-top: 10px !important;
}
.pt70 {
  padding-top: 70px !important;
}

.mb5 {
  margin-bottom: 5px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt30 {
  margin-top: 30px !important;
}

.row-pb-lg {
  padding-bottom: 7em !important;
}

.row-pb-md {
  padding-bottom: 4em !important;
}

.row-pb-sm {
  padding-bottom: 2em !important;
}

.row-pt-lg {
  padding-top: 7em !important;
}

.row-pt-md {
  padding-top: 4em !important;
}

.row-pt-sm {
  padding-top: 2em !important;
}
.row-pt-xs {
  padding-top: 1em !important;
}

.js .animate-box {
  opacity: 0;
}

#fh5co-header-subscribe #email {
  padding-right: 9em;
}
#fh5co-header-subscribe button {
  position: absolute;
  top: 0;
  right: 10px;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}




#main-bg {
  position: sticky;
  z-index: 1;
  width: 100%;
  height: 520px;
  margin-top: -200px;
  background-color: #d4e8f1;
  background-image: url('/images/front/main/main_bg1.jpg');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

.underline {
  display:inline-block;
  background-image: linear-gradient(transparent 60%, #aebdc7 40%);
  background-repeat: no-repeat;
  background-size: 100% 100%;

}
.underline:visited {
  transition: 0.7s;
  animation: underline 2s linear 1;
  animation-fill-mode: forwards;
}
@keyframes underline {
  from {
    background-size: 0% 100%;
  }
  to {
    background-size: 100% 100%;
  }
}

#fh5co-project .swiper {
  width: 100%;
  padding:20px 0 60px 0;
}

#fh5co-project .swiper-wrapper {
  transition-timing-function: linear;
}

#fh5co-project .swiper-slide {
  width:350px;
  text-align: center;

  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

#fh5co-project .swiper-slide img {
  display: block;
  width:100%;
  object-fit: cover;
}

#fh5co-project .swiper-button-next, #fh5co-project .swiper-button-prev{

  margin-top:-50px;

  color:#421e20;
  opacity: 0.3;
}
#fh5co-project .swiper-button-next.on, #fh5co-project .swiper-button-prev.on{
  opacity: 1;
}
#fh5co-project .swiper-button-next::after,
#fh5co-project .swiper-button-prev::after {
  display: none;
}

#fh5co-project .swiper-button-next i, #fh5co-project .swiper-button-prev i{
  width:40px;
  height:40px;
  font-size: 35px;
  font-weight: 900;
  border-radius: 25px 25px 25px 25px;
  -webkit-text-stroke: 1px;
}

@media screen and (max-width: 768px) {
  #fh5co-project .swiper-button-next, #fh5co-project .swiper-button-prev{
    display: none;
  }
}

.underline:hover {
  background-size: 100% 100%;
  transition: 0.7s;
  animation: underline 1s linear reverse infinite;
  animation-direction: alternate;
}

.underline-left {
  display:inline-block;
  margin:0;
  text-transform:uppercase;
}
.underline-left:after {
  display:block;
  content: '';
  border-bottom: solid 3px #ea2129;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
  transform-origin:  0% 50%;
}
.underline-left:hover:after { transform: scaleX(1); }


.row .row-reverse {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;

}

.row .tag,.row .tag.mobile {
  width: 50%;
  min-width: 300px;
  margin: 0 auto;
  padding: 5px 0;
  color: #fff;
  background: #4d78a3;
  border-radius: 20px;
}
.row .tag.mobile {
  display:none;
}

@media screen and (max-width: 768px) {
  .row .tag.mobile {
    width: 100%;
    min-width: 100%;
    padding: 5px 10px;
  }
  .row .tag {
    display: none;
  }
  .row .tag.mobile {
      display: block;
  }
}

.line-step > div{
  position: relative;
  height: 70px;
}
.line-step .line {
  display: block;
  position: absolute;
  top: 12px;
  left: 0%;

  width: 0;
  height: 3px;
  background: #4d78a3;
  animation: step 0.3s ease-out alternate 1;
  animation-fill-mode: forwards;

}

.line-step .dot {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left:-12px;
  width: 23px;
  height: 23px;
  background: #4d78a3;
  border-radius: 23px;
}
.line-step .step {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 992px) {
  .line-step .col-sm-0, .line-step .col-xs-0{
    display: none;
  }
}

.line-step div:nth-child(1) .line {
  animation-delay: 0s;
}
.line-step div:nth-child(2) .line {
  animation-delay: 0.3s;
}
.line-step div:nth-child(3) .line {
  animation-delay: 0.6s;
}
.line-step div:nth-child(4) .line {
  animation-delay: 0.9s;
}
.line-step div:nth-child(5) .line {
  animation-delay: 1.2s;
}
.line-step div:nth-child(6) .line {
  animation-delay: 1.5s;
}
.line-step div:nth-child(7) .line {
  animation-delay: 1.8s;
}

@keyframes step{
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.fh5co-mid2-heading .black-text {
  display: inline-block;
  width: 160px;
  padding: 2px 10px;
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  background: rgb(54, 54, 54);
  text-align:center;
}
.fh5co-mid2-heading .sub-text {
  display: inline-block;
  width: 310px;
  padding: 2px 0 2px 5px;
  font-weight: 600;
  font-size: 15px;
  color: #354656;
}

.scrollbar{
  display: inline-block;
  padding-bottom: 5px;
  box-sizing: border-box;
}

/* 스크롤바 설정*/
.scrollbar::-webkit-scrollbar{
  width: 6px;
}
/* 스크롤바 막대 설정*/
.scrollbar::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, #95b3e7ac, #5f85c85c);
  border-radius: 15px;
}
/* 스크롤바 뒷 배경 설정*/
.scrollbar::-webkit-scrollbar-track{
  background-color: #f3f3f3;
}

.scrollbar .icon-right{
  display: none;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -20px;
  width: 30px;
  height: 50px;
  background:#CCC;
  text-align: center;
  border-radius: 20px;
  opacity: 0.7;
  cursor:pointer;
}
.icon-right i {
  color:black;
  line-height: 50px;
  -webkit-text-stroke: 1px;
}

.mapbox {position:relative;width:268px;height:230px;background:#393d48;padding:15px 10px;border-radius: 20px;}
.mapbox div {overflow:hidden;margin:0;padding:0;}
.mapbox .title {color:#fff;font-size:16px;font-weight:bold;margin-bottom:8px;}
.mapbox .img {position:relative;width:247px;height:90px;background: url('/images/front/telmon_thumbnail.jpg') no-repeat; background-position: center 43%;background-size: cover;margin-bottom:8px;}
.mapbox .des {color: #dfdfdf; font-size: 13px;}
.mapbox .des strong{color: #fff; font-size: 13px;}
.mapbox .close {position: absolute;color:#fff;opacity: 0.7;top: 15px;right: 15px;width: 20px;height: 20px;}
.mapbox .close:hover {color:#fff;cursor: pointer;opacity: 1;}
.mapbox .close i {color:#fff;}


/* product LED */
/*
#page.led{
	background: #2d2d2d;
}
 */
#page.led #fh5co-project img:not(.img-light){
	width:120px;
}

:root {
	--btn-w: 100%;
	--dot-w: calc(var(--btn-w));
}
#page.led .light-banner {
	position: relative;

	min-height:250px;

	-webkit-box-shadow: 4px 6px 30px -9px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 4px 6px 30px -9px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 6px 30px -9px rgba(0, 0, 0, 0.5);

	padding: 60px 90px;
	/*
	border: 0.35rem solid;
	border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
	animation: borderRotate1 var(--d2) linear infinite none;
	*/
	position: relative;
	width: var(--btn-w);
}

#page.led .light-banner .dot {
	content: '';
	position: absolute;
	top: 0;
	left:0;
	width: var(--dot-w);
	height: 100%;
	border-radius: 0;
	transition: all 300ms ease;
	animation: atom 8s infinite linear;
	display: block;
}
#page.led .light-banner .dot:after {
	content: '';
	position: absolute;
	left: -.4em;
	top: -.4em;
	height: .8em;
	width: .8em;
	background: #fffef1;
	border-radius: 1em;
	border: .25em solid #FFF;
	box-shadow: 0 0 .7em #fffbce,
				0 0 2em #fff683;
}
@keyframes atom {
	0% {transform: translateX(0);}
	40%{transform: translateX(100%) translateY(0);}
	50% {transform: translateX(100%) translateY(100%);}
	90% {transform: translateX(0) translateY(100%);}
	100% {transform: translateX(0) translateY(0);}
}


#page.led .light-banner clear {
	line-height: 1.8em;
	letter-spacing: -.05em;
	position: relative;
	z-index:2;
	float:left;
	height:45px;
	margin-right:8px;
	width:100%;
	display:inline-block;
	font-size:24px;
	font-weight:700;
	word-break: keep-all;
}
#page.led .light-banner color.blue {
	color:#0073c9;
	font-size: 1.3em;
	margin-top: -.1em;
}
#page.led .light-banner color.sky {
	color:#17c1d3;
	font-size: 1.3em;
	margin-top: -.1em;
}
#page.led .light-banner .img-light {
	position: absolute;
	bottom:-100px;
	right:-150px;
	width:40%;
	z-index:10;
}

@media screen and (max-width: 768px) {
	#page.led #fh5co-project img:not(.img-light){
		width:90px;
	}
	#page.led .light-banner {
		padding: 40px;
	}
	#page.led .light-banner clear {
		height:30px;
		line-height: 1.3em;
		letter-spacing: -.05em;
		font-size:18px;
		font-weight:700;
		display:contents;
		margin-bottom:5px;
	}
	#page.led .light-banner .img-light {
		position: absolute;
		bottom:-40px;
		right:-30px;
		width:50%;
	}
}
@media screen and (max-width: 500px) {
	#page.led .light-banner {
		padding: 40px 20px;
	}
	#page.led .light-banner > div {
		height:34px;
		line-height: 1.3em;
		letter-spacing: -.05em;
		font-size:18px;
		font-weight:700;
	}
	#page.led .light-banner .img-light {
		position: absolute;
		bottom:-30px;
		right:-20px;
		width:50%;
	}
}
@media screen and (max-width: 390px) {
	#page.led .light-banner {
		padding: 33px 15px;
		min-height: 220px;
	}
	#page.led .light-banner > div {
		font-size:16px;
	}
	#page.led .light-banner clear {
		line-height: 1.5em;
		font-size:16px;
	}
}
#page.led #fh5co-title-banner {
	margin: 0;
	padding:2em 0;
	background: #0067b5;
	color: #FFF;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
}
#page.led #fh5co-title-banner span{
	font-size:32px;
    font-weight: 700;
}

#page.led #fh5co-title {
	background: #dff1ff/*#007edd*/;
	margin:0;
	padding:2em 0;
}

#page.led #fh5co-title .title-box {
	display:flex;
	align-content: flex-start;
	flex-wrap: wrap;
	justify-content: center;
	border:0px solid #FFF;
	-webkit-box-shadow: 0px 6px 13px -9px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 6px 13px -9px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 6px 13px -9px rgba(0, 0, 0, 0.75);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
	height: 110px;
	padding:15px 0;
	background:#FFF;
	font-size:18px;
	color:#333;
	font-weight:800;
	word-break: keep-all;
}
#page.led #fh5co-title .title-box:hover {
	outline: 2px solid #186bab73;
}
#page.led #fh5co-title .title-box:hover > a div {
	padding:0 10px;
	display:inline-block;
	background-image: linear-gradient(transparent 60%, #39d4e5 40%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transition: 0.7s;
	animation: underline 0.5s linear 1;
	animation-fill-mode: forwards;
}

#page.led #fh5co-title .title-box a {
	color:#333;
	width:100%;
}

#page.led #fh5co-title .title-box span {
	display:flex;
	align-content: center;
	flex-wrap: wrap;
	justify-content: center;
	width:20px;
	height:20px;
	background:#007edd;
	color:#FFF;
	font-weight:900;
	margin:5px auto;
	padding:18px 16px 14px 16px;
	font-size:14px;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	border-radius: 20px;
}
@media screen and (max-width: 768px) {
	#page.led #fh5co-title-banner {
		padding: 1.3em 0;
		font-size: 17px;
	}
	#page.led #fh5co-title-banner span{
		font-size: 22px;
	}

	#page.led #fh5co-title .mb20 {
		margin-bottom:10px !important;
	}

	#page.led #fh5co-title .title-box {
		padding:10px 0;
		font-size:16px;
	}
}
@media screen and (max-width: 500px) {
	#page.led #fh5co-title .title-box {
		height:120px;
		padding:10px 0;
		font-size:15px;
		border:  2px solid #186bab38;
		background: #FFF;
		transition: 0.7s;
		border-radius: 2px;
	}
	#page.led #fh5co-title .title-box:hover {
		outline: unset;
	}
	#page.led #fh5co-title .title-box:hover > a div {
		padding:0;
		display:inline-block;
		background-image: unset;
		animation: unset;
	}

	@property --angle {
	  syntax: '<angle>';
	  initial-value: 90deg;
	  inherits: true;
	}

	:root {
		--d2: 12000ms;
		--angle: 90deg;
		--c1: #186bab73;
		--c2: rgba(168, 239, 255, 0.3);
	}

	#page.led #fh5co-title .title-box.t1st {
		border: 0.35rem solid;
		border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
		animation: borderRotate1 var(--d2) linear infinite none;
	}
	@keyframes borderRotate1 {
		10% {
			--angle: 450deg;
		}
		100% {
			--angle: 450deg;
		}
	}
	#page.led #fh5co-title .title-box.t2nd {
		border: 0.35rem solid;
		border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
		animation: borderRotate2 var(--d2) linear infinite none;
	}
	@keyframes borderRotate2 {
		15% {
			--angle: 90deg;
		}
		25% {
			--angle: 450deg;
		}
		100% {
			--angle: 450deg;
		}
	}
	#page.led #fh5co-title .title-box.t3rd {
		border: 0.35rem solid;
		border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
		animation: borderRotate3 var(--d2) linear infinite none;
	}
	@keyframes borderRotate3 {
		30% {
			--angle: 90deg;
		}
		40% {
			--angle: 450deg;
		}
		100% {
			--angle: 450deg;
		}
	}
	#page.led #fh5co-title .title-box.t4th {
		border: 0.35rem solid;
		border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
		animation: borderRotate4 var(--d2) linear infinite none;
	}
	@keyframes borderRotate4 {
		45% {
			--angle: 90deg;
		}
		55% {
			--angle: 450deg;
		}
		100% {
			--angle: 450deg;
		}
	}
	#page.led #fh5co-title .title-box.t5th {
		height:95px;
		border: 0.35rem solid;
		border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
		animation: borderRotate5 var(--d2) linear infinite none;
	}
	@keyframes borderRotate5 {
		60% {
			--angle: 90deg;
		}
		70% {
			--angle: 450deg;
		}
		100% {
			--angle: 450deg;
		}
	}
	#page.led #fh5co-title .title-box.t6th {
		height:95px;
		border: 0.35rem solid;
		border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
		animation: borderRotate6 var(--d2) linear infinite none;
	}
	@keyframes borderRotate6 {
		75% {
			--angle: 90deg;
		}
		85% {
			--angle: 450deg;
		}
		100% {
			--angle: 450deg;
		}
	}
}
@media screen and (max-width: 390px) {
	#page.led #fh5co-title-banner {
		padding: 1em 0;
		font-size: 15px;
	}
	#page.led #fh5co-title-banner span{
		font-size: 18px;
	}
	#page.led #fh5co-title .title-box {
		height:110px;
		padding:10px 0;
		font-size:13px;
		border:  2px solid #186bab38;
		background: #FFF;
		transition: 0.7s;
		border-radius: 2px;
	}
	#page.led #fh5co-title .title-box:hover {
		outline: unset;
	}
	#page.led #fh5co-title .title-box:hover > a div {
		padding:0;
		display:inline-block;
		background-image: unset;
		animation: unset;
	}
}

#page.led :where(#fh5co-no1,#fh5co-no2,#fh5co-no3,#fh5co-no4,#fh5co-no5,#fh5co-no6,#fh5co-product,#fh5co-job,#fh5co-construct,#fh5co-recommend) {
	padding:4em 0;
}
@media screen and (max-width: 768px) {
	#page.led :where(#fh5co-no1,#fh5co-no2,#fh5co-no3,#fh5co-no4,#fh5co-no5,#fh5co-no6,#fh5co-product,#fh5co-job,#fh5co-construct,#fh5co-recommend) {
		padding:1em 0;
	}

}

#page.led h2 {
	font-weight:700;
	margin-bottom:15px;
	display:flex;
}
#page.led h4 {
	font-weight:800;
	margin-bottom:5px;
	display:flex;
}
#page.led h2 span{

	display:flex;
	align-content: center;
	flex-wrap: wrap;
	justify-content: center;
	width:20px;
	height:20px;
	background:#007edd;
	color:#FFF;
	font-weight:900;
	margin:0 5px 0 0;
	padding:20px 18px 16px 18px;
	font-size:18px;

	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	border-radius: 20px;
}
@media screen and (max-width: 768px) {
	#page.led h2 {
		font-size:20px;
	}
	#page.led h4 {
		font-size:18px;
	}
	#page.led h2 span{
		font-size:15px;
		margin-top:-4px;
		padding:15px 14px 13px 14px;
	}
}
@media screen and (max-width: 390px) {
	#page.led h2 {
		font-size:16px;
	}
	#page.led h4 {
		font-size:14px;
	}
	#page.led h2 span{
		font-size:14px;
		margin-top:-4px;
		padding:13px 12px 11px 12px;
	}
}
#page.led .rep-img {
	margin-bottom:50px;
}
#page.led .adv-box{
	margin-top: 0;
}
#page.led .adv-box .adv-des ul {
	padding-left:0;
}

#page.led .diff-box {
	background: #f5f5f5;
	padding: 0;
}
#page.led .diff-box .diff-title {
	margin:10px 0;
	font-weight:800;
	line-height:18px;
}
#page.led .diff-box ul {
	margin-top:10px;
	margin-left:0;
	padding-left:10px;
	list-style:square;
}
#page.led .diff-box li {
	position:relative;
	font-size:14px;
}
#page.led .diff-box .img-remote{
	position:absolute;
	bottom:-180px;
	left:30px;
	width:90%;
	padding:5px;
	background:#171a23;
	z-index: 9;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 8px 8px 13px -9px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 8px 8px 13px -9px rgba(0, 0, 0, 0.75);
	box-shadow: 8px 8px 13px -9px rgba(0, 0, 0, 0.75);
}
#page.led .diff-box .img-remote:after{
	content: '';
	position: absolute;
	left: 30%;
	top: 0;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-bottom-color: #171a23;
	border-left: 0;
	border-top: 0;
	margin-top: -20px;
	margin-left: -10px;
}
#page.led .adv-box .adv-des li {
	list-style:none;
	display:flex;
	padding:10px 0;
	line-height: 22px;
	font-size:17px;
}
#page.led .adv-box .adv-des li span.no {
	display:flex;
	align-content: center;
	flex-wrap: wrap;
	justify-content: center;
	width:20px;
	height:20px;
	background:#39d4e5;
	color:#FFF;
	font-weight:900;
	font-size:14px;
	padding:14px 13px 12px 13px;
	margin-right:10px;

	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
}
@media screen and (max-width: 768px) {
	#page.led .adv-box .adv-des.pt30 {
		padding-top:0px !important;
	}
	#page.led .adv-box .adv-des.pt20 {
		padding-top:0px !important;
	}
	.row .row-reverse {
		display:block;
	}
	#page.led .adv-box .adv-des li {
		padding: 6px 0;
		font-size:15px;
	}
	#page.led .adv-box .adv-des li span.no {
		font-size:12px;
		padding:10px 9px 8px 9px;
		margin-right:5px;
	}
	#page.led li.btn-remote {
		text-decoration: underline;
		cursor:pointer;
	}
	#page.led .diff-box .img-remote{
		display:block;
		position:relative;
		bottom:unset;
		left:unset;
	}
	#page.led .diff-box .img-remote:after{
		content: unset;
	}
	#page.led #fh5co-no3 {
		position: relative;
		z-index:0;
	}
}
@media screen and (max-width: 390px) {
	#page.led .adv-box .adv-des li {
		padding: 3px 0;
		font-size:14px;
	}
	#page.led .adv-box .adv-des li span.no {
		font-size:11px;
		padding:9px 8px 7px 8px;
		margin-right:5px;
	}
}
#page.led strong {
	color:#3d3d3d;
	font-weight: 800;
}

#page.led :where(#fh5co-no1,#fh5co-no2,#fh5co-no3,#fh5co-no4,#fh5co-no5,#fh5co-no6,).active:hover strong {
	padding:0;
	display:inline;
	background-image: none;
	background-repeat: no-repeat;
	background-size: 100% 90%;
	transition: 0.7s;
	animation: underline_blue 0.5s linear 1;
	animation-fill-mode: forwards;
	animation-delay: 0s;
		word-break: keep-all;
}
@keyframes underline_blue {
  from {
	background-image: linear-gradient(transparent 100%);
    background-size: 0% 100%;
  }
  to {
	background-image: linear-gradient(transparent 60%, #0393ffb3 30%);
    background-size: 100% 100%;
  }
}

#page.led :where(#fh5co-no1,#fh5co-no2,#fh5co-no3,#fh5co-no4,#fh5co-no5,#fh5co-no6).active:hover strong.sky {
	display:inline;
	background-image: none;
	animation: underline_sky 0.5s linear 1;
	animation-fill-mode: forwards;
}
@keyframes underline_sky {
  from {
	background-image: linear-gradient(transparent 100%);
    background-size: 0% 100%;
  }
  to {
	background-image: linear-gradient(transparent 60%, #39d4e5b3 30%);
    background-size: 100% 100%;
  }
}

#page.led :where(#fh5co-no1,#fh5co-no2,#fh5co-no3,#fh5co-no4,#fh5co-no5,#fh5co-no6).active:hover strong.none {
	background-image: none;
	animation: unset;
	animation-fill-mode: unset;
}

#page.led #fh5co-no3 img{
	margin:0 auto;
	max-height:350px;
}
#page.led #fh5co-no6 img{
	margin:0 auto;
	box-shadow: 8px 8px 10px -6px rgba(0, 0, 0, 0.7);
}
@media screen and (max-width: 768px) {
	#page.led #fh5co-no3 img{
		max-height:200px;
	}
}
#page.led #fh5co-product .swiper{
	clear: both;
	width: 100%;
	height: 30vh;
	max-height: 270px;
}
#page.led #fh5co-product .swiper .swiper-slide{
	display:flex;
	border:1px solid #000;
	width: 100%;
	overflow:hidden;
	position:relative;
}
#page.led #fh5co-product #product2-swiper {
	margin-top: -1px;
}
#page.led #fh5co-product .swiper .swiper-slide .slide-no{
	position:absolute;
	top:10px;
	left:20px;
	font-size:24px;
	font-weight:800;
	color:#62d4df;
}
#page.led #fh5co-product #product2-swiper.swiper .swiper-slide .slide-no{
	left:unset;
	right:20px;
}
#page.led #fh5co-product .swiper .swiper-slide > div{
	flex: 1;
	width:50%;
	display: flex;
    align-items: center;
    justify-content: left;
}
#page.led #fh5co-product .swiper .swiper-slide > div.text-right {
    justify-content: right;

}
#page.led #fh5co-product .swiper .swiper-slide > div .des-box{
	width:100%;
}
#page.led #fh5co-product .swiper .swiper-slide > div img{
	margin:0;
	height:100%;
}
#page.led #fh5co-product .swiper .swiper-slide > div ul {
	list-style: none;
	display: inline-block;
	padding-left:20%;
	width:100%;
}
#page.led #fh5co-product .swiper .swiper-slide > div ul li{
	display:flex;
	font-size:14px;
	width:100%;
	font-weight:700;
}
#page.led #fh5co-product .swiper .swiper-slide > div ul li .des-title{
	width: 27%;
}
#page.led #fh5co-product .swiper .swiper-slide > div ul li .des{

}
#page.led #fh5co-product .swiper .swiper-slide > div .product-title{
	margin-top:10px;
	width:60%;
	margin-left:20%;
	background:#000;
	color:#FFF;
}

#page.led #fh5co-product .swiper .swiper-button-next, #page.led #fh5co-product .swiper .swiper-button-prev{
  color:#CCC;
  opacity: 0.8;
}
#page.led #fh5co-product .swiper .swiper-button-next:after, #page.led #fh5co-product .swiper .swiper-button-prev:after{
	font-size:24px;
	font-weight:900;
}
@media screen and (max-width: 992px) {
	#page.led #fh5co-product .swiper{
		max-height: 210px;
	}
}

@media screen and (max-width: 768px) {
	#page.led #fh5co-product .swiper{
		max-height: 180px;
	}
	#page.led #fh5co-product .swiper .swiper-slide > div{
		position:relative;
		display: flex;
		align-items: end;
		justify-content: left;
	}
	#page.led #fh5co-product .swiper .swiper-slide > div ul{
		padding-left:5%;
	}
	#page.led #fh5co-product .swiper .swiper-slide > div ul li{
		font-size:10px;
	}
	#page.led #fh5co-product .swiper .swiper-slide > div ul li .des-title{
		min-width:65px;
		width:auto;
		max-width:80px;
		padding-right:3px;
		word-break: keep-all;
	}
	#page.led #fh5co-product .swiper .swiper-slide > div .product-title{
		margin:0 0 10px 0;
		width: auto;
		font-size:12px;
	}
	#page.led #fh5co-product .swiper .swiper-slide .slide-no{
		top:0px;
		left:7px;
		font-size:18px;
	}
	#page.led #fh5co-product #product2-swiper.swiper .swiper-slide .slide-no{
		left:unset;
		right:7px;
	}
	#page.led #fh5co-product #product1-swiper.swiper .swiper-slide img{
		margin-left: -25%;
	}
	#page.led #fh5co-product #product2-swiper.swiper .swiper-slide img{
		margin-right: -25%;
	}

	#page.led #fh5co-product #product1-swiper.swiper .swiper-slide > div:nth-of-type(2){
		z-index:2;
		background:#FFF;
	}
	#page.led #fh5co-product #product2-swiper.swiper .swiper-slide > div:nth-of-type(1){
		z-index:2;
		background:#FFF;
	}
	#page.led #fh5co-product #product2-swiper.swiper .swiper-slide > div:nth-of-type(2){
		z-index:1;
	}
	#page.led #fh5co-product .swiper .swiper-button-next:after, #page.led #fh5co-product .swiper .swiper-button-prev:after{
		font-size:20px;
		font-weight:900;
	}
}
@media screen and (max-width: 500px) {
	#page.led #fh5co-product #product1-swiper.swiper .swiper-slide img{
		margin-left: -45%;
	}
	#page.led #fh5co-product #product2-swiper.swiper .swiper-slide img{
		margin-right: -45%;
	}
}
@media screen and (max-width: 390px) {
	#page.led #fh5co-product #product1-swiper.swiper .swiper-slide img{
		margin-left: -70%;
	}
	#page.led #fh5co-product #product2-swiper.swiper .swiper-slide img{
		margin-right: -70%;
	}
}

#page.led #fh5co-construct .row {
	display:flex;
	align-items:end;
}
#page.led #fh5co-construct .row h2{
	margin-bottom:0;
}
#page.led #fh5co-construct .count-box{
	display:flex;
	align-items:end;
	font-size:22px;
	font-weight:700;
	margin-bottom:-10px;
}
#page.led #fh5co-construct .count-box > div{
	padding:0;
	display:flex;
	align-items:end;
}
#page.led #fh5co-construct .count-box img {
	margin:0 auto;
	width:70px !important;
	height:70px;
}
#page.led #fh5co-construct .count-box .count-num{
	color: #2F5597;
}
#page.led #fh5co-construct .count-box .count-num:after{
	content:'+ 시공';
	font-size:14px;
	color:#333;
}
@media screen and (max-width: 500px) {
	#page.led #fh5co-construct .count-box {
		display:block;
	}
	#page.led #fh5co-construct .count-box > div{
		width:100%;
		padding:0;
		display:inline-block;
		text-align:center;
		line-height: 1;
	}
	#page.led #fh5co-construct .count-box img {
		margin:0 auto;
		width:60px !important;
		height:60px;
	}
	#page.led #fh5co-construct .count-box .count-num{
		font-size:14px;
		line-height: 1;
	}
	#page.led #fh5co-construct .count-box .count-num:after{
		content:'+ 시공';
		font-size:12px;
		color:#333;
	}
}

#page.led #fh5co-construct .swiper{
	width: 100%;
	height: 580px;
	margin-left: auto;
	margin-right: auto;
	border:0px solid blue;
}
#page.led #fh5co-construct .swiper-slide{
	text-align: center;
	font-size: 18px;
	background: #fff;
	width: 274px !important;
	height: calc((100% - 30px) / 2) !important;

	/* Center slide text vertically */
	display: flex;
	justify-content: center;
	align-items: center;
	border:0px solid red;
}
#page.led #fh5co-construct .swiper-pagination {
	bottom: -10px !important;
    top: unset !important;
	width: 80%;
    margin: 0 auto 0 10%;
}
#page.led #fh5co-construct .swiper-pagination .swiper-pagination-progressbar-fill{
  background: #5d5d5d;
}

@media screen and (max-width: 500px) {
	#page.led #fh5co-construct .swiper{
		height: 274px !important;
	}
	#page.led #fh5co-construct .swiper-slide{
		height: 100% !important;
	}
	#page.led #fh5co-construct .swiper-pagination {
		bottom: 26px !important;
		top: unset !important;
		width: 100%;
		margin: 0;
	}
}
@media screen and (max-width: 390px) {
	#page.led #fh5co-construct .swiper{
		height: 274px !important;
	}
	#page.led #fh5co-construct .swiper-slide{
		height: 100% !important;
	}
	#page.led #fh5co-construct .swiper-pagination {
		bottom: 26px !important;
		top: unset !important;
		width: 100%;
		margin: 0;
	}
}
/* 시공사례 카드css s --------------------------------------------------------------------------*/
:root {
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
}

#page.led #fh5co-construct .swiper-slide .card {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
  align-items: flex-end;
  overflow: hidden;
  padding: 1rem;
  width: 100%;
  height: 100%;
  text-align: center;
  color: whitesmoke;
  background-color: whitesmoke;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}
/*
@media (min-width: 600px) {
  .card {
    height: 350px;
  }
}*/
#page.led #fh5co-construct .swiper-slide .card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position: 0 0;
  -webkit-transition: -webkit-transform calc(var(--d) * 1.5) var(--e);
  transition: -webkit-transform calc(var(--d) * 1.5) var(--e);
  transition: transform calc(var(--d) * 1.5) var(--e);
  transition: transform calc(var(--d) * 1.5) var(--e), -webkit-transform calc(var(--d) * 1.5) var(--e);
  pointer-events: none;
}
#page.led #fh5co-construct .swiper-slide .card:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(11.7%, rgba(0, 0, 0, 0.009)), color-stop(22.1%, rgba(0, 0, 0, 0.034)), color-stop(31.2%, rgba(0, 0, 0, 0.072)), color-stop(39.4%, rgba(0, 0, 0, 0.123)), color-stop(46.6%, rgba(0, 0, 0, 0.182)), color-stop(53.1%, rgba(0, 0, 0, 0.249)), color-stop(58.9%, rgba(0, 0, 0, 0.32)), color-stop(64.3%, rgba(0, 0, 0, 0.394)), color-stop(69.3%, rgba(0, 0, 0, 0.468)), color-stop(74.1%, rgba(0, 0, 0, 0.54)), color-stop(78.8%, rgba(0, 0, 0, 0.607)), color-stop(83.6%, rgba(0, 0, 0, 0.668)), color-stop(88.7%, rgba(0, 0, 0, 0.721)), color-stop(94.1%, rgba(0, 0, 0, 0.762)), to(rgba(0, 0, 0, 0.79)));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: -webkit-transform calc(var(--d) * 2) var(--e);
  transition: -webkit-transform calc(var(--d) * 2) var(--e);
  transition: transform calc(var(--d) * 2) var(--e);
  transition: transform calc(var(--d) * 2) var(--e), -webkit-transform calc(var(--d) * 2) var(--e);
}

#page.led #fh5co-construct .swiper-slide .content {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  padding: 1rem;
  -webkit-transition: -webkit-transform var(--d) var(--e);
  transition: -webkit-transform var(--d) var(--e);
  transition: transform var(--d) var(--e);
  transition: transform var(--d) var(--e), -webkit-transform var(--d) var(--e);
  z-index: 1;
}
#page.led #fh5co-construct .swiper-slide .content > * + * {
  margin-top: 1rem;
}

#page.led #fh5co-construct .swiper-slide .title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.7px;
  color:#FFF;
}

#page.led #fh5co-construct .swiper-slide .copy{
  font-size: 1.4rem;
  /*font-style: italic;*/
  line-height: 1.5;
  text-align: left;
  font-weight: 600;
  word-break: keep-all;
}
#page.led #fh5co-construct .swiper-slide .copy .system {
  font-weight: 700;
  background: #22b3c9;
  display:inline-block;
  padding:5px 5px 4px 4px;
  margin-bottom:5px;
}
@media screen and (max-width: 600px) {
	#page.led #fh5co-construct .swiper-slide .title {
		width:100%;
		text-align:left;
		font-size: 1.4rem;
	}
	#page.led #fh5co-construct .swiper-slide .copy{
		font-size: 1.3rem;
	}
	#page.led #fh5co-construct .swiper-slide .copy .system {
		padding:3px 4px 2px 3px;
		margin-bottom:5px;
		font-size: 1.3rem;
	}
}
@media (hover: hover) and (min-width: 600px) {
  #page.led #fh5co-construct .swiper-slide .card:after {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }

  #page.led #fh5co-construct .swiper-slide .content {
    -webkit-transform: translateY(calc(100% - 4.5rem));
            transform: translateY(calc(100% - 4.5rem));
  }
  #page.led #fh5co-construct .swiper-slide .content > *:not(.title) {
    opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem);
    -webkit-transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
    transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
  }

  #page.led #fh5co-construct .swiper-slide .card:hover,
  #page.led #fh5co-construct .swiper-slide .card:focus-within {
    -webkit-box-align: center;
            align-items: center;
  }
  #page.led #fh5co-construct .swiper-slide .card:hover:before,
  #page.led #fh5co-construct .swiper-slide .card:focus-within:before {
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
  #page.led #fh5co-construct .swiper-slide .card:hover:after,
  #page.led #fh5co-construct .swiper-slide .card:focus-within:after {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  #page.led #fh5co-construct .swiper-slide .card:hover .content,
  #page.led #fh5co-construct .swiper-slide .card:focus-within .content {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #page.led #fh5co-construct .swiper-slide .card:hover .content > *:not(.title),
  #page.led #fh5co-construct .swiper-slide .card:focus-within .content > *:not(.title) {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition-delay: calc(var(--d) / 8);
            transition-delay: calc(var(--d) / 8);
  }

  #page.led #fh5co-construct .swiper-slide .card:focus-within:before, #page.led #fh5co-construct .swiper-slide .card:focus-within:after,
  #page.led #fh5co-construct .swiper-slide .card:focus-within .content,
  #page.led #fh5co-construct .swiper-slide .card:focus-within .content > *:not(.title) {
    -webkit-transition-duration: 0s;
            transition-duration: 0s;
  }
}
@media (hover: hover) and (min-width: 600px) {
  #page.led #fh5co-construct .swiper-slide .card:hover:after,
  #page.led #fh5co-construct .swiper-slide .card:focus-within:after {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
}
/* 시공사례 카드css e --------------------------------------------------------------------------*/

#page.led #fh5co-recommend {
	position:relative;
	z-index:3;
	/*
	-webkit-box-shadow: 0px 8px 13px -9px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 8px 13px -9px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 8px 13px -9px rgba(0, 0, 0, 0.75);
	*/
}
#page.led #fh5co-recommend .recommend-icon{
	position:relative;
}
#page.led #fh5co-recommend .recommend-icon img{
	width:90%;
}
#page.led #fh5co-recommend .recommend-icon:after{
	content:'';
	border-right:2px solid #FFF;
	border-radius: 10px;
	position:absolute;
	top:0;
	right:0;
	display:inline-block;
	height:80%;
}
#page.led #fh5co-recommend .recommend-icon:nth-of-type(5):after,
#page.led #fh5co-recommend .recommend-icon:nth-of-type(10):after {
	border-right:0px solid #5d5d5d;
}
#page.led #fh5co-recommend .recommend-icon .title{
	font-size:18px;
	margin:10px auto;
}
@media screen and (max-width: 768px) {
	#page.led #fh5co-recommend .recommend-icon.mb20 {
		margin-bottom:0 !important;
	}
	#page.led #fh5co-recommend .recommend-icon.mobile-none{
		display:none;
	}
	#page.led #fh5co-recommend .recommend-icon img{
		width:100%;
	}
	#page.led #fh5co-recommend .recommend-icon .title{
		font-size:14px;
	}
	#page.led #fh5co-recommend .recommend-icon:after{
		max-height:61px;
	}
}

#page.led #fh5co-ev {
	background: #5d5d5d;
	/*background: linear-gradient(90deg, #5d5d5d 50%, transparent 50%);*/
	position: relative;
    z-index: 1;
}
#page.led #fh5co-ev img{
	margin: 0 0 0 auto;
	width: 90%;
}
#page.led #fh5co-tel {
	background:linear-gradient(0deg, #d3d3d3 42%, transparent 70%);
	position: relative;
    z-index: 3;
}
#page.led #fh5co-tel2 {
	margin-top: -3%;
	background:linear-gradient(0deg, #232323 55%, transparent 55%);
	position: relative;
    z-index: 3;
}


@media screen and (max-width: 500px) {
	#page.led #fh5co-ev img{
		width: 100%;
	}
}

#page.led #fh5co-no1 .rep-img2{
	display:none;
	position:relative;
}
@media screen and (max-width: 768px) and (any-pointer:coarse) {
	#page.led #fh5co-no1 .rep-img{
		display:none;
	}
	#page.led #fh5co-no1 .rep-img2{
		display:inline-block;
		position:relative;
		padding-bottom:50px;
	}

	#page.led #fh5co-no1 .rep-img2 > img{
		position:absolute;
		top:0;
		left:0;
		opacity:0;
	}
	#page.led #fh5co-no1 .rep-img2 > img:nth-of-type(1){
		animation-name: pointer_move1;
		animation-duration: 10s;
		animation-iteration-count:infinite;
		animation-direction: normal;
		animation-timing-function : ease;
		animation-fill-mode: backwards;
	}
	@keyframes pointer_move1{
		0%{
			opacity:1;
		}
		20%{
			opacity:1;
		}
		25%{
			opacity:0;
		}
		45%{
			opacity:0;
		}
		50%{
			opacity:0;
		}
		70%{
			opacity:0;
		}
		75%{
			opacity:0;
		}
		95%{
			opacity:0;
		}
		100%{
			opacity:1;
		}
	}
	#page.led #fh5co-no1 .rep-img2 > img:nth-of-type(2){
		animation-name: pointer_move2;
		animation-duration: 10s;
		animation-iteration-count:infinite;
		animation-direction: normal;
		animation-timing-function : ease;
		animation-fill-mode: backwards;
	}
	@keyframes pointer_move2{
		0%{
			opacity:0;
		}
		20%{
			opacity:0;
		}
		25%{
			opacity:1;
		}
		45%{
			opacity:1;
		}
		50%{
			opacity:0;
		}
		70%{
			opacity:0;
		}
		75%{
			opacity:1;
		}
		95%{
			opacity:1;
		}
		100%{
			opacity:0;
		}
	}
	#page.led #fh5co-no1 .rep-img2 > img:nth-of-type(3){
		animation-name: pointer_move3;
		animation-duration: 10s;
		animation-iteration-count:infinite;
		animation-direction: normal;
		animation-timing-function : ease;
		animation-fill-mode: backwards;
	}
	@keyframes pointer_move3{
		0%{
			opacity:0;
		}
		20%{
			opacity:0;
		}
		25%{
			opacity:0;
		}
		45%{
			opacity:0;
		}
		50%{
			opacity:1;
		}
		70%{
			opacity:1;
		}
		75%{
			opacity:0;
		}
		95%{
			opacity:0;
		}
		100%{
			opacity:0;
		}
	}

	#page.led #fh5co-no1 .rep-img2 .pointer{

		position:absolute;
		bottom:10px;
		left:0;
		width:50px;
		padding-top:5px;
		background: radial-gradient( at 50% 20px, #FFF 0%, transparent 70%);
		background-size: 100% 50%;
		animation-name: pointer_move;
		animation-duration: 10s;
		animation-iteration-count:infinite;
		animation-direction: normal;
		animation-timing-function : ease;
		animation-fill-mode: backwards;
	}
	#page.led #fh5co-no1 .rep-img2 .pointer:after{
		content:'10%';
		position:absolute;
		top:7px;
		left:8px;
		width:34px;
		height:34px;
		margin-top:6px;
		padding-top:6px;
		text-align:center;
		color:#fff0d4;
		font-weight:800;
		font-size:13px;
		border:0px solid red;
		border-radius:20px;
		background:#db8100;
		background-position: 11px center;

		animation-name: pointer_move_txt;
		animation-duration: 10s;
		animation-iteration-count:infinite;
		animation-direction: normal;
		animation-timing-function : ease;
		animation-fill-mode: backwards;
	}
	@keyframes pointer_move{
		0%{
			left: 0;
			margin-left:0;
		}
		20%{
			left: 0;
			margin-left:0;
		}
		25%{
			left: 50%;
			margin-left:-25px;
		}
		45%{
			left: 50%;
			margin-left:-25px;
		}
		50%{
			left: 100%;
			margin-left:-50px;
		}
		70%{
			left: 100%;
			margin-left:-50px;
		}
		75%{
			left: 50%;
			margin-left:-25px;
		}
		95%{
			left: 50%;
			margin-left:-25px;
		}
		100%{
			left: 0;
			margin-left:0;
		}
	}
	@keyframes pointer_move_txt{
		0%{
			content:'10%';
			background:#e98f0d;
		}
		20%{
			content:'10%';
			background:#e98f0d;
		}
		25%{
			content:'50%';
			background:#f59610;
		}
		45%{
			content:'50%';
			background:#f59610;
		}
		50%{
			content:'100%';
			background:#ffab35;
		}
		70%{
			content:'100%';
			background:#ffab35;
		}
		75%{
			content:'50%';
			background:#f59610;
		}
		95%{
			content:'50%';
			background:#f59610;
		}
		100%{
			content:'10%';
			background:#e98f0d;
		}
	}
}


/* tel-bar, step */
#page .fh5co-tel-bar {
    margin-top:100px;
    background:#ecf5fc;
}
#page .fh5co-tel-bar.bottom {
    margin-top:0;
}
#page .fh5co-tel-bar .box-des {
    display:flex;
    height:230px;
	justify-content: center;
}

#page .fh5co-tel-bar .img {
	position:relative;
	height:100%;
	width:260px;
}
#page .fh5co-tel-bar .img img{
	position:absolute;
	bottom:0;
	width:260px;
	max-width:unset;
	left:-10%;
}
#page .fh5co-tel-bar .des {
    display:flex;
    align-items: center;
    justify-content: center;
}
#page .fh5co-tel-bar .des .title1{
    font-size: 28px !important;
    line-height: 1.5em !important;
    color:#333;
}
#page .fh5co-tel-bar .des .title2{
    font-size: 44px !important;
    line-height: 1.1em !important;
    font-weight:600 !important;
    color:#333;
}
#page .fh5co-tel-bar .des .title3{
    font-size: 16px !important;
    line-height: 1.1em !important;
    color:#333;
}
#page .fh5co-tel-bar .tel-number {
    height:230px;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0;
}
#page .fh5co-tel-bar .tel-number a{
    color:#333;
    font-size: 48px !important;
    font-weight:600 !important;
}
#page .fh5co-tel-bar .tel-number img{
    width:65px;
    margin-top:-5px;
}
@media screen and (max-width: 1200px) {
	#page .fh5co-tel-bar .img {
		width:220px;
	}
	#page .fh5co-tel-bar .img img{
		width:220px;
		left:0;
	}
    #page .fh5co-tel-bar .des .title1{
        font-size: 20px !important;
        line-height: 24px !important;
    }
    #page .fh5co-tel-bar .des .title2{
        font-size: 38px !important;
        line-height: 1.1em !important;
    }
    #page .fh5co-tel-bar .des .title3{
        font-size: 12px !important;
        letter-spacing: -0.09em;
    }
    #page .fh5co-tel-bar .tel-number a {
        font-size: 44px !important;
		letter-spacing: -0.07em;
    }
}
@media screen and (max-width: 992px) {
    #page .fh5co-tel-bar {
        margin-top:80px;
    }
    #page .fh5co-tel-bar.bottom {
        margin-top:0;
    }
    #page .fh5co-tel-bar .img {
        width:140px;
    }
    #page .fh5co-tel-bar .img img{
        width:200px;
        left:-60px;
    }
    #page .fh5co-tel-bar .des .title1{
        font-size: 18px !important;
        line-height: 20px !important;
    }
    #page .fh5co-tel-bar .des .title2{
        font-size: 32px !important;
        line-height: 1.1em !important;
    }
    #page .fh5co-tel-bar .des .title3{
        font-size: 12px !important;
    }
    #page .fh5co-tel-bar .box-des {
        height:200px;
    }
    #page .fh5co-tel-bar .tel-number {
        height:200px;
    }
    #page .fh5co-tel-bar .tel-number a {
        font-size: 40px !important;
		letter-spacing: -0.1em;
    }
    #page .fh5co-tel-bar .tel-number img{
        width:50px;

    }
}
@media screen and (max-width: 768px) {
    #page .fh5co-tel-bar {
        margin-top:55px;
    }
    #page .fh5co-tel-bar.bottom {
        margin-top:0px;
    }
    #page .fh5co-tel-bar .box-des {
        height:85px;
    }
    #page .fh5co-tel-bar .img {
        width:130px;
    }
    #page .fh5co-tel-bar .img img{
        width:130px;
        left:0px;
        bottom:-60px;
    }
    #page .fh5co-tel-bar.bottom .img img{
        width:150px;
        left:-20px;
    }
    #page .fh5co-tel-bar .des{
        width:100%;
    }
    #page .fh5co-tel-bar .des .title1{
        margin-top:10px;
        font-size: 18px !important;
        line-height: 20px !important;
    }
    #page .fh5co-tel-bar .des .title2{
        font-size: 24px !important;
    }
    #page .fh5co-tel-bar .des .title3{
        font-size: 12px !important;
    }
    #page .fh5co-tel-bar .tel-number {
        height:60px;
        margin-left:15px;
        align-items: flex-end;
        justify-content: center;
        padding-bottom:10px;
    }
    #page .fh5co-tel-bar .tel-number a{
        font-size:28px !important;
		line-height: 1.3em;
    }
    #page .fh5co-tel-bar .tel-number img{
        width:40px;
        margin-top:0;
    }
    #page .fh5co-tel-bar.bottom .des :is(.title1,.title2,.title3) {
        letter-spacing: -0.1em;
    }
}
#page #fh5co-step {
    padding-top:2em;
    padding-bottom:0;
    background:#ecf5fc;
}
#page #fh5co-step .title{
    font-size:24px;
    line-height:1em;
    display:inline-block;
    border-bottom:1px solid #333;
    margin-bottom:30px;
    color:#333;
}
#page #fh5co-step .box-step {
    display:flex;
    align-items: flex-start;
    justify-content: center;
    padding-bottom:10px;
    border-bottom:2px solid #333333e0;
}
#page #fh5co-step .step {
    padding:0;
    line-height:22px;
    flex:0 0 20%;
    color:#333;
}
#page #fh5co-step .step img{
    width:130px;
    max-width:100%;
    margin:0 auto 10px auto;
}
#page #fh5co-step .arrow {
    height:15vh;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0;
    flex:0 0 6%;
}
#page #fh5co-step .arrow img{
    margin-top:-1vh;
}
@media screen and (max-width: 768px) {
    #page #fh5co-step .title{
        font-size:18px;
        display:inline-block;
        margin-bottom:10px;
    }
    #page #fh5co-step .step {
        padding:0;
        font-size:10px;
        line-height:14px;
        letter-spacing: -0.09em;
    }
    #page #fh5co-step .arrow {
        height:8vh;
    }
}

/*--------------------------------- smart led -------------------------------------------*/
#page.smartled>div:not(#fh5co-offcanvas) *{
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
	font-weight: 400;
	word-break:keep-all;
}
#page.smartled #fh5co-header .display-tc h1{
	font-weight:600;
	margin:100px 0 10px 0;
}
#page.smartled #fh5co-header .display-tc p:first-of-type{
	color:#02e2cf;
	font-size:38px;
}
#page.smartled #fh5co-header .display-tc p:last-of-type{
	font-size:28px;
	margin-top:2em;
	border-top:1px solid #FFF;
	border-bottom:1px solid #FFF;
	padding:12px 20px 7px 20px;
	display:inline-block;
}
@media screen and (max-width: 768px) {
	#page.smartled .fh5co-cover .display-t {
		padding-left: 3px;
		padding-right: 3px;
	}
	#page.smartled #fh5co-header .display-tc p:first-of-type{
		font-size:20px;
	}
	#page.smartled #fh5co-header .display-tc p:last-of-type{
		padding:9px 20px 7px 20px;
		font-size:16px;
	}
}

#page.smartled #fh5co-reason{
	display:inline-block;
	position:relative;
	width:100%;
}
#page.smartled #fh5co-reason .bg{
	position:absolute;
	left:0;
	bottom:0;
	display:inline-block;
	width: 100%;
    height: 390px;
	background: linear-gradient(90deg, #c9def0 5%, #ecf5fc 50%,#c9def0 100%);
}
#page.smartled #fh5co-reason .row{
	height:600px;
}
#page.smartled #fh5co-reason .row div.box-title{
	height:170px;
	padding:4em 0 0 0;
	color:#1d367b;
}
#page.smartled #fh5co-reason .row div.title1{
	height:auto;
	font-size:36px;
	font-weight:600;
}
#page.smartled #fh5co-reason .row div.title2{
	height:auto;
	font-size:24px;
}
#page.smartled #fh5co-reason .box-reason{
	height:500px;
}
#page.smartled #fh5co-reason .reason-person{
	position:absolute;
	left:0;
	bottom:0;
	display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

#page.smartled #fh5co-reason .reason-img{
	position:absolute;
	left:50%;
	bottom:0;
	width:530px;
    transform: translate(-50%,35px);
}
#page.smartled #fh5co-reason .reason1{
	position:absolute;
	left:50%;
	bottom:120px;
	margin-left:-475px;
	text-align:left;
	transform: translate(0, -160px);
	color:#1d367b;
}
#page.smartled #fh5co-reason .reason2{
	position:absolute;
	left:50%;
	bottom:120px;
	margin-left:-475px;
	text-align:left;
	transform: translate(0, 63px);
	color:#1d367b;
}
#page.smartled #fh5co-reason .reason3{
	position:absolute;
	left:50%;
	bottom:120px;
	margin-left:270px;
	text-align:left;
	transform: translate(0, -160px);
	color:#1d367b;
}
#page.smartled #fh5co-reason .reason4{
	position:absolute;
	left:50%;
	bottom:120px;
	margin-left:270px;
	text-align:left;
	transform: translate(0, 63px);
	color:#1d367b;
}

#page.smartled #fh5co-reason .title{
	font-size:20px;
	font-weight:600;
}
#page.smartled #fh5co-reason .des{
	font-size:16px;
	line-height:1.2em;
}
@media screen and (max-width: 1200px) {
	#page.smartled #fh5co-reason .bg{
		position:absolute;
		left:0;
		bottom:50px;
		height: 300px;
	}
	#page.smartled #fh5co-reason .row{
		height:600px;
	}
	#page.smartled #fh5co-reason .row div.box-title{
		height:150px;
	}
	#page.smartled #fh5co-reason .row div.title1{
		font-size:30px;
	}
	#page.smartled #fh5co-reason .row div.title2{
		font-size:20px;
	}
	#page.smartled #fh5co-reason .box-reason{
		height:400px;
	}
	#page.smartled #fh5co-reason .reason-person{
		left:-60px;
		width:240px;
	}

	#page.smartled #fh5co-reason .reason-img{
		width:430px;
	}
	#page.smartled #fh5co-reason .reason1{
		bottom:55px;
		margin-left:-335px;
	}
	#page.smartled #fh5co-reason .reason2{
		bottom:75px;
		margin-left:-335px;
	}
	#page.smartled #fh5co-reason .reason3{
		bottom:55px;
		margin-left:215px;
	}
	#page.smartled #fh5co-reason .reason4{
		bottom:75px;
		margin-left:215px;
	}
	#page.smartled #fh5co-reason .title{
		font-size:18px;
	}
	#page.smartled #fh5co-reason .des{
		font-size:14px;
	}
}
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 768px) {
	#page.smartled #fh5co-reason .bg{
		position:absolute;
		left:0;
		bottom:0px;
		height: 160px;
	}
	#page.smartled #fh5co-reason .row{
		height:300px;
	}
	#page.smartled #fh5co-reason .row>div{
		height:100%;
	}
	#page.smartled #fh5co-reason .row div.box-title{
		height:100px;
	}
	#page.smartled #fh5co-reason .row div.title1{
		font-size:20px;
		letter-spacing: -0.01em;
	}
	#page.smartled #fh5co-reason .row div.title2{
		font-size:14px;
	}
	#page.smartled #fh5co-reason .box-reason{
		height:180px;
	}
	#page.smartled #fh5co-reason .reason-person{
		bottom:160px;
		left:0;
		width:60px;
	}
	#page.smartled #fh5co-reason .reason-img{
		width:180px;
		transform: translate(-50%,20px);
	}
	#page.smartled #fh5co-reason .reason1{
		left:5px;
		top:65px;
		bottom:unset;
		margin-left:0;
		transform: translate(0, 0);
	}
	#page.smartled #fh5co-reason .reason2{
		left:5px;
		bottom:-12px;
		margin-left:0;
		transform: translate(0, 0);
	}
	#page.smartled #fh5co-reason .reason3{
		left:unset;
		right:5px;
		top:65px;
		bottom:unset;
		margin-left:0;
		transform: translate(0, 0);
		text-align:right;
	}
	#page.smartled #fh5co-reason .reason4{
		left:unset;
		right:5px;
		bottom:-12px;
		margin-left:0;
		transform: translate(0, 0);
		text-align:right;
	}
	#page.smartled #fh5co-reason .title{
		font-size:14px;
	}
	#page.smartled #fh5co-reason .des{
		font-size:12px;
	}
}
#page.smartled #fh5co-pkctrl {padding-bottom:9em;}
#page.smartled #fh5co-pkctrl .part-con {
	border: 5px solid #addbff;
	padding: 1em 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 4em 0 1em;
}
#page.smartled #fh5co-pkctrl .box-txt {
	color: #999;
	font-size: 14px;
	line-height: 18px;
}
#page.smartled #fh5co-pkctrl .part-con img {
	width: 100%;
	margin: 0 auto 5px;
}
#page.smartled #fh5co-pkctrl .ex-box img {
	width: 60%;
}
#page.smartled #fh5co-pkctrl .img-title {
	padding-top: 5px;
	font-size: 18px;
	line-height: 22px;
}
#page.smartled #fh5co-pkctrl .img-des {
	line-height: 20px;
	padding-top: 5px;
}
#page.smartled #fh5co-pkctrl .title {
	font-size: 24px;
	font-weight: bold;
	padding: 1em 0 2em;
}
#page.smartled #fh5co-pkctrl .con-wrap .title {
	padding: 1em 0;
}
#page.smartled #fh5co-pkctrl .swiper .border-line {
	margin: 3em auto 2em;
	background: none;
	width:50%;
	height: 40px;
	display: inline-block;
	border-top: 4px solid #ddd;
	position: relative;
}
#page.smartled #fh5co-pkctrl .swiper .border-line span.page {
	width: 110px;
	height: 50px;
	border: 4px solid;
	border-radius: 5%;
	font-size: 16px;
	font-weight: bold;
	line-height: 45px;
	background-color: #fff;
    margin: 0 auto 10px;
	color: #333;
	opacity: 1;
	transition: all .3s;
	display:block !important;
	position: absolute;
	top: -75%;
}
#page.smartled #fh5co-pkctrl .swiper .border-line span.page2.swiper-pagination-bullet-active {
	transform: translateX(-50%) scale(1.3);
	background-color: #36acc5;
	color: #fff !important;
}
#page.smartled #fh5co-pkctrl .swiper .border-line span.page1.swiper-pagination-bullet-active {
	background-color: #47d5f3;
	color: #fff !important;
}
#page.smartled #fh5co-pkctrl .swiper .border-line span.page3.swiper-pagination-bullet-active {
	background-color: #237181;
	color: #fff !important;
}
#page.smartled #fh5co-pkctrl .swiper .border-line span.swiper-pagination-bullet-active {
	transform: scale(1.3);
	transition: transform .5s;
	font-size: 18px;
}
#page.smartled #fh5co-pkctrl .swiper .border-line span.page1 {
	border-color: #47d5f3;
	left: 0;
}
#page.smartled #fh5co-pkctrl .swiper .border-line span.page2 {
	border-color: #36acc5;
	left: 50%;
	transform: translateX(-50%);
}
#page.smartled #fh5co-pkctrl .swiper .border-line span.page3 {
	border-color: #237181;
	right: 0;
}
#page.smartled #fh5co-pkctrl .swiper .border-line span.page1:hover {
	background-color: #47d5f3;
}
#page.smartled #fh5co-pkctrl .swiper .border-line span.page2:hover {
	background-color: #36aac5;
}
#page.smartled #fh5co-pkctrl .swiper .border-line span.page3:hover {
	background-color: #237181;
}

#page.smartled #fh5co-pkctrl .con-box .col-md-2 {
	width:20%;
}
#page.smartled #fh5co-pkctrl .con-box .img-title {
	padding-top: 1em;
}
#page.smartled #fh5co-pkctrl .con-box .img-title span {
	font-size: 22px;
	font-weight: bold;
}
#page.smartled #fh5co-pkctrl .con-box .img-des {
	padding-bottom: 10px;
	line-height: 20px;
}
#page.smartled #fh5co-pkctrl .con-box ul li {
	line-height: 20px;
}
#page.smartled #fh5co-pkctrl .con-box img {
	margin: 0 auto;
}
@media screen and (max-width:1200px){
	#page.smartled #fh5co-pkctrl .swiper .border-line {
		width: 75%;
	}
}
@media screen and (max-width:992px) {
	#page.smartled #fh5co-pkctrl{padding-bottom:0;}
	#page.smartled #fh5co-pkctrl .title {padding: 1em 0 10px;}
}
@media screen and (max-width:768px) {
	#page.smartled #fh5co-pkctrl .swiper .border-line {
		width: 90%;
	}
	#page.smartled #fh5co-pkctrl .swiper .border-line span.page {
		font-size: 12px;
		width:90px;
	}
	#page.smartled #fh5co-pkctrl .swiper .border-line span.swiper-pagination-bullet-active {
		font-size: 14px;
	}
	#page.smartled #fh5co-pkctrl .part-con {
		margin: 3em 0 10px;
		flex-direction: column;
		align-items: center;
	}
	#page.smartled #fh5co-pkctrl .col-xs-6 {
		padding: 0 5px;
	}
	#page.smartled #fh5co-pkctrl .con-box .col-md-2 {
		width: 33.3333%;
		padding: 5px 3px;
	}
	#page.smartled #fh5co-pkctrl .part-con img {
		margin-top: 1em;
	}
	#page.smartled #fh5co-pkctrl .ex-box img {
		width: 100%;
	}
	#page.smartled #fh5co-pkctrl .img-title {
		font-size: 16px;
		line-height: 20px;
	}
	#page.smartled #fh5co-pkctrl .img-des, #page.smartled #fh5co-pkctrl .con-box ul li {
		font-size: 14px;
		line-height: 18px;
	}
}

#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-product){
	padding:2em 0;
}
#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-street,#fh5co-product,#fh5co-construct,#fh5co-pkctrl) h2 .pin-icon{
	margin-bottom:0.5em;
}
#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-product,#fh5co-construct, #fh5co-pkctrl) h2{
	font-size:36px;
	font-weight:600;
	margin-bottom:0.3em;
}
#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-product, #fh5co-pkctrl) .sub-title{
	font-size:24px;
}
#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-product, #fh5co-pkctrl) .sub-des{
	font-size:16px;
}
#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-product) .sub-des .under{
	background: linear-gradient(0deg, #00e6d1 50%, transparent 50%);
    line-height: 1em;
}
@media screen and (max-width: 1200px) {
	#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-product,#fh5co-construct, #fh5co-pkctrl) h2{
		font-size:30px;
	}
	#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-product, #fh5co-pkctrl) .sub-title{
		font-size:20px;
	}
	#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-product, #fh5co-pkctrl) .sub-des{
		font-size:16px;
	}
}
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 768px) {
	#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-product){
		padding:2em 0 0.5em 0;
	}
	#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-product,#fh5co-construct, #fh5co-pkctrl) h2{
		font-size:24px;
	}
	#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-street,#fh5co-product,#fh5co-construct, #fh5co-pkctrl) h2 .pin-icon{
		margin-bottom:0.5em;
		width:30px;
	}
	#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-product, #fh5co-pkctrl) .sub-title{
		font-size:14px;
		line-height:1em;
	}
	#page.smartled :is(#fh5co-mesh,#fh5co-dimming,#fh5co-parking,#fh5co-cctv,#fh5co-stairs,#fh5co-product, #fh5co-pkctrl) .sub-des{
		font-size:12px;
	}
}


#page.smartled #fh5co-mesh .box-content{
	display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: center;
	margin-top:20px;
}

#page.smartled #fh5co-mesh .box-content .img-title{
	font-size:18px;
	font-weight:600;
	text-align:center;
	margin-top:30px;
}
#page.smartled #fh5co-mesh .box-content .img-title+div img{
	width:400px;
}
#page.smartled #fh5co-mesh .box-content .img-title+div{
	position:relative;
}
#page.smartled #fh5co-mesh .box-content .img-title+div .patent-tag{
	position:absolute;
	bottom:-20px;
	right:-20px;
	width:200px;
}
#page.smartled #fh5co-mesh .box-content .img-lamp img{
	width:740px;
	margin:0 auto;
}
#page.smartled #fh5co-mesh .box-content .remote{
	position:absolute;
	right:0;
	top:0;
    transform: translate(0,-50%);
}
#page.smartled #fh5co-mesh .box-content .box-vs{
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	margin-top:30px;
}
#page.smartled #fh5co-mesh .box-content .box-vs div{
	font-size:26px;
	font-weight:600;
}
#page.smartled #fh5co-mesh .box-content .box-vs img{
	width:40px;
}
#page.smartled #fh5co-mesh .box-content .box-des{
	margin-top:-40px;
}
#page.smartled #fh5co-mesh .box-content .box-des .diff-title{
	text-align:center;
	font-size:20px;
	font-weight:600;
	background:#00e7d3;
	border-radius:20px;
	display:inline-block;
	padding:3px 60px 0 60px;
	margin-bottom:20px;
}
#page.smartled #fh5co-mesh .box-content .box-des .box-other .diff-title{
	background:#bfbfbf;
}
#page.smartled #fh5co-mesh .box-content .box-des  ul{
	list-style: none;
	font-size:14px;
}
#page.smartled #fh5co-mesh .box-content .box-des  ul li:before{
	content:'■';
	font-size:10px;
	color:#00e7d3;
	margin-right:15px;
}
#page.smartled #fh5co-mesh .box-content .box-des .box-other ul li:before{
	color:#bfbfbf;
}
@media screen and (max-width: 1200px) {
	#page.smartled #fh5co-mesh .box-content .img-lamp img{
		width:740px;
		margin:0 0 0 20px;
	}
	#page.smartled #fh5co-mesh .box-content .box-vs {
		margin-top: 20px;
	}
	#page.smartled #fh5co-mesh .box-content .box-des{
		margin-top:-20px;
	}
	#page.smartled #fh5co-mesh .box-content .box-des  ul {
		padding-left:10px;
	}
	#page.smartled #fh5co-mesh .box-content .box-des  ul li:before{
		font-size:10px;
		margin-right:5px;
	}
}
@media screen and (max-width: 992px) {
	#page.smartled #fh5co-mesh .box-content .box-des .diff-title{
		font-size:18px;
		padding:3px 30px 0 30px;
	}
	#page.smartled #fh5co-mesh .box-content .box-des  ul{
		font-size:12px;
	}
	#page.smartled #fh5co-mesh .box-content .box-vs div{
		font-size:20px;
	}
}
@media screen and (max-width: 768px) {
	#page.smartled #fh5co-mesh .box-content{
		flex-direction: column;
		margin-top:20px;
	}
	#page.smartled #fh5co-mesh .box-content .img-lamp img{
		width:100%;
		margin:0;
	}
	#page.smartled #fh5co-mesh .box-content .remote{
		position:absolute;
		right:0;
		top:0;
		width:100px;
		transform: translate(0,-20px);
	}
	#page.smartled #fh5co-mesh .box-content .box-des .diff-title{
		margin-bottom: 6px;
	}
	#page.smartled #fh5co-mesh .box-content .box-vs {
		margin-top: 12px;
	}
	#page.smartled #fh5co-mesh .box-content .box-vs div{
		font-size:16px;
	}
	#page.smartled #fh5co-mesh .box-content .box-vs img{
		width:20px;
	}
	#page.smartled #fh5co-mesh .box-content .box-des{
		margin-top:-10px;
	}
	#page.smartled #fh5co-mesh .box-content .box-des .diff-title{
		min-width:130px;
		font-size:14px;
		padding:3px 15px 0 15px;
	}
	#page.smartled #fh5co-mesh .box-content .box-des  ul {
		padding-left:2px;
		font-size:10px;
		margin-bottom:0;
		padding-bottom:10px;
	}
	#page.smartled #fh5co-mesh .box-content .box-des .box-other ul{
		border-left:1px solid #CCC;
	}
	#page.smartled #fh5co-mesh .box-content .img-title{
		display:none;
	}
	#page.smartled #fh5co-mesh .box-content .img-title+div .patent-tag{
		position:absolute;
		bottom:-20px;
		right:0;
		width:100px;
		z-index:2;
	}
}

#page.smartled #fh5co-mesh .box-wmrc {
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: 100%;
}
#page.smartled #fh5co-mesh .box-wmrc .box-title {
	background:#FFFFFFc9;
	padding: 1vw 0;
	margin: 2vw 0 5vw 0;
	text-align:center;
}
#page.smartled #fh5co-mesh .box-wmrc .box-title .title{
	border-left:3px solid #333;
	border-right:3px solid #333;
	display:inline-block;
	padding: 0 3vw;
	margin-bottom:2vw;
	font-size:30px;
	font-weight:600;
}
#page.smartled #fh5co-mesh .box-wmrc .box-title .title-en{
	font-size:24px;
	font-weight:400;
}
#page.smartled #fh5co-mesh .box-wmrc .box-title .title-en strong{
	font-weight:600;
}
#page.smartled #fh5co-mesh .box-wmrc .box-title .des{
	font-size:18px;
	line-height:1.3em;
}
#page.smartled #fh5co-mesh .box-wmrc .img img{
	margin:0 auto;
	max-width:750px;
	width:60%;
}
#page.smartled #fh5co-mesh .box-wmrc .img div{
	font-size:20px;
	font-weight:600;
	margin:10px auto 30px auto;
}
@media screen and (max-width: 1200px) {
	#page.smartled #fh5co-mesh .box-wmrc .box-title .title{
		font-size:24px;
	}
	#page.smartled #fh5co-mesh .box-wmrc .box-title .title-en{
		font-size:20px;
	}
	#page.smartled #fh5co-mesh .box-wmrc .box-title .des{
		font-size:16px;
	}
	#page.smartled #fh5co-mesh .box-wmrc .img div{
		font-size:16px;
	}
}
@media screen and (max-width: 992px) {
	#page.smartled #fh5co-mesh .box-wmrc .box-title {
		padding: 1vw 0;
		margin: 2vw 0 3vw 0;
	}
	#page.smartled #fh5co-mesh .box-wmrc .box-title .title{
		font-size:22px;
	}
	#page.smartled #fh5co-mesh .box-wmrc .box-title .title-en{
		font-size:18px;
	}
	#page.smartled #fh5co-mesh .box-wmrc .box-title .des{
		font-size:14px;
	}
	#page.smartled #fh5co-mesh .box-wmrc .img div{
		font-size:14px;
	}
}
@media screen and (max-width: 768px) {
	#page.smartled #fh5co-mesh .box-wmrc {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#page.smartled #fh5co-mesh .box-wmrc .box-title {
		padding: 1vw 0;
		margin: 3vw 0 5vw 0;
	}
	#page.smartled #fh5co-mesh .box-wmrc .box-title .title{
		font-size:18px;
	}
	#page.smartled #fh5co-mesh .box-wmrc .box-title .title-en{
		font-size:12px;
	}
	#page.smartled #fh5co-mesh .box-wmrc .box-title .des{
		font-size:10px;
		    letter-spacing: -0.04em;
	}
	#page.smartled #fh5co-mesh .box-wmrc .img div{
		font-size:12px;
		margin:5px auto;
	}
}
#page.smartled #fh5co-dimming {
	padding-bottom:8em;
}
#page.smartled #fh5co-dimming ul {
	list-style:none;
}
#page.smartled #fh5co-dimming ul li{
	display: flex;
    align-items: flex-start;
    justify-content: flex-start;
	font-size:18px;
	color:#1d367b;
	margin-bottom:6px;
}
#page.smartled #fh5co-dimming ul li:before{
	content:'';
	background-image:url('/images/front/product/smartled/lamp_icon.png');
	background-size: contain;
	background-position: 0 0;
	background-repeat: no-repeat;
	display:inline-block;
	width:20px;
	height:30px;
	margin-right:10px;
}

@media screen and (max-width: 992px) {
	#page.smartled #fh5co-dimming ul li{
		font-size:16px;
	}
}
@media screen and (max-width: 768px) {
	#page.smartled #fh5co-dimming {
		padding-bottom:2em;
	}
	#page.smartled #fh5co-dimming ul {
		list-style:none;
		padding-left:2px;
	}
	#page.smartled #fh5co-dimming ul li{
		font-size:14px;
		margin-bottom:6px;
	}
	#page.smartled #fh5co-dimming ul li:before{
		width:15px;
		height:21px;
		margin-right:6px;
		flex:0 0 15px;
	}
}
#page.smartled #fh5co-parking {
	padding-bottom:4em;
}
#page.smartled #fh5co-parking ul {
	list-style:none;
	margin-top:8%;
	padding-left:10px;
}
#page.smartled #fh5co-parking ul li{
	display: flex;
    align-items: center;
    justify-content: flex-start;
	font-size:16px;
	margin-bottom:10px;
}
#page.smartled #fh5co-parking ul li:before{
	content:'';
	display:inline-block;
	width:10px;
	height:10px;
	background:#f3d571;
	border-radius:10px;
	margin-right:10px;
}

@media screen and (max-width: 992px) {
	#page.smartled #fh5co-parking ul {
		margin-top:3%;
		padding-left:3px;
	}
	#page.smartled #fh5co-parking ul li{
		font-size:14px;
		margin-bottom:5px;
	}
}
@media screen and (max-width: 768px) {
}
#page.smartled #fh5co-cctv .img-title{
	font-size:20px;
	font-weight:600;
	margin-top:10px;
}
#page.smartled #fh5co-cctv dl{
	margin-top:40px;
}
#page.smartled #fh5co-cctv dt{
	width:150px;
	color:#FFF;
	background:#000;
	position:relative;
	height:36px;
	font-size:18px;
	line-height:40px;
	padding:0 30px;
	text-align:right;
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
	float:left;
	margin-bottom:22px;
	margin-right:20px;
}
#page.smartled #fh5co-cctv dt span{
	position:absolute;
	left:5px;
	bottom:20px;
	font-size:20px;
	font-weight:600;
	color:#FFF;
	text-shadow:-3px -1px #333, 3px 0px #333, 3px -3px #333, 0px -3px #333;
	margin-top:-100px;
}
#page.smartled #fh5co-cctv dd{
	height:36px;
	line-height:1.3em;
	margin-bottom:22px;
}
@media screen and (max-width: 768px) {
	#page.smartled #fh5co-cctv .img-title{
		font-size:14px;
		margin-top:0.5em;
	}
	#page.smartled #fh5co-cctv dl{
		margin-top:20px;
	}
	#page.smartled #fh5co-cctv dt{
		height:30px;
		font-size:14px;
		line-height:33px;
		margin-bottom:5px;
		margin-right:20px;
		float:unset;
	}
	#page.smartled #fh5co-cctv dt span{
		bottom:16px;
		font-size:16px;
	}
	#page.smartled #fh5co-cctv dd{
		height:auto;
		margin-bottom:18px;
		padding-left:3px;
		font-size:14px;
	}
}

#page.smartled #fh5co-fire {
	background-image: url('/images/front/product/smartled/fire_bg.jpg');
	background-position:0 0;
	background-size:contain;
}
#page.smartled #fh5co-fire h2{
	font-size:36px;
	color:#eed76f;
	font-weight:600;
	margin-top:40px;
}
#page.smartled #fh5co-fire .sub-des{
	color:#FFF;
	font-size:18px;
	line-height:1.3em;
}
#page.smartled #fh5co-fire :is(.fire1,.fire2){
	margin:20px 0;
}
#page.smartled #fh5co-fire .fire3{
	margin-top:60px;
	padding-left:15px;
}
#page.smartled #fh5co-fire .fire4{
	position:absolute;
	top:0;
	right:0;
    transform: translateY(-44%);
}
#page.smartled #fh5co-fire :is(.fire1,.fire2,.fire3) img{
	width:100%;
}
#page.smartled #fh5co-fire .fire-person{
	position:absolute;
	bottom:0;
	right:0;
	width:300px;
}
#page.smartled #fh5co-fire .fire-arrow1{
	position:absolute;
	top:40%;
	left:5%;
	width:70px;
}
#page.smartled #fh5co-fire .fire-arrow2{
	position:absolute;
	bottom:10%;
	right:-40px;
	z-index:2;
	width:90px;
}

@media screen and (max-width: 992px) {
	#page.smartled #fh5co-fire h2{
		font-size:30px;
	}
	#page.smartled #fh5co-fire .sub-des{
		font-size:14px;
	}
	#page.smartled #fh5co-fire .fire4{
		width:150px;
		transform: translateY(-44%);
	}
	#page.smartled #fh5co-fire .fire-person{
		width:200px;
	}
	#page.smartled #fh5co-fire .fire-arrow1{
		top:37%;
		left:5%;
		width:50px;
	}
	#page.smartled #fh5co-fire .fire-arrow2{
		position:absolute;
		bottom:8%;
		right:-30px;
		z-index:2;
		width:60px;
	}
}
@media screen and (max-width: 768px) {
	#page.smartled #fh5co-fire h2{
		font-size:24px;
		margin-top:30px;
		margin-bottom:0.5em;
	}
	#page.smartled #fh5co-fire .sub-des{
		font-size:14px;
	}
	#page.smartled #fh5co-fire :is(.fire1,.fire2){
		margin:10px 0;
	}
	#page.smartled #fh5co-fire .fire3{
		margin-top:0;
		margin-bottom:20px;
		padding-left:0;
	}
	#page.smartled #fh5co-fire .fire4{
		position:absolute;
		top:unset;
		bottom:-100%;
		right:5px;
		transform: translateY(0);
		z-index:2;
		background: #ffffffb8;
		border-radius: 100px;
		padding: 1px 9px 0px 9px;
	}
	#page.smartled #fh5co-fire .fire-person{
		position:absolute;
		bottom:0;
		right:0;
		width:180px;
	}
	#page.smartled #fh5co-fire .fire-arrow1{
		position:absolute;
		top:43%;
		left:5%;
		width:40px;
	}
	#page.smartled #fh5co-fire .fire-arrow2{
		position:absolute;
		bottom:-5%;
		right:30%;
		z-index:2;
		width:40px;
		transform: rotate(180deg);
	}
}

#page.smartled #fh5co-street .row{
	background-image: url('/images/front/product/smartled/street_bg2.jpg');
	background-position:0 0;
	background-size:100%;
	background-repeat:no-repeat;
	max-height:790px;
	height:60vw;

}
#page.smartled #fh5co-street h2{
	font-size:36px;
	font-weight:600;
	margin-top: 60px;
	margin-left:5px;
}
#page.smartled #fh5co-street h2 .pin-icon{
	display:none;
}
#page.smartled #fh5co-street .sub-des{
	font-size:18px;
	line-height:1.3em;
	margin-left:5px;
}
@media screen and (max-width: 992px) {
	#page.smartled #fh5co-street h2{
		font-size:30px;
		margin-top: 30px;
	}
	#page.smartled #fh5co-street .sub-des{
		font-size:14px;
		margin-left:0px;
	}
}
@media screen and (max-width: 768px) {
	#page.smartled #fh5co-street {
		margin-top:3em;
	}
	#page.smartled #fh5co-street .row>div{
		margin-top:-90px;
	}
	#page.smartled #fh5co-street h2{
		font-size:24px;
		margin-top: 20px;
		margin-bottom:0.5em;
	}
	#page.smartled #fh5co-street h2 .pin-icon{
		display:block;
	}
	#page.smartled #fh5co-street .sub-des{
		font-size:12px;
	}

}

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

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

.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#page.smartled #fh5co-product .swiper{
	clear: both;
	width: 100%;
	height: 30vh;
	max-height: 270px;
}
#page.smartled #fh5co-product .swiper .swiper-slide{
	display:flex;
	border:1px solid #000;
	width: 100%;
	overflow:hidden;
	position:relative;
}
#page.smartled #fh5co-product #product2-swiper {
	margin-top: -1px;
}
#page.smartled #fh5co-product .swiper-slide img {
	object-fit:unset;
}
#page.smartled #fh5co-product .swiper .swiper-slide .slide-no{
	position:absolute;
	top:10px;
	left:20px;
	font-size:24px;
	font-weight:800;
	color:#62d4df;
}
#page.smartled #fh5co-product .swiper .swiper-slide .slide-no span{
	font-size:0.8em;
}
#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide .slide-no{
	left:unset;
	right:20px;
}
#page.smartled #fh5co-product #product1-swiper.swiper .swiper-slide > div{
	flex: 0 0 50%;
	height:100%;
	display: flex;
    align-items: center;
    justify-content: left;
}
#page.smartled #fh5co-product #product1-swiper.swiper .swiper-slide > div:last-of-type{
	flex: 0 0 50%;
}
#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide > div{
	flex: 0 0 50%;
	height:100%;
	display: flex;
    align-items: center;
    justify-content: left;
}
#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide > div:last-of-type{
	flex: 0 0 50%;
}
#page.smartled #fh5co-product .swiper .swiper-slide > div.text-right {
    justify-content: right;

}
#page.smartled #fh5co-product .swiper .swiper-slide > div .des-box{
	width:100%;
}
#page.smartled #fh5co-product .swiper .swiper-slide > div img{
	margin: 0;
}
#page.smartled #fh5co-product .swiper .swiper-slide > div ul {
	list-style: none;
	display: inline-block;
	padding-left:20%;
	width:100%;
}
#page.smartled #fh5co-product .swiper .swiper-slide > div ul li{
	display:flex;
	font-size:14px;
	width:100%;
	font-weight:700;
}
#page.smartled #fh5co-product .swiper .swiper-slide > div ul li .des-title{
	width: 27%;
	text-align:left;
}
#page.smartled #fh5co-product .swiper .swiper-slide > div ul li .des{
	text-align:left;
}
#page.smartled #fh5co-product .swiper .swiper-slide > div .product-title{
	min-width:60%;
    display: inline-block;
    padding: 5px 10px 0px 10px;
	margin: 10px auto 0 auto;
	background:#000;
	color:#FFF;
	line-height:1.2em;
}

#page.smartled #fh5co-product .swiper .swiper-button-next, #page.smartled #fh5co-product .swiper .swiper-button-prev{
  color:#CCC;
  opacity: 0.8;
}
#page.smartled #fh5co-product .swiper .swiper-button-next:after, #page.smartled #fh5co-product .swiper .swiper-button-prev:after{
	font-size:24px;
	font-weight:900;
}
@media screen and (max-width: 1200px) {
	#page.smartled #fh5co-product .swiper .swiper-slide > div ul {
		padding-left:10%;
	}
}
@media screen and (max-width: 992px) {
	#page.smartled #fh5co-product #product1-swiper.swiper .swiper-slide > div{
		flex: 0 0 60%;
		height:100%;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	#page.smartled #fh5co-product #product1-swiper.swiper .swiper-slide > div:last-of-type{
		flex: 0 0 40%;
	}
	#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide > div{
		flex: 0 0 40%;
		height:100%;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide > div:last-of-type{
		flex: 0 0 60%;
	}
	#page.smartled #fh5co-product .swiper{
		max-height: 210px;
	}
	#page.smartled #fh5co-product #product1-swiper.swiper .swiper-slide > div ul {
		padding-left:15px;
	}
	#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide > div ul {
		padding-left:35px;
	}
	#page.smartled #fh5co-product .swiper .swiper-slide > div ul li {
		font-size:12px;
	}
	#page.smartled #fh5co-product .swiper .swiper-slide > div .product-title{
		font-size:14px;
	}
	#page.smartled #fh5co-product .swiper .swiper-slide > div ul li .des-title{
		min-width:80px;
		width:auto;
		max-width:80px;
		padding-right:3px;
		word-break: keep-all;
	}
	#page.smartled #fh5co-product .swiper-slide img {
		object-fit:cover;
	}
}

@media screen and (max-width: 768px) {
	#page.smartled #fh5co-product .swiper{
		max-height: 180px;
	}
	#page.smartled #fh5co-product .swiper .swiper-slide > div{
		position:relative;
		display: flex;
		align-items: end;
		justify-content: left;
	}
	#page.smartled #fh5co-product .swiper .swiper-slide > div ul{
		padding-left:5%;
	}
	#page.smartled #fh5co-product .swiper .swiper-slide > div ul li{
		font-size:10px;
	}
	#page.smartled #fh5co-product .swiper .swiper-slide > div .product-title{
		margin:0 0 10px 0;
		width: 100%;
		font-size:12px;
		padding: 2px 10px 0px 10px;
	}
	#page.smartled #fh5co-product .swiper .swiper-slide .slide-no{
		top:5px;
		left:7px;
		font-size:16px;
		line-height:1.3em;
	}
	#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide .slide-no{
		left:unset;
		right:7px;
	}
	#page.smartled #fh5co-product #product1-swiper.swiper .swiper-slide img{
		margin-left: -25%;
	}
	#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide img{
		margin-right: -25%;
	}
	#page.smartled #fh5co-product #product1-swiper.swiper .swiper-slide > div{
		flex: 0 0 40%;
		height:100%;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	#page.smartled #fh5co-product #product1-swiper.swiper .swiper-slide > div:last-of-type{
		flex: 0 0 60%;
	}
	#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide > div{
		flex: 0 0 60%;
		height:100%;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide > div:last-of-type{
		flex: 0 0 40%;
	}
	#page.smartled #fh5co-product #product1-swiper.swiper .swiper-slide > div:nth-of-type(2){
		z-index:2;
		background:#FFF;
	}
	#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide > div:nth-of-type(1){
		z-index:2;
		background:#FFF;
	}
	#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide > div:nth-of-type(2){
		z-index:1;
	}
	#page.smartled #fh5co-product .swiper .swiper-button-next:after, #page.smartled #fh5co-product .swiper .swiper-button-prev:after{
		font-size:20px;
		font-weight:900;
	}
	#page.smartled #fh5co-product .common-des {
		font-size:12px;
	}
}
@media screen and (max-width: 500px) {
	#page.smartled #fh5co-product .swiper .swiper-slide > div{
		background: #000;
	}
	#page.smartled #fh5co-product #product1-swiper.swiper .swiper-slide img{
		margin-left: 0;
		object-position: 58% 10px;
	}
	#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide img{
		margin-right: 0;
		object-position: 42% 10px;
	}
}
@media screen and (max-width: 390px) {
	#page.smartled #fh5co-product #product1-swiper.swiper .swiper-slide img{
		margin-left: -70%;
	}
	#page.smartled #fh5co-product #product2-swiper.swiper .swiper-slide img{
		margin-right: -70%;
	}
}

#page.smartled #fh5co-construct{
	padding-bottom:4em;
}
#page.smartled #fh5co-construct .row {
	display:flex;
	align-items:end;
}
#page.smartled #fh5co-construct .row h2{
}
#page.smartled #fh5co-construct .count-box{
	display:inline-flex;
	align-items:baseline;
	font-size:22px;
	font-weight:700;
	margin-bottom: 0.3em;
}
#page.smartled #fh5co-construct .count-box+.count-box{
	margin-left:30px;
}
#page.smartled #fh5co-construct .count-title{
	font-size:12px;
	margin-right:10px;
}
#page.smartled #fh5co-construct .count-box > div{
	padding:0;
	display:flex;
	align-items:end;
}
#page.smartled #fh5co-construct .count-box img {
	margin:0 auto;
	width:70px !important;
	height:70px;
}
#page.smartled #fh5co-construct .count-box .count-num{
	color: #2F5597;
}
#page.smartled #fh5co-construct .count-box .count-num:after{
	content:'+ 시공';
	font-size:14px;
	color:#333;
}
@media screen and (max-width: 500px) {
	#page.smartled #fh5co-construct{
		padding-bottom:2em;
	}
	#page.smartled #fh5co-construct .count-box{
		margin-bottom:0;
	}
	#page.smartled #fh5co-construct .count-box+.count-box{
		margin-left:0;
	}
	#page.smartled #fh5co-construct .count-box > div{
		flex:1;
		width:115px;
		padding:0;
		line-height: 1;
	}
	#page.smartled #fh5co-construct .count-box img {
		margin:0 auto;
		width:60px !important;
		height:60px;
	}
	#page.smartled #fh5co-construct .count-box .count-num{
		font-size:14px;
		line-height: 1;
	}
	#page.smartled #fh5co-construct .count-box .count-num:after{
		content:'+ 시공';
		font-size:12px;
		color:#333;
	}
}

#page.smartled #fh5co-construct .swiper{
	width: 100%;
	height: 580px;
	margin-left: auto;
	margin-right: auto;
	border:0px solid blue;
}
#page.smartled #fh5co-construct .swiper-slide{
	text-align: center;
	font-size: 18px;
	background: #fff;
	width: 274px !important;
	height: calc((100% - 30px) / 2) !important;

	/* Center slide text vertically */
	display: flex;
	justify-content: center;
	align-items: center;
	border:0px solid red;
}
#page.smartled #fh5co-construct .swiper-pagination {
	bottom: -10px !important;
    top: unset !important;
	width: 80%;
    margin: 0 auto 0 10%;
}
#page.smartled #fh5co-construct .swiper-pagination .swiper-pagination-progressbar-fill{
  background: #5d5d5d;
}

@media screen and (max-width: 500px) {
	#page.smartled #fh5co-construct .swiper{
		height: 274px !important;
	}
	#page.smartled #fh5co-construct .swiper-slide{
		height: 100% !important;
	}
	#page.smartled #fh5co-construct .swiper-pagination {
		bottom: 26px !important;
		top: unset !important;
		width: 100%;
		margin: 0;
	}
}
@media screen and (max-width: 390px) {
	#page.smartled #fh5co-construct .swiper{
		height: 274px !important;
	}
	#page.smartled #fh5co-construct .swiper-slide{
		height: 100% !important;
	}
	#page.smartled #fh5co-construct .swiper-pagination {
		bottom: 26px !important;
		top: unset !important;
		width: 100%;
		margin: 0;
	}
}
/* 시공사례 카드css s --------------------------------------------------------------------------*/
:root {
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
}

#page.smartled #fh5co-construct .swiper-slide .card {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
  align-items: flex-end;
  overflow: hidden;
  padding: 1rem;
  width: 100%;
  height: 100%;
  text-align: center;
  color: whitesmoke;
  background-color: whitesmoke;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.1);
}
/*
@media (min-width: 600px) {
  .card {
    height: 350px;
  }
}*/
#page.smartled #fh5co-construct .swiper-slide .card:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110%;
  background-size: cover;
  background-position: 0 0;
  -webkit-transition: -webkit-transform calc(var(--d) * 1.5) var(--e);
  transition: -webkit-transform calc(var(--d) * 1.5) var(--e);
  transition: transform calc(var(--d) * 1.5) var(--e);
  transition: transform calc(var(--d) * 1.5) var(--e), -webkit-transform calc(var(--d) * 1.5) var(--e);
  pointer-events: none;
}
#page.smartled #fh5co-construct .swiper-slide .card:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  pointer-events: none;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(11.7%, rgba(0, 0, 0, 0.009)), color-stop(22.1%, rgba(0, 0, 0, 0.034)), color-stop(31.2%, rgba(0, 0, 0, 0.072)), color-stop(39.4%, rgba(0, 0, 0, 0.123)), color-stop(46.6%, rgba(0, 0, 0, 0.182)), color-stop(53.1%, rgba(0, 0, 0, 0.249)), color-stop(58.9%, rgba(0, 0, 0, 0.32)), color-stop(64.3%, rgba(0, 0, 0, 0.394)), color-stop(69.3%, rgba(0, 0, 0, 0.468)), color-stop(74.1%, rgba(0, 0, 0, 0.54)), color-stop(78.8%, rgba(0, 0, 0, 0.607)), color-stop(83.6%, rgba(0, 0, 0, 0.668)), color-stop(88.7%, rgba(0, 0, 0, 0.721)), color-stop(94.1%, rgba(0, 0, 0, 0.762)), to(rgba(0, 0, 0, 0.79)));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.009) 11.7%, rgba(0, 0, 0, 0.034) 22.1%, rgba(0, 0, 0, 0.072) 31.2%, rgba(0, 0, 0, 0.123) 39.4%, rgba(0, 0, 0, 0.182) 46.6%, rgba(0, 0, 0, 0.249) 53.1%, rgba(0, 0, 0, 0.32) 58.9%, rgba(0, 0, 0, 0.394) 64.3%, rgba(0, 0, 0, 0.468) 69.3%, rgba(0, 0, 0, 0.54) 74.1%, rgba(0, 0, 0, 0.607) 78.8%, rgba(0, 0, 0, 0.668) 83.6%, rgba(0, 0, 0, 0.721) 88.7%, rgba(0, 0, 0, 0.762) 94.1%, rgba(0, 0, 0, 0.79) 100%);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: -webkit-transform calc(var(--d) * 2) var(--e);
  transition: -webkit-transform calc(var(--d) * 2) var(--e);
  transition: transform calc(var(--d) * 2) var(--e);
  transition: transform calc(var(--d) * 2) var(--e), -webkit-transform calc(var(--d) * 2) var(--e);
}

#page.smartled #fh5co-construct .swiper-slide .content {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  padding: 1rem;
  -webkit-transition: -webkit-transform var(--d) var(--e);
  transition: -webkit-transform var(--d) var(--e);
  transition: transform var(--d) var(--e);
  transition: transform var(--d) var(--e), -webkit-transform var(--d) var(--e);
  z-index: 1;
}
#page.smartled #fh5co-construct .swiper-slide .content > * + * {
  margin-top: 1rem;
}

#page.smartled #fh5co-construct .swiper-slide .title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.7px;
  color:#FFF;
}

#page.smartled #fh5co-construct .swiper-slide .copy{
  font-size: 1.4rem;
  /*font-style: italic;*/
  line-height: 1.5;
  text-align: left;
  font-weight: 600;
  word-break: keep-all;
}
#page.smartled #fh5co-construct .swiper-slide .copy .system {
  font-weight: 500;
  background: #22b3c9;
  display:inline-block;
  padding:5px 5px 4px 4px;
  margin-bottom:5px;
}
@media screen and (max-width: 600px) {
	#page.smartled #fh5co-construct .swiper-slide .title {
		width:100%;
		text-align:left;
		font-size: 1.4rem;
	}
	#page.smartled #fh5co-construct .swiper-slide .copy{
		font-size: 1.3rem;
	}
	#page.smartled #fh5co-construct .swiper-slide .copy .system {
		padding:3px 4px 2px 3px;
		margin-bottom:5px;
		font-size: 1.3rem;
	}
}
@media (hover: hover) and (min-width: 600px) {
  #page.smartled #fh5co-construct .swiper-slide .card:after {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }

  #page.smartled #fh5co-construct .swiper-slide .content {
    -webkit-transform: translateY(calc(100% - 4.5rem));
            transform: translateY(calc(100% - 4.5rem));
  }
  #page.smartled #fh5co-construct .swiper-slide .content > *:not(.title) {
    opacity: 0;
    -webkit-transform: translateY(1rem);
            transform: translateY(1rem);
    -webkit-transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
    transition: opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e);
    transition: transform var(--d) var(--e), opacity var(--d) var(--e), -webkit-transform var(--d) var(--e);
  }

  #page.smartled #fh5co-construct .swiper-slide .card:hover,
  #page.smartled #fh5co-construct .swiper-slide .card:focus-within {
    -webkit-box-align: center;
            align-items: center;
  }
  #page.smartled #fh5co-construct .swiper-slide .card:hover:before,
  #page.smartled #fh5co-construct .swiper-slide .card:focus-within:before {
    -webkit-transform: translateY(-4%);
            transform: translateY(-4%);
  }
  #page.smartled #fh5co-construct .swiper-slide .card:hover:after,
  #page.smartled #fh5co-construct .swiper-slide .card:focus-within:after {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  #page.smartled #fh5co-construct .swiper-slide .card:hover .content,
  #page.smartled #fh5co-construct .swiper-slide .card:focus-within .content {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  #page.smartled #fh5co-construct .swiper-slide .card:hover .content > *:not(.title),
  #page.smartled #fh5co-construct .swiper-slide .card:focus-within .content > *:not(.title) {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition-delay: calc(var(--d) / 8);
            transition-delay: calc(var(--d) / 8);
  }

  #page.smartled #fh5co-construct .swiper-slide .card:focus-within:before, #page.smartled #fh5co-construct .swiper-slide .card:focus-within:after,
  #page.smartled #fh5co-construct .swiper-slide .card:focus-within .content,
  #page.smartled #fh5co-construct .swiper-slide .card:focus-within .content > *:not(.title) {
    -webkit-transition-duration: 0s;
            transition-duration: 0s;
  }
}
@media (hover: hover) and (min-width: 600px) {
  #page.smartled #fh5co-construct .swiper-slide .card:hover:after,
  #page.smartled #fh5co-construct .swiper-slide .card:focus-within:after {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
}
/* 시공사례 카드css e --------------------------------------------------------------------------*/


/* new EV-------------------------------------------------------------------------*/

#page.eco_ev {

}

#page.eco_ev>div:not(#fh5co-offcanvas) *{
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
	font-weight: 400;
	word-break:keep-all;
}
#page.eco_ev>div:not(#fh5co-offcanvas) sup {}
#page.eco_ev #fh5co-header .display-tc h1{
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
	font-weight:500;
	margin:-40px 0 10px 0;
	display: flex;
    align-items: flex-end;
    justify-content: center;
    line-height: 0.8em;
}
#page.eco_ev #fh5co-header .display-tc h1 .img{
	display:inline-block;
	max-width:200px;
	width:3.5em;
	margin-right:0.4em;
}
#page.eco_ev .title-bg1 {
	margin-top:3em;
	padding: 0 0 1.5em 2.5em;
	height:115px;
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: 1.5em;
	line-height: 1.4em;
	background-image: url("/images/front/product/eco_ev/title_bg1.png");
	background-size: auto;
	background-repeat: no-repeat;
	background-position: bottom left;
}
#page.eco_ev .title-bg1>div{
	font-weight:600 !important;
}
@media screen and (max-width: 768px) and (any-pointer:coarse){
	#page.eco_ev .title-bg1 {
		margin-top:2em;
		padding: 0 0 0.5em 2.5em;
		height:115px;
		font-size: 1.2em;
		background-image: url("/images/front/product/eco_ev/title_bg1.png");
		background-size: 99% auto;
	}
}


#page.eco_ev #fh5co-reason .resaon-person{
	position:relative;
}
#page.eco_ev #fh5co-reason .resaon-person img{
	margin:0 auto;
}
#page.eco_ev #fh5co-reason .resaon-person:before{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	width:350px;
	height: 400px;
	transform: translate(-75%, -130px);
	z-index:-1;
	background-image: url("/images/front/product/eco_ev/reason_dot1.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top right;
}
#page.eco_ev #fh5co-reason .resaon-person:after{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	width:350px;
	height: 400px;
	transform: translate(-25%, -170px);
	z-index:-1;
	background-image: url("/images/front/product/eco_ev/reason_dot2.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
}
@media screen and (max-width: 992px) {
	#page.eco_ev #fh5co-reason .resaon-person:before{
		width:120%;
		transform: translate(-66%, -30%);
	}
	#page.eco_ev #fh5co-reason .resaon-person:after{
		width:120%;
		transform: translate(-33%, -33%);
	}
}
@media screen and (max-width: 768px) {
	#page.eco_ev #fh5co-reason .resaon-person:before{
		width:120%;
		transform: translate(-75%, -30%);
	}
	#page.eco_ev #fh5co-reason .resaon-person:after{
		width:120%;
		transform: translate(-25%, -33%);
	}
	#page.eco_ev #fh5co-review sup {top: -0.1em;}
}
@media screen and (max-width: 500px) {
	#page.eco_ev #fh5co-reason .resaon-person:before{
		width:120%;
		transform: translate(-75%, -15%);
	}
	#page.eco_ev #fh5co-reason .resaon-person:after{
		width:120%;
		transform: translate(-25%, -20%);
	}
}


#page.eco_ev #fh5co-reason .reason-box {
	display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	margin-top:15%;

	font-size: 1em;
	line-height: 1.2em;
	padding:10px;
	width:320px;
	height:130px;
	border-radius: 70px;
}
#page.eco_ev #fh5co-reason .reason-col:first-of-type .reason-box:nth-of-type(1) {
	background: linear-gradient(180deg, #0581b2, #019dc1);
}
#page.eco_ev #fh5co-reason .reason-col:first-of-type .reason-box:nth-of-type(2) {
	background: linear-gradient(180deg, #08a1bd, #0eb9c9);
	transform: translate(-50px, 0);
}
#page.eco_ev #fh5co-reason .reason-col:first-of-type .reason-box:nth-of-type(3) {
	background: linear-gradient(180deg, #12bfcc, #21d2d0);
}
#page.eco_ev #fh5co-reason .reason-col:last-of-type .reason-box:nth-of-type(1) {
	background: linear-gradient(180deg, #335295, #493f99);
}
#page.eco_ev #fh5co-reason .reason-col:last-of-type .reason-box:nth-of-type(2) {
	background: linear-gradient(180deg, #4d3a8f, #7a3794);
	transform: translate(50px, 0);
}
#page.eco_ev #fh5co-reason .reason-col:last-of-type .reason-box:nth-of-type(3) {
	background: linear-gradient(180deg, #973b9b, #dd42a9);
}
#page.eco_ev #fh5co-reason .reason-box.reverse {
    flex-direction: row-reverse;
}
#page.eco_ev #fh5co-reason .reason-box .img{
	flex:0 0 110px;
	background: linear-gradient(270deg, #00000035, #65656514);
	width:110px;
	height:110px;
	border-radius: 60px;
}
#page.eco_ev #fh5co-reason .reason-col:last-of-type .reason-box .img{
	background: linear-gradient(90deg, #00000035, #6565652e);
}
#page.eco_ev #fh5co-reason .reason-box .img img{
	margin:14px 15px 15px 15px;
	width:80px;
}
#page.eco_ev #fh5co-reason .reason-box .reason-kind{
	flex:0 0 200px;
	padding:8px 0 0 35px;
	color:#FFF;
}
#page.eco_ev #fh5co-reason .reason-col:last-of-type .reason-box .reason-kind{
	padding:0 0 0 10px;
}
#page.eco_ev #fh5co-reason .reason-box .reason-kind .reason-title{
	font-size:1.2em;
	font-weight:600;
	margin-bottom: 8px;
}
#page.eco_ev #fh5co-reason .reason-box .reason-kind .reason-title .title-img{
	display:none;
}
@media screen and (max-width: 992px) {
	#page.eco_ev #fh5co-reason .reason-box {
		font-size: 0.9em;
		line-height: 1.1em;
		padding:10px;
		width:270px;
		height:110px;
		border-radius: 70px;
	}
	#page.eco_ev #fh5co-reason .reason-box .img{
		flex:0 0 100px;
		width:100px;
		height:100px;
	}
	#page.eco_ev #fh5co-reason .reason-box .img img{
		margin:14px 15px 15px 15px;
		width:70px;
	}
	#page.eco_ev #fh5co-reason .reason-box .reason-kind{
		flex:0 0 160px;
		padding:8px 0 0 25px;
	}
	#page.eco_ev #fh5co-reason .reason-col:last-of-type .reason-box .reason-kind{
		padding:0 0 0 0px;
	}
	#page.eco_ev #fh5co-reason .reason-col:first-of-type .reason-box:nth-of-type(2) {
		transform: translate(-30px, 5px);
	}
	#page.eco_ev #fh5co-reason .reason-col:last-of-type .reason-box:nth-of-type(1) {
		transform: translate(-20px, 0);
	}
	#page.eco_ev #fh5co-reason .reason-col:last-of-type .reason-box:nth-of-type(2) {
		transform: translate(10px, 0);
	}
	#page.eco_ev #fh5co-reason .reason-col:last-of-type .reason-box:nth-of-type(3) {
		transform: translate(-10px, 0);
	}
}
@media screen and (max-width: 540px), (any-pointer:coarse) {
	#page.eco_ev #fh5co-reason .reason-box {
		font-size: 0.7em;
		width:145px;
		height:70px;
		margin:5px;
		transform: translate(0, 0) !important;
		border-radius: 25px;
	}
	#page.eco_ev #fh5co-reason .reason-box .img{
		display:none;
	}
	#page.eco_ev #fh5co-reason .reason-box .reason-kind{
		flex:0 0 130px;
		padding:0px 0 0 10px;
	}
	#page.eco_ev #fh5co-reason .reason-col:last-of-type .reason-box{
		margin-left:-10px;
	}
	#page.eco_ev #fh5co-reason .reason-col:last-of-type .reason-box .reason-kind{
		padding:0 0 0 7px;
	}
	#page.eco_ev #fh5co-reason .reason-box .reason-kind .reason-title .title-img{
		display:inline-block;
		margin-bottom: -5px;
		width:20px;
		height:20px;
	}
}

#page.eco_ev #fh5co-warning{
	background:#ff2f2f33;
	/*background:#344c64;*/
	color:#FFF;
	padding:2em 0 0 0;
	/*margin-bottom:4em;*/
}
#page.eco_ev #fh5co-warning .title-img{
	display:inline-block;
	width:140px;
	margin-bottom:-20px;
}
#page.eco_ev #fh5co-warning .title-img img{
	width:100px;
}


#page.eco_ev #fh5co-warning .title-img {
	position: relative;
}
#page.eco_ev #fh5co-warning .title-img:before, #page.eco_ev #fh5co-warning .title-img:after {
    content: "";
    top: 30%;
    display: block;
    width: 5em;
    height: 5em;
    position: absolute;
    border-width: 1em;
    border-style: double;
    border-color: transparent;
    box-sizing: border-box;
    border-radius: 1em;
    animation: spin 2s infinite;
	filter: blur(15px);
}
#page.eco_ev #fh5co-warning .title-img:after {
	left: 0em;
	border-right-color: #ff0000;
}
#page.eco_ev #fh5co-warning .title-img:before {
	right: 0em;
	border-left-color: #ff0000;
}

@keyframes spin {
  0% {
    transform: rotate(360deg);
  }
  50% {
    transform: rotate(0deg);
  }
}

#page.eco_ev #fh5co-warning .title{
	display:inline-block;
	font-size:1em;
	font-weight:400;
	padding:2em 0;
	background: linear-gradient(0deg, #ff0000, #ff9b92);
    color: transparent;
    -webkit-background-clip: text;
}
#page.eco_ev #fh5co-warning .title span{
	font-size:2.2em;
	font-weight:600;
	line-height: 1.2em;
}
#page.eco_ev #fh5co-warning .title div{
	color: #ff2b3d;
    font-weight: 500;
    background: #fff92e;
    line-height: 1em;
    padding: 3px 5px 0 3px;
    display: inline-block;
}
#page.eco_ev #fh5co-warning .warning-box {
	padding:1em;
	background:#FFF;
}
#page.eco_ev #fh5co-warning .warning-title{
	color:#444;
	line-height: 1em;
	font-size:1.4em;
	font-family: Gulim,doutm,tahoma,sans-serif;
	font-weight: 600;
}
#page.eco_ev #fh5co-warning .warning-title span{
	font-size:0.6em;
	font-family: Gulim,doutm,tahoma,sans-serif;
}
#page.eco_ev #fh5co-warning .warning-title span.blue{
	color:#3c7fbc;
}
#page.eco_ev #fh5co-warning .warning-des{
	margin-top:1em;
	color:#444;
	font-family: Gulim,doutm,tahoma,sans-serif;
	font-size: 0.9em;
	line-height: 1.3em;
}
#page.eco_ev #fh5co-warning .warning-des span{
	color: #151594;
	font-family: Gulim,doutm,tahoma,sans-serif;
	font-weight: 600;
}
#page.eco_ev #fh5co-warning .warning-des span.blue{
	font-size:0.9em;
	color:#3c7fbc;
}
#page.eco_ev #fh5co-warning .contents-box{
	display:flex;
	margin:1em 0;
}
#page.eco_ev #fh5co-warning .contents-box>div{
	border:1px solid #FFF;
	flex:0 0 49%;
	background:#FFF;
	color:#333;
	font-size:0.9em;
}
#page.eco_ev #fh5co-warning .contents-box>div:first-of-type{
	margin-right:1%;
}
#page.eco_ev #fh5co-warning .contents-box>div:last-of-type{
	margin-left:1%;
	position:relative;
}
#page.eco_ev #fh5co-warning .contents-box>div:last-of-type:after{
	content:'';
	position:absolute;
	right:0;
	bottom:0;
	width:200px;
	height:200px;
	background-image:url('/images/front/product/eco_ev/light2.png');
	background-position: bottom right;
    background-size: contain;
    background-repeat: no-repeat;
	transform-origin: bottom left;
	animation: light_move 3s linear 2s infinite alternate ;
}
@keyframes light_move {
  0% {
	transform:rotate(0deg);
  }
  20% {
	transform:rotate(-20deg);
  }
  40% {
	transform:rotate(0deg);
  }
  60% {
	transform:rotate(-20deg);
  }
  80% {
	transform:rotate(0deg);
  }
}
#page.eco_ev #fh5co-warning .contents-box .sub-title{
	color:#FFF;
	background:#9f1a1a;
	/*background:#2a3035;*/
	font-size:1.3em;
	font-weight:600;
	text-align:center;
	font-family: Gulim,doutm,tahoma,sans-serif;
}
#page.eco_ev #fh5co-warning .contents-box>div dl{
	min-height: 60px;
    margin: 1em 1em 0.5em 1.5em;
	font-family: Gulim,doutm,tahoma,sans-serif;
}
#page.eco_ev #fh5co-warning .contents-box>div dt{
	font-weight:600;
	font-family: Gulim,doutm,tahoma,sans-serif;
}
#page.eco_ev #fh5co-warning .contents-box>div dt:before{
	content:url( "/images/front/product/eco_ev/chk.png" );
	width:20px;
	transform: scale(.8);
	display: inline-block;
	vertical-align: sub;
	margin-right:5px;
}
#page.eco_ev #fh5co-warning .contents-box>div dd{
	font-size:0.9em;
	padding-left:1em;
}
#page.eco_ev #fh5co-warning .contents-box>div dd:before{
	content:'·';
	margin-right:0.4em;
}
#page.eco_ev #fh5co-warning .contents-box>div dd strong{
	font-weight:600;
}
@media screen and (max-width: 768px) {
	#page.eco_ev #fh5co-warning .title-img{
		display:inline-block;
		width:60px;
		margin-bottom:-5px;
	}
	#page.eco_ev #fh5co-warning .title-img img{
		width:90%;
	}
	#page.eco_ev #fh5co-warning .title{
		display:inline-block;
		font-size:0.8em;
		padding:2em 0 1em 0;
	}
	#page.eco_ev #fh5co-warning .title span{
		font-size:1.7em;
	}
	#page.eco_ev #fh5co-warning .warning-box {
		margin:0 0.3em;
	}
	#page.eco_ev #fh5co-warning .warning-title{
		font-size:1.1em;
	}
	#page.eco_ev #fh5co-warning .warning-title span.block{
		display:inline-block;
	}
	#page.eco_ev #fh5co-warning .warning-des{
		font-size: 0.8em;
	}
	#page.eco_ev #fh5co-warning .contents-box{
		display:flex;
		flex-direction: column;
		margin:1em 0;
	}
	#page.eco_ev #fh5co-warning .contents-box>div{
		border:1px solid #FFF;
		flex:0 0 50%;
		font-size:0.8em;
	}
	#page.eco_ev #fh5co-warning .contents-box>div:first-of-type{
		margin-right:0;
	}
	#page.eco_ev #fh5co-warning .contents-box>div:last-of-type{
		margin-left:0;
	}
	#page.eco_ev #fh5co-warning .contents-box>div:last-of-type:after{
		content:'';
		right: -100px;
		width:100px;
		height:100px;
		transform:scaleX(-1) rotate(350deg) translate(0px, 0px);
	}
	@keyframes light_move {
	  0% {
		transform:scaleX(-1) rotate(350deg);
	  }
	  20% {
		transform:scaleX(-1) rotate(330deg);
	  }
	  40% {
		transform:scaleX(-1) rotate(350deg);
	  }
	  60% {
		transform:scaleX(-1) rotate(330deg);
	  }
	  80% {
		transform:scaleX(-1) rotate(350deg);
	  }
	}
	#page.eco_ev #fh5co-warning .contents-box .sub-title{
		font-size:1.2em;
	}
	#page.eco_ev #fh5co-warning .contents-box>div dl{
		min-height: 40px;
	}
}

/* tel-bar, step */
#page.eco_ev #fh5co-warning .fh5co-tel-bar {
    margin-top:100px;
    background:transparent;
	box-shadow:unset;
}
#page.eco_ev #fh5co-warning .fh5co-tel-bar.bottom {
    margin-top:0;
}
#page.eco_ev #fh5co-warning .fh5co-tel-bar .box-des {
    display:flex;
    height:200px;
}

#page.eco_ev #fh5co-warning .fh5co-tel-bar .img {
	position:relative;
	height:100%;
	width:260px;
}
#page.eco_ev #fh5co-warning .fh5co-tel-bar .img img{
	position:absolute;
	bottom:0;
	width:260px;
	max-width:unset;
	left:-10%;
}
#page.eco_ev #fh5co-warning .fh5co-tel-bar .des {
    display:flex;
    align-items: center;
    justify-content: center;
}
#page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title1{
    font-size: 18px !important;
    line-height: 1.2em !important;
    color:#333;
}
#page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title1 strong{
    font-size: 1.5em;
    line-height: 1em;
    color:#333;
	font-weight:600;
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
}
#page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title1 .underline-orange{
	background:linear-gradient(0deg, transparent 10%, #ff7946 10%, #ff7946 60%, transparent 60%);
}
#page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title2{
	margin-top:5px;
    font-size: 44px !important;
    line-height: 1.1em !important;
    font-weight:600 !important;
    color:#333;
}
#page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title3{
    font-size: 16px !important;
    line-height: 1.1em !important;
    color:#333;
}
#page.eco_ev #fh5co-warning .fh5co-tel-bar .tel-number {
    height:200px;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0;
}
#page.eco_ev #fh5co-warning .fh5co-tel-bar .tel-number a{
    color:#333;
    font-size: 48px !important;
    font-weight:600 !important;
}
#page.eco_ev #fh5co-warning .fh5co-tel-bar .tel-number img{
    width:65px;
    margin-top:-5px;
}
@media screen and (max-width: 1200px) {
	#page.eco_ev #fh5co-warning .fh5co-tel-bar .img {
		width:220px;
	}
	#page.eco_ev #fh5co-warning .fh5co-tel-bar .img img{
		width:220px;
		left:0;
	}
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title1{
        line-height: 24px !important;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title2{
        font-size: 38px !important;
        line-height: 1.1em !important;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title3{
        font-size: 12px !important;
        letter-spacing: -0.09em;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .tel-number a {
        font-size: 44px !important;
		letter-spacing: -0.07em;
    }
}
@media screen and (max-width: 992px) {
    #page.eco_ev #fh5co-warning .fh5co-tel-bar {
        margin-top:80px;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar.bottom {
        margin-top:0;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .img {
        width:140px;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .img img{
        width:200px;
        left:-60px;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title1{
        font-size: 16px !important;
        line-height: 20px !important;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title2{
        font-size: 32px !important;
        line-height: 1.1em !important;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title3{
        font-size: 12px !important;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .box-des {
        height:200px;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .tel-number {
        height:200px;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .tel-number a {
        font-size: 40px !important;
		letter-spacing: -0.1em;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .tel-number img{
        width:50px;
    }
}
@media screen and (max-width: 768px) {
    #page.eco_ev #fh5co-warning .fh5co-tel-bar {
        margin-top:55px;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar.bottom {
        margin-top:0px;
		padding:1em 0 0 0;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .box-des {
        height:75px;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .img {
        width:130px;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .img img{
        width:130px;
        left:0px;
        bottom:-60px;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar.bottom .img img{
        width:130px;
        left:0px;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .des{
        width:100%;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title1{
        font-size: 14px !important;
        line-height: 20px !important;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title2{
        font-size: 24px !important;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .des .title3{
        font-size: 12px !important;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .tel-number {
        height:60px;
        margin-left:15px;
        align-items: flex-end;
        justify-content: center;
        padding-bottom:10px;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .tel-number a{
        font-size:28px !important;
		line-height: 1.3em;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar .tel-number img{
        width:40px;
        margin-top:0;
    }
    #page.eco_ev #fh5co-warning .fh5co-tel-bar.bottom .des :is(.title1,.title2,.title3) {
        letter-spacing: -0.1em;
    }
}
#page.eco_ev #fh5co-warning #fh5co-step {
    padding-top:2em;
    padding-bottom:0;
	background:transparent;
}
#page.eco_ev #fh5co-warning #fh5co-step .title{
    font-size:24px;
    line-height:1em;
    display:inline-block;
    border-bottom:1px solid #333;
    margin-bottom:30px;
    color:#333;
}
#page.eco_ev #fh5co-warning #fh5co-step .title1{
    color:#0066c9;
	font-weight:500;
    margin-bottom:10px;
	font-size:24px;
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
}
#page.eco_ev #fh5co-warning #fh5co-step .title2{
    margin-bottom:30px;
	font-size:48px;
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
	font-weight:900;
	letter-spacing: -0.04em;
}
#page.eco_ev #fh5co-warning #fh5co-step .title2 strong:not(.ft-orange){
    color:#0066c9;
	font-size:48px;
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
	font-weight:900;
	letter-spacing: -0.04em;
}
#page.eco_ev #fh5co-warning #fh5co-step .title2 strong.ft-orange {
	color:#f05120;
	font-size:48px;
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
	font-weight:900;
	letter-spacing: -0.04em;
}
#page.eco_ev #fh5co-warning #fh5co-step .box-step {
    display:flex;
    align-items: flex-start;
    justify-content: center;
    padding-bottom:10px;
    border-bottom:2px solid #333333e0;
}
#page.eco_ev #fh5co-warning #fh5co-step .step {
    padding:0;
    line-height:22px;
    flex:0 0 20%;
    color:#333;
}
#page.eco_ev #fh5co-warning #fh5co-step .step img{
    width:130px;
    max-width:100%;
    margin:0 auto 10px auto;
}
#page.eco_ev #fh5co-warning #fh5co-step .step strong{
    letter-spacing: -0.05em;
}
#page.eco_ev #fh5co-warning #fh5co-step .step .underline-orange{
	background:linear-gradient(0deg, transparent 10%, #ff7946 10%, #ff7946 60%, transparent 60%);
}
#page.eco_ev #fh5co-warning #fh5co-step .step div:last-of-type strong{
	font-weight:600;
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
}
#page.eco_ev #fh5co-warning #fh5co-step .arrow {
    height:15vh;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0;
    flex:0 0 6%;
}
#page.eco_ev #fh5co-warning #fh5co-step .arrow img{
    margin-top:2.5vh;
}
@media screen and (max-width: 768px) {
	#page.eco_ev #fh5co-warning #fh5co-step {
		padding-bottom:1em;
	}
    #page.eco_ev #fh5co-warning #fh5co-step .title{
        font-size:18px;
        display:inline-block;
        margin-bottom:10px;
    }
	#page.eco_ev #fh5co-warning #fh5co-step .title1{
		margin-left:5px;
		font-size:14px;
		letter-spacing: -0.07em;
		margin-bottom:0;
	}
	#page.eco_ev #fh5co-warning #fh5co-step .title2{
		margin-left:5px;
		margin-bottom:10px;
		font-size:24px;
		letter-spacing: -0.07em;
		line-height:1.1em;
	}
	#page.eco_ev #fh5co-warning #fh5co-step .title2 strong:not(.ft-orange){
		font-size:24px;
		letter-spacing: -0.07em;
	}
	#page.eco_ev #fh5co-warning #fh5co-step .title2 strong.ft-orange {
		font-size:24px;
		letter-spacing: -0.07em;
	}
    #page.eco_ev #fh5co-warning #fh5co-step .step {
        padding:0;
        font-size:10px;
        line-height:14px;
        letter-spacing: -0.09em;
    }
	#page.eco_ev #fh5co-warning #fh5co-step .step img{
		margin:0 auto;
		width:90%;
	}
    #page.eco_ev #fh5co-warning #fh5co-step .arrow {
        height:8vh;
    }
    #page.eco_ev #fh5co-warning #fh5co-step .step div:last-of-type{
		line-height: 10px;
		padding:3px 0 15px 0;
	}
}


#page.eco_ev #fh5co-brand .brand-title {
	display:inline-block;
	background:#333;
	height:50px;
	width:70%;
	font-size:1.5em;
	line-height:2.4em;
	color:#FFF;
	font-weight:600;
	border-radius:30px;
}
#page.eco_ev #fh5co-brand .brand-des {
	margin-top:1em;
	font-size:1.2em;
	line-height:1.3em;
}
#page.eco_ev #fh5co-brand .kind-box{
	border:2px solid #a0a0a0;
	width:94%;
}
#page.eco_ev #fh5co-brand .brand-kind:nth-of-type(1) .kind-box{
	margin-right:6%;
	margin-bottom:10px;
}
#page.eco_ev #fh5co-brand .brand-kind:nth-of-type(2) .kind-box{
	margin:0 3%;
}
#page.eco_ev #fh5co-brand .brand-kind:nth-of-type(3) .kind-box{
	margin-left:6%;
}
#page.eco_ev #fh5co-brand .kind-box .kind-no{
	position:relative;
	height:65px;
	overflow:hidden;
	font-size:1.7em;
	line-height:2em;
	font-weight:600;
	color:#FFF;
}
#page.eco_ev #fh5co-brand .kind-box .kind-no:before{
	content:'';
	position:absolute;
	top:0;
	left:50%;
	transform: translate(-50%, -50%);
	width:120px;
	height:120px;
	border-radius:100px;
	background:#a0a0a0;
	z-index:-1;
}
#page.eco_ev #fh5co-brand .kind-box .kind-name{
	margin: 2em 0;
}
#page.eco_ev #fh5co-brand .kind-box .kind-name img{
	margin:0 auto;
}
#page.eco_ev #fh5co-brand .kind-box .kind-title{
	font-weight:600;
	margin-bottom:1.5em;
}
#page.eco_ev #fh5co-brand .kind-box .kind-des {
	margin-bottom:1em;
	line-height:1.5em;
}
#page.eco_ev #fh5co-brand .construct-title {
	font-size:3em;
	font-weight:600;
	color:#777;
	line-height:1.3em;
}
#page.eco_ev #fh5co-brand .construct-des {
	font-size:1.2em;
}
#page.eco_ev #fh5co-brand .construct-box {
	padding:2em 2em 0 0;
}
#page.eco_ev #fh5co-brand .construct-box:last-of-type {
	padding:2em 0 0 2em;
}
#page.eco_ev #fh5co-brand .construct-subject {
	color:#FFF;
	font-size:1.3em;
	background:#424242;
	width:calc(100%);
}
#page.eco_ev #fh5co-brand .construct-name {
	padding:1em 0 0 0.5em;
	font-size:1.3em;
	font-weight:600;
	color:#424242;
	text-align:left;
}
#page.eco_ev #fh5co-brand .construct-qualification table{
	width:100%;
	margin-top:1em;
}
#page.eco_ev #fh5co-brand .construct-qualification table tr td{
	padding:0;
	font-size:1.3em;
}
#page.eco_ev #fh5co-brand .construct-qualification table tr td strong{
	font-weight:600;
}
#page.eco_ev #fh5co-brand .construct-qualification table tr td span{
	padding:4px 30px 3px 30px;
	border-radius:30px;
	background:#dbf4f8;
}
#page.eco_ev #fh5co-brand .install-title {
	display:inline-block;
	font-weight:900;
	padding: 5px 10px 3px 10px;
	background: #e40580;
	color:#FFF;
}
@media screen and (max-width: 768px) {
	#page.eco_ev #fh5co-brand .brand-title {
		height:33px;
		width:70%;
		font-size:1.1em;
		line-height:2em;
	}
	#page.eco_ev #fh5co-brand .brand-des {
		margin:1em;
		font-size:0.8em;
		line-height:1.3em;
	}
	#page.eco_ev #fh5co-brand .kind-box{
		border:2px solid #a0a0a0;
		width:100%;
	}
	#page.eco_ev #fh5co-brand .brand-kind+.brand-kind .kind-box, #page.eco_ev #fh5co-brand .brand-kind .kind-box.border-top-0 {
		border-top:0px solid #a0a0a0;
	}
	#page.eco_ev #fh5co-brand .brand-kind .kind-box{
		margin:0 !important;
	}
	#page.eco_ev #fh5co-brand .kind-box .kind-no{
		height:45px;
		font-size:1em;
		line-height:2em;
	}
	#page.eco_ev #fh5co-brand .kind-box .kind-no:before{
		content:'';
		position:absolute;
		top:0;
		left:50%;
		transform: translate(-50%, -50%);
		width:80px;
		height:80px;
		border-radius:80px;
		z-index:-1;
	}
	#page.eco_ev #fh5co-brand .kind-box .kind-name{
		margin: 0;
	}
	#page.eco_ev #fh5co-brand .kind-box .kind-title{
		margin-bottom:1em;
	}
	#page.eco_ev #fh5co-brand .kind-box .kind-des {
		margin-bottom:0.6em;
		line-height:1.3em;
		font-size:0.8em;
	}
	#page.eco_ev #fh5co-brand .construct-title {
		font-size:1.5em;
	}
	#page.eco_ev #fh5co-brand .construct-des {
		margin-top:3px;
		margin-bottom:5px;
		font-size:0.8em;
		line-height:1.1em;
	}
	#page.eco_ev #fh5co-brand .construct-box {
		padding:10px 5px 0 5px !important;
	}
	#page.eco_ev #fh5co-brand .construct-subject {
		font-size:1em;
	}
	#page.eco_ev #fh5co-brand .construct-name {
		padding:1em 0 0.5em 0.5em;
		font-size:1em;
	}
	#page.eco_ev #fh5co-brand .construct-qualification table{
		margin-top:0.5em;
	}
	#page.eco_ev #fh5co-brand .construct-qualification table tr td{
		font-size:1em;
	}
	#page.eco_ev #fh5co-brand .construct-qualification table tr td span{
		padding:4px 20px 3px 20px;
	}
}

#page.eco_ev #fh5co-review {
	padding-bottom: 3em;
	background-color: #d7f0ff;
	margin-bottom: 5em;
}
#page.eco_ev #fh5co-review .contents-title {
	font-size: 36px;
	font-weight: bold;
	color: #333;
	padding: 2em 0 1em 0;
	line-height:1;
}
@media screen and (max-width:992px) {
	#page.eco_ev #fh5co-review .img-title {
		padding: 0.5em 0;
		margin: 0;
	}
	#page.eco_ev #fh5co-review .img-des {
		min-height: 35px;
	}
}
@media screen and (max-width:769px){
	#page.eco_ev #fh5co-review .contents-title {
		font-size: 1.5em;
		padding: 1.5em 0 0.5em 0;
	}
}
#page.eco_ev #fh5co-review .img-box {
	margin: 0 15px 2em;
	height: 450px;
	border: 1px solid #516ec3;
	background-color: white;
}
#page.eco_ev #fh5co-review .img-box .img-des strong{
	font-weight:800;
}
@media screen and (max-width:992px) {
	#page.eco_ev #fh5co-review .img-box {
		height: auto;
	}
}
@media screen and (max-width:769px) {
	#page.eco_ev #fh5co-review .img-box {
		/*height: auto;*/
		margin: 5px;
	}
	#page.eco_ev #fh5co-review .img-des {
		min-height:auto;
		padding-bottom: 10px;
	}
	#page.eco_ev #fh5co-review .img-box .img-des strong{
		font-size:1.3em;
		font-weight:800;
	}
}
#page.eco_ev #fh5co-review .img {
	overflow:hidden;
}
#page.eco_ev #fh5co-review .img img {
	object-fit: cover;
}
#page.eco_ev #fh5co-review .review {
	padding: 0 20px;
}
@media screen and (max-width:992px) {
	#page.eco_ev #fh5co-review .review {
		padding: 0 20px 10px;
	}
}
@media screen and (max-width:769px) {
	#page.eco_ev #fh5co-review .review {
		padding: 0 3px 10px;
	}
}

#page.eco_ev #fh5co-install {
	background: linear-gradient(180deg, #FFF 40px, #9ed8e3  40px);
	background-size:40%;
}
#page.eco_ev #fh5co-install .title{
	margin:0 5%;
	background:#FFF;
	width:90%;
	height:40px;
	display:inline-block;
	text-align:center;
	border-top:4px solid #000;
	border-right:4px solid #000;
	border-left:4px solid #000;
	position:relative;
}
#page.eco_ev #fh5co-install .title span{
	background:#FFF;
	padding:0 10px;
	font-size:2em;
	font-weight:600;
	position:absolute;
	top:0;
	left:50%;
	transform: translate(-50%, -50%);
}
@media screen and (max-width:1200px) {
	#page.eco_ev #fh5co-install .title{
		margin:0 2%;
		width:96%;
	}
	#page.eco_ev #fh5co-install .title span {
		font-size: 1.8em;
	}
}
#page.eco_ev #fh5co-install div.des {
	margin-top:1em;
	margin-bottom:1em;
	text-align:center;
	font-size:1.1em;
	line-height:1.3em;
	font-weight:600;
}
#page.eco_ev #fh5co-install ul.des {
	display:inline-block;
	margin-top:1em;
	margin-bottom:2em;
	font-size:1em;
	line-height:1.5em;
}
#page.eco_ev #fh5co-install ul.des .underline-green{
	background: #daf5b2;
	font-weight:600;
	padding:2px 3px 0 3px;
}
#page.eco_ev #fh5co-install .duty {
	padding:6px 20px 4px 20px;
	background:#FFF;
	font-weight:600;
	font-size:1em;
	display:inline-block;
	border-radius:30px;
}
#page.eco_ev #fh5co-install .img-box {
	display:flex;
	align-content: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	margin-top:2em;
}
#page.eco_ev #fh5co-install .img-box>div {
	padding:0 3em;
	background-position:  0 0;
    background-size: 3px 80%;
    background-repeat: no-repeat;
	background-image:linear-gradient(0deg, transparent 15%, #FFF 15%, #FFF 85%, transparent 85%);
}
#page.eco_ev #fh5co-install .img-box>div:last-of-type {
	background-position:  0 0, 100% 0;
    background-size: 3px 80%, 3px 80%;
	background-image:linear-gradient(0deg, transparent 15%, #FFF 15%, #FFF 85%, transparent 85%),
        linear-gradient(180deg, transparent 15%, #FFF 14%, #FFF 85%, transparent 85%);
}
#page.eco_ev #fh5co-install .sys-img {
	background:#e6e6e8;
	margin-top:2em;
	margin-bottom:4em;
	padding:1em 0 1.5em 0;
}
#page.eco_ev #fh5co-install .sys-img img{
	width:60%;
}
@media screen and (max-width: 768px) {
	#page.eco_ev #fh5co-install .sys-img {
		background:#e6e6e8;
		margin-top:1em;
		margin-bottom:2em;
		padding:1em 0 1.5em 0;
	}
	#page.eco_ev #fh5co-install .sys-img img{
		width:90%;
	}
	#page.eco_ev #fh5co-install ul.des li+li {
		margin-top:10px;
	}
	#page.eco_ev #fh5co-install .title{
		border-top:3px solid #000;
		border-right:3px solid #000;
		border-left:3px solid #000;
	}
	#page.eco_ev #fh5co-install .title span{
		white-space:nowrap;
		font-size:1.5em;
	}
	#page.eco_ev #fh5co-install ul.des {
		font-size:0.9em;
		line-height:1.3em;
	}
	#page.eco_ev #fh5co-install .img-box {
		margin-top:1em;
		font-size:0.8em;
	}
	#page.eco_ev #fh5co-install .img-box>div {
		padding:0;
		flex:1;
		background:unset;
	}
	#page.eco_ev #fh5co-install .img-box>div:last-of-type {
		background:unset;
	}
	#page.eco_ev #fh5co-install .img-box>div+div,
	#page.eco_ev #fh5co-install .img-box>div:last-of-type {
		background-position: 0 0;
		background-size: 3px 80%;
		background-repeat: no-repeat;
		background-image: linear-gradient(0deg, transparent 15%, #FFF 15%, #FFF 85%, transparent 85%);
	}
	#page.eco_ev #fh5co-install .img-box img{
		width:100px;
		margin:0 auto;
	}
}
#page.eco_ev #fh5co-amount {
	padding:2em 0;
}
#page.eco_ev #fh5co-amount .title{
	font-size:2em;
	font-weight:600;
	margin:2em auto 0.7em auto;
	padding:1.5em 0;
	width:80%;
	max-width:800px;
	display:flex;
	align-content: center;
	justify-content: center;
	border-radius:20px;
	box-shadow: inset 0px 8px 13px -9px rgba(0, 0, 0, 0.75);
	border:1px solid #eaeaea;
	position:relative;
	overflow:hidden;
}
#page.eco_ev #fh5co-amount .title:before{
	content:'';
	background-image: url("/images/front/product/eco_ev/amount_title2.png");
	background-size: 100% auto;
	background-position: top left;
	background-repeat: no-repeat;
	position:absolute;
	top:-5%;
	left:0;
	max-width:200px;
	width:25%;
	max-height:100px;
	height:100%;
}
#page.eco_ev #fh5co-amount .title:after{
	content:'';
	background-image: url("/images/front/product/eco_ev/amount_title1.png");
	background-size: 100% auto;
	background-position: bottom right;
	background-repeat: no-repeat;
	position:absolute;
	bottom:-5%;
	right:50px;
	max-width:120px;
	width:17%;
	max-height:100px;
	height:100%;
}
#page.eco_ev #fh5co-amount .des{
	margin:2em auto;
	font-size:1.3em;
	font-weight:600;
	text-align:center;
}
#page.eco_ev #fh5co-amount .amount-box{

}
#page.eco_ev #fh5co-amount .amount-box .img img{
	margin:0 auto;
}
#page.eco_ev #fh5co-amount .amount-box .img-des{
	padding-top:1em;
	line-height:1.7em;
}
#page.eco_ev #fh5co-amount .amount-box .img-des strong{
	display:block;
	font-size:1.8em;
	font-weight:600;
}
#page.eco_ev #fh5co-amount .amount-box .img-arrow{
	display:flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	height:80px;
}
#page.eco_ev #fh5co-amount .amount-box .img-arrow img{
	margin:0 auto;
	width:50px;
	height:50px;
}
#page.eco_ev #fh5co-amount .amount-box .amount {
	font-size:1.1em;
}
#page.eco_ev #fh5co-amount .amount-box .price {
	font-size:1.2em;
	font-weight:600;
}
#page.eco_ev #fh5co-amount .amount-box .add {
	font-size:0.7em;
}
#page.eco_ev #fh5co-amount .amount-box table {
	font-size:1.1em;
	line-height:1em;
	width:100%;
	margin-top:0.7em;
}
#page.eco_ev #fh5co-amount .amount-box table .price {
	font-weight:600;
}
#page.eco_ev #fh5co-amount .amount-box .pink {
	color:#f1001f;
}
#page.eco_ev #fh5co-amount .amount-box table td {
	padding:0.3em 5px;
	text-align:left;
}
#page.eco_ev #fh5co-amount .amount-box table td:last-of-type {
	text-align:right;
}
#page.eco_ev #fh5co-amount .insurance-img {
	padding:0;
}
#page.eco_ev #fh5co-amount .insurance-img img {
	padding:4em 0;
}
@media screen and (max-width: 992px) {
	#page.eco_ev #fh5co-amount .insurance-img {
		padding:0 5px;
	}
	#page.eco_ev #fh5co-amount .insurance-img img {
		padding:2em 0 0 0 ;
	}
}
@media screen and (max-width: 768px) {
	#page.eco_ev #fh5co-amount .title{
		font-size:1.3em;
		margin:1em auto 0.3em auto;
		padding:0.5em 0 0.2em 0;
		border-radius:10px;
	}
	#page.eco_ev #fh5co-amount .title:before{
		content:'';
		top:-5%;
		left:-10%;
	}
	#page.eco_ev #fh5co-amount .title:after{
		content:'';
		right:0;
	}
	#page.eco_ev #fh5co-amount .des{
		margin:1em auto;
		font-size:0.8em;
		font-weight:500;
		line-height:1.3em;
	}
	#page.eco_ev #fh5co-amount .amount-box .img-box{
		border-top:1px solid #CCC;
		padding-top:5px;
		display:flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
	}
	#page.eco_ev #fh5co-amount .amount-box.promotion .img-box{
		margin-top:5px;
	}
	#page.eco_ev #fh5co-amount .amount-box .img{
		flex:0 0 20%;
	}
	#page.eco_ev #fh5co-amount .amount-box.promotion .img{
		flex:0 0 35%;
	}
	#page.eco_ev #fh5co-amount .amount-box .img img{
		margin: 8px 5px 0 0;
		width:50px;
	}
	#page.eco_ev #fh5co-amount .amount-box.promotion .img img{
		margin: 8px 10px 0 auto;
	}
	#page.eco_ev #fh5co-amount .amount-box .img-des{
		flex:0 0 80%;
		padding-top:3px;
		padding-left:3px;
		line-height:1.5em;
		font-size:0.7em;
		text-align:left;
		letter-spacing: -0.01em;
	}
	#page.eco_ev #fh5co-amount .amount-box.promotion .img-box .img-des{
		flex:0 0 65%;
		padding:0;
		display:flex;
		flex-wrap: wrap;
		align-content: flex-start;
		justify-content: center;
		flex-direction: column;
	}
	#page.eco_ev #fh5co-amount .amount-box .img-des strong{
		font-size:1.4em;
		letter-spacing: -0.04em;
	}
	#page.eco_ev #fh5co-amount .amount-box .img-arrow{
		height:auto;
		padding: 5px 0 2px 0;
	}
	#page.eco_ev #fh5co-amount .amount-box .img-arrow img{
		width:20px;
		height:20px;
	}
	#page.eco_ev #fh5co-amount .amount-box .amount {
		font-size:0.8em;
		letter-spacing: -0.08em;
	}
	#page.eco_ev #fh5co-amount .amount-box .price {
		font-size:1.2em;
		font-weight:600;
	}
	#page.eco_ev #fh5co-amount .amount-box .add {
		font-size:0.7em;
	}
	#page.eco_ev #fh5co-amount .amount-box table {
		font-size:0.9em;
		line-height:1em;
		width:100%;
		margin-top:0.7em;
	}
	#page.eco_ev #fh5co-amount .amount-box table .price{
		font-size:1.3em;
	}
	#page.eco_ev #fh5co-amount .amount-box table td:first-of-type {
		text-align:center;
	}
	#page.eco_ev #fh5co-amount .amount-box table td:last-of-type {
		text-align:left;
	}
	#page.eco_ev #fh5co-amount .amount-box table tr+tr {
		border-top:1px solid #cccccc2b;
	}
	#page.eco_ev #fh5co-amount .amount-box table tr+tr  td{
		padding-top:8px;
	}
}
#page.eco_ev #fh5co-type .type-box {
	padding:1em;
}
#page.eco_ev #fh5co-type .type-box.width>div{
	padding:0;
}
#page.eco_ev #fh5co-type .type-box>div:nth-of-type(2){
	padding-top:1em;
}

@media screen and (max-width: 768px) {
	#page.eco_ev #fh5co-type .type-box {
		padding:0.3em;
	}
	#page.eco_ev #fh5co-type .type-box.width>div{
		padding:0;
	}
	#page.eco_ev #fh5co-type .type-box>div:nth-of-type(2){
		padding-top:0.3em;
	}
	#page.eco_ev #fh5co-type .type-box.width>div:nth-of-type(1){
		padding-right:0.25em;
	}
	#page.eco_ev #fh5co-type .type-box.width>div:nth-of-type(2){
		padding-top:0em;
		padding-left:0.25em;
	}
}
#page.eco_ev #fh5co-management img{
	margin:0 auto;
}
#page.eco_ev #fh5co-management .contents-title{
	margin-bottom:20px;
}
#page.eco_ev .contents-des{
	line-height:1.3;
}
#page.eco_ev #fh5co-management .management-contents{
	display:flex;
}
#page.eco_ev #fh5co-management .management-boxs{
	display:flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
}
#page.eco_ev #fh5co-management .management-box{
	display:flex;
	justify-content: space-between;
    align-items: center;
	width: 100%;
	border:1px solid #CCC;
	border-radius:20px;
	flex : 0 0 31%;
}
#page.eco_ev #fh5co-management .management-box .img{
	flex : 0 0 30%;
	margin-right:2%;
}
#page.eco_ev #fh5co-management .management-box .des{
	flex : 0 0 68%;
}
#page.eco_ev #fh5co-management .management-box .des strong{
	font-weight:600;
}
#page.ev #fh5co-management .management-box .des div:last-of-type{
	line-height:1.2;
}

@media screen and (max-width: 768px) {
	#page.eco_ev #fh5co-management .management-contents{
		flex-direction: column;
	}
	#page.eco_ev #fh5co-management .management-boxs{
		margin-top:5px;
	}
	#page.eco_ev #fh5co-management .management-box{
		margin-top:5px;
		padding:3px 0;
	}
	#page.eco_ev #fh5co-management .management-box .img{
		padding:5px 0;
	}
}

#page.eco_ev #fh5co-as {
	padding:1em 0 4em 0;
}

#page.eco_ev #fh5co-pay {
	padding:2em 0 2em 0;
}
#page.eco_ev #fh5co-pay .prev-title{
	padding:0;
	margin:-60px 0 10px 0;
}
#page.eco_ev #fh5co-pay .subject{
	font-weight:600;
	font-size:1.5em;
	padding: 6px 30px 0 30px;
	display: inline-block;
	background: #f4b721;
	margin-bottom:1em;
}
#page.eco_ev #fh5co-pay .img-add{
	position:absolute;
	top:0;
	right:0;
	transform: translate(0%, -30%);
}
#page.eco_ev #fh5co-pay .pink{
	font-size:1.2em;
	color:#ed008c;
	margin-left:1em;
}
@media screen and (max-width: 768px) {
	#page.eco_ev #fh5co-pay .prev-title{
		padding:0;
		margin:-40px 0 10px 0;
	}
	#page.eco_ev #fh5co-pay .prev-title img{
		width:150px;
	}
	#page.eco_ev #fh5co-pay .img-add{
		right:50px;
		transform: translate(0%, -20%);
	}
	#page.eco_ev #fh5co-pay .img-add img{
		width:140px;
	}
	#page.eco_ev #fh5co-pay .row.pt5p:nth-of-type(2) > .subject{
		margin-bottom:0.3em;
	}
	#page.eco_ev #fh5co-pay .subject{
		font-size:1.1em;
		padding: 2px 20px 0 20px;
		margin-bottom:0;
	}
	#page.eco_ev #fh5co-pay .pink{
		font-size:0.8em;
		margin-left:5px;
		display:block;
	}
	#page.eco_ev #fh5co-pay .img{
		margin:5px;
	}
}
#page.eco_ev #fh5co-construction {
	padding:2em 0 6em 0;
}
#page.eco_ev #fh5co-construction .title{
	font-size:1.5em;
	font-weight: 600;
	padding: 6px 30px 0 30px;
	background:#333;
	color: #ffc537;
}
#page.eco_ev #fh5co-construction .img img{
	width:100%;
}
#page.eco_ev #fh5co-construction .des-box table{
	margin-top:1em;
}
#page.eco_ev #fh5co-construction .des-box table tr+tr{
	border-top:1px solid #d7d7d7;
}
#page.eco_ev #fh5co-construction .des-box table td{
	padding: 0.5em 0 0.2em 0;
}
#page.eco_ev #fh5co-construction .des-box .des-title{
	color:#ed008c;
	width:17%;
	min-width:40px;
	vertical-align: top;
}
#page.eco_ev #fh5co-construction .des-box .des div{
	padding-left:10px;
	position:relative;
}
#page.eco_ev #fh5co-construction .des-box .des div:before{
	content:'·';
	position:absolute;
	top:0;
	left:0;
}
@media screen and (max-width: 768px) {
	#page.eco_ev #fh5co-construction .title{
		font-size:1em;
		padding: 3px 0 0 0;
	}
	#page.eco_ev #fh5co-construction .des-box table{
		margin-top:0em;
		margin-bottom:1em;
	}
	#page.eco_ev #fh5co-construction .des-box table td{
		font-size:0.8em;
	}
	#page.eco_ev #fh5co-construction .des-box .des-title{
		text-align:center;
	}
}

#page.eco_ev #fh5co-step {
    background: #fdcb52;
}
#page.eco_ev .fh5co-tel-bar {
	margin-top:0;
	padding-top:2em;
    background: #fff7b9;
	box-shadow: 0px 8px 13px -9px rgba(0, 0, 0, 0.45);
}
#page.eco_ev .fh5co-tel-bar:not(.bottom) :is(.title1,.title2,.title3,a){
    color: #9d2323;
}
#page.eco_ev .fh5co-tel-bar:not(.bottom) :is(.title1,.title2,.title3,a) strong{
	font-weight:600 !important;
}
#page.eco_ev .fh5co-tel-bar.bottom {
    background: #fdcb52;
}
@media screen and (max-width: 768px) {
	#page.eco_ev .fh5co-tel-bar {
		margin-top:0;
		padding-top:0;
	}
}

#page.cctv>div:not(#fh5co-offcanvas) *{
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
	font-weight: 400;
	word-break:keep-all;
}
#page.cctv #fh5co-header .display-tc h1{
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
	font-weight:600;
	margin:100px 0 10px 0;
	display: flex;
    align-items: flex-end;
    justify-content: center;
    line-height: 0.8em;
	font-size:4em;
}
#page.cctv #fh5co-header .display-tc h1 span {
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
	text-shadow: -1px 0 #FFF, 0 1px #FFF, 1px 0 #FFF, 0 -1px #FFF;
    color: #0173d3;
	margin-right:10px;
	font-size:0.8em;
	line-height: 1em;
}
#page.cctv #fh5co-header .display-tc h1 span.pink {
    color: #e9178b;
	font-size:1em;
}
#page.cctv #fh5co-header .display-tc p{
	font-family: "GmarketSans","NanumSquare", Arial, sans-serif;
	font-weight:500;
	font-size:1.5em;
	margin-top:1em;
}
@media screen and (max-width: 768px) {
	.fh5co-cover .display-t {
		padding-left:10px;
		padding-right:10px;
	}
	#page.cctv #fh5co-header .display-tc h1{
		line-height: 0.8em;
		font-size:2.2em;
		letter-spacing: -0.03em;
	}
	#page.cctv #fh5co-header .display-tc p{
		font-size:1em;
		letter-spacing: -0.02em;
	}
}
#page.cctv #fh5co-des{
	margin:2em 0;
	background-image: url('/images/front/product/cctv/cctv_top_bg.jpg');
	background-size: auto 100%;
	background-position: bottom center;
	background-repeat: no-repeat;
}

#page.cctv #fh5co-amount .title2 .vat{
	float:right;margin-top:25px;
}

#page.cctv #fh5co-type{
	padding:2em 0 0 0;
}
#page.cctv #fh5co-type .title{
	position:relative;
}
#page.cctv #fh5co-type .title:before{
	content:'';
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	height:2px;
	background:#555;
	z-index:-1;
}
#page.cctv #fh5co-type .title span{
	font-size:1.4em;
	font-weight:600;
	background:#FFF;
	padding:0 20px;
}
#page.cctv #fh5co-type .equipment-box{
	display:flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	margin-top:3em;
	font-size:0.7em;
	padding-bottom:2em;
	border-bottom:1px solid #dfdfdf;
}
#page.cctv #fh5co-type .img{
	flex:0 0 90px;
	margin:0 10px;
}
@media screen and (max-width: 768px) {
	#page.cctv #fh5co-amount .title2 .vat{
		display:block;
		text-align:right;
		float:unset;margin-top:unset;
	}
	#page.cctv #fh5co-type .img{
		flex:1;
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		margin:unset;
	}
	#page.cctv #fh5co-type .equipment-box{
		justify-content: space-around;
	}
}
#page.cctv #fh5co-type :is(.type-img,.person-img){
	margin:0;
}
#page.cctv #fh5co-type .person-img img{
	margin:0 auto;
	/*max-width: 330px;*/
	max-width: 336px;
	width:28vw;
}
#page.cctv>div:not(#fh5co-offcanvas) .img-des {margin-top: 10px;}
@media screen and (max-width: 1200px) {
	#page.cctv #fh5co-type .person-img img{
		max-width: 300px;
		width:25vw;
	}
}
@media screen and (max-width: 992px) {
	#page.cctv #fh5co-type .person-img img{
		max-width: 300px;
		width:28vw;
	}
}
@media screen and (max-width: 768px) {
	#page.cctv #fh5co-type{
		padding-bottom:0;
	}
	#page.cctv #fh5co-type .person-img img{
		display:none;
		margin:-6em 0.5em 0 auto;
		width: 50px;
	}
}

#page.cctv #fh5co-tel{
	background:#fac44a;
}
#page.cctv #fh5co-tel .person-img{
	display:none;
}
#page.cctv #fh5co-tel .img{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}
#page.cctv #fh5co-tel .img a:first-of-type{
	flex:2;
	padding-right:10px;
}
#page.cctv #fh5co-tel .img a:last-of-type{
	flex:1;
	padding-left:10px;
}
#page.cctv #fh5co-tel .img img{
	margin:2em auto;
}
@media screen and (max-width: 768px) {
	#page.cctv #fh5co-tel{
		margin-top:3em;
		padding:1em 0 0 0.5em;
	}
	#page.cctv #fh5co-tel .box{
		position:relative;
	}
	#page.cctv #fh5co-tel .person-img{
		display:block;
		position:absolute;
		bottom:0;
		right:0;
		width:20vw;
	}
	#page.cctv #fh5co-tel .img{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width:80vw;
	}
	#page.cctv #fh5co-tel .img a:first-of-type{
		flex:2;
		padding-right:0;
	}
	#page.cctv #fh5co-tel .img a:last-of-type{
		flex:1;
		padding-left:0;
		width:50%;
	}
	#page.cctv #fh5co-tel .img img{
		margin:0 auto;
	}
}
#page.cctv #fh5co-home{
	padding:4em 0 10em 0;
	background:#e6f7ff;
	position:relative;
}
#page.cctv :is(#fh5co-total,#fh5co-home,#fh5co-apt,#fh5co-commerce,#fh5co-store) .title{
	border-bottom:2px solid #a5c1d2;
	display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;

	width:500px;
	max-width:100%;
}
#page.cctv :is(#fh5co-commerce) .title{
	margin-bottom:3%;
}
#page.cctv :is(#fh5co-total,#fh5co-home,#fh5co-apt,#fh5co-commerce,#fh5co-store) .title .icon-img{
	display:inline-block;
}
#page.cctv :is(#fh5co-home,#fh5co-apt) .title .icon-img img{
	margin:0 auto;
	width: 60px;
}
#page.cctv :is(#fh5co-total,#fh5co-commerce,#fh5co-store) .title .icon-img img{
	margin:0 auto 6px auto;
	width: 50px;
}
#page.cctv :is(#fh5co-total,#fh5co-home,#fh5co-apt,#fh5co-commerce,#fh5co-store) .title div{
	font-size:2.2em;
	line-height:1.3em;
	font-weight:600;
	color:#003867;
	padding:0 10px;
}
@media screen and (max-width: 768px) {
	#page.cctv :is(#fh5co-home,#fh5co-apt,#fh5co-commerce,#fh5co-store) .title .icon-img img{
		width: 40px;
	}
	#page.cctv :is(#fh5co-total,#fh5co-home,#fh5co-apt,#fh5co-commerce,#fh5co-store) .title div{
		font-size:1.6em;
		line-height:1.3em;
		padding:0 6px;
	}
}
#page.cctv #fh5co-home .home img{
	margin:2em auto 0 auto;
	width:400px;
}
#page.cctv #fh5co-home .home-no img{
	width:350px;
	margin:2em auto 0 auto;
}
@media screen and (max-width: 768px) {
	#page.cctv #fh5co-home{
		padding:2em 0 5em 0;
	}
	#page.cctv #fh5co-home .home img{
		margin:2em auto 1em auto;
		width:80%;
	}
	#page.cctv #fh5co-home .home-no img{
		width:100%;
		margin:0;
	}
}
#page.cctv :is(#fh5co-apt,#fh5co-tel.tel2){
	margin:7em auto 0 auto;
}
#page.cctv #fh5co-apt .img1{
	margin:2em auto 0 auto;
}
#page.cctv #fh5co-apt .img2 img{
	margin:6em auto 0 auto;
	width:530px;
}
#page.cctv #fh5co-apt .img3{
	margin-top:-10em;
}
@media screen and (max-width: 768px) {
	#page.cctv :is(#fh5co-apt, #fh5co-tel.tel2){
		margin:5em auto 0 auto;
	}
	#page.cctv #fh5co-apt .img2 img{
		margin:3em auto 0 auto;
		width:530px;
	}
	#page.cctv #fh5co-apt .img3{
		margin-top:-3em;
	}
}
#page.cctv #fh5co-commerce {
	padding:2em 0;
}
#page.cctv #fh5co-commerce .box+.box{
	border-left:1px solid #e5e5e5;
}
#page.cctv #fh5co-commerce .box:not(.no-bottom){
	border-bottom:1px solid #e5e5e5;
}
#page.cctv #fh5co-commerce .img img{
	margin:2em auto;
	width:450px;
}

#page.cctv #fh5co-store{
	padding:4em 0 8em 0;
	background:#e6f7ff;
	position:relative;
}
#page.cctv #fh5co-store .img{
	padding:2em 1em;
}
@media screen and (max-width: 768px) {
	#page.cctv #fh5co-store{
		padding:2em 0 5em 0;
	}
}

#page.cctv #fh5co-step {
	background:#fac44a;
}
#page.cctv .fh5co-tel-bar {
    margin-top:0;
	padding:1em 0 0 0;
	background:#fac44a;
}


#page.cctv #fh5co-cctv {
	background-image: url('/images/front/product/cctv/cctv_bg.jpg');
	position:relative;
}
#page.cctv #fh5co-cctv:before {
	content:'';
	width:100%;
	height:100%;
	background-image: url('/images/front/product/cctv/cctv_bg2.png');
	background-size: auto 70%;
	background-position: bottom center;
	background-repeat: no-repeat;
	position:absolute;
	bottom:0;
	left:0;
}
#page.cctv #fh5co-cctv .cctv-title{
	display:inline-block;
	width:200px;
	transform: translate(-50%, -30%);
	position:absolute;
	top:0;
	left:50%;
	z-index:9;
}
#page.cctv #fh5co-cctv .cctv-box{
	margin:2em 0;
	background:#ffffff7a;
	display:flex;
	flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: flex-end;
}
#page.cctv #fh5co-cctv .cctv-box.smart{
	margin:2em 0 0 0;
}
#page.cctv #fh5co-cctv .cctv-box .cctv-img{
	position:relative;
}
#page.cctv #fh5co-cctv .cctv-box .cctv-img .img1{
	z-index:1;
	width:270px;
	position:absolute;
	top:30px;
	right:10%;
	border:2px solid #FFF;
}
#page.cctv #fh5co-cctv .cctv-box .cctv-img .img2{
	z-index:2;
	width:270px;
	position:absolute;
	top:180px;
	right:10%;
	transform:translate(-60%, 0);
	border:2px solid #FFF;
}
#page.cctv #fh5co-cctv .cctv-box .cctv-img .img3{
	z-index:3;
	width:270px;
	position:absolute;
	top:330px;
	right:10%;
	border:2px solid #FFF;
}
#page.cctv #fh5co-cctv .cctv-box .cctv-img .img4{
	z-index:1;
	width:270px;
	position:absolute;
	top:480px;
	right:10%;
	transform:translate(-60%, 0);
	border:2px solid #FFF;
}
#page.cctv #fh5co-cctv .cctv-box.smart .cctv-img .img1{
	z-index:2;
	transform:translate(-60%, 0);
}
#page.cctv #fh5co-cctv .cctv-box.smart .cctv-img .img2{
	z-index:1;
	transform:translate(0, 0);
}
#page.cctv #fh5co-cctv .cctv-box.smart .cctv-img .img3{
	z-index:2;
	transform:translate(-60%, 0);
}
#page.cctv #fh5co-cctv .cctv-box.smart .cctv-img .img4{
	z-index:3;
	transform:translate(0, 0);
}
@media screen and (max-width: 1200px) {
	#page.cctv #fh5co-cctv .cctv-box .cctv-img :is(.img1,.img2,.img3,.img4){
		width:230px;
		right:5%;
	}
}
@media screen and (max-width: 992px) {
	#page.cctv #fh5co-cctv .cctv-box .cctv-img :is(.img2,.img4){
		transform:translate(0, 0);
	}
	#page.cctv #fh5co-cctv .cctv-box.smart .cctv-img :is(.img1,.img3){
		transform:translate(0, 0);
	}
	#page.cctv #fh5co-cctv :is(.cctv-box,.cctv-box.smart) .cctv-img .img1{
		transform:translateY(10px);
	}
	#page.cctv #fh5co-cctv :is(.cctv-box,.cctv-box.smart) .cctv-img .img2{
		transform:translateY(20px);
	}
	#page.cctv #fh5co-cctv :is(.cctv-box,.cctv-box.smart) .cctv-img .img3{
		transform:translateY(30px);
	}
	#page.cctv #fh5co-cctv :is(.cctv-box,.cctv-box.smart) .cctv-img .img4{
		transform:translateY(40px);
	}

}
@media screen and (max-width: 768px) {
	#page.cctv #fh5co-cctv .cctv-title{
		width:26vw;
	}
	#page.cctv #fh5co-cctv .cctv-box{
		flex-direction: column;
		padding-top:3em;
	}

	#page.cctv #fh5co-cctv .cctv-box .cctv-img{
		position:relative;
		display:flex;
		flex-direction: row;
	}
	#page.cctv #fh5co-cctv .cctv-box .cctv-img :is(.img1,.img2,.img3,.img4){
		z-index:1;
		width:25%;
		position:relative;
		transform: translate(0,0) !important;
		top:unset;
		bottom:unset;
		left:unset;
		right:unset;
		margin:0;

	}
}

#page.cctv #fh5co-cctv .cctv-box dl{
	margin:3em 0 3em 3em;
	padding:1em 0 2em 0 ;
}
#page.cctv #fh5co-cctv .cctv-box.smart dl{
	margin:0 0 1em 3em;
	padding:0 0 2em 0 ;
}
#page.cctv #fh5co-cctv .cctv-box dt{
	font-size:1.3em;
	font-weight:600;
	margin-top:2em;
}
#page.cctv #fh5co-cctv .cctv-box dd{
	margin-top:1em;
}
#page.cctv #fh5co-cctv .cctv-box.smart .smart-cctv-title{
	margin:3em 0 0 3em;
	display:inline-block;
	width:270px;
}
#page.cctv #fh5co-cctv .cctv-box.smart .smart-cctv-title-m{
	display:none;
}
#page.cctv #fh5co-cctv .cctv-icon .slider-list-m{
	display:none;
}
#page.cctv #fh5co-cctv .cctv-icon .slider-list{
	display:flex;
	align-items: center;
    justify-content: space-around;
}
#page.cctv #fh5co-cctv .cctv-icon .img{
	position:relative;
	transform: translate(0, 50%);
	min-width: 60px;
}
#page.cctv #fh5co-cctv .cctv-icon .img .img-des{
	position:absolute;
	bottom:0;
	left:50%;
	transform: translate(-50%, 100%);
	font-size:0.7em;
	width: 100%;
    text-align: center;
	min-width:50px;
}
@media screen and (max-width: 768px) {
	#page.cctv #fh5co-cctv :is(.cctv-box,.cctv-box.smart) dl{
		margin:0em 0 2em 0.5em;
		padding:0 0 0 0 ;
	}
	#page.cctv #fh5co-cctv .cctv-box dt{
		font-size:1em;
		margin-top:1em;
	}
	#page.cctv #fh5co-cctv .cctv-box dd{
		margin-top:0.5em;
		font-size:0.8em;
	}
	#page.cctv #fh5co-cctv .cctv-box.smart .smart-cctv-title{
		display:none;
	}
	#page.cctv #fh5co-cctv .cctv-box.smart .smart-cctv-title-m{
		display:block;
		width:30vw;
		margin:-1em 0.5em 0.5em 0.5em;
	}
	#page.cctv #fh5co-cctv .cctv-icon {
		display:flex;
	}
	#page.cctv #fh5co-cctv .cctv-icon .slider-list-m{
		display:flex;
		align-items: center;
		justify-content: space-around;
	}
	#page.cctv #fh5co-cctv .cctv-icon :is(.slider-list,.slider-list-m){
		animation: loop 80s linear infinite;
		-webkit-animation: loop 80s linear infinite;
	}
}

#page.cctv #fh5co-door{
	margin-top:0;
	background-image: url("/images/front/product/cctv/door_bg.jpg");
	background-size: auto;
	background-repeat: repeat;
	background-position: center center;
}
#page.cctv #fh5co-door .title{
	margin: 0 auto;
	display: inline-block;
	width: 70%;
	max-width: 600px;
	/*transform: translate(0, -100%);*/
}
#page.cctv #fh5co-door .sub-title{
	margin-top:3em;
	border-top:2px solid #e1e1e1;
}
#page.cctv #fh5co-door .sub-title img{
	max-width: 190px;
	transform: translate(10px, -25%);
}
#page.cctv #fh5co-door .box1 img{
	width:530px;
	margin: 0 auto;
}
#page.cctv #fh5co-door .box2 .img1 img{
	width:290px;
	margin: 0 0 0 auto;
}
#page.cctv #fh5co-door .box2 .img2 img{
	width:900px;
	margin: -10em auto 0 0;
}
#page.cctv #fh5co-door .box2 .img3 img{
	width:800px;
	margin: 5em auto;
}
#page.cctv #fh5co-door .box2 .img3-m{
	display:none;
}
#page.cctv #fh5co-door .secudoor-img img{
	width:1100px;
	margin: 0 auto;
	border:1px solid #333;
}
#page.cctv #fh5co-door .secudoor-box .icon{
	font-size: 6em;
    line-height: 0.4em;
}
#page.cctv #fh5co-door .secudoor-box .str{
	font-size: 2em;
}
#page.cctv #fh5co-door .img4 img{
	width:350px;
	margin: 5em auto;
}
#page.cctv #fh5co-door .img5{
	position:absolute;
	top:0;
	left:50%;
	transform: translate(-50%, -100%);
	width:680px;
	max-width:100%;
}
#page.cctv #fh5co-door .img6 img{
	width:680px;
	margin:2em auto;
}
#page.cctv #fh5co-door .img7 img{
	width:460px;
	margin:0 auto;
}
#page.cctv #fh5co-door .img8 img{
	width:520px;
	margin:0 auto;
}
#page.cctv #fh5co-door .img9{
	margin:2em 0.5em;
}
@media screen and (max-width: 768px) {
	#page.cctv #fh5co-door{
	}
	#page.cctv #fh5co-door .title{
		width: 90%;
	}
	#page.cctv #fh5co-door .sub-title{
		margin-top:2em;
	}
	#page.cctv #fh5co-door .sub-title img{
		max-width: 120px;
	}
	#page.cctv #fh5co-door .box1 img{
		width:530px;
		margin: 0 auto 1em auto;
	}
	#page.cctv #fh5co-door .box2 .img1 img{
		width:90%;
	}
	#page.cctv #fh5co-door .box2 .img2 img{
		width:900px;
		margin: -1em auto 0 0;
	}
	#page.cctv #fh5co-door .box2 .img3{
		display:none;
	}
	#page.cctv #fh5co-door .box2 .img3-m{
		display:block;
		margin:1em auto 2em auto;
	}
	#page.cctv #fh5co-door .secudoor-box .icon{
		font-size: 4em;
	}
	#page.cctv #fh5co-door .secudoor-box .str{
		font-size: 1.5em;
	}
	#page.cctv #fh5co-door .img4 img{
		margin: 1em 0.5em;
		width:calc(100% - 1em);
	}
	#page.cctv #fh5co-door .img5{
		transform: translate(-50%, -120%);
	}
	#page.cctv #fh5co-door .img6 img{
		margin:0 auto;
	}

}

#page.cctv #fh5co-safety{
	padding:6em 0 8em 0;
	position:relative;
}
#page.cctv #fh5co-safety:after{
	content:'';
	display:inline-block;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -35%);
	width:23vw;
	height:23vw;
	background-image: url("/images/front/product/cctv/money.png");
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
	z-index:20;
}
#page.cctv #fh5co-safety .title{
	background-image: url("/images/front/product/cctv/safety_line.jpg");
	background-size: auto 50%;
	background-repeat: repeat-x;
	background-position: center center;
}
#page.cctv #fh5co-safety .title>span{
	font-size:2.6em;
	font-weight:600;
	background:#FFF;
	padding:5px 1em;
}
#page.cctv #fh5co-safety .title>span>span{
	position:relative;
	font-weight:600;
}
#page.cctv #fh5co-safety .title>span>span:after{
	content:'';
	position:absolute;
	top:0;
	left:50%;
	width:8px;
	height:8px;
	border-radius:10px;
	background:#f7ac0b;
	transform: translate(-50%, -15px);
}
#page.cctv #fh5co-safety :is(.img1,.img3) img{
	margin:3em auto 0 0;
	width:500px;
	z-index:-1;
}
#page.cctv #fh5co-safety :is(.img2,.img4) img{
	margin:3em 0 0 auto;
	width:500px;
	z-index:-1;
}
@media screen and (max-width: 768px) {
	#page.cctv #fh5co-safety{
		padding:3em 0 5em 0;
		position:relative;
	}
	#page.cctv #fh5co-safety:after{
		display:none;
	}
	#page.cctv #fh5co-safety .title>span{
		font-size:2em;
		font-weight:600;
		background:#FFF;
		padding:5px 1em 0 1em;
	}
	#page.cctv #fh5co-safety :is(.img1,.img2,.img3,.img4) img{
		margin:1em 2em;
		width:calc(100% - 4em);
	}
}

#page.cctv #fh5co-security {
	background:#01122e;
}
#page.cctv #fh5co-security .title{
	font-size:2em;
	font-weight:600;
	color:#FFF;
	padding: 0.4em 0 0.2em 0;
}
#page.cctv #fh5co-security .title:after{
	content:'';
	display:block;
	background:#FFF;
	height:0.5em;
	width:100%;
}
#page.cctv #fh5co-security .box{
	padding-top:2em;
}
#page.cctv #fh5co-security .last-box{
	border-top:1px solid #00b7d3;
}
#page.cctv #fh5co-security .box+.box{
	border-left:1px solid #00b7d3;
	padding-left:1em;
}
#page.cctv #fh5co-security .box .img img{
	width:500px;
	margin:0 auto 2em auto;
}
#page.cctv #fh5co-security .kind-box {
	background:#013358;
	display:flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	padding:30px 50px;
}
#page.cctv #fh5co-security .kind-box .img{
	flex:1;
	background:#FFF;
	padding:30px 20px 40px 20px;
}
#page.cctv #fh5co-security .kind-box .img+.img{
	margin-left:20px;
}
@media screen and (max-width: 992px) {
	#page.cctv #fh5co-security .kind-box {
		padding:20px;
	}
	#page.cctv #fh5co-security .kind-box .img{
		padding:20px 10px 20px 10px;
	}
	#page.cctv #fh5co-security .kind-box .img+.img{
		margin-left:10px;
	}
}
@media screen and (max-width: 768px) {
	#page.cctv #fh5co-security .title{
		font-size:1.4em;
		padding: 0.2em 0 0 0;
		letter-spacing: -0.08em;
	}
	#page.cctv #fh5co-security .box{
		padding-top:2em;
		border-bottom:1px solid #00b7d3;
	}
	#page.cctv #fh5co-security .last-box{
		border-top:0px solid #00b7d3;
	}
	#page.cctv #fh5co-security .box+.box{
		border-left:0px solid #00b7d3;
	}
	#page.cctv #fh5co-security .kind-box {
		flex-direction: column;
		padding:20px 40px;
	}
	#page.cctv #fh5co-security .kind-box .img{
		flex:0 0 80%;
		padding:10px 50px 10px 50px;
		border:3px solid #013358;
	}
	#page.cctv #fh5co-security .kind-box .img+.img{
		margin-left:0;
	}

}
#page.cctv #fh5co-gw {
	padding:4em 0;
}
#page.cctv #fh5co-gw .title{
	font-size:2em;
	font-weight:600;
	color:#484848;
}
#page.cctv #fh5co-gw .des{
	line-height:1.3em;
}
#page.cctv #fh5co-gw .img img{
	width:900px;
	margin:0 auto;
}
@media screen and (max-width: 768px) {
	#page.cctv #fh5co-gw .title{
		font-size:1.6em;
	}
	#page.cctv #fh5co-gw .des{
		line-height:1.3em;
		font-size:0.8em;
	}
}
#page.cctv #fh5co-example {
	padding:4em 0;
}
#page.cctv #fh5co-example .title{
	font-size:2em;
	font-weight:600;
	color:#333;
}
#page.cctv #fh5co-example .img-des{
	margin:0.5em auto 1em auto;
}

@media screen and (max-width: 768px) {
	#page.cctv #fh5co-example {
		padding:4em 0;
	}
	#page.cctv #fh5co-example .row .col-xs-3{
		padding:0;
	}
	#page.cctv #fh5co-example .row .col-xs-3 .img-des{
		font-size:0.7em;
		overflow:hidden;
	}
}
#page.cctv .title2 {
	font-size:32px;
	font-weight:900 !important;
}
#page.cctv .title2 span{
	font-size:16px;
}
@media screen and (max-width: 768px) {
	#page.cctv .title2 {
		font-size:20px;
		padding-left:10px;
	}
	#page.cctv .title2 span{
		font-size:10px;
	}
}

#page.cctv #fh5co-camera{
	background:#eee;
}
#page.cctv #fh5co-camera .table :is(th, td){
	font-family: "NanumSquare", Arial, sans-serif;
}
#page.cctv #fh5co-camera .table :is(td){
	padding: 6px 0 4px 0;
	vertical-align: middle;
}
#page.cctv #fh5co-camera img{
	margin:0 auto;
}
#page.cctv #fh5co-example2 img{
	margin:0 auto;
}
@media screen and (max-width: 768px) {
	#page.cctv #fh5co-camera img{
		height:120px;
	}
	#page.cctv #fh5co-camera .table-box{
		overflow:auto;
	}
	#page.cctv #fh5co-camera .table-box2:after{
		content:'↔';
		z-index:99;
		background:#FFF;
		color:#d31677;
		font-weight:900;
		width: 20px;
		height: 20px;
		border-radius: 30px;
		line-height: 1.5em;
		position: absolute;
		right: 0;
		top: 0;
		transform: translate(0, -50%);
		opacity: 0.9;
	}
	#page.cctv #fh5co-camera .table{
		min-width:600px;
	}

}


#page .contents .img-box {
	margin-bottom:2em;
}
#page .contents .img-box .img-title{
	font-size:22px;
	font-weight:900;
	margin:0.5em auto 5px auto;
	line-height: 1.1em;
}
#page .contents .img-box .img-des{
	font-size:16px;
	font-weight:600;
	line-height: 1.3em;
	min-height:42px;
}
#page .contents .img-box .img-des span{
	font-size:14px;
	line-height: 1em;
}
@media screen and (max-width: 992px) {
	#page .contents .img-box .img-title{
		font-size:16px;
		margin:0.2em auto 0 auto;
	}
	#page .contents .img-box .img-des{
		font-size:12px;
	}
	#page .contents .img-box .img-des span{
		font-size:12px;
		line-height: 1em;
	}
}
@media screen and (max-width: 768px) {
	#page .contents .img-box {
		margin-bottom:1em;
	}
	#page .contents .img-box .img-title{
		font-size:12px;
	}
	#page .contents .img-box .img-des{
		font-size:10px;
	}
	#page .contents .img-box .img-des span{
		font-size:10px;
	}
	#page #fh5co-recommend.contents .img-box .img img{
		width:70%;
	}
	#page #fh5co-recommend.contents .img-box .img-title{
		letter-spacing: -0.13em;
	}
	#page #fh5co-recommend.contents .img-box .img-des{
		font-size:10px;
		letter-spacing: -0.13em;
	}
}
#page .contents .horizon .img-box {
	display:flex;
	align-items: center;
    justify-content: center;
}
#page .contents .horizon .img-box .img{
	padding:0 20px;
	flex:0 0 30%;
}
#page .contents .horizon .img-box .img+div{
	text-align:left;
	flex:0 0 70%;
}
#page .contents .horizon .img-box .img+div ul{
	padding-left:15px;
}
#page .contents .horizon .img-box .img+div ul li{
	font-weight: 600;
    line-height: 1.3em;
}
@media screen and (max-width: 768px) {
	#page.security #fh5co-function .function-box.horizon .img-box {
		padding: 10px 0 10px 0;
	}
	#page .contents .horizon .img-box .img{
		padding:0 5px;
	}

	#page .contents .horizon .img-box .img+div ul li{
		font-size:10px;
	}
}


#page .contents .table {
	width:100%;
	table-layout:fixed;
}
#page .contents .table th{
	text-align:center;
	font-size:18px;
	font-weight:600 !important;
	color:#FFF;
	background:#d31677;
	padding:6px 0 1px 0;
}
#page .contents .table td{
	font-size:16px;
	font-weight:500 !important;
	padding:6px 0 1px 0;
	border:1px solid #e6e6e6;
	background:#FFF;
}
#page .contents .table .bd-bt{
	border-bottom:1px solid #898989;
}
#page .contents .table .bg-bk{
	background:#464646;
	color:#FFF;
}
@media screen and (max-width: 768px) {
	#page .contents .table th{
		font-size:14px;
		padding:6px 0 1px 0;
	}
	#page .contents .table td{
		font-size:10px;
		padding:6px 0 1px 0;
	}
}