@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500&family=Open+Sans:wght@400;600&display=swap');

html{
	scroll-behavior:smooth;
}

body{
	font-family:'Noto Sans TC','微軟正黑體',sans-serif;
	font-size:16px;
	color:#333333;
	-webkit-text-size-adjust:none;
	image-rendering:-webkit-optimize-contrast;
}

.webout{
	max-width:2000px;
	margin:0 auto;
	position:relative;
}

article{
	overflow:hidden;
}

.out{
	max-width:1280px;
	padding:0 20px;
	margin:0 auto;
	position:relative;
}

input, select{
	font-family:'Noto Sans TC','微軟正黑體',sans-serif;
}

/*HOME-----------------------------------------*/

/*HOME_S1-----------------*/
.home .s1{
	position:relative;
	height:780px;
	background:url("../images/home_s1_bn.jpg") top center no-repeat;
}

.home .s1:after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:92px;
	background:url("../images/home_s1_bm.png") center no-repeat;
}

.home .s1 .out img{
	position:absolute;
}

.home .s1 .light1{
	top:71px;
	left:50%;
	margin-left:-708px;
	animation:fadeIn2 5s 1.5s infinite both;
}

.home .s1 .light2{
	top:81px;
	left:50%;
	margin-left:-527px;
	z-index:1;
	animation:fadeIn2 6s 1s infinite both;
}

.home .s1 .light3{
	top:-130px;
	left:50%;
	margin-left:-298px;
	animation:fadeIn3 7s 0.5s infinite both;
}

.home .s1 .light4{
	top:-27px;
	left:50%;
	margin-left:-218px;
	animation:fadeIn2 8s infinite both;
}

.home .s1 ul{
	position:absolute;
	top:135px;
	right:155px;
	width:584px;
	background:url("../images/home_s1_line.png") 0 45px no-repeat;
	background-size:584px auto;
	color:#FFFFFF;
}

.home .s1 li:nth-child(1){
	font-size:23px;
	letter-spacing:1px;
}

.home .s1 li:nth-child(2){
	font-size:45px;
	margin-top:50px;
}

.home .s1 .image{
	position:absolute;
	top:230px;
	right:0;
	width:732px;
	height:413px;
}

.home .s1 .image img{
	width:277px;
}

.home .s1 .img1{
	top:72px;
	left:20px;
	z-index:2;
}

.home .s1 .img2{
	top:148px;
	left:190px;
	z-index:1;
}

.home .s1 .image .img3{
	top:71px;
	left:329px;
	width:259px;
}

.home .s1 .img4{
	top:3px;
	left:475px;
	z-index:3;
}

.home .s1 .image .line2{
	width:62px;
	top:107px;
	left:233px;
}

.home .s1 .image .line3{
	width:68px;
	top:271px;
	left:540px;
}

.home .s1 .mb{
	display:none;
}

@keyframes fadeIn2{
	0%,20%,100%{
		opacity:0;
	}
	10%,80%{
		opacity:0.3;
	}
}

@keyframes fadeIn3{
	0%,20%,100%{
		opacity:0;
	}
	10%,80%{
		opacity:0.6;
	}
}

/*HOME_S2-----------------*/
.home .s2{
	background:url("../images/home_s2_bg.png") top 80px center no-repeat;
	padding:80px 0;
}

.home .s2 h6{;
	font-size:36px;
	color:#212121;
	font-weight:normal;
	text-align:center;
}

.home .s2 h6 div{
	position:relative;
	font-size:16px;
	color:#2B66B8;
	padding:15px 0;
}

.home .s2 h6 div:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	width:66px;
	height:1px;
	background:#82ADE1;
	margin-left:-33px;
}

.home .s2 ul{
	display:flex;
	flex-wrap:wrap;
    display:grid;
    justify-content:center;
    grid-template-columns:repeat(auto-fit,minmax(260px,auto));
	margin:45px -17px 0;
}

.home .s2 li{
	max-width:260px;
	margin-bottom:34px;
}

.home .s2 li a{
	position:relative;
	top:0px;
	display:block;
	margin:0 17px;
	outline:#CCCCCC 1px solid;
	transition:0.2s;
}

.home .s2 li:hover a{
	top:-5px;
	outline:#78A4DE 1px solid;
	box-shadow:0 0 5px rgba(153,153,153,0.5);
}

