@charset "utf-8";
/* ===================================================== */
/* MAIN-COMMON */
.body-main main {overflow: hidden; }
.body-main #skip-nav::before {content: ''; position: fixed; inset: 0; pointer-events: none; background-color: #000; z-index: 9999; animation: fade-out .8s ease-in .2s both;}
.section {background: transparent no-repeat center/cover;}
.sec-header {position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom:6rem; text-align: center;}
.sec-tit { font-weight: 700; font-size: 2.4rem; letter-spacing: 0; color:var(--color-main); text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.2em; margin-bottom:2.4rem; font-family: var(--font-mont);}

.sec-stit { font-weight: 800; font-size: 4rem; letter-spacing: -0.025em; color:var(--color-sub); margin-bottom:4rem; font-family: var(--font-mont);}

.sec-desc {font-size: 3.5rem; text-align: center; font-weight:200; color:#000; line-height: 1.1; letter-spacing: -0.05em;}
.sec-desc span{display: block;}
.sec-desc span.stxt {font-size:1.8rem; font-weight: 400;}






@media (hover: hover) and (pointer: fine) {
}

@media (max-width: 1024px){
	.sec-stit {font-size:3.2rem;}
}
@media (max-width: 768px){
	.sec-tit {font-size: 2rem;;}
	.sec-desc {font-size: 4rem;}
}
@media (max-width: 576px){
}
@media (max-width: 480px){
}
/* MAIN-COMMON */
/* ===================================================== */

/*More Button*/
.main__more-btn a{display: flex; width:19rem; height:5rem; position: relative; font-size:1.4rem; transition:all 0.3s ease-in-out; font-family: var(--font-mont); color:#000;}
.main__more-btn a::before {content:''; width:100%; height:2px; background-color: #222; transition:all 0.3s ease-in-out; position: absolute; top:50%; left:0; transform: translate(0, -50%);}
.main__more-btn a::after {content:''; display: block; width:50px; height:50px; background:var(--color-sub) url('../images/main/ico_arrow_w.png') 50% 50% no-repeat; background-size: contain; flex-shrink:0 ; transition:all 0.3s ease-in-out; border-radius: 50% 50% 50% 0; position: absolute; top:50%; right:0; transform: translate(0, -50%);}


.main__more-btn a:hover {width:20rem;}
.main__more-btn a:hover::before,
.main__more-btn a:hover::after {background-color: var(--color-main);}


.main__more-btn.type1 a {width:12rem; font-size:0; text-indent:-99999px;}
.main__more-btn.type1 a:hover {width:13rem;}

.main__more-btn.type2 a {width:12rem; font-size:0; text-indent:-99999px;}
.main__more-btn.type2 a::before {background-color: #fff;}

.main__more-btn.type2 a:hover {width:13rem;}
.main__more-btn.type2 a:hover::after {background-color: #000;}

@media (max-width: 768px) {
	.main__more-btn a{width:16rem;}
	.main__more-btn a::after {width:32px; height:32px;}
	.main__more-btn a:hover {width:17rem;}
}

@media (max-width: 576px) {
}
@media (max-width: 480px) {
}

/* ===================================================== */



/* ===================================================== */
/* MAIN-VISUAL */

.visual {position: relative; padding:calc(var(--header-height) + 4rem) 2rem var(--header-height);}
.visual-wrap {display: flex; align-items: center; width: 100%;}
.visual-box {width: 50%; flex-shrink: 0;}


.visual-box.nth-1 {padding:0 5rem 0 ; display: flex; justify-content: flex-end; flex-shrink: 0; }
.visual-inner {max-width:72rem;  position: relative;}
.visual-inner::before {content:''; display: block; width: 100%; height:100%; border-radius: 50% 50% 50% 0; position: absolute; border:1px solid rgba(18, 181, 188, 0.6); z-index: -1; animation: move 20s linear infinite;}

.visual-inner::after {content:''; display: block; width:100%; height:100%; background:url('../images/main/visual_line.svg') top right no-repeat; background-size:contain; position: absolute; top:0; left:0; transform: translate(-100%, 100%); z-index: 2;}

.visual-video video{width:100%; height:100%; border-radius: 50% 50% 50% 0; overflow: hidden;box-shadow: 0 0 4rem var(--color-black-a1);object-fit: cover; object-position: 50% 50%;}
.visual-video::after {content:''; display: block; width: 100%; height:100%; border-radius: 50% 50% 50% 0; position: absolute; background:url('../images/common/bg_logo01.svg') 50% 50% no-repeat; top:0%; left:0%;z-index: 2; opacity: 0.4; background-size: 15rem auto; animation: vod-logo 20s linear infinite;}
@keyframes move {
  0%   { transform: scale(1) translate(5rem, -1rem); }
  25%  { transform: scale(0.9) translate(8rem, 3rem); }
  50%  { transform: scale(1.1) translate(-10px, 30px); }
  75%  { transform: scale(0.9) translate(0px, 10px); }
  100% { transform: scale(1)   translate(50px, -10px); }
}

@keyframes vod-logo { 
	0% { opacity: 0;} 
	40% { opacity:0.5;} 
	100% { opacity: 0;} 
}

.visual-box.nth-2 {padding-left:2rem;}
.visual-txt {z-index: 10; color:#222; letter-spacing: 0; line-height: 1.1;}
.visual-tit {font-size: 6.5rem; font-weight:700; position: relative; display: inline-block; z-index: 1;}
.visual-tit em {position: relative; color:var(--color-main);}
.visual-desc {font-size:2.4rem; font-weight:500; margin-top:3rem; font-family: var(--font-mont);}



/*.visual-on .visual-tit {animation: fade-in 2.5s ease-out .6s both;}*/
.visual-on .visual-tit .char{
	--vdd: 2s; /* visual-desc 애니메이션 시간 */
	animation: fade-down .5s ease-out calc(1.2s + (var(--vdd) / var(--char-total) * var(--char-index))) both; }
.visual-desc .char {
	--vdd: 2s; /* visual-desc 애니메이션 시간 */
	animation: fade-in .5s ease-out calc(2s + (var(--vdd) / var(--char-total) * var(--char-index))) both;} 



.visual-control{animation: fade-in 0.5s linear 1s both;  display: flex; align-items: center; gap:30px; margin-top:8rem; }
.visual-control .arrow {overflow: hidden; width:6rem; height:6rem; text-indent: -9999px; font-size:0; transition:all 0.3s ease-in-out; border-radius: 50% 50% 50% 0; border:2px solid #222; position: relative; flex-shrink: 0;}
.visual-control .arrow::before {content:''; display: block; width:16px; height:16px; border:2px solid #222; border-width:0 0 2px 2px; position: absolute; top:50%; left:50%; transform: translate(calc(-50% + 2px), -50%) rotate(45deg); transition:all 0.3s ease-in-out;}

.visual-control .arrow.next {transform:rotate(180deg);}

.visual-control .arrow:hover {background-color: var(--color-main); border-color: var(--color-main);transform:rotate(45deg);}
.visual-control .arrow:hover::before{border-color:#fff;transform: translate(calc(-50% + 2px), -50%) rotate(0deg);}
.visual-control .arrow.next:hover {transform:rotate(225deg);}



.visual-dot {max-width: 300px; width:100%;} 
.visual-dot .slick-dots {width:100%; height:2px; background-color:var(--color-black-a1); position: relative;}
.visual-dot button { font-size: 0; text-indent:-99999px; height:4px; border-radius:4px; width:100%; position: absolute;  top:50%; left:0; z-index: 2; transform:translate(0,-50%); opacity: 0; pointer-events: none;} 
.visual-dot .slick-active button {opacity: 1;}


.visual-dot button::after {content:''; display: inline-block; width:0; height:100%; position: absolute; background-color:var(--color-sub); top:0; left:0;}
.visual-dot .slick-active button::after {animation: is-dot 8.1s linear;animation-fill-mode: forwards;}

@keyframes is-dot {
	0% {width:0;}
	100% {width:100%;}
}


/* 스크롤 다운 */
.visual-scroll { position: absolute; right: var(--outer-padding); bottom: var(--header-height); animation: fade-in 1s linear 2s both;} 
.is-menu .visual-scroll {display: none;}

.visual-scroll-btn {display: flex; position: relative; align-items: center; flex-direction: column; gap:4px;} 
.visual-scroll-btn .bg {display: block; width:30px; height:48px; border:2px solid #222; border-radius: 30px; position: relative;}
.visual-scroll-btn .bg::after {content:''; display: block; position: absolute; box-sizing: border-box; width: 8px; height:8px; border:solid #222; border-width:0px 2px 2px 0; bottom:10px; left:50%; transform:translate(-50%, 0) rotate(45deg);}

.visual-scroll-btn .bg em {display: block; position: absolute; left:50%; top:5px;  width:4px; height:calc(100% - 24px); border-radius: 4px; background-color:transparent; overflow: hidden; transform: translateX(-50%);}
.visual-scroll-btn .bg em::before {content:''; display: block; border-radius: 4px; width: 100%; height:1rem; background-color: var(--color-main); position: absolute; top:0; left:0;animation: scroll-line 2s linear infinite;}


.visual-scroll-btn .txt {font-size:1rem; text-transform: uppercase; letter-spacing: -0.025em; color:#000; font-weight: 700;}

@keyframes scroll-line { 
	0% { transform: translateY(-110%); } 
	10% { transform: translateY(-60%); } 
	60% { transform: translateY(160%); } 
	70% { transform: translateY(210%); } 
	100% { transform: translateY(210%); } 
}


@media (hover: hover) and (pointer: fine) {
}

@media (max-width: 1600px) {
	.br-ma-in {display: none;}
}
@media (max-width: 1440px) {
	.visual-tit {font-size: 7rem;}
}

@media (max-width: 1280px) {
	.visual-tit {font-size: 6rem;}
	.visual-desc {font-size:2rem; margin-top:2rem;}


	.visual-control{ gap:20px; margin-top:6rem; }
	.visual-control .arrow {width:5rem; height:5rem;}

	.visual-control .arrow::before { width:12px; height:12px;}

	.visual-dot {max-width: 240px;}
	.visual-dot .slick-dots {height:1px;}
	.visual-dot button { height:2px;}

	.visual-scroll { bottom: 30px;}
}


@media (max-width: 1024px) {

	.visual-box.nth-1 {padding:0 3rem 0 0;}
	.visual-box.nth-2 {padding-left:2rem;}


	.visual-tit {font-size: 5rem; letter-spacing: -0.025em;}
	.visual-desc {font-size:2rem; margin-top:2rem;}

	.visual-control{ gap:15px; margin-top:5rem; }
	.visual-dot {max-width: 200px;}


	.visual-scroll-btn {display: flex; position: relative; align-items: center; flex-direction: column; gap:4px;} 
	.visual-scroll-btn .bg {width:26px; height:40px;}
	.visual-scroll-btn .bg::after {width: 6px; height:6px; bottom:6px;}

	.visual-scroll-btn .bg em {top:5px;  width:4px; height:calc(100% - 20px);}
}


@media (max-width: 768px) {
	.visual {padding:calc(var(--header-height) + 2rem) var(--inner-padding) var(--header-height);}
	.visual-wrap {flex-wrap: wrap; gap:6rem;}
	.visual-box {width:100%;}
	.visual-box.nth-1 {justify-content: center; padding:0;}
	.visual-box.nth-2 {padding:0; text-align: center;}

	.visual-control {justify-content: center; width:calc(100% - 70px); margin:0 auto; margin-top:2rem;}

	.visual-scroll {bottom:calc(var(--header-height) - 12px); right:5px;}

}
@media (max-width: 576px) {
}
@media (max-width: 480px) {
	.visual-scroll {bottom:10px; right:50%; transform:translate(50%, 0);}
	.visual-scroll-btn .bg {width:24px; height:35px;}
}
/* MAIN-VISUAL */
/* ===================================================== */










/* ===================================================== */
/* SECTION 2 Products*/
.main__product {padding:12rem 0 0; background-color:#f5f5f5}



.m-slogan {overflow: hidden; position: absolute; bottom:0; z-index: -1; width:100%;}
.m-slogan .item { font-size:22rem; color:var(--color-black-a1); font-weight: 900; line-height:1; text-transform: uppercase; margin-bottom:-0.14em;}
.m-slogan .item::before {content: attr(data-mtext); display: inline-block; white-space: pre;}
/*.m-slogan .item:hover::before {-webkit-animation-play-state: paused; animation-play-state: paused;}*/
@keyframes s_marquee {
	0% {transform: translateX(0%);}
	100% {transform: translateX(-50%);}
}
.main__product-wrap {display: flex; position: relative; z-index: 1; justify-content: space-between;}
.main__product-wrap .desc {width:50%; padding:0 6rem 0 var(--inner-padding); flex-shrink: 0; margin-right:5rem;}
.main__product-wrap .title {font-size:6rem; color:#000; font-weight: 700; line-height: 1.1; margin-bottom:4rem;}
.main__product-wrap .txt {font-size:2rem; color:#666; font-weight: 300;}
.main__product-wrap .main__more-btn {margin-top:9rem;}


.main__product-wrap .image {overflow:hidden;}
.main__product-wrap .image .item{border-radius:24rem 0 0 0; overflow: hidden;width: 100%; height: 100%; }
.main__product-wrap .image .item img{transition: all 0.3s; animation: is-ascale 6s linear infinite alternate; width: 100%; height: 100%; object-fit: cover;}
@keyframes is-scale {
	0% {transform: scale(1.1);}
	100% {transform: scale(1);}
}




@media (max-width: 1280px){
	.m-slogan .item { font-size:20rem; }

	.main__product-wrap .desc {padding:0 5rem var(--header-height) var(--inner-padding);margin-right:3rem;}
	.main__product-wrap .title {font-size:5rem; margin-bottom:4rem;}
	.main__product-wrap .txt {font-size:2rem;}
	.main__product-wrap .main__more-btn {margin-top:8rem;}

	.main__product-wrap .image .item{border-radius:20rem 0 0 0;}
	

}
@media (max-width: 1024px){
}
@media (max-width: 768px){
	.main__product {padding:10rem 0 0;}
	.m-slogan {bottom:26rem;}
	.m-slogan .item { font-size:18rem; }

	.main__product-wrap {flex-direction: column;}
	.main__product-wrap .desc { padding:0 var(--inner-padding); margin-right:0; width:100%; text-align: center;}
	.main__product-wrap .title {font-size:5rem; margin-bottom:3rem;}

	.main__product-wrap .main__more-btn {margin:6rem 0;}
	.main__product-wrap .main__more-btn a {margin: 0 auto;}
	.main__product-wrap .image {padding:0 var(--inner-padding);}
	.main__product-wrap .image .item{border-radius:20rem 20rem 20rem 0; max-height: 26rem;}
}
@media (max-width: 576px){
}
@media (max-width: 480px){
}
/* ===================================================== */







/* ===================================================== */
/* SECTION 3 Company*/
.main__company {padding:12rem 0 13rem;}

.main__company-wrap {padding-top:4rem;}
.main__company-inner {position: relative;display: flex; align-items: center; justify-content: center;}


.main__company-circle {width:62rem; height:62rem;position: relative;display: flex; align-items: center; justify-content: center; z-index: 2;}
.main__company-circle::before,
.main__company-circle::after {content:''; display: block; width:100%; height:100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; position: absolute; top:0; left:0; transition: all 0.3s ease-in-out;}

.main__company-circle::before {background-image: url('../images/main/section03_img01.png');animation: circle 22s linear infinite; z-index: 1;}
.main__company-circle::after {background-image: url('../images/main/section03_img02.png'); top:2rem; left:2rem; animation: circle1 22s linear infinite; z-index: -1;}

@keyframes circle {
	0%   { transform: scale(1) rotate(0); }
	50%  { transform: scale(1.3) rotate(180deg); }
	100% { transform: scale(1)  rotate(360deg); }
}

@keyframes circle1 {
	0%   { transform: scale(0.9) rotate(0); }
	50%  { transform: scale(1.2) rotate(-180deg); }
	100% { transform: scale(0.9)  rotate(-360deg); }
}

.main__company-item { width: 100%; position: absolute; height: 100%; top:0; left:0;}

.main__company-item .item {position: absolute; top:0; left:0; z-index: 3; width:25%;color:#000;}
.main__company-item .item.nth-2 {top:auto; left:6rem; bottom:0;}
.main__company-item .item.nth-3 {top:50%; right:0; left:auto; transform:translateY(-50%);}
.main__company-item .item .title {font-size:3.2rem; font-weight: 700; position: relative; padding-left:2rem; margin-bottom:2rem;}
.main__company-item .item .title::before {content:''; display: block; width:4rem; height:4rem; background-color: var(--color-main); opacity: 0.4; border-radius: 50% 50% 50% 0; position: absolute; top: 0; left:0; z-index: -1;}
.main__company-item .item .txt {font-size:1.8rem; margin-bottom:2.4rem;}


@media (max-width: 768px){
	.main__company {padding:10rem 0 12rem;}

	.main__company-circle .logo {max-width:35%;}

	.main__company-item .item {width:30%;}
}

@media (max-width: 640px){
	.main__company {padding:10rem 0 2rem;}
	.main__company-inner {flex-direction: column;}
	.main__company-circle {width:100%; height:40rem;}
	

	.main__company-item {position: static; display: flex; flex-direction: column;}

	.main__company-item .item {position: static; width:100%; border-bottom:1px solid rgba(18, 181, 188, 0.5); padding: 4rem 0;}
	.main__company-item .item.nth-1 {order:1;}
	.main__company-item .item.nth-1 {order:3; border:0;}
	.main__company-item .item.nth-3 { transform: translate(0); order:2;}


	.main__company-item .item .title {font-size:2.8rem; padding-left:1.5rem; margin-bottom:1.5rem;}
	.main__company-item .item .title::before { width:3rem; height:3rem;}
	.main__company-item .item .txt {font-size:2rem; margin-bottom:1rem;}


	.main__company-item .item .main__more-btn a::after {width:26px; height: 26px;}
}



/* ===================================================== */







/* ===================================================== */
/* SECTION 4 Story */
.main__story {padding:10rem 0 0rem; position: relative;}
.main__story::before {content:''; display: block; width: 100%; height:50%; background-color: #b4e8ea; position: absolute; top:0; left:0;}


.main__story-wrap {display: flex; align-items: center;}


@media (max-width: 960px){
	.main__story::before {height:40%;}
	.main__story-wrap {flex-direction: column; gap:6rem;}
}


/*ORChestra 사보*/
.main__zine {padding-left:var(--inner-padding); padding-right:4rem; width:50%;}
.main__zine-wrap {position: relative; width:100%; max-width: 60rem; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.main__zine-wrap::before,
.main__zine-wrap::after {content:''; display: block; width:100%; height:100%; border-radius: 50% 50% 50% 0; position: absolute; top:0; left:0; z-index: -1;}
.main__zine-wrap::before {background-color: transparent; border:1px solid rgba(18, 181, 188, 0.6); z-index: -1; animation: move 20s linear infinite;}
.main__zine-wrap::after {background-color: var(--color-main);box-shadow: 0 0 4rem var(--color-black-a2);}


.main__zine-inner {margin-bottom:3rem; width:70%;}
.main__zine-inner > a{display: flex; align-items: flex-end;}
.main__zine-inner .thumb {border-radius: 20px; overflow: hidden; box-shadow: 0 0 3rem var(--color-black-a2); z-index: 2; }
.main__zine-inner .thumb span{display: block; background:50% 50% no-repeat; background-size: cover; transform: scale(1); transition: all 0.3s ease-in-out;}
.main__zine-inner > a:hover .thumb span {transform: scale(1.1);}


.main__zine-inner .vol {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width:20rem;  z-index: 1; padding-right:2rem; color:#fff; font-family: var(--font-mont); letter-spacing: 0; line-height: 1;}
.main__zine-inner .vol::before {content:''; display: block; width:110%; height:110%; background-color: #018c92; position: absolute; border-radius: 50% 50% 50% 0; z-index: -1; right:0px; bottom:0;}

.main__zine-inner .vol .txt{font-weight: 300; font-size: 2.4rem;}
.main__zine-inner .vol .num{font-weight: 900; font-size: 7rem;}
.main__zine-inner .vol .year{font-weight: 500; font-size: 2.4rem; letter-spacing: 0.05em;}

@media (max-width: 1024px){
	.main__zine-inner .vol .txt{font-size: 2rem;}
	.main__zine-inner .vol .num{font-size: 6rem;}
	.main__zine-inner .vol .year{font-size: 2rem;}
}

@media (max-width: 960px){
	.main__zine {padding:0 var(--inner-padding); width:100%; display: flex; justify-content: center;}
}

@media (max-width: 480px){
	.main__zine .sec-stit {margin-bottom:2rem;}
}

/*News*/
.main__news {position: relative; width: 50%;}
.main__news .title {display: flex; align-items: center; position: relative; gap:20px; padding-right:var(--inner-padding);}
.main__news .title .sec-stit {margin-bottom:0; display: flex; gap:20px; width:100%; align-items: center;}
.main__news .title .sec-stit::after {content:''; width:100%; height:2px; background-color: var(--color-main);}

.news-control{animation: fade-in 0.5s linear 1s both;  display: flex; align-items: center; gap:10px; flex-shrink: 0;}
.news-control .arrow {overflow: hidden; width:6rem; height:6rem; text-indent: -9999px; font-size:0; transition:all 0.3s ease-in-out; border-radius: 50% 50% 50% 0; border:2px solid var(--color-main); position: relative;}
.news-control .arrow::before {content:''; display: block; width:16px; height:16px; border:2px solid var(--color-main); border-width:0 0 2px 2px; position: absolute; top:50%; left:50%; transform: translate(calc(-50% + 2px), -50%) rotate(45deg); transition:all 0.3s ease-in-out;}
.news-control .arrow:hover {background-color: var(--color-main); border-color: var(--color-main);}
.news-control .arrow:hover::before{border-color:#fff;}
.news-control .arrow.next {transform:rotate(180deg);}


.news-control .more {overflow: hidden; width:6rem; height:6rem; text-indent: -9999px; font-size:0; transition:all 0.3s ease-in-out; border-radius: 50%; border:2px solid var(--color-main); position: relative; margin: 0 0 0 10px; background-color: var(--color-main);}
.news-control .more::before,
.news-control .more::after {content:''; display: block; width:16px; height:2px; background-color: #fff; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.news-control .more::after {transform: translate(-50%, -50%) rotate(90deg);}
.news-control .more:hover {background-color: #000; border-color: #000; transform: rotate(360deg);}



.main__news .list {margin-left:-3rem;}
.main__news .list .item {padding:4rem 3rem 0; width:36rem;}
.main__news .list a {display: block;}

.main__news .list .thumb {border-radius: 20px; overflow: hidden; box-shadow: 0 0 0rem var(--color-black-a2); position: relative; transition: all 0.3s ease-in-out; margin-bottom:6rem;}
.main__news .list .thumb::before {content:''; display: block; width:100%; height:100%; position: absolute; top:0; left:0; background-color: rgba(18, 181, 188, 0.5); z-index: 1; transition: all 0.3s ease-in-out;}
.main__news .list .thumb span{display: block; background:50% 50% no-repeat; background-size: cover; transform: scale(1); transition: all 0.3s ease-in-out;}

.main__news .list .date {font-size:1.6rem; font-weight: 700; color:var(--color-main); margin-bottom:0.5rem;}
.main__news .list .subject {font-size:2.4rem; font-weight: 700; color:#222; line-height: 1.2;  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2; -webkit-line-clamp: 2; transition: all 0.3s ease-in-out; text-underline-offset: 0.25em;}

.main__news .list .slick-active .thumb{box-shadow: 0 0 3rem var(--color-black-a2);}
.main__news .list .slick-active .thumb::before,
.main__news .list a:hover .thumb::before {background-color: rgba(18, 181, 188, 0)}
.main__news .list .slick-active a:hover .thumb span {transform: scale(1.1);}

.main__news .list .slick-active a:hover .subject {text-decoration: underline; color:var(--color-main);}



@media (max-width: 1280px){
	.news-control {gap:5px;}
	.news-control .arrow{width:5rem; height:5rem;}
	.news-control .arrow::before {width:12px; height:12px;}

	.news-control .more {width:5rem; height:5rem; margin-left:5px;}
	.news-control .more::before,
	.news-control .more::after {width:14px;}
}

@media (max-width: 1024px){
	.main__news .list .thumb {margin-bottom: 4rem;}
}

@media (max-width: 960px){
	.main__news {width: 100%;}
	.main__news .title {padding:0 var(--inner-padding);}

	.main__news .list {margin-left:0rem;}
	.main__news .list .item {padding:3rem 2rem 0; width:36rem;}
	.main__news .list .thumb {margin-bottom: 3rem;}
}










/*SNS*/
.main__sns {border-top:1px solid #efefef; margin-top:6rem;}
.main__sns-wrap {padding:5rem 0; display: flex; justify-content: space-between; align-items: center;}
.main__sns-wrap .txt {font-size:3.2rem; color:var(--color-sub); line-height: 1.2;}

.main__sns-list {display: flex; gap:10px;}
.main__sns-list li {font-size:0;}
.main__sns-list a { padding:0; display: inline-block; overflow: hidden; width:6rem; height:6rem; transition:all 0.3s ease-in-out; background-color:var(--color-main); background-repeat:no-repeat; background-position: center center; background-size: contain;} 
.main__sns-list a:hover {background-color: var(--color-main)}

.main__sns-list li.linkin a{background-image: url('../images/common/ico_linkin_w.png'); border-radius: 50% 50% 50% 0;}
.main__sns-list li.blog a{background-image: url('../images/common/ico_blog_w.png'); border-radius: 50%; }
.main__sns-list li.youtube a{background-image: url('../images/common/ico_youtube_w.png'); border-radius: 50% 0 50% 50% ;}

.main__sns-list li.linkin a:hover{background-color: #0a66c2;}
.main__sns-list li.blog a:hover{ background-color: #42d31a;}
.main__sns-list li.youtube a:hover{ background-color: #ff0101;}



@media (max-width: 768px){
	.main__sns {border-top:1px solid var(--color-main);}
	.main__sns-wrap {padding:4rem 0; flex-direction:column; gap:20px;}
	.main__sns-wrap .txt {text-align: center;}
	.main__sns-list a { width:5rem; height:5rem;}
}
/* ===================================================== */






/* ===================================================== */
/* SECTION 5 Contact */
.main__contact{background: linear-gradient(to bottom, rgba(0, 98, 111, 0.1), rgba(18, 181, 188, 0.1)); overflow: hidden;}
.main__contact-wrap {position:relative ; margin:0 auto; max-width: 1920px;}
.main__contact-wrap .sec-header {position: absolute; top:9.3%; left:50%; transform:translate(-50%, 0); width:100%; margin:0; z-index:3;}

.main__map .image.mo {display: none;} 

@keyframes ani-circle {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 0.5; 
	}
	50% {
		opacity: 1.0; 
	}
	100% {
		transform: translate(-50%, -50%) scale(1.7);
		opacity: 0; 
	} 
}
.circle-item {
	background-color:rgba(0, 98, 111, 0.07);
	border-radius: 50%;
	animation-fill-mode: both;
	position: absolute;
	left: 50%;
	top: 50%;
	opacity: 0;
	margin: 0;
	width: 280px;
	height: 280px;
	animation: ani-circle 5s cubic-bezier(1, 2, 0.66, 3) infinite; 
}
.circle-item:nth-child(2) {animation-delay: 1s; }
.circle-item:nth-child(3) {animation-delay: 1.5s;}
.circle-item:nth-child(4) {animation-delay:2s;}



.nation {z-index: 1;}
.nation .item {position: absolute; width:10px; height:10px; border-radius: 50%; background-color:rgba(18, 181, 188, 0.5); transition: all 0.3s ease-in-out;}
.nation .item.nth-1 {left:40.7%; top:47.6%; background-color:rgba(0, 98, 111, 0.8);}
.nation .item.nth-2 {left:38.2%; top:50%;}
.nation .item.nth-3 {left:34.9%; top:56.5%;}

.nation .item.is-active {background-color:rgba(0, 0, 0, 1);}

.nation .item .link {display: flex; align-items: center; justify-content: center; padding:0 2rem; min-width: 10rem; height:40px; background-color: var(--color-sub); transition: all 0.3s ease-in-out;  position: absolute;}
.nation .item .link span {display: block; color:#fff; font-family: var(--font-mont); font-weight: 700; font-size: 1.6rem; letter-spacing: 0; text-transform: uppercase;}


.nation .item.nth-1 .link {border-radius: 20px 20px 20px 0; transform: translate(5px, calc(-100% - 5px));}
.nation .item.nth-2 .link {border-radius: 20px 20px 0 20px; transform: translate(calc(-100% + 4px), calc(-100% - 5px));}
.nation .item.nth-3 .link {border-radius: 20px 20px 0 20px; transform: translate(calc(-100% + 4px), calc(-100% - 5px));}

.nation .item.is-active .link {box-shadow: 0 0 2rem var(--color-black-a2); background-color: #000;}


.nation .item .link:hover {box-shadow: 0 0 0rem var(--color-black-a2); background-color: var(--color-main);}




.nation .item .point-circle {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; height: 100%; z-index: -1;}





.nation__pop {position: absolute; top:50%; right:0; transform: translate(0, -50%); transition: all 0.3s ease-in-out; z-index: 4; width:50%; max-width: 62rem;}
@media (max-width: 1920px) {
	.nation__pop {margin-right:var(--inner-padding);}
}

.nation__pop-item {position: relative; display: none;}
.nation__pop-item.is-active {display: block; animation: fade-up 0.5s linear 0s both;}



.nation__pop-wrap {background-color: #fff; box-shadow: 0 0 4rem var(--color-black-a1); border-radius: 5rem 5rem 5rem 0; overflow: hidden;}
.nation__pop-wrap .boxtop {background-color: var(--color-sub); display: flex; height: 8rem; align-items: center; padding:0 3rem;}
.nation__pop-wrap .boxtop .tit {color:#fff; font-family: var(--font-mont); font-weight: 700; font-size: 3.6rem; text-transform: uppercase;}
.nation__pop-wrap .boxtop .close {position: absolute; top:-1rem; right:-1rem; }
.nation__pop-wrap .boxtop .close a{ display: block; width:6rem; height:6rem; background-color: var(--color-main);border-radius: 50% 50% 50% 0; overflow: hidden; text-indent: -99999px; font-size:0;transition: all 0.3s ease-in-out;}
.nation__pop-wrap .boxtop .close a::before,
.nation__pop-wrap .boxtop .close a::after{content:''; display: block; position: absolute; width:2.4rem; height:2px; background-color: #fff; top:50%; left:50%;transition: all 0.3s ease-in-out;}
.nation__pop-wrap .boxtop .close a::before {transform: translate(-50%, -50%) rotate(-45deg);}
.nation__pop-wrap .boxtop .close a::after {transform: translate(-50%, -50%) rotate(45deg);}
.nation__pop-wrap .boxtop .close a:hover {background-color:#000;}
.nation__pop-wrap .boxtop .close a:hover::before{width:3rem; transform: translate(-50%, -50%) rotate(315deg);}
.nation__pop-wrap .boxtop .close a:hover::after {width:3rem; transform: translate(-50%, -50%) rotate(405deg);}


.nation__pop-wrap .desc {padding:3rem;}
.nation__pop-wrap .desc-wrap {display: flex; gap:3rem; width: 100%;}
.nation__pop-wrap .desc-wrap .thumb {flex-shrink: 0; width:40%; border-radius: 2rem; overflow: hidden;}
.nation__pop-wrap .desc-wrap .thumb img {width: 100%; height: 100%; object-fit: cover;}
.nation__pop-wrap .desc-wrap .item {flex-grow: 1; position: relative; padding-bottom: 60px;}
.nation__pop-wrap .desc-wrap .cate {border-radius: 2rem; background-color:var(--color-main); display: inline-block; padding:2px 2rem; font-size: 1.6rem; color:#fff; margin-bottom:10px;}
.nation__pop-wrap .desc-wrap .name {font-size: 1.8rem; color:#222; font-weight: 700; position: relative; padding-left:2rem; line-height: 1.3; margin-bottom:5px;}
.nation__pop-wrap .desc-wrap .name::before {content:''; display: block; width: 5px; height:5px; border-radius: 50%; background-color: var(--color-sub); position: absolute; left:5px; top:0.5em;}

.nation__pop-wrap .desc-wrap .main__more-btn {position: absolute; left:0; bottom:0;}






.main__inquiry {position: absolute; left:0; bottom:11%; width: 100%;}
.main__inquiry-wrap {display: flex; align-items: center; gap:4rem;}
.main__inquiry-wrap .txt {font-size:3.2rem; color:#222; line-height: 1.2; font-weight: 200;}
.main__inquiry-wrap .txt strong {font-weight: 700;}

.main__inquiry-btn {display: flex; align-items: center; height:6rem; background-color: var(--color-main); border-radius: 30px 30px 30px 0; padding:0 13rem 0 3rem; position: relative;transition: all 0.3s ease-in-out;}
.main__inquiry-btn span {display: inline-block; color:#fff; font-size: 2rem; font-weight: 700;}
.main__inquiry-btn span::after {content:''; display: block; position: absolute; height:100%; width:5.4rem; top:0; right:3rem; background:url('../images/main/ico_arrow02_w.png') 50% 50% no-repeat; background-size:contain; transition: all 0.3s ease-in-out;}
.main__inquiry-btn:hover {background-color: var(--color-sub); box-shadow: 0 0 2rem var(--color-black-a1);}
.main__inquiry-btn:hover span::after {right:2rem;}




@media (max-width: 1180px) {
	.main__contact {padding:5rem 0 0;}
	.main__contact-wrap .sec-header {top:6%;}

	.main__map .image{transform:translateX(-10rem);}
	.nation .item.nth-1 {left:calc(40.7% - 10rem);}
	.nation .item.nth-2 {left:calc(38.2% - 10rem);}
	.nation .item.nth-3 {left:calc(34.9% - 10rem);}
}

@media (max-width: 1024px) {
	.main__contact {padding:10rem 0 10rem;}
	.main__contact-wrap .sec-header {position: relative; }

	.main__map .image{transform:translate(-15rem, -9rem);}
	.nation .item.nth-1 {left:calc(40.7% - 15rem); top:calc(47.6% - 8rem); }
	.nation .item.nth-2 {left:calc(38.2% - 15rem); top:calc(50% - 8rem);}
	.nation .item.nth-3 {left:calc(34.9% - 15rem); top:calc(56.5% - 8rem);}

	.nation .item .link { min-width: 8rem; height:32px;}

	.nation__pop {width:60%;}

	.nation__pop-wrap {box-shadow: 0 0 3rem var(--color-black-a1); border-radius: 4rem 4rem 4rem 0;}
	.nation__pop-wrap .boxtop {height: 6.4rem;}
	.nation__pop-wrap .boxtop .tit {font-size: 3rem;}
	.nation__pop-wrap .boxtop .close a{ width:5rem; height:5rem;}
	.nation__pop-wrap .boxtop .close a::before,
	.nation__pop-wrap .boxtop .close a::after{width:2rem;}
	
	.nation__pop-wrap .boxtop .close a:hover::before{width:2.4rem;}
	.nation__pop-wrap .boxtop .close a:hover::after {width:2.4rem;}


	.nation__pop-wrap .desc {padding:2rem;}
	.nation__pop-wrap .desc-wrap {gap:2rem;}
	.nation__pop-wrap .desc-wrap .thumb {width:35%; border-radius: 1rem;}
	.nation__pop-wrap .desc-wrap .item {padding-bottom: 50px;}
	
	.nation__pop-wrap .desc-wrap .name {font-size: 2rem; padding-left:15px; }
	.nation__pop-wrap .desc-wrap .name::before {width: 4px; height:4px;}



	.main__inquiry {position: static;}
}


@media (max-width: 768px) {
	



	.main__contact {padding:10rem 0 10rem;}
	.main__contact-wrap .sec-header {position: static; transform: translate(0);}

	.main__map {position: relative;}
	.main__map .image{transform:translate(0);}

	.main__map .image.pc {display: none;}
	.main__map .image.mo {display: block;}

	.nation .item {width:6px; height:6px;}
	.nation .item.nth-1 {left:39%; top:44.6%;}
	.nation .item.nth-2 {left:36%; top:47.1%;}
	.nation .item.nth-3 {left:33%; top:57.2%;}

	.nation .item .link { min-width: 6rem; height:3.4rem;}
	.nation .item.nth-1 .link {border-radius: 20px 20px 20px 0; transform: translate(2px, calc(-100% - 2px));}
	.nation .item.nth-2 .link {border-radius: 20px 20px 0 20px; transform: translate(calc(-100% + 2px), calc(-100% - 2px));}
	.nation .item.nth-3 .link {border-radius: 20px 0px 20px 20px; transform: translate(calc(-100% + 2px), 8px);}





	.nation__pop {width:auto; position: static; transform: translate(0); margin:0 auto; max-width: 560px; padding:0 var(--inner-padding);}

	.nation__pop-wrap {box-shadow: 0 0 3rem var(--color-black-a1); border-radius: 4rem 4rem 4rem 0;}
	.nation__pop-wrap .boxtop {height: 6rem;}
	.nation__pop-wrap .boxtop .tit {font-size: 2.8rem;}

	.main__inquiry {position: static; margin-top:6rem;}

	.main__inquiry-wrap {flex-direction: column;}
	.main__inquiry-wrap .txt {text-align: center;}
}


@media (max-width: 480px) {


	
}
/* ===================================================== */









/* ===================================================== */
/* */

@media (hover: hover) and (pointer: fine) {
}
@media (max-width: 1280px) {
}
@media (max-width: 1024px) {
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
}
@media (max-width: 480px) {
}
/* */
/* ===================================================== */