@charset "utf-8";

/*------------------------------------
	common 
------------------------------------*/
	.inner {margin:0 auto; max-width:1400px;}

@media (max-width: 1400px) {
	.inner{max-width:100%; width: auto; padding:0 5%;}
}


:root {
	--main-color1:#115740; --main-color2:#348D6F; --main-color3:#92F1C5;  --main-color4:#333F48; 
	--sub-color1:#fff; --sub-color2:#000; --sub-color3:#f7f7f7;
}


/*------------------------------------
  header
------------------------------------*/
#max-header { width:100%; height:110px;position: absolute; z-index:3;	}

#max-header .header-menu {display:flex; height: 100%; align-items: center;}
#max-header .header-menu .top_logo { display: block; position: relative; width: auto; height: auto;}
#max-header .header-menu .top_logo a {width: 165px; height: 36px; display: inline-block;background-repeat:no-repeat; background-position:left top;background-size:contain; background-image:url(../images/common/top_logo.png);}
#max-header .header-menu .top_menu {height: 100%;margin-left:5%; }
#max-header .header-menu .top_menu > ul {display:flex;    height: 100%;}
#max-header .header-menu .top_menu > ul > li {position:relative;width: 200px;height: 100%;  text-align: center;} 
#max-header .header-menu .top_menu > ul > li > a {font-weight: 500;color:var(--sub-color2);height: 100%; display: flex;  font-size:1.8rem;  align-items: center; justify-content: center;}
#max-header .header-menu .top_menu > ul > li > a:hover {color:var(--main-color2);}
#max-header .header-menu .top_menu > ul > li > ul {	display:none; position: absolute;background: var(--main-color2); width: 90%; padding: 5%;}
#max-header .header-menu .top_menu > ul > li > ul::before {content:''; width:8px; height: 8px; background: var(--main-color2); position: absolute; transform:translate(-50%, 0%);top:-20px; left:50%;border-radius:100%;}
#max-header .header-menu .top_menu > ul > li:hover > ul {display:block;}
#max-header .header-menu .top_menu > ul > li > ul > li:hover {font-weight: bold;}
#max-header .header-menu .top_menu > ul > li > ul > li  {text-align:left;	}
#max-header .header-menu .top_menu > ul > li > ul > li > a {color:var(--sub-color1);padding: 1rem ;width: 100%; text-align:left;  font-size: 1.6rem; display: inline-block;}

#max-header .gnb {position: absolute;right:0; top:0; display:flex; align-items: center;}
#max-header .gnb .fullmenu {display: inline-block;}
#max-header .gnb .fullmenu a {position: relative; display: block;width: 110px; height: 110px; background: var(--main-color1);cursor: pointer;}
#max-header .gnb .fullmenu a svg {position: absolute; left:50%; top:50%; width:35px; height:35px; color:var(--sub-color1); transform:translate(-50%, -50%);}
#max-header .gnb .go-admin {margin:0 2rem}
#max-header .gnb .go-admin li a{display:flex; color:var(--sub-color2); font-weight: 600;}
#max-header .gnb .go-admin li a i {margin-right:1rem;}
#max-header .gnb .language {width: 100px;display: flex;align-items: center;margin-right: 10%;}
#max-header .gnb .language li {width: 100%;}
#max-header .gnb .language li .lan_group {width: 100%;position: relative;}
#max-header .gnb .language li .lan_group p {width: 100%;border-bottom: 2px solid var(--sub-color2);margin: 0;  position: relative;}
#max-header .gnb .language li .lan_group p a::before {position: absolute; right:0; top: 50%; transform: translate(0%, -50%);content:''; width: 0px;  height: 0px;border-top: 8px solid #000000;border-left: 6px solid transparent;  border-right: 6px solid transparent;}
#max-header .gnb .language li .lan_group p a {padding: 1rem 0;width: 100%;display: inline-block;font-weight: bold; color:var(--sub-color2); }
#max-header .gnb .language li .lan_group ul {position: absolute;background: var(--sub-color2);width: 100%;}
#max-header .gnb .language li .lan_group ul li {padding: 1rem 0;}
#max-header .gnb .language li .lan_group ul li a {color: var(--sub-color1);padding: 0 1rem;display:block;font-size: 1.4rem;font-weight: bold;}

