@font-face {
  font-family: 'icomoon';
  src: url("/fonts/icomoon/icomoon.eot?srf3rx");
  src: url("/fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"),
		   url("/fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"),
		   url("/fonts/icomoon/icomoon.woff?srf3rx") format("woff"),
		   url("/fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'NanumSquare';
  font-weight: 300;
  src: url('/fonts/nanumsquare/NanumSquareL.otf') format('opentype');
  src: local('☺'),
       url('/fonts/nanumsquare/NanumSquareL.eot?#iefix') format('embedded-opentype'),
       url('/fonts/nanumsquare/NanumSquareL.woff2') format('woff2'),
       url('/fonts/nanumsquare/NanumSquareL.woff') format('woff'),
       url('/fonts/nanumsquare/NanumSquareL.ttf') format('truetype');
}
@font-face {
  font-family: 'NanumSquare';
  font-weight: 400;
  src: url('/fonts/nanumsquare/NanumSquareR.otf') format('opentype');
  src: local('☺'),
       url('/fonts/nanumsquare/NanumSquareR.eot?#iefix') format('embedded-opentype'),
       url('/fonts/nanumsquare/NanumSquareR.woff2') format('woff2'),
       url('/fonts/nanumsquare/NanumSquareR.woff') format('woff'),
       url('/fonts/nanumsquare/NanumSquareR.ttf') format('truetype');
}
@font-face {
  font-family: 'NanumSquare';
  font-weight: 700;
  src: url('/fonts/nanumsquare/NanumSquareB.otf') format('opentype');
  src: local('☺'),
       url('/fonts/nanumsquare/NanumSquareB.eot?#iefix') format('embedded-opentype'),
       url('/fonts/nanumsquare/NanumSquareB.woff2') format('woff2'),
       url('/fonts/nanumsquare/NanumSquareB.wof'f) format('woff'),
       url('/fonts/nanumsquare/NanumSquareB.ttf') format('truetype');
}
@font-face {
  font-family: 'NanumSquare';
  font-weight: 800;
  src: url('/fonts/nanumsquare/NanumSquareEB.oft') format('opentype');
  src: local('☺'),
       url('/fonts/nanumsquare/NanumSquareEB.eot?#iefix') format('embedded-opentype'),
       url('/fonts/nanumsquare/NanumSquareEB.woff2') format('woff2'),
       url('/fonts/nanumsquare/NanumSquareEB.woff') format('woff'),
       url('/fonts/nanumsquare/NanumSquareEB.ttf') format('truetype');
}

@font-face {
    font-family: 'GmarketSans';
    font-weight: 300;
    font-style: normal;
    src: url('/fonts/gmarket/GmarketSansLight.otf');
    src: url('/fonts/gmarket/GmarketSansLight.otf'),
         url('/fonts/gmarket/GmarketSansLight.eot?#iefix') format('embedded-opentype'),
         url('/fonts/gmarket/GmarketSansLight.woff2') format('woff2'),
         url('/fonts/gmarket/GmarketSansLight.woff') format('woff'),
         url('/fonts/gmarket/GmarketSansLight.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'GmarketSans';
    font-weight: 500;
    font-style: normal;
    src: url('/fonts/gmarket/GmarketSansMedium.otf');
    src: url('/fonts/gmarket/GmarketSansMedium.otf'),
         url('/fonts/gmarket/GmarketSansMedium.eot?#iefix') format('embedded-opentype'),
         url('/fonts/gmarket/GmarketSansMedium.woff2') format('woff2'),
         url('/fonts/gmarket/GmarketSansMedium.woff') format('woff'),
         url('/fonts/gmarket/GmarketSansMedium.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'GmarketSans';
    font-weight: 700;
    font-style: normal;
    src: url('/fonts/gmarket/GmarketSansBold.otf');
    src: url('/fonts/gmarket/GmarketSansBold.otf'),
         url('/fonts/gmarket/GmarketSansBold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/gmarket/GmarketSansBold.woff2') format('woff2'),
         url('/fonts/gmarket/GmarketSansBold.woff') format('woff'),
         url('/fonts/gmarket/GmarketSansBold.ttf') format("truetype");
    font-display: swap;
}
/*# sourceMappingURL=style.202501.css.map */
/* =======================================================
*
* 	Template Style
*
* ======================================================= */
body {
  font-weight: 600;
  font-size: 16px;
  color: #333;
  background: #fff;
  box-sizing: border-box !important;
  margin: 0;
  padding: 0;
}
body * {
  line-height: calc(1em + 4px);
  font-family: 'NanumSquare', 'Malgun Gothic', 'Dotum', sans-serif;
  word-spacing: -0.1em !important;
}
ul{
  list-style-type: none;
}
a, a:hover, a:focus{
  color: #333;
  text-decoration: none;
}
audio,canvas,iframe,img,svg,video {
    vertical-align: middle
}
img {
  margin:0 auto;
  max-width:100%;
}
sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

@media screen and (max-width: 390px) {
	body {
		font-size: 14px;
	}
}

.push-left{
  float:left;
}
.push-right{
  float:right;
}
.pt10 {
  padding-top: 10px !important;
}
.pt15 {
  padding-top: 15px !important;
}
.pt18 {
  padding-top: 18px !important;
}
.pt30 {
  padding-top: 30px !important;
}
.pt100 {
  padding-top: 100px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}
.pb20 {
  padding-bottom: 20px !important;
}
.pb30 {
  padding-bottom: 30px !important;
}
.pb80 {
  padding-bottom: 80px !important;
}

.pl0 {
	padding-left: 0px !important;
}
.pl10 {
	padding-left: 10px !important;
}
.pl20 {
	padding-left: 20px !important;
}

.pr0 {
	padding-right: 0px !important;
}
.pr10 {
	padding-right: 10px !important;
}
.pr20 {
	padding-right: 20px !important;
}

.mt10 {
  margin-top: 10px !important;
}
.mt20 {
  margin-top: 20px !important;
}
.mt30 {
  margin-top: 30px !important;
}

.mb0 {
  margin-bottom: 0 !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mb32 {
	margin-bottom: 32px;
}
.mb35 {
	margin-bottom: 35px;
}
.mb65 {
	margin-bottom: 65px !important;
}
.mb80 {
  margin-bottom: 80px;
}

.bg-gray{
  background-color: #eee !important;
}
.ft-black{
  color:#222222 !important;
}
.ft-white {
  color:#ffffff !important;
}
.ft-yellow {
  color:#ffd117 !important;
}
.ft-pink {
  color:#e4007f !important;
}
.ft-gray {
  color:#999 !important;
}
.ft-bold{
  font-weight: 900 !important;
}
.m-line{
  text-decoration: line-through;
}

.ml20 {
	margin-left: 20px !important;
}
.ml30 {
	margin-left: 30px !important;
}

.mr20 {
	margin-right: 20px !important;
}
.mr30 {
	margin-right: 30px !important;
}

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

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

.row-pb-sm {
  padding-bottom: 2em !important;
}
.row-pt-sm {
  padding-top: 2em !important;
}
@media screen and (max-width: 768px) {
  .row-pb-md {
    padding-bottom: 2em !important;
  }

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

  .pb80 {
    padding-bottom: 40px !important;
  }
  .pt18 {
    padding-top: 9px !important;
  }
  .pt100 {
    padding-top: 30px !important;
  }
  .pl10 {
      padding-left: 5px;
  }
  .pr10 {
      padding-right: 5px;
  }

  .ml20 {
      margin-left: 10px !important;
  }

  .mr9 {
      margin-right: 9px !important;
  }
  .mr8 {
      margin-right: 8px !important;
  }
  .mr30 {
      margin-right: 15px !important;
  }
  .mb80 {
    margin-bottom: 40px;
  }
}

.ft-white {
  color:#ffffff !important;
}
.ft-yellow {
  color:#ffd117 !important;
}
.text-left {
  text-align:left;
}
.text-center {
  text-align:center;
}
.text-right {
  text-align:right;
}
.position-relative {
  position:relative;
}
.display-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}
.display-flex.flex-direction-column{
    flex-direction: column;
}
.display-flex.flex-direction-column-reverse{
    flex-direction: column-reverse;
}
.display-flex.flex-direction-row{
    flex-direction: row !important;
}
.display-flex.flex-direction-row-reverse{
    flex-direction: row-reverse !important;
}
.display-flex.flex-justify-center {
	justify-content: center;
}
.display-flex.flex-justify-start{
	justify-content: flex-start;
}
.display-flex.flex-justify-end {
	justify-content: flex-end;
}
.display-flex.flex-justify-between {
	justify-content: space-between;
}
.display-flex.flex-align-center {
    align-items: center;
}
.display-flex.flex-align-start {
    align-items: flex-start;
}
.display-flex.flex-align-end {
    align-items: flex-end;
}
.display-flex.flex-align-stretch {
    align-items: stretch;
}
.display-flex.flex-wrap {
    flex-wrap: wrap;
}
.display-flex>div {
	flex:1;
}
.display-flex.flex-auto>div {
	flex:auto;
}
.display-flex .flex-0auto {
	flex:0 0 auto;
}
#page .is-pc{
  display:none !important;
}
#page .is-m{
  display:block !important;
}
@media (min-width: 768px){
	#page .is-pc{
    display:block !important;
	}
	#page .is-m{
    display:none !important;
	}
}
.des{
  word-break: keep-all;
}

#fh5co-offcanvas, #mobile-tel{
  display: none;
}

@media (min-width: 1401px) {
  #page.main .container, header .container {
      width: 1400px;
  }
}
@media (max-width: 1500px) {
  header .container {
      width: 100%;
  }
}
/* @media (max-width: 1400px) {
  #page.main .container{
      width: 1280px;
  }
} */
@media (min-width: 1200px) {
  .container {
    width: 1280px;
  }
}
@media (max-width: 768px) {
  .container {
    padding: 0 5px;
  }
}

/**********************fh5co-side-nav**********************/
.container.side-nav{
  position: relative;
  height: 100%;
  z-index: 1000;
}
#fh5co-side-nav {
	position: fixed;
  bottom: 260px;
  left: calc(50% + 750px);
  display:inline-block;
	border:1px solid #CCCCCC73;
	z-index:9900;
	background:#FFF;
  border-radius: 10px;
  overflow: hidden;
}
#fh5co-side-nav .slide-nav-list{
	display:inline-flex;
	flex-direction: column;
	align-items: center;
  justify-content: center;
	color:#333;
	background:#FFF;
}
#fh5co-side-nav .slide-nav-list div{
  padding: 2px;
  /* margin-top: 0; */
  border-bottom: 1px solid #CCCCCC73;
}
#fh5co-side-nav .slide-nav-list div a{
  font-family: 'NanumSquare', 'Malgun Gothic', 'Dotum', sans-serif !important;
	display:inline-flex;
	justify-content: center;
  align-items: center;
	width: auto;
	min-width:65px;
  font-weight: 900 !important;
	min-height:70px;
  font-size: 16px;
	text-align: center;
  /* line-height: 1.2em; */
	letter-spacing: -0.06em;
  border-radius: 5px;
  overflow: hidden;
}
#fh5co-side-nav div a+a{
	background: linear-gradient(180deg, #CCCCCC73 1px, #FFF 1px );
}
#fh5co-side-nav div :is(a.active) {
	/* background: linear-gradient(90deg, #b2d4f0 3px, #b2d4f0 3px); */
  background: #b2d4f0;
}
#fh5co-side-nav div :is(a:hover) {
	background: #b2d4f0;
}
/* @media screen and (max-width: 768px) {
	#fh5co-side-nav {
		display:flex;
		position:fixed;
		bottom:0;
		left:0;
		padding:0 !important;
		border-top:1px solid #CCCCCC73;
		z-index:9999;
		width:100%;
		height:40px;
	}
	#fh5co-side-nav div{
		flex:1;
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color:#333;
		background:#FFF;
	}
	#fh5co-side-nav div a{
		flex:1;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-weight: 900;
		font-size: 10px;
		letter-spacing: -0.06em;
		font-family: "NanumSquare", Arial, sans-serif;
		padding:0;
		text-align:center;
		min-width:unset;
		min-height:30px;
		height:100%;
	}
	#fh5co-side-nav div a+a{
		background: unset;
	}
	#fh5co-side-nav div :is(a.active) {
		background: linear-gradient(0deg, #bd4150 3px, #ffa5ad33 3px) !important;
	}
	#fh5co-side-nav div :is(a:hover) {
		background: #FFF;
	}
} */
.container.links{
  position: relative;
  height: 100%;
  z-index: 1000;
}
.container.links .link-list{
  position:fixed;
  bottom: 100px;
  left: calc(50% + 750px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#link {
	/* display:flex; */
  text-align:center;
	align-items: center;
	justify-content: center;
	z-index:10;
	width: 70px;
	height: 70px;
	z-index:9900;
}
#link-call {
	/* display:flex; */
  text-align:center;
	align-items: center;
	justify-content: center;
	z-index:10;
	width: 70px;
	height: 70px;
	border-radius:5px;
	background-color: transparent;
	/* box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08); */
	z-index:9900;
	border: unset;
}
#page.main .container.links .link-list{
  left: 95.2%;
}
#link a{
	width:100%;
	height:100%;
	display:flex;
	align-items: center;
	justify-content: center;
}
#link.call a{
	/* color:#FFF; */
}
#link a img{
	width:100% !important;
	margin-top:3px;
}
#link-call a img{
	width:100%;
	margin-top:0px;
}
@media screen and (max-width: 1660px){
  #fh5co-side-nav{
    left: calc(50% + 650px);
  }
  .container.links .link-list{
    left: calc(50% + 650px);
  }
  #page.main .container.links .link-list{
    left: unset;
    right: 20px;
  }
}
@media screen and (max-width: 1460px){
  #fh5co-side-nav{
    left: 94%;
  }
  .container.links .link-list{
    left: 94%;
  }
}
@media screen and (max-width: 1200px){
  #fh5co-side-nav{
    left: 92%;
  }
  .container.links .link-list{
    left: 92%;
  }
  #page.main .container.links .link-list{
    /* left: 92%; */
  }
}
@media screen and (max-width: 1024px){
  #fh5co-side-nav{
    left: 90%;
  }
  .container.links .link-list{
    left: 90%;
  }
  #page.main .container.links .link-list{
    /* left: 90%; */
  }
}
@media screen and (max-width: 768px) {
  #fh5co-side-nav{
    display: none;
  }
  #page.main .container.links .link-list,
  .container.links .link-list{
    left: unset;
    right: 10px !important;
    gap : 0px;
    bottom: 59px;
  }
  .container.links .link-list #link,
  .container.links .link-list #link-call{
    width: 50px;
  }
}


section div[class^="col-"] {
  padding-left:0;
  padding-right:0;
}

.mobile-tel{
  display: none;
}
header{
  width: 100%;
  z-index: 1000;
  position: fixed;
  transition: all 0.3s;
}
header .navbar{
  padding: 15px 0;
  margin: 0 auto;
  width: 94%;
  z-index: 1000;
  transition: padding 0.3s;
}
header.scrolled .navbar{
  padding: 10px 0;
}
header .navbar{
  /* margin: 0; */
  border: none;
}
header .navbar-nav{
  flex-grow: 1;
}
header .menu-1{
  display: flex;
  justify-content: space-around;
  position: relative;
  margin: 0;
  padding: 0;
}
header .menu-1 a{
  color: #fff;
  display: block;
  padding: 3px 0;
  transition: 0.2s;
  /* width: max-content; */
}
header .menu-1 .nav-link{
  position: relative;
}
header .menu-1 .nav-link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -28px;
  width: 0;
  height: 2px;
  background-color: #e4007f;
  transition: all 0.3s ease;
  z-index: 10; /* z-index 추가 */
  transform: translate3d(0, 0, 0); /* 성능 최적화 */
  will-change: transform, opacity; /* 성능 최적화 */
}
header.scrolled .menu-1 .nav-link::after{
  bottom: -23px;
}
header .menu-1 .nav-link:hover::after,
header .menu-1 .nav-link.active::after{
  width: 100%;
}
/* 서브메뉴에 마우스 오버 시 메인 메뉴 밑줄도 활성화 */
header .menu-1 .nav-item:hover > .nav-link::after{
  width: 100%;
}
/* hover효과 지우는 class */
header .menu-1 .nav-link.remove-hover:hover::after{
  width: 0;
}
header .menu-1 > li{
  font-size: 20px;
}
ul.dropdown{
  display: none;
}
ul.dropdown li{
  font-size: 16px;
}
ul.dropdown li a{
  color: #fff;
}
header .tel{
  padding-right: 0px;
}
header .tel img{
  margin-top: -13px;
}
header a.navbar-brand.logo {
  padding-top:0;
  padding-bottom:0;
}
header a.navbar-brand.logo img{
  height:100%;
}
@media screen and (max-width: 1300px){
  header .navbar-brand img{
    width: 90%;
  }
  header .menu-1 > li{
    font-size: 18px;
  }
}
@media screen and (max-width: 1024px) {
  header .menu-1 > li{
    font-size: 17px;
  }
  header .header-line{
    padding-top: 7px;
    padding-bottom: 5px;
  }
}
@media screen and (max-width: 860px) {
  header.scrolled .navbar{
    padding: 10px 0 0 0;
  }
  header .menu-1 > li{
    font-size: 15px;
  }
  header .navbar-brand{
    /* padding-right: 5px; */
  }
  header .navbar-brand img{
    width: 80%;
  }
  header .menu-1 .nav-link::after,
  header.scrolled .menu-1 .nav-link::after{
    bottom: -6px;
  }
  /* header.scrolled .menu-1 .nav-link::after{
    bottom: -16px;
  } */
  header a.navbar-brand.logo img{
    height:42px;
    width:auto;
    margin-left:0;
    margin-top:-4px;
    margin-bottom:-7px;
  }
}

header .menu-1 .dropdown{
  position: absolute;
  top: 58px;
  padding: 0;
  padding-top: 5px;
  z-index: 1000;
}
header .menu-1 .dropdown li{
  padding: 7px 0;
  width: fit-content;
  flex-wrap: wrap;
}
header .menu-1 .dropdown li a:hover{
  color: #e4007f;
  font-weight: 800;
  transition: all 0.3s;
}
header .menu-1 .dropdown li a.active{
  color: #e4007f !important;
  font-weight: 800;
}
@media screen and (max-width: 1024px){
  header .menu-1 .dropdown li{
    font-size: 12px;
  }
}
@media screen and (max-width: 860px){
  header{
    background: rgba(0, 0, 0, 0.8);
  }
  header .container{
    flex-direction: column;
  }
  header .tel{
    display: none;
  }
  header .mobile-tel{
    display: block;
  }
  header .logo-box{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  header .navbar{
    border-bottom: transparent !important;
    padding-bottom: 0;
  }
  header .navbar.active{
    /* border-bottom: 1px solid #777 !important; */
  }
  header .navbar-nav{
    position: unset;
    width: 106%;
    display: block;
    padding: 5px 0;
    margin-top: 10px;
    margin-bottom: 0;
  }
  header .navbar-brand{
    padding: 0;
    height: auto;
  }
  header .logo-box .mobile-tel img{
    margin-right: 0;
  }
  header .menu-1 .dropdown li{
    padding: 3px 0;
  }
  header .menu-1 .dropdown li a{
    letter-spacing: -0.02em;
  }
  header .menu-1 .dropdown{
    top: 37px;
  }
  header .menu-1 .dropdown li a:hover{
    color: #fff;
  }
  header .menu-1 .dropdown{
    transform: translateX(2px);
  }
  header .menu-1 .dropdown.first{
    transform: translateX(-5px);
  }
  header .menu-1 .dropdown.last{
    transform: translateX(5px);
  }
}

/* header 스크롤 액션 */
header.scrolled{
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.2s;
}
header.scrolled .navbar{
  border-bottom: transparent;
}
header:hover{
  background: rgba(0, 0, 0, 0.5);
}

/* 헤더 마우스 오버 시 배경 변함 */
@media screen and (min-width: 860px){
  header:hover .navbar{
    border-bottom: 1px solid #777;
  }
}

/* 헤더 서브메뉴 배경 */
header::after{
  content: '';
  width: 100%;
  height: 0px;
  position: absolute;
  top: 100%;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  transition: height 0.3s ease;
  pointer-events: auto;
}
header.active::after{
  height: 290px;
}
#page:not(.main) header{
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}
#page:not(.main) header:hover{
  background: #fff;
}
#page:not(.main) header .menu-1 a{
  color: #222;
}
#page:not(.main) header::after{
  background: #fff;
  border-bottom: #eee;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 860px){
  header.active::after{
    border-top: 1px solid #777;
    height: 220px;
  }
  header:hover,
  header::after,
  header.scrolled{
    background: rgba(0, 0, 0, 0.8);
  }
}


