body {
  cursor: none;
}




/* 가운데 작은 원 */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: #000;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 10001;
}

/* 바깥 원 */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 28px;
  height: 28px;
  border: 1.5px solid #000;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    width 0.18s ease,
    height 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
  z-index: 10000;
  transform-origin: center center;
  will-change: width, height, left, top;
}

/* 🔥 버튼 위에서만 크게 확대 */
.cursor-ring.btn-hover {
  width: 50px;           /* ⭐ 핵심 */
  height: 50px;          /* ⭐ 핵심 */
  background: rgba(51,102,250,0.12);
  border-color:#2561fe;
}


@media (max-width: 1024px) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
  body {
    cursor: auto;
  }
}



#wrap{font-family: 'Pretendard'; width:100%;height:100%;margin:0 auto;
	min-width:100%;position: relative;  word-break: keep-all !important;}

/* header_info */
.header_info{position:absolute;top:24px;right:5% ;}
.header_info a{position:relative;color:#fff;font-size:17.5px;margin:0 15px;display:inline-block;position:relative} 
/*.header_info a:first-child:after{content:'';position:absolute;width:1px;height:15px;background:#fff;opacity:.8;top:4px;left:60px}
.header_info a:hover{text-decoration:none}*/
.header.on .header_info a{color:#fff}

/* section */
.sec_box{max-width:1500px;margin:0 auto}
.sec-wrap,.header,.sec-content,.sec-footer{position:relative;width:100%;margin:0;padding:0}

/* header */
.header{position:fixed;top:0;left:0;z-index:9;height:100px;text-align:center;

 transition:all ease .5s;-webkit-transition:all ease .5s;-o-transition:all ease .5s;-moz-transition:all ease .5s;-ms-transition:all ease .5s;overflow: hidden} 
.header.on{background:#fff;box-shadow:2px 2px 5px rgba(0,0,0,0.05)}
.header.on .logo{background-image:url(../img/logo_on.png)}
.header.on .menu:after{display:none}
.header.on .menu > li > h2{color:#000}  
.header .logo{border:0px solid red;display:block;width:150px;height:43px;background:url(../img/logo.png) no-repeat 50%;position:absolute;left:40px;top:25px}   
.header:after{opacity:0;transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;-moz-transition:all ease .6s;-ms-transition:all ease .6s}
.header:before{content:'';width:100%;height:100px;background:#fff;position:absolute;top:0;right:0;z-index:-1;opacity:0;transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;-moz-transition:all ease .6s;-ms-transition:all ease .6s}




/* menu */
.menu{display:inline-block; padding-right:5%;}
.menu > li{float:left} 
.menu > li h2{font-weight:600;cursor:pointer;color:#fff;font-size:20px;padding:0 50px;line-height:100px;letter-spacing:0em}
.menu > li > a{color:#666;font-size:16px} 
.menu > li > ul{ width:100%;min-height:150px;padding:0;position:absolute;top:110px;text-align:center}
.menu > li > ul > li{display:inline-block;float:left;text-align:left;padding:0 50px;opacity:0;transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;-moz-transition:all ease .6s;-ms-transition:all ease .6s}
.menu > li > ul > li > a{display:block;padding:5px 0;font-size:1.2em;transition:all ease .3s;-webkit-transition:all ease .3s;-o-transition:all ease .3s;-moz-transition:all ease .3s;-ms-transition:all ease .3s;color:#666}
.menu > li > ul > li > a:hover{color:#014099}   
.menu > li.open h2{position:relative}
.menu > li.on h2:after{content:'';width:6px;height:6px;background:#ffcb07;border-radius:50%;position:absolute;left:50%;top:25px;margin-left:-3px}

.menu > li.open ul > li{ opacity:1}

/* banner */
.section_banner{width:100%;overflow:hidden;background:#f0f0f0;padding:45px 0 100px 0}
.section_banner ul{display:flex;max-width:1400px;margin:0 auto; }
.section_banner li{flex:1;width:25%;padding:0 10px;background-repeat: no-repeat;}
.section_banner li a{display:block;height:250px;background-color:#fff;box-shadow:2px 2px 4px rgba(220,220,220,1);background-size: auto 55px;background-repeat:no-repeat;background-position: right 25px bottom 25px}
.section_banner li a:hover{text-decoration:none}
.section_banner li a h2{color:#000000}
.section_banner li a:hover h2{color:#f5ba3b}
.section_banner div{padding:40px 25px 0}
.section_banner li p{color:#999;padding-top:10px}
.section_banner li:first-child{margin-left:0}
.section_banner li:nth-child(1) a{background-image:url('../img/icon_banner_company.svg')}
.section_banner li:nth-child(2) a{background-image:url('../img/icon_banner_business.svg');}
.section_banner li:nth-child(3) a{background-image:url('../img/icon_banner_goal.svg');}
.section_banner li:nth-child(4) a{background-image:url('../img/icon_banner_news.svg');}

/* visual swiper */
.swiper{
	width: 100%;
	height: 100%;
  }
  .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
  }

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

/* visual */
#visual{ position:relative;width:100%;height:100vh;margin:0 auto; overflow:hidden; 
 margin-top:0px; border-bottom-left-radius:65px;   border-bottom-right-radius:65px; } 
 #visual .imgBox{border-radius:0px;overflow:hidden; border:0px solid #fff; width:100%;width:100%;height:100vh;background-size:cover !important}
#visual .img1{background:url(../img/main_01.jpg) center top no-repeat}
 #visual .img2{background:url(../img/visual/visual_img4.jpg) center top no-repeat} 
#visual .img3{border-radius:75px; border:30px solid #fff; width:100%;width:100%;height:93vh;background-size:cover !important}

.visualList .txtBox{position:absolute;top:270px;left:50%;margin-left:-50%;width:100%;text-align:center !important;color:#fff;font-size:60px;color:#fff;}
.visualList .txtBox div{width:100%; border:0px solid red; text-align:center !important;}
.visualList .txtBox img{width:865px;}
.visualList .txtBox .txt1{font-size:25px;}



#visual .btn_prev { width:60px; border-radius:55px; height:60px; z-index:6666; background: #fff;  bordeR:0px solid red; 
	color:#333 !Important; font-weight:800; box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
#visual .btn_next{ width:60px; border-radius:55px; height:60px; zindex:6666; background: #fff;  bordeR:0px solid red; 
	color:#333 !Important; font-weight:800;}

/* .swiper-pagination {
    bottom: 20px;
    left: 50%;
}

.swiper-pagination-bullet {
	margin: 4px;
} */

#visual.swiper-pagination{color:#fff;bottom:20px; left:50%}

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

  padding: 100px;
  border-radius: 30px;

  /* 반투명 배경 */
  background: rgba(255, 255, 255, 0.09);

  /* ⭐ 블러 핵심 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* 살짝 테두리 */
  border: 0px solid rgba(255, 255, 255, 0.4);

  /* 그림자 */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);

  color: #fff;
  text-align: center;
  max-width: 900px;
}

@media (max-width:1024px){

  .glass_box{
    width: 85%;
    padding: 60px 40px;
    border-radius: 25px;
  }

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

  .glass_box{
    width: 85%;
    padding: 40px 25px;
    border-radius: 20px;

    /* 중앙 살짝 위로 */
    top: 54%;
  }

}



@media (max-width:1024px){

    #visual{
        height:80vh;
        border-bottom-left-radius:40px;
        border-bottom-right-radius:40px;
    }

    #visual .imgBox{
        border-radius:40px;
        border:20px solid #fff;
    }

    .visualList .txtBox{
        top:200px;
        font-size:40px;
    }

    .visualList .txtBox img{
        width:60%;
    }

    .visualList .txtBox .txt1{
        font-size:20px;
    }

    #visual .btn_prev,
    #visual .btn_next{
        width:45px;
        height:45px;
    }
}

@media (max-width:768px){

    #visual{
        height:80vh;
        border-bottom-left-radius:25px;
        border-bottom-right-radius:25px;
    }

    #visual .imgBox{
        height:80vh;
        border-radius:25px;
        border:12px solid #fff;
        background-position:center center !important;
    }

    .visualList .txtBox{
        top:180px;
        font-size:28px;
        padding:0 20px;
    }

    .visualList .txtBox img{
        width:80%;
        max-width:320px;
    }

    .visualList .txtBox .txt1{
        font-size:16px;
    }

    #visual .btn_prev,
    #visual .btn_next{
        width:38px;
        height:38px;
        font-size:14px;
    }
}


.txt2{
  font-size: clamp(28px, 5vw, 65px);
  font-weight:300;
}

.txt2 span{
  font-weight:700;
}

.txt3{
  font-size: clamp(14px, 2.5vw, 25px);
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  color:#fff;
  padding-top:20px;
  line-height:1.6;
}

.txt3 span{
  font-size: clamp(12px, 2vw, 18px);
  display:inline-block;
  padding:6px 18px;
  border:1px solid #ccc;
  border-radius:35px;
  margin:6px 4px;
}

/* common */
.main_tit{
  width:100%;
  text-align:center;
  margin-bottom:25px;
}

.main_tit h3{
  color:#000;
  font-size: clamp(22px, 4vw, 32px);
  letter-spacing:-0.8px;
}

.main_tit p{
  color:#999;
  font-size: clamp(13px, 2vw, 16px);
}


@media (max-width:1024px){

  .txt2{
    font-size:44px;
  }

  .txt3{
    font-size:18px;
    width:85%;
  }

}

@media (max-width:768px){

  .txt2{
    font-size:27px;
  }

  .txt3{
    font-size:14px;
    width:90%;
    line-height:1.5;
  }

  .txt3 span{
    font-size:12px;
    padding:5px 13px;
  }

  .main_tit h3{
    font-size:24px;
  }

  .main_tit p{
    font-size:14px;
  }

}




/* gallery */
#gallery{padding:100px 0 100px 0}
#gallery .galleryList .swiper-slide{background:#222;height:550px; border:0px solid red;}
#gallery .swiper-button-next,#gallery .swiper-button-prev{
bordeR:0px solid #999; width:60px; height:60px ; border-radius:50%; 
background:#000;
	color:#fff}

/* business */
.section_business{width:90%;margin:0 auto;background:url(../img/bg02.jpg) 50% 50% no-repeat;
	background-size:cover !important;padding:150px 0 150px 0;text-align:center; border-radius:45px;}
.section_business h3{font-size:42px;font-weight:300;color:#fff;}
.section_business h3 strong{font-weight:600;}
.section_business ul{display:flex;padding:30px 100px 0;max-width:1400px;margin:0 auto;overflow:hidden;}
.section_business ul li{width:25%;bordeR:0px solid red;position:relative; box-sizing:border-box; padding:30px;list-style:none; text-align:center;}
.section_business ul li a{color:#fff;display:block}

.section_business ul li .title{font-size:25px;position:relative;display:inline-block;border: 1px solid transparent;transition:background-color 0.3s ease-in-out}
.section_business ul li::before{content:'';position:absolute;width:1px;height:130px;;background:#fff;opacity:0.3;top:50%;right:0;margin-top:-60px}
.section_business ul li:last-child::before{content:none}
.section_business ul li .title{display:inline-block;font-weight:600; font-size:26px;position:relative;border: 1px solid transparent;color:#fff;
  transition: background-color 0.3s ease-in-out;-webkit-transition: background-color 0.3s ease-in-out;-moz-transition: background-color 0.3s ease-in-out;-o-transition: background-color 0.3s ease-in-out;-ms-transition: background-color 0.3s ease-in-out}
.section_business ul li .title span {position: absolute;background-color:#fff;transform-origin: center;
  transition: transform 0.5s ease;opacity:.5;-webkit-transition: transform 0.5s ease;opacity:.5;-moz-transition: transform 0.5s ease;opacity:.5;-o-transition: transform 0.5s ease;opacity:.5;-ms-transition: transform 0.5s ease;opacity:.5}
.section_business ul li .title .bottom,.section_business ul li .title .top {height: 1px;left: 0;right: 0;transform: scaleX(0)}
.section_business ul li .title .left,.section_business ul li .title .right {width: 1px;top: 0; bottom: 0;transform: scaleY(0)}
.section_business ul li .title .top {top: 0}
.section_business ul li .title .bottom {bottom: 0}
.section_business ul li .title .left {left: 0}
.section_business ul li .title .right {right: 0}
.section_business ul li:hover .top, .section_business ul li:hover .bottom {transform: scaleX(1)}
.section_business ul li:hover .left, .section_business ul li:hover .right {transform: scaleY(1)}
.section_business ul li p{color:#fff}

.section_businesstt{font-size:30px; font-weight:600; color:#fff;}
.section_businesstt1{font-size:65px; font-weight:700; color:#fff; line-height:80px;}


/* board */
#section_board{width:100%; margin:0 auto;padding:120px 0 120px 0; background: #f9f9f9;}

#section_board > div{flex:1;margin:0 40px 0 0;position:relative}
#section_board > div h3{font-size:23px;color:#000;padding-bottom:5px;border-bottom:1px solid #ddd}
#section_board > div ul{margin-top:20px}
#section_board > div ul li{position:relative;padding-left:15px}
#section_board > div ul li:before{content:'';position:absolute;top:12px;left:0;width:4px;height:4px;background:#3e85df;display:block}
#section_board > div ul li a{display:block;color:#666;font-size:16px;line-height:26px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#section_board > div ul li a:hover{color:#1c4cb9;font-weight:bold}
#section_board > div a.btn_more{position:absolute;top:10px;right:0;color:#999;font-size:13px;
	background:url(../img/board_btn_plus.png) center top no-repeat;width:25px;height:25px}

/* sub_visual */
.subv_top{padding:180px 20px; border:0px solid red;/* background:url(../img/sub/bg01.png)*/}
.location{overflow:hidden;margin:0 auto;text-align:center;padding-bottom:10px}
.location li{display:inline-block;vertical-align:middle;color:#fff;font-size:16px}
.location li a.home{background:url(../img/sub/icon_location_home.png) no-repeat;width:13px;height:12px;display:inline-block}
.location li:before{display:inline-block;content:">";position:relative;top:-1px;vertical-align:middle;margin:0px 20px 0 17px;color:#fff;font-size:12px}
.location li:first-child:before{display:none}
.location li:last-child{color:#fff}

.sub_visual{border-bottom-left-radius:55px; border-bottom-right-radius:55px;  border-right:0px solid #fff; width:100%;height:450px;
	position:relative;overflow:hidden;  margin-top:0px;}
.sub_visual:before{content:'';background-color:rgba(0, 0, 0, 0);position:absolute;top:0;left:0;right:0;bottom:0}
.sub_visual:after{content:'';width:100%;height:100%;position:absolute;left:0;top:0;z-index:-1;background-size:cover;background-position:center center;
	animation-duration:3s;
	animation-fill-mode:both;
	animation-iteration-count:1;
	animation-timing-function:ease;
	-webkit-animation-duration:3s;
	-webkit-animation-fill-mode:both;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function:ease;
	animation-delay:0.4s;-webkit-animation-delay:0.4s;
	animation-name:visual-zoom;-webkit-animation-name:visual-zoom;
}
.sub_visual:after{background-size:cover !important;width:100%;height:100%}

.sub_bg1:after{background:url(../img/bg02.png)center; }
.sub_bg2:after{background:url(../img/bg02.png)center;}
.sub_bg3:after{background:url(../img/sub/sub_visual3.jpg) bottom !important;}
.sub_bg4:after{background:url(../img/sub/sub_visual4.jpg) bottom !important;}
.sub_bg5:after{background:url(../img/sub/sub_visual5.jpg) bottom !important;}
.sub_bg6:after{background:url(../img/sub/sub_visual6.jpg) bottom !important;}

.sub_visual h1{font-size:3.5em;color:#fff;text-align:center;font-weight:800}
.sub_visual ul,.sub_visual h1 span,.sub_visual h1 p{
	animation-duration:0.7s;
	animation-fill-mode:both;
	animation-iteration-count:1;
	animation-timing-function:ease;
	-webkit-animation-duration:0.7s;
	-webkit-animation-fill-mode:both;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function:ease;
	animation-delay:0.3s;-webkit-animation-delay:0.3s;
	animation-name:visual-tit;-webkit-animation-name:visual-tit;
}
.sub_visual h1 span,.sub_visual h1 p{animation-delay:0.8s;-webkit-animation-delay:0.8s} 


@keyframes visual-zoom {
	0% {transform:scale(1.2)}
	100% {transform:scale(1)}
}
@-webkit-keyframes visual-zoom {
	0% {transform:scale(1.2)}
	100% {transform:scale(1)}
}
@keyframes visual-tit {
	0% {opacity:0;-webkit-opacity:0;transform:translateY(20px)}
	100% {opacity:1;-webkit-opacity:1;transform:translateY(0px)}
}
@-webkit-keyframes visual-tit {
	0% {opacity:0;-webkit-opacity:0;transform:translateY(20px)}
	100% {opacity:1;-webkit-opacity:1;transform:translateY(0px)}
}

.sub-depth-wrap{position:relative;width:1300px;
  margin:0 auto;
  position: relative;
  top: -35px;    }
.sub_visual h1 p{font-size:16px;font-weight:300;margin:10px 0 0}

.sub-depth-1{position:absolute;  top:0;
  left:50%;
  width:60%; background: #fff; border-radius: 38px; overflow: hidden;
  transform: translateX(-50%); background:rgba(0,0,0,0);  border:2px solid #003399;
   box-shadow: 5px 7px 10px rgba(0,0,0,0);}

.sub-depth-1 ul{width:100%;margin:0 auto;overflow:hidden;  border:0px solid red; background:rgba(250,250,250,1);}
.sub-depth-1 li{float:left} 
.sub-depth-1 li:only-child {width:100%} 
.sub-depth-1 li:first-child:nth-last-child(2),                       /* 메뉴가 둘 일 때, 1번 메뉴 선택 */
.sub-depth-1 li:first-child:nth-last-child(2)+li {width:50%}     /* 메뉴가 둘 일 때, 2번 메뉴 선택 */
.sub-depth-1 li:first-child:nth-last-child(3),                       /* 메뉴가 셋 일 때, 1번 메뉴 선택 */
.sub-depth-1 li:first-child:nth-last-child(3)~li {width:33.33%}  /* 메뉴가 셋 일 때, 2~3번째 메뉴 선택 */
.sub-depth-1 li:first-child:nth-last-child(4),                       /* 메뉴가 넷 일 때, 1번 메뉴 선택 */
.sub-depth-1 li:first-child:nth-last-child(4)~li {width:25%}     /* 메뉴가 넷 일 때, 2~4번째 메뉴 선택 */
.sub-depth-1 li:first-child:nth-last-child(5),                       /* 메뉴가 넷 일 때, 1번 메뉴 선택 */
.sub-depth-1 li:first-child:nth-last-child(5)~li {width:20%}     /* 메뉴가 넷 일 때, 2~4번째 메뉴 선택 */ 
.sub-depth-1 li a{cursor:pointer;display:block;color:#999;
	text-align:center; line-height:70px; position:relative;transition:all ease .4s;  letter-spacing: 0px;
	-webkit-transition:all ease .4s;-ms-transition:all ease .4s;-o-transition:all ease .4s; font-size:20px;
   font-weight:600; background:#f9f9f9;} 
.sub-depth-1 li a:hover{color:#000; background-color: #fff;}
.sub-depth-1 li.active a{color:#000; background-color: #fff;}
.sub-depth-1 li a:before{content:'';width:0px;height:12px;
  background:rgba(255,255,255,0.2);position:absolute;right:0;top:50%;margin-top:-6px}
.sub-depth-1 li:last-child a:before,
.sub-depth-1 li.active a:before{display:none}
.sub-depth-2{text-align:center;border-bottom:1px solid #ddd;display:none; border-radius: 25px;}
.sub-depth-2 a{display:inline-block;line-height:70px;margin:0 20px;
  padding:0 10px;font-size:17px;color:#fff;position:relative; font-weight:600; }
.sub-depth-2 a.active{color:#333; background:#f8f8f8}
.sub-depth-2 a.active:after{content:'';width:0;height:3px;background:#1ac0e4;position:absolute;left:50%;bottom:-1px;
	animation-duration:0.3s;
	animation-fill-mode:both;
	animation-iteration-count:1;
	animation-timing-function:ease;
	-webkit-animation-duration:0.3s;
	-webkit-animation-fill-mode:both;
	-webkit-animation-iteration-count:1;
	-webkit-animation-timing-function:ease;
	animation-delay:0.3s;-webkit-animation-delay:0.3s;
	animation-name:sub-tab-line;-webkit-animation-name:sub-tab-line;
}

.sub-depth-2 a.active,.sub-depth-2 a:hover{color:#333;background:#f8f8f8;font-weight:bold}


@keyframes sub-tab-line{
	0%{width:0%;left:50%}
	100%{width:100%;left:0}
}
@-webkit-keyframes sub-tab-line{
	0%{width:0%;left:50%}
	100%{width:100%;left:0}
}



/* allmenu */
.btn_menu{position:absolute;top:36px;right:50px;width:35px;height:24px;cursor:pointer}
.btn_menu .bar{position:absolute;left:0;width:100%;width:100%;height:2px;border:0;background:#fff;transition:opacity 0.3s, top 0.3s, transform 0.5s;transition-delay:0.3s, 0.3s, 0s}
.on .btn_menu .bar{background:#000}
.btn_menu .bar:nth-child(1){top:0;transform:rotate(0)}
.btn_menu .bar:nth-child(2){top:11px;opacity:1; width:70%;}
.btn_menu .bar:nth-child(3){top:22px;transform:rotate(0)} 
.btn_menu.map{right:67px}
.btn_menu.map .bar{background:#000;transition:background 1s, opacity 0.3s, top 0.3s, transform 0.5s;transition-delay:0s, 0s, 0s, 0.3s}
.btn_menu.map .bar:nth-child(1){top:11px;background:#000;transform:rotate(-45deg)}
.btn_menu.map .bar:nth-child(2){opacity:0}
.btn_menu.map .bar:nth-child(3){top:11px;background:#000;transform:rotate(45deg)}
  
#sitemap{display:none;position:fixed;top:100px;right:-100%;width:100%;height:calc(100% - 100px); background:#fff; padding:50px 20px; z-index:10;transition:all ease .5s; -webkit-transition:all ease .5s; -o-transition:all ease .5s; -moz-transition:all ease .5s; -ms-transition:all ease .5s; overflow: hidden; overflow-y:auto}
#sitemap .top_info{display:none}
#sitemap > ul{max-width:1280px; overflow:hidden; margin:0 auto}
#sitemap > ul > li{float:left; width:20%; padding:0 10px}
#sitemap > ul > li h2{font-size:24px; color:#333}
#sitemap > ul > li h3{font-size:18px; color:#333;font-weight:500; margin:0 0 10px}
#sitemap > ul > li > ul > li{margin:30px 0}
#sitemap > ul > li > ul > li > a{color:#999; font-size:16px;  padding:7px 0; display:block;}
#sitemap > ul > li h3 > a:hover{color:#014099;}
#sitemap > ul > li > ul > li > a:hover{color:#014099;} 
#sitemap .top_info{position:absolute;top:0;left:0;width:100%;height:45px;overflow:hidden;z-index:10;border-bottom:1px solid #ddd}
#sitemap .top_info a{display:inline-block;width:50%;height:45px;float:left;background:#f8f8f8;text-align:center;color:#666;line-height:45px}
#sitemap.open{display:block;right:0;}
.header.stm-hd{background:#fff;}
.header.stm-hd .logo{background-image:url(../img/logo_on.png)}
.header.stm-hd .nav{display:none;}
.header.stm-hd .lang{display:none;} 
.scr{overflow-y:hidden;} 


/* footer */
#footer{clear:both;background-color:#262626;overflow:hidden}
#footer .foot_wrap{position:relative;max-width:1500px;margin:0 auto;padding-top:25px}
#footer .foot_menu{width:100%;position:relative}
        .foot_menu li{display:inline-block;float:left;position:relative}		
		.foot_menu li a{font-size:17px;color:#fff;padding:5px 15px 0 0;margin-left:15px}
		.foot_menu li a:before{content:'';position:absolute;left:0px;top:5px;width:1px;height:15px;background:#444}
		.foot_menu li:first-child a:before{display:none}
		.foot_menu li:first-child a{margin:0}
		.foot_menu li a:hover{text-decoration:underline}
		.copyright{float:left;width:100%;padding:22px 0 70px 0px}
		.copyright address{font-size:17px}
		.foot_sns{position:absolute;top:25px;right:0}
		.foot_sns a{float:left;display:inline-block;width:20px;height:18px;background:url(../img/icon_sns_common.png) no-repeat;vertical-align:middle;margin-left:15px}
	    .foot_sns a:first-child{ background-position:0 0;margin-left:0}
	    .foot_sns a:nth-child(2){ background-position:-20px 0}
	    .foot_sns a:nth-child(3){ background-position:-40px 0}

#top_btn{position:fixed;bottom:40px;right:30px}
#top_btn a{display:block; width:50px;height:50px;line-height:50px;background:#83868d url(../img/icon_gotop.png) center top no-repeat;
	border-radius:50%;}

.quick{position:fixed; bottom:110px;right:30px; background:#ffcc00 url(../img/icon26.png); 	border-radius:50%; width:60px;height:60px; 


}

.quick1{position:fixed; bottom:180px;right:30px; background:#66cc66 url(../img/icon29.png); 
 border-radius:50%; width:60px;height:60px; 


}



/* contents */
#contents_wrap{width:100%; margin:100px auto 0;padding:20px 0px 80px 0px;  border:0px solid red;}



/**************************** responsive ****************************/

	@media screen and (max-width:690px){
	/******* mobile ******/
		
	/* layout */
	html{font-size:15px}

	/* header */
	.header .logo{left:20px}
	.btn_menu,.btn_menu.map{right:20px}
	.btn_menu{color:#222}
	.header_info{display:none;right:80px}
	.menu{display:none}

	/* sitemap */
	#sitemap .top_info{display:block}
	#sitemap{background:rgba(0,0,0,0.5)}
	#sitemap > ul > li{width:100%; float:none;margin:0 0 30px}
	#sitemap > ul > li h2{color:#014099}
	#sitemap > ul > li > ul > li{padding:10px 0;margin:0;border-bottom: 1px solid #ddd}
	#sitemap > ul > li > ul > li.m-open{height:auto}
	#sitemap > ul > li > ul > li > h3 > a{display:block;background: #fff}
	#sitemap > ul{max-width:500px;padding:20px;background:#fff;position:absolute;right:0;top:45px;width:100%}

	/* visual */
	.visualList .txtBox{width:75%;left:0;right:0;margin:0 auto;top:35%}
	.visualList .txtBox .txt1{display:none}
	.visualList .txtBox .txt2{font-size:32px;line-height:42px}
	.visualList .txtBox .txt3{width:100%;font-size:14px}
	.visualList video{width:100%;height:1000% !important;object-fit: cover}

	/* common */
	.main_tit h3{font-size:20px}
	.main_tit p{font-size:14px}

	/* banner */
	.section_banner{padding:20px 10px 50px 10px}
	.section_banner ul{display:inherit}
	.section_banner li{width:100%}
	.section_banner li h2{font-size:23px}	
	.section_banner li a{height:200px;margin-bottom:10px}
	.section_business ul li .title{font-size:20px}

	/* gallery */
	#gallery .galleryList .swiper-slide{height:330px}



	/* board */
	#section_board{display:inherit;padding:50px 20px}
	#section_board > div{width:100%;margin-bottom:30px}
	#section_board > div h3{font-size:20px}

	/* sub_visual */
	.sub_visual{height:auto;overflow:hidden}
	.sub_visual h1{font-size:30px}
	.sub_visual h1 p{font-size:1.1rem}
	.subv_top{padding:130px 20px;height:360px;overflow:hidden}
	.location{display:none}
	.sub-depth-wrap{margin-top:0; width:100%;}
	.sub-depth-1{position:absolute;bottom:0;top:auto !Important;background:none;  top:100px;   width: 80%;}
	.sub-depth-1 li.active a{ 
    color:#000;
    text-align:left;padding-left:20px;line-height:50px;
    background:#fff url(../img/icon_select_arrow.png) center right no-repeat;transition:none}

	.sub-depth-2{position:absolute;top:0px;width:80%;left:10%;z-index:99;background:#fff;display:none;
   border-radius: 25px !important; 

  overflow:hidden;
  border:2px solid #003399;

 }
	.sub-depth-2 a{width:100%;display:block;margin:0;background:#f5f5f5;color:#222;line-height:45px;
    border-bottom:1px solid #ddd;text-align:left;padding-left:20px}

	.sub-depth-1 li{width:100% !important}
	.sub-depth-1 li.active a{display:block}
	.sub-depth-1 li a{font-size:17px;display:none}

	/* contents */
	#contents_wrap{max-width:100%;padding:30px 10px 40px 10px;margin:0}


	/* footer */
	#footer{padding:0 20px 20px 20px}
	.foot_sns{position:static;margin:0 auto}

	}
/****** tablet ******/
@media screen and (min-width:691px) and (max-width:1023px){

/* layout */
	html{font-size:14px}

	/* header */
	.header .logo{left:20px}
	.btn_menu,.btn_menu.map{right:20px}
	.btn_menu{color:#222}
	.header_info{display:none;right:80px}
	.menu{display:none}
	
	/* sitemap */
	#sitemap .top_info{display:block}
	#sitemap{background:rgba(0,0,0,0.5)}
	#sitemap > ul > li{width:100%; float:none;margin:0 0 30px}
	#sitemap > ul > li h2{color:#014099}
	#sitemap > ul > li > ul > li{height:46px;overflow:hidden;padding:10px 0;margin:0;border-bottom: 1px solid #ddd}
	#sitemap > ul > li > ul > li.m-open{height:auto}
	#sitemap > ul > li > ul > li > h3 > a{display:block;background: #fff}
	#sitemap > ul{padding:20px;background:#fff;position:absolute;right:0;top:45px;width:100%}
	
	/* visual */
	.visualList .txtBox{width:75%;left:0;right:0;margin:0 auto;top:35%}
	.visualList .txtBox .txt1{padding-bottom:20px}
	.visualList .txtBox .txt2{font-size:50px;line-height:60px}
	.visualList .txtBox .txt3{width:100%}	
	.visualList video{width:100%;height:100% !important;object-fit: cover}

	/* banner */
	.section_banner{padding:20px 10px 50px 10px}
	.section_banner li{width:50%;float:left}
	.section_banner li:nth-child(2n){padding:0}
	.section_banner li h2{font-size:23px}	
	.section_banner li a{height:200px;margin-bottom:10px}
	.section_banner ul{display:inherit}

	/* gallery */
	#gallery .galleryList .swiper-slide{height:250px}

	/* business */
	.section_business{padding:100px 30px 70px 30px}
	.section_business h3{font-size:35px;line-height:45px}
	.section_business ul{display:inherit;max-width:100%;padding:20px 0;margin-top:20px}
	.section_business ul li{width:48%;padding:20px 0;display:inline-block}
	.section_business ul li::before{bottom:0;height:1px;}
	
	/* board */
	#section_board{display:inherit;padding:50px 30px}
	#section_board > div{width:100%;margin-bottom:30px}

		
	/* sub_visual */
	.sub_visual{height:auto;overflow:hidden}
	.sub_visual h1{font-size:3em}
	.sub_visual h1 p{font-size:1.1rem}
	.subv_top{padding:130px 20px;height:360px;overflow:hidden}
	.location{display:none}
	.sub-depth-wrap{ width:100%;       position: relative;    }
	.sub-depth-1{width:90%; position:absolute; bottom:-30; top:auto !Important;background:none}
	.sub-depth-1 li.active a{text-align:left;padding-left:20px;line-height:50px;
    background:#fff url(../img/icon_select_arrow.png) center right no-repeat;transition:none}

.sub-depth-2{
  position:absolute;
  top:52px;
  width:90%;
  left:50%;
  transform:translateX(-50%);
  z-index:99;
  background:#fff;
  display:none;
  border-radius: 25px;
  overflow:hidden;
  border:2px solid #003399;
}
	.sub-depth-2 a{width:100%;display:block;margin:0;background:#f5f5f5;color:#222;
font-size:17px;
    line-height:40px;border-bottom:1px solid #ddd;text-align:left;padding-left:20px}

	.sub-depth-1 li{width:100% !important}
	.sub-depth-1 li.active a{display:block}
	.sub-depth-1 li a{font-size:18px;display:none}

	.sub-depth-2{display:none}

	/* contents */
	#contents_wrap{max-width:100%;padding:30px 20px 40px 20px;margin:0}

	/* footer */
	#footer{padding:0 20px 20px 20px}
	.foot_sns{position:static;margin:0 auto}
}
	
/****** Desktop Device ******/
@media screen and (min-width:1024px) and (max-width:1599px) {

	/* header */
	.menu{margin-left:-30px}
	.menu > li h2{padding:0 20px}
	.menu > li > ul > li{padding:0 20px}

	/* business */
	.section_business{padding:100px 30px}
	.section_business ul li{width:48%;padding:20px 10px;display:inline-block}
	.section_business h3{font-size:40px}

	/* visual */
	.visualList video{width:100%;height:100% !important;object-fit: cover}
	
	/* sub_visual */
	.sub-depth-2{display:none}


	
	/* board */
	#section_board{padding:70px 30px}
	
	/* footer */
	#footer{padding:0 30px}

	/* sitemap */
	#sitemap .top_info{display:none}
}


.inquiry_btn {
	background:#2561fe url(/theme/huntech/img/btnbg.png)left no-repeat;
	border-radius:35px;
	display:inline-block;
	cursor:pointer;
	color:#fff;
	font-weight:600;
	width:200px;
	height:50px;
	font-size:19px;
	text-decoration:none;
	line-height:47px;
	font-weight:600;
	margin-top:0px;
	padding-lefT:25px;
	border:2px solid #2561fe;
	
	
	
}
.inquiry_btn:hover {
	color:#000 !important;	
	background:#fff url(/theme/huntech/img/btnbg_on.png)left no-repeat;
	border:2px solid #000;

}
.inquiry_btn:active {
	position:relative;

}

@media all and (max-width:890px){
.inquiry_btn{display:none;}
}



.quickarea{width:100%; background:url('/theme/huntech/img/quickbg.jpg'); background-size:cover;  padding:120px 0px;}
.quick_con{width:750px; margin:0 auto; border:0px solid red;}
.quick_tt{text-align:Center; font-size:50px; font-weight:700; color:#000; margin-bottom:1%;}
.quick_tt span{color:#2561fe;}
.quick_tt1{font-weight:600; color:#000; font-size:20px;  line-height:35px; text-align:Center; }

.quick_con ul{width:100%; margin-top:5%; }
.quick_con ul li{width:100%; display: block;}
.quick_con ul li p{font-weight:600; font-size:20px; line-height:35px;color:#000;}
.quick_con ul li span{font-weight:500; font-size:19px; line-height:30px;color:#000;}

.mb30{margin-bottom:30px;}

.t_input{width:100%;    padding: 10px 20px; font-size:19px;   border: 1px solid rgb(0, 0, 0,0.2);    outline: transparent solid 2px;  
outline-offset: 2px;    position: relative; border-radius:45px;}

.textarea1 {
    width: 100%;
    height: 200px;
    padding: 12px 20px;
    font-size: 19px;
     border: 1px solid rgb(0, 0, 0,0.2); 
    outline: transparent solid 2px;
    outline-offset: 2px; border-radius:25px;
    position: relative;}



input#check_btn{
  display:none;
  }

input#check_btn + label{
  cursor:pointer;
 }

input#check_btn + label > span{
  vertical-align: middle;
  padding-left: 5px;
 }

/* label:before에 체크하기 전 상태 CSS */
input#check_btn + label:before{
  content:"";
  display:inline-block;
  width:17px;
  height:17px;
  border:2px solid #ff6600;
  border-radius: 4px;
  vertical-align:middle;
  }
  
/* label:before에 체크 된 상태 CSS */  
input#check_btn:checked + label:before{
  content:"";
  background-color:#ff6600;
  border-color:#ff6600;
  background-image: url('/theme/huntech/img/check.png');
  background-repeat: no-repeat;
  background-position: 50%;
  }

.pribtn{ color:#999;  padding-left:30px;}
.pribtn a{text-decoration:underline; line-height:35px; font-size:17px;}

.pribtn1 {width:100%; border-radius:35px; background:#0033cc; padding:15px; text-align: center; }
.pribtn1 a{color:#fff; font-weight:600; font-size:21px;}





.foot{position:relative !important; width:100%; padding:1.5%; border-top-left-radius: 35px;  border-top:0px solid rgba(0,0,0,0.1); overflow:hidden; border-top-right-radius: 35px; 
 background:#fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.15); overflow:hidden;}
.foot_con{width:90%;  margin:0 auto;}
.foot_con ul { float:right; width:85%; border-bottom:1px solid #efefef;  overflow:hidden;} 
.foot_con ul li{display: inline-block; float:left; padding:10px 0px; font-size:17px; line-height:30px; font-weight:400;}
.foot_con ul li:first-child{width:20%;}
.foot_con ul li:last-child{width:80%; }
.foot_con ul li span{padding:0px 25px; }
.foot_con ul li b{color:#000;}
.foot_con .bottomlogo{width:15%; float:left; padding-top:1%;  }

.tel_tt{background-size:4.5% !important; background:url('/theme/huntech/img/phone-alt.svg')no-repeat left; display:inline-block;
 font-size:15px; font-weight:800; color:#333333;padding-left:25px;}
.tel_tt span{color:#ff6600; font-weight:bold; font-size:21px; padding-top:15px;  padding-left:5px; font-family: "SCoreDream", system-ui, -apple-system, sans-serif !important;}

.mail_tt {background-size:7% !important; background:url('/theme/huntech/img/envelope.svg')no-repeat left; 
	padding-left:25px; margin-left:25px; display:inline-block; font-size:18px; font-weight:800; color:#333333;   }
.mail_tt span{ font-size:19px; padding-top:15px;  padding-left:5px; font-weight:500; }

.copy_tt{font-weight:700; color:#8f8f8f;}






.about{margin:0 auto; width:80%; display:block; border:0px solid red ; padding-top:6%; }
.abouttt{font-weight:900; font-size:190px; color:#f3f3f3;
width:100%; bordeR:0px solid red;
 letter-spacing: 75px; text-align: center; padding-bottom:1%;}

.aboutleft{width:40%; border:0px solid red ;  display: inline-block; box-sizing: border-box; float:left;}
.aboutleft_tt{font-size:65px; font-weight:800; color:#000; line-height: 85px;}
.aboutleft_tt span{color: #2561fe;}
.aboutleft_tt1{font-size:23px; font-weight:700; color:#000; line-height:35px; margin-top:1%;}


.aboutcenter{width:30%; border:0px solid red ;  display: inline-block; box-sizing: border-box; float:left;}
.aboutright{width:30%; border:0px solid red ;  display: inline-block; box-sizing: border-box; float:left;}




.aboutrightdiv{width:91%; border-radius:40px; margin:3%;  background: #f5f9ff; padding:10% 10%;    position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transition: 0.4s ease;}


.aboutrightdiv_tt{font-size:35px; font-weight:800; color:#333333;}
.aboutrightdiv_tt1 {font-size:20px;  margin-top:7%; font-weight:500; color:#000; line-height:30px; }
.aboutrightdiv_tt1 span{ font-weight:800; color:#333333;}
.floatright{float:right; }
 



.service{ transition:all ease .5s;-webkit-transition:all ease .7s;-o-transition:all ease .7s;-moz-transition:all ease .7s;-ms-transition:all ease .7s; 
	margin:0 auto; width:100%; display: flex; justify-content: center; border:0px solid red ; padding:5% 8%;background:#fff;  }
.service.on{background:#000; background-sizE:200%;}


.serviceleft{width:40%; border:0px solid red ;  display: inline-block; box-sizing: border-box; float:left;}
.servicecenter{width:30%; border:0px solid red ;  display: inline-block; box-sizing: border-box; float:left;}
.serviceright{width:30%; border:0px solid red ;  display: inline-block; box-sizing: border-box; float:left;}

.serviceleft .fixed{  position: fixed;
  top: 0;
 
  z-index: 1000;
}


.servicecenter img{border-radius:25px;}
.serviceright img{border-radius:25px;}

.servicediv{padding:5% ; width:48%; margin:1%; border:0px solid #efefef; text-align: center; background: #fff; box-shadow: 5px 5px 8px rgba(0,0,0,0.05); 
	border-radius:24px; }

.serviceicon{width:120px; height:120px; border:0px solid #ccc; margin:0 auto; text-align:center; background: #ff6600; box-shadow: 5px 5px 8px rgba(0,0,0,0.05); border-radius:20px;}
.serviceicon img{padding-top:20px;}


.serviceicon1{width:120px; height:120px; border:0px solid #ccc; margin:0 auto; text-align:center; background: #00cc00; box-shadow: 5px 5px 8px rgba(0,0,0,0.05); border-radius:20px;}
.serviceicon1 img{padding-top:20px;}

.servicett{font-weight:500;  font-size:35px; color:#000;}
.servicett span{font-weight:700;}
.servicett1{font-size:19px; line-height:28px; color:#000; margin-top:1%;}


.port1{position:relative; width:400px; height:400px; bordeR:0px solid #000; overflow: hidden; border-radius:25px;}
.port1tt a{display: block; width:400px; text-align:center; font-size:21px; color:#efefef; font-weight:600; line-height:45px;}

.btnarea{width:100%; text-align:center;}
.port_btn a{display: inline-block; float:left; line-height:70px; color:#fff; font-weight:700; font-size:30px; border-bottom:3px solid #fff;  }
.port_btn1 a{display: inline-block; float:left; margin-top:25px;  margin-left:25px;}
.port_btn2 a{display: inline-block; margin:0 auto; line-height:70px; color:#000; font-weight:700; font-size:30px; border-bottom:3px solid #000;  }
.port_btn2 img{width:12%; padding-top:23px; padding-left:5px;}


/*
.freeservice{background:url('/theme/huntech/img/bg_03.png')left center no-repeat; width:100%; border:0px solid red; position: relative;}
.freeservice ul{padding-top:3%; width:75%; margin:0 auto;  overflow: hidden;}
.freeservice ul li{display:inline-block; float:left; width:25%; text-align:center;border:0px solid red; }
.freeservice ul li p{font-size:22px; color:#000; font-weight:600; line-height:35px; }
.freeservice ul li span{font-size:19px; color:#666; font-weight:500;}
*/

.freeservice{
  background:url('/theme/huntech/img/bg_03.png') left center no-repeat;
  background-size:cover;
  width:100%;
  position: relative;
}

.freeservice ul{
  padding:3% 0;
  width:75%;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
}

.freeservice ul li{
  width:25%;
  text-align:center;
}

.freeservice ul li p{
  font-size:22px;
  color:#000;
  font-weight:600;
  line-height:1.6;
}

.freeservice ul li span{
  font-size:19px;
  color:#666;
  font-weight:500;
}


.noticearea{width:100%; position: relative; background: #f9f9f9; padding:120px 0px; overflow:hidden; margin-top:100px;}

.noticeareadiv{width:80%; margin:0 auto;}
.noticeleft{width:40%; border:0px solid red ;  display: inline-block; box-sizing: border-box; float:left;}
.noticeright{width:60%; border:0px solid red ;  display: inline-block; box-sizing: border-box; float:left;}



.servicearea{width:100%; border:0px solid red; margin-bottom:3%; overflow:hidden;}
.servicearealeft{width:40%; float:left; position:relative;  border:0px solid red; height:600px; overflow:hidden; }
.servicearealeft_div{width:90%; border-top-right-radius:75px; background:#fdf3ed; height:600px; padding-left:25%; padding-top:7%;padding-bottom:7%; 
	border:0px solid red; }


.servicearearight{width:60%; float:left; postion:relative; padding-left:5%;  border:0px solid red; }

.service_tt{font-size:50px; font-weight:700; color:#000; line-height: 85px;}
.service_tt span{color:#ff6600}

.service_tt1 {font-size:21px; color:#000; line-height:30px; font-weight:700;}
.service_tt1 span{font-weight:400;}

.servicebtn{
width:350px;
	position:absolute; right:50px; top:300px; font-weight:600;  font-size:20px; background:#ff6600 url('/theme/huntech/img/arrow_04.png')right no-repeat;  border-radius:10px; padding:25px 155px 25px 45px; color:#fff;}

.servicebtn1{
width:350px;
	position:absolute; right:50px; top:400px; font-weight:600;  font-size:20px; background:#fff url('/theme/huntech/img/arrow_06.png')right no-repeat;
	  border-radius:10px; padding:25px 155px 25px 45px; color:#000; box-shadow: 5px 5px 10px rgba(0,0,0,0.1);}



.servicearearight ul{width:90%;float:left;   }
.servicearearight ul li{width:100%; display:inline-block; padding:3% 0%;}
.servicearearight ul li dl{width:100%; float:left; }
.servicearearight ul li dl dt{width:15%; float:left;}
.servicearearight ul li dl dd{width:85%; float:left;  font-size:30px; font-weight:700; color:#000; padding-top:3%}
.servicearearight ul li dl dd span{font-size:21px;padding-left:2%; }





.grid{
  height: 180px;
  margin: 5px;
  display: grid;

  background-color: white;
  border: 3px solid white;
  gap: 3px;
  
  .bar-top, .bar-bottom{
    grid-column: 1 / -1;

    padding: 10px;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;

    p{
      color:#fff;
      font-size:165px;
      display: inline-block;
      font-weight:900;
    }
  }

  .grid-content{
    h2{
      color: white;
      font-size: 130px;
      font-weight: 700;
    }
    padding : 20px;
    background-size : 100%;
    background-image: url("https://images.unsplash.com/photo-1558158539-226f4a45f7b3?q=80&w=2978&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  }
}

.bar-top p{
  animation: marquee-top 20s linear infinite;
}

.bar-bottom p{
  animation: marquee-bottom 70s linear infinite;
}

@keyframes marquee-top {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes marquee-bottom {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}


/* -webkit-text-stroke */
.webkit-text-stroke {
   /* 원래 목표: '글자 바깥으로' 2픽셀만큼 테두리가 있었으면 좋겠어요! */
  -webkit-text-stroke: 1px #999;
}

/* text-shadow */
.text-shadow {
  text-shadow: -1px 0 #1B1B1B, 0 1px #1B1B1B, 1px 0 #1B1B1B, 0 -1px #1B1B1B;
}


/* pseudo-element를 활용한 글자 테두리 */
.handmade-stroke {
  z-index: 0;
  position: relative;
}

.handmade-stroke::before {
  z-index: -1;
  content: attr(data-content);
  position: absolute;
  left: 0;
  /* 글자 바깥쪽으로 나갔으면 하는 테두리 크기의 두 배 */
  -webkit-text-stroke: 2px #1B1B1B;
}

.handmade-stroke[data-shadow]::after {
  z-index: -2;
  content: attr(data-content);
  position: absolute;
  left: 0;
  top:2px;
  color: #fff;
  /* 테두리를 포함해서 동일한 글자 크기를 맞춰주기 위해 같은 값의 stroke 사용 */
  -webkit-text-stroke: 2px #1B1B1B;
}



/****포트폴리오***/

/* 전체 섹션 */
.portfolio-section {
  display: grid;
  grid-template-columns: 34% 66%;
  max-width: 100%;
  margin: 0 auto;
  padding: 100px 100px;
  align-items: start;
  background:
      linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%),
      url(/theme/huntech/img/bg02.png);

    background-size: cover;
    background-position: center;
   background-size:cover;
   border-radius:75px;
   border:30px solid #fff;
}

/* 왼쪽 텍스트 */
.portfolio-left {
  position: sticky;
  top: 120px;
}


/* 오른쪽 카드 그리드 */
.portfolio-grid {
  display: grid;

  gap: 80px 60px;
  position: relative;
}

/* 왼쪽 열을 살짝 위로 */
.portfolio-grid .left-col {
  transform: translateY(-60px);
}

/* 오른쪽 열을 살짝 아래로 */
.portfolio-grid .right-col {
  transform: translateY(60px);
}

/* 카드 스타일 */
.card {
   background: #111;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  height: 600px;
  margin-bottom: 9%;
}

.card a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: inherit; /* 글자색 상속 */
}

.card img {
	  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0);
  transition: transform 4s ease-in-out;
  object-fit: cover;
  cursor: pointer;
}


.card:hover img {
 transform: translateY(calc(-100% + 600px));
  transition: transform 4s ease-in-out;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.6s ease;
  z-index: 1;
}

/* hover 시 어두워짐 */
.card:hover::before {
  background: rgba(0, 0, 0, 0.45);
}

/*
.card:hover {
  transform: translateY(-10px);

}
.card:hover img {
  transform: scale(1.05);
}*/

.card-title {
  position: absolute;
  border:0px solid red;
  bottom: 30px;
  left: 30px;
  color: #fff;
  font-size:27px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
  z-index: 2;
}

/* hover 시 텍스트 부드럽게 등장 */
.card:hover .card-title {
  opacity: 1;
  transform: translateY(0);
}





/* 전체 섹션 */
.review-section {
  display: grid;
  grid-template-columns: 34% 66%;
  max-width: 100%;
  margin: 0 auto;
  padding: 120px 100px 30px 100px;
  align-items: start;
 
   background-size:cover;
   border-radius:75px;
   border:30px solid #fff;
}

/* 왼쪽 텍스트 */
.review-left {
  position: sticky;
  top: 120px;
}


/* 오른쪽 카드 그리드 */
.review-grid {
  display: flex;
  grid-template-columns: 3fr 3fr;
  gap: 40px 50px;
  position: relative;
}



/* 카드 */
.flip-card {
  width: 330px;
  height: 460px;
  perspective: 1200px; /* ⭐ 3D 깊이 */
}

/* 회전 대상 */
.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(.4,.2,.2,1);
}

/* hover 시 뒤집기 */
.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

/* 앞/뒤 공통 */
.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 30px;
  overflow: hidden;
}

/* 앞면 */
.flip-front {
  background: #fff;

}
.flip-front img {

  object-fit: cover;
}
.flip-front .name {
  position: absolute;
  bottom: 16px;
  left: 16px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

/* 뒷면 */
.flip-back {
  background: url(../img/bg02.png);
  background-size:100%;
  color: #fff;
  padding: 45px;
  transform: rotateY(180deg); /* ⭐ 뒤집힌 상태 */
}

.flip-back h3 {
  font-size: 35px;
  margin-bottom: 4px;
}
.flip-back .role {
  font-size: 13px;
  opacity: .8;
  margin-bottom: 12px;
}
.flip-back ul {
  font-size: 16px;
  padding-left:0px;
  padding-top:20px;
  line-height:27px;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.flip-back li {
  margin-bottom: 6px;
}



.flipdiv{width:100%;  margin:0%;   height:470px; background:#f5f9ff; padding:16% 13%; }
.flipdiv_tt{font-size:25px; font-weight:800; color:#333333;}
.flipdiv_tt span{font-weight:500; font-size:19px;}
.flipdiv_tt1 {font-size:18px;  margin-top:7%; font-weight:500; color:#000; line-height:30px; }
.flipdiv_tt1 span{ font-weight:800; color:#333333;}
.floatright{float:right; }



.main_portfolio {
  width: 100%;
  position: relative;
  background: #241fd0;
  padding: 0;
  overflow: hidden;
}


.portfolio_inner {
  width: 100%;

  margin: 0 auto;
  position: relative;
  border:0px solid red;
  padding-top:100px;
}

.portfolio_item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 150px;
}

.portfolio_item:last-child {
  margin-bottom: 0;
}

.portfolio_item.reverse {
  justify-content: flex-start;
}

.portfolio_txt {
  width: 36%;
  color: #fff;
  box-sizing: border-box;
}

.portfolio_cate {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 28px;
  color: #fff;
}

.portfolio_txt h2 {
  font-size: 40px;
  line-height: 1.35;
  font-weight: 800;
  margin: 0 0 22px;
  color: #fff;
  letter-spacing: -1.5px;
}

.portfolio_desc {
  font-size: 21px;
  line-height: 1.7;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  margin-bottom: 55px;
  word-break: keep-all;
}

.portfolio_arrow {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 30px;
  line-height: 1;
  color: #fff;
  text-decoration: none;

  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 50%;

  transition: all 0.3s ease;
}

.portfolio_arrow:hover {
  color: #241fd0;
  background: #fff;
  transform: translateX(10px);
}


.portfolio_img {
  --portfolio-height: 500px;

  width: 64%;
  position: relative;
  height: var(--portfolio-height);
  overflow: hidden;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow 0.35s ease;
  border-radius: 20px;
}

.portfolio_img img {
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(0);
  transition: transform 22s ease;
}

.portfolio_img:hover {
  box-shadow: 0 28px 55px rgba(0,0,0,0.35);
}

.portfolio_img:hover img {
  transform: translateY(calc(-100% + var(--portfolio-height)));
}

/* 두 번째 텍스트 위치 */
.portfolio_item.reverse .portfolio_txt {
  padding-left: 20px;
}





/* ===============================
   portfolio responsive
================================ */



/* 태블릿 */
@media (max-width: 1024px) {
  .portfolio_inner {
    width: 90%;
    padding-top: 70px;
  }

  .portfolio_item {
    gap: 40px;
    margin-bottom: 100px;
  }

  .portfolio_txt {
    width: 38%;
  }

  .portfolio_img {
    width: 62%;
    --portfolio-height: 400px;
  }

  .portfolio_cate {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .portfolio_txt h2 {
    font-size: 30px;
    letter-spacing: -1px;
  }

  .portfolio_desc {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 35px;
  }

  .portfolio_arrow {
    width: 48px;
    height: 48px;
    font-size: 26px;
  }
}


/* 모바일 */
@media (max-width: 768px) {
  .main_portfolio {
    padding: 0;
  }

  .portfolio_inner {
    width: 90%;
    padding-top: 60px;
  }

  .portfolio_item,
  .portfolio_item.reverse {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 80px;
  }

  .portfolio_item.reverse {
    flex-direction: column-reverse;
  }

  .portfolio_txt {
    width: 100%;
  }

  .portfolio_item.reverse .portfolio_txt {
    padding-left: 0;
  }

  .portfolio_img {
    width: 100%;
    --portfolio-height: 360px;
    border-radius: 16px;
  }

  .portfolio_cate {
    font-size: 17px;
    margin-bottom: 16px;
  }

  .portfolio_txt h2 {
    font-size: 28px;
    line-height: 1.35;
  }

  .portfolio_desc {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 28px;
  }

  .portfolio_arrow {
    width: 46px;
    height: 46px;
    font-size: 24px;
  }

  .portfolio_img img {
    transition: transform 12s ease;
  }
}


/* 작은 모바일 */
@media (max-width: 480px) {
  .portfolio_inner {
    width: 92%;
    padding-top: 45px;
  }

  .portfolio_item,
  .portfolio_item.reverse {
    gap: 24px;
    margin-bottom: 65px;
  }

  .portfolio_img {
    --portfolio-height: 280px;
    border-radius: 14px;
  }

  .portfolio_cate {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .portfolio_txt h2 {
    font-size: 26px;
    letter-spacing: -0.8px;
        margin: 0 0 0px;
  }

  .portfolio_desc {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .portfolio_arrow {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }
}