#full_menu_area {width: 100vw; height: 100vh; position: fixed; top:0; z-index:2;}
#full_menu_area .close  {position: absolute;right:0; top:0; display: block;width: 110px; height: 110px; background: var(--main-color2);cursor: pointer;}
#full_menu_area .close svg {position: absolute; left:50%; top:50%; width:35px; height:35px; color:var(--sub-color1); transform: translate(-50%, -50%);}
#full_menu_area .full_list {display:flex; background:  var(--main-color1);  width: 100%; height: 100%;align-items: center;}
#full_menu_area .full_list > ul {border-top:1px solid rgba(255,255,255,.15);width: 100%;padding:0;}
#full_menu_area .full_list > ul > li {border-bottom:1px solid rgba(255,255,255,.15); height: 15vh;}
#full_menu_area .full_list > ul > li .inner:hover {opacity:1;transition: all 0.5s;}
#full_menu_area .full_list > ul > li .inner {display:flex;align-items: center;height: 100%;opacity: .3;transition: all 0.5s;}
#full_menu_area .full_list > ul > li .inner > a {width:30%; color:var(--sub-color1);}
#full_menu_area .full_list > ul > li .inner > a span {font-size: 4rem;font-weight: bold;letter-spacing: -0.2rem;}
#full_menu_area .full_list > ul > li .inner > ul {display:flex; align-items: center;}
#full_menu_area .full_list > ul > li .inner > ul > li a {color:var(--sub-color1); position: relative;padding: 0 3rem;text-transform: uppercase;font-weight: 500;}
#full_menu_area .full_list > ul > li .inner > ul > li a:hover {color:var(--main-color3);}
#full_menu_area .full_list > ul > li .inner > ul > li a:hover::before {content:'➜'; position: absolute; top:50%; left:0; transform:translate(-50%, -50%); animation: move 1s infinite;}


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

	#full_menu_area .full_list > ul > li .inner {padding:0 5%;}
	#max-header .header-menu .top_menu {margin-left:0;}
}
@media screen and (max-width: 1024px) {
	#max-header {height: 80px;}
	#max-header .gnb .go-admin {display: none;}
	#max-header .header-menu .top_menu {width: 65%; margin-left:0;}

	#max-header .header-menu .top_menu > ul > li {width: auto; flex-basis:25%;}
	#max-header .header-menu .top_menu > ul > li > a {font-size:1.6rem ;  white-space: nowrap;}
	#max-header .header-menu .top_menu > ul > li > ul > li > a {font-size: 1.4rem;   }
	#max-header .gnb .language li .lan_group p a {font-size:1.4rem;	}
	#max-header .gnb .fullmenu a {width: 80px; height: 80px;}

	#full_menu_area { right:0;}
	#full_menu_area .full_list {width: auto; padding:5%; align-items: flex-start; overflow-x: auto;}
	#full_menu_area .full_list > ul > li {height:auto; padding:3rem 0;}
	#full_menu_area .full_list > ul > li .inner {align-items: flex-start; flex-direction: column;}
	#full_menu_area .full_list > ul > li .inner > a {width: 100%;}
	#full_menu_area .full_list > ul > li .inner > ul {align-items: flex-start;  flex-direction: column; width: 100%;}
	#full_menu_area .full_list > ul > li .inner > ul > li {width: 100%;padding:1rem 0;}
	#full_menu_area .full_list > ul > li .inner > ul > li a {display: block;}
	#full_menu_area .full_list > ul > li .inner > a span {margin-left:3rem;}
	#full_menu_area .close  {width: 80px; height: 80px;}

}
@media screen and (max-width: 768px) { 
	#max-header {height: 65px;}
	#max-header .header-menu .top_logo {height: auto; }
	#max-header .header-menu .top_logo a {height:25px}
	#max-header .header-menu .top_logo img {width: 100%;}
	#max-header .gnb .language {width: 75px;}
	#max-header .gnb .language li .lan_group ul li {padding:.5rem 0;}
	#max-header .gnb .language li .lan_group ul li a {font-size: 1.2rem;}
	#max-header .gnb .fullmenu a {width: 65px; height: 65px;}
	#max-header .gnb .fullmenu a svg {width: 28px; height: 28px;}
	#max-header .header-menu .top_menu {display: none;}

	#full_menu_area .close {width: 65px; height: 65px;z-index:3;}
	#full_menu_area .close svg {width: 28px;}
	#full_menu_area .full_list {padding:60px 0 0;}
	#full_menu_area .full_list > ul {border:0;}
	#full_menu_area .full_list > ul > li {padding: 0; margin:0 5%; border:0;}
	#full_menu_area .full_list > ul > li .inner {border:1px solid var(--sub-color1); margin:1rem 0; padding:0;}

	#full_menu_area .full_list > ul > li .inner > a {}
	#full_menu_area .full_list > ul > li .inner > a span {font-size:2.2rem; padding:1rem 0; display: block;}
	#full_menu_area .full_list > ul > li .inner > ul {padding:2rem 0;border-top: 1px dashed var(--sub-color1);}
	#full_menu_area .full_list > ul > li .inner > ul > li {padding:.5rem 0;}
}
@media screen and (max-width: 568px) { 
		#max-header .header-menu .top_logo {width: 35%; }
			#full_menu_area .full_list > ul > li .inner > a span {font-size: 2rem;font-weight: 500; letter-spacing: -0.1rem;} 
	#full_menu_area .full_list > ul > li .inner > ul > li a {font-size: 1.4rem;}
}





