@charset "utf-8";

/*===================
  chouj.com 2018.05
====================*/

body { font:14px/180% Helvetica, “Helvetica Neue”, Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:#333; overflow-x:hidden;}
.chouj_box{ width:1000px; margin:0 auto; position:relative;}
.clearfix:after{ visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.clearfix{ *zoom:1;}
.clear{ clear:both; display:block; height:0; overflow:hidden;}
.pc_none{ display:block!important;}
.sp_none{ display:none!important;}
.pc_innone{ display:inline!important;}
.sp_innone{ display:none!important;}
.fc01, .fc01 a{ color:#aecd09;}
*{ -webkit-tap-highlight-color:transparent; -webkit-appearance:none;} 


/*************** loader ***************/
#loader{ display:none; z-index:20000; position:fixed; top:50%; left:50%; margin:-65px 0 0 -60px; width:120px; height:90px;} 
#loader img{ width:120px; height:90px;} 
#fade{ display:none; z-index:19000; width:100%; height:100%; background-color:#fff; position:fixed; top:0px; left:0px;}


/*************** header ***************/
header{ width:100vw; height:130px; position:fixed; top:0; left:0; z-index:1000; background:url(../img/h_bg.jpg) 0 0;}
header nav{ position:fixed; width:100%; text-align:center; top:90px;}
header nav ul{font-size:0;}
header nav ul li{ font-size:14px; line-height:40px; display:inline-block; *display:inline; *zoom:1; vertical-align:top; padding:25px; z-index:99;}
header, header nav, .logo{
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.logo{ position:absolute; left:30px; top:10px;}
.logo img{ width:80px; height:68px; display:inline-block;}
.logo span{ padding:14px; line-height:140%; font-size:16px; letter-spacing:2px; color:#ccc; display:inline-block;}

.t_menu{ position:absolute; top:-90px; right:25px; font-size:0; text-align:right;}
.t_menu dd{ font-size:14px; line-height:40px; display:inline-block; *display:inline; *zoom:1; vertical-align:top; padding:25px; z-index:99;}
.t_menu dd a{ color:#ccc;}	
.t_menu dd a:hover{ color:#fff;}

.sub{ height:40px; text-align:center; background:#a54600;
	-webkit-box-shadow:0 3px 5px rgba(0, 0, 0, .3);  
	-moz-box-shadow:0 3px 5px rgba(0, 0, 0, .3);  
	-o-box-shadow:0 3px 5px rgba(0, 0, 0, .3);  
	box-shadow:0 3px 5px rgba(0, 0, 0, .3);}
.sub li{ padding:0; position:relative;}
.sub li a{ color:#eee; padding:0 25px; height:40px; display:block;}
/*.sub > li > a:first-child:nth-last-child(2):before{ content:""; position:absolute; border:4px solid transparent; border-bottom:0; border-top-color:currentColor; top:50%; margin-top:-2px; right:10px;}*/
.sub > li:hover > ul{ opacity:1; visibility:visible; margin:0;}
.sub > li:hover > a{ color:#fff; background:#773300;}

.sub_2 { width:195px; position:absolute; top:100%; left:0; z-index:1; text-align:left; opacity:0; visibility:hidden; margin:20px 0 0 0; background-color:rgba(60,25,0,0.80); transition:margin .15s, opacity .15s;}
.sub_2 li { width:100%; border-bottom:1px solid #3c2412;}
/*.sub_2 > li:first-child > a:after{ content:''; position:absolute; height:0; width:0; left:1em; top:-6px; border:6px solid transparent; border-top:0; border-bottom-color:inherit;}*/
.sub_2 li:last-child{ border:0;}
.sub_2 a:hover{ background-color:#773300; border-color:#773300; color:#fff;}

.cmenu_toggle{ display:none; cursor:pointer; background:none; border:0; outline:none; padding:18px; height:60px; width:60px; position:absolute; top:0; right:0;}
.cmenu_toggle:hover{ background-color:#111;}
.cmenu_toggle_bar{ display:block; width:24px; height:2px; background-color:#fff;
  -webkit-transition:  0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55); 
  -o-transition:  0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55); 
  transition:  0.15s cubic-bezier(0.75, -0.55, 0.25, 1.55);}
.cmenu_toggle_bar + .cmenu_toggle_bar{ margin-top:4px;}
.cmenu_toggle--active .cmenu_toggle_bar{ margin:0; position:absolute;}
.cmenu_toggle--active .cmenu_toggle_bar:nth-child(1){ -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.cmenu_toggle--active .cmenu_toggle_bar:nth-child(2){ opacity:0;}
.cmenu_toggle--active .cmenu_toggle_bar:nth-child(3){ -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}

.sub--open{ display:block !important;}
.sub--open .sub_2 { display: block;}

header.small{ height:40px;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
header.small nav{ margin:-90px 0 0 0;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
header.small nav ul li{ padding:0;}
header.small .logo{ opacity:0; filter:alpha(opacity=0); margin-top:-10px;
	-webkit-transform:scale(0.9);
	-moz-transform:scale(0.9);
	-o-transform:scale(0.9);
	transform:scale(0.9);}


/*************** banner ***************/
div#mainImg { position:fixed; z-index:11; left:0; top:40px;}
div#mainImg ul#mainImgSlide li{ position:relative;}
div#mainImg ul#mainImgSlide li img{ position:absolute;}
div#mainImg .img01{background:url(../img/main_01.jpg) center center no-repeat; background-size:cover;}
div#mainImg .img02{background:url(../img/main_02.jpg) center center no-repeat; background-size:cover;}
div#mainImg .img03{background:url(../img/main_03.jpg) center center no-repeat; background-size:cover;}
div#mainImg .img04{background:url(../img/main_04.jpg) center center no-repeat; background-size:cover;}
div#mainImg .img05{background:url(../img/main_05.jpg) center center no-repeat; background-size:cover;}

div#mainImgFooter{position:absolute;top:660px;left:0;width:100vw;height:40px;z-index:12;}
div#mainImgFooter div#mainImgNav{position:fixed;right:50%;width:260px;margin:0 -141px 0 0;text-align:center;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;justify-content:space-between}
div#mainImgFooter div#mainImgNav a{background:#ccc;display:block;width:30px;height:2px;border-radius:2px;text-align:center}
div#mainImgFooter div#mainImgNav a.active,div#mainImgFooter div#mainImgNav a:hover{background:#fff}			
		

/*************** article ***************/
article{ z-index:101;}
article h2{ height:140px; background:url(../img/title_k.png) center top no-repeat; background-size:230px 108px; text-align:center; font:30px/100% Helvetica, “Helvetica Neue”, Arial; text-transform:uppercase;}
article h2 span{ font-size:12px; font-weight:200; letter-spacing:1px; color:#777; font-family:Palatino, “Palatino Linotype”, “Palatino LT STD”, “Book Antiqua”, Georgia;}
article .tnt{ margin-bottom:20px;}

article#topArea { position:relative; z-index:0;}


/*************** product ***************/
#product{ padding:80px 0 30px; background:url(../img/p_bg.jpg) center center; background-attachment:fixed; position:relative;}
#product .p_inner{ width:80%; margin:30px auto; text-align:justify; text-justify:distribute-all-lines;}
#product .p_inner li{ width:18.6%; margin-bottom:1.2%; color:#888; text-align:center; display:inline-block; vertical-align:top; font-size:1em; line-height:180%; overflow:hidden; transition:all 0.4s;}
#product .p_inner .p_end{ display:inline-block; *display: inline; *zoom:1; width:100%; height:0; overflow:hidden;}
#product .p_inner li:hover{ background:#fff; -webkit-box-shadow:0px 0px 20px #ccc; -moz-box-shadow:0px 0px 20px #ccc; box-shadow:0px 0px 20px #ccc; transform:translate(0,-10px);}
#product .p_inner li .m_o img{ width:100%; height:100%; transition:all 0.4s;}
#product .p_inner li .m_o img:hover{transform:scale(1.1);}
#product .p_inner li .m_o{ background:#ddd; margin-bottom:8px; overflow:hidden;}
#product .p_inner li .more a{ color:#666; background:#fff; display: inline-block; padding:0.2em 2em; margin:10px 0 16px; border:solid 1px #ccc; border-radius:5px; transition:all 0.5s;}
#product .p_inner li .more a:hover{ color:#fff; background:#666; border:solid 1px #666;}

/*************** footer ***************/
footer{ width:100%; height:100px; color:#666; font-size:14px; line-height:200%; text-align:center; position:relative; z-index:101;}
footer h2{ font-size:1.4em; color:#723300; font-weight:bold; padding-bottom:10px;}
footer b{ font-weight:bold;}
footer .acs_info{ width:80%; padding:60px 10% 20px; text-align:left; background:#e2e2e2; line-height:160%;}
footer .f_list{ padding-left:30px; margin-bottom:40px; display:inline-block; vertical-align:top; color:#333; border-left:solid 1px #ccc;}
footer .l01{ width:18%; padding-right:4%;}
footer .l02{ width:25%; padding-right:4%;}
footer .l03{ width:39%;}
footer .l03 .t01{ background:url(../img/logo2.png) 0 4px no-repeat; background-size:105px 90px; padding-left:124px; margin-bottom:6px; float:left;}
footer .l03 .t02{ float:left;}
footer .l03 span a{ padding:0 8px; border:solid #a54600 1px;}
footer .l03 span a:hover{ border:solid #000 1px; color:#000;}

footer .fc{ font-size:12px; color:#999; background:#1a1a1a; line-height:400%;}
footer a{ color:#a54600;}
footer a:hover{ color:#000;}


/*************** common ***************/
#acs_p{ padding:190px 0 60px; background:url(../img/p_bg.jpg) center center; background-attachment:fixed; position:relative; z-index:100;}
.p_list{ width:80%; margin:0 auto; overflow:hidden;}
.p_list .t_t{ margin:10px 0 30px; font-size:1.2em; text-align:center;}
.p_list ul{ }
.p_list li{ width:12.5%; border:1px solid transparent; float:left; transition:all 0.4s;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}
.p_list li img{ width:100%; height:100%;}
.p_list li img:hover{ opacity:0.8; filter:alpha(opacity=80);}
.p_list li:hover{ background:#fff; transform:scale(0.96);}
.p4 li{ width:25%;}
.p6 li{ width:16.6%;}

.phl{ width:82%; margin:-0.8% auto 0; overflow:hidden;}
.phl .t_t{ margin:10px 0 30px; font-size:1.2em; text-align:center;}
.phl li{ width:18%; margin:0.8% 1%; color:#888; text-align:center; float:left; transition:all 0.4s;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
}
.phl li img{ width:100%; height:100%; margin-bottom:0.5em; transition:all 0.3s;}
.phl li img:hover{ -webkit-box-shadow:0px 0px 10px #666; -moz-box-shadow:0px 0px 10px #666; box-shadow:0px 0px 10px #666; transform:scale(1.04);}

.o_c{ width:1200px; margin:0 auto; overflow:hidden;}
.o_c.contact{ line-height:220%;}
.o_c .t_t{ margin:0 2%; font-size:1.2em; text-align:center;}
.o_c p{ padding:10px 0;}
.o_c h3{ font-size:1.6em; font-weight:300; line-height:200%;}
.o_c h4{ font-size:1.4em; font-weight:300; line-height:200%;}
.o_c span{ display:inline-block; padding:0 10px;}
.o_c ul{ padding:2% 0;}
.o_c li{ width:48%; padding:1%; float:left;}
.o_c li img{ width:100%; height:100%;}
.o_c a{ color:#333;}
.o_c a:hover{ color:#a54600;}

.p_box{ width:800px; margin:20px 0 0 20px;}
.p_box .p_l{ width:450px; margin-right:30px; float:left;}
.p_box .p_l img{ width:100%; height:100%;}
.p_box .p_r{ width:300px; float:left; font-size:1.2em;}
.p_box .p_r b{ font-weight:bold;}
.p_box .p_r p{ margin-bottom:0.8em;}

/* alpha */
.alpha {
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
.alpha:hover {
	opacity:0.6;
	filter:alpha(opacity=60);
}

/* fadeIn */
.fadeIn {
}

.fadeInUp {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/*************** Responsive ***************/
@media screen and (max-width:1280px) {
article h2{ height:110px; font-size:26px; background-size:204px 96px;}

#product{ padding:60px 0 30px;}
#product .p_inner{ width:90%; padding:0 2%; margin:30px auto 10px;}

.phl{ width:92%; margin:-1% auto 0;}
.phl li img{ margin-bottom:0.4em;}
.phl li{ width:22.6%; margin:1% 1.2%;}

.o_c{ width:98%;}

footer .acs_info{ width:94%; padding:50px 3% 10px;}
footer .f_list{ padding-left:20px;}
footer .l01{ width:22%; padding-right:1.5%;}
footer .l02{ width:27%; padding-right:1.5%;}
footer .l03{ width:37%;}

}

@media screen and (max-width:1000px) {
header{ position:relative; width:100%; height:60px; background:#222;}
header .logo{ left:3%; top:6px;}
header .logo img{ width:54px; height:auto;}
header .logo span{ padding:8px 14px; line-height:120%; font-size:14px;}
header nav{ position:relative; top:60px;}

.t_menu{ position:relative; top:0; right:0; text-align:left; background:#fff;}
.t_menu dd{ line-height:50px; width:100%; padding:0; line-height:50px; border-bottom:solid 1px #ccc;}
.t_menu dd a{ color:#333; width:90%; padding:0 5%; display:block;}	
.t_menu dd a:hover{ color:#000;  background:#eee;}

.cmenu_toggle{ display:inline-block;}

.sub, .sub_2{ display:none;}
.sub { text-align:left;}
.sub li{ width:100%; border-right:0; border-bottom:1px solid #515151;}
.sub li a{ padding:0 5%; line-height:50px; height:50px; background:#333 url(../img/nav_m.png) right 22px bottom 20px no-repeat; background-size:16px auto;}
.sub > li:hover > a{ background:#333 url(../img/nav_m.png) right 22px bottom 20px no-repeat; background-size:16px auto;}
.sub_2{ width:100%; position:static; background-color:#373737; margin:0; transition:none; visibility:visible; opacity:1;}
.sub_2 li { border-bottom:solid 1px #444;}
.sub_2 li a{ width:92%; padding:0 0 0 8%; background:#555;}
.sub_2 li a:hover{ background-color:#444;}

/*div#mainImgFooter{ display:none;}*/

#product .p_inner li{ width:31%;}

#acs_p{ padding:40px 0 50px;}
.p_list{ width:92%;}
.p_list li{ width:16.6%;}
.p4 li{ width:25%;}
.p6 li{ width:25%;}

.phl li{ width:30.2%; margin:1% 1.4%;}

footer .l03{ width:38%;}
footer .l03 .t01{ background:none; padding-left:0px;}

}

@media screen and (max-width:768px) {
article#topArea { position:fixed;}
div#mainImg { position:relative; top:0; height:400px;}
div#mainImg .img01{background:url(../img/main_01.jpg) center center no-repeat; background-size:cover;}
div#mainImg .img02{background:url(../img/main_02.jpg) center center no-repeat; background-size:cover;}
div#mainImg .img03{background:url(../img/main_03.jpg) center center no-repeat; background-size:cover;}
div#mainImgFooter{ top:340px;}
div#mainImgFooter div#mainImgNav{ width:120px;margin:0 -64px 0 0;}
div#mainImgFooter div#mainImgNav a{ width:16px; height:2px;border-radius:2px;}

#product .p_inner li{ width:31%;}

.p_box{ width:96%; margin:2% auto 0;}
.p_box .p_l{ width:45%; margin-right:5%;}
.p_box .p_r{ width:45%;}

footer h2{ font-size:1.3em; padding-bottom:10px;}
footer .acs_info{ width:92%; padding:30px 4% 0;}
footer .f_list{ padding-left:0; margin-bottom:30px; border:none;}
footer .l01,footer .l02,footer .l03{ width:100%;}
}

@media screen and (max-width:480px) {
header .logo span{ padding:8px 10px; letter-spacing:0px;}
.menu-mobile{ background-size:6% auto;}
article h2{ height:86px; padding-top:4px; font-size:20px; background-size:170px 80px;}
article h2 span{ font-size:11px;}

div#mainImgFooter{ display:none;}

#product{ padding:40px 0 0;}
#product .p_inner{ margin:20px auto 0;}
#product .p_inner li{ width:48%; font-size:0.9em; line-height:160%;}

#acs_p{ padding:30px 0;}
.p_list{ width:92%;}
.p_list .t_t{ margin:10px 0 20px; font-size:1em; line-height:140%;}
.p_list li{ width:25%;}
.p4 li{ width:50%;}
.p6 li{ width:33.33%;}

.phl{ width:94%;}
.phl li{ width:46.1%; margin:1.2% 1.8%; font-size:0.9em;}

.o_c{ width:96%;}
.o_c h3{ font-size:1.4em;}
.o_c h4{ font-size:1.2em;}
.o_c li{ width:94%; padding:3%;}

.p_box .p_l{ width:100%; margin-right:0;}
.p_box .p_r{ width:100%; margin-top:1em; font-size:1em;}

}