@import url('./styles.css?v=1');

#background {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    background: --gcolor2;
}

#wrapmain {
    position: relative;
    width: 100%;	
/*	padding-top:117px; */
}
#wrapsub {
    position: relative;
    width: 100%;	
//	padding-top:100px;
	transition: all 0.2s linear;											
}

.header {
	position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    z-index: 99;
    transition: var(--transition1);
    background: transparent;
    border-bottom: 1px solid transparent;
}

#wrapsub .header {
//    background: #fff;
//    border-bottom: 1px solid #e4e4e4;
}
.header.gnb-open,
.header.headerFix {
//    background: #fff;
//    border-bottom: 1px solid #e4e4e4;	
    transition: var(--transition1);
}

.header .inner_wrap {
//	width:var(--tb-width);
	width:100%;
	max-width: none;
	padding:0 3rem;
    position: relative;	
	height:100%;
}

.header .inner_wrap svg.mlogo {
	padding:0 0 0 2rem;	

}
.header .inner_wrap svg.mlogo *{
	fill: #ffffff;
	stroke: #ffffff;
}
#wrapsub .header .inner_wrap svg.mlogo *,
.header.headerFix .inner_wrap svg.mlogo *{
	fill: black;
	stroke: black;
}


/*
#wrapmain .header.gnb-open .inner_wrap .logo,
#wrapmain .header.headerFix .inner_wrap .logo {
    background-image: url(../img/common/logo2.png);	
}

#wrapsub .header .inner_wrap .logo {
    background-image: url(../img/common/logo2.png);	
}
*/

.header .inner_wrap .gnbs {
	position: relative;
	transition: all 0.2s linear;
	padding:0 7vw 0 0;
}

.header .inner_wrap .top_side {
    margin: 0 0 0 0px;	
}
.header .inner_wrap .top_side .bro_btn {
    margin-left: 16px;
    border-radius: 99px;
    padding: 1.2rem 2.5rem;
    border-top: 0px solid #dddddd;	
	font-size:1.4rem;
	color:#fff;	
	background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);
    transition: var(--transition1);	
}
.header .inner_wrap .top_side .bro_btn span:first-child{
    margin-right: 1.5rem;
}

.header .inner_wrap .top_side .bro_btn:hover {
	background: var(--gcolor1);
}

#wrapmain .header.gnb-open .inner_wrap .top_side .bro_btn,
#wrapmain .header.headerFix .inner_wrap .top_side .bro_btn,
#wrapsub .header .inner_wrap .top_side .bro_btn {
	background: var(--gcolor1);
}
#wrapmain .header.gnb-open .inner_wrap .top_side .bro_btn:hover,
#wrapmain .header.headerFix .inner_wrap .top_side .bro_btn:hover,
#wrapsub .header .inner_wrap .top_side .bro_btn:hover {
	background: var(--gcolor2);
}

.header .inner_wrap .gnbs ul.sub_depth0>li {
    position: relative;	
    display: flex;
    align-items: center !important;
	padding:0 4rem;
	transition: all 0.2s linear;				
}
.header .inner_wrap .gnbs ul.sub_depth0>li>a {
    font-size: 1.8rem;
    font-weight: 500;
	padding:2rem 0rem;	
    color: #fff;
	height:100%;	
    position: relative;	
	transition: all 0.2s linear;					
}

.header.headerFix .inner_wrap .gnbs ul.sub_depth0>li>a {
    color: #000;	
}


