/* body */
body::-webkit-scrollbar {width:10px;}
body::-webkit-scrollbar-thumb {background:#bbb; border-radius:5px;border:2px solid #fff;}
body::-webkit-scrollbar-track {background:#fff;}

/* header 헤더 */
#header {box-sizing:border-box;width:100%;position:relative;z-index:99;transition:0.5s;}
#header .header-bg {width:100%;max-width:1300px;height:100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;position:relative;transition:0.5s;}
#header .header-bg .main-logo {font-family:'Pretendard-Bold';font-size:28px;color:#222;}
#header .header-bg .main-menu {display:flex;align-items:center;}
#header .header-bg .main-menu #gnb_1dul {position:absolute;left:50%;transform:translateX(-50%);}
#header .header-bg .main-menu .gnb_1da {display:block;font-size:18px;color:#333;text-decoration:none;transition:0.5s;white-space:nowrap;line-height:100px;}

/*모바일메뉴*/
.m-menu-con {
	position: fixed;
	min-width:500px;
	height:100vh;
	top:0px;
	right:-1500px;
	background:#fff;
	z-index: 9999;
	transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s; /*크롬, 사파리*/
	-moz-transition-duration: 0.5s; /*파이어폭스*/
	-ms-transition-duration: 0.5s; /*익스플로러*/
	-o-transition-duration: 0.5s;  /*오페라*/
	/*overflow-y:scroll;*/
}

.m-menu-btn ul li {width:23px; height:2px; background:#111;margin-bottom:5px;}
.m-menu-btn ul li:last-child {margin-bottom:0px;}

.m-menu .close {position:absolute;z-index:9999;display:block !important;top:20px;right:30px;color:#000;font-size:24px;cursor:pointer;}
.m-menu .gnb-total-logo {padding:30px;}
.m-menu .gnb-total-logo img{width:100%;}
.m-menu .menu-title {padding:20px 30px;background:#0A5CFF;}
.m-menu .menu-title h3 {font-size:22px;color:#fff;}
.m-menu .menu-title > ul {display:flex;align-items:center;margin-right:30px;}
.m-menu .menu-title > ul li {margin-right:20px;}
.m-menu .menu-title > ul li:last-child {margin-right:0px;}
.m-menu .menu-title > ul li a {color:#fff;font-size:15px;}

.m-menu .gnb-total-menu {text-align:left;padding:30px;}
.m-menu .gnb-total-menu > li {margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eee;}
.m-menu .gnb-total-menu > li:last-child {border-bottom:0px;margin-bottom:0px;padding-bottom:0px;}
.m-menu .gnb-total-menu > li > a {position:relative;display:block;line-height:1.5 !important;color:#222;}
.m-menu .gnb-total-menu > li > a:after {transition:0.2s;content:'';position:absolute;top:50%;right:10px;transform:translateY(-75%) rotate(45deg);width:10px;height:10px;border-right:2px solid #000;border-top:2px solid #000;}
.m-menu .gnb-total-menu > li.active > a {color:#555;}
.m-menu .gnb-total-menu > li.active > a:after {transform:translateY(-35%) rotate(135deg);border-color:#555;}
.m-menu .gnb-total-menu li a {color:#222 !important;font-size:22px;}
.m-menu .gnb-total-menu li ul {margin-top:10px;}
.m-menu .gnb-total-menu li ul a{display:block;font-size:18px;cursor:pointer;color:#777;text-align:left;padding:3px 0;}
.m-menu .gnb-total-menu li ul li {margin-bottom:10px;}
.m-menu .gnb-total-menu li ul li ul {border-bottom:1px solid #ccc;}
.m-menu .gnb-total-menu li ul li ul li a {background:#fff;font-size:14px;color:#717171;padding:5px 15px;border-bottom:none;}

.m-menu.on .m-menu-con {right:0px;}
.m-menu-bg {background:rgba(0,0,0,0.8);width:100%;height:100vh;position:fixed;top:0;right:0;z-index:9998;display:none;transition: right 0.7s;cursor:pointer;}
.accordian li ul {display:none;}

.menu-flex, .menu-flex > div {display:block;}
.m-mian-menu-flex {display: -webkit-box; display: -ms-flexbox; display: flex;justify-content:end;align-items:center;}
.m-main-menu-flex>div:first-child {margin-right:30px;}
.m-main-menu-flex > ul {display: flex;align-items:center;margin-right:30px;}
.m-main-menu-flex > ul li {margin-right:15px;}
.m-main-menu-flex > ul li:last-child {margin-right:0px;}

.m-menu-about {padding:30px;}
.m-menu-about h4 {font-size:16px;margin-bottom:10px;}
.m-menu-about ul li {font-size:14px;padding-left:13px;position:relative;color:#333;}
.m-menu-about ul li:after {content:"";position:absolute;top:9px;left:0px;width:4px;height:4px;background:#333;border-radius:50%;}

/*main_banner*/
.main-banner {position:relative;width:100%;}
.main-banner .main-swiper {height: calc(100vh - 100px);max-height:811px;position:relative;}

.main-banner .main-swiper .swiper-slide .img {position:relative;height:100%;overflow:hidden;}
.main-banner .main-swiper .swiper-slide .img:after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.3);z-index:2;}
.main-banner .main-swiper .swiper-slide .img img {width:100%;height:100%;object-fit:cover;}
.main-banner .main-swiper .swiper-slide.swiper-slide-active img {
	animation:img-box 3s 0.2s both;
	-webkit-animation:img-box 3s 0.2s both;
	-ms-animation:img-box 3s 0.2s both;
	-moz-animation:img-box 3s 0.2s both;
	-o-animation:img-box 3s 0.2s both;}

@keyframes img-box {
	0% {
		transform: scale(1.05);
	}
	100% {
		transform: scale(1);
	}
}

.main-banner .inner {position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);padding:30px;width:100%;max-width:1300px;z-index:3;}
.main-banner .inner p {color:#fff;font-size:24px;text-shadow:0 0 10px rgba(0,0,0,0.3);}
.main-banner .inner h3 {color:#fff;font-size:72px;margin-top:20px;text-shadow:0 0 20px rgba(0,0,0,0.3);}
.main-banner .inner h3 span {color:#0A5CFF;}
.main-banner .arrow-box {display:flex;justify-content:space-between;padding:0 50px;position:absolute;top:50%;left:0%;transform:translateY(-50%);width:100%;z-index:2;}
.main-banner .swiper-button-next,
.main-banner .swiper-button-prev {width: 30px; height: 60px; margin-top: 0; top: 0;background-size: 30px; z-index: 3;color: #fff; font-size: 18px;position:static !important;}
.main-banner .swiper-button-next {right: 0;background: url('/theme/miso_v3/img/main_banner_next.svg') no-repeat center;}
.main-banner .swiper-button-prev {left: 0;background: url('/theme/miso_v3/img/main_banner_prev.svg') no-repeat center;}
.main-banner .swiper-button-next:after,
.main-banner .swiper-button-prev:after {display: none; font-size: 0;}

/* 유튜브 */
.youtube-container{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* ← 16:9 비율 고정 */
  height: auto;
  overflow: hidden;
  border-radius: 15px;
}
.youtube-container iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 구형 브라우저 폴백 */
@supports not (aspect-ratio: 1 / 1){
  .youtube-container{
    height: 0;
    padding-bottom: 56.25%; /* 9/16 */
  }
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 101%;
  height: 101%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

/* 메인 본문 */
.section {padding-top:120px;}
.section .section-con {max-width:1920px;width:1300px;margin:0 auto;}
.section .section-title {margin-bottom:70px;text-align:center;}
.section .section-title img {width:83px;margin-bottom:25px;}
.section .section-title h5 {font-size:20px;margin-bottom:15px;color:#ccc;}
.section .section-title h4 {font-size:42px;}
.section .section-title h4 span {color:#0A5CFF;}
.flex-box {display:flex;align-items:center;}
.flex-box .img {margin-right:30px;}

.company-ul {display:flex;align-items:center;gap:20px;}
.company-ul li {position: relative;width: 100%;border-radius: 10px; overflow: hidden;}
.company-ul li::before {content: "";position: absolute;inset: 0;background-size: cover;background-position: center;transition: transform 0.5s ease;z-index: 0;}
.company-ul li:nth-child(1)::before { background-image: url(/theme/miso_v3/img/section01_img01.jpg); }
.company-ul li:nth-child(2)::before { background-image: url(/theme/miso_v3/img/section01_img02.jpg); }
.company-ul li:nth-child(3)::before { background-image: url(/theme/miso_v3/img/section01_img03.jpg); }
.company-ul li:nth-child(4)::before { background-image: url(/theme/miso_v3/img/section01_img04.jpg); }
.company-ul li:hover::before {transform: scale(1.1);}
.company-ul li a {border-radius: 10px;overflow: hidden;display: block;margin: 15px;padding: 150px 20px;border: 1px solid rgba(255,255,255,0.2);position: relative;z-index: 1; /* 텍스트는 위로 */}
.company-ul li a .txt {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
.company-ul li a .txt h5 {color: #fff;font-size: 28px;}

.section02 {background:url(/theme/miso_v3/img/section02_bg.jpg) no-repeat center; background-size:cover;margin-top:120px;padding:120px 0;}
.section02 .section-title h4 {color:#fff;}
.business-ul {display:flex;gap:20px;}
.business-ul li {position: relative;width: 100%;border-radius: 10px; overflow: hidden;background:#fff;}
.business-ul li a {display:block;height:100%;padding:40px;transition:0.5s;}
.business-ul li a .txt h5 {font-size:22px;margin-bottom:20px;}
.business-ul li a .txt p {font-size:17px;color:#555;}
.business-ul li a .txt span {display:block;margin-top:50px;color:#ccc;font-size:52px;font-family:'Pretendard-Bold';text-align:right;line-height:1;}

.business-ul li a:hover {background:#0A5CFF;}
.business-ul li a:hover .txt h5 {color:#fff;}
.business-ul li a:hover .txt p {color:#fff;}
.business-ul li a:hover .txt span {color:#fff;}


#top_btn {display:none;}

/* 하단 */
#ft {clear:both; width:100%; text-align:left; background:#222;margin-top:120px; }

#ft .ft_wr {margin:0 auto;width:100%;max-width:1300px;padding:60px 0px;}
#ft .ft_wr .ft_top {padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid rgba(255,255,255,0.2);}
#ft .ft_wr .ft_top ul {display:flex;align-items:center;gap:30px;}
#ft .ft_wr .ft_top ul li a {font-size:16px;color:#777;}
#ft .ft_wr .ft_top ul li:first-child a {font-family:'Pretendard-Bold';color:#fff;}

#ft .ft_wr .ft_con {display:flex;justify-content:space-between;}

#ft .ft_wr .inner01 .copyright {margin:0 0 35px;}
#ft .ft_wr .inner01 .copyright ul {display:flex;margin-bottom:10px;}
#ft .ft_wr .inner01 .copyright ul:last-child {margin-bottom:10px;}
#ft .ft_wr .inner01 .copyright ul li {margin-right:25px;position:relative;font-size:16px;color:#777;}
#ft .ft_wr .inner01 .copyright ul li span {display:inline-block;margin-right:10px;color:#fff;}
#ft .ft_wr .inner01 > p {font-size:16px;color:#777;}
#ft .ft_wr .inner01 > p a {display:inline-block;margin-left:10px;color:rgba(255,255,255,0.5);}
#ft .ft_wr .inner02 ul {display:flex;align-items:center;gap:15px;}

#move-top-btn {transition:0.5s;position:fixed;bottom:-100px;right:20px;z-index:2;width:70px;height:70px;background:#0A5CFF;border-radius:5px;display:flex;align-items:center;justify-content:center;flex-direction:column;}
#move-top-btn.on {bottom:20px;}
#move-top-btn:hover {background:#111;}
#move-top-btn i {color:#fff;margin-bottom:5px;font-size:15px;}
#move-top-btn p {color:#fff;font-size:15px;}

.privacy h3 {font-size:18px;color:#333;margin-bottom:10px;font-weight:bold;}
.privacy p {font-size:16px;color:#555;margin-bottom:30px;}

.side-menu {width:100px;display:flex;justify-content:center;position:fixed;right:0;top:50%;transform:translateY(-50%);background:#0A5CFF;backdrop-filter:blur(50px);padding:10px;border-radius: 10px 0 0 10px;z-index:3;}
.side-menu ul {width:100%;}
.side-menu ul li {height:100px;border-bottom:1px solid rgba(255,255,255,0.2);text-align:center;}
.side-menu ul li:last-child {border-bottom:0px;}
.side-menu ul li a {width:100%;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;}
.side-menu ul li .img {margin-bottom:12px;}
.side-menu ul li .txt p {color:#fff;font-size:14px;}

/* 본문 */

/* sub */
.sub-banner {position:relative;margin-bottom:40px;position:relative;}
.sub-banner .sub-banner-bg {height:260px;}
.sub-banner .sub-banner-bg img {width:100%;height:100%;object-fit:cover;}
.sub-banner .sub-banner-con {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.sub-banner .sub-banner-con ul {display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:30px;}
.sub-banner .sub-banner-con ul li {display:flex;align-items:center;}
.sub-banner .sub-banner-con ul li:first-child img {margin-right:10px;}
.sub-banner .sub-banner-con ul li p {font-size:17px;color:rgba(255,255,255,0.6);line-height:20px;}
.sub-banner .sub-banner-con h2 {color:#fff;font-size:42px;text-align:center;line-height:1;}

.sub-menu {max-width:1300px;width:100%;margin:0 auto;display:flex;justify-content:center;}
.sub-menu ul {display:inline-flex;align-items:center;justify-content:center;border-radius:500px;gap:15px;}
.sub-menu ul li a {display:block;padding:15px 30px;min-width:180px;text-align:center;color:#222;border-radius:500px;font-size:18px;border:1px solid #eee;}
.sub-menu ul li a.active {color:#fff;background:#0A5CFF;border:1px solid #0A5CFF;}

.sub-title {text-align:center;margin:70px 0;}
.sub-title h3 {color:#222;font-size:38px;}

/**/
.company-con {display:flex;justify-content:center;align-items:flex-start;}
.company-con .inner01 {margin-right:100px;margin-top:20px;}
.company-con .inner01 h3 {font-size:1.8rem;line-height:1.4;}
.company-con .inner01 p {font-size:1.2rem;line-height:1.4;color:#333;}
.company-con .inner02 {border-radius:10px;overflow:hidden;display:flex;}
.company-con .inner02 img {width:100%;}

@media screen and ( max-width:1910px ) {
	#header .header-bg {width:100%;padding:0 20px;}
	#header .header-bg .logo-box {left:20px;}
	#header .header-bg .right {right:20px;}
	.link-ul {margin-right:30px;}
	
	#hd, #wrapper, #ft {min-width:100%;}
	
	#ft .ft_wr {padding:50px 20px;}
	
}

@media screen and ( max-width:1420px ) {
	#hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr {width:100% !important;}
	
	#gnb_1dul .gnb_1dli {margin-right:50px;}
	#header .header-bg .main-menu .gnb_1da {font-size:18px;}
	
	.main-banner .inner p {font-size:22px;}
	.main-banner .inner h3 {font-size:52px;}
	
	.section .section-con {padding:0 20px;width:100%;}
	.section .section-title h4 {font-size:36px;}
	
	.best-products .swiper-slide {width:420px;}
	.best-products .swiper-slide .card .txt h4 {font-size:22px;}
	.best-products .bot {width:420px;}
	.best-products .controller .pagination {width:240px;}
	
	.section02 .section-title h4 {text-align:center;}
	.section02 .section-title p {text-align:center;}
	.video-modal {display:flex;justify-content:center;}
	
	.section03-ul {gap:20px;}
	
	/* 파트너 회원사 */
	.partner-con {flex-direction:column;align-items:center;}
	.partner-con .txt {margin-right:0px;margin-bottom:70px;width:100%;}
	.partner-con .btn-ul {justify-content:center;}
	
}

@media screen and ( max-width:1320px ) {
	.sub-about .sub-section02 {flex-direction:column;}
	.sub-about .sub-section02 .img {margin-right:0px;margin-bottom:50px;}
	.sub-about .sub-section02 .img img {max-width:100%;}
	.sub-about .sub-section02 .txt {text-align:center;}
}

@media screen and ( max-width:1210px ) {
	#header .header-bg {height:80px;}
	#gnb_1dul {display:none;}
	
	.m-menu .gnb-total-menu li ul li {margin-bottom:5px;}
	.m-menu .gnb-total-menu li a {font-size:18px;}
	.m-menu .gnb-total-menu li ul a {font-size:16px;}
	
	#header .header-bg .right > ul {display:none;}
	
	.m-menu-btn {display:block;}
	.right-menu {display:flex; align-items:center;}
	
	.flex-box {flex-direction:column;}
	.flex-box .img {margin-right:0px;margin-bottom:20px;}
	.flex-box .img img {width:55px;}
	
	.section-slider a .txt-box h4 {font-size:18px;}
	#ft .ft_wr {flex-direction:column;}
	#ft .ft_wr .inner02 {margin-top:50px;}
	#ft .ft_wr .inner01 > p {text-align:center;}
	
	/* sub */
	.sub-section {margin-bottom:70px;}
	.sub-bg {padding:120px 30px !important;}
	.sub-bg h4 {font-size:28px;}
	.sub-bg p {font-size:18px;}
	
	.sub-title {font-size:26px;}
	.sub-box {padding:50px 30px;}
	.sub-box p {font-size:17px;}
	
	.sub-about .sub-section02 ul li {width:100%;margin-right:0px;}
	.sub-about .sub-section02 ul li:nth-child(1) {margin-top:0;}
	.sub-about .sub-section02 ul li:nth-child(2) {margin-top:2%;}
	.sub-about .sub-section02 ul li p {font-size:17px;}

}

@media screen and ( max-width:1010px ) {
	
	.main-banner .inner p {font-size:17px;}
	.main-banner .inner p br {display:block;}
	.main-banner .inner h3 {font-size:42px;line-height:1.2;}
	.main-banner .swiper-button-next,
	.main-banner .swiper-button-prev {width: 20px; height: 40px; margin-top: 0; top: 0;background-size: 20px; z-index: 3;color: #fff; font-size: 18px;position:static !important;}
	
	.section .section-con {padding:0px 20px;}
	.section .section-title h4 {font-size:24px;}
	
	.company-ul {flex-wrap:wrap;gap:3%;}
	.company-ul li {position: relative;width: 48.5%;border-radius: 10px; overflow: hidden;margin-bottom:3%;}
	
	.business-ul {flex-wrap:wrap;gap:3%;}
	.business-ul li {position: relative;width: 48.5%;border-radius: 10px; overflow: hidden;margin-bottom:3%;}
	
}

@media screen and ( max-width:910px ) {
	#ft .ft_top {flex-direction:column;padding:30px 20px;}
	#ft .ft_wr {padding:30px 20px 60px;}
	#ft .ft_wr .ft_top ul {justify-content:center;}
	#ft .ft_wr .ft_con {flex-direction:column;}
	#ft .ft_wr .inner01 .copyright {display:flex;flex-direction:column;align-items:center;}
	#ft .ft_wr .inner02 ul {justify-content:center;}
}

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

@media screen and ( max-width:720px ) {
	
	.main-banner .main-swiper {height:420px;}
	.main-banner .arrow-box {padding:0 20px;}
	.main-banner .inner {text-align:center;}
	
	.section {padding-top:80px;}
	.section .section-title {margin-bottom:40px;}
	
	.company-ul li a {padding:80px 20px;margin:10px;}
	.company-ul li a .txt h5 {font-size:20px;}
	
	.section02 {padding:80px 0;margin-top:80px;}
	.business-ul {flex-wrap:wrap;gap:3%;}
	.business-ul li {width:100%;}
	.business-ul li a {padding:40px 30px;}
	.business-ul li a .txt h5 {font-size:20px;}
	.business-ul li a .txt p {font-size:15px;}
	.business-ul li a .txt p br {display:none;}
	.business-ul li a .txt span {font-size:32px;margin-top:20px;}
	
	#ft {margin-top:70px;}
	#ft .ft_wr .inner01 .copyright {margin:20px 0 20px 0;}
	#ft .ft_wr .inner01 .copyright ul {display:flex;flex-direction:column;margin-bottom:5px;width:100%;}
	#ft .ft_wr .inner01 .copyright ul li {margin-right:0px;margin-bottom:5px;}
	#ft .ft_wr .inner01 .copyright ul li:last-child {margin-bottom:0px;}
	#ft .ft_wr .inner01 .copyright ul li:after {display:none;}
	
	.side-menu {width:auto;right:15px;top:auto;bottom:15px;transform:translateY(0%);background:inherit;backdrop-filter:blur(0px);}
	.side-menu ul {width:100%;}
	.side-menu ul li {height:auto;border-bottom:0px;margin-bottom:10px;}
	.side-menu ul li a {display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#0A5CFF;}
	.side-menu ul li:last-child {margin-bottom:0px;}
	.side-menu ul li .img {margin-bottom:0px;}
	.side-menu ul li .txt {display:none;}
	
	/* sub */
	.sub-banner .sub-banner-bg {height:220px;}
	.sub-banner .sub-banner-con {width:80%;}
	.sub-banner .sub-banner-con ul {margin-bottom:20px;}
	.sub-banner .sub-banner-con h2 {font-size:32px;}
	
	.sub-menu ul {flex-wrap:wrap;}
	.sub-menu ul li a {min-width:auto;padding:10px 30px;font-size:16px;}
	
	.sub-title {margin:50px 0;}
	.sub-title h3 {font-size:28px;}
	
	.company-con {flex-direction:column-reverse;}
	.company-con .inner01 {margin-right:0px;margin-top:50px;}
	.company-con .inner01 h3 {font-size:1.5rem;line-height:1.4;}
	.company-con .inner01 p {font-size:1rem;line-height:1.4;color:#555;}
	
}

@media screen and ( max-width:610px ) {
	.hd_pops {top:0 !important;left:0 !important;}
	.hd_pops_con {width:100% !important;height:auto !important;}
	#hd_pop img{max-width:100% !important;}
}

@media screen and ( max-width:510px ) {
	
	.m-menu-con {min-width:100%;width:100%;}
	.m-menu-about h4 {font-size:15px;}
	.m-menu-about ul li {font-size:12px;padding-left:10px;}
	.m-menu-about ul li:after {top:8px;width:3px;height:3px;}
	
	.main-banner .inner p {font-size:18px;}
	.main-banner .inner h3 {font-size:38px;}
	
	.company-ul li a {padding:60px 20px;}
	
	/* 서브 페이지 */
}