@charset "utf-8";

:root{
	--tile_w : 14865px; /* 21013 × 424 기준 49.55배, 높이 300px 기준 */
}

*{
box-sizing : border-box;
}
body { 
	overflow-x:hidden; 
}

/************************************** 
	header 시작
**************************************/
#h_wrap{
	width : 100%;
	height : 100vh;
	position : relative;
	z-index : 15;
}

#h_wrap .bg_video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: 1;
}

/* #h_wrap::after{
	content : '';
	position: absolute;
	top: 0;
	left: 0;
	width : 100%;
	height : 1067px;
	background-color : rgba(0,0,0,0.1);
	z-index: 2; 
} */

.m_bg_video {
	display : none;
}

header {
	width : 100%;
	height : 100px;
	display:grid;
	grid-template-columns: 1fr auto 1fr;  
	align-items:center;
	background:rgba(0,0,0,.5);
	padding:0 32px;
	position : fixed;
	z-index: 999;
	top : 0;
}
.logo{ 
	justify-self:start;
}

#gnb {
	justify-self:center; 
}   
.nav_btn{ 
	justify-self:end;
	display:none; 
	background:transparent;
	border:0; 
}
.m_logo{
	display : none;
}
.menu_ico{
	width : 28px;
	height: auto;
	display : block;
}
nav{
	width : 700px;
	/* background-color : red; */
}
nav > ul{
 display : flex; 
 justify-content : space-between;
 align-items : center;
}
nav > ul > li > a{
	font-size : 21px;
	font-weight : bold;
	padding : 10px;
}

@media screen and (max-width:1000px){
	#h_wrap{
		position : relative;
		overflow : hidden;
		height : 75vh;
		z-index : 16;
	}
	.m_bg_video{
		display : block;
		position: absolute;
		top: 0;
		left: 0;
		min-width: 100%;
		min-height: 0;
		transform: translate(0, 0);
		object-fit: contain;
		z-index: 1;
	}
/* 	#h_wrap::after{
		content : '';
		position: absolute;
		top: 0;
		left: 0;
		width : 100%;
		height : 740px;
		background-color : rgba(0,0,0,0.1);
		z-index: 2; 
	} */
	.bg_video{
		display : none;
	}
	header{
		grid-template-columns: auto 1fr auto;  
		padding: 0 12px;                        
		height: 17vw;
	}
 	.pc_logo{
		display : none;
	} 
	.m_logo {
		display : block;
		width : auto;
		height : 25px;
	}
	.nav_btn{
		display : block;
		justify-self:end; 
	}
	#gnb{
		display : none;
	}
	.m_menu_bg{
		width : 100%;
		height : 100%;
		display : block;
		position : fixed;
		top : 17vw; 
		top : 0;
		right : -100%;
		background-color : rgba(0, 0, 0, 1);
		z-index: 9999;
	}
	.m_menu_bg .m_menu{
		padding : 30px 10px;
	}
	.m_menu_bg .m_menu .m_menu{
		width : 100%;
		height : auto;
		/* background-color : pink; */
	}
	.m_menu_bg .m_menu .m_menu>li{
		height : 100px;
		border-bottom : 1px solid #fff;
		line-height : 100px;
		font-size : 5vw;
		padding : 0 20px;
		font-weight : bold;
	}

}
/************************************** 
	header 끝
**************************************/