#wrapmain .header.gnb-open .inner_wrap .gnbs ul.sub_depth0>li>a,
#wrapmain .header.headerFix .inner_wrap .gnbs ul.sub_depth0>li>a,
#wrapsub .header .inner_wrap .gnbs ul.sub_depth0>li>a {
	color:#000;
    font-weight: 500;	
}
/*
.header .inner_wrap .gnbs ul.sub_depth0>li>a:after{
	content: "";
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: var(--gcolor1);
    transition: all 0.15s ease-in-out;
}
.header .inner_wrap .gnbs ul.sub_depth0>li:hover>a:after{
    width: 100%;	
}
*/
/*
.header .inner_wrap .gnbs ul>li>ul.sub_depth1 {
	display: block;
    opacity: 0; 
    visibility: hidden;
    position: absolute;
    top: 102px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    padding: 2.6rem 0;
	height:17rem;

}
.header .inner_wrap .gnbs ul>li>ul.sub_depth1>li {
	text-align: center;
    padding: 10px 0px;
    margin: 0px 0 0 0;
}

.header .inner_wrap .gnbs ul>li>ul.sub_depth1>li>a {
    font-size: 16px;
    font-weight: 400;
    color: #444;
    padding: 0;
    margin: 0;
    background: none;
	width:100%;
	display:block;
}

.header .inner_wrap .gnbs ul>li>ul.sub_depth1>li>a:hover{
	color:var(--gcolor1);
}
#gnbbg {
	opacity:0;
	position: absolute;
	top: 101px;
	left: 0;
	width: 100%;
	background-color: #fff;
	z-index: -100;
	transition: height 0.4s linear;
    border-bottom: 1px solid #e5e5e5;	
}
*/

.header .inner_wrap .top_side .navBtn3 {
	 position: relative;
	 display: none;
	 width: 32px;
	 height: 32px;
	 overflow: hidden;
	 margin: auto;
	 text-align: center;
}
.header .inner_wrap .top_side .navBtn3 .bar {
	 display: block;
	 position: absolute;
	 top: 15px;
	 width: inherit;
	 height: 2px;
	 background: #fff;
	 transition: transform .3s cubic-bezier(0.25, 0.1, 0, 1.34), top .3s ease, left .45s cubic-bezier(0.26, 0.54, 0, 1.39);
	 -webkit-transition: transform .3s cubic-bezier(0.25, 0.1, 0, 1.34), top .3s ease, left .45s cubic-bezier(0.26, 0.54, 0, 1.39);
	 -moz-transition: transform .3s cubic-bezier(0.25, 0.1, 0, 1.34), top .3s ease, left .45s cubic-bezier(0.26, 0.54, 0, 1.39);
}
.header .inner_wrap .top_side .navBtn3:hover .bar {
	 background: var(--gcolor1);
}
.header .inner_wrap .top_side .navBtn3 .bar:nth-child(1) {
	 top: 6px;
}
.header .inner_wrap .top_side .navBtn3 .bar:nth-child(2) {
	 left: 0 }
.header .inner_wrap .top_side .navBtn3 .bar:nth-child(3) {
	 top: 24px;
}

.header .inner_wrap .top_side .navBtn3:hover .bar:nth-child(2) {
	 left: 20%;
}


#wrapmain .header.gnb-open .inner_wrap .top_side .navBtn3 .bar, 
#wrapmain .header.headerFix .inner_wrap .top_side .navBtn3 .bar, 
#wrapsub .header .inner_wrap .top_side .navBtn3 .bar {
    background: #191919;
}








.main_vis {
	overflow:hidden;
	width:100%; 
	height:100vh;
	position: relative;
}

.main_vis_img {
	animation: main_img_zoom 3s 0s cubic-bezier(.1,.89,.33,.96);
	width:100%; 
	height:100%; 
	background-size:cover;
}

@keyframes main_img_zoom {
	from {
		transform: scale(1.3,1.3)
	}
	to {
		transform: scale(1.0,1.0)
	}
}

.main_text {
	position: absolute;
    left: 0px;
    top: 0;
	width: 100%;
	height:100%;
}
.main_text_wrap{
	max-width: var(--tb-width);
    width: 100%;;
    padding: 43rem 3rem 0 3rem;
    position: relative;
    margin:0 auto;
	overflow: hidden;
    box-sizing: border-box;		
}

.main_t01{
    font-size: min(8vw, 6.6rem);
    font-weight: 700;
	letter-spacing:0px;
    color: #fff;
	margin:0 0 15px 0;
	overflow: hidden;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);	
}

.main_t02{
    font-size: min(2.6vw, 3rem);
    font-weight: 400;
    color: #fff;
	overflow: hidden;
}
/*
.controls{
	width: var(--tb-width);
    max-width: none;
    padding: 60rem 3rem 0 3rem;
    position: relative;
    margin:0 auto;	
	color:#fff;
	font-size:2rem;
}
.pager{
	padding:0 20px;
	font-weight:700;
	color:#fff;
}
*/