.home .s2 li img{
	width:100%;
	transition:0.2s;
}

.home .s2 li a:hover img{
	opacity:0.85;
}

@media only screen and (max-width:550px){
    .home .s2 ul{
        display:flex;
		justify-content:flex-start;
		margin:45px -10px 0;
    }
	
    .home .s2 li a{
        margin:0 10px;
    }

    .home .s2 li{
		width:50%;
        margin-bottom:20px;
    }
}

/*HOME_S3-----------------*/
.home .s3 .out,
.home .s4 .out{
	max-width:1100px;
}

.home .s3 .out{
	height:586px;
}

.home .s3 .text{
	position:relative;
	z-index:1;
	max-width:495px;
	margin-left:auto;
}

.home .s3 img{
	position:absolute;
	top:0;
	left:50%;
	margin-left:-1000px;
}

.home .s3 h6,
.home .s4 h6{
	font-size:38px;
	font-weight:normal;
	line-height:1.2em;
}

.home .s3 h6{
	padding-top:75px;
}

.home .s3 h6 span,
.home .s4 h6 span{
	position:relative;
	display:block;
	font-size:16px;
	color:#2B67B8;
	line-height:1.3em;
	margin-top:1em;
}

.home .s3 h6 span:after,
.home .s4 h6 span:after{
	content:"";
	position:absolute;
	width:67px;
	height:1px;
	background:#82ADE1;
}

.home .s3 h6 span:after{
	top:50%;
	left:80px;
}

.home .s4 h6 span:after{
	top:50%;
	left:185px;
}

.home .s3 p,
.home .s4 p{
	font-size:17px;
	line-height:1.8em;
	margin:40px 0;
}

/*HOME_S4-----------------*/
.home .s4{
	background:url("../images/home_s4_bg.png") top 150px center no-repeat;
	padding:75px 0;
}

.home .s4 .out{
	height:600px;
}

.home .s4 h6{
	padding-top:140px;
}

.home .s4 img{
	position:absolute;
	top:0;
	right:50%;
	margin-right:-1000px;
}

/*ABOUT-----------------------------------------*/
.about .banner{
	background-image:url("../images/about_bn.jpg");
}

.about .banner h2{
	color:#222222;
}

.about .banner h2 div{
	color:#005FB8;
}

.about .banner h2 div:before,
.about .banner h2 div:after{
	background:#005FB8;
}

.about .area{
	background:#FFFFFF;
}

/*ABOUT_S1-----------------*/
.about .s1{
	margin:90px 0;
}

.about .s1 .out{
	max-width:1140px;
	height:532px;
}

.about .s1 img{
	position:absolute;
	top:0;
	left:50%;
	margin-left:-1000px;
}

.about .s1 .text{
	position:relative;
	z-index:1;
	max-width:550px;
	margin-left:auto;
}

.about .s1 h6{
	font-size:26px;
	font-weight:500;
	padding:30px 0 50px;
}

.about .s1 p{
	font-size:17px;
	line-height:1.8em;
	text-shadow:0 0 3px #FFFFFF;
}

/*ABOUT_S23-----------------*/
.about .s2{
	margin-bottom:45px;
}

.about .s2 .out,
.about .s3 .out{
	display:flex;
	align-items:center;
	max-width:1245px;
	background-position:top center;
	background-repeat:no-repeat;
	z-index:1;
}

.about .s2 .out{
	height:375px;
	background-image:url("../images/about_s2.jpg");
}

.about .s3 .out{
	height:296px;
	background-image:url("../images/about_s3.jpg");
}

.about .s3 .bookmark{
	position:absolute;
	top:-100px;
}

.about .s4 .bookmark{
	position:absolute;
	top:525px;
}

.about .s2 .text,
.about .s3 .text{
	width:100%;
	max-width:1050px;
	margin:0 auto;
	color:#EDEDED;
}

.about .s2 h6,
.about .s3 h6{
	font-size:26px;
	font-weight:500;
	margin-bottom:40px;
}

.about .s2 ul{
	margin-left:0.8em;
}

.about .s2 li{
	margin-bottom:0.5em;
}

.about .s2 li,
.about .s3 p{
	font-size:17px;
	line-height:1.8em;
}

