@import url('/css/animate.css');
.wow {animation: fadeIn 1.5s both;-webkit-animation: fadeIn 1.5s both;animation-duration: 1s;-webkit-animation-duration: 1s;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}

/* section */
section {padding: 2vw 0 5vw;}
section >* {z-index: 6;}
section .title_box {margin-bottom: 50px;}
section .title_box font {text-transform: uppercase;font-size: 20px;color: #0c0c0c;font-weight: 400;letter-spacing: 0.5px;line-height: 160%;font-family: 'Cormorant Garamond', serif;}
section .title_box h2 {font-weight: 600;font-size: 44px;line-height: 140%;color: var(--primary);position: relative;font-family: 'Poppins', sans-serif;text-transform: uppercase;letter-spacing: 2.5px;}
section.bg_box {background: no-repeat 50% / cover;padding: 4vw 0 4vw;}
section.bg_box:after { background: -webkit-linear-gradient(bottom,rgba(var(--secondary-rgb), 1) 0%,rgba(var(--secondary-rgb), .7) 100%); background: linear-gradient(to top,rgba(var(--secondary-rgb), 1) 0%,rgba(var(--secondary-rgb), .7) 100%); opacity: 1; }
.more_btn{margin-top:0px;right: -40px;bottom: -40px;z-index: 20;animation:bannerScrollAnimation 1.5s ease 0s infinite alternate}
@keyframes bannerScrollAnimation{50%{-webkit-transform:translateY(0);transform:translateY(0)}
100%{-webkit-transform:translateY(10%);transform:translateY(10%)}
}
.more_btn a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-family:"Lato",sans-serif;letter-spacing:1px;line-height:1.5;text-align:center;color:#8e8e8e;width: 160px;height: 160px;background-color:transparent;border:1px solid #8e8e8e;border-radius:100%}
.more_btn a:hover{border:1px solid #9d8a69;color:#9d8a69}
.more_btn a:hover font{color:#9d8a69}
.more_btn a font{
    font-size: 18px;
}

section .track{position:absolute;top: 0px;left: 70px;z-index: 1;}
section .track p{font-weight: 400;font-size: 65px;margin:0;letter-spacing:2px;line-height:1;will-change:transform;color: #49494917;font-family: 'Cormorant Garamond', serif;}
#product_area .title_box h2::after{content:"";display:block;width:70px;height:1px;background:#c1b399;margin:30px auto 0}
#book_area .title_box h2::after{content:"";display:block;width:70px;height:1px;background:#c1b399;margin: 30px auto 0;}
#secabout .title_box h2::after{content:"";display:block;width:70px;height:1px;background:#c1b399;margin: 30px 0 0;}


#about_area{overflow: hidden;position:relative;padding: 6vw 0 7vw;background-image: url(/images/39/img-bg.jpg);}
#about_area .title_box{position:relative;margin-bottom: 20px;}
#about_area .title_box h2{}
#about_area .title_box p{position:absolute;right:-60px;top:20px}
#about_area .info_item .decoText p{line-height:140%;color:var(--primary);margin-bottom:5px;letter-spacing:0.5px}
#about_area .nowrap_box{display:flex;align-items:flex-start;flex-direction:row;padding:0px 0 0px;margin:0 0 0 auto;justify-content:space-between}
#about_area .info_item .decoText p,#about_area .title_box h2{
    font-size: 28px;
}
#about_area .nowrap_box .deck02 img{width:420px;height:100%}
#about_area .nowrap_box .deck03{bottom:-120px;right:-170px}
#about_area .img_item{width:100%}
#about_area .img_item img{width:100%}
#about_area .titleBox1{width:65%;position:relative}
#about_area .titleBox1:before{content:'';position:absolute;height:0;width:170%;top:40px;left:-100px;background:#ffffff;z-index:-4;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
#about_area.tooolong  .titleBox1:before{height: 620px;}
#about_area .titleBox2{width: 34%;padding-right: 120px;position: relative;}
#about_area .titleBox2 article{line-height:180%;letter-spacing:0.5px;font-weight:300;color:#000;}
#about_area .titleBox2 article .info h3{padding: 0 0 10px 0;font-size:26px;color: #0c0c0c;font-weight:600;letter-spacing:0.5px;line-height:160%}
#about_area .titleBox2 article .info p{width: 100%;margin-bottom: 40px;line-height: 150%;letter-spacing: 4px;font-weight: 400;font-size: 24px;}
#about_area .titleBox2 article .textEditor h2{font-size:20px;padding-bottom:20px}
#about_area .titleBox2 article .textEditor p{line-height:180%;font-weight:400}
#about_area .linkList{display:flex;flex-wrap:wrap}
#about_area .linkList .linkItem{width:calc((100% / 2 ) - 20px);display:flex;flex-direction:column;align-items:center;padding:10px}
#about_area .linkList .linkItem .Img img{object-fit:contain;height: 70px;width: 100%;}
#about_area .linkList .linkItem:hover .Img{animation:flipInX 1.5s both;-webkit-animation:flipInX 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}
#about_area .linkList .linkItem .num{text-align:center;position:relative;padding-bottom:20px;font-size:14px}
#about_area .linkList .linkItem .num::after{content:"";position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:calc(50% - 5px);bottom:10px;display:block;width:10px;height:1px;background:#ababab}
#about_area .linkList .linkItem .itemTxt h3{text-align:center;font-weight:400;font-size: 20px;line-height:160%;padding-top: 9px;}
#about_area .linkList .linkItem .itemTxt h3 a{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#about_area.tooolong:after{height:430px}
#about_area.tooolong .aboutAreaBG{width:1160px}
#about_area:before{content:'';position:absolute;height: 430px;width:0;top: 320px;left:0;background:#ececec;z-index:2;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
#about_area.tooolong:before{width:55%}
@keyframes bgWhirligig-2{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}

/* product_area */
.list_box .info_box h3{height:30px;font-weight:400;font-size: 22px;margin:0px 0 0}
#product_area{margin:0;position:relative;padding:4vw 0 7vw 0;background-color: #222222;background-repeat:no-repeat;background-position:bottom}
#product_area .title_box font{color:#ffffff}
#product_area .title_box p,#product_area .title_box h2{text-align:center;color:#ffffff}
#product_area .slick-slider{position:relative}
#product_area .nowrap_box .slick-slide{margin:10px 20px}
#product_area ul{display:inline-block}
#product_area ul li{width:25%;float: right;}
#product_area ul li .row{padding:6px !important;margin-left:0;margin-right:0;position: relative;}
#product_area ul li .atag_item{
    z-index: 10;
}
#product_area ul li .row:before{content:"";width:calc(100% - 12px);height:50%;position:absolute;bottom:6px;left:6px;right:0;display:block;z-index:1;opacity:0.4;background-image:-webkit-linear-gradient(270deg,rgba(11,22,31,0.00) 0%,rgba(11,22,31,1.00) 100%);background-image:linear-gradient(180deg,rgba(11,22,31,0.00) 0%,rgb(0 0 0) 100%)}
#product_area ul li .img_box{position:relative;overflow:hidden}
#product_area ul li .img_box img{object-fit:cover;background-color:#231f17;width:100%;-webkit-transition-duration:1s;transition-duration:1s;-webkit-transition-property:transform;transition-property:transform;-webkit-transform:translateZ(0);transform:translateZ(0)}
#product_area ul li .info_box{display:block;margin-bottom:0px;overflow:hidden;padding:8px 20px 15px;position:absolute;bottom:10px;color:#fff;z-index: 10;}
#product_area ul li .info_box h3{text-transform:uppercase;font-size: 24px;font-weight: 400;padding: 0 0 12px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;height: 30px;line-height: 30px;color: #fff;letter-spacing: 2px !important;margin: 0;}
#product_area ul li .info_box .line{position:relative;margin-top:10px}
#product_area .slick-prev,#product_area .slick-next{border-color:transparent;width:45px;height:45px;line-height:55px;border:1px solid #989898;border-radius:50%;display:flex;opacity:.65;flex-direction:column;align-items:center;justify-content:center;z-index:10;top:40%}
#product_area .slick-next{right:380px}
#product_area .slick-prev{left:395px}
#product_area ul li .info_box .line:before{content:"";width:30px;height:6px;background:url(/images/39/img-p-icon.png);background-repeat:no-repeat;display:block;position:absolute;bottom:0;left:0}


/* book_area */
#book_area{background-color:#ebebeb}
#book_area:before{content:'';position:absolute;height:100%;width:100%;bottom:0;right:0;background:#ebebeb;z-index:2}
#book_area .title_box p,#book_area .title_box h2{text-align:center}
#book_area .list_box .info_box h3{text-align:inherit;margin:20px 0 0}
#book_area .list_box ul li{position:relative}
#book_area .list_box ul li:first-child::after{content:normal}
#book_area .list_box ul li .row{margin:0 20px}


/* newsBox */
#subBox{display:flex}
#subBox .left{width:520px;margin-right:70px;z-index:20}
#subBox .right{width:calc(100% - 650px);z-index:10}
#secabout{padding:6vw 0 6vw;position:relative;background-image:url(/images/39/img-n-bg.jpg);background-position:50%;background-size:cover;background-attachment:fixed}
#secabout:before{content:'';position:absolute;height:360px;width:0;top:0;left:0;background:#f0f0f0;z-index:3;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
#secabout.tooolong:before{width:20%}
#secabout:after{content:'';position:absolute;height:0;width:90%;top:50px;left:-10px;background:#ffffff;z-index:2;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
#secabout.tooolong:after{height:760px}
#secabout .track{left:40px;bottom:-60px}
#secabout .SecaboutBG{position:absolute;height:120%;width:0;bottom:0;left:0;background:#e0dbcf;z-index:0;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
#secabout.tooolong .SecaboutBG{width:25%}
#newsBox{margin:0 auto;padding:0}
#newsBox .info{padding:30px 0;position:relative;display:flex;justify-content:space-between;z-index:10;flex-direction:column}
#newsBox .info .titleBox{width:250px;margin-right:30px}
#newsBox .info .titleBox .title{word-spacing:100vw}
#newsBox .info .row ul:before{content:'';position:absolute;height:360px;width:0;top:-20px;left:-60px;background:#f5f5f5e0;z-index:-2;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
#secabout.tooolong .info .row ul:before{width:350%}
#newsBox .info .more{position:inherit}
#newsBox .info .tit a{display:inline-block;text-transform:uppercase;font-size:45px;letter-spacing:3px;color:#505050;font-weight:500}
#newsBox .info .btn{position:absolute;width:120px;text-align:center;top:calc((100% - 24px) / 2);right:60px}
#newsBox .info .btn a{line-height:23px}
#newsBox .info .btn a:first-child{-webkit-transform:scaleX(-1);transform:scaleX(-1)}
#newsBox .info .btn font{margin:0 15px;font-size:0;display:inline-block}
#newsBox .info .btn font span{margin-left:10px;display:inline-block;font-weight:400;font-size:13px}
#newsBox .info .btn font span:first-child{padding-left:18.03px}
#newsBox .info ul li{position:relative;font-size:0;margin:10px 0 10px}
#newsBox .info ul li a{position:absolute;width:calc(100% - 0px);height:100%;top:0;left:0}
#newsBox .info ul li p.time{margin-right:10px;width: 115px;display:inline-block;line-height:27px;font-weight:400;opacity:0.9;font-family:'Poppins',sans-serif;color:#9d8a69}
#newsBox .info ul li p.txt{width: calc(100% - 145px);display:-webkit-inline-box;overflow:hidden;font-weight: 400;line-height:160%;margin-left:1%;max-height:initial;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;letter-spacing:0.5px}
#newsBox .info ul li .noBox{position:absolute;font-weight:400;font-size:13px;top:calc(100% - 22px);right:67px}

@media screen and (max-width: 1680px){
	#newsBox{margin:0 0% 0 auto}
	#product_area .slick-next{right: 290px;}
	#product_area .slick-prev{left: 300px;}
}

@media screen and (max-width: 1440px){
	#about_area.tooolong .aboutAreaBG{width:960px}
	#about_area .nowrap_box .deck02 img,#about_area .nowrap_box .deck03 img{width: 85%;}
	#newsBox{margin:0 -3% 0 auto}
	#newsBox .info .tit.row{padding: 20px 0px 20px;}
}
@media screen and (max-width: 1366px) {
	#newsBox{margin: 0 60px 0 auto;width: 768px;}
	#about_area .nowrap_box,#newsBox{width: 90%;}
	#about_area .titleBox2 article .info p{font-size: 18px;}
}
@media screen and (min-width: 1281px){
	#about_area .d_flex { align-items: center; }
	#product_area .nowrap_box .slick-slider:before{content:'';position:absolute;height:100%;width:15%;top:0;left:0;background:#ffffff;opacity:0;z-index:2;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
	#product_area ul li:nth-child(10n+2){width:calc(100%/4);/* float:left; */}
	#product_area ul li:nth-child(10n+3){width:calc(100%/2);float: left;}
	#product_area ul li:nth-child(10n+4){width:calc(100%/2);/* float: left; */}
	#product_area ul li:nth-child(10n+5){width:calc(100%/4);float: left;}
	#product_area ul li:nth-child(10n+6){width:calc(100%/4);float:left}
	#product_area ul li .img_box::after{content:"";position:absolute;left:0;top:0;width:100%;height:0;transition:0.5s;background:rgba(0,0,0,0.3)}
	#product_area ul li:hover .img_box::after{height:100%}
	#product_area ul li:hover .img_box:before{letter-spacing:3px;opacity:1}
	#product_area ul li .img_box:before{content:"MORE";position:absolute;bottom: 0px;z-index:1;letter-spacing:3px;transition:0.8s ease;font-size:16px;background:#222;width:100%;padding:5px 0px;color:#eee;opacity:0;text-align:center}
	#product_area ul li:hover .img_box img{-webkit-transform:scale(1.05);transform:scale(1.05)}
	#product_area ul li:hover .info_box{-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);opacity:0}
	#product_area .slick-dots li button:hover,#product_area .slick-dots li button:focus{font-size:0;line-height:0;display:block;width:40px;height:20px;padding:5px;cursor:pointer;color:transparent;border:0;outline:none;background:transparent}
	#product_area .slick-prev:before,#product_area .slick-next:before{position:absolute;width:30%;height:30%;border:solid var(--primary);border-width:1px 0 0 1px;display:block;top:calc((100% - 14px) / 2);left:17px;content:"";transform:rotate(315deg);-webkit-transform:rotate(315deg)}
	#product_area .slick-next:before{transform:rotate(135deg);-webkit-transform:rotate(135deg);top:calc((100% - 12px) / 2);left:26%}
}
@media screen and (max-width: 1280px){
	section .title_box font{font-size:20px}
	#about_area .img_item:before,#about_area .img_item img{width:100%}
	#about_area .img_item img{height:100%}
	#newsBox .info{padding:20px 0}
	#newsBox .info .tit.row{padding:10px 0px 0px}
	#newsBox .info .title_box{width:170px;margin-left:15px;margin-right:15px}
	#product_area ul li{width: calc(100% /3);}
}


@media screen and (max-width: 1140px){
	#about_area .titleBox1,#about_area .titleBox2{width:100%;padding-left:0;padding-right:0}
	#about_area .nowrap_box{display:flex;flex-direction:column;align-items:flex-start;width:90%;margin:auto;padding:0px 0 0;align-content:flex-start}
	#about_area::after{display:none}
	#about_area .nowrap_box .info_item,#about_area .img_item{margin:0;width:100%;position:relative;left:0}
	#about_area .img_item{margin-bottom:40px}
	#about_area .info_item article{width:100%;padding:0;margin-bottom:20px}
	#about_area .more_btn{left:0;right:0px;bottom:-40px;display:none}
	.more_btn a{width:90px;height:90px}
	#about_area .nowrap_box:before,#about_area .title_box p,#about_area .nowrap_box .deck02,#about_area .nowrap_box .deck03,section .track,#about_area.tooolong .aboutAreaBG,#secabout .SecaboutBG,#productBox .info .title_box::after{display:none}
	#newsBox .info .title_box{width:calc(100% - 30px)}
	#newsBox{width:100%}
	#about_area .titleBox2 article{margin:20px 0}
	#product_area .ServiceBG{display:none}
	#product_area{padding:8vw 0 7vw 0;background-position:50% 0;background-size:auto}
	#product_area .slick-next{right:20px}
	#product_area .slick-prev{left:30px}
	#product_area ul li .info_box article{font-size:15px}
	#product_area ul li .info_box h3{font-size: 18px;padding: 0 0 10px;}
	#product_area .nowrap_box .slick-slide{margin:10px 10px}
	#product_area ul li .info_box{margin-top:30px}
	#about_area:before{width:100%;left:0}
	#about_area.tooolong:before{height:100%;width:100%;top:230px}
	#about_area{padding:6vw 0 4vw}
	#about_area.tooolong .titleBox1:before{height:100%}
	#subBox{display:flex;flex-direction:column}
	#subBox .left{width:100%;margin-right:0;margin-bottom:40px;text-align:center}
	#subBox .left .Img{display:flex;flex-direction:column;align-content:center}
	#subBox .right{width:calc(100% - 0px)}
	#newsBox .info .row ul:before{display:none}
	#secabout.tooolong:after{height:100%;width:100%;left:0}
	section .title_box h2{font-size:30px}
	section .title_box{margin-bottom:30px}
}

@media screen and (max-width: 1024px){
	#about_area{padding: 4vw 0 4vw;}
	#about_area .img_item{width:100%;margin:0 0 30px auto;order:inherit}
	#about_area .img_item:before{border:0;top:0;right:0;z-index:2}
	#about_area .info_item{margin-top:0px;z-index:4}
	#about_area::after{top:-283px;width:950px;height:870px}
	#newsBox .info{padding: 50px 0px;display:flex;flex-direction:column;align-items:center}
}

@media screen and (max-width: 960px){
	.list_box .info_box h3{margin: 0;}
	#product_area .title_box h2::after,#book_area .title_box h2::after,#secabout .title_box h2::after{margin: 20px auto 0;}
	#newsBox .info .row p,#newsBox .info .row h2{text-align: center;}
	#product_area ul li{width: calc(100% /2);}
}
@media screen and (min-width: 769px) {
	#book_area .list_box ul li::after{content:"";width:1px;height:100%;background-color:#dfdfdf;position:absolute;position:absolute;bottom:auto;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:0}
}
@media screen and (max-width: 768px){
	#newsBox .info .titleBox .title{word-spacing: initial;}
	#newsBox .info{display: flex;flex-direction: column;align-items: flex-start;padding: 0px 0px;}
	#newsBox .info .titleBox{width: 100%;margin-right: 0;margin-bottom: 30px;}
	#newsBox .info .row {width: calc(100% - 30px);display: block;}
}
@media screen and (max-width: 640px){
	#about_area{padding:7vw 0 10vw}
	#about_area .img_item{width:100%}
	#about_area .img_item:before{background:rgba(var(--secondary-rgb),0)}
	#about_area .info_item{margin-top:40px}
	#about_area .info_item article .info h3{font-size:22px;padding:5px 0 0px 0}
	#about_area .img_item img{height:270px;width:100%}
	#newsBox{margin-top:0}
	#about_area.tooolong:before {top: 200px;}
	#product_area ul li{width: calc(100% /1);}
}
@media screen and (max-width: 500px){
	#newsBox .info .tit.row{padding:0px 0px 10px}
	#newsBox .info .tit a{font-size:29px}

}