/************************************** 
	sec01 시작
**************************************/
#sec01{
	display : flex;
	justify-content :center;
	/* align-items : center;  */
	padding : 140px 180px; 
	gap : 30px;
}
#sec01 .sec01_left{
	width : 457px;
	height : 900px;
	background : #2B2B2B;
	border-radius: 20px;
	display : flex;
	flex-direction : column;
	justify-content : space-between;
	padding : 50px;
	text-align : left;
}
#sec01 .sec01_right{
	display : grid;
	grid-template-columns: repeat(2, 1fr);
	gap : 30px;
}
#sec01 .sec01_right .r_item {
	background : #2B2B2B;
	border-radius: 20px;
	display : flex;
	flex-direction : column;
	justify-content : space-between;
	padding : 50px;
}
#sec01 .sec01_right .r_item.c .hover_img{
	position:relative;
	width : 380px;
	height: 380px;
}
#sec01 .sec01_right .r_item.c img{
	position : absolute;
	width : 100%;
	height : 100%;
	object-fit : contain;
}
#sec01 .sec01_right .r_item.c{
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;  
}
#sec01 .sec01_right .r_item.c .r_item03_txt{ 
	height : 100%;
	display : flex;
	flex-direction : column;
	justify-content : space-between;
	flex: 1 1 auto;
}
#sec01 h2{
	font-size : 60px;
	color : #DF6513;
}
#sec01 p{
	font-size : 22px;
}
#sec01 h3{
	font-size : 28px;
}
.bold_num{
	font-size : 100px;
	font-weight : bold;
}
#sec01 .sec01_left:hover,
#sec01 .sec01_right .r_item:hover{
	background : #DF6513;
}
#sec01 .sec01_left:hover h2{
	color : #2B2B2B;
}
.sec01_right .r_item.c .hover_img .hover{
	opacity:0;
}
.sec01_right .r_item.c:hover .default{
	opacity:0;
}
.sec01_right .r_item.c:hover .hover{
	opacity:1;
}
@media screen and (max-width:1000px){
	#sec01{
		flex-direction: column;          
		padding: 60px 20px;
		margin-top : 60px;
		gap: 16px;     
		overflow : hidden;
	}
	#sec01 .sec01_left{
		max-width: 100%;
		height: auto; ;                   
		padding: 24px 20px;
		border-radius: 16px;
	}
	#sec01 .sec01_left>h2{
		margin-bottom : 30px;
	}
	#sec01 .sec01_right{
		grid-template-columns: 1fr;      
		gap: 16px;
		width: 100%;
	}
	  #sec01 .sec01_right .r_item{
		padding: 24px 20px;
		border-radius: 16px;
	}
	#sec01 .sec01_right .r_item.c{
		grid-column: auto;               
		flex-direction: column;         
		align-items: stretch;
		gap: 16px;
	}
	#sec01 .sec01_right .r_item.c .r_item03_txt{
		height: auto;
		gap: 10px;
		justify-content: flex-start;
		flex: 1 1 auto;
	}
	#sec01 .sec01_right .r_item.c .hover_img{
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;     
		position: relative;
	 }
	 #sec01 .sec01_right .r_item.c img{
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
	  }
	 #sec01 h2{ 
		font-size: 10vw; 
	  }
	 #sec01 h3{ 
		font-size: 4vw; 
	  }
	 #sec01 p{  
		font-size: 3vw; 
		line-height: 1.5; 
	 }
	 .bold_num{  
		font-size: 10vw; 
	 }
	
}
/************************************** 
	sec01 끝
**************************************/

/************************************** 
	sec02 시작
**************************************/
#sec02{
	width : 100%;
	height : 100vh;
	display : flex;
	justify-content : center;
	align-items : center;
	position: relative;
	overflow: hidden;
}
#sec02 #canvas{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	display: block;
	object-fit:cover;
	z-index:1;
}
.sec02_txt{
	position: relative;
	z-index: 2;
	color: #fff;
	text-align: center;
}
.sec02_txt>p{
	font-size : 50px;
	margin-bottom : 10px;
}
.sec02_txt>h2{
	font-size : 80px;
	font-weight : bold;
}
@media screen and (max-width:1000px){
	#sec02{
		max-width: 100%;
		background : url("/images/m_sec02_bg.png") no-repeat center/cover;
	}
	.sec02_txt>p{
		font-size : 4vw;
		margin-bottom : 10px;
	}
	.sec02_txt>h2{
		font-size : 13vw;
	}	
}
/************************************** 
	sec02 끝
**************************************/

