section {position: relative;padding: 2vw 0;background: no-repeat 50% / cover;}
.page_title {margin-top: 55px;text-align: center;font-weight: 500;font-size: 27px;color: #ffffff;z-index: 2;background: #9ebfa3;padding: 0 20px;letter-spacing: 0.10em;font-weight: 300;border-radius: 10px 0px 10px 0px;}
.page_title:before{
	content:"";
	position: absolute;
	width: 60px;
	height: 60px;
	top: -68px;
	left: calc(50% - 23px);
	background: url(/images/38/LOGO-ICON.png);
	z-index: 6;
	background-size: cover;
	-moz-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	transform: rotate(20deg);
}
section .page_title:first-letter{
	/* color: #2a5d70; */
}
section .page_title:after{
	content:"";
	width:50px;
	height: 1px;
	background: #c3a452b0;
	
	
	margin:0 auto;
	
display: flex;flex-direction: column;align-items: center;}
section .more_box >* { padding: 5px 30px; border: 1px rgba(255, 255, 255, .3) solid; display: inline-block; color: #fff; }

/* mmore22 */
.mmore22{display: flex;flex-direction: column;align-items: center;padding: 50px 0;}
.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  outline: none;
display: flex;flex-direction: column;align-items: center;justify-content: center;}

/* 12 */
.btn-12{
  position: relative;
  
  
  border:none;
  box-shadow: none;
  width: 130px;
  height: 40px;
  line-height: 42px;
  -webkit-perspective: 230px;
  perspective: 230px;
}
.btn-12 span {
  background: rgb(0,172,238);
background: linear-gradient(0deg, rgb(34 87 105) 0%, rgb(27 72 87) 100%);
  display: block;
  position: absolute;
  width: 140px;
  height: 45px;
  line-height: 45px;box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  border-radius: 5px;
  margin:0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
font-size: 16px;}
.btn-12 span:nth-child(1) {
  box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
box-shadow: unset;}
.btn-12 span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
 color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
.title_box p font{font-family: 'Cormorant Garamond', 'Times New Roman', 'serif';}
/* aboutBox */
#aboutBox .workframe {overflow: hidden;}
#aboutBox .left_box {padding: 0;float: left;width: 700px;bottom: 0;z-index: 10;display: flex;flex-direction: column;justify-content: flex-end;}
#aboutBox .title_box p{
    position: absolute;
    z-index: 0;
}
#aboutBox{
    padding-bottom: 3vw;
}
#aboutBox  .title_box{
    display: flex;
    flex-direction: column;
    align-items: center;
background: white;}
#aboutBox .title_box p font{
	font-size:60px;
	font-weight:600;
	opacity:0.3;
	z-index: -1;
	text-transform: uppercase;
	color: #fadce4;
}
#aboutBox .pos_abs {
    position: absolute;
}
#aboutBox .pos_rel{
	position:relative;
}
#aboutBox .left_box .info_box{
    /* height: 100%; */
}
#aboutBox .info_box b{
	text-align:center;
	display: flex;
	justify-content: center;
	color: #d9d9d9;
	text-transform: uppercase;
	font-weight: 400;
	margin-top: 35px;
}
#aboutBox .info_box h4 { margin: 15px 0; height: 52px; text-align: center; font-weight: 400; font-size: 31px; }
#aboutBox .img_box_cover , #aboutBox .img_box_cover img {height: 450px;}

