@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
*{
	margin: 0;
	padding: 0;
	position: relative;
	box-sizing:border-box;
}
a{
	text-decoration:none;
}
li{
	list-style:none;
}
.index{
	position:relative;
	width:100%;
	max-height: 1080px;
	height:1080px;
	overflow:hidden;
}
header{
	height: 80px;
	position: fixed;
	z-index:1000;
	width: 100%;
	background:#fff;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.1);
}
header .logo{
	position: absolute;
	top: 10px;
	left: 30px;
}
header .logo a{
	display:inline-block;
	width: 200px;
	height:50px;
	margin-top:10px;
}
header .logo a img{
	width: 100%;
}
header .menu{
	position: absolute;
	right:20px;
}
header .menu ul{
	display:flex;
	margin-top: 10px;
}
header .menu ul li{
	margin: 0 10px;
	font-size: 18px;
}
header .menu ul li a{
	display:block;
	height: 50px;
	line-height: 50px;
	color:#000;
}
header .menu ul li a:hover{
	font-weight:800;
}
#mobile-close{
	width: 30px;
	height: 30px;
	background:url(images/mobile-menu-close.svg) no-repeat;
	background-size: contain;
}
.mobile-menu{
	position:fixed;
	right:0;
	width: 300px;
	height: 100%;
	z-index:100;
	background:#fff;
	padding: 20px;
	font-size: 18px;
	right:-300px;
	transition: all 0.3s ease;
	box-shadow:0px 0px 40px rgba(0,0,0,0.2);
}
.mobile-menu.view{
	right:0;
}
.mobile-menu ul li{
	border-bottom:1px solid #ddd;
	height: 40px;
	line-height: 40px;
}
.mobile-menu ul li a{
	color:#000;
}
#index02{
	background:url(images/bg-pattern.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#index03{
	background:url(images/bg-pattern.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#index04{
	background:url(images/index04.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#index05{
	background:url(images/index05.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#index06{
	background:url(images/bg-pattern.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#index07{
	background:url(images/index07.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#index08{
	background:url(images/index08.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#index09{
	background:url(images/index09.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#index10{
	background:url(images/index10-1.jpg) no-repeat;
	background-size: cover;
	background-position: top;
}
#index10:before{
	width: 100%;
	position:absolute;
	content:'';
	height: 70%;
	background:linear-gradient(to bottom, #ffffff00, #ffffff,#ffffff,#ffffff);
	display:block;
	bottom:0;
}
#index11:before{
	width:100%;
	height: 300px;
	background:url(images/index05-bg.png) no-repeat;
	position: absolute;
	content:'';
	display:block;
	left:0;
	bottom:0;
	background-size:cover;
	background-position:center;
}
.perform-index-mi,.product-m{
	background:url(images/bg-pattern.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
.product-imo{
	background:url(images/index14-bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#index01{
	padding-top: 70px;
}
#index16{
	background:url(images/bg-pattern.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
.index01-bg{
	height: 70%;
	width:100%;
	background:url(images/bg1.jpg) no-repeat;
	background-size:cover;
}
.titlen{
	color:#fff;
	margin-left: 100px;
	padding-top:100px;
}
.titlen h5{
	font-size: 33px;
	margin-bottom: 50px;
	font-family:'Pretendard';
}
.titlen h3{
	font-size:80px;
	line-height: 90px;
	font-family:'Pretendard';
}
#index-01-side{
	width: 400px;
	height: 100%;
	position: absolute;
	right:0;
	top:0;
	background:url(images/bg1-1.png)no-repeat;
	background-size: cover;
}
.index01-bg2{
	width:100%;
	height:30%;
	background:url(images/bg2.jpg)no-repeat;
	background-size:cover;
}
#logo{
	width: 270px;
	height: 64px;
	background:url(images/logo.png)no-repeat;
	left: 100px;
	top: 100px;
}
.titmk{
	width:300px;
	height: 120px;
	background:url(images/tit-mb.png) no-repeat;
	background-size:contain;
	background-position:center;
	text-align:center;
	line-height: 120px;
	font-size: 50px;
	font-family:'Pretendard';
	font-weight: 600;
	color:#fff;
}
#thk{
	font-family:'Pretendard';
	font-size: 20px;
	line-height: 30px;
	font-weight:600;
}
#thk p{
	margin:40px 0px;
	margin-left: 540px;
}
#thk-tit{
	margin-left: 540px;
	margin-top: 80px;
}
#index02-pic1{
	position: absolute;
	right:500px;
	top: 200px;
	width: 300px;
	height: 400px;
	background:url(images/index02.png) no-repeat;
}
#index02-pic2{
	position: absolute;
	right:700px;
	top: 300px;
	width: 300px;
	height: 400px;
	background:url(images/index02-1.png) no-repeat;
}
.index02-bottom-bg{
	background:url(images/index02-bg.jpg) no-repeat;
	width: 100%;
	position: absolute;
	bottom:0;
	height: 300px;
	text-align: center;
	background-size: cover;
	background-position: center;
}
.index02-bottom-bg hr{
	width: 80px;
	height: 2px;
	background:#Ffffff;
	border:0;
	margin: 0 auto;
	margin-top: 50px;
	
}
.index02-bottom-bg  p{
	color:#fff;
	font-size:36px;
	margin-top: 50px;
}
#index03-bg{
	width: 100%;
	height: 70%;
	background:url(images/index03-bg.jpg) no-repeat;
	background-size:cover;
	background-position: center;
	position:absolute;
}
#index03-table{
	position: absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	background:#fff;
	width: 850px;
	height: 600px;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
	padding: 100px;
	font-family:'Pretendard';
	z-index:10;
}
#index03:before{
	content:'';
	display:block;
	width: 850px;
	height:600px;
	position:absolute;
	background:#2d3e7a;
	z-index:1;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	margin-left: 50px;
	margin-top: 50px;
}
#info-tit{
	margin-left: -300px;
	margin-top:-70px;
}
#index03-table ul{
	display:flex;
	flex-wrap:wrap;
	margin-bottom: 20px;
}
#index03-table ul li{
	font-size: 24px;
	height: 60px;
	line-height: 60px;
	font-weight: 600;
}
#index03-table ul li.t{
	width: 20%;
	border-bottom: 1px solid #000;
}
#index03-table ul li.c{
	width: 80%;
	border-bottom: 1px solid #000
}
#index03-table ul li.c:nth-child(3){
	margin-left: 20%;
}
#product-tit,
#history-tit{
	text-align: center;
	width: 100%;
	margin-top: 100px;
}
#product-cont{
	display:flex;
	width: 80%;
	margin: 0 auto;
	margin-top: 50px;
}
#product-cont img{
	border: 2px solid #000;
	box-shadow: 20px 20px 20px rgba(0,0,0,0.1);
}
.product-cm{
	padding-left: 30px;
	width: 50%;
}
.product-cm p{
	font-size: 26px;
	margin: 30px 0px;
	font-weight: 400;
}
.product-cm p b{
	color:#2d3e7a;
}
.history-cont{
	width: 50%;
	position: absolute;
	right:0;
	height: 100%;
	top: 0;
	margin-top: 50px;
}
.history-cont .lf{
	text-align:right;
	width: 50%;
	padding: 0 40px;
	margin-top: 50px;
}
.history-cont .lf:before{
	position:absolute;
	content:'';
	display:block;
	width: 10px;
	height: 10px;
	 background:#000;
	right:-6px;
	border-radius:10px;
	top: 50%;
}
.history-cont .rf:before{
	position:absolute;
	content:'';
	display:block;
	width: 10px;
	height: 10px;
	 background:#000;
	left:-4px;
	border-radius:10px;
	top: 50%;
}
.history-cont .rf{
	width: 50%;
	margin-left:50%;
	padding: 0 40px;
	margin-top: 50px;
}
.history-cont:before{
	content:'';
	display:block;
	width: 2px;
	position:absolute;
	top:0;
	height: 100%;
	border-left: 2px dashed #000;
	left: 50%;
}
.history-cont .t{
	font-size: 36px;
}
.history-cont .c{
	font-size: 24px;
}
.product-thumb h5,
.info-pr ul li h5{
	font-size: 36px;
	background:#2d3e7a;
	display:inline-block;
	padding:0 30px;
	color:#fff;
	padding-right: 100px;
	top:20px;
	z-index:10;
	left: 10px;
}
.product-thumb h5:before,
.info-pr ul li h5:before{
	width:40px;
	height: 100%;
	background:#2d3e7a;
	content:'';
	display:block;
	position:absolute;
	right:-20px;
	transform:skewX(-30deg)
}
#orders-tit1,
#orders-tit2{
	width:30%;
	margin-top: 100px;
}