.about .s2 li:last-child{
	margin-bottom:0;
}

.about .s2 li::marker{
	content:"•";
	font-weight:bold;
}

.about .s3 p{
	max-width:750px;
}

.about .s2 img,
.about .s3 img,
.about .s4 img{
	display:none;
}

/*ABOUT_S4-----------------*/
.about .s4{
	background:url("../images/about_s4.jpg") top center no-repeat;
	height:1150px;
	margin-top:-525px;
}

.about .s4 .out{
	max-width:1050px;
}

.about .s4 .text{
	max-width:300px;
	padding-top:690px;
}

.about .s4 h6{
	position:relative;
	font-size:26px;
	font-weight:500;
	padding-bottom:20px;
}

.about .s4 h6:after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:2px;
	background:#BBBBBB;
	border-left:#0059B2 53px solid;
}

.about .s4 p{
	font-size:17px;
	line-height:1.8em;
	margin-top:20px;
}

/*PRODUCT-----------------------------------------*/
.product .banner{
	background-image:url("../images/product_bn.jpg");
}

/*PRODUCT_S2-----------------*/
.product .s2{
	padding:90px 0 20px;
}

.product .s2 .logo{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

.product .s2 .list{
	width:48%;
	margin-bottom:70px;
}

.product .s2 a{
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.product .s2 img{
	width:40%;
	outline:#DDDDDD 1px solid;
	transition:0.2s;
}

.product .s2 a:hover img{
	opacity:0.85;
	outline:#78A4DE 1px solid;
	box-shadow:0 0 5px rgba(153,153,153,0.5);
}

.product .s2 .list ul{
	width:56%;
}

.product .s2 .list li{
	font-size:17px;
	color:#003366;
	line-height:1.3em;
	padding-bottom:10px;
}

.product .s2 .list li:first-child{
	font-size:20px;
}

.product .s2 .list li:last-child{
	color:#333333;
	padding-bottom:0;
}

/*NEWS-----------------------------------------*/
.news .banner{
	background-image:url("../images/news_bn.jpg");
}

/*NEWS_LIST-----------------*/
.news .list ul{
	display:flex;
	flex-wrap:wrap;
	margin:0 -17px;
}

.news .list li{
	width:25%;
	margin-top:100px;
}

.news .list a{
	position:relative;
	top:0;
	display:block;
	color:#212121;
	margin:0 17px;
	border-style:solid;
	border-width:0 0 4px;
	border-color:#FFFFFF;
	padding-bottom:25px;
	transition:0.2s;
}

.news .list a:hover{
	top:-20px;
	border-color:#2E74C9;
}

.news .list .image{
	position:relative;
	padding-bottom:75%;
	border-radius:10px;
	overflow:hidden;
}

.news .list .image img{
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	max-width:100%;
	max-height:100%;
	transform:translate(-50%,-50%);
}

.news .list .text{
	line-height:1.5em;
	height:3em;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
	transition:0.2s;
}

.news .list a:hover .text{
	color:#2660A7;
}

.news .list .date{
	font-size:13px;
	padding:1.5em 0 1em;
}

/*NEWS_S1-----------------*/
.news .s1{
	padding:80px 0;
}

.news .s1 .out{
	max-width:900px;
}

.news .s1 h1{
	font-size:24px;
	color:#2660A7;
	font-weight:normal;
	line-height:1.3em;
}

.news .s1 .date{
	position:relative;
	font-size:17px;
	color:#212121;
	padding:1em 0 1.4em;
}

.news .s1 .date:after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:2px;
	background:#CCCCCC;
	border-left:#2761A8 105px solid;
}

.news .s1 .text{
	padding:50px 0;
	font-size:17px;
	line-height:1.8em;
}

.news .s1 .text img{
	max-width:100%;
	height:auto !important;
}

.news .s1 .back{
	position:relative;
	display:block;
	width:180px;
	padding:1em 0;
	border:#D6D6D6 1px solid;
	color:#212121;
	text-align:center;
	border-radius:30px;
	transition:0.2s;
}

.news .s1 .back:hover{
	width:190px;
}

.news .s1 .back:after{
	content:"";
	position:absolute;
	top:50%;
	left:20px;
	border-style:solid;
	border-width: 3px 6px 3px 0;
	border-color:transparent #457AC1 transparent transparent;
	margin-top:-3px;
}

/*CONTACT-----------------------------------------*/
.contact .banner{
	background-image:url("../images/contact_bn.jpg");
}

/*CONTACT_S1-----------------*/
.contact .s1{
	padding:50px 0 30px;
}

.contact .s1 .out{
	max-width:1000px;
}

.contact .s1 .top{
	font-size:18px;
	line-height:1.5em;
	font-weight:500;
	text-align:center;
	margin-bottom:50px;
}

.contact .s1 .top img{
	width:90px;
	vertical-align:middle;
	margin-right:20px;
}

.contact .s1 .list{
	margin-bottom:70px;
}

.contact .s1 h6{
	font-size:22px;
	font-weight:500;
}

.contact .s1 h6 div{
	position:relative;
	font-size:17px;
	padding:15px 0;
	margin-bottom:20px;
}

.contact .s1 h6 div:after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:1px;
	background:#D6D6D6;
	border-left:#005FB8 86px solid;
}