#aboutBox .left_box .info_box article.text-clamp {margin-bottom: 20px;height: auto;line-height: 190%;-webkit-line-clamp: 3;}
#aboutBox .mmore{
    z-index: 998;
    width: 100%;
}
#aboutBox .mmore a{
    display: flex;
    justify-content: center;
    padding: 12px 5px;
    background: #c43131;
    width: 200px;
    margin: 0px auto 0;
    color: white;
}
#aboutBox .left_box .info_box p{
	color: #646464;
	font-weight: 300;
	font-size: 18px;
}
#aboutBox .right_box {float: right;width: 50%;position: relative;}
#aboutBox .right_box:before{
	content:"";
	position:absolute;
	width: 1px;
	height:100%;
	background: #34343e40;
	left: 0;
	top: 0;
}
#aboutBox .right_box:after{
	content:"";
	position:absolute;
	width: 1px;
	height:100%;
	background: #34343e40;
	left: 50%;
	top: 0;
}
#aboutBox .right_box .list_box {margin-bottom: 30px;width: calc(50% - 1px);/* border-left: 1px #ccc solid; */display: inline-block;vertical-align: top;}
#aboutBox .right_box .list_box .relat_box { margin: 0 25px; }
#aboutBox .right_box .list_box .img_box_cover , #aboutBox .right_box .list_box .img_box_cover img { height: 370px; }
#aboutBox .right_box .list_box .info_box h4 {height: 40px;font-size: 28px;color: #b3978e;font-weight: 500;}
#aboutBox .right_box .list_box .info_box p{
    color: #6a6869;
    font-weight: 300;
    font-size: 16px;
}
#aboutBox .right_box .list_box:nth-child(2n) .img_box_cover , #aboutBox .right_box .list_box:nth-child(2n) .img_box_cover img { height: 300px; }
#aboutBox .right_box .list_box:nth-child(2n) .info_box h4 {margin: 15px 0 10px;}
#aboutBox .right_box .list_box:nth-child(2n) .img_box_cover:before{
	content: "after";
	font-size: 21px;text-align: center;display: flex;position:absolute;
	width: 95px;
	height: 35px;
	background: #c39e85;
	color: antiquewhite;right: 0;bottom: 72px;z-index: 9;border-radius: 10px 0px 0px 10px;border: antiquewhite 1px solid;flex-direction: column;justify-content: center;align-items: center;
}
#aboutBox .right_box .list_box .img_box_cover:before{
	content: "before";
	font-size: 21px;text-align: center;display: flex;position:absolute;
	width: 95px;
	height: 35px;
	background: #225769;
	color: #eae9e7;right: 0;bottom: 91px;z-index: 9;border-radius: 10px 0px 0px 10px;border: #a3a09d 1px solid;flex-direction: column;justify-content: center;align-items: center;
}
#aboutBox.about_content_end { width: 100%; display: block; }

/* secabout */
#secabout { margin-top: 50px; }
#secabout:before { position: absolute; width: 60%; height: 100%; background: #dc8661; display: block; top: 0; left: 0; content: ""; }
#secabout >div { width: 50%; display: inline-block; vertical-align: top; }
#secabout .customBox ul { margin: 0 auto; width: 500px; }
#secabout .customBox ul li { padding: 60px 0; }
#secabout .customBox ul li .page_sub_title { margin-bottom: 25px; font-weight: 400; font-size: 36px; color: #fff; }
#secabout .customBox ul li article { font-weight: 200; font-size: 18px; color: #ece4e0; }
#secabout .youtubeBox { top: 45px; }
#secabout .youtubeBox iframe { width: 90%; height: 350px; }

/* productBox */
#productBox { padding: 5vw 8vw; }
#productBox .list_box { position: relative; }
#productBox .relat_box:before { position: absolute; width: 100%; height: 100%; background: rgb(0 0 0 / .25); display: block; top: 0; left: 0; z-index: 3; content: ""; }
#productBox ul li .img_box_cover img { height: 490px; }
#productBox ul li .info_box.abso_box { height: auto; top: calc((100% - 40px) / 2); left: 0; }
#productBox ul li .info_box >* { margin: 5px auto; width: 70%; text-align: center; }
#productBox ul li .info_box h4 { height: 40px; font-weight: 400; font-size: 24px; color: #fff; }
#productBox ul li .info_box article { margin: 80px auto 15px; width: 45%; color: rgb(255 255 255 / .7); line-height: 140%; font-size: 15px; -webkit-line-clamp: 2; opacity: 0; }
#productBox ul li .info_box .more_box { opacity: 0; }
#productBox .btn a { position: absolute; width: 26px; height: 26px; border: solid #444; display: block; top: calc((100% - 26px) / 2); }
#productBox .btn a#product_prev { border-width: 1px 0 0 1px; transform: rotate(-45deg); left: -50px; }
#productBox .btn a#product_next { border-width: 1px 1px 0 0; transform: rotate(45deg); right: -50px; }
#productBox .slick-slider { margin-bottom: 60px; }
#productBox .slick-dots li button:before { width: 12px; height: 12px; background: transparent; border: 1px #000 solid;  border-radius: 50%; text-align: center; opacity: 1; content: ""; }
#productBox .slick-dots li.slick-active button:before { background: #000; }
/*wave-shap*/