.orders-form{
	width: 100%;
	display:flex;
	color:#fff;
	position: absolute;
	top:0;
}
#index08 .orders-form{
	top: 300px;
	color:#000;
}
#index08 .orders-cont{
	margin:0;
	border-left:1px solid #000;
}
.orders-sub{
	width: 30%;
	text-align:center;
	align-content:center;
	font-size: 40px;
}
.orders-cont{
	width: 70%;
	border-left: 1px solid #fff;
	padding-left: 40px;
	margin-top: 150px;
}
.orders-cont > ul{
	display:flex;
	margin-bottom: 40px;
}
.orders-cont .bst > ul{
	display:flex;
}
.orders-cont > ul li.n{
	width: 10%;
}
.orders-cont > ul li.n:before{
	width: 10px;
	height: 10px;
	position: absolute;
	left:-45px;
	display:block;
	content:'';
	background:#fff;
	top: 20%;
	border-radius: 20px;
}
#index08 .orders-cont > ul li.n:before{
	background:#000000;
}
.orders-cont > ul li{
	font-size: 21px;
}
.orders-cont  li.b{
	width: 30%;
	font-weight: 600;
}
.orders-cont  li.s{
	width: 10%;
	
}
.orders-cont li.a{
	width: 50%;
}
.orders-cont .bst{
	width: 100%;
}
.proceess-list{
	width: 100%;
	margin-top: 100px;
}
.proceess-list ul{
	display:flex;
	width: 80%;
	margin:0 auto;
}
.proceess-list ul li{
	width: 25%;
	margin-bottom: 100px;
	text-align: center;
}
.proceess-list ul li:before{
	content:'';
	position:absolute;
	right:-40px;
	width: 80px;
	height: 60px;
	background:url(images/prce-arrow.png) no-repeat;
	top: 25%;
}
.proceess-list ul.reverse li:before{
	right:unset;
	left:-40px;
	transform:rotate(180deg)
}
.proceess-list ul li:last-child:before{
	right:50%;
	transform:translate(50%,-50%) rotate(90deg);
	
	top:unset;
	bottom:-100px
}
.proceess-list ul.reverse  li:last-child:before{
	display:none;
}
.proceess-list .thmb{
	width: 200px;
	height: 200px;
	text-align:center;
	background:#fff;
	align-content:center;
	border-radius:200px;
	margin:0 auto;
}
.proceess-list ul li p{
	font-size: 24px;
	text-align: center;
	color:#fff;
	margin-top: 40px;
}
.proceess-list ul.reverse{
	flex-direction:row-reverse
}
#process-tit,
#perfom-tit{
	margin-left:100px;
	margin-top: 100px;
}
.lst-pic{
	display:flex;
	width: 70%;
	height:500px;
}
.om2{
	height:100%;
}
.om2 li{
	height:49%;
	
}
.om2 li:first-child{
	margin-bottom:2%;
}
.perform-list{
	display:flex;
	width: 100%;
	margin: 0 auto;
	bottom:50px;
	position:absolute;
	padding-left:200px;
}
.lst-pic .om1{
	width: 65%;
}
 