.contact .s1 .list li{
	font-size:17px;
	line-height:1.8em;
}

.contact .s1 .add{
	text-indent:-4.7em;
	padding-left:4.7em;
}

.contact .s1 .add br{
	display:none;
}

/*COMMON--------------------------------------------------------------------*/

/*HEADER-----------------------------------------*/
header{
	position:sticky;
	top:0;
	left:0;
	z-index:1000;
	background:#FFFFFF;
	box-shadow:0px 2px 2px rgba(0,0,0,0.1);
}

header .logo{
	position:absolute;
	top:50%;
	left:20px;
	z-index:1;
	transform:translateY(-50%);
	display:block;
	width:60%;
	max-width:296px;
	transition:0.2s;
}

header.active .logo{
	max-width:250px;
}

header .logo img{
	width:100%;
}

header .pc .menu{
	display:flex;
	justify-content:flex-end;
	padding-top:30px;
	transition:0.2s;
}

header.active .pc .menu{
	padding-top:20px;
}

header .pc .menu ul{
	position:absolute;
}

header .pc .list{
	position:relative;
	margin-left:3em;
}

header .pc .list > a,
header .pc .list div{
	display:block;
	font-size:18px;
	color:#333333;
	text-align:center;
	cursor:pointer;
	padding-bottom:30px;
	transition:0.2s;
}

header.active .pc .list > a,
header.active .pc .list div{
	padding-bottom:20px;
}

header .list span{
	display:block;
	font-size:13px;
	color:#999999;
	padding-top:10px;
	transition:0.2s;
}

header .pc .list:hover > a,
header .pc .list:hover div,
header .pc .list:hover span{
	color:#005FB8;
}

header .pc .list div:after,
header .pc .list > a:after{
	content:"";
	position:absolute;
	bottom:1px;
	left:50%;
	width:0;
	height:2px;
	background:#0F6BAC;
	transform:translateX(-50%);
	transition:0.2s;
}

header .pc .list:hover div:after,
header .pc .list:hover > a:after{
	width:100%;
}

header .pc .list ul{
	position:absolute;
	left:50%;
	text-align:left;
	background:#EEEEEE;
	padding:30px;
	width:325px;
	transform:translateX(-50%) scaleY(0);
	transform-origin:top;
	transition:0.2s;
}

header .pc .list:hover ul{
	transform:translateX(-50%) scaleY(1);
}

header .pc .list ul a{
	white-space:nowrap;
	display:block;
	color:#212121;
	padding:0.7em 0;
	transition:0.2s;
}

header .pc .list ul a img{
	position:absolute;
	top:30px;
	right:30px;
	width:200px;
	outline:#E8E8E8 1px solid;
}

header .pc .list li:first-child a img{
	z-index:1;
}

header .pc .list ul a:hover img{
	z-index:2;
}

header .pc .list ul a:hover{
	color:#005FB8;
}

header .mb,
header .mb img,
header .mb_bt{
	display:none;
}

/*BANNER-----------------------------------------*/
.banner{
	display:flex;
	justify-content:center;
	align-items:center;
	height:297px;
	background-position:top center;
	background-repeat:no-repeat;
	background-size:cover;
}

.banner h2{
	font-size:32px;
	color:#FFFFFF;
	font-weight:500;
	width:5em;
	text-align:center;
}