.wave-shap{position: relative;}
.wave-shap svg{width: 105%;fill: #ffffff;top: 36px;z-index: 1;position: absolute;-moz-transform: scaleY(1.8);
-webkit-transform:scaleY(1.8);
-o-transform:scaleY(1.8);
-ms-transform:scaleY(1.8);
transform: scaleY(2.8);}
/* news_area */
#news_area{
    padding-top: 40px;
background-image: url(/images/38/DD-BG.jpg);background: #122e46;padding: 3vw 0 5vw;/* background-image: linear-gradient(to right, #274c6a 0%, #153149 100%); */outline: 1px solid #ffffff8a;
    outline-offset: -65px;}

#news_area:before{
	content:"";
	position:absolute;
	width: 600px;
	height: 600px;
	background-image: url(/images/38/BG-1.svg);
	z-index: 0;
	top: -162px;
	background-size: cover;
	left: -130px;
opacity: 0;}
#news_area:after{
	content:"";
	position:absolute;
	width: 360px;
	height: 360px;
	background-image: url(/images/38/BG-2.svg);
	z-index: 0;
	top: -180px;
	right: 4px;
	background-size: cover;
opacity: 0;}
#news_area .list_box .row {padding-bottom: 30px;margin: 15px;}
#news_area .list_box .row img {height: 580px;}
#news_area .list_box .row .info_box {padding: 15px;width: calc(100% - 70px);/* box-shadow: 0 0 6px #4a4a4aab; */left: 0;bottom: 0;background: #ffffff;border-left: #36363630 1px solid;border-bottom: #ababab4f 1px solid;}
.title_box{
    display: flex;
    flex-direction: column;
    align-items: center;
margin-bottom: 40px;position: relative;}
#news_area .title_box p{
    position: absolute;
top: calc(-3vw + 17px);left: calc(50% - 138px);}
section#news_area .page_title{color: #eaeaea;}

#news_area .title_box p font{
	
	
	opacity: 1;
	z-index: -1;
	text-transform: uppercase;
	color: #ffffff;
font-weight: 500;
    font-size: 25px;
    letter-spacing: 9.5px;}
#news_area .list_box .row .info_box p{
	color:#e8e8e8;
}
#news_area .list_box .row .info_box a{
	color:#eaeaea;
}
#news_area .list_box .row .info_box h3{
    color: #363636;
    font-weight: 300;
    font-size: 22px;
}
#news_area .pos_abs {
    position: absolute;
}
#news_area .atag_item{
    width: 100%;
    height: 100%;
    top: 0;
}
#news_area .pos_rel{
	position:relative;
}
#news_area p.yeear{
    display: flex;
    align-items: center;
}
#news_area p.yeear a{
    border: #e7e7e7 1px solid;
    padding: 5px 15px;
    margin: 0 16px;
}
#news_area .img_cover{
    object-fit: cover;
    width: 100%;
}
#news_area .list_box .row .info_box p * { font-weight: 100; font-size: 14px; }
#news_area .list_box .row .info_box p a { margin-right: 10px; padding: 0 2px; max-width: calc(100% - 82px); height: 23px; z-index: 2; }


#news_area .tadan{
	display: flex;	
	align-items: center;
	flex-direction: column;width: calc(33.3% - 10px);