/*------------------------------------
  footer
------------------------------------*/
#max-footer {background: var(--main-color4);width: 100%;  font-style: normal;}
#max-footer .max-contact {position: relative; color:var(--sub-color1); }
#max-footer .max-contact .inquiry {position: absolute;color:var(--sub-color1);  top:0; right:0;max-width: 450px;width: 100%; background: linear-gradient(221deg, #45C882, #2790AB); height: 100%;}
#max-footer .max-contact .inquiry .inquiry-link {position: absolute;left: 50%;top: 50%;width: 80%;height: 60%;transform: translate(-50%, -50%);}
#max-footer .max-contact .inquiry .inquiry-link h2 {font-size: 3rem;}
#max-footer .max-contact .inquiry .inquiry-link p  {margin-top: 1rem;font-size: 1.5rem;line-height: 150%;}
#max-footer .max-contact .inquiry .inquiry-link span {position: absolute;bottom: 0;}

#max-footer .max-contact .inquiry:hover { transition: all 2s linear; background: linear-gradient(280deg, #45C882, #2790AB);  animation: shadow-drop-2-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }
#max-footer .max-contact .inquiry:hover .inquiry-link  span { animation: move 1s infinite;}

@keyframes move {
	0%   { left: 0rem; }	50%  { left: 1rem; }	100% { left: 0rem; }
}


#max-footer .max-contact .content {padding:5rem 0;}
#max-footer .max-contact .content h2 {color:var(--sub-color1);text-transform: uppercase;font-size: 3.5rem;margin-bottom:5rem;}
#max-footer .max-contact .content ul {display: flex;width: 80%;justify-content: flex-start;}
#max-footer .max-contact .content ul li {flex-basis: 50%;}
#max-footer .max-contact .content ul li:last-child {border-left:1px solid rgba(255,255,255,.5); padding-left:5rem}
#max-footer .max-contact .content .address-box {}
#max-footer .max-contact .content .address-box h3 {color:var(--sub-color1);text-transform: uppercase;font-size: 2.5rem;margin-bottom: 2rem;}
#max-footer .max-contact .content .address-box p {font-size: 1.6rem;margin: 1rem 0;}
#max-footer .max-contact .content .address-box p em {text-transform: uppercase;font-style: normal;font-weight: bold;}
#max-footer .max-copy {background: var(--sub-color2);text-align: center;padding:1.5rem 0;}
#max-footer .max-copy p {color:var(--sub-color1); font-size: 1.4rem;}