/************************************** 
	sec03 시작
**************************************/
#sec03{
	width : 100%;
	padding : 167px 0;
	display : flex;
	flex-direction : column;
	align-items : center;
	gap : 140px;
}
#sec03 .sec03_txtbox{
	display : grid;
	grid-template-columns: repeat(2, 1fr);
	gap : 20px;	
}
#sec03 .sec03_txtbox .sec03_item{
	width : 670px;
	height : 200px;
	background: #2B2B2B;
	/* opacity: 0.3; */
	border: 1px solid #FFFFFF;
	border-radius: 20px;
	padding : 30px 20px;
}
#sec03 h2{
	font-size : 80px;
	font-weight : bold;
	margin-bottom : 20px;
}
.orange {
	color : #DF6513; 
}
.sec_title{
	text-align : center;
}
.sec_title>p{
	font-size : 20px;
}
.sec03_txtbox .sec03_item h3{
	font-size : 28px;
	font-weight : bold;
	margin-bottom : 13px;
}
.sec03_txtbox .sec03_item>p{
	font-size : 18px;
	margin-bottom : 20px;
	line-height : 1.4;
}
.tag{
	width : 125px;
	height : 32px;
	border: 1px solid #FFFFFF;
	border-radius: 17px;
	padding : 5px 10px;
	margin-right : 5px;
	font-size : 16px;
}
.tag:hover{
	background-color : #DF6513;
	color : #fff;
}
.mob_br {
	display : none;
}
@media screen and (max-width:1000px){
	#sec03{
		max-width: 100%;
		/* background-color : pink; */
		padding : 150px 20px;
		gap : 70px;
	}
	#sec03 .sec03_txtbox{
		grid-template-columns: 1fr;
        gap: 16px;
    }
	#sec03 .sec03_txtbox .sec03_item{
		width : 100%;
		height : auto;
		padding: 24px 20px;
		border-radius: 16px;
	}
	#sec03 h2{
		font-size : 13vw;
		margin-bottom : 10px;
	}
	.sec_title>p{
		font-size : 4vw;
	}
	
	.sec03_txtbox .sec03_item>p{
		font-size : 3.6vw;
	}
	.tag{
		font-size : 3vw;
	}
	.mob_br {
	display : block;
	}
}
/************************************** 
	sec03 끝
**************************************/

/************************************** 
	sec04 시작
**************************************/
#sec04{
	/* background-color : pink; */
	width : 100%;
	/* padding : 167px 0; */
	display : flex;
	flex-direction : column;
	align-items : center;
	gap : 10px;
}
#sec04 .sec_title h2 {
	font-size : 120px;
	font-weight : bold;
	margin-bottom : 170px;
}
#sec04 .title_sub{
/* 	background-color : blue; */
	width : 780px;
	display : flex;
	justify-content : space-between;
	align-items : center;
	margin-bottom : 35px;
}
#sec04 .title_sub p{
	font-size : 24px;
}
.sec04_item{
	width : 700px;
	height : auto;
	background: #2B2B2B;
	/* opacity: 0.3; */
	border: 1px solid #FFFFFF;
	border-radius: 20px;
	padding : 30px;
	display : flex;
	gap : 20px;
}
.sec04_item>img{
	width : 50px;
	height: 55px;
}
.sec04_item .sec04_item_txt h3{
	font-size : 20px;
	font-weight : bold;
	margin-bottom : 18px;
}
.sec04_item .sec04_item_txt ul li{
	font-size : 16px;
	line-height : 1.6
}
.main_color {
	color: #DF6513;
	font-weight : bold;
	font-size : 20px;
}
.mob_br {
	display : none;
}
@media screen and (max-width:1000px){
	#sec04{
		max-width: 100%;
		padding : 0 20px;
		gap : 10px;
	}
	#sec04 .sec_title h2 {
		font-size : 20vw;
		margin-bottom : 70px;
	}
	#sec04 .title_sub{
		/* background-color : blue; */
		width : 100%;
		display : flex;
		justify-content : center;
		align-items : center;
		gap : 15px;
		margin-bottom : 10px;
	}
	#sec04 .title_sub img{
		width : 7.4vw;
		height : 7.4vw;
	}
	#sec04 .title_sub p{
		font-size : 4.4vw;
	}	
	.sec04_item{
		flex-direction : column;
		max-width : 100%;
		height : auto;
		padding: 24px 20px;
		border-radius: 16px;
	}
	.sec04_item .sec04_item_txt h3{
		font-size : 8vw;
	}
	.sec04_item .sec04_item_txt ul li{
		font-size : 3.6vw;
	}
	.main_color {
		font-size : 4vw;
	}
	.mob_br {
	display : block;
	}
}
/************************************** 
	sec04 끝
**************************************/

