/* header */
header .menu { border-bottom: 1px rgba(var(--white-rgb), .2) solid; }
header #webmenu nav >ul >li >p a {color: var(--white);font-weight: 200;}

header .nayalo{ display:none;}
header.scroll { background: rgba(var(--secondary-rgb), .9); }

/* search_box */
#openform { background: rgba(var(--white-rgb), .3); }

/* section */
section {margin: 5vw 0 3vw;}
section.section_pad {padding: 5vw 0;margin-bottom: 0;}
section >* { z-index: 3; }
section .title_box {margin-bottom: 4vw;position: relative;}
section .title_box .area_title {font-weight: 400;font-size: 45px;text-align: center;color: #435273;word-break: keep-all;}
section#product_area{
    margin-top: 0;
}
section#news_area .title_box .area_title{
    color: white;
}
section .title_box .sub_title {font-weight: 300;font-size: 23px;text-align: center;}
section .more_btn{
    display: flex;
    width: 200px;
    flex-direction: column;
    align-items: center;
    margin: 0px auto;
    max-width: 95%;
    margin-top: 50px;
}

section#about_area{
    background-image: url(/images/40/BG.jpg);
    margin: 0 auto;
    padding: 5vw 3vw;
    background-size: cover;
}
section#about_area .workframe{
    display: flex;
    justify-content: center;
}
section#about_area .workframe .img_box{
    width: 600px;
}
/* bg_box */
.bg_box {width: 100%;height: 100%;background: no-repeat 50% / cover;background-attachment: fixed;opacity: 1;top: 0;left: 0;}
.bg_box:before {width: 100%;height: 100%;display: block;background: #273758e3;content: "";}
.bg_box.white:before { background: rgba(var(--white-rgb), .2); }

/* about_area */
#about_area .info_box article {margin-bottom: 30px;width: 100%;line-height: 210%;letter-spacing: 1.5px;font-weight: 300;text-align: center;font-size: 17px;}

/* product_area */
#product_area .slick-list { overflow: visible; }

/* news_area */
#news_area .list_box img { height: 320px; }
#news_area .list_box .info_box { padding: 15px 30px; }
#news_area .list_box .info_box p a {margin-right: 10px;max-width: calc(100% - 100px);font-weight: 100;z-index: 2;color: aliceblue;}
#news_area .list_box .info_box p .time {width: 90px;font-weight: 300;color: #00d690;}
#news_area .list_box .info_box h3 {height: 34px;font-size: 20px;color: white;font-weight: 300;}

/* book_area */
#book_area .list_box img { height: 450px; }
#book_area .list_box .img_box { border: var(--white) solid; border-width: 0 1px 1px 0; }
#book_area .list_box .img_box:before , #book_area .list_box .img_box:after { position: absolute; width: 100%; height: 100%; background: var(--white); z-index: 9; opacity: .4; content: ""; }
#book_area .list_box .img_box:after { right: 0; bottom: 0; }
#book_area .list_box .atag_item { z-index: 10; }
#book_area .list_box .badge { margin: auto; padding: 10px 20px; max-width: calc(80% - 40px); height: 34px; line-height: 36px; font-size: 20px; }

/* youtube_box */
#youtube_box { min-height: 1px; padding-bottom: 30%; }
#youtube_box a { position: absolute; background: var(--white); display: flex; top: 50%; left: 50%; z-index: 99; }
#youtube_box a i { margin: auto; font-size: 30px; color: var(--primary); }
#youtube_box iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 5; }

/* custom_area */
#custom_area {margin: 0;padding: 0vw 0 3vw;background-image: url(/images/40/VO-bbg.jpg);}
#custom_box:before{
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(/images/40/dote.png) 0 0;
	top: 0vw;
	left: 0%;
	z-index: 0;
	opacity: 0.02;
	content: "";
}

.hoztext {
	width:100%;
	height: 100%;
}
.hoztext:before{
	position: absolute;
	width: 40%;
	height: 80%;
	background: url(/images/40/dote.png) 0 0;
	top: -2vw;
	right: 0%;
	z-index: 0;
	opacity: 0.5;
	content: "";
}
.hoztext:after{
	position: absolute;
	width: 100%;
	height: 80%;
	background: url(/images/40/dote.png) 0 0;
	bottom: 0vw;
	right: 0%;
	z-index: 0;
	opacity: 0.2;
	content: "";
}