@media screen and (max-width:1400px) {
	#max-footer .max-contact .content {width: 70%;   }
	#max-footer .max-contact .content ul {width: 100%;}
	#max-footer .max-contact .inquiry {max-width: inherit; width: 30%;}
}
@media screen and (max-width: 1024px) {
	#max-footer .max-contact .inquiry {position: relative; width: 100%; height:15rem; display: block;}
	#max-footer .max-contact .inquiry:hover {animation:none;}
	#max-footer .max-contact .inquiry span{bottom: auto; right: 0;  transform: translate(0%, -50%);  top: 50%;}
	#max-footer .max-contact .inquiry .inquiry-link {width:90%;}
	#max-footer .max-contact .inquiry:hover .inquiry-link  span{animation:none;}
	#max-footer .max-contact .content {width: 100%;}
}
@media screen and (max-width: 768px) { 
	#max-footer .max-contact .inquiry .inquiry-link {width: 90%;height: auto;}
	#max-footer .max-contact .inquiry .inquiry-link h2 {font-size: 2.5rem;}
	#max-footer .max-contact .inquiry .inquiry-link p {font-size:1.2rem;}
	#max-footer .max-contact .content {width: auto; padding:3rem 0	}
	#max-footer .max-contact .content h2 {font-size:2.5rem;}
	#max-footer .max-contact .content .address-box h3 {font-size:  2rem;}
	#max-footer .max-contact .content .address-box p {font-size: 1.4rem;}

	#max-footer .max-copy p {font-size:1rem	}
}
@media screen and (max-width: 568px) { 
	
	#max-footer .max-contact .inquiry .inquiry-link h2 {font-size: 2rem;}
	#max-footer .max-contact .inquiry .inquiry-link p {font-size:1.2rem;}
	#max-footer .max-contact .content {width: auto; }
	#max-footer .max-contact .content ul {flex-direction: column;}
	#max-footer .max-contact .content ul li {margin:1.5rem 0;}
	#max-footer .max-contact .content ul li:last-child {border:0; padding-left:0;}
	#max-footer .max-contact .content h2 {font-size:2rem;margin-bottom:1rem;}
	#max-footer .max-contact .content .address-box h3 {font-size:  1.5rem;}
	#max-footer .max-contact .content .address-box p {font-size: 1.2rem;    margin: 0.5rem 0;}
}


/*------------------------------------
  Go To Top
------------------------------------*/
#bt_top {position:fixed; bottom:2rem; right:2rem; }
#bt_top a:hover{animation: heartbeat 1.5s ease-in-out infinite both;}
#bt_top a {display:block;width: 70px;height: 70px;border-radius: 50%;padding: 15px 0;background: var(--main-color4); box-sizing:border-box; text-align:center; text-decoration:none;color: var(--sub-color1);box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 41%);}
#bt_top a svg {color: var(--main-color3);}
#bt_top a span {display:block; font:normal 9px 'verdana'; line-height:1; margin-top:5px;}

@media screen and (max-width: 568px) { 
	#bt_top a {width: 50px; height: 50px;	}
	#bt_top a svg {width: 20px; height: 20px;}
	#bt_top a span  {display: none;}
}

@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}



/*------------------------------------
  sub layout
------------------------------------*/
#max-header.white .header-menu .top_logo a {background-image:url(../images/common/top_logo_w.png);}
#max-header.white .header-menu .top_menu > ul > li > a {color:var(--sub-color1);}
#max-header.white .gnb .language li .lan_group p {border-bottom-color:var(--sub-color1);}
#max-header.white .gnb .language li .lan_group p a{ color:var(--sub-color1); }
#max-header.white .gnb .language li .lan_group p a::before {border-top-color:var(--sub-color1);}
#max-header.white .gnb .go-admin li a{color:var(--sub-color1); }

#max-header.down {position:fixed; top:0;  transition: all 0.2s linear; background: var(--sub-color1); z-index:10;  box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 15%);}
#max-header.down .header-menu .top_logo a {background-image:url(../images/common/top_logo.png);}
#max-header.down .gnb .go-admin li a {color:var(--sub-color2);}
#max-header.down .gnb .language li .lan_group p {border-bottom-color:var(--sub-color2);}
#max-header.down .gnb .language li .lan_group p a{ color:var(--sub-color2); }
#max-header.down .gnb .language li .lan_group p a::before {border-top-color:var(--sub-color2);}
#max-header.down .header-menu .top_menu > ul > li > a {color:var(--sub-color2);}