/************************************** 
	sce05 시작
**************************************/
#sec05{ 
	/* background-color : pink;  */
	position:relative;
	color:#fff;
	padding : 167px 0 0 0;
	min-height: 300vh;
}
.stage{
	position:sticky; 
	top:0; 
	height:100vh; 
	display:grid; 
	place-items:center; 
	overflow:hidden; 
}
.phone{ 
	position:relative;
	width : 340px;
	height : 720px;
	aspect-ratio:9/19.5; 
}
.phone_frame{
	position:absolute; 
	inset:0; 
	width:100%; 
	height:100%; 
	z-index:2; 
	pointer-events: none; 
}
.screen{
	position:absolute; 
	inset:0; 
	z-index:1; 
	overflow:hidden; 
	border-radius:24px; 
}
.screen_track{ 
	position:absolute;
	left:0; 
	top:0; 
	width:100%;
	transition:transform 0.3s ease;
}
.screen_track img{ 
	display:block; 
	width:100%; 
	height:100%; 
	object-fit:cover; 
}
.headline{ 
	position:absolute; 
	inset:0; 
	z-index:3; 
	pointer-events:none; 
	font-weight: 800;
	line-height: 1;
	font-size: 200px;
	overflow: hidden;
	--x: 0px;
	--dist: 1000px; 
}
.headline_base,
.headline_highlight{
	position:absolute; 
	top:50%; 
	transform:translateY(-50%);
	white-space:nowrap;
	will-change: transform;
	animation: none !important;
	transform: translate3d(calc(var(--x) + var(--offset, 0px)), -50%, 0);
} 
.headline_base{ 
	color:#fff; 
}
.headline_highlight{
	color:#DF6513; 
	clip-path: inset(0 100% 0 0);
}
.headline .headline_base:nth-of-type(1),
.headline .headline_highlight:nth-of-type(2){
	--offset: 0px;
}
.headline .headline_base:nth-of-type(3),
.headline .headline_highlight:nth-of-type(4){
	--offset: var(--dist);
}
@media screen and (max-width:1000px){
	#sec05{ 
		/* background-color : pink;  */
		position:relative;
		color:#fff;
		padding : 70px 0;
		min-height: 300vh;
	}
	.phone{ 
		width : 70vw;
		height : 150vw;
	}
	.headline{ 
		line-height: 1;
		font-size: 40vw;
	}
	.headline_base,
	.headline_highlight{
		letter-spacing: -0.01em;
	}
}
/************************************** 
	sce05 끝
**************************************/