margin: 5px;}
#news_area .list_box{display: flex;flex-wrap: wrap;}
#news_area .tadan .imgbox{display: flex;width: 360px;max-width: 100%;border: #e3e3e31f 2px solid;}
#news_area .tadan .textbox{display: flex;flex-direction: column;width: calc(100% - 80px);padding: 20px 40px;}
#news_area .tadan .textbox h2{
	position:relative;
	padding-left:20px;
}
#news_area .tadan .textbox h2:before{
	content:"";

	position:absolute;
	width:5px;
	height:30px;
	background: #bfa451;
	left:0;
	top: 3px;
}
#news_area .tadan .textbox h2{font-size: 24px;color: #bfa451;font-weight: 400;}
#news_area .tadan .textbox p{font-size: 17px;color: #e9e9e9;font-weight: 300;}
/* bookBox */
#bookBox ul { margin: 0 auto; width: 1200px; display: grid; grid-gap: 0; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); }
#bookBox ul li { overflow: hidden; }
#bookBox ul li img { height: 275px; }
#bookBox ul li:first-child { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }
#bookBox ul li:nth-child(8) { grid-column-start: 4; grid-column-end: 5; grid-row-start: 2; grid-row-end: 4; }
#bookBox ul li:first-child img , #bookBox ul li:nth-child(8) img { height: 550px; }


@media screen and (max-width: 1500px){
	#aboutBox .left_box { width: calc(47.5vw - 25px); }
}
@media screen and (max-width: 1440px){
	#news_area{outline-offset: -40px;}
	#news_area .title_box p{top: calc(0vw + -2px);}
	#news_area .title_box{}
}
@media screen and (min-width: 1281px){
	#productBox ul li:hover .relat_box:before  { background: rgba(0, 55, 122, .85); }
	#productBox ul li:hover .info_box.abso_box { top: calc((100% - 178px) / 2); }
	#productBox ul li:hover .info_box article { margin: 30px auto 15px;  height: 44px; opacity: 1; }
	#productBox ul li:hover .info_box .more_box { opacity: 1; }
    #news_area .list_box .row:hover .info_box { bottom: 30px; }

}
@media screen and (max-width: 1280px){
	#productBox ul li.slick-current .relat_box:before  { background: rgba(0, 55, 122, .85); }
	#productBox ul li.slick-current .info_box.abso_box { top: calc((100% - 178px) / 2); }
	#productBox ul li.slick-current .info_box article { margin: 30px auto 15px;  height: 44px; opacity: 1; }
	#productBox ul li.slick-current .info_box .more_box { opacity: 1; }
	#bookBox ul { width: 90%; }
	#bookBox ul li img { height: 22.5vw; }
	#bookBox ul li:first-child img , #bookBox ul li:nth-child(8) img { height: 45vw; }
}
@media screen and (max-width: 1024px){
	#aboutBox .left_box { width: calc(60vw - 25px); }
	#aboutBox .right_box { width: 35vw; }
	#aboutBox .right_box .list_box { width: calc(100% - 1px); }
	#aboutBox .right_box .list_box .img_box_cover , #aboutBox .right_box .list_box .img_box_cover img { height: 300px; }
	#aboutBox .right_box .list_box:nth-child(2n) .info_box h4 { margin: 15px 0; }
	#secabout:before { width: 90%; height: calc(100% - 300px); }
	#secabout >div{ width: 95%; }
	#secabout .customBox ul { width: 80%; }
	#secabout .youtubeBox { width: 100%; text-align: right; top: 0; }
	#productBox ul li .img_box_cover img { height: 400px; }
	#news_area .tadan .textbox{padding: 20px 10px;width: calc(100% - 10px);}
	#news_area .tadan .textbox h2{font-size: 20px;}
	#news_area{outline-offset: -12px;}
}