footer{
  /* height: 350px; */
  background-color: #333;
  padding-top: 40px;
  padding-bottom: 10px;
}
footer *{
  padding: 0;
}
footer .container{
  max-width: 100% !important;
  padding: 10px 10px;
  width: 1400px;
}
footer .container .row{
  margin-bottom: 30px;
}
footer h2, footer span, footer a{
  color: #fff;
}
footer li{
  color: #ccc;
}
footer .footer-title{
  margin: 20px 0;
}
footer .footer-title .footer-logo{
  float: right;
}
footer .footer-text, footer .footer-text .left{
  padding: 0;
}
footer .footer-logo{
  text-align: right;
  padding: 0;
  margin-top: -35px;
}
footer .footer-logo img{
  width: 300px;
}
footer .footer-text{
  margin-bottom: 10px;
}
footer .footer-text ul li{
  margin: 15px 0;
  font-size: 16px;
  text-decoration: none;
}
footer .footer-text ul li span{
  margin-right: 10px;
}
footer .footer-text{
  display: flex;
  justify-content: space-between;
}
footer .footer-middle{
  display: flex;
}
footer .icons{
  display: flex;
  float: right;
  margin-top: -50px;
  filter: brightness(70%);
}
footer .icons li img{
  height: 40px;
  margin-right: 10px;
}
footer .icons li:first-child img{
  height: 35px;
  margin-right: 5px;
}
@media screen and (max-width: 992px){
  footer .footer-title{
    display: flex;
    flex-direction: column-reverse;
  }
  footer .footer-logo{
    margin-top: 0px;
    text-align: left;
  }
}
@media screen and (max-width: 860px){
  footer .footer-text ul li{
    font-size: 15px;
  }
  footer .icons{
    margin-top: -130px;
  }
}
@media screen and (max-width: 768px){
  footer{
    padding-top: 0px;
  }
  footer .container .row{
    margin-bottom: 0px;
  }
  footer .footer-title .footer-logo{
    display: flex;
    align-items: end;
  }
  footer .footer-logo img{
    width: 130px;
    margin: 0;
    margin-right: 10px;
  }
  footer .footer-logo span{
    font-size: 12px;
  }
  footer .footer-title{
    margin: 10px 0;
    margin-bottom: 5px;
  }
  footer .footer-text{
    flex-direction: column;
  }
  footer .footer-text ul li{
    margin: 8px 0;
    font-size: 12px;
  }
  footer .footer-text .left ul li:first-child{
    margin: 0;
  }
  footer .footer-text .left ul{
    margin-bottom: 0;
    margin-top: 15px;
  }
  footer .footer-text .left ul li:last-child{
    margin-bottom: 0;
  }
  footer .icons{
    margin-top: -68px;
  }
  footer .icons li img{
    height: 25px;
    margin-right: 5px;
  }
  footer .icons li:first-child img{
    height: 20px;
    margin-right: 0px;
  }
}
footer .family-site{
  width: fit-content;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  z-index: 1;
}
.family-site .selected{
  padding: 10px 40px;
  border: 1px solid #fff;
  border-radius: 30px;
  background-color: #333;
  text-align: center;
  position: relative;
  z-index: 2;
}
.family-site .option-list{
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #fff;
  width: fit-content;
  background-color: #333;
  font-size: 16px;
  padding: 10px 42px;
  padding-right: 24px;
  padding-bottom: 30px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: none;
  z-index: 1;
}
.family-site .option-list.active{
  display: block;
}
.family-site .option{
  width: 120px;
  padding: 7px 0px;
}
.family-site .option a:hover, .family-site .option a:focus{
  color: #ddd;
}
footer .container .copyright{
  color: #ccc;
  font-size: 15px;
  margin-top: 60px;
  text-align: center;
}
@media screen and (max-width: 768px){
  footer .family-site{
    font-size: 14px;
  }
  .family-site .selected{
    padding: 7px 25px;
  }
  .family-site .option-list{
    padding: 5px 16px;
    padding-right: 0px;
    padding-bottom: 16px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 13px;
  }
  .family-site .option{
    padding: 5px 0;
  }
  footer .container .copyright{
    margin-top: 25px;
    font-size: 12px;
    margin-bottom: 0px;
  }
}


.gototop {
  position: fixed;
  bottom: 20px;
  left: calc(50% + 750px);
  right: unset;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.gototop.active {
  opacity: 1;
  visibility: visible;
}
.gototop a {
  display: block;
  width: 70px !important;
  height: 70px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #fff;
  text-align: center;
  padding: 30%;
  align-items: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.gototop a i{
  font-size: 24px;
  height: auto !important;
}
.gototop a:hover, .gototop a:active, .gototop a:focus {
  text-decoration: none;
  outline: none;
}
#page.main .gototop{
  right: 20px;
  left:unset;
}
@media screen and (max-width: 1660px){
  #page.cctv .gototop{
    left: calc(50% + 650px);
  }
}
@media screen and (max-width: 1460px){
  #page.cctv .gototop{
    left: 94%;
  }
}
@media screen and (max-width: 1200px){
  #page.cctv .gototop{
    left: 92%;
  }
}
@media screen and (max-width: 1024px){
  #page.cctv .gototop{
    left: 90%;
  }
}
@media screen and (max-width: 768px){
  .gototop, #page.cctv .gototop{
    right: 10px !important;
    left: unset;
    /* bottom: 60px; */
  }
  .gototop a, #page.cctv .gototop a{
    width: 50px !important;
    height: 50px !important;
  }
}

/*********************** main **************************/
section.is-bg{
  background-size: auto 100%;
  background-position: center;
  background-repeat:no-repeat;
}
section.top-banner{
  padding-top: 200px;
  height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 10px;
  padding-right: 10px;
  background-image: url("/images/front/main/top_banner.jpg");
}
section.top-banner .container-fluid{
  max-width: 100%;
  width: 1400px;
}
@media screen and (min-width: 1900px) {
  section.is-bg{
    background-size: cover;
  }
}
@media screen and (max-width: 1400px){
  section.top-banner{
    height: 650px;
  }
}
@media screen and (max-width: 1200px){
  section.top-banner{
    height: 550px;
  }
}
@media screen and (max-width: 1024px){
  section.top-banner{
    /* height: 500px; */
  }
}
@media screen and (max-width: 992px){
  section.top-banner{
    height: 450px;
  }
}
@media screen and (max-width: 768px){
  #page.main section.top-banner{
    padding: 0;
    height: unset;
    background-image: none;
  }
}
@media screen and (max-width: 500px){
  #page.main section.top-banner{
    /* height: 280px; */
  }
}


/******************* title[공통] *********************/
.title {
  text-align: center;
  padding-bottom: 10px;
}
.title p{
  margin: 0;
}
.title p.small{
   color: #aaa;
   font-weight: 900;
   font-size: 20px;
}
.title h2{
  font-size: 50px;
  font-weight: 900;
  margin-bottom: 10px;
}
.title p.des{
  font-size: 21px;
  font-weight: 400;
}
@media screen and (max-width: 768px){
  .title{
    margin-bottom: 6px;
    text-align: center;
  }
  .title p, .title h1{
    margin: 0;
  }
  .title p.small{
     color: #b92c2f;
     font-weight: 900;
     font-size: 11px;
  }
  .title h2{
    font-size: 28px;
    font-weight: 900;
  }
  .title p.des{
    font-size: 12px;
  }
}

.title.text{
  text-align: right;
}
.title.text p.small{
  font-size: 16px;
}
.title.text h3{
  font-size: 28px;
  margin-top: 6px;
  margin-bottom: 24px;
  font-weight: 900;
}
.title.text p.des{
  font-size: 23px;
}
@media screen and (max-width: 768px){
  .title.text{
    margin-top: 20px;
    padding-right: 20px;
  }
  .title.text p.small{
    font-size: 11px;
  }
  .title.text h3{
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 900;
  }
  .title.text p.des{
    font-size: 14px;
  }
}

/******************* sub-title[공통] *********************/
.sub-title{
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 20px;
}
.sub-title::before{
  content: '';
  display: inline-block;
  width: 4px;
  height: 32px;
  background: #e4007f;
  vertical-align: middle;
  margin-right: 10px;
}
@media screen and (max-width: 768px){
  .sub-title{
    font-size: 16px;
    margin-bottom: 10px;
  }
  .sub-title::before{
    width: 2px;
    height: 14px;
    margin-right: 4px;
  }
}


/******************* our product *********************/
section.product_slide{
  display: flex;
  margin: 80px 0;
  padding: 0 0 0 10px;
  overflow: hidden;
}
#page section.product_slide .container{
  max-width: 100%;
  width: 1400px;
  overflow: visible;
  /* margin-left: 12%; */
}
#page section.product_slide .container .row{
  margin-right: calc((100vw - 100%) / 2* -1);
}
@media screen and (max-width: 1400px){
  #page section.product_slide .container .row{
    margin-left: 0px;
    margin-right: 0px;
  }
}
section.product_slide .title.is-pc{
  height: 100%;
}
section.product_slide .product_title{
  /* margin-top: 2%; */
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 50px;
  height: 100%;
  padding-top: 30px;
}
section.product_slide .product_title .title-img{
  padding: 15px 0;
  /* width: 92%; */
}
section.product_slide .title{
  text-align: left;
}
section.product_slide .product_title .slide-btn{
  display: flex;
  gap: 40px;
  /* padding-top: 23%; */
}
section.product_slide .slide-btn :is(.swiper-button-next, .swiper-button-prev):after {
  font-size: 19px !important;
  color: #fff;
}
section.product_slide .slide-btn div{
  position: relative;
  top: unset !important;
  left: unset !important;
  right: unset !important;
  bottom: unset !important;
  margin: 0% !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
section.product_slide .slide-btn .swiper-button-prev{
  width: 40px;
}
section.product_slide .slide-btn .swiper-button-prev img{
  width: 100%;
}
section.product_slide .slide-btn .swiper-button-next{
  width: 40px;
}
section.product_slide .swiper-android .swiper-slide, .swiper-wrapper{
  /* transform: translate3d(-460px, 0px, 0px) !important; */
}
section.product_slide .swiper-backface-hidden .swiper-slide{
  /* width: 440px !important; */
}
section.product_slide .swiper-slide{
  /* display: flex; */
  width:auto;
  flex-shrink: 0;
  border: 1px solid #ddd;
}
section.product_slide .swiper-slide a .txt-box{
  text-align: left;
  padding: 18px;
}
section.product_slide .swiper-slide a .txt-box h3{
  font-weight: 900;
  font-size: 29px;
  margin-bottom: 16px;
}
section.product_slide .swiper-slide a .txt-box p{
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 0;
  word-break: keep-all;
}

section.product_slide .swiper-wrapper {
  overflow: visible;
  display: flex;
}
@media screen and (max-width: 1024px){
  section.product_slide .product_title{
    margin-right: 15px;
  }
  section.product_slide .swiper-slide a .txt-box h3{
    font-size: 24px;
    margin-bottom: 10px;
  }
  section.product_slide .swiper-slide a .txt-box p{
    font-size: 14px;
  }
}
@media screen and (max-width: 768px){
  section.product_slide{
    margin: 20px 0;
    padding-left: 0;
  }
  #page section.product_slide .container{
    margin-left: 0;
  }
  /* section.product_slide .slide-btn .swiper-button-prev{
    width: 20px;
  }
  section.product_slide .slide-btn .swiper-button-next{
    width: 20px;
  }
  section.product_slide .product_title .slide-btn{
    gap: 30px;
    margin-left:5px;
  } */
  section.product_slide .content{
    display: unset;
  }
  section.product_slide .title{
    text-align: center;
  }
  section.product_slide .swiper-slide a .txt-box{
    padding: 8px 18px;
  }
  section.product_slide .swiper-slide a .txt-box h3{
    font-size: 14px;
    margin-bottom: 4px;
    white-space: nowrap;
  }
  section.product_slide .swiper-slide a .txt-box p{
    font-size: 12px;
  }
}


/******************* our solution *********************/
section.solution{
  margin: 80px 0;
  overflow-x: hidden;
}
@media screen and (max-width: 768px){
  section.solution{
    margin: 40px 0;
  }
}
section.solution .container{
  margin-bottom: 17px;
}
section.solution .solution-img{
  max-width: 1920px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin: auto;
  overflow: hidden;
}
section.solution .solution-img .img{
  position: relative;
}
section.solution .solution-img .text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}
section.solution .solution-img .text h4,
section.solution .solution-img .text p{
  color: #fff;
}
section.solution .solution-img .text h4{
  font-size: 30px;
  font-weight: 900;
}
section.solution .solution-img .text p{
  font-size: 23px;
  font-weight: 400;
}
section.solution .solution-img .img{
  /* width: calc(100% / 4); */
  /* height: auto; */
  padding: 0;
  opacity: 0; /* 처음에 숨김 */
  transform: translateY(30%); /* 아래로 이동한 상태 */
}
section.solution .solution-img .img.active{
  opacity: 1; /* 보이게 설정 */
  transform: translateY(0); /* 제자리로 이동 */
  transition: all 1.5s;
}
@media screen and (max-width: 860px){
  section.solution .container{
    margin-bottom: 0;
  }
  section.solution .solution-img{
    flex-wrap: wrap;
  }
  section.solution .col-custom {
    flex: 0 0 50%;
    max-width: 50%;
  }
  section.solution .solution-img .top{
    display: flex;
  }
  section.solution .solution-img .bottom{
    display: flex;
  }
  section.solution .solution-img .text h4{
    font-size: 18px;
  }
  section.solution .solution-img .text p{
    font-size: 12px;
  }
}

/******************* about us *********************/
section.about_us{
  margin-bottom: 80px;
}
section.about_us .container{
  max-width: 1400px;
}
section.about_us .title{
  padding-bottom: 20px;
}
#page.main{
  overflow: visible !important;
}
section.about_us .aboutus-scroll{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  /* height: 200vh; */
}
section.about_us .aboutus-scroll .left{
  width: 60%;
  height: 55vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 25%;
}
section.about_us .aboutus-scroll .left .left-img{
  /* width: 90%; */
  position: absolute;
  opacity: 0;
  transform: translateY(50px);
}
section.about_us .aboutus-scroll .right{
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
section.about_us .aboutus-scroll .right img{
  margin: 100px 0;
  /* width: 80%; */
}
section.about_us .aboutus-scroll .right .text{
  margin: 200px 0;
}
@media screen and (max-width: 1200px) {
  section.about_us .aboutus-scroll{
    gap: 18px;
  }
}
@media (max-width: 768px) {
  section.about_us{
    margin-bottom: 30px;
    position: relative;
    background-color: #fff;
    height: auto;
    padding: 0 5px;
  }
  section.about_us .title{
    padding-bottom: 0px;
  }
  section.about_us .aboutus-scroll {
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    margin-top: 20px;
    height: 100%;
  }
  section.about_us .aboutus-scroll .left{
    width: 100%;
    height: unset;
    top: unset;
    display: block;
    position: relative;
    display: none;
  }
  section.about_us .aboutus-scroll .left .left-img{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: unset;
  }
  section.about_us .aboutus-scroll .right{
    width: 400%;
    max-width: 400%;
    flex-direction: row;
    /* margin-top: 55%; */
    will-change: transform;
  }
  section.about_us .aboutus-scroll .right .right-img{
    width: 100vw;
    padding-right: 10px;
    justify-content: center;
    align-items: center;
  }
  section.about_us .aboutus-scroll .right .right-img:last-of-type{
    margin-right: 14px;
  }
  section.about_us .aboutus-scroll .right img{
    margin: 0;
  }
}
/* section.about_us .mySwiper2{
  flex: 0 0 calc(100% - 220px);
  margin-right: 20px;
}
section.about_us .mySwiper3{
  flex: 0 0 200px;
  height: 500px;
}
section.about_us .mySwiper3 .swiper-slide{
  flex: 0 0 auto;
  transition: transform 0.5s ease;
  cursor: pointer;
}
section.about_us .swiper-slide-thumb-active{
}
@media screen and (max-width: 768px){
  section.about_us{
    padding: 0 10px;
    margin-bottom: 40px;
  }
  section.about_us .about-content{
    display: block;
    padding-top: 10px;
  }
  section.about_us .mySwiper2{
    flex: 0 0 100%;
  }
  section.about_us .mySwiper3{
    display: none;
  }
} */


/******************* company price *********************/
section.company_price .container{
  max-width: 1400px;
  width: 1400px;
}
@media screen and (max-width: 1400px){
  section.company_price .container{
    width: 98%;
  }
}
section.company_price .tab_btn ul{
  display: flex;
  padding-left: 0;
  margin-bottom: 0;
}
section.company_price .tab_btn ul li{
  display: block;
  padding: 15px 25px;
  font-size: 20px;
  font-weight: 500;
  background-color: #fff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  cursor: pointer;
}
section.company_price .tab_btn ul li.active{
  background-color: #fafafa;
  border-left: 1px solid #bbb;
  border-top: 1px solid #bbb;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  font-weight: 700;
}
section.company_price .tab_content{
  padding: 50px 40px;
  background-color: #fafafa;
  border-radius: 30px;
  border-top-left-radius: 0;
  border: 1px solid #bbb;
}
section.company_price .tab_content .txt-box h2{
  font-weight: 900;
  font-size: 28px;
}
section.company_price .tab_content .txt-box h2 .red{
  color: #e4007f;
  /* color: #b92c2f; */
}
section.company_price .tab_content .txt-box p{
  font-size: 23px;
  font-weight: 500;
  line-height: 1.2;
}
section.company_price .tab_content .display-flex .img{
  flex: 1.1;
}
section.company_price .tab_content .display-flex .txt-box{
  flex: 0.9;
  text-align: left;
  width: fit-content;
}
section.company_price .tab_content > div{
  display: none;
}
section.company_price .tab_content > div.active{
  display: block;
}
@media screen and (max-width: 900px) {
  section.company_price .tab_btn ul li{
    padding: 10px 15px;
    font-size: 16px;
  }
}
@media screen and (max-width: 768px){
  section.company_price .tab_content{
    padding: 20px 15px;
  }
  section.company_price .tab_content .display-flex{
    flex-direction: column;
  }
  section.company_price .tab_content .txt-box{
    margin-top: 16px;
  }
  section.company_price .tab_content .txt-box h2{
    font-weight: 900;
    font-size: 20px;
    margin-bottom: 10px;
  }
  section.company_price .tab_content .txt-box h2 .red{
    color: #b92c2f;
  }
  section.company_price .tab_content .txt-box p{
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
  }
}
@media screen and (max-width: 500px){
  section.company_price .tab_btn ul li{
    padding: 5px 5px;
    font-size: 11px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  section.company_price .tab_content{
    padding: 16px 8px;
    border-radius: 10px;
    border-top-left-radius: 0;
  }
}


/******************* partner logo *********************/
section.partner{
  /* width: 100%; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 40px 0;
}
section.partner .partner_logo{
  display: flex;
  /* height: 160px; */
  justify-content: center;
}
section.partner .partner_logo{
  margin: 10px 0;
}
section.partner .partner_logo .logo_list{
  display: flex;
  width: max-content;
  justify-content: center;
  align-items: center;
  animation: slideLoop linear infinite;
  -webkit-animation: slideLoop linear infinite;
  animation-duration: 60s;
  animation-play-state: running;
}
section.partner .partner_logo.second .logo_list{
  animation-direction: reverse;
}
/* @keyframes loop {
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
} */
section.partner .partner_logo .logo_list .logo_img{
  width: 200px;
  height: auto;
  margin: 30px 40px;
  align-items: center;
  text-align: center;
}
@media screen and (max-width: 1024px){
  section.partner{
    margin: 15px 0;
  }
  section.partner .partner_logo .logo_list .logo_img{
    width: 100px;
    margin: 20px 40px;
  }
  section.partner .partner_logo{
    height: 100px;
  }
}
@media screen and (max-width: 768px){
  section.partner{
    margin: 10px 0;
  }
  section.partner .partner_logo .logo_list{
    animation-duration: 40s;
  }
  section.partner .partner_logo .logo_list .logo_img{
    width: 80px;
    margin: 10px 20px;
  }
  section.partner .partner_logo{
    height: 50px;
  }
}



/******************* partner logo *********************/
section.partnership{
  background-image: url(/images/front/main/partnership_1.jpg);
  background-size: cover;
  background-position: center;
}
section.partnership .container{
  padding: 50px 0px;
  padding-bottom: 120px;
  max-width: 100% !important;
  width: 1400px;
}
section.partnership .title{
  text-align: left;
  margin-top: 20px;
  margin-bottom: 60px;
}
section.partnership .title h2,
section.partnership .title .des{
  color: #fff;
}
section.partnership .title .des{
  font-size: 24px;
  line-height: 1.5;
  font-weight: 300;
}
section.partnership .container .menu{
  margin-top: 25px;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}
section.partnership .container .menu a{
  cursor: pointer;
  display: block;
  /* width: calc(100% / 3) */
}
section.partnership .container .menu a img{
  width: 100%;
}
section.partnership .sub-txt{
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0;
}
@media screen and (max-width: 860px){
  section.partnership .container{
    padding-top: 30px;
    padding-bottom: 50px;
  }
}
@media screen and (max-width: 768px){
  section.partnership .container{
    padding-top: 10px;
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
  }
  section.partnership .container .menu{
    margin-top: 5px;
    margin-bottom: 5px;
  }
  section.partnership .title{
    margin-bottom: 10px;
  }
  section.partnership .title .des{
    font-size: 14px;
  }
  section.partnership .sub-txt{
    font-size: 10px;
  }
}


/******************* 영업협력 partner *********************/
#fh5co-contact{
  padding: 4em 0;
  padding-bottom: 1em;
  clear: both;
}
#fh5co-contact form{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
#fh5co-contact form .form-group:nth-child(5){
  grid-column: span 2;
}
#fh5co-contact form .form-group:last-of-type{
  grid-column: span 2;
}
#page.partner .form-control{
  height: 40px;
  font-size: 16px;
  padding: 10px;
}
#page.partner .form-control:focus{
  color: #333;
  font-weight: 400;
}
#page.partner textarea.form-control{
  height: auto;
}
@media screen and (max-width: 768px){
  #fh5co-contact{
    padding: 2em 0;
  }
  #fh5co-contact form{
    display: unset;
  }
  #page.partner .form-control{
    font-size: 14px;
    padding: 6px;
    height: 36px;
  }
}
/******************* 영업협력 partner logo *********************/
#page.partner .logo_slider{
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  margin-top: 30px;
}
#page.partner .logo_slider .logo_list{
  display: flex;
  width: max-content;
  justify-content: center;
  align-items: center;
  animation: slideLoop linear infinite;
  -webkit-animation: slideLoop linear infinite;
  animation-duration: 80s;
  animation-play-state: running;
}
#page.partner .logo_slider .logo_list .logo_img{
  flex: 0 0 auto;
  margin: 30px 40px;
  width: 200px;
  height: auto;
  align-items: center;
  text-align: center;
}
#page.partner .logo_slider .logo_list.second{
  animation-direction: reverse;
}
@keyframes slideLoop {
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}
#page.partner .logo_slider .logo_track{
  position: relative;
  display: inline-block;
}
#page.partner .logo_slider .logo_list.first::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
  pointer-events: none;
}
#page.partner .logo_slider .logo_list.second::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1));
  pointer-events: none;
}

