@charset "utf-8";

@import url('//fonts.googleapis.com/earlyaccess/nanummyeongjo.css');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");

*{list-style: none; text-decoration: none; margin:0; padding:0; box-sizing: border-box;  letter-spacing:-0.05em; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color:#000;}
.clearfix::after{content: ""; clear: both; display: block;} 

button{border:none; background:none;}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

input,select{ /*-webkit-appearance:none; */ -webkit-border-radius:0; background-color:#fff;}

.mart5{margin-top:5px;}
.mart10{margin-top:10px;}

table, th, thead, tfoot {outline: 0;}
table{border-collapse: collapse; border-spacing: 0;}

html{scroll-behavior: smooth;}
body, html {height: 100%;}

label, input, button, select, img{vertical-align:middle;}

.pag_bg{height: 850px; background:url('./img/page_bg') no-repeat; background-size:cover; position:relative;}
.pag_bg > div{position:absolute; bottom:120px; left:80px;}
.pag_bg > div h2{color:#fff; font-size:70px; line-height:95px;}
.pag_bg > div h2 span{color:#ffff00;}
.pag_info{max-width:1200px; margin: 0 auto; margin-top:130px; text-align:center;}
.pag_info h2{font-size:48px; font-weight:800; padding-top:120px;}
.pag_info h3{font-size:22px; color:#57575b; font-weight:500; margin-top:15px; margin-bottom:60px;}

.pag_sd {position: relative; width: 100%; max-width: 1200px; height: 540px;  margin: 0 auto; overflow: visible;}
.slider-container {position: relative; width: 100%; height: 100%;}
.slider-item {position: absolute; top: 0; height: 530px;  border-radius: 8px; transition: all 0.5s ease; opacity: 0;  transform: scale(0.8); z-index: 0; pointer-events: none; visibility: hidden;}
.slider-item.active {width: 1200px; left: 0; opacity: 1; transform: scale(1); z-index: 10; pointer-events: auto; visibility: visible;}
.slider-item.left {width: 220px; left: -240px; opacity: 0.6; z-index: 5;  pointer-events: auto; visibility: visible;}
.slider-item.right {width: 220px; left: 1220px; opacity: 0.6; z-index: 5; pointer-events: auto; visibility: visible;}
.descriptions{margin-top: 20px; text-align: center; position: relative; z-index: 20;}
.descriptions button{cursor: pointer; padding: 8px 20px;  margin: 0 8px;  color:#c3c3c5; font-size:24px; font-weight:600; position:relative;}
.descriptions button.active{color:#000; font-weight:700;}
.descriptions button.active::after{content:''; position:absolute; top:0; right:5px; width:12px; height:12px; background-color:red; border-radius:50%;}

.mbg_stn{max-width:1200px; flex-direction:column; width:100%; display:flex; margin-left: auto; margin-right:auto; margin-bottom:50px;}
.mbg_stn .mbg_bx{height: calc(100vh - 100px); display:grid; width:100%; align-items: stretch; gap: 2.5rem;  grid-template-columns:  1fr 2fr; padding-top:100px;}
.mbg_stn .mbg_bx_right{grid-template-columns:  2fr 1fr;}

.mbg_stn .mbg_bx .mbg_qu{padding:0 18px; background-color:#ffe4d6; color:#ff5a0a; display:inline-block; border-radius:50px; height:44px; line-height:44px; margin-bottom:27px; font-weight:500;}
.mbg_stn .mbg_bx .mbg_qu img{width:16px; margin-right:7px;}
.mbg_stn .mbg_bx .mbg_h2 h2{font-size:48px; font-weight:700; line-height:65px;}
.mbg_stn .mbg_bx .mbg_p{margin-top:20px;}
.mbg_stn .mbg_bx .mbg_p .p_he{letter-spacing: -0.07em;}
.mbg_stn .mbg_bx .mbg_p p{font-size:24px; color:#57575b; line-height:36px;}


.mbg_stn .mbg_bx  .mdb_font h2{font-size:40px; line-height:55px;}
.mbg_stn .mbg_bx  .mdb_font .fnt_1{font-size:32px; font-weight:500;}
.mbg_stn .mbg_bx .mdb_font2 p{font-size:20px; line-height:30px;}
.mbg_stn .mbg_bx .mdb_font2 h3{margin-top:10px; font-size:22px;}

.mbg_stn .mbg_bx .mbg_bx2{display:flex; flex-direction: column;
    justify-content: center;
    height: 100%;}
.mbg_stn .mbg_bx .mbg_bx2 img{width:100%; object-fit: contain; border-radius: 20px; }
.mbg_stn .mbg_bx .mbg_bx2 .nbg6_ig{width:100%; object-fit: contain; border-radius: 20px; }

.mbg_stn .mbg_bx .mbg_bx1{display:flex; flex-direction:column; justify-content:center; height:100%;}

.mbg_ftr .ftr_bx{padding:50px; background-color:#3d3d3d;}
.mbg_ftr .ftr_bx h3{color:#fff; font-size:15px; margin-bottom:15px;}
.mbg_ftr .ftr_bx p{color:#fff; font-size:12px; line-height:18px;}

.footer{border-top:1px solid #e9e9e9; width:100%;}
.footer .ft_bx{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; max-width:1200px; margin: 0 auto; padding: 50px 0;}
.footer .ft_bx h1{font-size:16px; margin-bottom:30px;}
.footer .ft_bx p{font-size:14px; color:#919197; margin-bottom:8px;}
.footer .ft_bx p span{margin: 0 8px;}
.footer .ft_bx .ft_ri a{width:42px; height:42px; border:1px solid #e9e9e9; display:inline-block; border-radius:50%; text-align:center; line-height:38px;}
.footer .ft_bx .ft_ri a img{width:20px;}

.pc{display:block}
.mob{display:none;}



/* 홈페이지 */
.header {position:fixed; top:0; left:0; width:100%; min-width:1200px; padding: 0 40px; z-index:1000; height:100px; overflow:hidden; -webkit-transition: height 0.3s; -moz-transition: height 0.3s;  transition: height 0.3s; line-height:100px;}
.header .navi {-webkit-transition: all 0.3s; -moz-transition: all 0.3s;  transition: all 0.3s; }
.header .navi:after{content:''; clear:both; display:block;}
.header h1{float:left;}
.header h1 img{width:220px;}
.header h1 a{color:#fff;}
.header ul{float:left; margin-left:40px; }
.header ul li{padding-top:3px; margin-right:10px; float:left;}
.header ul li a{color:#fff; font-size:19px; padding: 0 20px; font-weight:500;}
.header ul li a.active-link{color:#00c473; font-weight:500;}
.header.roll{background-color:#fff; box-shadow: 0px 6px 9px -4px rgba(153, 153, 153, .25);}
.header.roll a{color:#000;}

.content{width:100%; height:900px; background:url('./img/home_bg2.png'); position:relative;}
.content .cntbx{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center;}
.content .cntbx p,
.content .cntbx h2,
.content .cntbx h3{color:#fff;}
.content .cntbx .cntp1{font-size:32px; font-weight:600;}
.content .cntbx h2{font-size:65px; margin:6px 0;}
.content .cntbx h3{font-size:30px; color:#e0f1b1; font-weight:500;}

.content .cntbx > div{margin-top:50px;}
.content .cntbx > div p{font-size:24px; line-height:38px;}


/* /홈페이지 */



/* 오른쪽 슬라이드 영역 */
.simple-slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  position: relative;
}

.simple-slider .slides {
  display: flex;
  width: 200%; /* 2장 */
  height: 100%;
  animation: slideAnimation 6s infinite;
}

.simple-slider .slide {
  width: 50%; /* 2장 기준 */
  height: 100%;
  flex-shrink: 0;
}

.simple-slider .slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 자동 슬라이드 애니메이션 */
@keyframes slideAnimation {
  0%, 45% {
    transform: translateX(0%);
  }
  50%, 95% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

.video{position:relative;}
.video .vidbx{position:absolute; right:55px; top:70px; width:317px; height:317px; object-fit:cover; object-position:center; border-radius:10px;}
.video .nbgr{position:absolute; left:50%; top:50%; width:100px; height:100px; transform:translate(-50%, -50%);}




/* 반 응 형 */
@media (max-width:400px){
	.pc{display:none}
	.mob{display:block;}

	.pag_bg{width:100%; height:100%; background-position:center; background:url('./img/mob_banner_11.png') no-repeat; background-size:cover;}
	.pag_bg > div{left:20px;}
	.pag_bg > div h2{font-size:40px; line-height:60px;}

	.pag_info{width:100%; padding: 0 20px;}
	.pag_info h2{font-size:30px; padding-top:0px;}
	.pag_info h3{font-size:18px; line-height:25px; margin-bottom:40px;}

	.slider-item.left,
	.slider-item.right{display: none;}

	.pag_sd{padding: 0 20px; height:300px;}
	.slider-item{height:300px;}
	.slider-item.active{width:100%;}
	.mobs1{background:url('./img/mob_page_info1.png') no-repeat !important; background-size:cover !important; background-position:center center !important; }
	.mobs2{background:url('./img/mob_page_info2.png') no-repeat !important; background-size:cover !important; background-position:center center !important; }
	.mobs3{background:url('./img/mob_page_info3.png') no-repeat !important; background-size:cover !important; background-position:center center !important; }
	
	.descriptions button{font-size:20px;}

	.mbg_stn{margin-bottom:20px; margin-top:80px;}
	.mbg_stn{padding: 0 20px;}
	.mbg_stn .mbg_bx{gap: 1.5rem; flex-direction: column; display:flex; height:100%; margin-bottom:60px; padding-top:0px;}
	.mbg_stn .mbg_bx .mbg_bx2{width:100%;}
	.mbg_stn .mbg_bx .mbg_bx2 img {object-fit: cover; width:100%; border-radius:10px;}
	.mbg_stn .mbg_bx .ord1{order:2;}
	.mbg_stn .mbg_bx .mbg_qu{margin-bottom:15px;}
	.mbg_stn .mbg_bx .mbg_h2 h2{font-size:30px; line-height:40px;}
	.mbg_stn .mbg_bx .mbg_p{margin-top:12px;}
	.mbg_stn .mbg_bx .mbg_p p{font-size:18px; line-height:26px;}
	.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:6px;}
	
	.footer .ft_bx{padding: 40px 20px;}
	.footer .ft_bx h1{margin-bottom:20px;}
	
	.pag_info{margin-top:100px;}
	.mbg_stn .mbg_bx .mdb_font .fnt_1{font-size:22px;}

	.header{padding:0 20px; height:80px; line-height:80px;}
	.header h1 img{width:150px;}
	.header ul{display:none;}
	
	.content .cntbx{width:100%; padding: 0 20px;}
	.content .cntbx h2{font-size:35px;}
	.content .cntbx h3{font-size:20px;}
	.content .cntbx .cntp1{font-size:24px;}
	.content .cntbx > div p{font-size:18px; line-height:28px;}

	.vidbx {border-radius:10px;}


}

@media (max-width:370px){
	.pag_bg > div h2{font-size:38px;}
	.descriptions button{font-size:18px;}
}