.banner h2 div{
	display:inline-block;
	position:relative;
	font-size:16px;
	letter-spacing:1px;
	margin-top:1em;
}

.banner h2 div:before,
.banner h2 div:after{
	content:"";
	position:absolute;
	top:50%;
	width:44px;
	height:1px;
	background:#CCCCCC;
}

.banner h2 div:before{
	left:-60px;
}

.banner h2 div:after{
	right:-60px;
}

/*AREA-----------------------------------------*/
.area{
	background:#EEEEEE;
}

.area ul{
	display:flex;
}

.area li{
	color:#777777;
	padding:1em 0;
}

.area li:after{
	content:">";
	padding:0 0.5em;
}

.area li:last-child:after{
	display:none;
}

/*PAGE_NUMBER-----------------------------------------*/
.page_number{
	font-family:Arial;
	color:#666666;
	text-align:center;
	padding:70px 0;
}

.page_number ul{
	display:inline-block;
	text-align:center;
	margin:0px auto;
	background:#FFFFFF;
	overflow:hidden;
}

.page_number li{
	display:inline-block;
}

.page_number li select{
	cursor:pointer;
	padding:0px 5px;
}

.page_number li.page_select{
	padding:0px 20px 0 10px;
	position:relative;
}

.page_number li.page_select .select_box{
	display:inline-block;
	position:relative;
}

.page_number li.page_select .select_box:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:0;
	border-style:solid;
	border-width:6px 3px 0 3px;
	border-color:#148AC7 transparent transparent transparent;
	transform:translateX(-50%);
	margin-left:1px;
	transition:0.2s;
}

.page_number a{
	display:inline-block;
	width:40px;
	height:40px;
	background:#AAAAAA;
	vertical-align:middle;
	position:relative;
	border-radius:50%;
	transition:0.2s;
}

.page_number a:hover{
	background:#2762AA;
}

.page_number li a:after{
	content:"";
	position:absolute;
	top:50%;
	border-style:solid;
	border-color:#FFFFFF;
	border-width:0px 2px 2px 0px;
	padding:4px;
	margin-top:-5px;
}

.page_number li.page_prev a:after{
	right:13px;
	transform:rotate(135deg);
}

.page_number li.page_next a:after{
	left:13px;
	transform:rotate(-45deg);
}

.page_number li select{
	border:none;
	font-family:Arial;
	font-size:24px;
	color:#333333;
	font-weight:500;
	border-radius:5px;
	background:none;
	margin-bottom:5px;
	text-align-last:center;
	transition:0.2s;
}

.page_number li .select_box:hover select{
	color:#148AC7;
}

/*ANIMATION-----------------------------------------*/
.animated{
    animation-duration:1s;
    animation-fill-mode:both;
}