@media screen and (max-width: 1024px){
  #page.partner .logo_slider .logo_list .logo_img{
    width: 100px;
    margin: 20px 40px;
  }
}
@media screen and (max-width: 768px){
  #page.partner .logo_slider{
    margin-top: 10px;
  }
  #page.partner .logo_slider .logo_list .logo_img{
    width: 80px;
    margin: 10px 20px;
  }
}


/*product 공통-----------------------------------------*/

section.contents:not(.is-bg)+section.contents:not(.is-bg):before {
  content:'';
  display:block;
  padding-top:100px;
}
section.contents.is-bg+section.contents:not(.is-bg):before {
  content:'';
  display:block;
  padding-top:70px;
}
section.contents.is-bg:before {
  content:'';
  display:block;
  margin-top:50px;
  padding-top:70px;
}
section.contents.is-bg:after {
  content:'';
  display:block;
  padding-bottom:70px;
}

section.top-banner+section.contents:before {
  content:'';
  padding-top:70px;
  display:block;
}
@media screen and (max-width: 768px){
  section.contents{
    padding: 0;
  }
  section.top-banner+section.contents:before{
    padding-top: 30px;
  }
  section.contents:not(.is-bg)+section.contents:not(.is-bg):before{
    padding-top: 30px;
  }
  section.contents.is-bg+section.contents:not(.is-bg):before{
    padding-top: 40px;
  }
  section.contents.is-bg:before{
    padding-top: 20px;
    margin-top: 50px;
  }
  section.contents.is-bg:after{
    padding-bottom: 20px;
  }
}

:is(header,section.contents) br:is(.tablet, .m){
    display:none !important;
}
:is(header,section.contents) br:not(.pc,.tablet, .m){
    content: "";
    display:block !important;
    font-size: 0;
    margin:0;
}
@media screen and (max-width: 992px) {
    :is(header, section.contents) br:is(.pc, .m){
        display:none !important;
    }
    :is(header, section.contents) br:not(.pc,.tablet, .m),
    :is(header, section.contents) br.tablet{
        display:block !important;
    }
}
@media screen and (max-width: 768px) {
    :is(header, section.contents) br:is(.pc, .tablet){
        display:none !important;
    }

    :is(header, section.contents) br:not(.pc,.tablet, .m),
    :is(header,section.contents) br.m{
        display:block !important;
    }
}

section.contents .title-box {
  padding-bottom:28px;
  word-break: keep-all;
}
section.contents .display-flex.flex-direction-row-reverse .title-box {
  padding-left:78px;
}
section.contents .display-flex.flex-direction-row-reverse .prevent2-text{
  padding-left:78px;
}
section.contents .title-box .sub{
  font-size:30px;
  margin-bottom: 6px;
}
section.contents .title-box .title{
  font-size:55px;
  color:#0071cd;
  font-weight:900;
  margin:0;
}
section.contents .title-box .title *{
  font-size:inherit;
  color:inherit;
  font-weight:inherit;
  font-family:inherit;
}
section.contents .title-box .title .ft-black {
  color:#323232 !important;
}
section.contents .title-box .title .small{
  font-size:24px;
  font-weight:500;
}
section.contents .title-box .des{
  margin-top:40px;
  font-size:16px;
  font-weight:500;
}
@media screen and (max-width: 768px){
  section.contents .title-box{
    padding-bottom: 10px;
  }
  section.contents .title-box .sub{
    font-size: 15px;
    margin-bottom: 2px;
  }
  section.contents .title-box .title{
    font-size: 30px;
  }
  section.contents .title-box .title .small{
    font-size: 15px;
  }
  section.contents .display-flex.flex-direction-row-reverse .title-box{
    padding-left: 30px;
  }
  section.contents .display-flex.flex-direction-row-reverse .prevent2-text{
    padding-left: 30px;
  }
  section.contents .title-box .des{
    margin-top: 12px;
    font-size: 12px;
  }
}
@media screen and (max-width: 500px){
  section.contents .title-box .sub{
    font-size: 11px;
  }
  section.contents .title-box .title{
    font-size: 20px;
  }
  section.contents .title-box .title .small{
    font-size: 9px;
  }
  section.contents .display-flex.flex-direction-row-reverse .title-box{
    padding-left: 15px;
  }
  section.contents .display-flex.flex-direction-row-reverse .prevent2-text{
    padding-left: 15px;
  }
}

section.contents .title-box+.slide-btn {
  position:relative;
  display:inline-flex;
  flex-wrap: wrap-reverse;
  padding-bottom:16px;
}
section.contents .title-box+.slide-btn :is(.swiper-button-prev, .swiper-button-next){
  position:relative;
  top:unset !important;
  left:unset !important;
  right:unset !important;
  bottom:unset !important;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background:unset;
  margin:0 !important;
  border-radius: unset;
}
section.contents .title-box+.slide-btn :is(.swiper-button-prev, .swiper-button-next):after{
  content:unset;
}
section.contents .title-box+.slide-btn .swiper-button-prev {
  transform: translateX(-30%);
  margin-right: 30px !important;
}
section.contents .title-box+.slide-btn .swiper-button-next {
  transform: translateX(30%);
}
section.contents .title-box+.slide-btn :is(.swiper-button-prev, .swiper-button-next) img{
  width: 15px;
}
@media screen and (max-width: 768px){
  section.contents .title-box+.slide-btn{
    padding-bottom: 0;
  }
  section.contents .title-box+.slide-btn .swiper-button-prev {
    margin-right: 0px !important;
  }
  section.contents .title-box+.slide-btn :is(.swiper-button-prev, .swiper-button-next) img{
    width: 10px;
  }
}



/*--------------------------------------------------------*/
section.contents .swiper-box {
  position: relative;
  display:flex;
}
section.contents .swiper-box .swiper {
  margin:0 50px;
}
@media screen and (max-width: 768px){
  section.contents .swiper-box .swiper{
    margin: 0 21px;
  }
}
section.contents .swiper-box :is(.swiper-button-next, .swiper-button-prev):after {
  content:unset;
}
section.contents .swiper-box :is(.swiper-button-next, .swiper-button-prev) {
  position:absolute;
  top:0;
  width:40px;
  display:flex;
  align-items: center;
  height:100%;
  margin:0;
  z-index:10;
}
section.contents .swiper-box .swiper-button-next {
  right:0;
}
section.contents .swiper-box .swiper-button-next img{
  margin:0 0 0 auto;
}
section.contents .swiper-box .swiper-button-prev {
  left:0;
}
section.contents .swiper-box .swiper-button-prev img{
  margin:0 auto 0 0;
}
@media screen and (max-width: 768px){
  section.contents .swiper-box .swiper-button-prev img{
    margin: 0 26px 0 0;
    height: 40px;
  }
  section.contents .swiper-box .swiper-button-next img{
    margin:0 0 0 26px;
    height: 40px;
  }
}

/*--------------------------------------------------------*/
/* 기본 설정: flip-container와 flip-card의 스타일 */
section.contents .grid-item.flip-container {
  display: inline-block;
  /* height: 560px; */
  width: 100%;
  aspect-ratio: 4 / 5.6; /* 너비와 높이 비율 설정 */
  perspective: 1000px; /* 3D 변환 효과를 위해 */
}

section.contents .grid-item .flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  color: white;
  line-height: 560px;
  transform-style: preserve-3d; /* 3D 변환을 유지 */
  transform: rotateY(0deg); /* 초기 상태는 앞면 */
  transition: transform 0.5s ease; /* 회전 애니메이션 */
}

/* 마우스 오버 시 180도 회전 */
section.contents .grid-item .flip-card:hover {
  transform: rotateY(180deg); /* 마우스 오버 시 180도 회전 */
}

/* 앞면 (front) */
section.contents .grid-item .flip-card .front {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 뒤집힌 면은 보이지 않도록 */
  background-size: cover; /* 배경 이미지를 꽉 차게 설정 */
  z-index: 2; /* 앞면이 우선 보이도록 설정 */
}

/* 뒷면 (back) */
section.contents .grid-item .flip-card .back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 뒤집힌 면은 보이지 않도록 */
  background-size: cover; /* 배경 이미지를 꽉 차게 설정 */
  transform: rotateY(180deg); /* 뒷면을 180도 회전시켜 보이게 설정 */
  z-index: 1; /* 뒷면이 뒤에 위치하도록 설정 */
}
/*--------------------------------------------------------*/

section.contents .add-vat {
  /* margin-top: calc(-1em - 4px); */
}
section#tel-box:before {
  margin-top:11%;
  padding-top:0;
}
section#tel-bottom:before{
  padding-top:0;
}
section:is(#tel-box, #tel-bottom):after{
  padding-bottom:0;
}
section#tel-box img {
  margin-top: -11.5%;
}
section#tel-bottom {
  background: #0172ce;
}
section#tel-bottom img {
  margin:0 -25%;
  width:150%;
  max-width:150%;
}
@media screen and (max-width: 1200px){
  section#tel-box:before{
    margin-top: 12%;
  }
}
@media screen and (max-width: 768px){
  section#tel-bottom{
    padding: 0 10px;
  }
  section#tel-box:before{
    margin-top: 23%;
  }
  section.contents .add-vat{
    font-size: 10px;
  }
  section#tel-box img{
    margin-top: -21%;
  }
}

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

section.contents .accordion-list {
  margin:0;
  padding:0;
  border-top: 1px solid #333;
}
section.contents .accordion-list .accordion-item {
  border-bottom: 1px solid #ddd;
}
section.contents .accordion-list .accordion-item .accordion-link {
  display: block;
  position: relative;
  padding: 7px 20px;
  border-bottom: 1px solid #ddd;
  transition: all 0.3s;
}
section.contents .accordion-list .accordion-item.active .accordion-link {
  background-color: #fff;
}
section.contents .accordion-list .accordion-item .accordion-link::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width:28px;
  height:16px;
  background-image: url('/images/front/product/accordion_arrow.png');
}
section.contents .accordion-list .accordion-item.active .accordion-link::before {
  transform: translateY(-50%) rotate(180deg);
}
section.contents .accordion-list .accordion-name {
  position: relative;
  display:flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 50px);
  font-size: 30px;
  font-weight: 900;
}
section.contents .accordion-list .accordion-name::before {
  content:'';
  margin-right:10px;
  width:45px;
  height:45px;
  background-image:url('/images/front/product/qna_icon.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:100%;
}
section.contents .accordion-list .accordion-item .accordion-desc {
  display: none;
  padding: 30px 40px;
  background-color: #fcfcfc;
  color: #777;
  font-size:20px;
  word-break: keep-all;
  line-height: normal;
}
@media screen and (max-width: 768px){
  section.contents .accordion-list .accordion-name{
    font-size: 16px;
  }
  section.contents .accordion-list .accordion-item .accordion-desc{
    font-size: 14px;
    padding: 10px 40px;
  }
  section.contents .accordion-list .accordion-item .accordion-desc .is-pc{
    /* display: none !important; */
  }
  section.contents .accordion-list .accordion-name::before{
    width: 24px;
    height: 30px;
  }
  section.contents .accordion-list .accordion-item .accordion-link{
    padding: 3px 5px;
  }
  section.contents .accordion-list .accordion-item .accordion-link::before{
    right: 1%;
    width: 14px;
    height: 8px;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

/* ************** intro-card[공통] **************** */
#page section#intro-card .row.intro{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-sizing: border-box;
  gap: 20px;
}
@media screen and (max-width: 768px){
  #page section#intro-card .row.intro{
    gap: 5px;
  }
}
#page section .row:before,
#page section .row:after{
  display: none;
}
#page section#intro-card .row.intro > div{
  position: relative;
  width: fit-content;
  overflow: hidden;
  /* cursor: pointer; */
}
#page section#intro-card .row.intro .text{
  position: absolute;
  top: 310px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  /* width: 100%; */
  width: max-content;
  padding: 0 18px;
  word-break: keep-all;
  transition: all 0.4s;
  letter-spacing: -1px;
}
#page section#intro-card .row.intro .text h2{
  font-size: 30px;
  font-weight: 900;
  color: #fff;
}
#page section#intro-card .row.intro .text .info{
  font-size: 22px;
  font-weight: 700;
  padding: 0;
  text-align: left;
  color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s;
}
#page section#intro-card .row.intro .text .info li{
  display: flex;
  margin-top: 26px;
}
#page section#intro-card .row.intro .text .info li p{
  margin-bottom: 0;
  line-height: 1.6;
}
#page section#intro-card .row.intro > div:hover .text{
  top: 40px;
}
#page section#intro-card .row.intro > div:hover .text .info{
  max-height: 210px;
}
/**************** internet *********************/
#page.internet section#intro-card .row.intro .text .info li{
  display: unset;
  text-align: center;
}
#page.internet section#intro-card .row.intro .text{
  text-align: center;
}
#page.internet section#intro-card .row.intro .text .info{
  padding: 0;
}
#page.internet section#intro-card .row.intro > div:hover .text{
  top: 100px;
}
@media screen and (max-width: 768px){
  #page.internet section#intro-card .row.intro > div:hover .text{
    top: 70px;
  }
  #page.internet section#intro-card .row.intro .text h2{
    font-size: 18px;
  }
  #page.internet section#intro-card .row.intro .text p{
    font-size: 16px;
  }
}
/*************************************/
@media screen and (max-width: 1280px){
  #page section#intro-card .row.intro .text{
    top: 280px;
  }
  #page section#intro-card .row.intro .text h2{
    margin-bottom: 0;
    font-size: 26px;
    white-space: nowrap;
  }
  #page section#intro-card .row.intro .text .info{
    font-size: 20px;
  }
  #page section#intro-card .row.intro .text .info li{
    margin-top: 14px;
  }
}
@media screen and (max-width: 1024px){
  #page section#intro-card .row.intro .text{
    top: 200px;
  }
  #page section#intro-card .row.intro .text h2{
    font-size: 24px;
  }
  #page section#intro-card .row.intro .text .info{
    font-size: 18px;
  }
}
@media screen and (max-width: 768px){
    #page section#intro-card .row.intro{
      grid-template-columns: repeat(2, 1fr);
    }
    #page section#intro-card .row.intro .text{
      top: 190px;
      /* top: 40px; */
      padding: 0px;
      letter-spacing: 0.02em;
    }
    #page section#intro-card .row.intro .text h2{
      font-size: 18px;
      margin-bottom: 10px;
    }
    #page section#intro-card .row.intro .text .info{
      font-size: 12px;
      max-height: 0px;
      padding-left: 14px;
    }
    #page section#intro-card .row.intro .text .info li{
      margin-top: 6px;
    }
    #page section#intro-card .row.intro > div:hover .text{
      top: 40px;
    }
    #page section#intro-card .row.intro > div:hover .text .info{
      max-height: 100px;
    }
}


/* ************* [swiper 공통] ***************** */
#page section.intro-slide .swiper-box .swiper{
  margin: 0 68px;
}
#page section.intro-slide .swiper-box .swiper .swiper-slide img{
  width: unset;
}
@media screen and (max-width: 768px){
  #page section.intro-slide .swiper-box .swiper{
    margin: 0 21px;
  }
}

#page section.intro-slide .swiper-slide{
  border-radius: 20px;
  border: 1px solid #ddd;
  overflow: hidden;
  padding: 50px 5px;
  max-height: 340px;
}
#page section.intro-slide .swiper-slide .txt-box h4{
  font-size: 26px;
  margin-bottom: 16px;
}
#page section.intro-slide .swiper-slide .img{
  margin-bottom: 40px;
}
#page section.intro-slide .swiper-slide .txt-box p{
  font-size: 24px;
}
#page.security section.intro-slide .swiper-slide .img img{
  max-height: 94px;
}
@media screen and (max-width: 768px){
  #page section.intro-slide .swiper-slide{
    border-radius: 10px;
    padding: 10px 4px;
  }
  #page section.intro-slide .swiper-slide .txt-box{
    font-size: 12px;
  }
  #page section.intro-slide .swiper-slide .img{
    width: 40%;
    height: 40px;
    margin: auto;
    margin-bottom: 20px;
  }
  #page section.intro-slide .swiper-slide .txt-box h4{
    font-size: 11px;
    margin-bottom: 6px;
  }
  #page section.intro-slide .swiper-slide .txt-box p{
    font-size: 0.8em;
  }
}

/* ************* [md-banner 공통] ***************** */
#page section.md-banner{
  margin-top: 8%;
}
#page section.md-banner:before,
#page section.md-banner:after{
  display: none;
}
#page section.md-banner img{
  margin-top: -7%;
}
@media screen and (max-width: 1280px){
  #page section.md-banner{
    margin-top: 13%;
  }
}
@media screen and (max-width: 768px){
  #page section.md-banner{
    margin-top: 16%;
  }
}