#max-sub-visual {position: relative;height: 80vh;  animation: subvis_Up .8s .2s ease-in-out both; overflow:hidden; }
#max-sub-visual .inner {position: absolute; left:50%; height: 100%; top:0; width: 90%;transform: translate(-50%, 0%);}
#max-sub-visual .sub_bg {width: 100%; height: 100%; z-index:-1; display: inline-block;animation: kenburns-top 15s ease-out both; background-size:cover;background-repeat:no-repeat;}
#max-sub-visual .sub_bg.sub-bg1 {background-image:url(../images/common/sub_bg1.jpg);}
#max-sub-visual .sub_bg.sub-bg2 {background-image:url(../images/common/sub_bg2.jpg);}
#max-sub-visual .sub_bg.sub-bg3 {background-image:url(../images/common/sub_bg3.jpg);}
#max-sub-visual .sub_bg.sub-bg4 {background-image:url(../images/common/sub_bg4.jpg);}
#max-sub-visual .title {position: absolute;left: 50%;top: 50%; text-transform: uppercase; white-space: nowrap; text-align: center;transform: translate(-50%, -50%); color:var(--sub-color1); }
#max-sub-visual .title > em {font-style: normal;letter-spacing: 1.5rem;font-size: 1.5rem;font-weight: 700;margin-bottom: 1rem;display: inline-block;}
#max-sub-visual .title > h2 {font-size:7rem;font-weight: 800;}
#max-sub-visual .breadcrumb {position: absolute;right: 0;bottom: 5%;opacity: 0.5;color:var(--sub-color1);;}
#max-sub-visual .breadcrumb ul {display: flex;align-items: stretch;}
#max-sub-visual .breadcrumb ul li {position: relative;padding: 0 20px; font-size: 1.3rem; font-weight: 500;text-transform: uppercase;}
#max-sub-visual .breadcrumb ul li::before {content:'▶';font-size:1rem; position: absolute; right: 0; top:50%;transform: translate(50%, -50%);}
#max-sub-visual .breadcrumb ul li.home i {color:var(--sub-color1); }
#max-sub-visual .breadcrumb ul li:first-child {padding-left:0;}
#max-sub-visual .breadcrumb ul li:last-child {padding-right:0;}
#max-sub-visual .breadcrumb ul li:last-child::before {display: none;;}
#max-sub-visual .drop_scroll {position:absolute; bottom: 0;   left: 50%; height:;transform: translate(-50%, 0%); }
#max-sub-visual .drop_scroll .icon {position:relative; display: block; width: 2px; height:10vh;   background-color: rgb(255 255 255 / 25%);  overflow:hidden; }
#max-sub-visual .drop_scroll .icon:before {content:''; width: 2px; height: 20px; background-color:var(--sub-color1); position:absolute; top: 0; left:50%;  transform: translate(-50%, 0%); animation: scrollUpdown 1.5s ease-in-out infinite;}
@keyframes scrollUpdown {
	0% {top:0%; opacity:0}
	50% {	opacity:1	}
	100% {	top:80%; opacity:0	}
}

@keyframes subvis_Up {
	0% {height:80vh;}
	100% {height:45vh;}
}


@keyframes subvis_Up2 {
	0% {height:70vh;}
	100% {height:30vh;}
}

@media screen and (max-width: 1400px) {
	
}
@media screen and (max-width: 1024px) {
	
	#max-sub-visual .title > h2 {font-size: 5rem;}
}
@media screen and (max-width: 768px) { 
	#max-sub-visual  {animation: subvis_Up2 .8s .2s ease-in-out both;}
	#max-sub-visual .title {white-space: initial; width: 90%;}
	#max-sub-visual .title > em {font-size: 1rem;letter-spacing: .5rem; font-weight: 200;}
	#max-sub-visual .title > h2 {font-size:2.5rem;}
	#max-sub-visual .breadcrumb {display: none;}
	#max-sub-visual .drop_scroll .icon {height:8vh;	}
}
@media screen and (max-width: 568px) { 

}














@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}



.circle-bg {position: absolute; display: inline-grid;width: 45%;}
.circle-bg .cir1 { width: 100%; height: 650px; position: absolute;background: var(--sub-color3); border-radius:100%; animation: rotation 11.5s infinite linear;}
.circle-bg .cir2 {animation: rotation 10s infinite linear;position: absolute;border: 1px solid #ddd;width: 100%;height: 650px;border-radius: 100%;}
.circle-bg .cir2::before {content:''; width:15px; height:15px; background:var(--main-color2); position: absolute;bottom:0;left:50%;transform:translate(50%, 50%); border-radius:100%;}

@media screen and (max-width: 768px) { 
	.circle-bg {display: none;}
}


@keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}