.letter {
  display: block;
  opacity:0;
  animation: reveal 1.2s .4s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  transform-origin: center left;    
}
.letter2 {
  display: block;
  opacity:0;
  animation: reveal 1.2s .7s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  transform-origin: center left;  
}

@keyframes reveal {
  0% {
    transform: translateY(100%);
    opacity: 0;		
  }
  30% {
    opacity: 0;		
  }  
  100% {
    transform: translateY(0);
    opacity: 1;	
  }
}


section {
	margin:0;
    padding:0;	
	display:block;
	width:100%;
}

.main_outer{
	display: block;
    position: relative;
    max-width: var(--c-width);
    margin: 0 auto;
    clear: both;
	padding: 45vh 5vw;
}


.main_hd_vision {
	width:93%;
	position: absolute; 
	top: 50%; left: 50%; 
	z-index: 1; 
	transform: translate(-50%, -50%);
}

.main_hd_vision span{
	font-size: min(2.8vw, 3rem);
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
	color:#333;	
	font-weight:300;	
	text-align:center;
	font-family:'Times New Roman';
}
.main_hd_vision p{
	font-size: min(5.4vw, 5.6rem);;
    margin: 0 0 1.5rem 0;
    line-height: 1.2;	
	color:#222;
	font-weight:700;
	text-align:center;
}

.content--sticky {
    width: 100%;
    position: sticky;
    top: 0;
    --offset: 0px;
    top: var(--offset);
    height: calc(100vh - var(--offset));
}

.parallax { overflow: hidden; position: relative; height:100vh;}