/* ************** [추천고객 공통] **************** */
#page section#suggest{
  /* padding-bottom: 100px; */
}
#page section#suggest .customer-content{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 70px;
  row-gap: 50px;
}
#page section#suggest .customer-content .txt-box{
  margin-top: 10px;
}
#page section#suggest .customer-content .txt-box h4{
  font-weight: 900;
  font-size: 24px;
  margin-bottom: 10px;
}
#page section#suggest .customer-content .txt-box p{
  font-size: 18px;
  font-weight: 400;
  /* margin-left: 32px; */
  word-break: keep-all;
}
@media screen and (max-width: 768px){
  #page section#suggest{
    padding-bottom: 0px;
  }
  #page section#suggest .suggest-box{
    width: 100%;
    overflow: hidden;
  }
  #page section#suggest .customer-content{
    display: flex;
    gap: unset;
    width: max-content;
    animation: slideLoop 30s linear infinite;
  }
  #page section#suggest .customer-content .customer{
    flex: 0 0 auto;
    margin: 0 6px;
    width: 150px;
  }
  #page section#suggest .customer-content .txt-box h4{
    font-size: 12px;
    margin-bottom: 5px;
  }
  #page section#suggest .customer-content .txt-box p{
    font-size: 11px;
    /* margin-left: 12px; */
  }
}




/******************* CCTV *********************/
#page.cctv section#product-top{
  height: 850px;
}
@media screen and (max-width: 1200px){
  #page.cctv section#product-top{
    height: 736px;
  }
}
@media screen and (max-width: 1024px){
  #page.cctv section#product-top{
    height: 636px;
  }
}
@media screen and (max-width: 768px){
  #page.cctv section#product-top{
    height: 526px;
  }
}
@media screen and (max-width: 500px){
  #page.cctv section#product-top{
    height: 332px;
  }
}
#page.cctv section#insurance .insurance-des{
  flex: 1.2;
}
#page.cctv section#insurance .insurance-img{
  flex: 0.8;
}
#page.cctv section#insurance .insurance-img img{
  width: 100%;
}
#page.cctv section#insurance .row{
  align-items: normal;
}
#page.cctv section#insurance .insurance-pbox {
  margin-top:30px;
  padding:17px 0 17px 0;
  display:flex;
  border-radius:20px;
  background:#FFFFFFce;
}
#page.cctv section#insurance .insurance-pbox img{
  height: auto;
}
#page.cctv section#manage .title-box {
  padding-top:16px;
  margin-right: 10px;
}
@media screen and (max-width: 768px){
  #page.cctv section#insurance .insurance-pbox{
    border-radius:12px;
    margin-top: 0px;
    padding: 10px 0;
  }
  #page.cctv section#insurance .insurance-pbox img{
    width: calc(100% / 5);
  }
}

#page.cctv section#secom{
  padding-top: 100px;
}
@media screen and (max-width: 768px){
  #page.cctv section#secom{
    padding-top: 50px;
  }
}
#page.cctv section#secom .grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* 3열 */
  grid-template-rows: 1fr 1fr; /* 2행 */
  gap: 10px;
}
#page.cctv section#secom .grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  position:relative;
  background-repeat:no-repeat;
  background-position: center;
  background-size: auto 100%;
  overflow:hidden;
  min-height: 220px;
}
#page.cctv section#secom .grid-item img{
  visibility: hidden;
}
#page.cctv section#secom .item1 {
  grid-row: span 2; /* 첫 번째 아이템이 두 행을 차지 */
  grid-column: span 1; /* 첫 번째 열 */
}
#page.cctv section#secom .item2 {
  grid-column: span 2; /* 두 번째 아이템이 두 열을 차지 */
  grid-row: span 1; /* 첫 번째 행 */
}
#page.cctv section#secom .item3 {
  grid-column: span 1; /* 두 번째 열 */
  grid-row: span 1; /* 두 번째 행 */
}
#page.cctv section#secom .item4 {
  grid-column: span 1; /* 세 번째 열 */
  grid-row: span 1; /* 두 번째 행 */
}

/* 화면 크기가 768px 이하일 때 1열 레이아웃 */
@media screen and (max-width: 768px) {
  #page.cctv section#secom .grid-container {
      grid-template-columns: 1fr 1fr; /* 1열로 변경 */
      grid-template-rows: repeat(2, 1fr); /* 행 크기 자동 조정 */
  }

  #page.cctv section#secom .item1 {
      grid-column: span 1; /* 첫 번째 아이템이 1열만 차지 */
      grid-row: span 1;
  }

  #page.cctv section#secom .item2 {
      grid-column: span 1; /* 두 번째 아이템이 1열만 차지 */
  }

  #page.cctv section#secom .item3 {
      grid-column: span 1; /* 세 번째 아이템이 1열만 차지 */
  }

  #page.cctv section#secom .item4 {
      grid-column: span 1; /* 네 번째 아이템이 1열만 차지 */
  }
}

#page.cctv section#secom .grid-item .secom-kind{
  position:absolute;
  bottom:0;
  left:0;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width:100%;
  min-height:133px;
  padding: 16px;
  color:#FFF;
  background:#000000c9;
  transform: translateY(100px); /* 아래로 이동 */
  opacity: 0; /* 투명 */
  transition: transform 0.5s ease, opacity 0.5s ease; /* 애니메이션 */
}
#page.cctv section#secom .grid-item .secom-kind .title {
  font-size: 24px;
  font-weight: 900;
}
#page.cctv section#secom .grid-item .secom-kind .des {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
}

#page.cctv section#security .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 */
    grid-template-rows: repeat(2, auto); /* 2행 */
    gap: 30px 40px;
    width: 100%;
}
@media screen and (max-width: 1024px){
  #page.cctv section#security .grid-container{
    gap: 30px 30px;
  }
}
@media screen and (max-width: 768px){
  #page.cctv section#secom .grid-item .secom-kind{
    padding: 6px;
    min-height: 86px;
  }
  #page.cctv section#secom .grid-item .secom-kind .title{
    font-size: 14px;
  }
  #page.cctv section#secom .grid-item .secom-kind .des{
    font-size: 11px;
    margin-top: 6px;
  }
  #page.cctv section#security .grid-container{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

#page.cctv section#qna .container{
  max-width: 1280px;
}

/* 모달창 */
#page.cctv .cctv-modal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1001;
  display: none;
  animation: fadeIn 0.3s ease-in-out;
  width: 1000px;
}
#page.cctv .cctv-modal .top{
  display: flex;
  justify-content: space-between;
  background: #0071cd;
  color: #fff;
  align-items: center;
  padding: 0px 20px;
  padding-top: 5px;
}
#page.cctv .cctv-modal .top span{
  font-size: 25px;
}
#page.cctv .cctv-modal .inside{
  padding: 0px 10px;
  height: 100%;
  align-items: center;
  padding: 20px 10px;
  background: #fff;
}
#page.cctv .cctv-modal .modal-close{
  cursor: pointer;
}
#page.cctv section#manage .product_img .swiper-slide{
  cursor: pointer;
  position: relative;
}
#page.cctv section#manage .product_img .swiper-slide span{
  position: absolute;
  right: 2%;
  bottom: 35%;
  color: #333;
  transition: all 0.3s;
  background-color: #ffffffa1;
  font-size: 14px;
  padding:4px 6px 2px 6px;
  border-radius: 3px;
  display: flex;
}
#page.cctv section#manage .product_img .swiper-slide span img{
  width: 15px;
  transition: all 0.3s;
  margin-right: 3px;
}
#page.cctv section#manage .product_img .swiper-slide:hover span{
  background-color: #0071cda1;
  color: #fff;
}
#page.cctv section#manage .product_img .swiper-slide:hover span img{
  filter: invert(1);
}
@media screen and (max-width: 768px){
  #page.cctv section#manage .product_img .swiper-slide span{
    font-size: 12px;
  }
  #page.cctv section#manage .product_img .swiper-slide span img{
    width: 13px;
  }
}
/* 모달 오버레이 */
#modal-overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media screen and (max-width: 1024px){
  #page.cctv .cctv-modal{
    width: 800px;
  }
}
@media screen and (max-width: 768px){
  #page.cctv .cctv-modal{
    width: 380px;
    border-radius: 10px;
  }
}
/*---------------------------------------------------------------------------*/
#page.board #fh5co-header {
	margin: 70px 0 50px 0;
	background: #1B325E;
	display:flex;
	height:80px;
}
#page.board #fh5co-header h3{
	color:#FFF;
	font-size:20px;
	font-weight: 800;
	line-height:80px;
}
#page.board .table{
	table-layout: fixed;
}
#page.board .table *{
	font-size:14px;
}
#page.board .table tr{
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

#page.board .table tr .content{
	min-height:150px;
	display: grid;
}
#page.board .attach-file{
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline;
}
#page.board #fh5co-pw-chk .table :is(th, td){
	vertical-align:middle !important;
}
#page.board .form-control {
	border: 1px solid rgba(0, 0, 0, 0.1);
	height: 30px;
	width: 200px;
    display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding:2px 10px;
	background:#FFF;
}
/* :is(.qna, .notice, .consulte,.privacy)#page header{
  background:#000000b3;
} */

:is(.qna, .notice, .consulte,.privacy)#page #fh5co-header{
	height: 120px;
	background:#002052;
	margin-bottom:20px;
    margin-top:86px;
}
:is(.qna,.notice,.consulte)#page #fh5co-header.pop{
	height: 150px;
    margin-top:0;
	margin-bottom: 30px !important;
}
:is(.qna,.notice,.consulte,.privacy)#page #fh5co-header .container,
:is(.qna,.notice,.consulte,.privacy)#page #fh5co-header .container .row,
:is(.qna,.notice,.consulte,.privacy)#page #fh5co-header .container .row > div{
	height:100%;
}
:is(.qna,.notice,.consulte,.privacy)#page #fh5co-header .container .row > div{
	display:flex;
	align-items: flex-end;
	justify-content: center;
}
:is(.qna,.notice,.consulte,.privacy)#page #fh5co-header h3{
	color:#FFF;
	font-size: 24px;
	font-weight: 600;
}
/*:is(.qna,.notice,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte) .btn.btn-black {
	background: #333;
	color: #fff;
	border: 2px solid #333;
	padding: 0 9px;
	margin-right: 0;
}*/


@media screen and (max-width: 768px) {
	:is(.qna,.notice,.consulte,.privacy)#page #fh5co-header{
		height: 120px  !important;
	}
	:is(.qna,.notice,.consulte,.privacy)#page #fh5co-header .container .row > div{
		align-items: start;
		padding-top: 35px;
	}
	:is(.qna,.notice,.consulte,.privacy)#page #fh5co-header.qna-write-header {
		height: 140px !important;
	}
	/*.m-pd5 {
		padding: 0 5px;
	}*/
}
:is(.qna,.notice,.consulte)#page :is(#fh5co-qna,#fh5co-notice,#fh5co-consulte) *{
	font-size:12px;
	font-weight: 500;
}
:is(.qna,.notice,.consulte)#page :is(#fh5co-qna,#fh5co-notice,#fh5co-consulte) label{
	margin-top:4px;
	margin-bottom:0;
	vertical-align: middle;
}
:is(.qna,.notice,.consulte)#page :is(#fh5co-qna,#fh5co-notice,#fh5co-consulte) input[type=checkbox]{
	margin-top:0;
	vertical-align: middle;
}
:is(.qna,.notice,.consulte)#page :is(#fh5co-qna,#fh5co-notice,#fh5co-consulte) strong{
	font-weight: 900;
}
:is(.qna,.notice,.consulte)#page :is(#fh5co-qna,#fh5co-notice,#fh5co-consulte).list .table th{
	/*font-weight: 900;
	padding: 9px 8px 5px;
	background: #f1f1f1;
	border-bottom: 2px solid #333;
	border-top: 2px solid #333;*/
	border-top: 2px solid #ddd;
}
:is(.qna,.notice,.consulte)#page :is(#fh5co-qna,#fh5co-notice,#fh5co-consulte) .table tbody tr:last-of-type{
	border-bottom: 1px solid #ddd;
}
:is(.qna,.notice,.consulte)#page :is(#fh5co-qna,#fh5co-notice,#fh5co-consulte) .table tbody td .content{
	min-height:150px;
}

/********** pw chk css *************/
:is(.qna)#page #fh5co-pw-chk .table th{
	width:30%;
	vertical-align: middle;
}
:is(.qna)#page #fh5co-pw-chk .table td{
	/*width:68%;*/
	vertical-align: middle;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 380px;
	padding: 6px 10px 8px;
}
:is(.qna)#page #fh5co-pw-chk .table td input{
	width:250px;
	font-size: 13px;
	height: 25px;
	float:left;
	border: 1px solid #a1a1a1;
	padding: 12px 10px 9px;
	font-weight: 300;
}
:is(.qna)#page :is(#fh5co-pw-chk) .table td :is(input)::placeholder {
	color: #cccccc;
}

:is(.qna)#page #fh5co-pw-chk .table td button{
	margin-top: 0 !important;
	margin-left:10px;
	float:left;
/*	height: 30px;
	width:80px;*/
	border: 1px solid #797979;
	/*font-size: 12px;*/
}
:is(.qna)#page #fh5co-pw-chk .table td div.form-title {
	padding-right: 23px;
	font-size: 14px;
	font-weight: 900;
	float: left;
}

:is(.qna)#page :is(#fh5co-pw-chk) :is(a, button).btn-common {
	margin-top: 8px;
	font-family: "GmarketSans", "NanumSquare", Arial, sans-serif !important;
	font-size: 14px;
	padding: 6px 21px 3px !important;
	border: 1px solid #666;
	color: #666;
	font-weight: 500;
	word-spacing: 13px;
	line-height: 1;
}
:is(.qna)#page #fh5co-pw-chk .table td button {
	margin-left: 10px;
	float: left;
	border: 1px solid #797979;
}

@media screen and (max-width:768px) {
	:is(.qna)#page #fh5co-pw-chk .table td {
		min-height: 300px;
		padding: 3px 0 0;
	}
	:is(.qna)#page #fh5co-pw-chk .table td div.form-title {
		padding: 0;
		margin: 0 10px 0 0;
		font-size: 12px;
		line-height: 24px;
	}
	:is(.qna)#page #fh5co-pw-chk .table td input {
		width: 185px;
		padding: 6px 5px 4px;
		font-size: 11px;
		height: 24px;
	}
	:is(.qna)#page :is(#fh5co-pw-chk) :is(a, button).btn-black {
		margin-left: 7px !important;
		margin-right: 0 !important;
		float: left;
		margin-bottom: 0 !important;;
	}
	:is(.qna)#page :is(#fh5co-pw-chk) :is(a, button).btn-common {
		font-size: 12px;
		padding: 6px 21px 4px !important;
	}
	:is(.qna)#page :is(#fh5co-pw-chk) :is(a, button).btn-white {
		margin: 8px 5px 0 5px;
	}
}

/***********qna write css**************/
:is(.qna,.consulte)#page :is(#fh5co-qna,#fh5co-consulte).write .table th span.star {
	padding-left: 3px;
	font-size: 14px;
	color: #0097e5;
}
:is(.qna,.consulte)#page :is(#fh5co-qna,#fh5co-consulte).write .table :is(th, td) {
	/* border-top: none; */
  border: none !important;
  background-color: transparent !important;
}

:is(.qna)#page #fh5co-qna.write .table td input:not([type=checkbox]),
:is(.consulte)#page #fh5co-consulte.write .table td input:not([type=checkbox]){
	width:100%;
	font-size: 13px;
	height: 30px;
	float:left;
	border: 1px solid #a1a1a1;
	padding: 10px;
	font-weight: 500;
}
:is(.qna)#page #fh5co-qna .table td input[type=file],
:is(.consulte)#page #fh5co-consulte .table td input[type=file]{
	padding-top:2px;
}
:is(.qna)#page #fh5co-qna .table td textarea,
:is(.consulte)#page #fh5co-consulte .table td textarea{
	width:100%;
	font-size: 13px;
	height: 100%;
	min-height:200px;
	float:left;
	border: 1px solid #a1a1a1;
	padding: 10px;
	font-weight: 500;
}
:is(.qna)#page #fh5co-qna.write .table td input::placeholder,
:is(.consulte)#page #fh5co-consulte.write .table td input::placeholder,
:is(.qna)#page #fh5co-qna .table td textarea::placeholder,
:is(.consulte)#page #fh5co-consulte .table td textarea::placeholder{
	font-weight: 300;
}

:is(.qna, .consulte)#page :is(#fh5co-qna, #fh5co-consulte).write .table td :is(input, textarea)::placeholder {
	color: #cccccc;
}

/***********consulte write css****************/
:is(.consulte)#page #fh5co-consulte.view .box{
	margin:10vh 0;
	display:inline-block;
	width:700px;
	min-width:40%;
	max-width:100%;
	border:0px solid #002053a6;
	border-radius: 30px;
}
:is(.consulte)#page #fh5co-consulte.view .des1{
	margin:20px auto 20px auto;
	font-size: 34px;
	font-weight: 600;
}
:is(.consulte)#page #fh5co-consulte.view .des2{
	font-size: 20px;
}
:is(.consulte)#page #fh5co-consulte.view .des3{
	font-size: 20px;
}
:is(.consulte)#page #fh5co-consulte.view a.go-home{
	display:flex;
	align-items: center;
  justify-content: center;
  font-size: 18px;
	border:1px solid #e4007f;
	background:#FFF;
	width:400px;
	margin:20px auto;
  padding:10px 30px;
	border-radius: 5px;
	box-shadow: 0px 5px 0px 0px #e4007f;
	transition: all 0.2s;
}
:is(.consulte)#page #fh5co-consulte.view a.go-home img{
    margin-top: -5px;
}
@media screen and (max-width:768px){
  :is(.consulte)#page #fh5co-consulte.view a.go-home{
    width: 100%;
    gap: 5px;
  }
  :is(.consulte)#page #fh5co-consulte.view a.go-home img{
    margin: 0;
  }
}
/*******************qna notice consulte list css*******************/
:is(.notice, .qna, .consulte, .privacy)#page #fh5co-header{
	background: #fff;
	height: 200px;
}
:is(.notice, .qna, .consulte, .privacy)#page #fh5co-header h3{
	color: #0097e5;
	margin: 0 0 10px 0;
	font-size: 28px;
	font-weight: 900;
}
:is(.notice, .qna, .consulte, .privacy)#page #fh5co-header .img-des span.block {
	display: none;
}
:is(.notice, .qna, .consulte, .privacy)#page #fh5co-header .bd-bt {
	border-bottom: 2px solid #e4007f;
}
:is(.notice)#page #fh5co-header img {
	/*width: 47%;*/
	width: 48%;
}
:is(.notice, .qna)#page .ft-Gmsans {
	font-size: 13px !important;
}

:is(.qna,.notice,.consulte)#page :is(#fh5co-qna,#fh5co-notice,#fh5co-consulte,#fh5co-pw-chk) .table.bd-top.bd-bt {
	/* border-top: 1px solid #333 !important; */
	border-bottom: 1px solid #333 !important;
	/*table-layout: fixed;*/
	margin-bottom: 5px;
}
:is(.notice, .qna)#page :is(#fh5co-notice, #fh5co-qna).list .table th {
	font-size: 14px;
	font-weight: 900;
	line-height: 1;
	background-color: #facce5;
	/* border-top: 1px solid #333; */
	/* border-bottom: 1px solid #333; */
  border: 1px solid #333;
	padding: 12px 10px 10px;
	letter-spacing: 0.15em;
}
:is(.notice, .qna)#page :is(#fh5co-notice, #fh5co-qna).list .table td {
	font-size: 13px;
	padding: 10px 10px 7px;
	line-height: 20px;
	vertical-align: middle;
}
:is(.notice, .qna)#page :is(#fh5co-notice, #fh5co-qna).list .table td a {
	font-size: inherit;
}

:is(.qna, .notice, .consulte)#page .pg-num .pagination {
	/*margin: 0;*/
	margin: 4px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
