@import url('/css/fontawesome-all.css');
@import url('/css/font-awesome.min.css');
@import url('/css/fontawesome.min.css');
@import url('/css/all.min.css');
@import url('/css/SeoJump.css');
@import url('/css/contentBuilder.css');
@import url('root.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Sans:wght@400;700&family=Noto+Serif+SC:wght@200;300;400;500;600&family=Noto+Serif+TC:wght@200;300;400;500;600&family=Noto+Serif:wght@400;700&family=Frank+Ruhl+Libre:wght@300;400;500;700;900&display=swap');

/* main.less */
.webBox *,.webBox:before,.webBox:after{transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;}.webBox header #menubtn[data-type="2"] a span:nth-child(1){transform:rotate(45deg);-webkit-transform:rotate(45deg);}.webBox header #menubtn[data-type="2"] a span:nth-child(3){transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}@media (min-width:1281px){.webBox header #webmenu li .menu_body{transform:translate(0,30px);-webkit-transform:translate(0,30px);}.webBox header #webmenu li .menu_body .subOption li ul{transform:translate(30px,0);-webkit-transform:translate(30px,0);}.webBox header #webmenu li .menu_body .subOption li ul li > ul{transform:translate(30px,0);-webkit-transform:translate(30px,0);}.webBox header #webmenu li .menu_body .subOption li ul li:hover > ul{transform:translate(0,0);-webkit-transform:translate(0,0);}.webBox header #webmenu li .menu_body .subOption li:hover > ul{transform:translate(0,0);-webkit-transform:translate(0,0);}.webBox header #webmenu li:hover .menu_body{transform:translate(0,0);-webkit-transform:translate(0,0);}}.webBox #top_search #close_search font{transform:rotate(45deg);-webkit-transform:rotate(45deg);}.webBox .slick-dots li:before{width:8px;height:8px;border-radius:50%;}.webBox .img_scale img{transform:scale(1);-webkit-transform:scale(1);}@media (min-width:1281px){.webBox .img_scale:hover img{transform:scale(1.1);-webkit-transform:scale(1.1);}}.webBox #playYoutu{width:100px;height:100px;border-radius:50%;}.webBox #picture_list img{width:80px;height:80px;border-radius:50%;}.webBox #SeoStarRating font{margin-right:5px;display:inline-block;line-height:110%;vertical-align:text-bottom;color:#ffc107;}.webBox #SeoStarRating font *{color:#ffc107;}.webBox #SeoStarRating font:first-child{font-weight:bold;font-size:18px;}.webBox #SeoStarRating font:last-child{color:#7791b1;}.webBox #webSeo .seo{-webkit-animation:marquee 50s linear infinite;animation:marquee 50s linear infinite;}@media (max-width:768px){.webBox #webSeo .seo{-webkit-animation:marquee 30s linear infinite;animation:marquee 30s linear infinite;}}@media (max-width:550px){.webBox #webSeo .seo{-webkit-animation:marquee 20s linear infinite;animation:marquee 20s linear infinite;}}.webBox #gotop a{width: 40px;height: 40px;border-radius:50%;background-color: #ffffff;}.webBox #gotop a:before{transform:rotate(45deg);-webkit-transform:rotate(45deg);}

* { margin: 0; padding: 0; }
*:focus { outline: none; }

body { margin: 0; background: var(--white); }
body ::selection { background: rgba(var(--black-rgb), .1); text-shadow: none; color: var(--info); }
body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track { background: rgba(var(--info-rgb), .3); }
body::-webkit-scrollbar-thumb { background: var(--primary); }

header, footer, div, nav, article, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, ul, li, img, svg, span, font, strong, b, a, i { text-align: left; vertical-align: middle; word-wrap: break-word; word-break: break-word; line-height: 170%; border-width: 0; font-family: var(--font-family), sans-serif; font-size: 16px; color:  var(--info); }

ul , ol { list-style: none; }

fieldset { border: 0; }