@keyframes fadeInUp40{
    0%{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

.fadeInUp40{
    animation-name:fadeInUp40;
}

/*PAGETOP-----------------------------------------*/
body a.pagetop{
	display:block;
	width:50px;
	height:50px;
	border-radius:50%;
	z-index:500;
	background:#16A6FD;
	opacity:0.8;
	position:relative;
	transition:opacity 0.2s;
}

body a.pagetop:hover{
	opacity:1 !important;
}

body a.pagetop:after{
	content:"";
	border:solid #FFFFFF;
	border-width:0px 2px 2px 0px;
	padding:6px;
	display:inline-block;
	position:absolute;
	top:55%;
	left:50%;
	transform:rotate(-135deg) translate(-50%,-50%);
	transform-origin:left top;
}

/*FOOTER-----------------------------------------*/
footer{
	background:#163355;
	padding:45px 0;
}

footer .out{
	display:flex;
	align-items:flex-start;
}

footer img{
	width:190px;
	margin:5px 45px 0 0;
}

footer ul{
	display:flex;
	flex-wrap:wrap;
	color:#FFFFFF;
}

footer li{
	margin-bottom:0.5em;
	line-height:1.5em;
}

footer li:nth-child(2):before,
footer li:nth-child(2):after{
	content:"•";
	padding:0 0.5em;
}

footer li:last-child{
	font-size:14px;
	color:#CCCCCC;
	margin:0;
}

footer a{
	display:inline-block;
	font-size:14px;
	color:#878787;
	line-height:1.7em;
}

@media only screen and (max-width:1050px) and (min-width:1001px){
	footer li{
		font-size:15px;
	}
}

/*MOBILE----------------------------------------------------------------------------*/
@media only screen and (max-width:1000px){
	/*HOME-----------------------------------------*/
	
	/*HOME_S1-----------------*/
    .home .s1{
        height:auto;
    }
	
	.home .s1 .out,
	.home .s1:after{
		display:none;
	}
	
    .home .s1 .mb{
        display:block;
		width:100%;
    }
	
	/*HOME_S3-----------------*/
    .home .s3 .out,
	.home .s4 .out{
        height:auto;
    }
	
    .home .s3 .text{
		max-width:none;
		margin:0 0 50px;
    }
	
    .home .s3 img{
		position:static;
		width:100%;
        margin-left:-20px;
    }
	
    .home .s3 h6{
        padding-top:0;
    }
	
	/*HOME_S4-----------------*/
    .home .s4 h6{
        padding-top:0;
    }
	
	.home .s4 .text{
		margin:0 0 50px;
    }
	
	.home .s4 .text p br{
		display:none;
	}
	
    .home .s4 img{
		position:relative;
		right:-20px;
		width:100%;
    }
	
	/*ABOUT-----------------------------------------*/
	
	/*ABOUT_S1-----------------*/
    .about .s1{
        margin:70px 0;
    }
	
    .about .s1 .out{
		height:auto;
    }
	
    .about .s1 img{
        position:static;
		width:100%;
        margin:50px 0 0 -40px;
    }
	
    .about .s1 .text{
        max-width:none;
        margin-left:0;
    }
	
    .about .s1 h6{
        padding:0 0 50px;
    }
	
	/*ABOUT_S23-----------------*/
    .about .s2{
        margin-bottom:70px;
    }
	
    .about .s3 .bookmark,
    .about .s4 .bookmark{
        position:absolute;
        top:-100px;
    }
	
    .about .s2 .out,
    .about .s3 .out{
        display:block;
        max-width:1245px;
    }
	
    .about .s2 .out,
	.about .s3 .out{
        height:auto;
        background-image:none;
    }

    .about .s2 .text,
    .about .s3 .text{
        color:#333333;
    }
	
    .about .s3 p{
        max-width:none;
    }
	
    .about .s2 img,
    .about .s3 img,
    .about .s4 img{
        display:block;
		width:100%;
		margin-top:30px;
    }
	
	/*ABOUT_S4-----------------*/
    .about .s4{
        background:none;
		height:auto;
        margin-top:50px;
    }
	
	.about .s4 .out{
		padding:0;
	}
	
    .about .s4 .text{
		position:relative;
        padding:20px 20px 0;
    }
	
	.about .s4 img{
		margin-top:-100px;
    }
	
	/*PRODUCT-----------------------------------------*/
	
    /*PRODUCT_S2-----------------*/
    .product .s2{
        padding:50px 0 0;
    }
	
    .product .s2 .logo{
        display:grid;
        justify-content:center;
		grid-template-columns:repeat(auto-fit,minmax(auto,390px));
		margin:0 -10px;
    }
	
    .product .s2 .list{
        width:100%;
        margin-bottom:50px;
    }
	
    .product .s2 a{
		margin:0 10px;
    }
	
    .product .s2 img{
        width:36%;
    }

    .product .s2 .list ul{
        width:60%;
    }
	
    .product .s2 .list li{
        font-size:12px;
		padding-bottom:5px;
    }
	
    .product .s2 .list li:first-child{
        font-size:14px;
    }
	
	/*NEWS-----------------------------------------*/
	
	/*NEWS_LIST-----------------*/
    .news .list ul{
        display:grid;
        justify-content:center;
        grid-template-columns:repeat(auto-fit,minmax(auto,300px));
    }
	
    .news .list li{
        width:auto;
        margin-top:50px;
    }
	
	/*NEWS_S1-----------------*/
    .news .s1{
        padding:50px 0;
    }
	
    .contact .s1 .top img{
		display:block;
        width:90px;
        margin:0 auto 20px;
    }
	
    .contact .s1 .add{
        text-indent:0;
        padding-left:0;
    }
	
	.contact .s1 .add br{
		display:block;
	}
	
    /*CONTACT-----------------------------------------*/

    /*CONTACT_S1-----------------*/
    .contact .s1{
        padding:50px 0 0;
    }
	
    .contact .s1 .top img{
		display:block;
        width:90px;
        margin:0 auto 20px;
    }
	
	/*COMMON--------------------------------------------------------------------*/
	
	/*HEADER-----------------------------------------*/
    header .out{
		height:60px;
    }
	
    header .logo,
	header.active .logo{
        max-width:200px;
    }
	
	header .pc{
		display:none;
	}
	
	/*HEADER_MB_BUTTON-----------------*/
	header .mb_bt,
    header .mb{
        display:block;
    }
	
	header .mb_bt{
		position:absolute;
		top:50%;
		right:20px;
		width:40px;
		height:40px;
		margin-top:-20px;
		text-align:left;
		cursor:pointer;
	}
	
	header .mb_bt span{
		height:2px;
		width:40px;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		margin:auto;
		background:#24527C;
		transition:0.3s;
		display:block;
	}
	
	header .mb_bt span:before,
	header .mb_bt span:after{
		content:"";
		height:2px;
		width:40px;
		position:absolute;
		right:0;
		background:#24527C;
		transition:0.3s;
	}
	
	header .mb_bt span:before{
		top:-8px;
	}
	
	header .mb_bt span:after{
		top:8px;
	}
	
	header .mb_bt.active span:before{
		top:0;
		transform:rotate(45deg);
	}
	
	header .mb_bt.active span:after{
		top:0;
		transform:rotate(-45deg);
	}
	
	header .mb_bt.active:hover span{
		transform:rotate(-90deg);
	}
	
	header .mb_bt.active span{
		background:none;
	}
	
	/*HEADER_MENU-----------------*/
	header .mb{
		position:fixed;
		top:60px;
		bottom:0;
		left:0;
		width:100%;
		overflow-y:auto;
		background:#F4F4F4;
		transform:translateX(100%);
		transition:0.3s ease-in-out;
		-webkit-overflow-scrolling:touch;
	}
	
	header .mb.active{
		transform:translateX(0);
	}
	
	header .mb .menu{
		padding:20px 40px 100px;
	}
	
	header .mb .list > a,
	header .mb .list div{
		display:block;
		font-size:20px;
		color:#333333;
		padding:1em 0;
		position:relative;
		cursor:pointer;
		transition:0.2s;
	}
	
	header .mb .list > a:before,
	header .mb .list div:before{
		content:"";
		position:absolute;
		left:0;
		bottom:0;
		width:100%;
		height:1px;
		background:#FFFFFF;
		border-top:#BBBBBB 1px solid;
	}
	
	header .mb .list > a:hover,
	header .mb .list div:hover{
		padding:1em 0 1em 1em;
	}
	
	header .mb .list div:after{
		content:"";
		position:absolute;
		top:50%;
		right:0;
		border-style:solid;
		border-width:8px 4px 0 4px;
		border-color:#2A567F transparent transparent transparent;
		margin-top:-4px;
	}
	
	header .mb .list div.active:after{
        border-width:0 4px 8px 4px;
        border-color:transparent transparent #2A567F transparent;
	}
	
	header .mb .list div + ul{
		display:none;
		padding-top:20px;
    }
	
	header .mb .list ul li a{
        display:block;
		font-size:18px;
        padding:0.5em 1em;
        color:#333333;
        transition:0.2s;
    }
	
	header .mb .list ul li a:hover{
		color:#24527B;
		padding:0.5em 1em 0.5em 1.5em;
    }
	
    /*BANNER-----------------------------------------*/
    .banner{
        height:150px;
    }
	
    .banner h2{
        font-size:28px;
    }
	
    /*PAGE_NUMBER-----------------------------------------*/
    .page_number{
        padding:50px 0;
    }
	
    /*FOOTER-----------------------------------------*/
    footer{
        padding:30px 0;
    }
	
    footer .out,
	footer ul{
        display:block;
		text-align:center;
    }

    footer img{
        margin:0 0 15px;
    }

    footer li:nth-child(2):before,
    footer li:nth-child(2):after{
		display:none;
    }

    footer a{
        margin-top:15px;
    }
	
	footer a br{
		display:none;
	}
}