:is(.qna, .notice, .consulte)#page .pg-num .pagination :is(span, a) {
	margin: 0 5px;
  font-size: 12px;
  width: 25px;
  height: 25px;
  padding: 5px 6px !important;
  line-height: unset;
  background: none;
  border: none;
  border-radius: 0 !important;
  cursor: pointer;
}
:is(.qna, .notice, .consulte)#page .pg-num .pagination > .active > span{
  color: #e4007f;
  /* font-weight: 700 !important; */
}
:is(.qna, .notice, .consulte)#page .pg-num .pagination span.current {
	color: #0097e5;
	font-weight: 900 !important;
}

:is(.qna)#page #fh5co-header .img-right-box img {
	width: 57%;
	margin-left: auto;
}
:is(.consulte)#page #fh5co-header .img-right-box img {
	width: 50%;
	margin-left: auto;
}

:is(.qna,.notice)#page .list tr.no-content td .empty {
	min-height: 300px;
}

:is(.qna)#page :is(#fh5co-qna).list .flex-wrap.flex-align-top {
	align-items: start;
}
:is(.qna)#page :is(#fh5co-qna).list .flex-wrap.flex-align-center {
	align-items: center;
}
:is(.qna)#page :is(#fh5co-qna).list .flex-wrap.flex-align-end {
	align-items: end;
}

:is(.qna)#page :is(#fh5co-qna).list .flex-wrap.justify-end {
	justify-content: end !important;
}

:is(.qna)#page :is(#fh5co-qna).list .flex-wrap input {
	max-width: 100px;
	padding: 5px;
	border: none;
	height: 20px;
}
:is(.qna)#page :is(#fh5co-qna).list .flex-wrap.search-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
	margin-top: -2px;
}
:is(.qna)#page :is(#fh5co-qna).list .flex-wrap.search-box > div{
  display: flex;
}
.bd-ddd {
	border: 1px solid rgba(0, 0, 0, 0.1);
}
:is(.qna)#page :is(#fh5co-qna).list .select-box {
	padding: 3px 9px;
	width: 90px;
	border: none;
	font-weight: 500;
	letter-spacing: 0.15em;
	appearance: none;
	background: url('/images/front/select_arrow.png');
	background-repeat: no-repeat;
	background-position: top 0 right 0;
	background-size: 22px 22px;
	background-color: #fff;
	font-family: "GmarketSans", "NanumSquare", Arial, sans-serif !important;
}
:is(.qna)#page :is(#fh5co-qna).list .icon-box:before {
	display: none;
}
:is(.qna)#page :is(#fh5co-qna).list .icon-box button {
	background-color: #333;
	padding: 2px 5px 0;
	margin-left: 5px;
	border-radius: 3px;
	border: 1px solid #333;
}
:is(.qna)#page :is(#fh5co-qna).list .icon-box button i {
	color: #fff;
	line-height: 20px;
}

@media screen and (max-width: 768px) {
	:is(.notice, .qna, .consulte)#page #fh5co-header {
		margin-top: 92px;
		margin-bottom: 0 !important;
	}
	:is(.notice, .qna, .consulte)#page #fh5co-header .pl0.pr0.bd-bt {
		margin: 0 10px;
		width: calc(100vw - 20px);
		padding-bottom: 25px !important;
	}
	:is(.notice, .qna, .consulte)#page #fh5co-header h3{
		font-size: 24px;
		margin-bottom: 12px;
	}
	:is(.notice,.qna,.consulte)#page #fh5co-header .img-des {
		line-height: 1;
		font-size: 14px;	/*옥소리와 폰트사이즈 다름, 3줄 만들어짐*/
	}
	:is(.qna)#page #fh5co-header .img-des {
		letter-spacing: -0.05em;
	}
	:is(.consulte)#page #fh5co-header .img-des {
		letter-spacing: -0.07em;
	}
	:is(.notice, .qna, .consulte)#page #fh5co-header .img-des span.block {
		display: block;
		margin-top: 4px;
	}
	:is(.notice)#page #fh5co-header img {
		width: 78%;
		margin-right: 9px !important;
	}
	:is(.qna)#page #fh5co-header .img-right-box img {
		width: 91%;
		margin-right: 9px !important;
		margin-top: 3px;
	}
	:is(.qna)#page #fh5co-header.qna-write-header .img-right-box img {
		width: 91%;
		margin-right: 9px !important;
		margin-top: 25px;
	}
	:is(.consulte)#page #fh5co-header .img-right-box img {
		width: 80%;
		margin-right: 9px !important;
		margin-top: 4px;
	}
	:is(.notice, .qna, .consulte)#page #fh5co-header :is(.mb35, .mb32) {
		margin-bottom: 0 !important;
		/*margin-top: 5px;*/
	}
	/*:is(.notice)#page #fh5co-header :is(.ml20) {
		margin-left: 5px !important;
	}
	:is(.notice)#page #fh5co-header :is(.mr30) {
		margin-right: 5px !important;
	}*/

	:is(.notice, .qna, .consulte)#page .col-wrap {
		padding: 0 10px !important;
	}
	:is(.notice, .qna)#page :is(#fh5co-notice, #fh5co-qna).list .ft-Gmsans {
		font-size: 11px !important;
		padding-left: 0 !important;
	}
	:is(.notice, .qna)#page :is(#fh5co-notice, #fh5co-qna) .write-btn-wrap {
		padding-right: 0 !important;
	}

	:is(.notice, .qna, .consulte)#page > :is(#fh5co-notice, #fh5co-qna, #fh5co-consulte, #fh5co-pw-chk) {
		clear: both;
		padding: 32px 0;
	}

	:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).list .table {
		table-layout: fixed;
	}
	:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).list .table th {
		font-size: 12px;
		padding: 7px 10px 5px;
		/*border: 1px solid red;*/
	}
	:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).list .table td {
		font-size: 11px;
		line-height: 15px;
		height: 56px;
		padding: 6px 10px 4px;
		/*border: 1px solid red;*/
	}

	:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).list .table .mw50 {
		width: 50px;
	}
	.mnone {
		display: none !important;
	}
	:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).list .table .mw80 {
		width: 80px;
	}
	:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).list .table .mw85 {
		width: 85px;
	}
	:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).list .table .mw60 {
		width: 60px;
	}
	:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).list .table .mw62 {
		width: 62px;
	}
	:is(.qna, .notice, .consulte)#page .pg-num-left {
		text-align: left !important;
	}
	:is(.qna, .notice, .consulte)#page .pg-num .pagination {
		margin: 2px 0 0 0;
	}

	/*qna list mobile css*/
	:is(.qna)#page :is(#fh5co-qna).list .table th {
		padding: 7px 10px 5px;
		/*border: 1px solid red;*/
	}
	.qna#page #fh5co-qna.list .flex-wrap input {
		max-width: 290px;
	}
	.qna#page #fh5co-qna.list .select-box {
		width: 75px;
		padding: 5px 6px 5px 7px;
		letter-spacing: normal;
	}
	:is(.qna)#page :is(#fh5co-qna).list .icon-box button {
		margin-left: 3px;
	}
}

/*notice qna view write css*/
:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).view * {
	letter-spacing: -0.03em;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view, .write) .table th {
	font-size: 14px;
	line-height: 1;
	font-weight: 900;
	padding: 10px 8px 8px 10px;
	vertical-align: middle;
  border: 1px solid #aaa;
  background-color: #facce5;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view, .write) .table th.w6 {
	width: 6%;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view,.write) .table th.w6-3 {
	width: 6.3%;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view,.write) .table th.w6-5 {
	width: 6.5%;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view, .write) .table th.w7 {
	width: 7%;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view, .write) .table th.ws1 {
	word-spacing: 1px;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view, .write) .table th.ws2 {
	word-spacing: 2px;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view, .write) .table th.ws20 {
	word-spacing: 20px;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view, .write) .table th.ws21 {
	word-spacing: 21px;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view, .write) .table th.ws22 {
	word-spacing: 22px;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view, .write) .table th.align-top {
	vertical-align: top !important;
}

:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view, .write) .table td {
	font-size: 13px;
	padding: 10px 10px 7px 8px;
	line-height: 1;
	letter-spacing: normal;
	vertical-align: middle;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view, .write) .table td.w27 {
	width: 27%;
}
:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view, .write) .table td.w40 {
	width: 40%;
}

:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).view .table td img {
	display: block;
	max-width: 100%;
	height: auto;
}
:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).view .table td div.content {
	min-height: 350px;
	font-size: inherit;
	padding: 0;
	line-height: 15px;
	letter-spacing: normal;
}
:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).view .table td div.content :is(div, p) {
	font-size: inherit;
	padding: 0;
	line-height: inherit;
	letter-spacing: normal;
}
:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna).view .table td ul {
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

:is(.notice, .qna,.consulte)#page :is(#fh5co-notice, #fh5co-qna,#fh5co-consulte):is(.view, .list, .write) :is(a, button).btn-common {
	font-family: "GmarketSans", "NanumSquare", Arial, sans-serif !important;
	margin: 8px 5px 0 5px !important;
	font-size: 14px;
	padding: 6px 21px 3px !important;
	border: 1px solid #666;
	color: #666;
	font-weight: 500;
	word-spacing: 13px;
	line-height: 1;
}
:is(.notice, .qna, .consulte)#page :is(#fh5co-notice, #fh5co-qna, #fh5co-pw-chk,#fh5co-consulte) :is(a, button).btn-common.btn-black {
	background-color: #000;
	color: #fff;
}
:is(.notice, .qna,.consulte)#page :is(#fh5co-notice, #fh5co-qna, #fh5co-pw-chk,#fh5co-consulte) :is(a, button).btn-common.btn-white {
	background-color: #fff;
}
:is(.notice, .qna)#page :is(#fh5co-notice, #fh5co-qna):is(.view, .list) :is(a, button).btn-common.btn-list-write {
	padding: 5px 9px 3px !important;
	margin: 0 !important;
}
:is(.notice, .qna)#page :is(#fh5co-notice, #fh5co-qna):is(.view, .list) :is(a, button).btn-common.btn-up {
	margin: 0 0 7px 0 !important;
}

@media screen and (max-width: 768px) {
	:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view,.write) table.table tr {
		width: calc(100vw - 20px);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view,.write) table.table tr.flex-wrap {
		flex-wrap: wrap;
	}
	:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view,.write) table.table tr.flex-align-top {
		align-items: start;
	}
	:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna):is(.view) table.table tr:nth-child(1) :is(th,td) {
		border-top: none;
	}
	:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna):is(.view) table.table tr:last-child {
		border-bottom: none;
	}
	:is(.notice,.qna)#page :is(#fh5co-notice,#fh5co-qna):is(.view) table.table tr:last-child :is(th,td) {
		border-bottom: none;
	}
	:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view,.write) .table th {
		word-break: auto-phrase;
		font-size: 12px;
		display: block;
		width: 17% !important;
		padding: 10px 4px 9px 5px !important;
		text-align: left !important;
	}
	:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view,.write) .table th.ws2 {
		word-spacing: 1px;
	}
	:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view,.write) .table th.ws20 {
		word-spacing: 17px;
	}
	:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view,.write) .table th.ws22 {
		word-spacing: 17px;
	}
	:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.view,.write) .table td {
		font-size: 11px;
		float: right;
		width: 83% !important;
		display: block;
		padding: 9px 5px 9px 4px !important;
		line-height: 13px;
	}

	:is(.notice,.qna,.consulte)#page :is(#fh5co-notice,#fh5co-qna,#fh5co-consulte):is(.list,.view,.write) :is(a, button).btn-common {
		font-size: 12px;
		padding: 6px 21px 4px !important;
	}

	/*qna.write consulte mobile css*/
	:is(.qna,.consulte)#page :is(#fh5co-qna,#fh5co-consulte):is(.write) .table tr td {
		padding: 5px 5px 5px 4px !important;
	}
	:is(.qna,.consulte)#page :is(#fh5co-qna,#fh5co-consulte):is(.write) .table tr:nth-child(1) td:nth-child(2) {
		padding: 10px 5px 5px 4px !important;
	}
	:is(.qna,.consulte)#page :is(#fh5co-qna,#fh5co-consulte):is(.write) .table tr:nth-last-child(1) td:nth-child(2) {
		padding: 5px 5px 10px 4px !important;
	}
	:is(.qna,.consulte)#page :is(#fh5co-qna,#fh5co-consulte):is(.write) .table tr th {
		padding: 5px 4px 5px 5px !important;
	}
	:is(.qna,.consulte)#page :is(#fh5co-qna,#fh5co-consulte):is(.write) .table tr:nth-child(1) th:nth-child(1) {
		padding: 10px 4px 5px 5px !important;
	}
	:is(.qna,.consulte)#page :is(#fh5co-qna,#fh5co-consulte):is(.write) .table tr:nth-last-child(1) th:nth-child(1) {
		padding: 5px 4px 10px 5px !important;
	}
}
/********************consulte pop css**************************/
:is(.consulte)#page #fh5co-header.pop {
	height: 150px;
	margin-bottom: 30px !important;
	margin-top: 0;
}
:is(.consulte)#page #fh5co-header.pop :is(.mb32, .mb35) {
	margin-bottom: 16px !important;
}
:is(.qna, .consulte, .notice)#page #fh5co-header.pop .img-des {
	font-size: 14px;
	line-height: 18px;
}
:is(.consulte)#page #fh5co-header.pop .img-right-box img {
	width: 70%;
	margin-right: 18px !important;
}

:is(.consulte)#page :is(#fh5co-consulte).write.pop th.w6-5 {
	width: 11%;
}
:is(.qna, .consulte)#page #fh5co-consulte.write.pop table :is(td) {
	padding: 6px 10px 6px 8px;
}
:is(.qna, .consulte)#page #fh5co-consulte.write.pop table :is(th) {
	padding: 6px 8px 6px 10px;
}

body #popup {
    position:absolute;
    top: 120px;
    left:50px;
    z-index :90;
}
body #popup .container{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}
body #popup .container .popup-item{
}
body #popup .container .popup-item img{
    max-width:100%;
}

body #popup .container .footer{
    height: 30px;
    line-height: 30px;
    background: #000;
    display:flex;
    justify-content: space-between;
    padding-left: 10px;
    color:#7e7e7e;
    font-weight:800;
    font-size:12px;
    overflow:hidden;
}
body #popup .container .footer span{
    font-size:14px;
    color:#cdcdcd;
}
body #popup .container .footer .btn-cookie{
    cursor:pointer;
}
body #popup .container .footer .btn-close{
    width:30px;
    height:30px;
    font-size:18px;
    line-height:30px;
    text-align:center;
    background: #393939;
    color:#cdcdcd;
    cursor:pointer;
}


@media screen and (max-width: 786px) {
    body #popup {
        top:130px;
        left:0;
    }

    body #popup .popup-item{
        max-width:80% !important;
        height:unset !important;
    }
    body #popup .popup-item img{
        max-width:100% !important;
        height:unset !important;
    }
    body #popup .popup-item .footer{
        max-width:100% !important;
    }
}

.align-center{
  align-items: center !important;
}
.mb20{
  margin-bottom: 20px;
}
.m0{
  margin: 0px;
}
.ft42{
  font-size: 42px !important;
}
.ft18{
  font-size: 18px;
}
.ft-bold-pink{
  font-weight: 900;
  color: #e4007f !important;
}
@media screen and (max-width: 786px){
  .ft42{
    font-size: 24px !important;
  }
  .ft18{
    font-size: 12px;
  }
  .m-pb20{
    margin-bottom: 20px;
  }
}


/*product 공통-----------------------------------------*/

section.contents:not(.is-bg)+section.contents:not(.is-bg):before {
  content:'';
  display:block;
  padding-top: 80px;
}
section.contents:not(.is-bg)+section.contents:not(.is-bg):after {
  content:'';
  display:block;
  padding-bottom: 80px;
}
section.contents.is-bg+section.contents:not(.is-bg):before {
  content:'';
  display:block;
  padding-top:80px;
}
section.contents.is-bg+section.contents:not(.is-bg):after {
  content:'';
  display:block;
  padding-bottom:80px;
}
section.contents:before {
  content:'';
  display:block;
  /* margin-top:70px; */
  padding-top: 0px;
}
section.contents:after {
  content:'';
  display:block;
  padding-bottom: 80px;
}
/* section.contents.is-bg:before {
  content:'';
  display:block;
  margin-top:70px;
  padding-top:50px;
}
section.contents.is-bg:after {
  content:'';
  display:block;
  padding-bottom:40px;
} */

section.top-banner+section.contents:before {
  content:'';
  padding-top:100px;
  display:block;
}
@media screen and (max-width: 768px){
  section.top-banner+section.contents:before{
    padding-top: 30px;
  }
  section.contents:not(.is-bg)+section.contents:not(.is-bg):before{
    padding-top: 50px;
  }
  section.contents:not(.is-bg)+section.contents:not(.is-bg):after{
    padding-bottom: 0px;
  }
  section.contents.is-bg+section.contents:not(.is-bg):before{
    padding-top: 30px;
  }
  section.contents.is-bg+section.contents:not(.is-bg):after{
    padding-bottom: 0px;
  }
  section.contents.is-bg:before{
    padding-top: 30px;
    margin-top: 30px;
  }
  section.contents.is-bg:after{
    padding-bottom: 30px;
  }
  /* section.contents:before{
    padding-top: 30px;
  } */
  section.contents:after{
    padding-bottom: 0;
  }
}

:is(header,section.contents) br:is(.tablet, .m){
    display:none !important;
}
:is(header,section.contents) br:not(.pc,.tablet, .m){
    content: "";
    display:block !important;
    font-size: 0;
    margin:0;
}
@media screen and (max-width: 992px) {
    :is(header, section.contents) br:is(.pc, .m){
        display:none !important;
    }
    :is(header, section.contents) br:not(.pc,.tablet, .m),
    :is(header, section.contents) br.tablet{
        display:block !important;
    }
}
@media screen and (max-width: 768px) {
    :is(header, section.contents) br:is(.pc, .tablet){
        display:none !important;
    }

    :is(header, section.contents) br:not(.pc,.tablet, .m),
    :is(header,section.contents) br.m{
        display:block !important;
    }
}

section.contents .title-box {
  padding-bottom:28px;
  word-break: keep-all;
}
section.contents .display-flex.flex-direction-row-reverse .title-box {
  padding-left:78px;
}
section.contents .display-flex.flex-direction-row-reverse .prevent2-text{
  padding-left:78px;
}
section.contents .title-box .sub{
  font-size:30px;
  margin-bottom: 6px;
}
section.contents .title-box .title{
  font-size:55px;
  color:#0071cd;
  font-weight:900;
  margin:0;
  text-align: left;
}
section.contents .title-box-op{
  margin-bottom: 50px;
}
section.contents .title-box-op .sub{
  font-size:24px;
  margin-bottom: 10px;
  color:#e4007f;
  font-weight: 800;
}
section.contents .title-box-op .title{
  font-size:55px;
  font-weight:900;
  margin-bottom: 30px;
  /* margin-bottom: 0px; */
  text-align: left;
}
section.contents .title-box-op .title-info{
  font-size: 24px;
  font-weight: 600;
  word-break: keep-all;
}
section.contents .title-box .title *{
  font-size:inherit;
  color:inherit;
  font-weight:inherit;
  font-family:inherit;
}
section.contents .title-box .title .ft-black {
  color:#323232 !important;
}
section.contents .title-box .title .small{
  font-size:24px;
  font-weight:500;
}
section.contents .title-box .des{
  margin-top:40px;
  font-size:16px;
  font-weight:500;
}
@media screen and (max-width: 768px){
  section.contents .title-box{
    padding-bottom: 10px;
  }
  section.contents .title-box .sub{
    font-size: 15px;
    margin-bottom: 2px;
  }
  section.contents .title-box .title{
    font-size: 30px;
  }
  section.contents .title-box .title .small{
    font-size: 15px;
  }
  section.contents .title-box-op{
    margin-bottom: 15px;
  }
  section.contents .title-box-op .sub{
    font-size:11px;
    margin-bottom: 4px;
  }
  section.contents .title-box-op .title{
    font-size:20px;
    margin-bottom: 0px;
    padding-bottom: 5px;
  }
  section.contents .title-box-op .title-info{
    font-size: 12px;
  }
  section.contents .display-flex.flex-direction-row-reverse .title-box{
    padding-left: 30px;
  }
  section.contents .display-flex.flex-direction-row-reverse .prevent2-text{
    padding-left: 30px;
  }
  section.contents .title-box .des{
    margin-top: 6px;
    font-size: 11px;
  }
}
@media screen and (max-width: 500px){
  section.contents .title-box .sub{
    font-size: 11px;
  }
  section.contents .title-box .title{
    font-size: 20px;
  }
  section.contents .title-box .title .small{
    font-size: 10px;
  }
  section.contents .display-flex.flex-direction-row-reverse .title-box{
    padding-left: 15px;
  }
  section.contents .display-flex.flex-direction-row-reverse .prevent2-text{
    padding-left: 15px;
  }
}
section h4{
  font-weight: 900;
  margin: 0;
  word-break: keep-all;
}
section p{
  font-weight: 500;
  margin: 0;
  word-break: keep-all;
}