input , button , select , textarea {padding: 10px 25px;width: calc(100% - 50px);border: 0;border-bottom: 1px var(--primary) solid;background: none;box-shadow: none;outline: none;font-size: 16px;-webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: #fff;}
select{-webkit-appearance:none;background: url(/images/39/icon-triangle.png) no-repeat scroll 98% center #ffffff;background-repeat:no-repeat;background-position:98% 50%;padding: 18px 25px;width: 100%;font-size: 16px;color: #282828;font-weight: 500;}

/* img */
img { max-width: 100%; }
.img_cover { width: 100%; object-fit: cover; }
.img_contain { width: 100%; object-fit: contain; }

a , a:link , a:visited , a:hover { text-decoration: none; white-space: pre-wrap; }

/* general class set */
.txt_clamp { overflow: hidden; height: 27px; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.d_inblock.txt_clamp { display: -webkit-inline-box; }
.atag_item { width: 100%; height: 100%; top: 0; left: 0; }
.nowrap_box { font-size: 0; }

/* btn */
.btn , .btn_outline { padding: 2px 10px; background-color: transparent; border: 1px solid transparent; border-radius: 2px; text-align: center; color: var(--info); }

/* badge  */
.badge { padding: 2px 10px; box-shadow: none; }
.badge_lighten { padding: 0 4px; min-width: 22px; border-radius: 3px; font-weight: 400; text-align: center; font-size: 12px; vertical-align: text-bottom; }

/* photo,bgBox */
a.photo , .bgBox { overflow: hidden; background: no-repeat 50% / cover; display: block; }

/* fancybox */
[class^="fancybox-"] , [class^="fancybox-"] * , .slick-track , .fa , .fas , .fa:before , .fas:before , .fa:after , .fas:after , .trans_none_box { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }

/* webBox */
.webBox { overflow: hidden; position: relative; width: 100%; }
.webBox .pageh1 { position: absolute; top: 0; z-index: 1; }
.webBox .wrapper {position: relative;background-color: #f2f2f2;z-index: 2;}
.webBox .slick-slider { margin-bottom: 0; }
.webBox .wrapper_lines {width: 100vw;height: 100vh;top: 0;left: 0;z-index: 1;display: none;}
.webBox .wrapper_lines .center_box { height: 100vh; border: rgba(var(--info-rgb), .1) solid; border-width: 0 1px; }

/* .slick-dots */
.webBox .slick-dots { position: relative; margin-top: 45px; bottom: 0; }
.webBox .slick-dots li { width: 10px; height: 10px; display: inline-flex; }
.webBox .slick-dots li:before { margin: auto; display: block; border: 1px rgba(var(--white-rgb), .2) solid; content: ""; }
.webBox .slick-dots li.slick-active:before { border-color: var(--primary); }

/* workframe */
.workframe {margin: 0 auto;width: 90%;}

/* header */
header{position:fixed;width:100%;font-size:0;top:0;left:0;background-color: rgba(22, 22, 23);z-index:999}
header.scroll{background: #000;}
header.scroll .top-wrap{border-bottom: 0;}
header #menubtn{width: 60px;height: 60px;top: 10px;right:0;z-index:999}
header #menubtn a{margin:auto;width:28px;height:20px}
header #menubtn a span{position:absolute;width:100%;height:1px;background: #ffffff;display:block;top:0;right:0}
header #menubtn[data-type="1"] a span{transition:transform .4s cubic-bezier(.215,.61,.355,1),opacity .4s cubic-bezier(.215,.61,.355,1),-webkit-transform .4s cubic-bezier(.215,.61,.355,1)}
header #menubtn[data-type="1"] a span:nth-child(2){top:calc(50% - .5px)}
header #menubtn[data-type="1"] a span:nth-child(3){top:calc(100% - 1px)}
header #menubtn[data-type="2"] a span{transition:.4s cubic-bezier(.645,.045,.355,1)}
header #menubtn[data-type="2"] a span:nth-child(1),header #menubtn[data-type="2"] a span:nth-child(3){top:50%;background: #ffffff;}
header #menubtn[data-type="2"] a span:nth-child(2){opacity:0}

header .top-wrap{position:relative;align-items:center;transition:all 0.5s;display: grid;grid-template-columns: 300px 1fr;gap: 20px;justify-content: center;width: 80%;margin-left: auto;margin-right: auto;}
header #cis{display:inline-block;text-align:center;position: relative;padding: 10px;overflow: hidden;}
header #cis:before{content: "";position: absolute;width: 1px;height: 90px;background: rgba(255, 255, 255, 0.2);top: 0px;right: 0;}
header #menuIcon{width:40%;display:inline-block;text-align:right;color:#bdad84;vertical-align:top}
header #menuIcon b{padding:10px 0;display:inline-block}
header #menuIcon font{position:relative;margin-right:10px;width:25px;height:25px;display:inline-block;text-align:center;line-height:23px;color: #ffffff;vertical-align:middle}
header #menuIcon span{position:absolute;width:20px;height: 2px;background: #ffffff;display:block;top:5px;left:3px}
header #menuIcon span:nth-child(2){width: 20px;top: 12px;left: 3px;}
header #menuIcon span:nth-child(3){top:19px}
header #menuIcon[data-type="2"] span:nth-child(1){-webkit-transform:translate3d(0,7px,0) rotate(45deg);transform:translate3d(0,7px,0) rotate(45deg);transition-delay:0.1s}
header #menuIcon[data-type="2"] span:nth-child(2){width:0;height:0}
header #menuIcon[data-type="2"] span:nth-child(3){-webkit-transform:translate3d(0,-7px,0) rotate(-45deg);transform:translate3d(0,-7px,0) rotate(-45deg);transition-delay:0.1s}
header #mbMenu{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 15px 0 0px;margin:0 auto;justify-content:flex-end;flex:1;margin-right: 5px;}
header #mbMenu .btnBox{text-align:right}
header #mbMenu .btnBox a{margin:0 10px;height:27px;display:inline-block;line-height:27px;color:#bdad84}
header #mbMenu nav>ul{position:relative;text-align:center;font-size:0;padding:0}
header #mbMenu nav>ul>li{position:relative}
header #mbMenu nav>ul>li>p>a{color: #fff;display:flex;font-size: 15px;padding: 20px 20px;letter-spacing: 1.2px;flex-direction:column;align-items:center;line-height: 100%;}
header #mbMenu nav>ul>li>p>a:after{font-size:12px;position:absolute;bottom:-40px;color:#cb2c2b;zoom:95%}
header #mbMenu nav>ul>li:hover>p>a:after{bottom:4px}
header #mbMenu nav>ul>li>p>a:hover{color:#ca2423}
header #mbMenu nav>ul>li .menu_body ul{position:relative;font-size:0;text-align:center}
header #mbMenu nav>ul>li .menu_body .subOption li{position:relative;overflow:hidden;display:inline-block;border-bottom:0}
header #mbMenu nav>ul>li .menu_body .subOption li>div a{width: 120px;color: #000000;max-height:initial;overflow:hidden;-webkit-line-clamp:1;text-overflow:ellipsis;font-size:14px;display:block;letter-spacing:0.8px;padding:10px 15px;font-weight: 500;}
header #webmenu{
    display: grid;
    grid-template-columns: 1fr 200px;
    width: 100%;
}
header #webmenu nav ul li b{position:absolute;right: 0px;padding-left: calc(100% - 50px);padding-right: 15px;width:35px;height:40px;display:inline-block;text-align:center;line-height: 40px;top:calc((100% - 41px) / 2);cursor:pointer}
header #webmenu nav ul li b i{color: #8e8e8e;}
header #webmenu nav >ul >li .subOption li >div a{padding:6px 10px;display:block}
header #rightBox{position:relative;display:flex;}
header #rightBox .contentboxJ{display:flex}
header #rightBox .contentboxJ a.masjk{position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
header #rightBox .contentboxJ:hover .callJtop{background: #069feb;}
header #rightBox .contentboxJ .lineJtop{display:flex;flex-direction:column;align-items:center;position:absolute;top:-20px;left:-160px}
header #rightBox .contentboxJ .lineJtop a{display:flex;flex-direction:column;align-items:center;background:#33b51d;padding:18px 25px}
header #rightBox .contentboxJ .lineJtop a:hover{background:#4cc438}
header #rightBox .contentboxJ .lineJtop span{color:white}
header #rightBox .contentboxJ .lineJtop b{color:white;letter-spacing:0;font-size:14px;font-family:"Lora",serif}
header #rightBox .contentboxJ .lineJtop a svg{width:30px;height:30px;fill:white;margin-bottom:3px}
header #rightBox .contentboxJ .callJtop{display:flex;align-items:center;padding: 0 22px;background-color: #d1040d;}
header #rightBox .contentboxJ .callJtop a p{line-height:100%;font-size: 18px;letter-spacing:0;margin-bottom:3px;color: white;}
header #rightBox .contentboxJ .callJtop a span{font-size:22px;font-weight: 700;line-height:100%;color: white;}
header #rightBox .contentboxJ .callJtop a{display:flex;flex-direction:column;justify-content:center}
header #rightBox .contentboxJ .callJtop svg{width: 18px;aspect-ratio: 1/1;fill: #ffffff;margin-right: 12px;}
header #rightBox .socialBox a{padding:10px}
header #rightBox .socialBox a img{width:20px;height:20px;transition:0.6s}

/* top_search */
#top_search { width: 100%; height: 100%; background: rgba(var(--secondary-rgb), .6); z-index: 999; }
#top_search form { margin: auto; padding: 60px 50px; width: 500px; box-shadow: 0 0 10px rgba(var(--black-rgb), .2); }
#top_search #close_search { padding: 10px 15px 15px; border-left: 1px var(--info) solid; top: 0; right: 0; }
#top_search #close_search font { margin: 5px auto; width: 30px; height: 30px; }
#top_search #close_search font:before , #top_search #close_search font:after { position: absolute; width: 100%; height: 1px; background: var(--info); display: block; content: ""; top: calc((100% - 1px) / 2); left: 0; }
#top_search #close_search font:after { width: 1px; height: 100%; top: 0; left:  calc((100% - 1px) / 2); }
#top_search #close_search span { font-family: 'Frank Ruhl Libre', serif; }
#top_search h3 { margin-bottom: 40px; font-weight: 300; font-size: 28px; }
#top_search p >input { padding: 5px 45px 5px 15px; width: calc(100% - 60px); background: none; border: 0; }
#top_search p >a { top: 4px; right: 10px; }
#top_search p >a svg { width: 25px; height: 25px; }

/* menubg */
#menubg { width: 100vw; height: 100vh; top: 0; left: 0; }
#menubg[data-type="1"] { background: rgba(var(--secondary-rgb), 0); z-index: -998; }
#menubg[data-type="2"] { background: rgba(var(--secondary-rgb), .5); z-index: 998; }

/* other_area */
#other_area { z-index: 5; }
#other_area .bg_fix { background: no-repeat 50% / cover; background-attachment: fixed; }
#other_area .bg_fix:before { position: absolute; width: 100%; height: 100%; background: var(--secondary); display: block; top: 0; left: 0; opacity: .8; content: ""; }
#other_area #youtube_box { padding: 5vw 0 0; width: calc(100% - 430px); }
#other_area #playYoutu { background: rgba(var(--primary-rgb), .6); display: block; text-align: center; line-height: 97px; }
#other_area #playYoutu i { font-size: 37px; color: var(--white); }
#other_area #custom_box { margin: 30px 0 0 30px; width: 400px; bottom: -60px; }
#other_area #custom_box >ul { padding: 30px 50px; }
#other_area #custom_box >ul h3 { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px rgba(var(--white-rgb), .2) solid; letter-spacing: 5px; font-weight: 400; font-size: 22px; }
#other_area #custom_box >ul article { letter-spacing: 2px; line-height: 210%; font-weight: 100; font-size: 15px; }
#other_area #picture_list { width: calc(100% - 430px); }
#other_area #picture_list img { margin: 15px; }

/* footer */
footer{background-image: url(/images/39/img-f-bg.jpg);padding: 50px 0 20px 0;background-size: cover;}
footer *{font-weight: 400;font-size: 13px;font-family: 'Montserrat', sans-serif;color: #ffffff;}
.footerInfoBox{display: flex;align-items: center;}
footer #flogo span{display:block;margin:20px 0}
footer #flogo span img{width:300px;height:70px;-webkit-filter:contrast(0) brightness(150%);filter:contrast(0) brightness(200%)}
footer #f_left{padding: 20px 0px;display: grid;grid-template-columns: repeat(4, 1fr);}
footer #f_left .tit{margin-bottom: 15px;width:100%}
footer #f_left .tit b{position:relative;display:inline-block;color:#fff;text-transform:uppercase;font-size: 18px;font-weight:600}
footer #f_left .tit font{font-size:15px;color:#d4d4d4}
footer #f_right .tit{text-align:end;padding-bottom:10px;margin-bottom:20px}
footer #f_right .tit b{font-weight:400;color:#fff;font-family: 'Montserrat', sans-serif;text-transform:uppercase}
footer #f_right ul li{position:relative}
footer #f_right ul li:after{margin:0px 10px;display:inline-block;font-weight:100;background-color:#c8c8c870;width:1px;height:12px;content:""}
footer #f_right ul li:last-child:after{display:none}
footer #f_nav a{margin: 5px 5px;}
footer #f_contact{display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;flex-direction:column;margin-right: 0px;margin-bottom: 20px;width: 90%;}
footer #f_contact p{margin:0;display:flex;padding-bottom:5px}
footer #f_contact p font{line-height:140%;font-weight:500;font-size: 15px;width: 100%;letter-spacing: 1px;}
footer #f_contact p font.txt_primary_5{margin-right:10px;width:20px;color:#bababa}
footer #f_contact p font.txt_primary_5 svg{width:15px;height:15px;fill: #5b5b5b;}
footer #f_bottom{display:flex;align-items:center;justify-content: flex-end;}
footer #footer-qrcode{width:120px}
footer .ftbtn-sec{display:flex;margin-bottom:10px;margin-top:30px}
footer .ftbtn-box{margin-right:10px}
footer .ftbtn-sec a{display:flex;align-items:center;justify-content:center;padding:11px 20px;transition:.3s ease;width:130px}
footer .ftbtn-box{background:#227844}
footer .mail{background:#0068a8}
footer .ftbtn-sec a span{color:#fff}
footer .ftbtn-sec a:hover{transition:.3s ease;opacity:0.5}
footer .ftbtn-sec svg{width:20px;height:20px;fill:#ffffff;margin-right:12px}
footer .ftbtn-sec img{width:19px;height:19px;margin-right:12px}
footer #f_other{display:flex;}
footer #f_nav{padding:30px 0;display:flex;align-items:center;justify-content:space-between}
footer #f_nav a:not(:nth-last-of-type(1)){border-right:1px solid rgba(255,255,255,0.2)}
footer #f_nav a{font-weight:600;font-size:15px;color:#ffffff;padding:0 10px 0 0px}
footer #f_nav span{width:1px;height:15px;background:rgb(255 255 255 / 60%);display:block}
footer #copyright p,footer #copyright p a{color:#ffffff;opacity:0.8;font-weight:300;font-size:12px}
footer #copyright p a{margin-left:2px}
footer #copyright{display:flex;justify-content:flex-start;margin-top:20px}
footer .f_top{display:flex;align-items: flex-start;flex-direction: column;}
footer #f_info{margin-right: 60px;}
footer .language_box{display: grid;grid-template-columns: repeat(3, 1fr);}
footer .language_box a svg{width:25px;height:25px;aspect-ratio:1/1;fill:#fff;margin: 30px 15px 15px;}


/* webSeo */
#webSeo { padding: 10px 0; white-space: nowrap; box-sizing: border-box; }
#webSeo .seo { padding-left: 100%; font-family: var(--font-family), sans-serif; font-weight: 100; font-size: 13px; color: var(--info); }

/* gotop */
#gotop {right: 10px;bottom: 10px;z-index: 2000;}
#gotop a { border: 1px var(--primary) solid; }
#gotop a:before { position: absolute; width: 30%; height: 30%; border: solid var(--primary); border-width: 1px 0 0 1px; display: block; top: calc((100% - 7px) / 2); left: calc((100% - 15px) / 2); content: ""; }

@-webkit-keyframes marquee { 0% { -webkit-transform: translate(0, 0); } 100% { -webkit-transform: translate(-100%, 0); } }
@keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }

@media (max-width: 1540px) {
	header #cis{
    margin-left: 20px;
}
	header #rightBox{}
    header .top-wrap{
    width: 95%;
    grid-template-columns: 310px 1fr;
}
    header #cis:before{
    height: 80px;
}
}

@media screen and (min-width: 1441px){
	.workframe {width: 1366px;}
}
@media (max-width: 1366px) {
        header .top-wrap{
    width: 100%;
    grid-template-columns: 250px 1fr;
    padding: 6px 0;
}
}
@media screen and (min-width: 1281px){
	.webBox .slick-dots li:hover:before { border-color: var(--primary); }
	header #webmenu nav ul li b{display:none}
	header #webmenu nav ul li:hover{overflow:visible}
    header #webmenu nav >ul >li >p a {padding: 26px 10px;letter-spacing: 0.5px;font-weight: 400;position:relative;font-size: 16px;}

   header #webmenu nav >ul >li p a.txt_white_5:after{content:'';width:1px;height:12px;display:block;border-right: 1px solid #ffffff;position:absolute;right:0px;top:calc(50% - 5.5px);opacity: .5;}
header #webmenu nav >ul >li:last-child p a.txt_white_5:after{display:none}
	header #menuBox .box::-webkit-scrollbar{width:0}
    header #webmenu{
    position: relative;
}
	.webBox header #webmenu li .menu_body{transform:translate(0,30px);-webkit-transform:translate(0,30px);-moz-transform:translate(0,30px);-ms-transform:translate(0,30px);-o-transform:translate(0,30px)}
	header #webmenu li .menu_body,header #webmenu li .menu_body .subOption li ul{width:160px;left:calc(50% - 80px);z-index:1;opacity:0}
	header #webmenu li .menu_body ul{-webkit-box-shadow:0 0 10px rgb(0 0 0 / 10%);box-shadow:0 0 10px rgb(0 0 0 / 10%);text-align:left}
	header #webmenu li .menu_body ul{display:block}
	header #webmenu li .menu_body ul li{background-color:rgb(255 255 255 / 88%);margin:0;position:relative}
	.webBox header #webmenu li .menu_body{transform:translate(0,30px);-webkit-transform:translate(0,30px);-moz-transform:translate(0,30px);-ms-transform:translate(0,30px);-o-transform:translate(0,30px)}
	.webBox header #webmenu li:hover .menu_body{transform:translate(0,0);-webkit-transform:translate(0,0);-moz-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0)}
    header #webmenu li .menu_body .subOption li ul{position:absolute;top:0;left: 160px;}
	header #webmenu li .menu_body .subOption li >div a{padding: 8px 10px;font-size:15px;color: #474747;}
	header #webmenu li .menu_body .subOption li >div a:hover{color: #ffffff;background-color: var(--primary);}
	header #webmenu li .menu_body .subOption li >div a{display:block;padding: 8px 10px;font-size:15px;color: #474747;background-color: rgb(255 255 255 / 88%);word-wrap:break-word;position: relative;}
    header #webmenu li .menu_body ul li:before{display: none;}
    header #webmenu li:hover .menu_body,header #webmenu li .menu_body .subOption li:hover >ul{z-index:10;opacity:1}
 	footer #extra ul li:hover img { display: block; }
}
@media screen and (max-width: 1280px){
	header #linelink .member_other,header #linelink[data-type="2"] .member_other{right:-50%;width:120px;-webkit-transform:translate(0%,70%);transform:translate(0%,70%)}
	header #linelink .member_other p a{padding:13px 10px}
	header .top-wrap{padding: 20px;display:flex;justify-content:space-between;border-bottom: 0;width: calc(100% - 40px);}
	header #rightBox{margin:0;display:none}
	header #cis{display:inline-block;text-align:left;margin-left:0;width: 200px;padding: 0;}
	header #cis:before{display: none;}
	header #mbMenu{overflow-y:scroll;position:fixed;top:81px;left:0;width:100%;height:0;margin-left:auto;padding:0;-webkit-transition-duration:.35s;transition-duration:.35s;background:#cb2c2b;display:inline-block}
	header #mbMenu::selection{background:#dedede;text-shadow:none}
	header #mbMenu::-webkit-scrollbar{width:5px}
	header #mbMenu::-webkit-scrollbar-track{background:#d0d0d0}
	header #mbMenu::-webkit-scrollbar-thumb{background:#4d4d4d}
	header #mbMenu::-webkit-scrollbar-thumb:hover{background:#b1b1b1}
	header #webmenu{width: 360px;height:calc(100vh - 0px);background: #000000;box-shadow:0 20px 30px rgba(var(--black-rgb),.2);right:calc(-1 * var(--width-xs));z-index:998;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;top:0}
	header #webmenu nav{overflow-y:scroll;padding:70px 0px 0px 0px;height:auto;width:100%}
	header #webmenu nav::-webkit-scrollbar{width:0}
	header #webmenu nav >ul{margin-bottom:30px;margin-top:10px}
	header #webmenu li .menu_body,header #webmenu li .menu_body .subOption li ul{position:relative;display:none;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}
	header #webmenu li .menu_body ul{padding:10px 20px;display:flex;flex-wrap:wrap;background-color: #3b3b3b;flex-direction:column}
	header #webmenu li .menu_body .subOption .bo{position:relative;width: 100%;}
	header #webmenu li .menu_body .sub2Option a{font-weight:300;color: #ffffff9e;);}
	header #webmenu li .menu_body .sub3Option a{color:var(--complement)}
	header.scroll #webmenu{height:calc(100vh - -100px)}
	header #webmenu nav >ul >li >p a{color:#ffffff;display:flex;flex-direction:column;align-items: flex-start;border-bottom:1px solid #0000001a;padding: 20px;}
	header #webmenu nav >ul >li >p a span.cn{color:#ececec}
	header #webmenu nav >ul >li >p a span.en{color:#005a83;font-family:'Italiana',sans-serif;font-size:14px}
	header #webmenu nav >ul >li{margin-left:0px;border-bottom:1px solid rgb(255 255 255 / 9%)}
	header #webmenu nav >ul >li .subOption li >div a{color:var(--white);}
	header #webmenu nav >ul >li .subOption li{position:relative;width:100%}
	header #webmenu nav >ul >li .subOption li .sub2Title{display:inline-block;font-size:14px;font-weight:400}
	
	header form#hSearch{top:131px;right:235px}	
}
@media screen and (min-width: 1025px) {
	.phoneWrap{display: none !important;}
}
@media screen and (max-width: 1024px){
    footer{padding: 50px 0 70px 0;}
	.phoneWrap{display:flex;position:fixed;bottom:0px;left:0px;width:100%;z-index:5;flex-direction:column}
	.phoneWrap ul{display:flex;padding:0;margin:0}
	.phoneWrap ul li{width:50%;box-sizing:border-box;background-color: #f00;}
	.phoneWrap ul li:last-child{background-color: #23a321;}
    .phoneWrap ul li + li{border-left:1px solid #fff}
	.phoneWrap ul li svg{width: 18px;aspect-ratio: 1/1;fill: #ffffff;margin-right: 12px;}

    .phoneWrap ul li a{display:inline-block;width:100%;color:#fff;text-align:center;padding: 10px 0px;}
	footer #f_nav a { margin: 5px 10px; }
	footer #f_contact { margin-top: 15px; }
    footer #f_bottom{display: flex;justify-content: center;}
    #gotop{bottom: 60px;}
}
@media screen and (max-width: 980px) {
	footer #f_left{grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 768px){
	#other_area #custom_box { bottom: 0; }
	#other_area #picture_list { width: 100%; }
}
@media screen and (max-width: 760px){
	footer #extra { margin-top: 10px; }
	.webBox .wrapper_lines .center_box >div { border-width: 0 0 0 1px; }
}
@media screen and (max-width: 640px){
	header #mbMenu .btnBox{text-align:center;padding:0}
	header form[name="hSearch"]{top:143px;right:-100%}
	header form#hSearch{top:143px;right:calc(35% / 2)}
	#picture_box .workframe { width: 100%; }
}
@media screen and (max-width: 550px){
	header #webmenu , #other_area #youtube_box { width: 100%; }
	#top_search form { padding: 10vw 5vw; width: 80vw; }
	#top_search #close_search { padding: 10px 15px; border: 0; }
	footer #f_contact p font:first-child { margin-right: 10px; }
	#other_area #custom_box { margin: 30px auto; width: 100%; }
	.footerInfoBox{display: flex;flex-direction: column;align-items: center;}
	#other_area #custom_box >ul { padding: 7vw; }
	footer #f_left {grid-template-columns: repeat(1, 1fr);}
}