/************************************** 
	sce06 시작
**************************************/
#sec06{
	/* background-color : pink; */
	width : 100%;
	min-height: 100vh; 
	position : relative;
	overflow: hidden;
	padding : 167px 0;
}
 #sec06 .sec06_bg{
	 position : absolute;
	 top:-29%;
	 right:17%;             
	 z-index: 1;
	 opacity : 0.5
}
#sec06 .sec06_bg .sec06_bg_pc{
	width: 1000px;
	height: auto;          
}
#sec06 .sec_title,
#sec06 .client_logo{
  position: relative;
  z-index: 2;           
} 
#sec06 .sec_title{
	margin-bottom : 140px;
}
#sec06 .sec_title h2 {
	font-size : 120px;
	font-weight : bold;
	margin-bottom : 10px;
}
#sec06 .sec_title p{
	font-size : 20px;
}
.client_logo{
	position : relative;
	z-index : 2;
	width : 100%;
	height : 300px; /* 로고 높이에 맞게 */
	overflow : hidden;
}

.client_logo .logo_track{
	display : block;
	width : 100%;
	height : 100%;
	background-image : url("../images/sec06_client_logo.png");
	background-repeat : repeat-x;
	background-size : auto 100%;
	background-position-x : 0;
	animation : logoScroll 150s linear infinite;
	will-change : background-position;
	transform : translate3d(0, 0, 0);
}

@keyframes logoScroll{
  from { background-position-x : 0; }
	to   { background-position-x : calc(var(--tile_w) * -1); }
}

.sec06_bg_mob,
.client_logo_mob{
	display : none;
}

@media screen and (max-width:1000px){
	.sec06_bg_mob,
	.client_logo_mob{
		display : block;
	}
	.sec06_bg_pc,
	.client_logo_pc{
		display : none;
	}
	#sec06{
		/* background-color : pink; */
		width : 100%;
		min-height: 100vh; 
		position : relative;
		overflow: hidden;
		padding : 70px 0;
	}
	#sec06 .sec06_bg{
		 position : absolute;
		 top:-32%;
		 right:-40%;             
		 z-index: 1;
		 opacity : 0.5
	}
	#sec06 .sec06_bg .sec06_bg_mob{
		width: 700px;
		height: auto;          
	}
	#sec06 .sec_title h2 {
		font-size : 20vw;
		font-weight : bold;
		margin-bottom : 10px;
	}
	#sec06 .sec_title p{
		font-size : 4vw;
	}
/* 	.client_logo .logo_track{
		background-size : auto 160px;
		--tile_w : 160px * 25.15; 비율 동일 유지
		--tile_w : 4024px; 160 × 25.15 ≈ 4024
		animation-duration : 100s; 조금 빠르게
	} */
}
/************************************** 
	sce06 끝
**************************************/

/************************************** 
	sce07 시작
**************************************/
#sec07{ 
	/* background-color : pink; */
	width : 100%;
	height :auto;
	padding : 167px 100px;
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	row-gap: 80px;
	column-gap: 80px;   
	align-items: start;  
	position : relative;
}
#sec07 .sec07_item{
	width : 750px;
	min-height: 350px;
	background: #2B2B2B;
	border: 1px solid #FFFFFF;
	border-radius: 20px;
	padding : 30px 20px;
	align-self:start;
	position : relative;
	z-index : 9;
	align-self: start;
}
#sec07 .sec07_item>p{
	font-size : 16px;
	line-height : 1.6
}
#sec07 .sec07_item:nth-child(odd){
	grid-column:1;
	justify-self: start; 
}
#sec07 .sec07_item:nth-child(even){ 
	grid-column:2;
	justify-self: end;
	margin-top : 150px;
}
#sec07 .sec07_item .sec07_title{
	display : flex;
	align-items : center;
	gap : 35px;
	margin-bottom : 15px;
}
.sec07_r_txt>h3{
	margin-bottom : 10px;
}
.txtbg{
	background-color : #DF6513;
}
.txtbox_left,
.txtbox_right{
	position : absolute;
	z-index : 8;
}
.txtbox_left.a{
	top : 37.8%;
	right : 38%;
}
.txtbox_left.b{
	top : 67.9%;
	right : 38%;
}
.txtbox_right.a{
	top : 25.9%;
	left : 38%;
}
.txtbox_right.b{
	top : 64.4%;
	left : 38%;
}
.txtbox_right.c{
	bottom : 5.8%;
	left : 38%;
}
.mob_br {
	display : none;
}