section.contents .title-box+.slide-btn {
  position:relative;
  display:inline-flex;
  flex-wrap: wrap-reverse;
  padding-bottom:16px;
}
section.contents .title-box+.slide-btn :is(.swiper-button-prev, .swiper-button-next){
  position:relative;
  top:unset !important;
  left:unset !important;
  right:unset !important;
  bottom:unset !important;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background:unset;
  margin:0 !important;
  border-radius: unset;
}
section.contents .title-box+.slide-btn :is(.swiper-button-prev, .swiper-button-next):after{
  content:unset;
}
section.contents .title-box+.slide-btn .swiper-button-prev {
  transform: translateX(-30%);
  margin-right: 30px !important;
}
section.contents .title-box+.slide-btn .swiper-button-next {
  transform: translateX(30%);
}
section.contents .title-box+.slide-btn :is(.swiper-button-prev, .swiper-button-next) img{
  width: 15px;
}
@media screen and (max-width: 768px){
  section.contents .title-box+.slide-btn{
    padding-bottom: 0;
  }
  section.contents .title-box+.slide-btn .swiper-button-prev {
    margin-right: 0px !important;
  }
  section.contents .title-box+.slide-btn :is(.swiper-button-prev, .swiper-button-next) img{
    width: 10px;
  }
}



/*--------------------------------------------------------*/
section.contents .swiper-box {
  position: relative;
  display:flex;
}
section.contents .swiper-box .swiper {
  margin:0 50px;
}
@media screen and (max-width: 768px){
  section.contents .swiper-box .swiper{
    margin: 0 21px;
  }
}
section.contents .swiper-box :is(.swiper-button-next, .swiper-button-prev):after {
  content:unset;
}
section.contents .swiper-box :is(.swiper-button-next, .swiper-button-prev) {
  position:absolute;
  top:0;
  width:40px;
  display:flex;
  align-items: center;
  height:100%;
  margin:0;
  z-index:10;
}
section.contents .swiper-box .swiper-button-next {
  right:0;
}
section.contents .swiper-box .swiper-button-next img{
  margin:0 0 0 auto;
}
section.contents .swiper-box .swiper-button-prev {
  left:0;
}
section.contents .swiper-box .swiper-button-prev img{
  margin:0 auto 0 0;
}
@media screen and (max-width: 768px){
  section.contents .swiper-box .swiper-button-prev img{
    margin: 0 26px 0 0;
    height: 40px;
  }
  section.contents .swiper-box .swiper-button-next img{
    margin:0 0 0 26px;
    height: 40px;
  }
}

/*--------------------------------------------------------*/
/* 기본 설정: flip-container와 flip-card의 스타일 */
section.contents .grid-item.flip-container {
  display: inline-block;
  /* height: 560px; */
  width: 100%;
  aspect-ratio: 4 / 5.6; /* 너비와 높이 비율 설정 */
  perspective: 1000px; /* 3D 변환 효과를 위해 */
}

section.contents .grid-item .flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  color: white;
  line-height: 560px;
  transform-style: preserve-3d; /* 3D 변환을 유지 */
  transform: rotateY(0deg); /* 초기 상태는 앞면 */
  transition: transform 0.5s ease; /* 회전 애니메이션 */
}

/* 마우스 오버 시 180도 회전 */
section.contents .grid-item .flip-card:hover {
  transform: rotateY(180deg); /* 마우스 오버 시 180도 회전 */
}

/* 앞면 (front) */
section.contents .grid-item .flip-card .front {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 뒤집힌 면은 보이지 않도록 */
  background-size: cover; /* 배경 이미지를 꽉 차게 설정 */
  z-index: 2; /* 앞면이 우선 보이도록 설정 */
}

/* 뒷면 (back) */
section.contents .grid-item .flip-card .back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden; /* 뒤집힌 면은 보이지 않도록 */
  background-size: cover; /* 배경 이미지를 꽉 차게 설정 */
  transform: rotateY(180deg); /* 뒷면을 180도 회전시켜 보이게 설정 */
  z-index: 1; /* 뒷면이 뒤에 위치하도록 설정 */
}
/*--------------------------------------------------------*/

/* section.contents .add-vat {
  margin-top: calc(-1em - 4px);
} */
section#tel-box:before {
  margin-top:11%;
  padding-top:0;
}
section#tel-bottom:before{
  padding-top:0;
}
section:is(#tel-box, #tel-bottom):after{
  padding-bottom:0;
}
section#tel-box img {
  margin-top: -11.5%;
}
section#tel-bottom {
  background: #0172ce;
}
section#tel-bottom img {
  margin:0 -25%;
  width:150%;
  max-width:150%;
}
@media screen and (max-width: 1200px){
  section#tel-box:before{
    margin-top: 12%;
  }
}
@media screen and (max-width: 768px){
  section#tel-box:before{
    margin-top: 23%;
  }
  section.contents .add-vat{
    font-size: 10px;
  }
  section#tel-box img{
    margin-top: -21%;
  }
}

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

section.contents .accordion-list {
  margin:0;
  padding:0;
  border-top: 1px solid #333;
}
section.contents .accordion-list .accordion-item {
  border-bottom: 1px solid #ddd;
}
section.contents .accordion-list .accordion-item .accordion-link {
  display: block;
  position: relative;
  padding: 20px;
  border-bottom: 1px solid #ddd;
  transition: all 0.3s;
}
section.contents .accordion-list .accordion-item.active .accordion-link {
  background-color: #fff;
}
section.contents .accordion-list .accordion-item .accordion-link::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width:28px;
  height:16px;
  background-image: url('/images/front/product/accordion_arrow.png');
}
section.contents .accordion-list .accordion-item.active .accordion-link::before {
  transform: translateY(-50%) rotate(180deg);
}
section.contents .accordion-list .accordion-name {
  position: relative;
  display:flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(100% - 50px);
  font-size: 24px;
  word-break: keep-all;
  font-weight: 900;
}
section.contents .accordion-list .accordion-name p{
  font-weight: 900;
  width: fit-content;
}
section.contents .accordion-list .accordion-name::before {
  content:'';
  margin-right:10px;
  width:35px;
  height:35px;
  background-image:url('/images/front/product/qna_icon.png');
  background-repeat:no-repeat;
  background-position:center;
  background-size:100%;
}
#page.xray section.contents .accordion-list .accordion-name::before{
  background-image:url('/images/front/product/info_icon.png');
}
section.contents .accordion-list .accordion-item .accordion-desc {
  display: none;
  padding: 40px 26px 30px 26px;
  background-color: #fcfcfc;
  color: #777;
  font-size:20px;
  word-break: keep-all;
  line-height: normal;
}
@media screen and (max-width: 768px){
  section.contents .accordion-list .accordion-name{
    font-size: 14px;
  }
  section.contents .accordion-list .accordion-item .accordion-desc{
    font-size: 14px;
    padding: 20px 5px 10px 5px;
  }
  section.contents .accordion-list .accordion-name::before{
    width: 24px;
    height: 30px;
  }
  section.contents .accordion-list .accordion-item .accordion-link{
    padding: 3px 5px;
  }
  section.contents .accordion-list .accordion-item .accordion-link::before{
    right: 1%;
    width: 14px;
    height: 8px;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

/* ***************  table[공통] **************************** */
table td{
  border: 1px solid #aaa !important;
}
#page section .product-table table{
  text-align: center;
  table-layout: fixed;
  border: unset;
  width: 100%;
  border-collapse: collapse;
  /* border: 1px solid #aaa; */
}
#page section .product-table table th{
  text-align: center;
  background-color: #e4007f;
  color: #fff;
  word-break: keep-all;
  border: 1px solid #aaa;
  padding: 12px 0;
  font-weight: 900;
  font-size: 24px;
}
#page section .product-table table td{
  font-size: 20px;
  padding: 12px 0;
  word-break: keep-all;
  /* border: 1px solid #aaa; */
  color: #222;
  line-height: calc(1em + 4px);
}
#page section .product-table table tr span.small{
  font-size: 16px;
  word-break: keep-all;
  font-weight: 300;
}
#page section .product-table table td.big{
  font-size: 24px;
}
#page section .product-table table td.big span{
  font-size: 30px;
}
#page section .product-table table td.big span.line{
  display: inline-block;
  padding: 6px 30px;
  margin: 4px 0;
  border: 2px solid #e4007f;
  border-radius: 30px;
}
@media screen and (max-width: 768px){
  #page section .product-table table th{
    font-size: 12px;
    padding: 4px 0;
  }
  #page section .product-table table td{
    font-size: 12px;
    padding: 4px 0 2px 0;
  }
  #page section .product-table table td.big,
  #page section .product-table table td.big span{
    font-size: 16px;
  }
  #page section .product-table table td.big span.line{
    padding: 2px 8px;
  }
  #page section .product-table table tr span.small{
    font-size: 10px;
  }
}
.border-red{
  border: 3px solid red;
}
.bd-top-gray{
  border-top: 1px solid #aaa !important;
}
.bd-bottom-gray{
  border-bottom: 1px solid #aaa !important;
}
.bd-left-gray{
  border-left: 1px solid #aaa !important;
}
.bd-right-gray{
  border-right: 1px solid #aaa !important;
}


/* 모달창 */
.modal-content{
  border: none;
}
#page .modal{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: fit-content;
  height: fit-content;
  border-radius: 20px;
  overflow: hidden;
  z-index: 1001;
  display: none;
  animation: fadeIn 0.3s ease-in-out;
  /* width: 1000px; */
}
#page .modal .top{
  display: flex;
  justify-content: space-between;
  background: #e4007f;
  color: #fff;
  align-items: center;
  padding: 0px 20px;
  padding-top: 5px;
}
#page .modal .top span{
  font-size: 25px;
}
#page .modal .modal-close{
  cursor: pointer;
}
@media screen and (max-width: 768px){
  #page .modal{
    width: 360px;
  }
  #page .modal .top{
    padding: 0px 10px;
    padding-top: 0px;
  }
  #page .modal .top span{
    font-size: 18px;
  }
}



/* ***** tel *************************************************** */
/* ******************************************************** */
#page.tel section .sub-title{
  padding-top: 80px;
}
@media screen and (max-width: 768px){
  #page.tel section .sub-title{
    padding-top: 40px;
  }
}
/* ******************************************************** */
#page.tel section.inter-banner{
  background-image: url('/images/front/product/tel/1.jpg');
  padding-top: 60px;
}
#page.tel section.inter-banner .row{
  /* padding-left: 12px; */
}
@media screen and (max-width: 768px){
  #page.tel section.inter-banner{
    padding-top: 80px;
  }
}
/* ******************************************************** */
#page.tel section#intro-card .row.intro{
  grid-template-columns: repeat(3, 1fr);
}
#page.tel section#intro-card .row.intro .text .info li{
  display: unset;
}
#page.tel section#intro-card .row.intro .text .info{
  font-size: 24px;
  text-align: center;
  padding: 0;
}
#page.tel section#intro-card .row.intro .text{
  top: 50%;
  /* transform: translate(-50%, -50%); */
}
#page.tel section#intro-card .row.intro > div:hover .text{
  top: 150px;
}
@media screen and (max-width: 768px){
  #page.tel section#intro-card .row.intro .text .info{
    font-size: 12px;
  }
  #page.tel section#intro-card .row.intro > div:hover .text{
    top: 16%;
  }
  #page.tel section#intro-card .row.intro .text{
    top: 70%;
  }
}
/* ******************************************************** */
#page.tel section#special .icons{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 66px;
}
#page.tel section#special .icons > div{
  border: 1px solid #ddd;
  border-radius: 20px;
  text-align: center;
  padding: 52px 0;
}
#page.tel section#special .icons > div .img{
  margin-bottom: 50px;
}
#page.tel section#special .icons > div h4{
  margin-bottom: 20px;
  font-size: 24px;
}
#page.tel section#special .icons > div p{
  font-size: 18px;
}
#page.tel section#special .video{
  margin-top: 80px;
}
#page.tel section#special .video video{
  width: 100%;
}
#page.tel #cost > div:last-child{
  margin-bottom: 0;
}
@media screen and (max-width: 768px){
  #page.tel section#special .icons{
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
  #page.tel section#special .icons > div{
    padding: 20px 0;
  }
  #page.tel section#special .icons > div .img{
    margin-bottom: 16px;
  }
  #page.tel section#special .icons > div .img img{
    height: 53px;
  }
  #page.tel section#special .icons > div h4{
    margin-bottom: 10px;
    font-size: 16px;
  }
  #page.tel section#special .icons > div p{
    font-size: 12px;
  }
  #page.tel section#special .video{
    margin-top: 20px;
  }
  #page.tel .product-table span.line{
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 0;
    border: 1px solid #007ee2;
    border-radius: 20px;
  }
}
/* ******************************************************** */
#page.tel section.md-banner{
  background-image: url('/images/front/product/tel/b_bg.jpg');
}
/* ******************************************************** */
#page.tel section#dcs .intro{
  background-image: url('/images/front/product/tel/dcs1.jpg');
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page.tel section#dcs .intro .txt-box{
  text-align: center;
  color: #fff;
  font-size: 24px;
}
#page.tel section#dcs .intro .txt-box h3{
  color: #fff;
  font-weight: 900;
  font-size: 50px;
  margin-bottom: 30px;
}
#page.tel section#dcs .intro .txt-box h4{
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}
#page.tel section#dcs .content{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}
#page.tel section#dcs .content > div{
  border: 1px solid #ddd;
  border-radius: 20px;
  display: flex;
  gap: 30px;
  align-items: center;
  height: 168px;
  padding-left: 60px;
}
#page.tel section#dcs .content .des h4{
  font-size: 24px;
  margin-bottom: 20px;
}
#page.tel section#dcs .content .des p{
  font-size: 18px;
}
@media screen and (max-width: 768px){
  #page.tel section#dcs .intro{
    height: 160px;
  }
  #page.tel section#dcs .intro .txt-box{
    font-size: 12px;
  }
  #page.tel section#dcs .intro .txt-box h3{
    font-size: 18px;
    margin-bottom: 10px;
  }
  #page.tel section#dcs .intro .txt-box h4{
    font-size: 14px;
  }
  #page.tel section#dcs .content{
    grid-template-columns: repeat(1, 1fr);
    gap: 5px;
  }
  #page.tel section#dcs .content > div{
    border-radius: 10px;
    gap: 20px;
    padding-left: 20px;
    height: 100px;
  }
  #page.tel section#dcs .content .des h4{
    font-size: 16px;
    margin-bottom: 10px;
  }
  #page.tel section#dcs .content .des p{
    font-size: 12px;
  }
  #page.tel section#dcs .content .img img{
    width: 60px;
  }
}
/* ******************************************************** */
#page.tel section#did .icons{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
#page.tel section#did .icons > div{
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 60px 0;
}
#page.tel section#did .icons .des{
  font-size: 18px;
}
#page.tel section#did .icons .des h4{
  margin-top: 54px;
  margin-bottom: 18px;
  font-size: 24px;
}
@media screen and (max-width: 768px){
  #page.tel section#did .icons{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
  }
  #page.tel section#did .icons > div{
    padding: 10px 0;
    width: 49%;
  }
  #page.tel section#did .icons .des h4{
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 16px;
  }
  #page.tel section#did .icons .des{
    font-size: 12px;
  }
  #page.tel section#did .icons img{
    height: 70px;
  }
}
/* ******************************************************** */
#page.tel section#qna .accordion-desc .content{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
@media screen and (max-width: 768px){
  #page.tel section#qna .accordion-desc .content{
    gap: 5px;
  }
}



