:root {
--primary-color:#1d8ecd;
--primary-hover-color:#1e55af;
}



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



	#parallax__title {
	  position: fixed;
	  left: 50%;
	  top: 25px;
	  z-index: 1000;	  
	  color:#fff;
	  width:100%;
	  transform:translateX(-50%);
	}
	
	.header{padding:23px 0; padding:0 50px; width:100%; display:flex; justify-content:space-between;}
	.header .logo img{max-width:160px;}
	.header .nav{display:flex; gap:0 70px; align-items:center; font-size:1.25rem; }
	.header .nav a{letter-spacing:0; font-weight:500; font-family: "Poppins", sans-serif;}
	.header.sub .nav a{color:#333;}
	.header .nav a:hover{color:var(--primary-color); }
	


	@media only screen and (max-width:768px){
		#parallax__title{align-items:center;}
		.header{padding:0 30px}
		.header .nav{display:none; position:absolute; top:57px; right:20px; width:200px; background-color:#333; border-radius:10px;}
		.header .nav a{display:block; padding:12px 25px;}
		.header .mo-btn{position:relative; display:inline-block; padding:0 15px; width:45px; height:45px; border-radius:100px; background-color:var(--primary-color)}
		.header .mo-btn .dot{display:block; width:3px; height:3px; background-color:#fff; border-radius:100px;}		
		.header .mo-btn .dot:before{content:''; position:absolute; top:18px; right:15px; transform:translateY(-50%); width:3px; height:3px; background-color:#fff; border-radius:100px;}
		.header .mo-btn .dot:nth-child(2){margin-top:7px;}
		.header .mo-btn .dot:nth-child(2):before{top:28px;}
		.header .logo img{max-width:130px;}			
		
		.header.sub .nav a{color:#fff;}
	}
	@media only screen and (max-width:560px){
		#parallax__title{top:18px}
		.header{padding:0 20px}
		.header .logo img{max-width:120px;}	
	}



	/* parallax__cont */
	#parallax__cont {
	  overflow: hidden;
	}
	.parallax__item {
	  width: 100%;
	  height: 100vh;
	  position: relative;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	#section2,
	#section4,
	#section6,
	#section8 {
	  background-color: #222;
	}
	.parallax__item__num {
	  position: absolute;
	  right: 20px;
	  bottom: 20px;
	  font-size: 5vw;
	  line-height: 1;
	}
	.parallax__item__img {
	  width: 10vw;
	  height: 10vw;
	  margin: 0; /* 1vw */
	  /*background-color: #fff;*/
	  background-size: cover;
	  background-position: center;
	}
	#section1 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/images14.jpg);
	}
	#section2 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/images15.jpg);
	}
	#section3 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/images03.jpg);
	}
	#section4 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/images04.jpg);
	}
	#section5 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/images05.jpg);
	}
	#section6 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/images06.jpg);
	}
	#section7 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/images07.jpg);
	}
	#section8 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/images08.jpg);
	}


	#section9 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/main-bg.jpg);
	}

	
	#section9-1 video{position:fixed; right:0; bottom:0; min-width:100vw; min-height:100vh}

	.main #section100{position:relative; z-index:9}
    :where(.hori-img-01,.hori-img-02,.hori-img-03,.hori-img-04,.hori-img-05){
		position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        background-size: cover;
        background-position: center;
		flex-direction:column;
	}
    :where(.hori-img-01,.hori-img-02,.hori-img-03,.hori-img-04,.hori-img-05) .parallax__item__img {
        
    }

	.pack{position:relative; z-index:100}
	.pack .txt-wrap,.hori-txt{
		position: absolute;
		  top: 160%;
		  left: 0;
		  width: 100%;
		  height: 100vh;
		  z-index: 10;
		  display:flex;
		  flex-direction:column;
		  align-items:center;
		  color:#fff;
	}
    .hori-txt .parallax__item__title {
        font-size: 5vw;
        z-index: 100;
        text-transform: uppercase;
        display: inline-block;
        color:#fff;
        text-align:center;
    }
	.hori-txt .parallax__item__txt {		
		padding-top:20px;
        font-size: 1.3vw;
		font-weight:300;
        z-index: 100;
        color:#fff;
        text-align:center;
    }

	@media only screen and (max-width:768px){
		.hori-txt .parallax__item__title {font-size:8vw;}
		.hori-txt .parallax__item__txt{font-size:3vw}
	}
	

	#horizontal .parallax__item__img{margin:0;}
    .hori-img-01 {
	  background-image: url(/assets/hn/assets/img/onestop-01.jpg);
	}
	.hori-img-02  {
	  background-image: url(/assets/hn/assets/img/onestop-02.jpg);
	}
	.hori-img-03  {
	  background-image: url(/assets/hn/assets/img/onestop-03.jpg);
	}
	.hori-img-04  {
	  background-image: url(/assets/hn/assets/img/onestop-04.jpg);
	}
	.hori-img-05 {
	  background-image: url(/assets/hn/assets/img/onestop-05.jpg);
	}


	/*
    #horizontal .parallax__item {
        width: 100%;
        height: 100vh;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    #horizontal .parallax__item__img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        background-size: cover;
        background-position: center;
    }
    #horizontal .parallax__item__title {
        font-size: 5vw;
        z-index: 100;
        text-transform: uppercase;
        display: inline-block;
        color:#fff;
        text-align:center;
    }
	#horizontal .parallax__item__txt {
		padding-top:20px;
        font-size: 1.3vw;
		font-weight:300;
        z-index: 100;
        color:#fff;
        text-align:center;
    }

	#horizontal .parallax__item__img{margin:0;}
    .hori-img-01 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/onestop-01.jpg);
	}
	.hori-img-02 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/onestop-02.jpg);
	}
	.hori-img-03 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/onestop-03.jpg);
	}
	.hori-img-04 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/onestop-04.jpg);
	}
	.hori-img-05 .parallax__item__img {
	  background-image: url(/assets/hn/assets/img/onestop-05.jpg);
	}

	*/

	/* option */
	/* #section3 .parallax__item__img {
				width: 100px;
				height: 100px;
				border-radius: 50px;
			} */
	#section5 {
	  flex-direction: column;
	}
	#section5 .parallax__item__text,
	#section6 .parallax__item__text {
	  font-size: 5vw;
	  text-transform: uppercase;
	  font-weight: bold;
      line-height:1;
	}
    #section5 .parallax__item__text.small{
        padding-bottom:20px; 
        font-size:1.5vw;
        font-weight:300;
    }
	#section7 .parallax__item__text {
	  font-size: 2.5vw;
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%, -50%);
	  /*background-color: #111;*/
	  color:#fff;
	  font-weight:600;
	  padding: 30px;
	  width: 100%;
	  text-align: center;
	  z-index:999;
	}
	.main-txt .bg{position:absolute; top:0; left:0; width:100%; height:100vh; background:#111; opacity:0; z-index:99}

	/*
	#section7 .parallax__item__text.t1{
		animation:txt-ani 1.5s 0s backwards
	}
	#section7 .parallax__item__text.t2{
		animation:txt-ani 1.5s 1.5s backwards
	}
	#section7 .parallax__item__text.t3{
		animation:txt-ani 1.5s 3s backwards
	}

	@keyframes txt-ani {
		0%{opacity:0}
		30%{opacity:1}
		100%{opacity:0}

	}
	
	*/

	.logo-fix{
		position:fixed;
		left: 50%;
		  top: 50%;
		  transform: translate(-50%, -50%);
		  color:#fff;
		  font-weight:600;
		  padding: 30px;
		  width: 100%;
		  text-align: center;
		  z-index:999
	}
	#section8 {
	  flex-direction: column;
	}
	#section8 .parallax__item__text {
	  font-size: 2vw;
	  line-height: 1.5;
	  text-transform: uppercase;
	}
	#section8 .parallax__item__img {
	  width: 100px;
	  height: 100px;
	  border-radius: 50%;
	}
	#section9 .parallax__item__img {
	  width: 200px;
	  height: 200px;
	  border-radius: 50%;
	}
    #section9 .parallax__item__img_small {
        width:auto;
        height:auto;
        position:absolute;
		text-align:center;
	}

	#parallax__cont {
	  overflow: hidden;
	}
	#horizontal {
	  display: flex;
	  flex-wrap: nowrap;
	  width: 500%;
	}
	#horizontal > section {
	  width: 100%;
	}




	@keyframes rotate {
  0%   { transform: rotateX(0) rotateZ(0); }
  20%  { transform: rotateX(60deg) rotateZ(0);  }
  40%  { transform: rotateX(60deg) rotateZ(60deg); }
  60%  { transform: rotateX(60deg) rotateZ(60deg) rotateX(90deg); }
  80%  { transform: rotateY(120deg) rotateX(120deg) rotateZ(30deg); }
  100% { transform: rotateY(0) rotateX(0) rotateZ(0); }
}

.frame {
  margin-left:auto;
  width: 500px;
  height: 500px;

  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
  overflow: hidden;
  /*background: #c33;*/
  -webkit-perspective: 1000px;
  perspective: 1000px;
}


.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

div.circle {
  width: 400px;
  height: 400px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  animation: rotate 5s infinite;
  transform-origin: center center;
}

div.side {
  background: rgba(255, 255, 255, 0.3);
  width: 400px;
  height: 400px;
  transform: rotateX(0deg);
  border-radius: 50%;
  position: absolute;
  background: rgba(255, 255, 255, 0.25);
}