.lst-pic .om2{
	width: 38%;
	margin-left: 10px;
}
 
.lst-sub{
	width: 30%;
	text-align: center;
	align-content:center;
	
}
.thmb-fm{
	position:relative;
	overflow:hidden;
	height: 100%;
	width:100%;
}
.lst-pic .om1 li{
	height:100%;
}
.thmb-fm img{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width:130%;
}
.lst-sub h4{
	font-size: 36px;
}
.lst-sub p{
	font-size: 24px;
	margin-top: 20px;
}
.perform-list2 > ul{
	display: flex;
	width: 70%;
	margin: 0 auto;
	margin-top: 100px;
}
.perform-list2 > ul li{
	width: 50%;
	text-align:center;
	padding: 0 120px;
}
.perform-list2 > ul li .list-om3{
	background:#fff;
	box-shadow:0px 0px 30px rgba(0,0,0,0.1);
}
.om3-thumb,
.ind-th{
	position:relative;
	width: 100%;
	height: 400px;
	overflow:hidden;
}
.om3-thumb img,
.ind-th img{
	width: 100%;
	position: absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
}
.om3-sub{
	padding: 20px 0px;
}
.om3-sub h4{
	font-size:36px;
}
.om3-sub p{
	font-size: 20px;
	margin-top: 30px;
}
.imo-list ul{
	display:flex;
	width: 100%;
	margin-top:50px;
}
.imo-list ul li{
	width: 50%;
	padding: 0 100px;
	text-align:center;
}
#imo-tit,
#imo-tit2{
	margin-left: 20px;
	margin-top: 10px;
}
.info-pr ul{
	display:flex;
	width: 50%;
	margin: 0 auto;
	gap:10%;
}
.info-pr ul li{
	width: 50%;
	background:#fff;
	box-shadow: 0px 20px 30px rgba(0,0,0,0.1);
}
.pr-ind{
	background:#fff;
	
}
.pr-ind img{
	height: 110%;
}
.ind-sub{
	padding: 20px;
	font-size: 20px;
}
.info-pr ul li h5{
	
}
.ind-sub h6{
	font-size:30px;
	margin-bottom: 20px;
}