@media screen and (max-width:1000px){
#sec07{
	/* background-color : pink; */
	height : auto;
	padding : 70px 10px;
    grid-template-columns: 1fr;
    row-gap: 100px;
  }
  #sec07 .sec07_item{
    grid-column: 1 / -1 !important;  
    justify-self: center 
    margin-top: 0 !important;
    width: 100%;
	position : relative;
	z-index : 9;
  }
  #sec07 .sec07_item:nth-child(even){
    grid-column: 1 / -1 !important;  /* 짝수도 동일하게 */
    margin-top: 0 !important;
    justify-self: stretch !important;
  }
    #sec07 .sec07_item:nth-child(odd){
    grid-column: 1 / -1 !important;  /* 짝수도 동일하게 */
    margin-top: 0 !important;
    justify-self: stretch !important;
  }
	.txtbox_left.a,
	.txtbox_left.b,
	.txtbox_right.a,
	.txtbox_right.b,
	.txtbox_right.c {
		display : none;
	}
	#sec07 .sec07_item br{
		display : none;
	}
	.mob_br {
		display : block !important;
  }

}
/************************************** 
	sce07 끝
**************************************/

/************************************** 
	sce08 시작
**************************************/
#sec08{
	/* background-color : yellow;  */
	width : 100%;
	height : auto;
	position : relative;
	padding : 167px 100px;
	
}
#sec08 .sec08_bgicon_pc{
	position : absolute;
	top : 0;
	right : 20%;
	opacity : 0.7;
	z-index : 9;
	width : 550px;
	height : 550px;
}
#sec08 .sec_title{
	position : relative;
	z-index : 10;
}
#sec08 .sec_title h2{
	font-size: 120px;
    font-weight: bold;
    margin-bottom: 10px;
}
#sec08 .sec_title p{
	font-size: 20px;
}
.sec08_bgicon_mob{
	display : none;
}
.board_list{
	/* background-color : pink; */
	text-align : left;
	padding: 0 30px;
	width : 1360px;
	margin : auto;
	margin-top : 200px;	
}
.board_row{
	border-bottom: 1px solid #fff;
}
.board_item{
	display: grid;
	grid-template-columns: 30px 1fr auto;  
	align-items: center;
	gap: 100px;
	min-height: 150px;                     
	padding: 10px 0;
}
.board_item .board_title{
	font-size : 24px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.board_item .board_date{
	font-size : 20px;
	white-space: nowrap;
}
.board_icon .plus_icon{
	display:block;
	width: 30px;                         
	height: 30px;
	object-fit: contain;
}
@media screen and (max-width:1000px){
	.sec08_bgicon_mob{
		display : block;
		position : absolute;
		top : 0;
		right : 0;
		opacity : 0.7;
		z-index : 9;
		width : 200px;
		height : 400px;
	}
	.sec08_bgicon_pc{
		display : none;
	}
	#sec08{
		padding : 167px 0;
	  }
	#sec08 .sec_title h2{
		font-size: 20vw;
		font-weight: bold;
		margin-bottom: 10px;
	}
	#sec08 .sec_title p{
		font-size: 4vw;
	}
	.board_list{
		/* background-color : pink;  */
		text-align : left;
		width : 100%;
		margin : auto;
		margin-top : 100px;	
	}
	.board_item{
		display: grid;
		grid-template-columns: 10px 1fr auto;  
		align-items: center;
		gap: 50px;
		min-height: 100px;                     
		padding: 10px 0;
	}
	.board_item .board_title{
		font-size : 4.5vw;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.board_item .board_date{
		font-size : 4vw;
		white-space: nowrap;
	}
	.board_icon .plus_icon{
		display:block;
		width: 15px;                         
		height: 15px;
		object-fit: contain;
	}
}
/************************************** 
	sce08 끝
**************************************/

