/* header */
header .menu {border-bottom: #91919126 1px solid;}
header #webmenu nav >ul >li >p a {color: #626262;letter-spacing: 1.5px;font-weight: 300;}
header.scroll {background-color: #fcfcfc;}

/* search_box */

.workframe{
    width: 1680px;
    max-width: 95%;
}
/* section */
section {margin: 3vw 0 3vw;}
section.section_pad {padding: 5vw 0;margin: 60px auto 0;}
section >* { z-index: 3; }
section .title_box {margin-bottom: 20px;}
#custom_area .workframe .title_box {text-align: center;margin-bottom: 50px;}
section .title_box .area_title {font-weight: bold;font-size: 45px;letter-spacing: 1.5px;}
section .title_box .sub_title {font-weight: 300;font-size: 21px;color: #000;letter-spacing: 1.5px;}

/* bg_box */
.bg_box {width: 100%;height: 100%;background: no-repeat 50% / cover;background-attachment: fixed;opacity: .3;top: 0;left: 0;z-index: -10;}
.bg_box:before {width: 100%;height: 100%;display: block;content: "";background-color: #d5e3ef;}
.bg_box.white:before { background: rgba(var(--white-rgb), .2); }

/* about_area */
#about_area{overflow: hidden;}
#about_area .info_box article { margin-bottom: 30px; width: 90%; line-height: 210%; letter-spacing: 1.5px; font-weight: 300; }
#about_area .nowrap_box{width: 100%;}
#about_area .nowrap_box .img_box{width: auto;margin-left: auto;float: left;}
#about_area .nowrap_box .info_box{position: absolute;top: 120px;right: 130px;width: 30%;background-color: #fff;padding: 40px 40px 40px 100px;z-index: 10;border: 1px dotted #636468;box-shadow: 18px 18px 0px rgb(29 55 121);}

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

/* news_area */
#news_area .list_box img { height: 320px; }
#news_area .list_box .info_box {padding: 5px 0px;}
#news_area .list_box .info_box .nowrap_box a {margin-right: 10px;max-width: calc(100% - 100px);font-weight: 400;z-index: 2;background-color: #1d3779;color: #fff;padding: 0 10px;}
#news_area .list_box .info_box .nowrap_box{}
#news_area .list_box .info_box p .time {width: 90px;font-weight: 300;color: #000;}
#news_area .list_box .info_box h3 {height: 34px;font-size: 20px;margin-bottom: 10px;}
#news_area .list_box .info_box p {height: 44px;font-size: 14px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
#news_area .list_box{width: 60%;margin-right: auto;}
#news_area:after{position: absolute;content: '';width: 710px;height: 560px;right: 0;bottom: 0px;background-image: url(/images/40/img-nebg.png);background-repeat: no-repeat;background-position: 95% 60%;background-size: 80%;z-index: -1;animation-name:newsbg;animation-duration:3s;animation-iteration-count:infinite;animation-direction:alternate;}
@keyframes newsbg{
	0%{background-position: 95% 35%;}
	100%{background-position: 95% 90%;}
}
#news_area .list_box ul li .over_hid{display: none;}

/* 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: 0px 0 0;}
#custom_area .tileJ ,.tileJ{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#custom_area .tileJ h2 ,.tileJ h2{
    letter-spacing: 6.5px;
    text-transform: uppercase;
    color: #3f5a9e;
    font-size: 95px;
    -webkit-text-stroke: 1px rgb(63 90 158 / 10%);
    -webkit-text-fill-color: transparent;
    margin-bottom: -32px;
    margin-left: -14px;
    font-family: "Cormorant Garamond", serifserif;
    font-weight: 300;
    line-height: 85%;
}
#custom_area .tileJ b , .tileJ b{
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 0.25em;
    color: #929292;
}
/*list-rule */
.list-rule{margin: 0px 0 0;}
.list-rule h2{font-size: 20px;color: #1d3779;background-color: #f3f7fa;padding: 20px 0 20px;font-weight: 400;background: #e5f2f9;}

@keyframes aboutbg{ 
0%{background-position: 0% 100%;}100%{background-position: 100% 100%;}
}
@-o-keyframes aboutbg{ 
0%{background-position: 0% 100%;}100%{background-position: 100% 100%;}
}
@-webkit-keyframes aboutbg{ 
0%{background-position: 0% 100%;}100%{background-position: 100% 100%;}
}
@-moz-keyframes aboutbg{ 
0%{background-position: 0% 100%;}100%{background-position: 100% 100%;}
}
@-ms-keyframes aboutbg{ 
0%{background-position: 0% 100%;}100%{background-position: 100% 100%;}
}
#custom_area .workframe{}#custom_area:before {position: absolute;width: 100%;height: 98%;background-image: url(/images/40/bg-bgabout.png);background-repeat: no-repeat;padding: 80px 0 50px;background-position: 50% 100%;animation-name: aboutbg;animation-timing-function: linear;animation-duration: 80s;animation-iteration-count: infinite;-moz-animation-name: aboutbg;-ms-animation-name: aboutbg;-o-animation-name: aboutbg;-webkit-animation-name: aboutbg;-moz-animation-timing-function: linear;-ms-animation-timing-function: linear;-o-animation-timing-function: linear;-webkit-animation-timing-function: linear;-moz-animation-duration: 80s;-ms-animation-duration: 80s;-o-animation-duration: 80s;-webkit-animation-duration: 80s;-moz-animation-iteration-count: infinite;-ms-animation-iteration-count: infinite;-o-animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;content: "";z-index: -10;}
#custom_box {overflow: hidden;position: relative;padding: 40px 0px 60px;z-index: -1;}
#custom_box ul{text-align: center;}#custom_box ul li{display: inline-block;margin: 10px 6px;border: 1px solid #ececec78;color: #fff;border-radius: 5px;padding: 10px 5px;font-family: 'Lato', sans-serif;font-weight: 500;background: #ffffff;cursor: pointer;transition: all 0.3s ease;position: relative;box-shadow: inset 2px 2px 2px 0px rgb(255 255 255 / 50%), 7px 7px 20px 0px rgb(0 0 0 / 4%), 4px 4px 5px 0px rgb(0 0 0 / 0%);overflow: hidden;}

/* 11 */
.btn-11:hover {text-decoration: none;color: #fff;}
.btn-11:before {position: absolute;content: '';display: inline-block;top: -180px;left: 0;width: 30px;height: 100%;background-color: #ececec;animation: shiny-btn1 3s ease-in-out infinite;}
#custom_box ul .btn-11:nth-child(2n):before{animation: shiny-btn1 3.5s ease-in-out infinite;}.btn-11:hover{opacity: .7;}
.btn-11:active{box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),-4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255,255,255,.2),inset 4px 4px 6px 0 rgba(0, 0, 0, .2);}

@-webkit-keyframes shiny-btn1 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


#custom_box li .row {margin: 10px 7px;padding: 0px;border-bottom: 2px #ffffff solid;border: 2px dotted rgb(183 183 183 / 40%);height: 413px;}
#custom_box li .row a{white-space: initial;}
#custom_box li .row h2 { font-size: 20px; }
#custom_box li .row article {margin-top: 10px;line-height: 160%;color: #000;font-weight: 400;text-align: center;font-size: 16px;padding: 10px 20px 20px;letter-spacing: 0.5px;}
#custom_box li .row .left{text-align: center;width: 120px;margin: auto;margin: 40px auto 0px;}
#custom_box li:hover .row .left{-webkit-transform: translateY(-10%);transform: translateY(-10%);animation-name: elementor-animation-buzz-out;animation-duration: .75s;animation-timing-function: linear;animation-iteration-count: 1;}
@keyframes elementor-animation-buzz-out {
	10% {transform: translateX(3px) rotate(2deg)}20% {transform: translateX(-3px) rotate(-2deg)}30% {transform: translateX(3px) rotate(2deg)}40% {transform: translateX(-3px) rotate(-2deg)}50% {transform: translateX(2px) rotate(1deg)}60% {transform: translateX(-2px) rotate(-1deg)}70% {transform: translateX(2px) rotate(1deg)}80% {transform: translateX(-2px) rotate(-1deg)}90% {transform: translateX(1px) rotate(0)}100% {transform: translateX(-1px) rotate(0)}
}

#custom_box li .row .title{letter-spacing: 1px;padding: 0px 20px 10px;text-align: left;font-weight: bold;border-bottom: 1px solid #d8d8d8;display: flex;-ms-flex-align: end;align-items: flex-end;-ms-flex-pack: justify;justify-content: space-between;font-size: 22px;font-weight: 700;color: #2f2f2f;transition: all 0.4s ease;}
#custom_box li .row .title .num {font-size: 40px;font-weight: 700;line-height: 160%;color: #d8d8d8;-webkit-transform: translateY(5px);transform: translateY(5px);transition: all 0.4s ease;-webkit-text-stroke: 1px rgb(47 47 47 / 20%);-webkit-text-fill-color: transparent;}
#custom_box li .row .title .word{font-size: 25px;}
#custom_box li .row .title .word:first-letter { margin-right: 1px;  color: #f9bb45; }
#custom_box li .row .inin{padding: 20px 0;}
#custom_box li .row .inin p{text-align: center;}
#custom_box li .row .inin p span{color: #000;font-size: 18px;font-weight: bold;}
#custom_area .titleBox{align-items: center;}
#custom_area .title_box .area_title{padding: 0 20px;background: #fff;text-align: center;display: inline-block;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;color: #0d4387;}

/* video */
#video .videowrap{position:relative;width:1420px;overflow:hidden;margin:0 auto;}
#video .videobox{position:relative;width:100%;}
#video .video-bg img{position: relative;width: 100%;min-height: 430px; left top;z-index:2}
#video video{width:100%;position:absolute;left: 0px; top: 0px;}
#video .video-info{position:absolute;left:14%;top:11%;z-index:20;color:#fff;width:400px}
#video .video-info .title span{color:#ef1234;font-size:14px;font-family:'Roboto';font-weight:700;display:block}
#video .video-info .title h3{padding-bottom:22px;position:relative;font-size:40px;color:#fff;font-weight:900;line-height:1.4}
#video .video-info .title h3::after{content:"";display:block;position:absolute;left:0;top:100%;width:40px;height:6px;background:#fff}
#video .video-info .desc{padding-top:30px;font-size:22px;font-weight:bold}
#video .video-info .videobtn{padding-top:30px}
#video .video-info .videobtn a{width:180px;height:37px;line-height:37px;display:inline-block;border:1px solid #fff;text-align:center;color:#fff;font-weight:400;background:#000;transition:background ease 0.4s}
#video .video-info .videobtn a:hover{background:#c81c28}
/* page */
#page-form .workframe {}
#page-form{padding: 30px 0 31px;color: #fff;width: 75%;margin: auto;-webkit-border-radius: 40px;overflow: overlay;z-index: 20;}
#page-form h2{text-align: center;color: #fff;font-weight: normal;font-size: 20px;margin: 0px 0 20px;background-color: rgba(255, 255, 255, 0.24);padding: 20px;}
#page-form h2 img{}
#page-form h2 b{margin: 0 10px;font-size: 24px;vertical-align: text-bottom;display: inline-block;}
#page-form form,
#page-form fieldset{border: 0;padding: 0;margin: 0;overflow: hidden;z-index: 99;}
#page-form .list{width: 47%;float: left;color: #fff;overflow: hidden;font-size: 17px;line-height: 120%;margin: 7px 0;height: 55px;padding: 0px 10px;}
#page-form .list label{width: 120px;display: inline-block;color: #000;}
#page-form .list span{display: inline-block;width: calc(100% - 130px);}
#page-form .list input,
#page-form .list select{font-size: 17px;}
#page-form .list select{border-top-right-radius: 0;border-top-left-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0;-webkit-appearance:none;background-image:url(/images/13/selectbutton.png);background-repeat:no-repeat;background-position:95% 50%;width: calc(100% - 10px);padding: 10px;background-color: #ffffffa1;border-radius: 10px;padding: 12px 13px;border: 1px solid #ccc;}
#page-form .list input[type="text"]{width: calc(100% - 30px);padding: 10px;margin-left: 5px;border-top-right-radius: 0;border-top-left-radius: 0;border-bottom-right-radius: 0;border-bottom-left-radius: 0;padding-bottom: 10px;border-radius: 10px;padding: 6px 8px;border: 1px solid #ccc;background-color: #fff;}
#page-form .list input#Checknum{width:100px;}
#page-form .list.last{width:100%;margin-top: 15px;padding-bottom: 30px;}
#page-form .list.last p{text-align:center;}
#page-form .list.last p.send{
	    position: relative;
	    display: flex;
	    flex-direction: column;
	    margin: 15px 5px;
	    align-items: center;
}
#page-form .list.last p input{-webkit-appearance:none;text-align: center;cursor: pointer;width: 130px;max-width: 90%;padding: 10px 5px;display: flex;flex-direction: column;justify-content: center;background: #e79548;color: white;align-items: center;border-radius: 7px;background: -webkit-linear-gradient(135deg,#214d6a 0,#2a6184 80%,#4778a0 100%);background: -webkit-linear-gradient(135deg,#214d6a 0,#2a6184 80%,#4778a0 100%);background: -o-linear-gradient(135deg,#df2626 0,#dd1f1f 50%,#d90b0b 100%);background: linear-gradient(135deg,#214d6a 0,#2a6184 80%,#4778a0 100%);font-size: 15px;}
@-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; } }


/* list_faq */
.list_faq{
    margin: 30px auto 0;
}
.list_faq ul li {margin-bottom: 0;border-bottom: 2px solid rgba(0, 0, 0, 0.04);}
.list_faq ul{
	    box-shadow: 0 16px 24px 0 rgb(0 0 0 / 6%), 0 2px 6px 0 rgb(0 0 0 / 4%);
	    border-radius: 10px;
	    background: white;
}
.list_faq ul li .title {position: relative;padding: 20px 65px 20px 25px;/* background: #ffffff; */display: block;}
.list_faq ul li .title font {font-size: 19px;color: #6b6b6c;}
.list_faq ul li .title span { position: absolute; width: 16px; height: 16px; display: block; top: calc((100% - 16px) / 2); right: 25px; }
.list_faq ul li .title span:before , .list_faq ul li .title span:after { width: 16px; height: 1px; background: #696969; display: block; content: ""; -webkit-transform: translateY(9px); transform: translateY(9px); }
.list_faq ul li .title span:after { -webkit-transform: translateY(8px) rotate(90deg); transform: translateY(8px) rotate(90deg); }
.list_faq ul li .info {padding: 15px 25px;background: #f4f4f4;-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;color: #666666;font-weight: 300;border-left: #8f8f8f 2px solid;}
.list_faq ul li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); }


@media screen and (max-width: 1420px) {
	#video .videowrap,.srcollBtn{width: 100%;}
}
@media screen and (max-width: 1440px) {
	#custom_box li .row .title .word{font-size: 20px;}
	#custom_box li .row{    height: 382px;}
}
@media screen and (min-width: 1281px) {
	#page-form .list.last p input:hover{background: #3f5a9e;}
}
@media screen and (max-width: 1280px) {
	#page-form .workframe{width:90%;}
}
@media screen and (max-width: 960px) {
	#videoWrap{height: 430px;}
	#page-form .list{width: 94%;height:auto;margin: 7px 0;}
	#page-form .list:first-child p.ra span{ width:auto;}
	#page-form {background-color: #ffffff82;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding: 40px 0 40px;color: #fff;background-attachment: fixed;width: 90%;margin: auto;-webkit-border-radius: 40px;}
}
@media screen and (max-width: 900px) {
	#videoWrap{height: 380px;}
	#video video{width: 120%;}
}
@media screen and (min-width: 1281px){
	#book_area .list_box li:hover .badge { background: var(--primary); color: var(--white); }
	#custom_box li:hover .row {}
}
@media screen and (max-width: 1140px){
	#about_area .nowrap_box .info_box{position: absolute;top: 80px;right: 150px;width: 60%;background-color: #ffffffe0;padding: 40px 20px 40px 30px;box-shadow: 18px 18px 0px rgb(29 55 121 / 49%);}
	#custom_area .title_box .area_title, section .title_box .area_title{font-size: 30px;}
	section .title_box .sub_title{font-size: 17px;letter-spacing: 0.5px;}
	#about_area .info_box article{width: 95%;line-height: 180%;letter-spacing: 0.5px;font-size: 15px;}#news_area:after{background-size: 60%;width: 710px;height: 410px;}
	#about_area{margin: 0vw 0 0vw;}
	section.section_pad {padding: 9vw 0;margin: 0vw 0 0vw;}
	#custom_area:before{}
}
@media screen and (max-width: 768px){
	#custom_area {margin: 30px 0 0;}
	#news_area .list_box{width: 100%;}
	#custom_area .workframe .title_box {margin-bottom: 10px;}
	#video video{min-width: 870px;}
	#video .video-info{width: 270px;}
	#video .video-info .title h3{font-size: 25px;}
	#video .video-info .desc{font-size: 20px;}
	#news_area .list_box .info_box { padding: 15px 0; }
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .row {margin: 10px 15px;padding: 10px 0;height: 400px;}
	#page-form .list select{width:100%;}
	#page-form .list input[type="text"]{    width: calc(100% - 21px);}
	#page-form .list input#Checknum{margin-left: 0;}
	#custom_box {padding: 10px 0px 20px;}
	#news_area:after{display: none;}
	#about_area .nowrap_box .info_box{top: 50px;right: 20px;width: 86%;padding: 40px 20px 40px 30px;}
}
@media screen and (max-width: 640px){
	.tileJ h2{
        font-size: 41px;
        margin-bottom: 2px;
    }	
    .tileJ b{
        font-size: 20px;
    }
	#book_area .list_box img { height: 65vw; }
	 #custom_area .tileJ h2{
        font-size: 41px;
        margin-bottom: 2px;
    }	
    #custom_area .tileJ b{
        font-size: 20px;
    }
    .pc_boxJ{
        display:none;
    }
	.list-rule h2{
    font-size: 14px;
    font-weight: 400;
    padding: 0 0;
}
}
@media screen and (max-width: 450px){
	#product_area .bgBox { width: 100%; object-fit: cover; }
	#video video{min-width: 880px;}
	#page-form {background-color: rgb(255 255 255 / 48%);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding: 20px 0 0px;color: #fff;background-attachment: fixed;width: 90%;margin: auto;-webkit-border-radius: 40px;}
	#about_area .nowrap_box .info_box{top: 50px;right: 0px;width: 80%;padding: 40px 20px 40px 30px;}
}
@media screen and (max-width: 420px) {
	#video .video-info{width: 180px;}
	#video .video-info .title h3{font-size: 22px;}
	#video .video-info .desc{font-size: 16px;}
	#video .video-info .title h3::after{height: 4px;}
}