.color-op {
	width: 80%;
	margin: auto;
}
.color-op ul{
	display:flex;
	gap:4%;
}

.color-op ul li{
	width: 25%;
	text-align:center;
	font-size: 36px;
	padding: 20px;
}
.color-op #c1{
	background:#D4C9BD;
	color:#877360;
}
.color-op #c2{
	background:#b3b3b3;
	color:#000000;
}
.color-op #c3{
	background:#464647;
	color:#ffffff;
}
.color-op #c4{
	background:#000000;
	color:#ffffff;
}
.color-op h4{
	font-size: 28px;
	text-align: center;
	margin-bottom: 50px;
	margin-top: 50px;
	padding-top:30px;
	top:-20px;
}
.color-op h4:before{
	content:'';
	display:block;
	width: 50px;
	height:3px;
	background:#000000;
	left:50%;
	position:absolute;
	transform:translate(-50%);
	top:10px;
}
#product-tit2{
	font-size: 40px;
	margin-top: 30px;
	width:100%;
	margin-bottom: 40px;
}
#contat-tit{
	text-align: center;
	padding-top:100px;
	font-size:36px;x
}
.contact-im-bg{
	display:flex;
	background:#2d3e7a;
	margin-top: 50px;
	padding: 0px 200px;
}
.contact-map{
	width: 50%;
}
.contact-map iframe{
	width: 100%;
	height: 100%;
	outline: 10px solid #ddddddaa;
}
.map-info{
	padding: 50px 0px;
	width: 50%;
	color:#fff;
}
.map-info > ul{
	margin-bottom: 20px;
}
.map-info img{
	vertical-align:middle;
}
.map-info a{
	color:#fff;
}
.map-info ul li.t{
	font-size: 24px;
	text-align:left;
	margin-left: 20px;
}
.map-info ul li.c {
	margin-left: 70px;
}
.map-info ul li.c ul{
	display:flex;
	
}
.map-info ul li.c ul li{
	line-height: 30px;
}
.map-info ul li.c ul li.a{
	width: 20%;
}
.map-info ul li.c ul li.b{
	width: 80%;
}
#daumRoughmapContainer1762144057339{
	width:100%;
	height:100%;
}
.qr-code{
	position:absolute;
	right:0;
	bottom:0;
	width: 350px;
	margin-right: 40px;
	margin-bottom: 40px;
}
.qr-code ul{
	display:flex;
	width: 100%;
	gap:3%;
	
}
.qr-code ul li{
	width: 33.3%;
	text-align:center;
	color:#2d3e7a;
	font-weight: 600;
	
}
#jojik-tit{
	text-align:center;
	width: 100%;
	margin-top: 100px;
}
#jk-img{
	width: 100%;
	height: 800px;
	background:url(images/index04-1.png)no-repeat;
	background-position: center;
	background-size:contain;
}
@media (max-width: 1920px){
	.perform-list2 > ul{
		width:100%;
	}
	.perform-list2 > ul > li{
		padding: 0 10%;
	}
	.info-pr ul{
		width:80%;
	}
	#thk p,
	#thk-tit{
		margin-left: 240px;
	}
	#index02-pic1{
	    position: absolute;
	    right:200px;
	    top: 200px;
	    width: 300px;
	    height: 400px;
	    background:url(images/index02.png) no-repeat;
    }
    #index02-pic2{
    	position: absolute;
    	right:400px;
    	top: 300px;
    	width: 300px;
    	height: 400px;
    	background:url(images/index02-1.png) no-repeat;
    }
}
@media (max-width: 1440px){
	#thk p, #thk-tit{
		margin-left: 100px;
	}
	#index02-pic1{
		right:100px;
	}
	#index02-pic2{
		right:300px;
	}
	.perform-list{
		padding-left:100px;
	}
	.lst-sub,
	.lst-pic{
		width:50%;
	}
	#index10{
		height: 800px;
	}
	.perform-list2 > ul > li{
		padding: 0 40px;
	}
	.imo-list ul li{
		padding: 0 2%;
	}
	.imo-list ul li img{
		width: 100%;
	}
}
@media (max-width: 1200px){
	#thk p{
		font-size: 18px;
	}
	#index02-pic1{
		width: 240px;
	}
	#index02-pic2{
		width: 240px;
		right:300px;
	}
	#index13{
		height: auto;
		max-height: unset;
	}
	.color-op ul li{
		font-size: 20px;
	}
	#index14,#index15{
		height:auto;
		max-height:unset;
		padding-bottom: 50px;
	
	}
	#index12{
		height: auto;
		max-height:unset;
		padding-bottom: 50px;
	}
	#product-tit2{
		font-size: 24px;
	}
	.contact-im-bg{
		display:block;
	}
	.contact-map{
		width:100%;
		height: 400px;
	}
	#index16,#index09{
		height: auto;
		max-height: unset;
	}
	.contact-im-bg{
		padding: 0 10%;
	}
	header .menu ul li{
		font-size: 16px;
		margin: 0 5px;
	}
}