/************************************** 
	sce09 시작
**************************************/
#sec09{
	/* background-color : pink; */
	width : 100%;
	height : 100vh;
	padding : 167px 100px;
	text-align : center;
	background : url("/images/sec09_bg_item.png") no-repeat center/cover;
}
#sec09 p{
	font-size : 30px;
	line-height : 1.5;
	margin-bottom : 150px;
}
#sec09 p .main_color {
	color : #DF6513;
	font-size : 80px;
	font-weight : 600;			
}
#sec09 .tag_box{
	display : flex;
	justify-content : center;
	gap : 20px;
}
#sec09 .tag_box>.tag{
	width : 200px;
	height : 40px;
	display : flex;
	justify-content : space-between;
	align-items : center;
	padding : 0 15px;
}
@media screen and (max-width:1000px){
	#sec09{
		/* background-color : pink; */
		width : 100%;
		min-height : 100vh;
		padding : 70px 10px;
		margin-top : 60px;
		text-align : center;
		background: url("/images/m_sec09_bg_item.png") no-repeat center/cover;
	}
	#sec09 h3{
		font-size : 5vw;
		line-height : 1.5;
		margin-bottom : 150px;
	}
	
	#sec09 .tag_box{
		display : flex;
		flex-direction : column;
		justify-content : center;
		align-items : center;
		gap : 10px;
	}
	#sec09 h3 br{
		display : none;
	}
	.mob_br {
		display : block !important;
  }

}
/************************************** 
	sce09 끝
**************************************/

/************************************** 
	sce10 시작
**************************************/
#sec10{
	/* background-color : pink; */
	width : 100%;
	height : auto;
	padding : 167px 180px;
	text-align : center;
}
#sec10 h2{
	font-size : 80px;
	font-weight : bold;
	margin-bottom : 100px;
}
#sec10 .require{
	text-align : right;
}
#sec10 .main_color{
	margin-right : 5px;
}
.inputbox{
	b/* ackground-color : green; */
	padding : 30px 0;
	width : 1560px;
	height : auto;
	margin-bottom : 60px;
}
.input_topbox{
	display : flex;
	flex-wrap : wrap;
	justify-content : space-between;
	align-items : center;
	
}
.input_topbox .input_item,
.input_item.a{
	display : flex;
	flex-direction : column;
	text-align : left;
}
.input_topbox .input_item input {
	color: #fff;
}
.default_write_table input {
	color: #fff;
}
label{
	font-size : 20px;
	margin-bottom : 10px;
}
textarea{
	height : 335px;
	border:1px solid #bbb; 
	border-radius:10px; 
	background: #383838;
	padding: 5px;
	color: #fff;
}
#checkbox{
	width : 20px;
	height : 20px;
}
.input_item.b{
	margin-bottom : 40px;
}
.btn_box button{
	width : 250px;
	height : 70px;
	border: 1px solid #fff;
	border-radius: 20px;
	color : #fff;
	font-size : 20px;
}

.inquiry_btn{
	background: #383838;
}
hr{
	border: 1px dashed #fff;
	margin : 50px 0;
}
.estimate_btn{
	background: #DF6513;
}
@media screen and (max-width:1000px){
	#sec10{
		/* background-color : pink; */
		width : 100%;
		height : auto;
		padding : 70px 10px;
		text-align : center;
		margin-top : 70px;
	}
	#sec10 h2{
		font-size : 15vw;
		font-weight : bold;
		margin-bottom : 70px;
	}
	.inputbox{
		/* background-color : green; */
		padding : 15px 0;
		width : 100%;
		height : auto;
		margin-bottom : 40px;
	}

	.input_topbox{
		display : flex;
		flex-direction : column;
		align-items:stretch;
		gap : 10px;	
	}
	input[type=text], 
	input[type=password], 
	input[type=tel],  
	input[type=email]{
		width: 100%;
		height: 40px; 
		vertical-align:middle; 
		border:1px solid #bbb; 
		border-radius:5px; 
		background: #383838;
		margin-bottom:20px;
		padding: 0 5px;
		box-sizing : border-box;
	}
	textarea{
		border-radius:5px; 
	}
	label{
		font-size : 4vw;
		margin-bottom : 10px;
	}
	.btn_box button{
		width : 60vw;
		height : 70px;
		border: 1px solid #fff;
		border-radius: 20px;
		color : #fff;
		font-size : 5vw;
	}

}
/************************************** 
	sce10 끝
**************************************/