@media screen and (max-width: 980px){
	.page_title:before{
    top: -61px;
}
	.page_title{
	    margin-top: 62px;
	    font-size: 30px;
	}
}
@media screen and (max-width: 768px){
	#aboutBox .img_box_cover , #aboutBox .img_box_cover img { height: 380px; }
	#aboutBox .left_box { margin-bottom: 50px; width: 100%; height: auto; }
	#aboutBox .fixed_box , #aboutBox .abso_box{
        position: relative;
    }
    #news_area:before{
    	opacity:0.5;
    	top: -104px;
    display: none;}
    #news_area:after{
    	opacity:0.3;
    display: none;}
    #news_area .list_box:before{
        bottom: 0;
    }
	#news_area{outline-offset: -15px;}
	#news_area .title_box p{top: calc(13vw + -22px);position: relative;left: 0;}
	#aboutBox .right_box:after ,#aboutBox .right_box:before{
	    background: #54545e26;
	}
	#aboutBox .right_box { width: 100%; }
	#aboutBox .right_box .list_box {width: calc((100% - 1px) / 2);border-left: 0;border-right: 0;}
	#aboutBox .right_box .list_box:nth-child(2n) { border-right: 0; }
	#aboutBox .right_box .list_box .relat_box { margin: 0 15px; }
	#aboutBox .right_box .list_box .img_box_cover , #aboutBox .right_box .list_box .img_box_cover img , #aboutBox .right_box .list_box:nth-child(2n) .img_box_cover , #aboutBox .right_box .list_box:nth-child(2n) .img_box_cover img { height: 50vw; }
	#aboutBox .right_box .list_box .info_box h4 {height: 30px;font-size: 19px;}
	#aboutBox .right_box .list_box .info_box p ,#aboutBox .left_box .info_box p{
		font-size:16px;
	}
	#newsBox ul li { margin: 20px 5px 20px 0; width: calc((100% - 10px) / 2); }
	#newsBox ul li:nth-child(2n) { margin: 20px 0 20px 5px; }
	#bookBox ul { grid-template-rows: repeat(4, 1fr); }
	#bookBox ul li:first-child { grid-column-end: 4; }
	#bookBox ul li:nth-child(8) { grid-column-start: 3; grid-column-end: 5; grid-row-start: 3; grid-row-end: 5; }
}
@media screen and (max-width: 640px){
	#bookBox ul { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); }
	#bookBox ul li:first-child { grid-column-end: 3; }
	#bookBox ul li:nth-child(8) { grid-column-start: 1; grid-column-end: 3; grid-row-start: 5; grid-row-end: 6; }
	#bookBox ul li:nth-child(7) { grid-column-start: 2; grid-column-end: 4; grid-row-start: 3; grid-row-end: 5; }
	#bookBox ul li img , #bookBox ul li:nth-child(8) img { height: 30vw; }
	#bookBox ul li:first-child img , #bookBox ul li:nth-child(7) img { height: 60vw; }
    #news_area .list_box .row img{
        height: 260px;
    }
    #news_area .list_box .row .info_box{
	    padding: 5px 10px;
	}
	#news_area .tadan .imgbox{width: 295px;display: flex;flex-direction: column;}
}
@media screen and (max-width: 550px){
	#news_area .tadan .textbox h2{font-size: 22px;}
	#news_area .tadan{width: calc(100% - 10px);}
	#secabout:before { width: 100%; }
	#productBox .list_box { margin: 0 auto; width: 350px; }
	#productBox .btn { display: none; }
	#newsBox ul li , #newsBox ul li:nth-child(2n) { margin: 20px 0; width: 100%; }
    .page_title{
        font-size: 22px;
        }
    #aboutBox .title_box p font , #news_area .title_box p font{
    	font-size: 24px;
    }
	#news_area .tadan .textbox{padding: 20px 20px;width: calc(100% - 40px);}
	#news_area .tadan .textbox p{font-size: 15px;line-height: 200%;}
}
@media screen and (max-width: 480px){
	#aboutBox .right_box .list_box{width: calc((100% - 1px) / 1);}
	#aboutBox .right_box:after, #aboutBox .right_box:before{display:none;}
	#aboutBox .right_box .list_box .img_box_cover, #aboutBox .right_box .list_box .img_box_cover img, #aboutBox .right_box .list_box:nth-child(2n) .img_box_cover, #aboutBox .right_box .list_box:nth-child(2n) .img_box_cover img{
		height:auto;
	}
}
@media screen and (max-width: 425px){
	#productBox .list_box { width: 100%; }
}
@media screen and (max-width: 320px){
	#aboutBox .right_box .list_box { width: 100%; border-right: 0; }
	#productBox .list_box { width: 100%; }
}