.hoztext h2{
	position: absolute;
	width: auto;
	height: 100%;
	webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	right: -30px;
	bottom: 100%;
	z-index: 96;
	font-size: 10em;
	opacity: 0.1;
	color: #868686;
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
}
#custom_area:before {position: absolute;width: 100%;height: 75%;background: #e6e6e69c;display: block;bottom: 0;left: 0;opacity: .3;content: "";}
#custom_box {padding: 0vw 0 0vw;margin-top: -7vw;background-color: #243454;z-index: 96;margin-bottom: 20px;}
#custom_box ul{
}
#custom_box .slick-list{
    overflow: visible;
}

#custom_box li .row {margin: 20px 20px 50px;padding: 30px;border-bottom: 1px #ffffff45 solid;}
#custom_box li .row a.ucommlink{
	display:block;
	position:absolute;
	height:100%;
	width: 100%;
}
#custom_box li .row h2 {font-size: 30px;font-weight: 400;color: #f0f0f0;}
#custom_box li .row article {margin-top: 30px;line-height: 200%;color: #fcfcfc;font-weight: 200;}
#videoooa{
    position: relative;
    width: 100%;
    z-index: -1;
}
#videoooa video{
    width: 100%;
}
@-webkit-keyframes spineer { 0% { -webkit-box-shadow: 0 0 0 0 var(--info); } 70% { -webkit-box-shadow: 0 0 0 20px transparent; } 100%{ -webkit-box-shadow: 0 0 0 0 transparent; } }
@keyframes spineer { 0% { box-shadow: 0 0 0 0 var(--info); } 70% { box-shadow: 0 0 0 20px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } }

@media screen and (min-width: 1281px){
	#book_area .list_box li:hover .badge { background: var(--primary); color: var(--white); }
	#custom_box li:hover {/* box-shadow: 0 3px 5px 0 rgba(var(--black-rgb), .2); */transform: translateY(-60px);background-color: #243454;}
}
@media screen and (max-width: 1460px){
	 #custom_box .slick-list{
    overflow: hidden;
}
}
@media screen and (max-width: 1440px){
	#custom_box{
		margin-top: -140px;
	}
	#custom_box li .row h2{
    font-size: 24px;
    overflow: hidden;
    margin: 10px 0;
    height: 48px;
    text-align: center;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    }
    #custom_area .workframe{
    width: 80%;
}
    section .title_box .area_title{
        font-size: 34px;
        word-break: keep-all;
        width: 100%;
    }
    
    #custom_box li .row{
        margin: 0 auto;
    }
 
    
}
@media screen and (max-width: 1024px){
section#about_area .workframe{display: flex;flex-direction: column;align-items: center;}
section#about_area .workframe .img_box{
    width: 446px;
    margin-bottom: 20px;
}
	#custom_box .slick-slide{
    opacity: 0;
}	
#custom_box  .slick-active{
    margin: 0 0px;
    opacity: 1;
}

#custom_box .slick-current , #custom_box .slick-cloned{
    margin: 0;
}
}
@media screen and (max-width: 768px){
	#news_area .list_box .info_box { padding: 15px 0; }
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .row { margin: 10px 15px; padding: 10px 0; }
}
@media screen and (max-width: 640px){
	#book_area .list_box img { height: 65vw; }
	section .title_box .area_title{
    word-break: normal;
    font-size: 22px;
    }
    #custom_box{
    	margin-top: -8px;
    }
    #custom_area{
    	padding-top:50px;
    }
    #custom_box li .row h2{
    	font-size:20px;
    }
    #custom_box li .row article{
    	font-size:16px;
    	margin-top: 0;
    }
    .hoztext{
    }
    .hoztext h2{
    bottom: auto;
    top: 100%;
    display: none;
}
}
@media screen and (max-width: 450px){
	#product_area .bgBox { width: 100%; object-fit: cover; }
	section#about_area .workframe{
		width: 100%;
	}
}