/* ***** internet *************************************************** */
/* ******************************************************** */
#page.internet section.inter-banner{
  background-image: url('/images/front/product/internet/1.jpg');
  padding-top: 60px;
}
#page.internet section.inter-banner .row{
  /* padding-left: 12px; */
}
@media screen and (max-width: 768px){
  #page.internet section.inter-banner{
    padding-top: 80px;
  }
}
/* ******************************************************** */
#page.internet section .row .sub-title{
  margin-top: 50px;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px){
  #page.internet section .row .sub-title{
    margin-top: 20px;
    margin-bottom: 10px;
  }
}
/* ******************************************************** */
#page.internet section#office .effect{
  display: flex;
  justify-content: space-between;
}
#page.internet section#office .effect > div{
  flex-grow: 1;
}
#page.internet section#office .effect .img{
  width: 34%;
  margin-right: 5%;
}
#page.internet section#office .effect .des{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#page.internet section#office .effect .des > div{
  background-color: #facce5;
  border-radius: 16px;
  padding: 22px 26px;
}
#page.internet section#office .effect .des h4{
  font-size: 24px;
}
#page.internet section#office .effect .des p{
  font-size: 18px;
}
@media screen and (max-width: 768px){
  #page.internet section#office .effect{
    flex-direction: column;
    gap: 15px;
  }
  #page.internet section#office .effect .img{
    width: 80%;
    margin: auto;
  }
  #page.internet section#office .effect .des{
    gap: 5px;
    padding: 0 10px;
  }
  #page.internet section#office .effect .des > div{
    border-radius: 6px;
    padding: 14px;
  }
  #page.internet section#office .effect .des h4{
    font-size: 16px;
    margin-bottom: 4px;
  }
  #page.internet section#office .effect .des p{
    font-size: 12px;
  }
}
/* ******************************************************** */
#page.internet section#biznet{
  background-image: url('/images/front/product/internet/biz_bg.jpg');
}
#page.internet section#biznet .content{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: space-between;
  gap: 26px;
}
#page.internet section#biznet .content > div{
  flex: 1;
  background-color: #fff;
  padding: 40px 32px;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
}
#page.internet section#biznet .content > div h3{
  font-size: 50px;
  font-weight: 900;
  color: #e4007f;
}
#page.internet section#biznet .content > div h4{
  font-size: 24px;
  margin-bottom: 20px;
}
#page.internet section#biznet .content > div p{
  font-size: 18px;
}
@media screen and (max-width: 768px){
  #page.internet section#biznet .content{
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  #page.internet section#biznet .content > div{
    padding: 20px 10px;
  }
  #page.internet section#biznet .content > div h3{
    font-size: 24px;
    margin-bottom: 10px;
  }
  #page.internet section#biznet .content > div h4{
    font-size: 16px;
    margin-bottom: 10px;
  }
  #page.internet section#biznet .content > div p{
    font-size: 12px;
  }
}
/* ******************************************************** */
#page.internet section#bizon .intro{
  display: flex;
  justify-content: space-between;
}
#page.internet section#bizon .intro .explan{
  width: 45%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#page.internet section#bizon .intro .explan p{
  font-size: 22px;
  line-height: 1.4;
}
#page.internet section#bizon .intro .video{
  width: 55%;
}
#page.internet section#bizon .intro .video video{
  width: 100%;
}
#page.internet section#bizon .strength{
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  gap: 40px;
}
#page.internet section#bizon .strength > div{
  flex: 1;
  border-radius: 20px;
  background-color: #facce5;
  text-align: center;
  padding: 40px 0;
}
#page.internet section#bizon .strength > div h4{
  font-size: 24px;
  margin-bottom: 20px;
}
#page.internet section#bizon .strength > div p{
  font-size: 18px;
}
@media screen and (max-width: 768px){
  #page.internet section#bizon .intro{
    flex-direction: column;
    gap: 10px;
  }
  #page.internet section#bizon .intro .explan{
    width: 100%;
    flex-direction: row;
    align-items: center;
  }
  #page.internet section#bizon .intro .explan img{
    width: 30px;
  }
  #page.internet section#bizon .intro .video{
    width: 100%;
  }
  #page.internet section#bizon .intro .explan p{
    font-size: 14px;
  }
  #page.internet section#bizon .strength{
    margin-top: 20px;
    gap: 10px;
    flex-direction: column;
  }
  #page.internet section#bizon .strength > div{
    padding: 14px;
    text-align: left;
    border-radius: 6px;
  }
  #page.internet section#bizon .strength > div h4{
    font-size: 16px;
    margin-bottom: 4px;
  }
  #page.internet section#bizon .strength > div p{
    font-size: 12px;
  }
}
/* ******************************************************** */
#page.internet section.md-banner{
  background-image: url('/images/front/product/internet/b_bg.jpg');
  /* margin-top: 12%; */
}
/* ******************************************************** */
#page.internet section#leased .content{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
#page.internet section#leased .content > div{
  border: 1px solid #e4007f;
  border-radius: 16px;
  overflow: hidden;
  padding: 40px 30px;
  display: flex;
  align-items: center;
}
#page.internet section#leased .content .img{
  padding-right: 30px;
}
#page.internet section#leased .content .des h4{
  font-size: 24px;
  padding-bottom: 10px;
}
#page.internet section#leased .content .des p{
  font-size: 18px;
}
@media screen and (max-width: 768px){
  #page.internet section#leased .content{
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
  #page.internet section#leased .content > div{
    padding: 0;
    padding-left: 20px;
    height: 100px;
    gap: 5px;
  }
  #page.internet section#leased .content .des h4{
    font-size: 16px;
    padding-bottom: 4px;
  }
  #page.internet section#leased .content .des p{
    font-size: 12px;
  }
  #page.internet section#leased .content .img{
    padding-right: 10px;
  }
  #page.internet section#leased .content .img img{
    width: 50px;
  }
}
/* ******************************************************** */
#page.internet section#quantum .explan{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#page.internet section#quantum .explan img{
  margin: 0;
}
#page.internet section#quantum .explan .des{
  text-align: center;
}
#page.internet section#quantum .explan .des h3{
  font-size: 28px;
  font-weight: 900;
}
#page.internet section#quantum .explan .des p{
  font-size: 22px;
  line-height: 1.4;
}
@media screen and (max-width: 768px){
  #page.internet section#quantum .explan .des h3{
    font-size: 16px;
    margin-bottom: 10px;
  }
  #page.internet section#quantum .explan .des p{
    font-size: 14px;
  }
  #page.internet section#quantum .explan img{
    width: 30px;
  }
}
#page.internet section#quantum .strength{
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 50px;
}
#page.internet section#quantum .strength > div{
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  padding: 40px;
}
#page.internet section#quantum .strength .des{
  text-align: center;
  color: #fff;
}
#page.internet section#quantum .strength .img{
  text-align: center;
}
#page.internet section#quantum .strength .des h4{
  font-size: 24px;
  color: #fff;
  margin-top: 25px;
  margin-bottom: 15px;
}
#page.internet section#quantum .strength .des p{
  font-size: 18px;
}
#page.internet section#quantum .strength .first{
  background-image: url('/images/front/product/internet/qt1.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#page.internet section#quantum .strength .second{
  background-image: url('/images/front/product/internet/qt2.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#page.internet section#quantum .strength .third{
  background-image: url('/images/front/product/internet/qt3.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 768px){
  #page.internet section#quantum .strength{
    margin-top: 10px;
    gap: 10px;
    flex-direction: column;
  }
  #page.internet section#quantum .strength > div{
    border-radius: 10px;
    padding: 10px;
  }
  #page.internet section#quantum .strength .des h4{
    font-size: 16px;
    margin-bottom: 6px;
    margin-top: 10px;
  }
  #page.internet section#quantum .strength .des p{
    font-size: 12px;
  }
  #page.internet section#quantum .strength .img img{
    width: 50px;
  }
}
/* ******************************************************** */
#page.internet section .tab_btn ul{
  display: flex;
  padding: 0;
  margin: 0;
}
#page.internet section .tab_btn ul li{
  font-size: 30px;
  font-weight: 900;
  padding: 28px 88px;
  border: 1px solid #bbb;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  cursor: pointer;
}
#page.internet section .tab_btn ul li.active{
  border: transparent;
  background-color: #e4007f;
  color: #fff;
}
#page.internet section .product-table table tr span.small{
  font-size: 24px;
}
#page.internet section .tab_content{
  border: 4px solid #e4007f;
  padding: 60px 40px 50px 40px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
#page.internet section .product-table.last table td{
  padding: 4px 0;
}
#page.internet section .tab_content > div{
  display: none;
}
#page.internet section .tab_content > div.active{
  display: block;
}
@media screen and (max-width: 1024px){
  #page.internet section .tab_btn ul li{
    font-size: 24px;
    padding: 20px 40px;
  }
  #page.internet section .tab_content{
    padding: 40px 20px 30px 20px;
  }
}
@media screen and (max-width: 768px){
  #page.internet section .tab_btn ul li{
    font-size: 16px;
    padding: 10px 14px;
    padding-bottom: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  #page.internet section .tab_content{
    border: 2px solid #0066b7;
    padding: 30px 10px 20px 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  #page.internet section .product-table table tr span.small{
    font-size: 10px;
  }
}
/* ******************************************************** */
#page.internet section .product-table.first table th{
  width: calc(100% / 3);
}
#page.internet section .product-table.last table th{
  width: unset;
}
#page.internet section .product-table table td.ft-blue{
  font-weight: 900;
}



/* ***** callcenter *************************************************** */
/* ************ more ******************************************** */
#page.callcenter section .more{
  background-color: #fff;
  border-radius: 50px;
  border: 1px solid transparent;
  color: #777;
  width: fit-content;
  padding: 1px 14px;
  margin: auto;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
}
#page.callcenter section .more:hover{
  color: #fff;
  background-color: #000;
  border: 1px solid #fff;
}
@media screen and (max-width: 768px){
  #page.callcenter section .more{
    padding: 1px 8px;
    border-radius: 20px;
  }
}
/* ******************************************************** */
#page.callcenter section.callcen-banner{
  background-image: url('/images/front/product/callcenter/1_bg.jpg');
  padding-top: 60px;
}
#page.callcenter section.callcen-banner .row{
  /* padding-left: 12px; */
}
@media screen and (max-width: 768px){
  #page.callcenter section.callcen-banner{
    padding-top: 80px;
  }
}
/* ******************************************************** */
#page.callcenter section#small{
  background-color: #fce5f2;
}
#page.callcenter section#small .content{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
#page.callcenter section#small .right{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
#page.callcenter section#small .left > div,
#page.callcenter section#small .right > div{
  position: relative;
}
#page.callcenter section#small .content .des{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-align: center;
  width: max-content;
}
#page.callcenter section#small .more{
  font-size: 18px;
  margin-top: 20px;
}
@media screen and (max-width: 768px){
  #page.callcenter section#small .content{
    grid-template-columns: repeat(1, 1fr);
    gap: 5px;
  }
  #page.callcenter section#small .right{
    gap: 5px;
  }
  #page.callcenter section#small .right > div{
    max-height: 156px;
  }
  #page.callcenter section#small .right .is-m{
    clip-path: inset(0 0);
  }
  #page.callcenter section#small .content .left{
  }
  #page.callcenter section#small .content .des{
    font-size: 12px;
  }
  #page.callcenter section#small .more{
    font-size: 11px;
    margin-top: 10px;
  }
}
/* ******************************************************** */
#page.callcenter section#basic .content > div{
  display: flex;
  justify-content: center;
  gap: 24px;
}
#page.callcenter section#basic .content .top{
  margin-bottom: 24px;
}
#page.callcenter section#basic .content > div > div{
  border: 1px solid #ddd;
  position: relative;
}
#page.callcenter section#basic .content .img{
  opacity: 0;
  transition: all 0.3s;
}
#page.callcenter section#basic .content > div > div:hover{
  border: 1px solid transparent;
}
#page.callcenter section#basic .content > div > div:hover .img{
  opacity: 1;
  transition: all 0.3s;
}
#page.callcenter section#basic .content > div > div:hover .icon,
#page.callcenter section#basic .content > div > div:hover .text{
  filter: invert(100%);
  transition: all 0.2s;
}
#page.callcenter section#basic .content .des{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: all 0.3s;
}
#page.callcenter section#basic .content .des.down{
  top: 58%;
}
#page.callcenter section#basic .content .des.down .icon{
  /* margin-top: 60px; */
}
#page.callcenter section#basic .content .des .icon{
  margin-bottom: 42px;
}
#page.callcenter section#basic .content .des .text{
  width: max-content;
}
#page.callcenter section#basic .content .des .text h4{
  margin-bottom: 30px;
}
#page.callcenter section#basic .content .des .text p{
  font-weight: 700;
}
#page.callcenter section#basic .content .des .more{
  margin-top: 38px;
}
@media screen and (max-width: 768px){
  #page.callcenter section#basic .content > div{
    gap: 5px;
    /* justify-content: flex-start; */
    flex-wrap: wrap;
  }
  #page.callcenter section#basic .content > div > div{
    max-width: 185px;
  }
  #page.callcenter section#basic .content .top{
    margin-bottom: 5px;
  }
  #page.callcenter section#basic .content .des .icon{
    margin-bottom: 10px;
  }
  #page.callcenter section#basic .content .des .icon img{
    height: 40px;
  }
  #page.callcenter section#basic .content .des .text h4{
    margin-bottom: 5px;
    font-size: 16px;
  }
  #page.callcenter section#basic .content .des .text{
    /* width: unset; */
  }
  #page.callcenter section#basic .content .des .text p{
    font-size: 12px;
  }
  #page.callcenter section#basic .content .des .more{
    margin-top: 4px;
    font-size: 12px;
    /* color: #fff;
    background-color: #000; */
    border: 1px solid #222;
  }
  #page.callcenter section#basic .content .des.down{
    top: 52%;
  }
  #page.callcenter section#basic .content .des{
    top: 49%;
  }
  #page.callcenter section#basic .content > div > div:hover{
    border: 1px solid #ddd;
  }
  #page.callcenter section#basic .content > div > div:hover .img{
    opacity: 0;
  }
  #page.callcenter section#basic .content > div > div:hover .icon,
  #page.callcenter section#basic .content > div > div:hover .text{
    filter: invert(0%);
  }
}
/* ******************************************************** */
#page.callcenter section#quality{
  background-color: #fce5f2;
}
#page.callcenter section#quality .content .row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
#page.callcenter section#quality .content .row .span-2{
  grid-column: span 2;
}
#page.callcenter section#quality .content .row .des h4{
  font-size: 26px;
  margin-bottom: 20px;
}
#page.callcenter section#quality .content .row .des p{
  font-size: 18px;
}
#page.callcenter section#quality .content .row > div{
  border: 1px solid #ddd;
  height: 300px;
  padding-left: 22px;
  padding-top: 88px;
  border-radius: 20px;
  overflow: hidden;
}
#page.callcenter section#quality .content .row > div.white{
  background-color: #fff;
}
#page.callcenter section#quality .content .row > div.dark{
  background-color: #7f0047;
  color: #fff;
}
#page.callcenter section#quality .content .row > div.dark h4,
#page.callcenter section#quality .content .row .span-2 h4{
  color: #fff;
}
#page.callcenter section#quality .more{
  margin: 0;
  margin-top: 20px;
}
#page.callcenter section#quality .content .row .span-2{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}
#page.callcenter section#quality .content .row .span-2.app{
  background-image: url('/images/front/product/callcenter/smh1.jpg');
}
#page.callcenter section#quality .content .row .span-2.page{
  background-image: url('/images/front/product/callcenter/smh2.jpg');
}
@media screen and (max-width: 768px){
  #page.callcenter section#quality .content .row{
    gap: 5px;
  }
  #page.callcenter section#quality .content .row > div{
    padding-top: 20px;
    padding-left: 10px;
    border-radius: 10px;
    grid-column: span 2;
    height: 150px;;
  }
  #page.callcenter section#quality .content .row .des h4{
    font-size: 16px;
    margin-bottom: 5px;
  }
  #page.callcenter section#quality .content .row .des p{
    font-size: 12px;
  }
  #page.callcenter section#quality .more{
    margin-top: 10px;
    font-size: 12px;
  }
}
/* ******************************************************** */
#page.callcenter section#custom .intro{
  position: relative;
  margin-bottom: 50px;
}
#page.callcenter section#custom .intro .des{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-size: 24px;
}
#page.callcenter section#custom .intro .des h3{
  color: #fff;
  font-weight: 900;
  font-size: 50px;
  margin-bottom: 36px;
}
#page.callcenter section#custom .intro .des p{
  line-height: 1.4;
}
#page.callcenter section#custom .swiper-slide{
  padding: 100px 0;
  position: relative;
  max-height: unset;
}
#page.callcenter section#custom .swiper-slide .content{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  color: #fff;
  opacity: 0;
  transition: all 0.3s;
}
#page.callcenter section#custom .swiper-slide .content .des{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
}
#page.callcenter section#custom .swiper-slide .content .des h4{
  color: #fff;
  padding-bottom: 6px;
  font-size: 20px;
}
#page.callcenter section#custom .swiper-slide .content .des p{
  font-weight: 300;
}
#page.callcenter section#custom .swiper-slide .content .des > div{
  padding-bottom: 30px;
}
#page.callcenter section#custom .swiper-slide .content .des > div:last-child{
  padding-bottom: 0;
}
#page.callcenter section#custom .swiper-slide:hover .content{
  opacity: 1;
  transition: all 0.3s;
}
@media screen and (max-width: 768px){
  #page.callcenter section#custom .intro{
    margin-bottom: 10px;
  }
  #page.callcenter section#custom .intro .des h3{
    font-size: 18px;
    margin-bottom: 6px;
  }
  #page.callcenter section#custom .intro .des p{
    font-size: 12px;
    width: max-content;
  }
  #page.callcenter section#custom .swiper-slide{
    padding: 50px 0;
  }
  #page.callcenter section#custom .swiper-slide .content .des h4{
    font-size: 14px;
    padding-bottom: 0px;
  }
  #page.callcenter section#custom .swiper-slide .content .des p{
    font-size: 12px;
  }
  #page.callcenter section#custom .swiper-slide .content .des > div{
    padding-bottom: 5px;
  }
  #page.callcenter section#custom .swiper-slide .img{
    height: 60px;
  }
  #page.callcenter section#custom .swiper-slide .txt-box h4{
    font-size: 16px;
  }
  #page.callcenter section#custom .swiper-slide .more{
    background-color: #222;
    color: #fff;
  }
}
/* ******************************************************** */
#page.callcenter section.md-banner{
  background-image: url('/images/front/product/callcenter/b_bg.jpg');
  /* margin-top: 12%; */
}
/* ******************************************************** */
#page.callcenter section .tab_btn ul{
  display: flex;
  padding: 0;
  margin: 0;
}
#page.callcenter section .tab_btn ul li{
  font-size: 30px;
  font-weight: 900;
  padding: 28px 88px;
  border: 1px solid #bbb;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  cursor: pointer;
}
#page.callcenter section .tab_btn ul li.active{
  border: 1px solid transparent;
  background-color: #6d45d6;
  color: #fff;
}
#page.callcenter section .tab_content{
  border: 4px solid #6d45d6;
  padding: 60px 40px 50px 40px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
#page.callcenter section .tab_content > div > div{
  display: flex;
  justify-content: space-between;
  gap: 60px;
  align-items: center;
}
#page.callcenter section .tab_content > div{
  display: none;
}
#page.callcenter section .tab_content > div.active{
  display: block;
}
#page.callcenter section .tab_content .des > div{
  margin-bottom: 30px;
}
#page.callcenter section .tab_content .des > div:last-child{
  margin-bottom: 0px;
}
#page.callcenter section .tab_content .des .h4{
  font-weight: 900;
  font-size: 24px;
}
#page.callcenter section .tab_content .des .h4::before{
  content: '';
  display: inline-block;
  width: 18px;
  height: 14px;
  background-image: url('/images/front/product/callcenter/check.png');
  margin-right: 12px;
}
#page.callcenter section .tab_content .des p{
  font-size: 18px;
}
@media screen and (max-width: 1024px){
  #page.callcenter section .tab_btn ul li{
    font-size: 24px;
    padding: 20px 40px;
  }
  #page.callcenter section .tab_content{
    padding: 40px 20px 30px 20px;
  }
}
@media screen and (max-width: 768px){
  #page.callcenter section .tab_btn ul li{
    font-size: 14px;
    padding: 10px 24px;
    padding-bottom: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  #page.callcenter section .tab_content{
    border: 2px solid #6d45d6;
    padding: 20px 10px 20px 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
  #page.callcenter section .tab_content > div > div{
    flex-direction: column;
    gap: 5px;
  }
  #page.callcenter section .tab_content .des > div{
    margin-bottom: 15px;
  }
  #page.callcenter section .tab_content .des .h4{
    font-size: 16px;
    margin-bottom: 5px;
  }
  #page.callcenter section .tab_content .des p{
    font-size: 12px;
  }
  #page.callcenter section .tab_content .des .h4::before{
    margin-right: 8px;
    background-size: contain;
    width: 12px;
    height: 9px;
  }
}
/* ******************************************************** */
#page.callcenter section#aicc-adv{
  background-color: #f9e4f9;
}
#page.callcenter section#aicc-adv .person{
  margin-left: -4%;
}
#page.callcenter section#aicc-adv .container{
  position: relative;
  padding-top: 60px;
}
#page.callcenter section#aicc-adv::after{
  padding-bottom: 0;
}
#page.callcenter section#aicc-adv .row{
  /* display: flex; */
}
#page.callcenter section#aicc-adv .content{
  position: absolute;
  top: 0%;
  right: 0;
}
#page.callcenter section#aicc-adv .adv{
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 70px;
}
#page.callcenter section#aicc-adv .adv > div{
  text-align: center;
}
#page.callcenter section#aicc-adv .adv > div .des{
  margin-top: 10px;
}
#page.callcenter section#aicc-adv .adv > div .des h4{
  font-size: 20px;
  margin-bottom: 6px;
}
#page.callcenter section#aicc-adv .adv > div .des p{
  font-size: 18px;
}
#page.callcenter section#aicc-adv .title h3{
  font-size: 50px;
  font-weight: 900;
  color: #e4007f;
}
@media screen and (max-width: 768px){
  #page.callcenter section#aicc-adv .container{
    padding-top: 0px;
    padding-bottom: 30px;
  }
  #page.callcenter section#aicc-adv .title h3{
    font-size: 20px;
    margin: 0;
  }
  #page.callcenter section#aicc-adv .content{
    position: unset;
  }
  #page.callcenter section#aicc-adv .adv{
    gap: 10px;
    /* align-items: flex-start; */
  }
  #page.callcenter section#aicc-adv .adv img{
    width: 100px;
  }
  #page.callcenter section#aicc-adv .adv > div .des h4{
    font-size: 14px;
    margin-bottom: 4px;
  }
  #page.callcenter section#aicc-adv .adv > div .des p{
    font-size: 12px;
  }
}
/* ******************************************************** */
#page.callcenter section.contents .accordion-list .accordion-name::before{
  background-image: url('/images/front/product/callcenter/cost_i.png');
}
#page.callcenter section#cost .ft-blue{
  font-weight: 900;
}
#page.callcenter section#cost .click-img{
  display: none;
}
@media screen and (max-width: 768px){
  #page.callcenter section#cost .accordion-desc.touch{
    position: relative;
    overflow: auto;
  }
  #page.callcenter section#cost .accordion-desc.touch .img{
    max-width: unset;
    width: 150%;
  }
  #page.callcenter section#cost .click-img{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
  }
  #page.callcenter section#cost .click-img > div{
    /* font-size: 16px; */
    /* display: block; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
  }
  #page.callcenter section#cost .click-img > div img{
    width: 20px;
  }
  #page.callcenter section#cost .click-img strong{
    margin: 0 20px;
  }
}
/* ******************************************************** */
#page.callcenter .modal-body{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
#page.callcenter .modal-body .des{
  text-align: center;
  margin-top: 5px;
}
#page.callcenter .modal-body h5{
  font-weight: 900;
  margin-bottom: 5px;
  font-size: 16px;
}
#page.callcenter .modal-body p{
  font-size: 14px;
}
@media screen and (max-width: 768px){
  #page.callcenter .modal-body{
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
  #page.callcenter .modal-body h5{
    font-size: 14px;
  }
  #page.callcenter .modal-body p{
    font-size: 12px;
  }
}