@media (max-width:1024px){
	#mobile-button{
		width: 30px;
		height:30px;
		background:url(images/mobile-menu.svg) no-repeat;
		background-size: contain;
		right:30px;
		top: 20px;
		position:absolute;
	}
	header .menu{
		display:none;
	}
	.map-info > ul{
		float:left;
		width:50%;
	}
	.map-info{
		position:relative;
		overflow:hidden;
		width: 100%;
		margin-bottom: 200px;
	}
	#thk p{
		font-size: 18px;
	}
	#index02-pic1{
		position:relative;
		width:50%;
		top:0;
		right:unset;
		left:0;
		background-size: cover;
	}
	#index02-pic2{
		position:absolute;
		width:50%;
		bottom:200px;
		right:0;
		background-size: cover;
		top:unset;
	}
	#index02{
		height:auto;
		max-height:unset;
	}
	.index02-bottom-bg{
		position:relative;
		height: 200px;
		padding-top: 50px;
	}
	.index02-bottom-bg p{
		font-size: 24px;
		margin-top: 15px
	}
	.index02-bottom-bg hr{
		
		margin-top:0;
	}
	.titmk{
		width:200px;
		height: 70px;
		line-height: 70px;
		font-size: 36px;
	}
	#info-tit{
		margin-left:0;
		width:100%;
		margin-top: -150px;
		margin-bottom: 100px;
	}
	#index03-table,
	#index03:before{
		width:600px;
	}
	#index03-table{
		padding:40px;
	}
	.titlen h3{
		font-size:50px;
		line-height: 60px;
	}
	.titlen h5{
		font-size: 24px;
	}
	.index01-bg2{
		height:20%;
		padding:20px 0px;
	}
	#index01,#index08,#index07{
		height: auto;
		max-height:unset;
	}
	.index01-bg{
		padding-bottom: 100px;
	}
	#logo{
		left:40px;
		top:0;
		width:200px;
		height: 50px;
		background-size: contain;
 
	}
	.titlen{
		margin-left: 40px;
	}
	#jk-img{
		height: 500px;
		background-position: center;
		background-size:contain;
	}
	.history-cont{
		width:100%;
		position:relative;
	}
	#index06{
		max-height:unset;
		height:auto;
	}
	#product-cont{
		display:block;
		widt
	}
	.product-thumb{
		width:100%;
	}
	.product-cm{
		width:100%;
	}
	#thumb-img{
		width:100%;
		text-align:center;
	}
	#thumb-img img{
		width:100%;
	}
	.product-cm p{
		font-size:22px;
	}
	.orders-form{
		display:block;
		position:relative;
	}
	.orders-sub{
		width:100%;
		margin-top: 50px;
		
	}
	.orders-sub h5{
		font-size: 28px;
	}
	#orders-tit1,#orders-tit2{
		width:100%;
		margin-top:60px;
	}
	#index08 .orders-form{
		top:0;
	}
	.orders-cont{
		width:95%;
		margin-top:30px;
		margin-left: 30px;
		font-size:16px;
	}
	.orders-cont > ul li{
		font-size:18px;
	}
	#index08 .orders-cont{
		margin-left: 30px;
		margin-top:30px;
	}
	.proceess-list .thmb{
		width:100px;
		height: 100px;
	}
	.proceess-list .thmb img{
		width: 100px;
		height:auto;
	}
	.perform-list2 > ul > li{
		padding: 0 50px;
	}
	#process-tit, #perfom-tit{
		width:100%;
		margin:0;
		margin-top:50px;
	}
	.perform-list{
		display:block;
		padding:0 20px;
		position:relative;
		bottom:0;
		padding-top: 100px;
	}
	.lst-sub,
	.lst-pic{
		width:100%;
	}
	.lst-pic{
		height: 300px;
	}
	.thmb-fm img{
		height: 140%;
		width: auto;
	}
	.lst-sub h4,.om3-sub h4{
		font-size: 24px;
	}
	.lst-sub p,.om3-sub p{
		font-size: 18px;
	}
	.product-thumb h5, .info-pr ul li h5{
		font-size: 24px;
	}
	.ind-sub{
		font-size: 18px;
	}
	
	#index03-table{
		position:relative;
	}
	.om3-thumb,
	.ind-th{
		height: 200px;
	}
}
@media (max-width:768px){
	#jk-img{
		background:url(images/index04-1-m.png)no-repeat;
		height: 1000px;
		width: 80%;
		margin: 0 auto;
		background-size:contain;
	}
	.perform-list2 > ul > li{
		padding:0 2%;
	}
	orders-cont  li.s{
	    width: 20%;	
		text-align:center;
    }
	#thk p, #thk-tit{
		margin-left: 30px;
	}
	#index03-table ul li{
		font-size:20px;
	}
	.history-cont .t{
		font-size:30px;
	}
	.history-cont .c{
		font-size: 18px;
	}
	.product-cm{
		padding-left:0;
	}
	.product-cm p{
		font-size:18px;
	}
	.orders-cont .bst > ul{
		width:100%;
	}
	.orders-cont > ul li.n{
	    width: 15%;
		
    }
	.orders-cont > ul li.n li{
		margin-top:20px;
		margin-left:-20px;
	}
	.om3-sub h4{
		font-size: 24px;
	}
	#imo-tit, #imo-tit2{
		margin:0;
		width:100%;
		margin-top: 30px;
	}
	
	.lst-sub{
		width:100%;
	}
	.lst-sub h4{
		font-size:24px;
	}
	.lst-sub p{
		font-size: 16px;
	}
	#index10,#index11{
		height:auto;
		max-height:unset
	}
	.proceess-list ul.reverse{
		flex-direction:row;
	}
	.proceess-list ul.reverse li:before{
		content:'';
	position:absolute;
		left:unset;
	right:-40px;
	width: 80px;
	height: 60px;
	background:url(images/prce-arrow.png) no-repeat;
	top: 25%;
		transform:rotate(0deg)
	}
	.proceess-list ul li:last-child:before,
	.proceess-list ul.reverse li:last-child:before{
		display: none;
	}
	.proceess-list ul li:nth-child(2n):before{
		display:none;
	}
	.proceess-list ul{
		flex-wrap:wrap;
	}
	.proceess-list ul li{
		width:50%;
	}
	header{
		height:60px;
	}
	#index01{
		padding-top: 60px;
	}
	#mobile-button{
		top:15px;
		right: 20px;
	}
	header .logo{
		left:15px;
	}
	header .logo a{
		width: 150px;
		height:30px;
		margin:0;
	}
}
@media (max-width:600px){
	.lst-pic{
		height: 250px;
	}
	.color-op ul{
		flex-wrap:wrap;
		gap:5%;
		margin-bottom: 50px;
	}
	.color-op ul li{
		width: 47.5%;
		font-size: 18px;
		margin-top: 20px;
	}
	.color-op h4{
		font-size:20px;
		margin-bottom: 20px;
	}
	.perform-list2 > ul > li{
		padding: 0 10px;
	}
	.perform-list2 > ul{
		padding: 0 10px;
		margin-top:50px;
	}
	.om3-sub h4{
		font-size: 20px;
	}
	.om3-sub p{
		font-size: 16px;
		margin-top:10px;
	}
	.perform-list2{
		margin-bottom: 100px;
	}
	#index11:before{
		height: 200px;
	}
	.product-thumb h5, .info-pr ul li h5{
		padding-left:3%;
		padding-right: 15%;
	}
	.ind-sub h6{
		font-size: 24px;
	}
	.ind-sub p{
		font-size: 16px;
	}
	.map-info ul li.t{
		margin-left:0;
	}
	.map-info > ul{
		width: 100%;
	}
	.map-info ul li.c{
		margin-left:50px;
	}
	.contact-im-bg{
		padding: 0 20px;
	}
	.map-info ul li.c{
		font-size:14px;
	}
	.map-info ul li.c ul li.b{
		line-height: 24px;
		margin-bottom: 20px;
	}
	.qr-code{
		width: 100%;
		margin-right:0;
		padding: 0 140px;
		
	}
	.qr-code ul li img{
		width: 100%;
	}
	.qr-code ul li p{
		font-size: 14px;
	}
	#contat-tit{
		font-size:24px;
		margin-top: 0px;
		padding-top: 30px;
	}
	#index03-table, #index03:before{
		width: 90%;
		height: 350px;
		padding: 10px;
		margin-top:200px;
	}
 
	#index03-table ul li{
		font-size: 16px;
		height: 40px; 
		line-height: 40px;
	}
	#index03{
		height: 600px;
		
	}
	#index03-table{
		margin-top:50px;
	}
	#index-01-side{
		right:-40px;
		width: 200px;
	}
	#index04{
		height:auto;
		max-height:unset;
	}
}