.bg-1 {  overflow: hidden; border-radius:80px 80px 0 0; margin:0 auto;}
.bg-2 { background: #E9E8E8;  overflow: hidden;border-radius:0px 0px 0 0;}
.bg-3 {   overflow: hidden;border-radius:80px 80px 0 0; margin:0 auto;}
.bg-4 { background: #E9E8E8;  overflow: hidden;border-radius:0px 0px 0 0;}
.bg-5 { overflow: hidden;border-radius:80px 80px 0 0; margin:0 auto;}
.bg-6 { background: #E9E8E8;  overflow: hidden;border-radius:0px 0px 0 0;}



.pcontent1,
.pcontent3,
.pcontent5 {
    height: calc(14vh - var(--offset));
	width:100%;
    background-image: url(../img/main/title_bg_01.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
	background-size:cover;
}
.pcontent3 {
    background-image: url(../img/main/title_bg_02.jpg);
} 
.pcontent5 {
    background-image: url(../img/main/title_bg_03.jpg);
} 
.content_01_title {
    font-size: 230px;
    font-weight: 700;	
	position: absolute;
    top: -40%;
	left:80vw;
    width: 200vw;
	letter-spacing:-10px;
	color:#FFF  ;
	opacity: 0.4;
}

.pcontent3 .content_01_title {
	left:80vw;
}
.pcontent5 .content_01_title {
	left:80vw;
}


.pcontent2,
.pcontent4,
.pcontent6 {
	padding-top: 190px;	
}
.pcontent6 {
    height: calc(90vh);	
}

.ml_left {
	padding: 0 0 0 5vw;
	width:35vw;
	
}
.ml_left h3 {
    font-size: min(2.7vw, 30px);
    font-weight: 600;
	color:#999;
}
.ml_left h2 {
    font-size: min(5vw, 58px);
    font-weight: 800;
	color:#111;
}

.ml_left  .ml_left_con1 {
    font-size: min(1.5vw, 18px);
    font-weight: 400;
	margin:20px 0;
	line-height:1.4;
}
.ml_left  .ml_left_con2 {
    font-size: min(1.4vw, 16px);
    font-weight: 700;
}

.ml_right {
	width: 60.4vw;
    left: 53vw;
    position: absolute;	
	flex-wrap:wrap;
	z-index:1;
}
.ml_right img {
	margin:10px;
	border-radius:10px;
//	width:620px;
	width: calc(70% - 1vw);
	max-width:620px;
}



.main_hd{
	margin: 0 0 0rem 0;
    text-align: center;	
}

.main_hd p{
	display: block;
    font-size: min(5.5vw, 6.6rem);
    font-weight: 800;
    color: #222;
	width:100%;
    text-align: center;
}
.main_hd span{
	margin:2rem 0 4rem 0;
	display: block;
    font-size:min(2.7vw, 3rem);
    font-weight: 400;
    color: #333;
	width:100%;
    text-align: center;	
}

a.con_btn {
    font-size:min(2vw, 2rem);
    font-weight: 500;
    color: #fff;
	background:#444;
	padding:7px 40px;
	border-radius:40px;
}
a.con_btn:hover {
	background:#000;
}

a.contact_btn {
    font-size:min(1vw, 1.8rem);
}



.s_con {
    width: 100%;
    text-align: center;
	font-size:17px;
	font-weight:400;
	color:#222;
    position: relative;	

}

.overv {
	overflow: hidden;
    position: relative;
    height: 100vh;
	background:#fafafa;
}

.overvwrap {
	width: 93%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.overv h1 {
	font-size: 13rem;
	font-weight:700;
	color:#111;
	margin:7rem 0 5rem 0;
	text-align:center;
}

.overv .overv_t {
	width:50vw;
	margin:0 auto;
    font-size: 17px;
    font-weight: 400;
    line-height: 27px;
	color:#555;
}
.overv .overv_t h2{
	color: #222;
    font-size: 22px;
    font-weight: 600;
    padding: 0;
    margin: 0 0 5px 0;
}

.h_scroll {
    overflow: hidden;	
}

.scrollwrap {
	position: relative;
    z-index: 9;	
    height: 580vh;	
}

.scrollwrap.his {
	position: relative;
    z-index: 9;	
    height: 720vh;	
}

.scrollstatic {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.scrollstatic.Fix{
	position: fixed;
    top:0px;
	left:0;
    z-index: 19;	
}



.h_scroll h1{
	font-size: 13rem;
    font-weight: 700;
    max-width: 100vw;
    line-height: 1;
    text-transform: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: absolute;
    width: 100vw;
    text-align: center;	
}



.scroll-box {
position: absolute;
}

.scroll-box.loaded {
    transform: translateX(65vw);
}

.scroll-box img {
	border-radius:10px;
}




.portfolio-item {
    margin: 1vw;
    overflow: hidden;
	position:relative;
}
.portfolio-item {
    width: 40vw;
    height: 25vw;
    min-width: 768px;
    min-height: 480px;	
	
}
.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#work .portfolio-item img {
	transition: filter 0.3s ease;
}
#work .portfolio-item img:hover {
  filter: brightness(70%);
}

.his {
    width: 100vw;
    height: 25vw;
}
.his h3{
	font-size: 13vw;
    font-weight: 700;
    max-width: 100vw;
    line-height: 1;
    text-transform: none;
}

.portfolio-item .sub_tit{
	 position:absolute;
	 bottom:5px;
	 left:10px;
	 font-size:15px;
	 font-weight:500;
	 color:#fff;
}


.his_wrap {
	background:#fff;
	width:100%;
	height:100%;
	border-radius:10px;
	padding:30px;
	box-sizing: border-box;
}
.his_hd {
	font-size: 33px;
    font-weight: 800;	
	margin:5px 0 30px 0;
}
.his_text {
	font-size: 1.72rem;
    line-height: 1.4;
	padding:10px 20px;
	word-break: keep-all;
	text-align:left;
}

.his_img {
	width:initial;
	width:10vw;	
	margin-top:30px;	
}

.his_img img.naroo {
	width:243px;
}
.his_img img.ntree {
	width:125px;
}

.contdiv {
	overflow: hidden;
    position: relative;
    height: 100vh;
}

.conwrap {
	width: 93%;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
}



.h_scroll h1 span{
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1;
	margin-left:10px;
	color:#777;
}


.roll {
	position: relative;
    display: inline-block;
    padding: 0px;
	text-align:left;
    color: #222;
	font-weight: 400;
    font-size: 15px;
	width:26px;
	height:26px;
}



.roll{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23999999' d='m228.59-.177 3.919-.039c1.404-.008 2.809-.016 4.214-.022l2.177-.013c3.817-.02 7.634-.035 11.452-.044 3.114-.009 6.227-.03 9.34-.062 41-.412 77.17 7.475 107.57 36.654 15.805 15.602 26.727 33.654 33.05 54.953l.699 2.301c5.414 19.554 5.445 39.612 5.392 59.73-.008 3.882 0 7.765.004 11.648.006 6.514-.001 13.029-.016 19.543-.016 7.468-.01 14.936.006 22.404.013 6.479.015 12.958.007 19.436-.004 3.84-.005 7.68.005 11.52.11 48.768-10.41 90.769-45.221 126.418-27.81 27.431-66.4 41.79-105.188 42.125-42.037-.404-80.462-16.973-109.84-46.866-16.29-17.113-27.644-38.085-34.41-60.634l-.71-2.288c-5.62-19.873-5.497-40.535-5.443-61.002.008-3.883 0-7.766-.004-11.65-.006-6.512.001-13.025.016-19.537.016-7.469.01-14.937-.006-22.406-.013-6.48-.015-12.96-.007-19.44.004-3.84.005-7.68-.005-11.521-.099-43.636 7.63-82.26 38.659-114.719C164.363 16.858 188.764 6.132 216 1l2.83-.534c3.294-.484 6.431-.614 9.76-.643ZM198.813 50.75l-2.027 1.048c-23.229 12.312-37.938 31.808-45.842 56.5-.924 3.625-1.198 6.63-1.205 10.358l-.021 3.937.007 4.268-.015 4.536c-.014 4.096-.014 8.191-.012 12.287.001 3.43-.003 6.862-.008 10.293-.011 8.108-.012 16.215-.006 24.323.006 8.327-.006 16.655-.027 24.983-.018 7.176-.024 14.351-.02 21.527.001 4.274-.001 8.548-.015 12.822-.013 4.03-.01 8.058.002 12.088.002 1.465 0 2.93-.009 4.396-.071 13.538 1.627 26.735 6.51 39.446l.905 2.393c9.842 24.991 29.515 45.85 53.97 57.045 29.653 11.928 60.14 12.483 89.731.025 23.415-10.581 43.635-30.56 53.268-54.507 1.005-2.7 1.955-5.413 2.876-8.143l.867-2.564c3.628-11.334 4.557-22.388 4.549-34.242a2648.73 2648.73 0 0 0 .044-15.575c0-2.378.005-4.756.01-7.133.019-8.33.027-16.66.026-24.99-.002-7.707.02-15.412.051-23.118.026-6.662.037-13.324.036-19.986 0-3.959.005-7.917.026-11.875.158-31.187-1.82-59.472-24.613-83.04-13.952-14.013-33.449-24.862-53.642-25.029l-2.003-.02c-2.178-.02-4.356-.031-6.535-.041l-2.273-.013c-3.978-.02-7.956-.035-11.933-.044-4.072-.011-8.142-.046-12.214-.085-3.161-.027-6.323-.035-9.485-.038a483.053 483.053 0 0 1-4.495-.035c-13.06-.154-24.795 2.052-36.478 8.203ZM204 429c2.96 2.042 5.66 4.333 8.375 6.688l4.52 3.82 2.162 1.845c2.3 1.95 4.641 3.839 7.006 5.71a725.628 725.628 0 0 1 8.886 7.167l2.146 1.756c1.402 1.147 2.8 2.296 4.198 3.448 6.662 5.875 6.662 5.875 14.695 9.093 3.887-.68 6.254-2.494 9.2-4.964l1.717-1.382c1.71-1.38 3.403-2.779 5.095-4.181l2.727-2.21A1463.62 1463.62 0 0 0 283 449c28.203-23.227 28.203-23.227 43-22 6.226 1.667 10.46 5.722 14 11 2.09 6.27 2.232 14.296-.563 20.375-4.348 7.187-11.07 12.019-17.616 17.083-4.876 3.773-9.64 7.667-14.384 11.604C285.63 505.072 285.63 505.072 276 509l-2.137.96c-12.168 4.63-27.486 3.312-39.414-1.292-9.91-4.792-18.145-11.906-26.41-19.055a244.14 244.14 0 0 0-7.851-6.488c-4.515-3.586-9.015-7.19-13.5-10.813l-2.068-1.657c-13.569-10.975-13.569-10.975-14.972-19.89-.27-7.15 1.699-12.962 6.102-18.577 7.674-8.239 18.69-8.002 28.25-3.188Z'/%3E%3Cpath fill='%23666666' d='M269.023 87.527c4.724 3.52 7.815 8.737 8.977 14.473.1 1.698.148 3.4.161 5.1l.03 3.076.012 3.308.017 3.423c.01 2.39.016 4.781.02 7.172.01 3.643.041 7.286.072 10.929.007 2.325.012 4.65.016 6.976l.038 3.284c-.022 7.526-1.116 12.925-4.991 19.482-5.044 4.779-10.483 6.495-17.375 6.75-5.638-.237-10.409-1.08-15-4.5-4.912-5.647-7.104-10.656-7.161-18.1l-.03-3.076-.012-3.308-.017-3.423c-.01-2.39-.016-4.781-.02-7.172-.01-3.643-.041-7.286-.072-10.929-.007-2.325-.012-4.65-.016-6.976l-.038-3.284c.022-7.526 1.116-12.925 4.991-19.482 8.16-7.731 20.467-8.76 30.398-3.723Z'/%3E%3C/svg%3E");
background-size:cover;

}


#scroll {
    overflow: hidden;
}

.work-item-page {
    position: relative;
    z-index: 10;
	text-align:left;
}


.work-item-page-left {
    position: fixed;
    left: 0;
    width: 35vw;
}
.work-item-page h1 {
    font-size: 2.1rem;
	font-weight:800;
    justify-content: flex-start;
//    text-transform: uppercase;
    padding: 0 2.5vw;
    margin-top: 12vh;
    width: 100%;
}

.work-description {
    padding: 1vw 2.5vw;
    font-size: 1.4rem;
	font-weight:400;
	color:#444;
	line-height:1.4;
}
.work-item-page strong {
    font-size: 1.4rem;
	font-weight:800;
}
.work-item-page .backbtn {
	margin-right:10px;
}

.work-item-page .backbtn a{
    font-size: min(2vw, 1.4rem);
    font-weight: 500;
    color: #fff;
    background: #444;
    padding: 4px 20px;
    border-radius: 40px;
}

.work-item-page .backbtn a:hover,
.work-item-page .backbtn.launch a:hover {
    background: #000;
}
.work-item-page .backbtn.launch a{
    background: #444;
}

.work-photo {
    width: 60.4vw;
    left: 37.2vw;
    position: relative;
    padding-top: 10vh;
    padding-bottom: 6vw;
}

.work-photo img{
	width: calc(100% - 1vw);
    height: auto;
    display: block;
    margin: 1vw;
	border-radius:10px;
}






.f_menu  {
	display: none;
	position:fixed;
	top:0px;
	left:0px;
	z-index:10000;
	width:100%;
	height:100%;
	isolation: isolate;
}
.f_menu::after {
	content: '';
	position: absolute;
	background: black;
	z-index: -1;
	inset: 0;
	opacity: 1;
}

.stop-scrolling {
	height: 100%;
	overflow: hidden;
}
.menu_area {
	width:79%;
	padding:40px 0 0 ;
	margin:50px auto 0 auto;
}
.menu_head {
	width:100%;
}
.navBtn4 {
	 position: relative;
	 display: block;
	 width: 32px;
	 height: 32px;
	 margin: auto;
	 text-align: center;
}
.navBtn4 .bar {
	 display: block;
	 position: absolute;
	 top: 1.2rem;
	 left: 0;
	 width: inherit;
	 height: 2px;
	 background: #fff;
}

.navBtn4:hover .bar {
	 background: var(--gcolor2);
}
.navBtn4 .bar:nth-child(1) {
	 transform: rotate(45deg);
}
.navBtn4 .bar:nth-child(2) {
	 transform: rotate(-45deg);
}

.menu_lnb0 {
	width:100%;
	padding:0 40px 0 0;
}
.menu_lnb1 {
	width:70%;
}
.fm_gnb {
	width:100%;
	padding:50px 0;
}
.menu_lnb0 {
	padding:0 0px 0 0;
	font-size:min(5.5vw, 40px);
	color:#fff;
	font-weight:500;	
}
.menu_lnb0 a{
	color:#fff;
}

.menu_lnb0.on {
	color:var(--gcolor1);
}

.menu_lnb1 li {
	margin-right:50px;
}
.fm_dep01{
	width:100%;
	margin-bottom:40px;
}
.dep02 a{
	font-size:24px;
	font-weight:300;
	color:#fff;
}
.dep02 a:hover{
	color:var(--gcolor2);
}





input, select {
    font-size: 15px;
    COLOR: #555;
    border: #C0C0C0 1px solid;
    height: 20px;
    padding: 9px 5px;
    border-radius: 4px;
}





.table-basic {
	width:100%;
    border-top: 2px solid #444;
    border-left: 1px solid #ddd;	
	margin:20px 0;
}

.table-basic th,
.table-basic td {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
	height: 41px;
    padding: 7px;
	vertical-align:middle;
}
.table-basic thead th,
.table-basic tbody th {
    font-weight: 500;
    font-size: 15px;
    background-color: #f4f4f4;
	vertical-align:middle;
}

.table-basic td {
    background-color: #fff;
	text-align:left;
    padding: 10px 12px;
	line-height:20px;
    font-size: 15px;	
}
.table-basic td.text-c {
    background-color: #fff;
	text-align:center;
}


.uline {
	border-bottom:1px solid #ccc;
}

.btn_wrap{
	padding:20px 0 0 0;
	display:flex; /* display: flex(Block 특성), display: inline-flex(Inline 특성) */
	flex-flow: row nowrap; /* flex-direction-row column flex-wrap-nowrap wrap */
	justify-content:center; /*수평 flex-start flex-end center space-between space-around */
	align-items:center; /*수직 stretch flex-start flex-end center space-between space-around */
	width:100%;
}



.table-basic2 {
	display: table;
	width:100%;
/*     border-top: 1px solid #ccc;
    border-left: 1px solid #ccc; */
	border-collapse: separate;
    border-spacing: 0;
    border-radius: 4px;
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
/* 	font-family: 'Nanum Gothic'; */
	font-size:16px;
	color:#555;
/*     -webkit-box-shadow: 0 5px 30px #0000000a;
    box-shadow: 0 5px 30px #0000000a; */
}

.table-basic2 th,
.table-basic2 td {
     border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4; 
    padding: 12px 10px;
	vertical-align:middle;
    border-bottom: 1px solid #e4e4e4;
	text-align:center;
	word-break: break-all;

}
.table-basic2 thead th,
.table-basic2 tbody th {
    font-weight: 600;
    font-size: 16px;
    background-color: #F9FAFC;
	vertical-align:middle;
}
.table-basic2 th,.table-basic2 thead th {
    padding: 15px 10px;
}
.table-basic2 td {
    background-color: #fff;
}
.table-basic2 td b {
	font-weight:500;
}
.table-basic2 tr:last-child th,
.table-basic2 tbody tr:last-child th,
.table-basic2 tr:last-child td,
.table-basic2 tbody tr:last-child td {
    border-bottom: 0px solid #e4e4e4;
}

.certi_hd2 {
    font-size: 25px;
    font-weight: 700;
	margin:0 0 2rem 0;
}
.flow1 {
	height:70px;
	border:1px solid #15839d;
    border-radius: 10px;
	flex-basis:20%;	
    background: #219ebc;	
    font-size: 17px;	
	color:#fff;
}
.flow2 {
	height:70px;
	border:1px solid #ddd;
    border-radius: 10px;
	flex-basis:60%;	
	margin:0 1rem;
    background: #F9FAFC;	
    font-size: 17px;	
}
.flow3 {
	height:70px;
	border:1px solid #2a4a5a;
    border-radius: 10px;
	flex-basis:20%;	
    background: #3f6b81;
    font-size: 17px;	
	color:#fff;	
}
.flow31 {
	height:70px;
	flex-basis:20%;	
}
.dotvert{
	width:6px;
	height:6px;
    border-radius: 6px;
    background: #ddd;
	margin:.4rem;
}

.app-smart-popup {
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #555;
    margin: 10px;
    z-index: 999;
}
.smart-popup-img {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
	cursor:pointer;
}
.app-smart-popup .smart-popup-btns {
    border-top: 1px solid #919196;
    overflow: hidden;
}
.app-smart-popup .smart-popup-btns button.smart-popup-close {
    background-color: #ffffff;
    border-left: 1px solid #cdd2d7;
}
.app-smart-popup .smart-popup-btns button {
    float: left;
    background-color: #fafafc;
    border: 0;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 16px;
    height: 60px;
    outline: 0;
    width: 50%;
    color: black;
}





















/**************************************************************************************/
@media all and (max-width:950px){

.header .inner_wrap .gnbs {
	display:none;
}
.header .inner_wrap .top_side .navBtn3 {
	display: block;
}	

.header .inner_wrap {
    padding: 0 3rem 0 0;

}

.main_text_wrap {
    padding: 40vh 1rem 0 1rem;
	text-align:center;
	word-break: keep-all;
	word-wrap: break-word;
}

.content_01_title {
    font-size:120px;
    font-weight: 700;	
	letter-spacing: -1px;	
    top: 0%;
    width: 200vw;
	opacity: 0.4;
}
.pcontent1, .pcontent3, .pcontent5 {
    height: 9.5rem;
}

.main_t01 {
    font-size:13vw;
}	
.main_t02 {
    font-size:5vw;
}	
.main_hd_vision span {
    font-size: 4.5vw;
	letter-spacing: -0.1vw;		
}
.main_hd_vision p {
    font-size: 9vw;
	letter-spacing: -0.6vw;	
}	

.content--sticky {
    position: relative;
}
.pcontent2, .pcontent4, .pcontent6 {
    padding: 7vh 3vw 7vh 3vw;
    box-sizing: border-box;	
}
.main_con {
	flex-direction:column;	
}
.ml_left {
    padding: 0 0 0 0vw;
	position: relative;
    width: 100%;
}
.ml_left h3 {
    font-size: 5vw;
}
.ml_left h2 {
    font-size: 12vw;
}
.ml_left .ml_left_con1 {
    font-size: 3.5vw;
	overflow:hidden;
	width:100%; 	
}
.ml_left .ml_left_con2 {
    font-size: 2.6vw;
}

.ml_right {
	margin-top:20px;
    left: 0;
    position: relative;
    flex-wrap: wrap;
    width: 100%;;
    justify-content:space-between!important;	
    }
.bg-2 {
    overflow: visible;
}
.content--sticky.bg-2,
.content--sticky.bg-4,
.content--sticky.bg-6 {
    height: auto;
}
.ml_right img {
    margin: 10px 0;
    border-radius: 10px;
    width: 49%;
//    max-width:100%;
    box-sizing: border-box;		
}
.main_hd p {
    font-size: 9.5vw;
}
.main_hd span {
    margin: 2rem 0 4rem 0;
    font-size: 4.5vw;
}
a.con_btn {
    font-size:3.5vw;
}
.menu_lnb0 {
    font-size: 7vw;

}
.overv h1 {
    font-size: 17vw;
	letter-spacing: -0.3vw;		
}
.overv .overv_t {
    width: 70vw;
}
.his h3 {
    font-size: 17vw;
}
.portfolio-item {
    width: 95vw;
    height: 80vw;
    min-width: auto;
    min-height: auto;
	margin: 2vw;	
}

.his_wrap {
    padding: 4vw;
}
.his_hd {
    font-size: 5.7vw;
	margin: 5px 0 4vw 0;	
}
.his_text {
    font-size: 2.6vw;
    line-height: 1.4;
}
.his_img {
    width: initial;
    width: 30%;
    margin-top: 20px;
}
.his_img img.naroo {
	width:100%;
}
.his_img img.ntree {
	width:60%;
}
.h_scroll h1 {
    font-size: 19vw;
}


.scrollwrap {
    height: 580vh;	
}
.scrollwrap.his {
    height: 680vh;
}

.scroll-box.loaded {
    transform: translateX(75vw);
}

#scroll {
    overflow: hidden;
    padding: 5vh 3vw 7vh 3vw;
    box-sizing: border-box;		
}

.work-item-page-left {
    position: relative;
    left: 0;
    width: 100%;
}

.work-item-page h1 {
    font-size: 7vw;
    padding: 0 2.5vw;
    margin-top: 12vh;
}

.work-photo {
    width: 100%;
    left:0;
    position: relative;
    padding-top: 10vh;
    padding-bottom: 6vw;
}
.work-description {
    padding: 1vw 2.5vw;
    font-size: 4.2vw;
	margin-top:10px;
}
.work-item-page strong {
    font-size: 3.6vw;
}
.work-item-page .backbtn a {
    font-size:3.5vw;
}
.work-photo img {
    margin-bottom: 2vw;
}









}