.scroll{position:absolute; width:100%; text-align:center; z-index:999}
.scroll .img{position:relative; display:block; margin:0 auto; width:50px; height:80px; border-radius:100px; border:3px solid #fff;}
.scroll .img:before{content:''; animation:scroll 1s 0s infinite forwards; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:10px; height:10px; border-radius:10px; background-color:#fff;}
.scroll .txt{padding-top:15px; font-size:1.25rem}


@keyframes scroll{
	0%{
		top:10px;
	}
	70%,100%{
		top:35px;
		opacity:0;
	}
}


div.side:nth-child(2) { transform: rotateX(30deg); }
div.side:nth-child(3) { transform: rotateX(60deg); }
div.side:nth-child(4) { transform: rotateX(90deg); }
div.side:nth-child(5) { transform: rotateX(120deg); }
div.side:nth-child(6) { transform: rotateX(150deg); }




.n-inner{width:1400px; margin:0 auto;}
.n-inner.small{width:860px}
.know-how{padding:200px 0}
.know-how .tit{font-size:5.125rem; font-weight:800; line-height:1.35}
.know-how .tit .more{display:flex; align-items:center; margin-top:55px; color:var(--primary-color); font-size:2.125rem; font-weight:500;}
.know-how .tit .more span{position:relative; display:inline-block; margin-left:17px; width:24px; height:2px; background-color:var(--primary-color); transition:.3s all}
.know-how .tit .more span:before{content:''; position:absolute; right:0; top:50%; width:15px; height:15px; border-top:2px solid var(--primary-color); border-right:2px solid var(--primary-color); transform:translateY(-50%) rotate(45deg);}
.know-how .tit .more:hover span{margin-left:30px;}
.know-how .i1{width:860px; height:600px; background-image:url(/assets/hn/assets/img/knowhow-01.png);}
.know-how .i2{margin:320px 0 0 auto; width:500px; height:600px; background-image:url(/assets/hn/assets/img/knowhow-02.png);}
.know-how .i3{margin-top:350px; width:860px; height:600px; background-image:url(/assets/hn/assets/img/knowhow-03.png);}
.know-how .parallax__item__img{position:relative; background-size:cover;}
.know-how .parallax__item__img .txt-wrap{position:absolute; left:70px; bottom:-180px;}
.know-how .parallax__item__img .txt-wrap.right{top:50%; left:-315px; bottom:auto; text-align:right; transform:translateY(-50%)}
.know-how .parallax__item__img .txt-wrap .tit{font-size:4.375rem; font-weight:600; line-height:1.2}
.know-how .parallax__item__img .txt-wrap .txt{padding-top:30px; font-size:1.563rem;}

.partners h3{font-size:6.5rem; text-align:center;}
.partners ul{margin-top:100px; display:grid; grid-template-columns: repeat(4, 1fr); gap:50px 0; align-items:center;}
.partners ul.space{gap:67px 0}
.partners ul li{text-align:center; color:#333; font-size:1.75rem; font-weight:700; }
.partners ul li img{max-height:50px}
.partners ul li.vertical img{max-height:70px}
.partners .txt-flow{position:absolute; bottom:0; color:#333; font-size:12.5rem; font-weight:bold; line-height:1.15}

.partners .tab-con{margin-top:45px; text-align:center;}
.partners .tab-link{display:inline-block; padding:0 12px; cursor:pointer; color:#333; font-size:1.625rem; color:#aaa;font-weight:500; }
.partners .tab-link.on{color:#333; font-weight:700}
.partners .tab-content {display:none; color:#333;}
.partners .tab-content.on {display:block}



.project{background-color:#f1f1f1; color:#333;}
.project .txt-rotate{position:absolute; top:-80px;  right:100px; animation: rotate_image 6s linear infinite; transform-origin: 50% 50%; width:160px; height:160px; z-index:999}
.project .n-inner{position:relative; }
.project .swiper-slide{padding:80px;}
.project .proj-wrap{display:flex; align-items:center;}
.project .proj-wrap > div{width:50%; }
.project .proj-wrap .img{height:50vh; background-image:url(/assets/hn/assets/img/project-bg-01.jpg); background-repeat:no-repeat; background-position:center; background-size:cover; }
.project .proj-wrap.two .img{background-image:url(/assets/hn/assets/img/project-bg-02.jpg); background-position:top center}
.project .proj-wrap.three .img{background-image:url(/assets/hn/assets/img/project-bg-03.jpg); background-position:top center}
.project .proj-wrap.four .img{background-image:url(/assets/hn/assets/img/project-bg-04.jpg); background-position:top center}
.project .proj-wrap.five .img{background-image:url(/assets/hn/assets/img/project-bg-05.jpg); background-position:top center}
.project .proj-wrap.six .img{background-image:url(/assets/hn/assets/img/project-bg-06.jpg); background-position:top center}
.project .proj-wrap.seven .img{background-image:url(/assets/hn/assets/img/project-bg-07.jpg); background-position:top center}
.project .proj-wrap.eight .img{background-image:url(/assets/hn/assets/img/project-bg-08.jpg); background-position:top center}
.project .proj-wrap .txt{display:flex; flex-direction:column; justify-items:center; padding-left:80px; text-align:center;}
.project .proj-wrap .txt .logo{position:absolute; top:80px; right:80px; max-width:180px; max-height:60px; font-size:1.375rem; font-weight:600; color:var(--primary-color)}
.project .proj-wrap .txt .name{font-size:1.5rem; font-weight:500; color:var(--primary-color);} /*#333*/
.project .proj-wrap .txt .main{padding-top:20px; font-size:2.875rem; font-weight:600; line-height:1.3}
.project .swiper-pagination{bottom:-50px!important;}
.project .swiper-pagination-bullet {margin:0 5px; width: 52px; height: 6px; background: #ddd; opacity: 1; border-radius:0;}
.project .swiper-pagination-bullet-active { background-color:var(--primary-color);}


@keyframes rotate_image{
    100% {
        transform: rotate(360deg);
    }
}

.footer{padding:55px 0; background-color:#fff; border-top:1px solid #ddd; color:#888;}
.footer .n-inner{display:flex; gap:25px 45px;}
.footer .img{width:238px; height:60px; background:url(/assets/hn/assets/img/f-logo.png) no-repeat top center / contain;}
.footer .txt{}
.footer .txt .info{display:flex; flex-wrap:wrap; gap:2px 30px; padding-top:3px; }
.footer .txt .info span{letter-spacing:0;}
.footer .txt .info a{font-weight:600; color:#333;}



@media only screen and (max-width:1024px){
	.know-how .tit{font-size:3.75rem}
	.frame{width:300px; height:300px;}
	div.circle,div.side{width:200px; height:200px;}
	.know-how .parallax__item__img .txt-wrap{left:40px; bottom:-130px}
	.know-how .parallax__item__img .txt-wrap.right{left:-250px}
	.know-how .i1,.know-how .i3{width:600px; height:410px;}
	.know-how .i2{width:400px; height:480px;}
	.know-how .parallax__item__img .txt-wrap .tit{font-size:3.5rem}
	.know-how .parallax__item__img .txt-wrap .txt{padding-top:20px; font-size:1.375rem}
	.project .proj-wrap{display:block}
	.project .proj-wrap > div{width:100%;}
	.project .proj-wrap .txt{padding-top:40px; padding-left:0}
	.project .proj-wrap .txt .main{padding-top:10px; font-size:2rem}
	.project .txt-rotate{top:-60px; right:60px}
	.project .txt-rotate,.project .txt-rotate img{width:120px; height:120px;}
	.partners ul li img{max-width:60%}
	.partners h3{font-size:5rem}

}

@media only screen and (max-width:768px){
	.scroll .txt span{display:none}
	.scroll .img:before{top:35px;}


	@keyframes scroll{
		0%{
			top:35px;
		}
		70%,100%{
			top:10px;
			opacity:0;
		}
	}




	#section7 .parallax__item__text{font-size:6vw}	
	#section5 .parallax__item__text.small{font-size:4vw;}
	#section5 .parallax__item__text, #section6 .parallax__item__text{font-size:8vw;}

	#horizontal .parallax__item__title{font-size:8vw; line-height:1.1}
	#horizontal .parallax__item__txt{font-size:3.5vw}

	#section9 .parallax__item__img_small img{max-width:260px}

	.frame{position:absolute; right:35px; bottom:500px; width:180px; height:180px;}
	div.circle,div.side{width:180px; height:180px;}
	.know-how .i1, .know-how .i3{width:500px; height:340px}

	.footer{padding:45px 0}
	.footer .n-inner{display:block;}
	.footer .img{width:150px; height:45px }
	.footer .txt .info{}

	.partners ul.space{gap:71px 0}
	.partners ul li{font-size:1.5rem;}
	.partners .tab-con{margin-top:30px;}
	.partners .tab-link{font-size:1.375rem}
}

@media only screen and (max-width:560px){
	#section7 .parallax__item__text{font-size:8vw}	
	#section9 .parallax__item__img_small img{max-width:70%}
	#section5 .parallax__item__text.small{font-size:4.5vw;}	
	#section5 .parallax__item__text, #section6 .parallax__item__text{font-size:11vw;}
	#section5 .parallax__item__text.t1{padding-top:5px;}

	.pack .txt-wrap, .hori-txt{top:160%}

	.hori-txt .parallax__item__title{font-size:10vw; line-height:1.15}
	.hori-txt .parallax__item__txt{font-size:4.5vw}

	.know-how .tit{font-size:2.5rem}
	.know-how .tit .more{margin-top:35px; font-size:1.875rem;}

	.know-how .i1, .know-how .i3{width:350px; height:280px}
	.know-how .i2{margin-top:250px; width:250px; height:300px;}
	.know-how .i3{margin-top:300px}
	.know-how .parallax__item__img .txt-wrap.right{left:-100px}
	.know-how .parallax__item__img .txt-wrap{left:20px; bottom:-80px}
	.know-how .parallax__item__img .txt-wrap .tit{font-size:2.25rem}
	.know-how .parallax__item__img .txt-wrap .txt{padding-top:5px; font-size:1.125rem}

	.partners h3{font-size:3.5rem}
	.partners ul{margin-top:50px; grid-template-columns:repeat(3, 1fr); gap:15px 0}
	.partners ul.space{gap:27px 0}
	.partners ul li img{max-height:40px}
	.partners ul li.vertical img{max-height:60px}
	.partners ul li.vertical.small img{max-height:25px;}
	.partners ul li.vertical.small-02 img{max-height:17px;}
	.partners ul li.vertical.small-03 img{max-height:40px;}
	.partners .txt-flow{font-size:8rem}




	.project .txt-rotate{right:auto; left:30px;}
	.project .n-inner{padding:0 20px; width:100%}
	.project .proj-wrap .txt .logo{top:34px; right:32px; max-height:21px;}
	.project .proj-wrap.three .txt .logo{top:25px; max-height:39px;}
	.project .proj-wrap.four .txt .logo{top:25px; max-height:35px;}
	.project .proj-wrap.five .txt .logo{max-width:155px;}
	.project .proj-wrap.six .txt .logo{top:22px; max-height:33px;}
	.project .proj-wrap.eight .txt .logo{top:22px; max-height:40px;}
	.project .proj-wrap .img{height:35vh;}
	.project .swiper-slide{padding:70px 35px 45px;}
	.project .swiper-pagination{bottom:-35px!important}
	.project .proj-wrap .txt{padding-top:25px;}
	.project .proj-wrap .txt .name{font-size:1rem}
	.project .proj-wrap .txt .main{padding-top:5px; font-size:1.5rem}

	.project .swiper-pagination-bullet{width:30px;}

	.footer .img{width:130px; height:38px}
	.footer .txt{font-size:.875rem}	
	.footer .txt .info{display:block; padding-top:0; line-height:1.4}
	.footer .txt .info span{word-break:auto-phrase; padding-right:15px; font-size:.875rem}

	.logo-fix img{max-width:180px}
	
	.partners ul li{font-size:1.125rem;}

}






/* 회사소개 */
.sub #section1{flex-direction:column; background-color:#fff; color:#303030;}
.sub #section1 h2{font-family: "Poppins", sans-serif;}
.sub #section1 .txt{padding-top:20px; font-size:1.5rem; font-weight:700}
.sub #section1 .arrow{position:absolute; bottom:80px; width:3px; height:50px; animation: arrow-down .7s ease-in-out alternate infinite; background-color:#000; border-radius:2px;}
.sub #section1 .arrow:before{content:''; position:absolute; margin-left:-1px; width:17px; height:17px; bottom:5px; border-left:3px solid #000; border-bottom:3px solid #000; transform:rotate(-45deg) translateX( -50%)}
.sub #section1 .parallax__item{flex-direction:column}
.sub #section1 .parallax__item__img{position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background-color: #fff; background-size: cover; background-position: center;} 
.sub #section1 .parallax__item__img::after{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.7); z-index: 1;}
.sub #section1 .parallax__item__title{font-size: 5vw; z-index: 100; text-transform: uppercase; display: inline-block;}

.company .company-intro#section2{flex-direction:column; background-color:#fff; color:#333;}
.company #section2 .parallax__item__img{width:50vw; height:50vh; background-image:url(/assets/hn/assets/img/company-main.jpg);}       
.company #section2 .big-txt-wrap{margin-top:50px;}
.company #section2 .big-txt-wrap p{font-size:6.5rem; font-weight:600; font-family: "Poppins", sans-serif; color:#111;}
.company #section2 .big-txt-wrap p:nth-child(2){text-align:right;}
.company #section2 .info-txt{margin-top:-100px; text-align:center; font-size:1.875rem; font-weight:600}

.company #section3{background-color:#fff; color:#333;}
.company #section3.company-vision .img,.company #section3.company-vision .txt{display:flex; align-items:center; justify-content:center; flex-direction:column; width:50vw; height:100vh;}
.company #section3.company-vision .img{ background:url(/assets/hn/assets/img/company-vision-bg-01.jpg) no-repeat center /cover; }
.company #section3.company-vision .txt h2{font-family: "Poppins", sans-serif; font-size:6rem; font-weight:600}
.company #section3.company-vision .txt p{padding-top:45px; font-size:1.5rem; text-align:center; font-weight:500}

.company #section4{background-color:#fff; color:#333;}
.company #section4.company-vision .img,.company #section4.company-vision .txt{display:flex; align-items:center; justify-content:center; flex-direction:column; width:50vw; height:100vh;}
.company #section4.company-vision .img{ background:url(/assets/hn/assets/img/company-vision-bg-01.jpg) no-repeat center /cover; }
.company #section4.company-vision .txt h2{font-family: "Poppins", sans-serif; font-size:6rem; font-weight:600}
.company #section4.company-vision .txt p{padding-top:45px; font-size:1.5rem; text-align:center; font-weight:500}
.company #section4.company-vision.two .img{ background:url(/assets/hn/assets/img/company-vision-bg-02.jpg) no-repeat center /cover; }

@keyframes arrow-down{
    100% {
        bottom:50px;
    }
}

.company #section5{flex-direction:column; background-color:#fff; color:#eeeff0}
.company #section5 .parallax__item__text{font-size: 9.5vw; text-transform: uppercase; font-weight: bold;}
.company #section5 p{margin-top:-75px; color:#333; font-weight:600; font-size:1.75rem; text-align:center; z-index:3; line-height:1.9}

.company #section6.project{color:#fff; background-image:url(/assets/hn/assets/img/company-project-bg-01.jpg); background-repeat:no-repeat; background-size:cover; background-position:center;}
.company .project .swiper-wrapper{}
.company .project .swiper-slide{display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:transparent;}
.company .project .swiper-slide h2{font-size:9vw; font-family: "Poppins", sans-serif; font-weight:600}
.company .project .swiper-slide p{padding-top:60px; font-size:3.75rem; font-weight:500}
.company .project .swiper-slide ul{padding-top:15px; }
.company .project .swiper-slide ul li{padding:5px 0; font-size:1.5rem;}
.company .project .swiper-pagination{bottom:-50px!important;}
.company .project .swiper-pagination-bullet {margin:0 5px; width: 52px; height: 6px; background: #ddd; opacity: 1; border-radius:0;}
.company .project .swiper-pagination-bullet-active { background-color:var(--primary-color);}




@media only screen and (max-width:1024px){
	.sub #section1 .parallax__item__title{font-size:8vw;}
	.company #section5 .parallax__item__text{font-size:16vw;}
}
@media only screen and (max-width:768px){
	.sub #section1 .txt{padding-top:15px;}
	.sub #section1 .arrow{height:40px; bottom:100px}

	@keyframes arrow-down{
		100% {
			bottom:60px;
		}
	}

	.company #section2 .parallax__item__img{width:80vw; height:40vh}
	.company #section2 .big-txt-wrap{margin-top:20px;}
	.company #section2 .big-txt-wrap p{font-size:3rem}
	.company #section2 .info-txt{margin-top:-20px; font-size:1.25rem}

	.company #section3.company-vision .img,.company #section3.company-vision .txt,.company #section4.company-vision .img,.company #section4.company-vision .txt{width:100vw;}
	.company #section3.company-vision .img,.company #section4.company-vision .img{position:absolute; }
	.company #section3.company-vision .img:before{content:''; position:absolute; left:0; width:100%; height:100%; background:rgba(0,0,0,.5);}
	.company #section3.company-vision .txt,.company #section4.company-vision .txt{z-index:999; color:#fff;}
	.company #section3.company-vision .txt h2,.company #section4.company-vision .txt h2{font-size:3.25rem;}
	.company #section3.company-vision .txt p,.company #section4.company-vision .txt p{padding-top:25px; font-size:1rem; line-height:1.9}

	.company .project .swiper-slide h2{font-size:5rem}
	.company .project .swiper-slide p{padding-top:45px; font-size:2rem; line-height:1.3; font-weight:600}
	.company .project .swiper-slide ul li{padding:3px 0; font-size:1.125rem}
}
@media only screen and (max-width:560px){
	.sub #section1 .parallax__item__title{font-size:10vw;}
	.company #section5 .parallax__item__text{font-size:19vw;}
	.company #section5 p{margin-top:-35px; padding:0 50px; font-size:1.5rem; line-height:1.7}
}



/* 서비스 */
.service-main{font-size: 6.25rem; text-transform: uppercase; font-weight: bold; background:url(/assets/hn/assets/img/service-main-bg.jpg) no-repeat center /cover; text-align:center;}
.service .service-b{padding:330px 0 150px; background-color:#fff; color:#111; text-align:center;}
.service .service-b h2{font-size:6.25rem;}
.service .service-b .tit{padding-top:50px; font-size:1.5rem; font-weight:400; line-height:1.7}
.service .service-b ul{padding-top:150px; display:grid; grid-template-columns: repeat(2, 1fr); gap:150px 0}
.service .service-b ul li .sub-txt{padding-top:45px; font-size:1.5rem; color:var(--primary-color); font-weight:600; letter-spacing:0; font-family: "Poppins", sans-serif;}
.service .service-b ul li h3{padding-top:15px; font-size:2.125rem; font-weight:700; color:#003333; }
.service .service-b ul li .txt{padding:30px 150px 0; font-size:1.25rem; font-weight:400; letter-spacing:-.2px; line-height:1.6; color:#555;}
.service .service-b ul li a.link{display:inline-block; margin-top:27px; padding:12px 25px; font-size:1.188rem; background-color:var(--primary-color); color:#fff; border-radius:50px; letter-spacing:0; font-weight:500;}
.service .service-b ul li a.link:hover{background:var(--primary-hover-color)}
.service .aio-txt{display:block; padding:300px 0; color:#efefef; font-size:10vw; font-weight:600; font-family: "Poppins", sans-serif; letter-spacing:-2px}

@media only screen and (max-width:1024px){
	.service .service-b h2{font-size:5rem}
	.service .service-b{padding:330px 0 180px}
	.service .service-b ul li .txt{padding:30px 50px 0}
	.service .aio-txt{padding:200px 0}
}

@media only screen and (max-width:768px){
	.service-main{font-size:3.25rem}
	.service .service-b h2{font-size:4rem}
	.service .service-b .tit{padding-top:35px; font-size:1.25rem}
	.service .service-b ul{padding-top:120px; gap:120px 40px}
	.service .service-b ul li{text-align:center;}
	.service .service-b ul li img{max-height:150px}
	.service .service-b ul li .txt{padding:30px 0 0;}
	.service .service-b ul li .sub-txt{padding-top:35px; font-size:1.25rem}
	.service .service-b ul li h3{padding-top:5px; font-size:2rem}

	.service .service-b ul li a.link{margin-top:15px; font-size:1.063rem; padding:8px 17px}
}
@media only screen and (max-width:560px){
	.service .aio-txt{padding:170px 0; font-size:20vw; line-height:1; font-weight:700}
	.service-main{font-size:3rem}
	.service .service-b{padding:220px 0 100px;}
	.service .service-b h2{font-size:2.625rem}
	.service .service-b .tit{padding-top:22px; font-size:1.063rem}
	.service .service-b ul{padding-top:80px; gap:80px 25px}
	.service .service-b ul li img{max-height:87px;}
	.service .service-b ul li .sub-txt{padding-top:18px; font-size:.75rem}
	.service .service-b ul li h3{font-size:1.25rem; line-height:1.3}
	.service .service-b ul li .txt{padding:6px 0 5px; font-size:.813rem; }
}












.n-inner.medium{width:1150px}
.img-max{max-width:100%}
.service-booking{padding-bottom:100px; color:#333;}
.service-booking .top{margin-top:150px; padding:200px 0 120px; text-align:center;}
.service-booking .top .sub-tit{font-size:1.875rem; font-weight:600}
.service-booking .top h2{padding-top:30px; font-size:4rem; font-weight:700; line-height:1.3;}
.service-booking .top .icon-wrap{padding-top:55px;}

.service-booking .why-hn{padding:120px 0 240px; background:linear-gradient(to bottom, var(--primary-color) 40%, transparent 100%); text-align:center; color:#fff;}
.service-booking .why-hn .icon-person{max-width:230px;}
.service-booking .why-hn .sub-tit{padding-top:30px; font-size:1.875rem; color:rgba(255,255,255,.4); font-weight:500; letter-spacing:0}
.service-booking .why-hn h2{padding-top:25px; font-size:3.375rem; line-height:1.25}
.service-booking .why-hn .txt{margin-top:70px; padding:0 25px; display:grid; grid-template-columns:repeat(auto-fit, minmax(40%, auto)); font-size:1.125rem; text-align:left; gap:50px;}
.service-booking .why-hn .txt strong{display:block; padding-bottom:5px; font-size:1.25rem; font-weight:600}
.service-booking .why-hn .txt p{line-height:1.8; letter-spacing:-.2px}
.service-booking .why-hn .boxes{padding-top:360px;}
.service-booking .why-hn .boxes ul{position:relative;}
.service-booking .why-hn .boxes ul li{position:absolute; width:260px; right:0; display:inline-block; padding:11px 30px; background-color:#fff; border-radius:10px; color:#5db8f3; font-size:1.75rem; font-weight:600}
.service-booking .why-hn .boxes li:nth-child(1){animation:drop 1s 0.2s alternate forwards; top:0; left:-100px; transform:rotate(-10deg); margin-top:-70px}
.service-booking .why-hn .boxes li:nth-child(2){animation:drop 1s 0.3s alternate forwards; width:320px; top:-58px; left:5%; transform:rotate(15deg); margin-top:-70px}
.service-booking .why-hn .boxes li:nth-child(3){animation:drop 1s 0.2s alternate forwards; width:280px; top:48px; left:15%; transform:rotate(-10deg); margin-top:-70px}
.service-booking .why-hn .boxes li:nth-child(4){animation:drop 1s 0.5s alternate forwards; padding:20px 20px 10px 20px; width:130px; top:-95px; left:30%; border-radius:30px; margin-top:-70px}
.service-booking .why-hn .boxes li:nth-child(4) img{max-width:100px;}
.service-booking .why-hn .boxes li:nth-child(5){animation:drop 1s 0.3s alternate forwards; top:0; right:39%; transform:rotate(2deg); margin-top:-70px}
.service-booking .why-hn .boxes li:nth-child(6){animation:drop 1s 0.1s alternate forwards; width:240px; top:-58px; right:30%; transform:rotate(2deg); margin-top:-70px}
.service-booking .why-hn .boxes li:nth-child(7){animation:drop 1s 0.5s alternate forwards; top:60px; right:18%; transform:rotate(4deg); margin-top:-70px}
.service-booking .why-hn .boxes li:nth-child(8){animation:drop 1s 0.3s alternate forwards; width:130px; top:-125px; right:15%; transform:rotate(4deg); margin-top:-70px}
.service-booking .why-hn .boxes li:nth-child(8) img{max-width:80px;}
.service-booking .why-hn .boxes li:nth-child(9){animation:drop 1s 0.5s alternate forwards; width:320px; top:-20px; right:8%; transform:rotate(-10deg); margin-top:-70px}
.service-booking .why-hn .boxes li:nth-child(10){animation:drop 1s 0.6s alternate forwards; width:360px; top:60px; right:-10%; transform:rotate(15deg); margin-top:-70px}

@keyframes drop{
	from{margin-top:-70px}
	to{margin-top:0}
}



.service-booking .booking-info{padding-top:200px; text-align:center;}
.service-booking .booking-info .sub-tit{font-size:1.375rem; color:var(--primary-color); font-weight:500; letter-spacing:0}
.service-booking .booking-info h2{padding-top:15px; font-size:3.75rem}
.service-booking .booking-info .sub-txt{padding-top:35px; font-size:1.375rem; color:#666; font-weight:400; line-height:1.6;}
.service-booking .booking-info .n-inner.first{margin-top:110px}
.service-booking .booking-info .n-inner{margin-top:30px; padding:90px; background:#eaf4fd; border-radius:20px; text-align:left;}

.service-booking .booking-info .inner-con .con-sub-tit{font-size:1.25rem; color:#666; letter-spacing:0; font-weight:600}
.service-booking .booking-info .inner-con .info-txt-wrap{display:flex; gap:0 70px; padding-top:20px;}
.service-booking .booking-info .inner-con .info-txt-wrap h3{font-size:2.75rem; color:var(--primary-color); line-height:1.2}
.service-booking .booking-info .inner-con .info-txt-wrap p{font-size:1.125rem; font-weight:500; line-height:1.8}
.service-booking .booking-info .inner-con .info-img-wrap{position:relative; display:flex; justify-content:space-between; align-items:end; padding-top:25px;}
.service-booking .booking-info .inner-con .info-img-wrap ul li{display:flex; align-items:center;}
.service-booking .booking-info .inner-con .info-img-wrap ul li img{display:block; position:relative; z-index:1}
.service-booking .booking-info .inner-con .info-img-wrap ul li span{display:inline-block; margin-left:-25px; width:330px; padding:13px 28px 13px 40px; background-color:#b3c7d2; color:#fff; font-size:1.375rem; border-radius:0 100px 100px 0; letter-spacing:-.2px}
.service-booking .booking-info .inner-con .info-img-wrap ul li:nth-child(2) span{background-color:var(--primary-color); font-weight:500}
.service-booking .booking-info .inner-con .info-img-wrap.period ul{display:flex; gap:0 10px}
.service-booking .booking-info .inner-con .info-img-wrap.period ul li{display:flex; align-items:center; justify-content:center; flex-direction:column; width:200px; height:200px; border-radius:100px}
.service-booking .booking-info .inner-con .info-img-wrap.period ul li:first-child{background-color:#b3c7d2}
.service-booking .booking-info .inner-con .info-img-wrap.period ul li:first-child img{filter:grayscale(.75); opacity:.8}
.service-booking .booking-info .inner-con .info-img-wrap.period ul li:nth-child(2){background-color:var(--primary-color); }
.service-booking .booking-info .inner-con .info-img-wrap.period ul li span{padding:0; margin:10px 0 0; background:none; width:auto; text-align:center; line-height:1.2}
.service-booking .booking-info .inner-con .info-img-wrap.period ul li img{max-width:64px;}

.service-booking .booking-info .inner-con .info-img-wrap.exception ul li{padding:15px 28px; background-color:#fff; border:1px solid #ddd; border-radius:100px;}
.service-booking .booking-info .inner-con .info-img-wrap.exception ul li:not(:last-child){margin:0 0 10px}
.service-booking .booking-info .inner-con .info-img-wrap.exception ul li img{max-width:25px;}
.service-booking .booking-info .inner-con .info-img-wrap.exception ul li span{margin:0; padding:0 0 0 10px; width:auto; background:none; color:var(--primary-color); font-weight:500; font-size:1.25rem; line-height:1.3}
.service-booking .booking-info .inner-con .info-img-wrap.exception p.txt{padding:0 0 10px; font-size:1.125rem; color:#868a8d; font-weight:400; letter-spacing:0; text-align:center; line-height:1.3}

.service-booking .booking-info .inner-con.other{text-align:center}
.service-booking .booking-info .inner-con.other .info-txt-wrap{display:block}
.service-booking .booking-info .inner-con.other .info-img-wrap{margin-top:45px; justify-content:space-evenly}
.service-booking .booking-info .inner-con.other .info-img-wrap .box{padding:0 25px 40px; background-color:#fff; border-radius:20px; width:30%;}
.service-booking .booking-info .inner-con.other .info-img-wrap .box img{margin-top:-30px; max-height:90px;}
.service-booking .booking-info .inner-con.other .info-img-wrap .box img.big{max-width:140px}
.service-booking .booking-info .inner-con.other .info-img-wrap .box h4{padding-top:25px; font-size:1.875rem; }
.service-booking .booking-info .inner-con.other .info-img-wrap .box p{padding-top:20px; font-size:1.188rem; font-weight:400; color:#9bacb5}

.service-booking .booking-kind{padding-top:100px; text-align:center;}
.service-booking .booking-kind .n-inner{padding-top:130px;}
.service-booking .booking-kind .sub-tit{font-size:1.375rem; font-weight:600; color:var(--primary-color)}
.service-booking .booking-kind h3{padding-top:20px; font-size:3.5rem}
.service-booking .booking-kind p{padding-top:35px; font-size:1.313rem; color:#666; font-weight:400; letter-spacing:-.2}
.service-booking .booking-kind ul{margin-top:90px;}
.service-booking .booking-kind ul li{display:inline-block; margin:0 55px;}
.service-booking .booking-kind ul li img{display:block;}
.service-booking .booking-kind ul li span{font-size:1.5rem; font-weight:500}
.service-booking .booking-kind .sc{padding-top:60px;}
.service-booking .booking-kind .sc img{max-width:100%}

.service-d.main .btn-area{margin-bottom:0; background:none; }
.service-d .btn-area{position:sticky; bottom:0; margin:70px 0; padding:20px 0; text-align:center; background:linear-gradient(transparent,rgba(255,255,255,.5)); z-index:99999}
.service-d .btn-area a{display:inline-flex; align-items:center; justify-content:center; margin:0 6px; padding:20px 45px; background:linear-gradient(#1e97ce,#22ced5); border-radius:100px; color:#fff; font-size:1.5rem; font-weight:600; opacity:1; box-shadow:0 0 10px rgba(0,0,0,.3)}
.service-d .btn-area a:hover{box-shadow:0 0 15px rgba(0,0,0,.5)}
.service-d .btn-area a img{margin-right:10px; max-width:38px;}
.service-d .btn-area a.qna{background:#fff; color:#3c4466;}

.service-d.service-onoff .btn-area{margin-top:-20px;}
.service-d.service-sales .btn-area{margin-top:-20px;}


@media only screen and (max-width:1400px){
	.n-inner{width:92%}
	.service-booking .why-hn .boxes li:nth-child(9){top:12px; right:0; transform:rotate(10deg)}
	.service-booking .why-hn .boxes li:nth-child(10){display:none}

	.service-booking .booking-info .n-inner.first{margin-top:80px;}
	.service-booking .booking-info .n-inner{}

	.service-booking .booking-info .inner-con .info-img-wrap.exception{align-items:center; gap:0 30px;}
}
@media only screen and (max-width:1200px){
	.n-inner.medium{width:92%}	
	.service-booking .booking-info .n-inner{padding:80px 60px 70px 80px;}
	.service-booking .booking-info .inner-con .con-sub-tit{font-size:1.125rem}
	.service-booking .booking-info .inner-con .info-img-wrap ul li img{max-width:75px;}
	.service-booking .booking-info .inner-con .info-img-wrap ul li span{width:300px; font-size:1.25rem}
	.service-booking .booking-info .inner-con .info-txt-wrap{padding-top:18px; gap:0 50px}
	.service-booking .booking-info .inner-con .info-txt-wrap h3{font-size:2.5rem}
	.service-booking .booking-info .inner-con .info-txt-wrap p{font-size:1.063rem; line-height:1.7}
	.service-booking .booking-info .inner-con .info-img-wrap.exception ul li{padding:13px 25px;}
	.service-booking .booking-info .inner-con .info-img-wrap.exception ul li:not(:last-child){margin:0 0 7px;}
	.service-booking .booking-info .inner-con .info-img-wrap.exception ul li span{font-size:1rem; white-space:nowrap}
	.service-booking .booking-info .inner-con .info-img-wrap.exception p.txt{font-size:1rem}

	.service-booking .booking-info .inner-con .info-img-wrap.period ul li{width:180px; height:180px;}
	.service-booking .booking-info .inner-con .info-img-wrap.period ul li span{font-size:1.188rem}

	.service-booking .booking-info .inner-con.other .info-img-wrap .box h4{font-size:1.5rem}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box p{padding-top:10px; font-size:1.063rem}
}
@media only screen and (max-width:1024px){
	.service-booking .top{margin-top:100px; padding:150px 0 80px}
	.service-booking .top .sub-tit{font-size:1.5rem}
	.service-booking .top h2{font-size:3.75rem}
	.service-booking .top .icon-wrap img{max-width:300px;}
	.service-booking .why-hn .icon-person{max-width:180px}
	.service-booking .why-hn .txt{margin-top:65px}
	.service-booking .why-hn h2{font-size:3.25rem}
	.service-booking .why-hn .boxes{padding-top:260px}
	.service-booking .why-hn .boxes ul li{width:300px; font-size:1.5rem}
	.service-booking .why-hn .boxes li:nth-child(4){top:-150px}
	.service-booking .why-hn .boxes li:nth-child(6){transform:rotate(-10deg)}

	.service-booking .booking-info{padding-top:120px;}

	.service-booking .booking-info .n-inner.first{margin-top:60px;}
	.service-booking .booking-info .inner-con .info-img-wrap > div:first-child{position:absolute; bottom:7px}
	.service-booking .booking-info .inner-con .info-img-wrap.exception{display:block}
	.service-booking .booking-info .inner-con .info-img-wrap.exception > div:first-child{position:relative; display:flex; gap:0 7px; justify-content:center; align-items:center;}
	.service-booking .booking-info .inner-con .info-img-wrap.exception p.txt{padding:0}
	.service-booking .booking-info .inner-con .info-img-wrap.exception ul{display:flex; gap:0 5px; justify-content:center;}
	.service-booking .booking-info .inner-con .info-img-wrap.exception ul li:not(:last-child){margin:0}
	.service-booking .booking-info .inner-con .info-img-wrap.period ul li{width:150px; height:150px}
	.service-booking .booking-info .inner-con .info-img-wrap.period ul li img{max-width:58px}
	.service-booking .booking-info .inner-con .info-img-wrap.period ul li span{font-size:1.125rem}
	.service-booking .booking-info .inner-con .info-img-wrap ul li span{width:280px;}

	.service-booking .booking-info .inner-con.other .info-img-wrap .box{position:relative;}
	.service-booking .booking-info .inner-con.other .info-img-wrap > div:first-child{bottom:0}

	.service-booking .booking-info .n-inner.other{padding:80px 40px 60px}

	.service-d .btn-area{margin:0 0 30px;}

}

@media only screen and (max-width:860px){
	.service-booking .top{margin-top:90px; padding:150px 0 70px}
	.service-booking .top h2{padding-top:22px; font-size:3.25rem}
	.service-booking .top .icon-wrap{padding-top:50px;}
	.service-booking .top .icon-wrap img{max-width:280px}

	.service-d .btn-area a{padding:15px 35px; font-size:1.375rem}
	.service-d .btn-area a img{max-width:32px;}
	.service-booking .why-hn .sub-tit{font-size:1.75rem}
	.service-booking .why-hn h2{font-size:3rem}
	.service-booking .why-hn .txt{gap:0 30px;}
	.service-booking .why-hn .txt p{line-height:1.6}
	.service-booking .why-hn .boxes ul li{width:200px; font-size:1.25rem}
	.service-booking .why-hn .boxes li:nth-child(1){left:-50px; transform:rotate(7deg)}
	.service-booking .why-hn .boxes li:nth-child(2){width:250px; top:-35px; transform:rotate(2deg)}
	.service-booking .why-hn .boxes li:nth-child(9){width:250px}
	.service-booking .why-hn .boxes li:nth-child(3){top:40px; left:7%; width:220px}
	.service-booking .why-hn .boxes li:nth-child(4){left:37%; top:-95px; padding-left:15px; width:100px; border-radius:20px}
	.service-booking .why-hn .boxes li:nth-child(4) img{max-width:75px;}
	.service-booking .why-hn .boxes li:nth-child(6){top:-40px; right:22%; transform:rotate(10deg); width:170px}
	.service-booking .why-hn .boxes li:nth-child(8){padding-left:20px; width:100px; top:-75px; right:10%}
	.service-booking .why-hn .boxes li:nth-child(8) img{max-width:60px}
	.service-booking .why-hn .boxes li:nth-child(7){right:15%; transform:rotate(5deg)}
	.service-booking .why-hn .boxes li:nth-child(9){margin-top:-10px; right:-1%; transform:rotate(-10deg)}

	.service-booking .booking-info .n-inner{padding:70px 60px 50px}
	.service-booking .booking-info .inner-con .con-sub-tit{text-align:center;}
	.service-booking .booking-info .inner-con .info-txt-wrap{display:block; padding-top:13px; text-align:center;}
	.service-booking .booking-info .inner-con .info-txt-wrap p{padding-top:20px; line-height:1.6; letter-spacing:-.4px; color:#555; font-weight:400}
	.service-booking .booking-info .inner-con .info-txt-wrap p br{display:none; }

	.service-booking .booking-info .inner-con .info-img-wrap{padding-top:30px; }
	.service-booking .booking-info .inner-con .info-img-wrap.exception{padding-top:50px;}
	.service-booking .booking-info .inner-con .info-img-wrap.exception > div:first-child{display:block}
	.service-booking .booking-info .inner-con .info-img-wrap.exception p.txt{padding-bottom:10px;}
	.service-booking .booking-info .inner-con .info-img-wrap.exception ul li{padding:10px 20px;}
	.service-booking .booking-info .inner-con .info-img-wrap.exception ul li span{padding-left:7px;}
}
@media only screen and (max-width:768px){
	.service-booking .top{padding:130px 0 60px}
	.service-booking .top .sub-tit{font-size:1.25rem; letter-spacing:-.3px}
	.service-booking .top h2{font-size:3rem}
	.service-booking .top .icon-wrap{padding-top:45px;}
	.service-booking .top .icon-wrap img{max-width:250px;}
	.service-booking .why-hn h2{font-size:2.75rem}
	.service-booking .why-hn .txt p{line-height:1.5rem; font-size:1rem}
	.service-booking .booking-info h2{font-size:3rem}
	.service-booking .booking-info .sub-txt{padding-top:25px; font-size:1.25rem}
	.service-booking .booking-info .n-inner.first{margin-top:50px;}
	.service-booking .booking-info .n-inner{padding:60px 40px 40px}
	.service-booking .booking-info .inner-con .info-txt-wrap h3{font-size:2.25rem}
	.service-booking .booking-info .inner-con .info-img-wrap ul li span{padding:12px 25px 12px 35px;}

	.service-booking .booking-info .inner-con .info-img-wrap ul li img{max-width:60px;}
	.service-booking .booking-info .inner-con .info-img-wrap ul li span{padding:13px 25px 13px 35px; font-size:1.125rem; width:240px}
	.service-booking .booking-info .inner-con .info-img-wrap.period ul li{width:120px; height:120px;}
	.service-booking .booking-info .inner-con .info-img-wrap.period ul li span{margin-top:7px; font-size:1rem}
	.service-booking .booking-info .inner-con .info-img-wrap.period ul li img{max-width:45px}
	.service-booking .booking-info .inner-con .info-img-wrap.exception{padding-top:35px;}

	.service-booking .booking-info .n-inner.other{padding:60px 30px;}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box{padding:0 20px 30px; height:185px}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box h4{font-size:1.375rem}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box img{max-height:80px;}
}
@media only screen and (max-width:650px){
	.service-booking .top{padding:100px 0 50px}
	.service-booking .top h2{padding-top:16px; font-size:2.25rem}
	.service-booking .top .icon-wrap{padding-top:35px}
	.service-booking .top .icon-wrap img{max-width:180px}
	.service-booking .top .sub-tit{font-size:1rem}

	.service-booking .why-hn{padding:100px 0 200px;}
	.service-booking .why-hn .icon-person{max-width:150px}
	.service-booking .why-hn .sub-tit{padding-top:20px; font-size:1.5rem}
	.service-booking .why-hn h2{padding:15px 20px 0; font-size:2.25rem}
	.service-booking .why-hn .txt{display:block}
	.service-booking .why-hn .txt > div:first-child{margin-bottom:20px;}
	.service-booking .why-hn .txt p{font-size:.875rem}
	.service-booking .why-hn .txt strong{letter-spacing:-.2px; font-size:1.125rem}

	.service-booking .why-hn .boxes{padding-top:200px}
	.service-booking .why-hn .boxes ul li{padding:10px 25px; font-size:1.125rem; width:170px}
	.service-booking .why-hn .boxes li:nth-child(1){transform:rotate(-10deg)}
	.service-booking .why-hn .boxes li:nth-child(2){left:6%; transform:rotate(13deg); width:180px}
	.service-booking .why-hn .boxes li:nth-child(3){left:auto; right:45%; top:45px; transform:rotate(15deg); width:160px}
	.service-booking .why-hn .boxes li:nth-child(4){left:44%; top:-88px; z-index:99; transform:rotate(4deg)}
	.service-booking .why-hn .boxes li:nth-child(5){right:20%; top:20px; transform:rotate(7deg)}
	.service-booking .why-hn .boxes li:nth-child(6){right:0; top:-20px; transform:rotate(-8deg)}
	.service-booking .why-hn .boxes li:nth-child(7){right:0; transform:rotate(-10deg)}
	.service-booking .why-hn .boxes li:nth-child(8),
	.service-booking .why-hn .boxes li:nth-child(9)
	{display:none;}

	.service-booking .booking-info .sub-tit{font-size:1.25rem}
	.service-booking .booking-info h2{padding-top:8px; font-size:2.375rem}
	.service-booking .booking-info .sub-txt{font-size:1.125rem; padding:15px 10px 0; line-height:1.5;}

	.service-booking .booking-info .n-inner.first{margin-top:40px;}
	.service-booking .booking-info .n-inner{padding:50px 30px 30px}

	.service-booking .booking-info .inner-con .info-txt-wrap{padding-top:10px;}
	.service-booking .booking-info .inner-con .info-txt-wrap h3{font-size:2rem}
	.service-booking .booking-info .inner-con .info-txt-wrap p{font-size:1rem; line-height:1.5}
	.service-booking .booking-info .inner-con .info-img-wrap{display:block}
	.service-booking .booking-info .inner-con .info-img-wrap > div:first-child{position:relative;}

	.service-booking .booking-info .inner-con .info-img-wrap ul li,.service-booking .booking-info .inner-con .info-img-wrap.period ul{justify-content:center;}
	.service-booking .booking-info .inner-con .info-img-wrap.exception{padding-top:30px}
	.service-booking .booking-info .inner-con .info-img-wrap.exception ul{flex-direction:column}
	.service-booking .booking-info .inner-con .info-img-wrap.exception ul li:not(:last-child){margin-bottom:5px}

	.service-booking .booking-info .n-inner.other{padding:60px 30px 40px}
	.service-booking .booking-info .inner-con.other .info-img-wrap{margin-top:10px}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box{display:flex; align-items:center; margin-bottom:10px; padding:20px; width:100%; height:auto; border-radius:15px}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box .img-wrap{width:140px; flex-shrink:0}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box img{margin-top:0; max-height:70px}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box :where(h4,p){text-align:left;}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box h4{padding-top:0}
	.service-booking .booking-kind ul{margin-top:60px}
	.service-booking .booking-kind ul li{margin:0 30px}
	.service-booking .booking-kind ul li img{max-height:130px; margin:0 auto}
	.service-booking .booking-kind ul li span{font-size:1.25rem}
	.service-booking .booking-kind .sc{padding-top:40px;}


}
@media only screen and (max-width:479px){
	.service-booking{padding-bottom:50px }
	.service-booking .top{margin-top:80px;}
	.service-booking .top h2{font-size:2rem}
	.service-booking .booking-info .n-inner{margin-top:25px; padding:60px 25px 30px}
	.service-booking .booking-info .inner-con .info-txt-wrap{padding-top:7px;}
	.service-booking .booking-info .inner-con .info-txt-wrap h3{font-size:1.75rem; line-height:1.3}
	.service-booking .booking-info .inner-con .info-txt-wrap p{padding-top:15px; color:#555; line-height:1.55}
	.service-booking .booking-info .inner-con .info-img-wrap{padding-top:40px;}
	.service-booking .booking-info .inner-con .con-sub-tit{font-size:1.063rem}
	.service-booking .booking-info .inner-con .info-img-wrap.period ul li span{font-size:.938rem}
	.service-booking .booking-info .inner-con.other .info-img-wrap h4{padding-top:5px;}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box .img-wrap{width:95px;}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box img{margin-top:0; max-height:55px}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box p{padding-top:6px;}
	.service-booking .booking-info .inner-con.other .info-img-wrap .box h4{font-size:1.25rem}


	.service-booking .booking-kind{padding-top:0}
	.service-booking .booking-kind .n-inner{padding-top:100px}
	.service-booking .booking-kind h3{padding-top:10px; font-size:2rem}
	.service-booking .booking-kind .sub-tit{font-size:1.063rem}
	.service-booking .booking-kind p{padding:18px 20px 0; font-size:1rem}
	.service-booking .booking-kind p br{display:none}
	.service-booking .booking-kind ul{margin-top:50px}
	.service-booking .booking-kind ul li{margin:0 20px; font-size:1.063rem}
	.service-booking .booking-kind ul li img{max-height:80px}
	.service-booking .booking-kind ul li span{display:block; padding-top:3px; font-size:1.125rem}
	.service-booking .booking-kind ul.dt li img{max-height:65px}
	.service-booking .booking-kind ul.dt li{margin:0 15px}

	.service-d .btn-area{margin-top:30px;}
	.service-d .btn-area a{margin:0 2px; padding:12px 22px; font-size:1.188rem; letter-spacing:-.2px}
	.service-d .btn-area a img{margin-right:6px; max-width:22px}

	.service-booking .why-hn{padding:80px 0 150px}
	.service-booking .why-hn .icon-person{max-width:140px;}
	.service-booking .why-hn .txt{margin-top:55px; padding:0 10px}
	.service-booking .why-hn h2{padding:15px 30px 0; letter-spacing:0px}
	.service-booking .why-hn .boxes li:nth-child(4){left:39%; top:-110px; }

	.service-booking .booking-info .sub-tit{font-size:1.125rem}
	.service-booking .booking-info .sub-txt{padding:20px 15px 0; font-size:.938rem; letter-spacing:-.4px}

	.service-booking .booking-info .n-inner.other{padding:55px 20px 25px;}
	.service-booking .booking-info .inner-con.other .info-img-wrap{margin-top:0; padding-top:27px;}
}


.service-onoff,.service-sales{color:#333;}
.service-onoff .top{position:relative; margin-top:180px;}
.service-onoff .top:before{content:''; position:absolute; bottom:150px; width:100%; height:260px; background:linear-gradient(transparent,#f5f5f5); z-index:-1}
.service-onoff .top .n-inner{ display:flex; justify-content:space-between;}
.service-onoff .top .txt-wrap{margin-top:55px;}
.service-onoff .top .txt-wrap .sub-tit{font-size:1.625rem; font-weight:500}
.service-onoff .top .txt-wrap h2{padding-top:25px; font-size:3.75rem;}
.service-onoff .top .txt-wrap h2 span{line-height:1.25; color:var(--primary-color)}
.service-onoff .top .img-wrap img{margin-top:30px; display:block}
.service-onoff .visual{padding:130px 0 120px; background-color:#e1edfa; text-align:center}
.service-onoff .visual .tit .sub-tit{font-size:1.625rem; color:var(--primary-color); font-weight:600}
.service-onoff .visual .tit h3{margin-top:25px; font-size:3.25rem; line-height:1.3}
.service-onoff .visual .tit .txt{padding-top:28px; font-size:1.25rem; font-weight:400; line-height:1.6}
.service-onoff .visual .img-wrap{display:flex; justify-content:center; align-items:end}
.service-onoff .visual .img-wrap .all{margin-top:100px; padding:65px 80px 0; background-color:#fff; border-radius:25px; box-shadow:0 0 40px rgba(0,0,0,.1)}
.service-onoff .visual .img-wrap .all .txt{font-size:1.313rem; font-weight:500; color:#666;}
.service-onoff .visual .img-wrap .all h4{padding-top:8px; font-size:2.125rem}
.service-onoff .visual .img-wrap .all img{display:block; margin:30px 0 0 15px; max-width:240px}
.service-onoff .visual .img-wrap .side{display:block; max-height:322px; z-index:2}
.service-onoff .visual .img-wrap .side.left{margin-right:-50px}
.service-onoff .visual .img-wrap .side.right{margin-left:-50px}


.service-onoff .pos{position:relative; padding:180px 0 100px; }
.service-onoff .pos .sub-tit{font-size:1.25rem; font-weight:600; color:#555; letter-spacing:-.2px}
.service-onoff .pos h4{padding-top:15px; font-size:2.875rem; font-weight:700; line-height:1.2; color:var(--primary-color);}
.service-onoff .pos .txt{padding-top:30px; font-size:1.125rem; font-weight:500; letter-spacing:-.2px}
.service-onoff .pos .tablet{margin:30px 0 0 0; padding-top:33px; }
.service-onoff .pos .tablet .device{border:33px solid #333; border-radius:25px 25px 0 0;}
.service-onoff .pos .tablet img{display:block; margin:0 auto;}

.service-onoff .pos .swiper-button-next,.service-onoff .pos .swiper-button-prev{color:#333; transform:translateY(100px)}
.service-onoff .pos .swiper-pagination{bottom:50px;}
.service-onoff .pos .swiper-pagination-bullet{margin:0 12px; width:17px; height:17px;}


@media only screen and (max-width:1400px){
	.service-onoff .pos .tablet{margin:35px 0 0}
	.service-onoff .pos .tablet .device-bottom{max-width:100%;}
}
@media only screen and (max-width:1300px){
	.service-onoff .pos .tablet .device{max-width:85%}
}
@media only screen and (max-width:1200px){
	.service-onoff .top .txt-wrap .sub-tit{font-size:1.25rem}
	.service-onoff .top .txt-wrap h2{font-size:3rem; line-height:1.3}
	.service-onoff .top .img-wrap img{max-width:550px}
}
@media only screen and (max-width:1024px){
	.service-onoff,.service-sales{padding-bottom:0; }
	.service-onoff .top{margin-top:120px}
	.service-onoff .top .txt-wrap{margin-top:70px; padding-left:25px}
	.service-onoff .top .img-wrap img{max-width:500px}
	.service-onoff .visual .tit h3{margin-top:18px; font-size:3rem}
	.service-onoff .visual .img-wrap .side{max-height:250px;}
	.service-onoff .visual .img-wrap .all{margin-top:80px; padding:60px 50px 0;}
	.service-onoff .visual .img-wrap .all .txt{font-size:1.25rem}
	.service-onoff .visual .img-wrap .all h4{font-size:2rem}
	.service-onoff .visual .img-wrap .all img{max-width:180px;}

	.service-onoff .pos{padding:120px 0}
	.service-onoff .pos .tablet{margin:20px 0 0}
	.service-onoff .pos .swiper-pagination{bottom:85px;}
}
@media only screen and (max-width:860px){
	.service-onoff .top .img-wrap img{max-width:420px;}
}

@media only screen and (max-width:768px){
	.service-onoff .top{margin-top:150px; }
	.service-onoff .top:before{bottom:100px}
	.service-onoff .top .txt-wrap{margin-top:15px; position:absolute;}
	.service-onoff .top .img-wrap{margin-left:auto; margin-top:30px}
	.service-onoff .top .img-wrap img{max-width:350px}
	.service-onoff .top .txt-wrap h2{padding-top:22px; font-size:2.75rem}
	.service-onoff .visual .tit h3{font-size:2.625rem}
	.service-onoff .visual .tit .txt{font-size:1.125rem}
	.service-onoff .visual .img-wrap .side{max-height:200px}
	.service-onoff .visual .img-wrap .all{margin-top:60px; padding:50px 40px 0}
	.service-onoff .visual .img-wrap .all h4{font-size:1.75rem}
	.service-onoff .visual .img-wrap .all img{max-width:130px}

	.service-onoff .pos{padding:100px 0}
	.service-onoff .pos h4{font-size:2.75rem}
	.service-onoff .pos .tablet .device{border-width:22px}
	.service-onoff .pos .txt{padding-top:25px;}

	.service-onoff .top:before{bottom:80px}
	.service-onoff .pos .swiper-button-next, .service-onoff .pos .swiper-button-prev{transform:translateY(100px) scale(0.8)}
}

@media only screen and (max-width:650px){
	.service-onoff .top .txt-wrap{margin-top:0}
	.service-onoff .top .txt-wrap h2{font-size:2.375rem; line-height:1.4}
	.service-onoff .top .img-wrap{margin-top:35px;}
	.service-onoff .top .img-wrap img{max-width:300px}
	.service-onoff .visual .img-wrap .side{max-height:180px;}
	.service-onoff .visual .img-wrap .side.left{margin-right:-40px;}
	.service-onoff .visual .img-wrap .side.right{margin-left:-40px;}
	.service-onoff .visual .tit h3{margin-top:15px; font-size:2.5rem}
	.service-onoff .visual .tit .txt{padding-top:25px; }
	.service-onoff .visual .img-wrap .all{margin-top:55px;}
	.service-onoff .visual .img-wrap .all img{max-width:120px}
}

@media only screen and (max-width:479px){
	.service-onoff .top{margin-top:135px;}
	.service-onoff .top:before{bottom:75px}
	.service-onoff .top .txt-wrap{padding-left:20px;}
	.service-onoff .top .txt-wrap .sub-tit{font-size:1.125rem}
	.service-onoff .top .txt-wrap h2{padding-top:15px; font-size:2.125rem; line-height:1.4}
	.service-onoff .top .img-wrap{margin-top:95px;}
	.service-onoff .top .img-wrap img{width:240px}
	.service-onoff .visual{padding:90px 0}
	.service-onoff .visual .img-wrap .side{max-height:120px;}
	.service-onoff .visual .img-wrap .all{margin-top:25px; padding:40px 30px 0; border-radius:20px}
	.service-onoff .visual .img-wrap .all .txt{font-size:1rem}
	.service-onoff .visual .img-wrap .all h4{font-size:1.375rem}
	.service-onoff .visual .img-wrap .all img{max-width:100px}
	.service-onoff .visual .img-wrap .side.left{margin-right:-35px;}
	.service-onoff .visual .img-wrap .side.right{margin-left:-35px;}
	.service-onoff .visual .tit .sub-tit{font-size:1.25rem}
	.service-onoff .visual .tit h3{margin-top:10px; font-size:1.938rem}
	.service-onoff .visual .tit .txt{padding:20px 25px; font-size:.938rem}
	.service-onoff .visual .tit .txt br{display:none;}
	.service-onoff .pos{padding:95px 0 70px}
	.service-onoff .pos .tablet{margin-top:0; padding-top:35px;}
	.service-onoff .pos h4{padding-top:10px; font-size:1.875rem; line-height:1.3}
	.service-onoff .pos .txt{padding-top:18px; font-size:1rem}
	.service-onoff .pos .swiper-pagination{bottom:38px}
	.service-onoff .pos .tablet .device{border-width:15px;}
	.service-onoff .pos .swiper-button-next, .service-onoff .pos .swiper-button-prev{transform:translateY(75px) scale(0.5)}
	.service-onoff .pos .swiper-button-next{right:0}
	.service-onoff .pos .swiper-button-prev{left:0}
	.service-onoff .pos .swiper-pagination-bullet{width:15px; height:15px;}
}





.service-sales :where(.manage,.booking,.all,.graph) .txt-wrap .sub-tit{font-size:1.375rem; font-weight:600; letter-spacing:-.2px}
.service-sales :where(.manage,.booking,.all,.graph) .txt-wrap h4{padding-top:17px; font-size:3rem; color:var(--primary-color); line-height:1.2}
.service-sales :where(.manage,.booking,.all,.graph) .txt-wrap .txt{padding-top:35px; font-size:1.125rem; font-weight:400; line-height:1.65; letter-spacing:-.2px}


.service-sales .top{padding:250px 0 0; text-align:center;}
.service-sales .top .sub-tit{font-size:1.75rem; font-weight:600}
.service-sales .top h2{padding-top:25px; font-size:3.75rem; line-height:1.25}
.service-sales .top img{display:block; margin:-160px auto 0}
.service-sales .visual{margin-top:-100px; padding:160px 0 40px; background:#e1edfa url(/assets/hn/assets/img/service-d/sales-visual-bg.png) no-repeat bottom right; text-align:center;}
.service-sales .visual .txt-wrap .sub-tit{font-size:1.625rem; color:var(--primary-color); font-weight:600}
.service-sales .visual .txt-wrap h3{margin-top:25px; font-size:3.125rem; line-height:1.3}
.service-sales .visual .txt-wrap .txt{padding-top:32px; font-size:1.25rem; font-weight:400; line-height:1.6; color:#555;}
.service-sales .visual ul{display:grid; margin-top:110px; padding:0 60px; grid-template-columns:repeat(auto-fit, minmax(30%, auto)); gap:0 25px}
.service-sales .visual ul li{padding:70px 35px; background-color:#fff; box-shadow:0 0 20px rgba(0,0,0,.15); border-radius:18px; }
.service-sales .visual ul li p{margin-top:35px; font-size:1.188rem; font-weight:500; color:#888; letter-spacing:-.2px}
.service-sales .visual ul li h4{padding-top:10px; font-size:1.938rem}

.service-sales .manage{padding:180px 0 100px; text-align:center;}
.service-sales .manage .got{position:relative}
.service-sales .manage .got .middle-txt{position:absolute; top:calc(50% - 20px); left:50%; transform:translate(-50%,-50%)}
.service-sales .manage .got .middle-txt img{max-width:165px;}
.service-sales .manage .got .middle-txt p{font-size:2.125rem; font-weight:600; line-height:1.35}
.service-sales .manage .got .middle-txt p span{position:relative;}
.service-sales .manage .got .middle-txt p span:before{content:''; position:absolute; left:-5px; bottom:0; width:calc(100% + 10px); height:16px; background-color:#c3f2f4; z-index:-1}
.service-sales .manage .got ul{display:flex; justify-content:space-between; margin:60px 0;}
.service-sales .manage .got ul.space{padding:0 100px}
.service-sales .manage .got ul li{padding:25px 30px; background-color:#fff; box-shadow:0 0 20px rgba(0,0,0,.1); border-radius:18px; text-align:left;}
.service-sales .manage .got ul li p{font-size:1.188rem; color:#666; font-weight:400}
.service-sales .manage .got ul li .info{padding-top:10px; display:flex; justify-content:space-between; gap:0 90px; font-weight:500; letter-spacing:0px}
.service-sales .manage .got ul li .info .from{color:var(--primary-color);}
.service-sales .manage .excel{margin-top:-80px}
.service-sales .manage .excel img{display:block; margin:0 auto}
.service-sales .manage .excel .icon{margin-top:40px}
.service-sales .manage .excel p{padding-top:25px; font-size:1.5rem; color:#00a162; font-weight:500}

.service-sales .booking{padding:100px 0; text-align:center; }
.service-sales .booking .box{position:relative; margin-top:70px; padding:130px 80px 100px; background-color:#eaf4fd; border-radius:30px; z-index:-1}
.service-sales .booking .box ul{display:flex; gap:0 35px; }
.service-sales .booking .box ul li .badge{display:inline-block; padding:8px 15px; background-color:#1d8ecd; color:#fff; border-radius:100px; font-weight:400; letter-spacing:-.2px}
.service-sales .booking .box ul li p{padding-top:22px; font-size:1.688rem; font-weight:600; color:#555;}
.service-sales .booking .box ul li .dot{position:relative; display:inline-block; margin-top:25px; width:6px; height:6px; border-radius:100px; background-color:#bbb;}
.service-sales .booking .box ul li .dot:before,.service-sales .booking .box ul li .dot:after{content:''; position:absolute; top:20px; left:0; width:6px; height:6px; border-radius:100px; background-color:#bbb;}
.service-sales .booking .box ul li .dot:after{top:40px}
.service-sales .booking .box ul li img{display:block; margin:60px auto 0; box-shadow:0 0 15px rgba(0,0,0,.1); border-radius:30px;}
.service-sales .booking .box .seller{position:relative; margin-top:230px; z-index:1}
.service-sales .booking .box .seller p{padding-bottom:22px; font-size:2.375rem; font-weight:700; line-height:1.4}
.service-sales .booking .box .seller:after{content:''; position:absolute; top:-100px; left:0; width:100%; height:300%; border-radius:1000px; background:linear-gradient(#fff,transparent 30%); z-index:-1}


.service-sales .all{padding:100px 0; text-align:center; }
.service-sales .all ul{display:grid; gap:30px; grid-template-columns:repeat(3, 1fr); margin-top:100px;}
.service-sales .all ul li{padding:50px 40px; background-color:#048ce3; height:400px; background-position:right 50px bottom 30px; background-repeat:no-repeat; border-radius:20px; color:#fff; text-align:left;}
.service-sales .all ul li h5{padding-top:8px; font-size:1.938rem; font-weight:500; line-height:1.25}
.service-sales .all ul li:nth-child(1){background-image:url(/assets/hn/assets/img/service-d/sales-a-01.png)}
.service-sales .all ul li:nth-child(2){background-image:url(/assets/hn/assets/img/service-d/sales-a-02.png)}
.service-sales .all ul li:nth-child(3){background-color:#06b980; background-image:url(/assets/hn/assets/img/service-d/sales-a-05.png)}
.service-sales .all ul li:nth-child(4){background-image:url(/assets/hn/assets/img/service-d/sales-a-03.png)}
.service-sales .all ul li:nth-child(5){background-image:url(/assets/hn/assets/img/service-d/sales-a-04.png)}
.service-sales .all ul li:nth-child(6){background-color:#0a56c7; background-image:url(/assets/hn/assets/img/service-d/sales-a-06.png)}


.service-sales .graph{padding:100px 0; text-align:center;}
.service-sales .graph .img-wrap{padding-top:80px;}
.service-sales .graph .img-wrap img{display:block; margin:0 auto 35px; max-width:100%;}


@media only screen and (max-width:1400px){
	.service-sales .booking .box ul li img{max-width:100%}
	.service-sales .booking .box .seller img{max-width:100%}
}
@media only screen and (max-width:1200px){
	.service-sales .top .sub-tit{font-size:1.625rem}
	.service-sales .top h2{padding-top:20px; font-size:3rem}
	.service-sales .top img{max-width:100%}

	.service-sales .visual{background-size:50%}
	.service-sales .visual .txt-wrap .sub-tit{font-size:1.375rem}
	.service-sales .visual .txt-wrap h3{margin-top:20px; font-size:2.75rem}
	.service-sales .visual .txt-wrap .txt{font-size:1.125rem}
	.service-sales .visual ul{margin-top:85px; padding:0;}
	.service-sales .visual ul li img{max-height:120px}
	.service-sales .visual ul li p{font-size:1.063rem; font-weight:400}
	.service-sales .visual ul li h4{padding-top:7px; font-size:1.875rem}

	.service-sales :where(.manage,.booking,.all,.graph) .txt-wrap .sub-tit{font-size:1.25rem;}
	.service-sales :where(.manage,.booking,.all,.graph) .txt-wrap h4{padding-top:15px; font-size:2.75rem;}
	.service-sales :where(.manage,.booking,.all,.graph) .txt-wrap .txt{padding-top:27px; font-size:1.125rem;}

	.service-sales .manage{padding:150px 0 60px}
	.service-sales .manage .got{width:100%;}
	.service-sales .manage .got .middle-txt p{padding-top:13px; font-size:1.75rem; line-height:1.25}
	.service-sales .manage .got .middle-txt img{max-width:140px}
	.service-sales .manage .got ul li{padding:18px 22px}
	.service-sales .manage .excel img.arrow{max-width:45px}
	.service-sales .manage .excel img.icon{margin-top:30px; max-width:140px}
	.service-sales .manage .excel p{font-size:1.375rem}
}

@media only screen and (max-width:1024px){
	.service-sales .booking .box{padding:120px 60px 90px}
	.service-sales .booking .box ul{gap:0 25px}
	.service-sales .booking .box ul li p{font-size:1.5rem}
	.service-sales .booking .box .seller{margin-top:180px}
	.service-sales .booking .box .seller p{font-size:2.125rem;}
	.service-sales .booking .box .seller:after{top:-80px;}

	.service-sales .all{padding:80px 0}
	.service-sales .all ul{margin-top:75px; gap:25px;}
	.service-sales .all ul li{height:350px; background-size:30%}
	.service-sales .all ul li:first-child{background-size:40%}

	.service-sales .graph .img-wrap{padding-top:70px}
}

@media only screen and (max-width:860px){
	.service-sales .top{padding:230px 0 0;}
	.service-sales .top h2{padding-bottom:20px; }
	.service-sales .visual{padding:130px 0 40px}
	.service-sales .visual ul{margin-top:80px; gap:0 20px}
	.service-sales .visual ul li{padding:50px 20px;}
	.service-sales .visual ul li img{max-height:110px}
	.service-sales .visual ul li h4{font-size:1.625rem}
	.service-sales .manage .got ul{margin:45px 0}
	.service-sales .manage .got ul.space{padding:0 50px}
	.service-sales .manage .got ul li .info{gap:0 10px; justify-content:start;}
	.service-sales .manage .got .middle-txt img{max-width:120px}
	.service-sales .manage .excel img.arrow{max-width:40px}
	.service-sales .manage .excel img.icon{margin-top:25px; max-width:120px}

	.service-sales .all ul li{height:300px;}
}

@media only screen and (max-width:768px){
	.service-sales .top{padding:200px 0 0}
	.service-sales .top img{margin-top:-125px}
	.service-sales .manage .got{margin-top:45px; }
	.service-sales .manage .got ul li{padding:15px 20px}
	.service-sales .manage .got ul li p{font-size:1.063rem}
	.service-sales .manage .got ul li .info{padding-top:3px; font-size:.938rem}
	.service-sales .manage .got .middle-txt img{max-width:100px}
	.service-sales .manage .got ul{margin:35px 0}
	.service-sales .manage .got ul.space{padding:0 35px}
	.service-sales .manage .got .middle-txt p{padding-top:7px; font-size:1.625rem}
	.service-sales .manage .excel img.arrow{max-width:30px}
	.service-sales .manage .excel img.icon{margin-top:20px; max-width:100px}

	.service-sales .booking .box{margin-top:45px; padding:70px 40px}
	.service-sales .booking .box ul{display:block;}
	.service-sales .booking .box ul li .dot{display:none;}
	.service-sales .booking .box ul li img{margin:25px auto 0}
	.service-sales .booking .box ul li:not(:first-child) .badge{margin-top:45px; }
	.service-sales .booking .box ul li p{padding-top:15px;}
	.service-sales .booking .box ul li p br{display:none; }

	.service-sales .booking .box .seller{margin-top:130px}
	.service-sales .booking .box .seller:after{top:-50px}
	.service-sales .booking .box .seller p{font-size:1.875rem}

	.service-sales .all{padding:60px 0}
	.service-sales .all ul{margin-top:60px; gap:20px}
	.service-sales .all ul li{padding:45px 25px 35px 35px; height:auto; background-position:right 30px bottom 20px}
	.service-sales .all ul li h5{padding:5px 0 80px; font-size:1.625rem}
}

@media only screen and (max-width:650px){
	.service-sales .all ul{gap:15px}
	.service-sales .all ul li{padding:35px 25px 35px; background-size:25%}
	.service-sales .all ul li:first-child{background-size:30%}
	.service-sales .all ul li h5{font-size:1.375rem}

	.service-sales .visual{padding:130px 0 30px}
	.service-sales .visual ul{display:block; margin-top:65px}
	.service-sales .visual ul li{display:flex; align-items:center; margin:12px 0; padding:25px 20px;}
	.service-sales .visual ul li .img-wrap{display:flex; justify-content:center; align-items:center; width:150px; flex-shrink:0; text-align:center}
	.service-sales .visual ul li .img-wrap img{max-height:80px}
	.service-sales .visual ul li p{margin-top:0; text-align:left;}
}
@media only screen and (max-width:560px){
	.service-sales .all ul{grid-template-columns:repeat(2,1fr)}
	.service-sales .all ul li:nth-child(3){order:5}
	.service-sales .all ul li:nth-child(6){order:6}
}
@media only screen and (max-width:479px){
	.service-sales .top{padding:150px 0 0}
	.service-sales .top .sub-tit{font-size:1.063rem; color:#444;}
	.service-sales .top h2{padding-top:15px; font-size:2.125rem; line-height:1.35}
	.service-sales .top img{margin-top:-55px}
	.service-sales .visual{margin-top:-40px; padding:110px 0 40px}
	.service-sales .visual .txt-wrap .sub-tit{font-size:1.063rem}
	.service-sales .visual .txt-wrap h3{margin-top:13px; font-size:2rem}
	.service-sales .visual .txt-wrap .txt{padding:25px 20px; font-size:1rem;}
	.service-sales .visual .txt-wrap .txt br{display:none}
	.service-sales .visual ul{display:block; margin-top:22px}
	.service-sales .visual ul li{margin:0; padding:22px 15px;}
	.service-sales .visual ul li:not(:first-child){margin-top:12px;}
	.service-sales .visual ul li p{margin-top:-3px; font-size:1rem}
	.service-sales .visual ul li .img-wrap{width:125px}
	.service-sales .visual ul li .img-wrap img{max-height:65px;}
	.service-sales .visual ul li h4{font-size:1.5rem}

	.service-sales :where(.manage,.booking,.all,.graph) .txt-wrap .sub-tit{font-size:1.063rem;}
	.service-sales :where(.manage,.booking,.all,.graph) .txt-wrap h4{padding-top:10px; font-size:2.063rem; line-height:1.3}
	.service-sales :where(.manage,.booking,.all,.graph) .txt-wrap .txt{padding:20px 15px 0; font-size:1rem;}
	.service-sales :where(.manage,.booking,.all,.graph) .txt-wrap .txt br{display:none}

	.service-sales .manage{padding:100px 0;}
	.service-sales .manage .got .middle-txt{top:0; position:relative; transform:translate(-50%,0); margin-bottom:35px; }
	.service-sales .manage .got ul{margin:13px 0}
	.service-sales .manage .got ul.space{padding:0;}
	.service-sales .manage .got ul li{width:calc(50% - 6.5px); border-radius:10px;}
	.service-sales .manage .excel{margin-top:30px}
	.service-sales .manage .excel p{padding-top:20px;}

	.service-sales .all ul{gap:13px;}
	.service-sales .all ul li p{font-size:.938rem}
	.service-sales .all ul li h5{padding:5px 0 70px; font-weight:600; line-height:1.3;}

	.service-sales .booking{padding:20px 0 40px}
	.service-sales .booking .box{margin-top:35px; padding:50px 20px}
	.service-sales .booking .box .seller{margin-top:100px;}
	.service-sales .booking .box .seller p{font-size:1.625rem}
	.service-sales .booking .box ul li p{padding-top:12px; font-size:1.375rem}
	.service-sales .booking .box ul li .badge{padding:6px 12px}
	.service-sales .booking .box ul li:not(:first-child) .badge{margin-top:50px}
	.service-sales .booking .box ul li img{margin:22px auto 0}

	.service-sales .graph{padding:50px 0}
	.service-sales .graph .img-wrap{padding-top:45px}
	.service-sales .graph .img-wrap img{margin:0 auto 20px;}
	.service-sales .graph .img-wrap img.filter{max-width:80%}
}





/* 파트너 */
.partner #section2.partner-intro{flex-direction:column; background-color:#3267bd; color:#333;}
.partner #section2 .parallax__item__img{width:50vw; height:50vh; background-image:url(/assets/hn/assets/img/partner-main.jpg); z-index:1}       
.partner #section2 .txt{position:relative; margin-top:-150px; text-align:center; font-size:10rem; font-weight:600; color:transparent; text-stroke:1px white; -webkit-text-stroke: 1px white; z-index:10; font-family: "Poppins", sans-serif;}

.partner .partner-list{padding:300px 0 150px; flex-direction:column; text-align:left; align-items:start; background-color:#fff; color:#333;}
.partner .partner-list h2{font-size:6.25rem; font-family: "Poppins", sans-serif; font-weight:600; }
.partner .partner-list .txt{padding-top:50px; font-size:1.75rem; font-weight:600}
.partner .partner-list ul{display:grid; grid-template-columns:repeat(3, 1fr); gap:100px 26px; margin-top:150px;}
.partner .partner-list ul li img{max-width:100%; transition:all .3s; border:1px solid #ddd;}
.partner .partner-list ul li img:hover{opacity:.8}
.partner .partner-list ul li p{padding-top:15px; font-size:1.75rem; text-align:center; font-weight:600}



@media only screen and (max-width:768px){
	.partner .partner-list h2{font-size:5rem}
	.partner .partner-list ul li p{font-size:1.5rem}
	.partner #section2 .txt{margin-top:-130px; font-size:8rem}
	.partner .partner-list .txt{padding-top:40px; font-size:1.5rem;}
}
@media only screen and (max-width:560px){
	.partner .partner-list{padding:150px 0 70px}
	.partner #section2 .parallax__item__img{width:65vw; height:40vh;}
	.partner #section2 .txt{margin-top:-75px; font-size:19vw}
	.partner .partner-list h2{font-size:3.125rem; line-height:1.1}
	.partner .partner-list .txt{padding-top:25px; font-size:1.125rem}
	.partner .partner-list ul{margin-top:80px; grid-template-columns:repeat(2, 1fr); gap:40px 15px;}
	.partner .partner-list ul li p{padding-top:5px; font-size:1.125rem}
}



/* 문의 */
.contact .contact-intro{position:relative; flex-direction:column; background-color:#fff; z-index:99}
.contact .contact-intro .txt-wrap{padding-top:150px; height:70vh; margin-top:50px; background-color:#3267bd}
.contact .contact-intro .txt-wrap h2{font-size:6.25rem; font-family: "Poppins", sans-serif; font-weight:600}
.contact .contact-intro .txt-wrap p{padding-top:45px; font-size:1.875rem; font-weight:600; }
.contact .contact-intro .info-txt{margin-top:-100px; text-align:center; font-size:1.875rem; font-weight:600}
.contact .contact-intro .location{margin-top:-250px;}
.contact .contact-intro .location .map{text-align:right}
.contact .contact-intro .location .map .root_daum_roughmap_landing{width:980px;  margin-left:auto}
.contact .contact-intro .location .map .root_daum_roughmap_landing .wrap_map{height:580px;}
.contact .contact-intro .location .map .root_daum_roughmap .wrap_controllers{display:none;}
.contact .contact-intro .location .info-wrap{display:flex; justify-content:start; gap:170px; margin:35px 0 0 auto; width:980px; color:#333}
.contact .contact-intro .location .info-wrap h3{font-family: "Poppins", sans-serif; font-weight:600; font-size:2rem}
.contact .contact-intro .location .info-wrap p{padding-top:15px; font-size:1.25rem; font-weight:500}

.contact .contact-form{position:relative; padding:420px 0 150px; background-color:#fff; color:#333; text-align:center; z-index:1}
.contact .contact-form h2{font-size:6.25rem; }
.contact .contact-form p{padding-top:40px; font-size:1.5rem; font-weight:500; line-height:1.8}
.contact .contact-form .input-wrap{display:flex; flex-wrap:wrap; gap:22px; margin-top:100px;}
.contact .contact-form .input-wrap :where(input,textarea){padding:22px 37px; width:calc(50% - 11px); background-color:#f5f5f5; border:none; border-radius:10px; font-size:1.375rem;}
.contact .contact-form .input-wrap textarea{width:100%; min-height:350px;}

.contact .btn-contact{width:100%; margin-top:40px; padding:14px 15px; background-color:#3267bd; color:#fff; font-size:2.063rem; border:none; border-radius:10px; font-weight:500; transition:all .3s}
.contact .btn-contact:hover{background-color:#2054a7}

input#check_btn{ display:none;}
input#check_btn + label{position:relative; cursor:pointer;}
input#check_btn + label > span{position:relative; vertical-align: middle; padding-left: 15px; font-size:1.25rem; color:#666; font-weight:400}
/* label:before에 체크하기 전 상태 CSS */
input#check_btn + label:before{content:""; display:inline-block; width:38px; height:38px; border-radius: 5px; background-color:#f3f3f3; vertical-align:middle;}
/* label:before에 체크 된 상태 CSS */  
input#check_btn:checked + label:before{content:""; background-color:#3267bd;}
input#check_btn:checked + label:after{content:''; position:absolute; top:1px; left:15px; transform:rotate(45deg); width:11px; height:18px; border-right:4px solid #fff; border-bottom:4px solid #fff;}


@media only screen and (max-width:1400px){
	.n-inner{width:92%}
}
@media only screen and (max-width:1024px){
	.contact .contact-intro .txt-wrap h2{font-size:5rem}
	.contact .contact-intro .txt-wrap p{padding-top:35px; font-size:1.5rem}
	.contact .contact-intro .location .map .root_daum_roughmap_landing{width:600px!important;}
	.contact .contact-intro .location .map .root_daum_roughmap_landing .wrap_map{height:400px;}
	.contact .contact-intro .location .info-wrap{width:600px}

	.contact .contact-form{padding:250px 0 150px}
	.contact .contact-form h2{font-size:4.5rem}
	.contact .contact-form p{padding-top:30px; font-size:1.25rem}
	.contact .contact-form .input-wrap{margin-top:70px; gap:15px;}
	.contact .contact-form .input-wrap :where(input,textarea){padding:20px 25px}

	.n-inner.small{width:92%}
	.contact .btn-contact{font-size:1.75rem}
	input#check_btn:checked + label:after{top:-2px}

	.contact .contact-form h2{font-size:3.5rem}
}

@media only screen and (max-width:650px){
	.contact .contact-intro .location .map .root_daum_roughmap_landing{width:100%!important;}
	.contact .contact-intro .location .map .root_daum_roughmap_landing .wrap_map{height:300px;}
	.contact .contact-intro .location .info-wrap{display:block; width:100%;}
	.contact .contact-intro .location .info-wrap .con:nth-child(2){margin-top:30px;}
}
@media only screen and (max-width:560px){
	.contact .contact-intro .txt-wrap{padding-top:110px; height:50vh;}
	.contact .contact-intro .txt-wrap h2{font-size:3.25rem;}
	.contact .contact-intro .txt-wrap p{padding-top:25px; font-size:1.25rem}
	.contact .contact-intro .location{margin-top:-140px}
	.contact .contact-intro .location .map .root_daum_roughmap_landing .wrap_map{height:250px;}
	.contact .contact-intro .location .info-wrap h3{font-size:1.625rem}
	.contact .contact-intro .location .info-wrap p{padding-top:7px; font-size:1rem}
	.contact .contact-intro .location .info-wrap .con:nth-child(2){margin-top:25px;}
	
	.contact .contact-form{padding:150px 0 80px}
	.contact .contact-form h2{font-size:3.125rem}
	.contact .contact-form p{padding-top:20px; font-size:1rem; line-height:1.6}
	.contact .contact-form .input-wrap{margin-top:40px; gap:10px;}
	.contact .contact-form .input-wrap :where(input,textarea){padding:15px 20px; width:calc(50% - 5px);font-size:1.125rem; border-radius:6px;}
	.contact .contact-form .input-wrap textarea{min-height:220px}
	input#check_btn + label:before{width:32px; height:32px;}
	input#check_btn:checked + label:after{top:0; left:12px; width:9px; height:14px; border-width:3px;}
	input#check_btn + label > span{padding-left:10px; font-size:1.063rem}
	.contact .btn-contact{margin-top:25px; font-size:1.375rem}
}