/************************************** 
	footer 시작
**************************************/
footer{
	width : 100%;
	height : 380px;
	background: #2A2A2A;
}
footer .f_top{
	width : 100%;
	height : 70px;
	border-bottom : 1px solid #fff;
	padding : 25px 180px;
}
footer .f_top .legal_list{
	display : flex;
	align-items : center;
	justify-content : left;
	gap : 20px;
	font-size : 18px;
}
footer .legal_list li{
	position : relative;
}
footer .legal_list li+li::before{
	content:"";
	position:absolute;
	left:-10px; top:50%;
	width:1px; height:12px;
	transform:translateY(-50%);
	background: #fff;
}
footer .f_bottom {
	/* background-color : pink; */
	padding : 30px 180px;
	height : 270px;
	font-size : 20px;
}
footer .company{
	padding: 6px 0 10px; 
	}
footer .company_info{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}
footer .company_info .info_item{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 30px 16px;
}
footer .company_info dt{
  color: #7D7D7D;
  font-weight: bold;
}
footer .copyright{
  display: block;
  text-align: center;
  color: #7D7D7D;
  margin-top: 10px;
}
@media screen and (max-width:1000px){
	footer{
		width : 90%;
		height : auto;
		background: #2A2A2A;
		margin : 0 auto;
		padding-bottom : 10px;
	}
	footer .f_top{
		width : 100%;
		height : 50px;
		border-bottom : 1px solid #fff;
		padding : 0 20px;
		line-height : 50px;
	}
	footer .f_top .legal_list{
		display : flex;
		align-items : center;
		justify-content : left;
		gap : 20px;
		font-size : 3.5vw;
	}
	footer .f_bottom {
		/* background-color : pink; */
		padding : 30px 20px;
		height : auto;
		font-size : 4vw;
	}
	footer .company_info{
	  display: grid;
	  grid-template-columns: 1fr;
	}
	footer .company_info .info_item{
	  display: grid;
	  grid-template-columns: 100px 1fr;
	  gap: 30px 20px;
	}
	footer .company_info .info_item.a{
		margin-bottom : 30px;
	}
}
/************************************** 
	footer 끝
**************************************/
/************************************** 
	aside 시작
**************************************/
#wrap{
	position : relative;
}
.left_aside{
	display : flex;
	flex-direction : column;
	position : fixed;
	bottom : 25px;
	left : 30px;
	gap : 15px;
	z-index : 99;
}
.right_aside{
	display : flex;
	flex-direction : column;
	position : fixed;
	top : 110px;
	right : 30px;
	gap : 15px;
	z-index : 14
}
@media screen and (max-width:1000px){
	.left_aside>a>img{
		width : 50px;
		height : 50px;
	}
	.left_aside{
		gap : 10px;
		left : 10px;
	}
	.right_aside>a>img{
		width : 40px;
		height : 40px;
	}
	.right_aside{
		top : 70px;
		right : 10px;
		gap : 10px;
		position : fixed;
		z-index : 15;
	}

}
/************************************** 
	aside 끝
**************************************/


/************************************** 
	popup css 시작
**************************************/
#popup_wrap {}

.popup_container {}

.popup_sector {
	width: 90%;
	margin: 0 auto;
}

.popup_title {
	margin-top: 60px;
	font-size: 28px;
	font-weight: bold;
}