/* relat_box */

.relat_box , .relat_box >* { position: relative; }

.fixed_box {position: fixed;}

.abso_box { position: absolute; width: 100%; height: 100%; z-index: 4; }

.relat_box .abso_tag { position: absolute; width: 100%; height: 100%; z-index: 5; }



section {position: relative;padding: 2vw 0;background: no-repeat 50% / cover;}

section .page_title {margin-top: 55px;text-align: center;font-weight: 500;font-size: 35px;color: #6a6869;z-index: 2;}

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; }

.fixed_box {

    position: fixed;

}

.abso_box {

    position: absolute;

    width: 100%;

    height: 100%;

    z-index: 4;

}

/* 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;position: relative;margin: 0 auto;width: 1440px;font-size: 0;z-index: 1;max-width: 95%;}

#aboutBox .left_box {padding: 0;float: left;width: 700px;bottom: 0;z-index: 10;display: flex;flex-direction: column;justify-content: flex-end;}

#aboutBox .row{

    margin-right: 0;

    margin-left: 0;

}

#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: #dbb27e78;

}

#aboutBox .pos_abs {

    position: absolute;

}

#aboutBox .pos_rel{

	position:relative;

}

#aboutBox .left_box .info_box{

    /* height: 100%; */

    position: absolute;

    z-index: 9;

    width: 100%;

}

#aboutBox .left_box .info_box h4{

    color: #f3f3f3;

}

#aboutBox .info_box b.mantitle{

    font-size: 17px;

    display: flex;

    justify-content: flex-start;

    margin-top: 11px;

    color: #7f7f7f;

}

#aboutBox .info_box b{

	text-align:center;

	display: flex;

	justify-content: center;

	color: #d4d4d4;

	text-transform: uppercase;

	font-weight: 400;

	margin-top: 35px;

	font-size: 16px;

}

#aboutBox .info_box h4 {margin: 2px 0 15px;height: 52px;text-align: center;font-weight: 400;font-size: 31px;}

#aboutBox .img_box_cover , #aboutBox .img_box_cover img {height: calc(100vh - 100px);}

.img_box_cover img {

    width: 100%;
	/* object-fit: contain; */
    object-fit: cover;

}

#aboutBox .left_box .img_box_cover:after {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to top,rgb(0 0 0) 0%,rgb(0 0 0 / 0%) 25%);content: "";border-radius: 20px;transition: opacity 0.3s ease 0s;background: linear-gradient(to top, rgb(0, 0, 0), transparent 18%) 0% 0% / calc(100% + 9px) calc(100% + 13px);}

#aboutBox .left_box .img_box_cover:hover:after{opacity: 0.7;}

#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;margin: 0;}

#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;

	opacity: 0;

}

#aboutBox .right_box .list_box {margin-bottom: 30px;/*width: calc(100% - 1px); border-left: 1px #ccc solid; */display: inline-block;vertical-align: top;}

.relat_box, .relat_box >* {

    /* position: relative; */

}
#aboutBox .right_box .list_box1{width: 50%;}
#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 {font-size: 26px;color: #262626;font-weight: 800;text-align: left;}

#aboutBox .right_box .list_box .info_box p{

    color: #6a6869;

    font-weight: 300;

    font-size: 16px;

    overflow: hidden;

    margin: 10px 0;

    height: 45px;

    text-align: left;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}

#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;

	display: none;

}

#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;

	display: none;

}

#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: 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%; }

    section .page_title{

        font-size: 24px;

    margin-top: 30px;}

    #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%; }

}
.album_box{
	width: 50%;
	display: inline-block;
}