@media (max-width:480px){
	.lst-pic{
		height: 200px;
	}
	#jk-img{
		background:url(images/index04-1-m.png)no-repeat;
		height: 500px;
		width: 90%;
		margin: 0 auto;
		background-size:contain;
		background-position:center;
	}
	.history-cont .c{
		font-size: 16px;
	}
	.titlen h5{
		font-size: 18px;
	}
	.titlen h3{
		font-size: 32px;
		line-height: 42px;
	}
	#logo{
		width: 150px;
	}
		.qr-code{
			padding: 0 40px;
		}
	.imo-list ul{
		display:block;
		padding: 0 40px;
	}
	.imo-list ul li{
		width:100%;
	}
	.product-cm p,
	#thk p{
		font-size: 16px;
	}
	#product-tit2{
		font-size: 24px;
	}
	.om3-sub h4{
		font-size: 18px;
	}
	.titmk{
		font-size: 24px;
	}
	.info-pr ul{
		width:100%;
		display:block;
		padding: 0 30px;
		margin-bottom: 50px;
	}
		.info-pr ul li{
			width:100%;
			margin-bottom :50px;
		}
	    .orders-cont .bst > ul{
	    	display:block;
	    	margin-top: 20px;
	    }
		.orders-cont .bst > ul li br{
			display:none;
		}
		.orders-cont .bst > ul li{
			width:100%;
			text-align:left;
		}
	.orders-cont li.s{
		font-size:16px;
		opacity:0.7;
	}
	.orders-cont li.a{
		font-size: 16px;
		opacity:0.7;
	}
	.orders-cont li.b{
		margin-bottom: 4px;
	}
	.perform-list{
		margin-bottom: 50px;
	}
	.proceess-list ul li p{
		font-size:18px;
		margin-top:10px;
	}
	.proceess-list ul li{
		margin-bottom: 40px;
	}
	.proceess-list ul li:before,
	.proceess-list ul.reverse li:before{
		width: 50px;
		height:30px;
		right:-30px;
		background-size:contain;
	}
}