/* ***** gw *************************************************** */
/* ******************************************************** */
#page.gw section .sub-title{
  padding-top: 80px;
}
@media screen and (max-width: 768px){
  #page.gw section .sub-title{
    padding-top: 40px;
  }
}
/* ******************************************************** */
#page.gw section.inter-banner{
  background-image: url('/images/front/product/gw/1_bg.jpg');
  padding-top: 60px;
}
#page.gw section.inter-banner .row{
  /* padding-left: 12px; */
}
@media screen and (max-width: 768px){
  #page.gw section.inter-banner{
    padding-top: 80px;
  }
}
/* ******************************************************** */
#page.gw section.intro-slide .swiper-slide .txt-box h4{
  /* width: max-content; */
}
/* ******************************************************** */
#page.gw section#function .tab_btn ul{
  display: flex;
  padding: 0;
  margin: 0;
  margin-bottom: -2px;
  z-index: 1;
}
#page.gw section#function .tab_btn ul li{
  position: relative;
  border: 2px solid #eee;
  border-bottom: 3px solid transparent;
  padding: 15px 30px;
  font-size: 24px;
  cursor: pointer;
}
#page.gw section#function .tab_btn ul li.active{
  border: 2px solid #222;
  border-bottom: 3px solid #fff;
  z-index: 3;
}
#page.gw section#function .tab_content{
  position: relative;
  border-top: 2px solid #222;
  padding: 40px;
  z-index: 2;
}
#page.gw section#function .content{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 60px;
}
#page.gw section#function .content > div{
  display: flex;
  gap: 30px;
  align-items: center;
}
#page.gw section#function .content .des{
  font-size: 18px;
}
#page.gw section#function .content .des h4{
  font-size: 24px;
  margin-bottom: 20px;
}
#page.gw section#function .more{
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
#page.gw section#function .more .title{
  text-align: left;
  font-size: 24px;
  border-bottom: 2px solid #ddd;
}
#page.gw section#function .more > div{
  flex: 1;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 4px 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  padding: 30px;
}
#page.gw section#function .more .title + div{
  display: flex;
  justify-content: space-around;
  padding-top: 40px;
}
#page.gw section#function .more .title + div > div{
  text-align: center;
}
#page.gw section#function .more p{
  margin-top: 10px;
  font-size: 18px;
}
#page.gw section#function .more ul{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
#page.gw section#function .more ul li{
  padding: 0px 20px 20px 20px;
  font-size: 18px;
  width: 50%;
}
#page.gw section#function .more ul li:last-child{
  width: unset;
}
#page.gw section#function video{
  width: 100%;
}
@media screen and (max-width: 768px){
  #page.gw section#function .tab_btn ul li{
    padding: 8px 16px;
    font-size: 14px;
  }
  #page.gw section#function .tab_content{
    padding: 20px 10px;
  }
  #page.gw section#function .content{
    grid-template-columns: repeat(1, 1fr);
    row-gap: 20px;
  }
  #page.gw section#function .content .des{
    font-size: 12px;
    width: 100%;
  }
  #page.gw section#function .content .des h4{
    font-size: 14px;
    margin-bottom: 5px;
  }
  #page.gw section#function .content > div{
    gap: 10px;
  }
  #page.gw section#function .more{
    flex-direction: column;
    gap: 20px;
  }
  #page.gw section#function .more .title{
    font-size: 16px;
  }
  #page.gw section#function .more .title + div{
    padding-top: 10px;
  }
  #page.gw section#function .more p{
    font-size: 12px;
  }
  #page.gw section#function .more ul li{
    padding: 0px 20px 10px 20px;
    font-size: 12px;
    width: unset;
  }
  #page.gw section#function .more ul li.half{
    width: 50%;
  }
  #page.gw section#function .more > div{
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), 2px 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 15px;
  }
  #page.gw section#function .more img{
    width: 90px;
  }
}
/* ******************************************************** */
#page.gw section.md-banner{
  background-image: url('/images/front/product/gw/b_bg.jpg');
}
/* ******************************************************** */
#page.gw section#cost .sale{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 50px;
}
#page.gw section#cost .sale .first,
#page.gw section#cost .sale .second,
#page.gw section#cost .sale .third{
  background-color: #fce5f2;
  border-radius: 40px;
  height: 380px;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#page.gw section#cost .sale > div{
  text-align: center;
}
#page.gw section#cost .sale > div h4{
  font-size: 40px;
}
#page.gw section#cost .sale .first > div:nth-child(2){
  margin: 30px 0
}
#page.gw section#cost .sale .third{
  background-color: #e4007f;
  height: 440px;
  padding: 0 60px;
  color: #fff;
}
#page.gw section#cost .sale .third p{
  font-weight: 700;
  font-size: 24px;
}
#page.gw section#cost .sale .third h4{
  color: #fff;
  font-size: 80px;
}
@media screen and (max-width: 768px){
  #page.gw section#cost .sale{
    /* flex-direction: column; */
    margin-top: 20px;
    gap: 5px;
  }
  #page.gw section#cost .sale .first,
  #page.gw section#cost .sale .second,
  #page.gw section#cost .sale .third{
    border-radius: 10px;
    /* width: 100%; */
    max-width: 104px;
    height: 208px;
    padding: 0px 5px;
    gap: 6px;
    /* flex-direction: row; */
    /* justify-content: space-around; */
  }
  #page.gw section#cost .sale > div{
    font-size: 10px;
  }
  #page.gw section#cost .sale > div h4{
    font-size: 16px;
    margin-bottom: 2px;
  }
  #page.gw section#cost .sale .first > div:nth-child(2){
    margin: 0;
  }
  #page.gw section#cost .sale .sign{
    width: 30px;
  }
  #page.gw section#cost .sale .third{
    padding: 0 10px;
  }
  #page.gw section#cost .sale .third p{
    font-size: 16px;
  }
  #page.gw section#cost .sale .third h4{
    font-size: 38px;
  }
}



/* ***** security *************************************************** */
#page.security section sup{
  /* top: -14px; */
}
@media screen and (max-width: 768px){
  #page.security section table th{
    font-size: 12px;
  }
  #page.security section table td{
    font-size: 10px;
  }
}
/* ******************************************************** */
#page.security section.secu-banner{
  background-image: url('/images/front/product/security/1_bg.jpg');
  padding-top: 45px;
}
#page.security section.secu-banner .row{
  /* padding-left: 12px; */
}
@media screen and (max-width: 768px){
  #page.security section.secu-banner{
    padding-top: 80px;
  }
}
/* ************** intro-card **************** */
#page section#intro-card .row.intro{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  box-sizing: border-box;
  gap: 20px;
}
@media screen and (max-width: 768px){
  #page section#intro-card .row.intro{
    gap: 5px;
  }
}
#page section .row:before,
#page section .row:after{
  display: none;
}
#page section#intro-card .row.intro > div{
  position: relative;
  width: fit-content;
  overflow: hidden;
  /* cursor: pointer; */
}
#page section#intro-card .row.intro .text{
  position: absolute;
  top: 310px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  /* width: 100%; */
  width: max-content;
  padding: 0 18px;
  word-break: keep-all;
  transition: all 0.4s;
  letter-spacing: -1px;
}
#page section#intro-card .row.intro .text h2{
  font-size: 30px;
  font-weight: 900;
  color: #fff;
}
#page section#intro-card .row.intro .text .info{
  font-size: 22px;
  font-weight: 700;
  padding: 0;
  text-align: left;
  color: #fff;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s;
}
#page section#intro-card .row.intro .text .info li{
  display: flex;
  margin-top: 26px;
}
#page section#intro-card .row.intro .text .info li p{
  margin-bottom: 0;
  line-height: 1.6;
}
#page section#intro-card .row.intro > div:hover .text{
  top: 40px;
}
#page section#intro-card .row.intro > div:hover .text .info{
  max-height: 210px;
}
/**************** internet *********************/
#page.internet section#intro-card .row.intro .text .info li{
  display: unset;
  text-align: center;
}
#page.internet section#intro-card .row.intro .text{
  text-align: center;
}
#page.internet section#intro-card .row.intro .text .info{
  padding: 0;
}
#page.internet section#intro-card .row.intro > div:hover .text{
  top: 100px;
}
@media screen and (max-width: 768px){
  #page.internet section#intro-card .row.intro > div:hover .text{
    top: 70px;
  }
  #page.internet section#intro-card .row.intro .text h2{
    font-size: 18px;
  }
  #page.internet section#intro-card .row.intro .text p{
    font-size: 16px;
  }
}
/*************************************/
@media screen and (max-width: 1280px){
  #page section#intro-card .row.intro .text{
    top: 280px;
  }
  #page section#intro-card .row.intro .text h2{
    margin-bottom: 0;
    font-size: 26px;
    white-space: nowrap;
  }
  #page section#intro-card .row.intro .text .info{
    font-size: 20px;
  }
  #page section#intro-card .row.intro .text .info li{
    margin-top: 14px;
  }
}
@media screen and (max-width: 1024px){
  #page section#intro-card .row.intro .text{
    top: 200px;
  }
  #page section#intro-card .row.intro .text h2{
    font-size: 24px;
  }
  #page section#intro-card .row.intro .text .info{
    font-size: 18px;
  }
}
@media screen and (max-width: 768px){
    #page section#intro-card .row.intro{
      grid-template-columns: repeat(2, 1fr);
    }
    #page section#intro-card .row.intro .text{
      top: 190px;
      /* top: 40px; */
      padding: 0px;
      letter-spacing: 0.02em;
    }
    #page section#intro-card .row.intro .text h2{
      font-size: 18px;
      margin-bottom: 10px;
    }
    #page section#intro-card .row.intro .text .info{
      font-size: 12px;
      max-height: 0px;
      padding-left: 14px;
    }
    #page section#intro-card .row.intro .text .info li{
      margin-top: 6px;
    }
    #page section#intro-card .row.intro > div:hover .text{
      top: 40px;
    }
    #page section#intro-card .row.intro > div:hover .text .info{
      max-height: 100px;
    }
}
/* ************* [swiper 공통] ***************** */
#page section.intro-slide .swiper-box .swiper{
  margin: 0 68px;
}
#page section.intro-slide .swiper-box .swiper .swiper-slide img{
  width: unset;
}
@media screen and (max-width: 768px){
  #page section.intro-slide .swiper-box .swiper{
    margin: 0 21px;
  }
}

#page section.intro-slide .swiper-slide{
  border-radius: 20px;
  border: 1px solid #ddd;
  overflow: hidden;
  padding: 50px 5px;
  max-height: 340px;
}
#page section.intro-slide .swiper-slide .txt-box h4{
  font-size: 26px;
  margin-bottom: 16px;
}
#page section.intro-slide .swiper-slide .img{
  margin-bottom: 40px;
}
#page section.intro-slide .swiper-slide .txt-box p{
  font-size: 24px;
}
#page.security section.intro-slide .swiper-slide .img img{
  max-height: 94px;
}
@media screen and (max-width: 768px){
  #page section.intro-slide .swiper-slide{
    border-radius: 10px;
    padding: 10px 4px;
  }
  #page section.intro-slide .swiper-slide .txt-box{
    font-size: 12px;
  }
  #page section.intro-slide .swiper-slide .img{
    width: 40%;
    height: 40px;
    margin: auto;
    margin-bottom: 20px;
  }
  #page section.intro-slide .swiper-slide .txt-box h4{
    font-size: 11px;
    margin-bottom: 6px;
  }
  #page section.intro-slide .swiper-slide .txt-box p{
    font-size: 0.8em;
  }
}

/* ************* [md-banner 공통] ***************** */
#page section.md-banner{
  margin-top: 8%;
}
#page section.md-banner:before,
#page section.md-banner:after{
  display: none;
}
#page section.md-banner img{
  margin-top: -7%;
}
@media screen and (max-width: 1280px){
  #page section.md-banner{
    margin-top: 13%;
  }
}
@media screen and (max-width: 768px){
  #page section.md-banner{
    margin-top: 16%;
  }
}

/* ************** [추천고객 공통] **************** */
#page section#suggest{
  /* padding-bottom: 100px; */
}
#page section#suggest .customer-content{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 70px;
  row-gap: 50px;
}
#page section#suggest .customer-content .txt-box{
  margin-top: 10px;
}
#page section#suggest .customer-content .txt-box h4{
  font-weight: 900;
  font-size: 24px;
  margin-bottom: 10px;
}
#page section#suggest .customer-content .txt-box p{
  font-size: 18px;
  font-weight: 400;
  /* margin-left: 32px; */
  word-break: keep-all;
}
@media screen and (max-width: 768px){
  #page section#suggest{
    padding-bottom: 0px;
  }
  #page section#suggest .suggest-box{
    width: 100%;
    overflow: hidden;
  }
  #page section#suggest .customer-content{
    display: flex;
    gap: unset;
    width: max-content;
    animation: slideLoop 30s linear infinite;
  }
  #page section#suggest .customer-content .customer{
    flex: 0 0 auto;
    margin: 0 6px;
    width: 150px;
  }
  #page section#suggest .customer-content .txt-box h4{
    font-size: 12px;
    margin-bottom: 5px;
  }
  #page section#suggest .customer-content .txt-box p{
    font-size: 11px;
    /* margin-left: 12px; */
  }
}

/* *************** cloud *************** */
#page.security section#cloud .row.cost{
  margin-top: 60px;
}
@media screen and (max-width: 768px){
  #page.security section#cloud .row.cost{
    margin-top: 20px;
  }
}
/* ************* primium ***************** */
#page.security section#primium .row .p-content{
  display: flex;
  gap: 60px;
  align-items: center;
}
#page.security section#primium .row .p-content .image{
  width: 40%;
}
#page.security section#primium .row .p-content img{
  height: fit-content;
  /* flex: 0.8; */
}
#page.security section#primium .row .p-content .video{
  /* flex: 1.2; */
  width: 60%;
  /* height: 405px; */
  /* border-radius: 16px; */
  overflow: hidden;
  /* position: relative; */
}
#page.security section#primium .row .p-content .video video{
  width: 100%;
  /* height: 103%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); */
}
#page.security section#primium .row .info{
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 40px;
  grid-row-gap: 20px;
}
#page.security section#primium .row .info > div{
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 16px;
  /* padding: 16px 10px; */
  /* cursor: pointer; */
  display: flex;
  gap: 20px;
  align-items: center;
}
#page.security section#primium .row .info > div:hover{
  outline: 3px solid #0071cd;
}
#page.security section#primium .row .info .img{
  width: 20%;
}
#page.security section#primium .info .txt-box{
  width: 80%;
}
#page.security section#primium .info .txt-box h4{
  font-weight: 900;
  font-size: 28px;
  margin-bottom: 12px;
}
#page.security section#primium .info .txt-box p{
  font-weight: 400;
  font-size: 24px;
  word-break: keep-all;
  margin: 0;
}
@media screen and (max-width: 768px){
  #page.security section#primium .row .p-content{
    flex-direction: column;
    gap: 14px;
  }
  #page.security section#primium .row .p-content .image{
    width: 100%;
    text-align: center;
  }
  #page.security section#primium .row .p-content .video{
    width: 100%;
  }
  #page.security section#primium .row .info{
    grid-template-columns: repeat(1, 1fr);
    margin-top: 20px;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  #page.security section#primium .row .info > div{
    border-radius: 6px;
    padding: 0;
    padding-left: 20px;
    height: 100px;
  }
  #page.security section#primium .row .info > div:hover{
    outline: transparent;
  }
  #page.security section#primium .info .txt-box h4{
    font-size: 14px;
    margin-bottom: 10px;
  }
  #page.security section#primium .info .txt-box p{
    font-size: 11px;
  }
  #page.security section#primium .row .info .img{
    width: 60px;
  }
}
/* ************* document ***************** */
#page.security section#document .row .info{
  display: flex;
  margin-top: 20px;
  margin-bottom: 50px;
  gap: 20px;
}
#page.security section#document .row .info > div{
  display: flex;
  gap: 20px;
}
#page.security section#document .row .info > div div{
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 7px;
  /* cursor: pointer; */
}
#page.security section#document .row .info > div div:hover{
  outline: 3px solid #0071cd;
}
#page.security section#document .cost2{
  margin-top: 40px;
}
@media screen and (max-width: 768px){
  #page.security section#document .row .info{
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    gap: 10px;
  }
  #page.security section#document .row .info > div{
    gap: 10px;
  }
  #page.security section#document .row .info .two{
    justify-content: center;
  }
  #page.security section#document .row .info .two div {
    /* flex: 1; */
  }
  #page.security section#document .row .info > div div{
    border-radius: 10px;
    width: 104px;
  }
  #page.security section#document .row .info > div div:hover{
    outline: transparent;
  }
  #page.security section#document .cost2{
    margin-top: 20px;
  }
}
/* ****************************** */
#page.security section.md-banner{
  background-image: url('/images/front/product/security/b_bg.jpg');
}
/* ************* expect ***************** */
#page.security section#expect{
  margin: 100px 0;
}
#page.security section#expect .container .row{
  margin-right: calc((100vw - 100%) / 2* -1);
}
#page.security section#expect .container{
  position: relative;
}
#page.security section#expect .e-box::after{
  content: '';
  width: 100%;
  height: 480px;
  background-color: #e4007f;
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translateY(-50%);
  border-top-left-radius: 30px;
}
#page.security section#expect .expect-slide .swiper-slide{
  background: none;
  width: auto;
  max-width: 330px;
}
#page.security section#expect .expect-slide .swiper-slide img{
  /* max-width: unset;
  width: unset; */
  max-width: fit-content;
  width: fit-content;
}
#page.security section#expect .swiper-button-next:after,
#page.security section#expect .swiper-button-prev:after{
  display: none;
}
#page.security section#expect .swiper-button-prev,
#page.security section#expect .swiper-button-next{
  left: unset;
  right: unset;
  top: 100%;
  width: 50px;
  height: 51px;
  margin-top: 50px;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: all 0.2s;
}
#page.security section#expect .swiper-button-prev:hover,
#page.security section#expect .swiper-button-next:hover{
  filter: none;
  opacity: 1;
}
/* #page.security section#expect .swiper-button-prev.swiper-button-disabled,
#page.security section#expect .swiper-button-next.swiper-button-disabled{
  filter: grayscale(100%);
} */
#page.security section#expect .swiper-button-next{
  left: 20%;
}
#page.security section#expect .e-box{
  align-items: flex-start;
}
#page.security section#expect .title-box-op{
  margin-top: -30px
}
#page.security section.contents .title-box-op .des{
  font-size: 24px;
  font-weight: 400;
  margin: 60px 0;
}
@media screen and (max-width: 1280px){
  #page.security section#expect .e-box::after{
    height: 400px;
  }
  #page.security section#expect .swiper-button-prev,
  #page.security section#expect .swiper-button-next{
    top: 100%;
    margin-top: 0px;
    width: 40px;
    /* height: 41px; */
  }
  #page.security section#expect .expect-slide .swiper-slide img{
    max-width: 100%;
    width: 100%;
  }
}
@media screen and (max-width: 1024px){
  #page.security section.contents .title-box-op .des{
    font-size: 18px;
    margin: 26px 0;
  }
  #page.security section#expect .e-box::after{
    height: 320px;
  }
  #page.security section#expect .e-box .left-box{
    padding-right: 10px;
  }
  #page.security section#expect .e-box .left-box .des br{
    display: none !important;
  }
}
@media screen and (max-width: 768px){
  #page.security section#expect{
    margin: 40px 0;
  }
  #page.security section#expect .container .row{
    padding-right: 0;
  }
  #page.security section.contents .title-box-op .des{
    font-size: 12px;
    margin: 0;
  }
  #page.security section#expect .swiper-button-prev,
  #page.security section#expect .swiper-button-next{
    width: 26px;
  }
  #page.security section#expect .e-box{
    flex-direction: column;
    gap: 10px;
  }
  #page.security section#expect .e-box::after{
    height: 210px;
    top: 65%;
    left: 30%;
    border-top-left-radius: 10px;
  }
  #page.security section.contents .title-box-op{
    margin-top: 0px;
  }
  #page.security section#expect .e-box .left-box{
    /* padding-right: 30px; */
  }
}