/*
https://patorjk.com/software/taag/#p=display&f=Small&t=body

   __                    
  / _|_ _ __ _ _ __  ___ 
 |  _| '_/ _` | '  \/ -_)
 |_| |_| \__,_|_|_|_\___|
                         
*/



:root {
    --body:#f7f8fb;
    --gray:#8e8f95;
    --bggray:#f1f2f8; 
    --bglightgray:#f9fafb; 
    --hover:#c1c2c8; 
    --border:#dfe1e9; 
    --gray:#c1c2c8; 
    --gray2:#dadbdf; 
    --lightgray:#edeef3;
    --darkgray:#4c4d4e;
    --dblue:#3e52c3;
    --dgreen:#ae8a1d;
    --black:#333;
    --red:#ec1929;
    --darkred:darkred;
    --orange:#fe761a;
    --pink:#ffd5c0;
    --blue:blue;
    --darkred:#9d1414;
    --error:#ff5722;
    --overlay:rgba(50,50,50,.8);
    --grayrow:#e1e3ea;
    --graygradient:linear-gradient(165deg, rgba(85,58,57,1) 0%, rgba(65,65,65,1) 35%);

    --headerh:4.4rem;
    --megaheight:20vw;/*42vw;*/



    --maxw-l:1500px;
    --maxw:1200px;
    --maxw-s:calc(100% - 2em);
}







html { xxoverflow-y:scroll; font-size:1em; }
html.overflow { overflow-x:hidden; }
html,body { display:block; box-sizing:border-box; padding:0; margin:0; overflow-x:hidden; }
body { xxoverflow-y:hidden; background-size:800px; background-repeat:no-repeat; background-position:0 0; }
body { xxxbackground-image:url(../images/bgpattern1.jpg); }
body { xxxbackground-image:url(../images/test.jpg); background-size:1700px; }
body { background-image:url(../images/test.jpg); background-size:1000px; }
body.testversion:before { content:'DEVELOPMENT VERSION'; color:#1ee91e; font-weight:bold; text-align:center; display:block; background:#0083ff; width:auto; padding:1em 10em; position:fixed; bottom:0; right:0; z-index:11111; pointer-events:none; transform:rotate(-25deg); transform-origin:12em -10em; zoom:2; box-shadow:0 2px 10px rgba(0,0,0,.2); }
* { box-sizing:border-box; padding:0; margin:0; font-family:'Noto Sans TC','微軟正黑體',Arial,'Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; line-height:160%; transition:none; position:relative; color:var(--black); font-size:.94rem; }
/*h3,h2,h1,*/
.wc { font-family:'Noto Serif TC','Times New Roman',Garamond,"ヒラギノ明朝 ProN W3","游明朝",YuMincho,"utsukushiregular",serif;
    font-family:'Noto Serif JP',sans-serif;
    font-weight:900;font-weight:bold; letter-spacing:2px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
} 

a:hover { xxxtext-decoration:underline; }
a, a:visited { text-decoration:none; color:inherit; cursor:pointer; user-select:none; }
.noscroll { overflow:hidden; }
.noxscroll { overflow-x:hidden; }
span { font-size:inherit; font-weight:inherit; line-height:inherit; }

p a, li a { display:inline-block; text-decoration:underline; padding:0 .5em; color:#d0a876; }
hr { border:0; border-bottom:1px solid #ccc; margin:1em 0; }
input { border:0; border-radius:0; padding:.5em; }
input:focus { outline:none; }
input:-internal-autofill-selected { background-color:white!important; color:#899dd6!important; }
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active { background-color:white!important; -webkit-box-shadow: 0 0 0 30px white inset !important; }
input:-webkit-autofill { -webkit-text-fill-color:#899dd6!important; }
select { outline:0; border:1px solid var(--gray); border-radius:0; padding:.5em; margin:0 .2em; }
select:focus { outline:0; }
textarea:-webkit-autofill:focus,
textarea:focus { outline:0; }

ul li { list-style:disc; }
ul, ol { margin:1.2em 0; padding-left:1.5em; }
ul.nomargin, ol.nomargin { margin:0; }
li { display:list-item; line-height:1.4; margin-bottom:.5em; font-size:1em; }
ol li { list-style:decimal; list-style-position:outside; display:list-item; line-height:150%; margin-bottom:.8em; }
p { font-size:.9em; margin-bottom:1.5em; }

h2 { font-size:3em; text-transform:uppercase; line-height:1.4; }
h3 { font-size:1.5em; text-transform:uppercase; line-height:1.4; margin:1em 0; padding:1.5em 2em; background:var(--pink); border-radius:.6em; width:auto; display:inline-block; color:var(--red); border:1px solid var}
.img, .img img { max-width:100%; }


table { border:1px solid var(--border); width:100%; border-collapse:collapse; border:0; border-bottom:1px solid var(--border); margin:2em 0; }
table td, table th { border:1px solid var(--border); padding:1.3em 1em; position:relative; border:0; border-top:1px solid var(--border); }
table td:before, table th:before { content:''; display:block; width:calc(100% - .4em); height:calc(100% - .4em); top:.2em; left:.2em; background:var(--lightgray); border-radius:.2em; position:absolute; z-index:-1; mix-blend-mode:multiply; }
table td.top, table th.top { vertical-align:top; }
table td img, table th img { width:auto; margin:1em 0; }
table th { word-break:keep-all; }
table tr th:first-child,
table tr td:first-child { xxpadding-left:0; }
table tr th a,
table tr td a { vertical-align:middle; }
table td p:first-child, table th p:first-child { margin-top:0!important; }
table tr th.yearth { vertical-align:top; border-right:1px solid var(--border); }
table tr th.start { padding-left:0; }
table tr th.borderright { border-right:1px solid var(--border); }
table tr .right { text-align:right; }

table tr.gap { height:2em; border:0; }
table tr.gap td,
table tr.gap th { display:none; opaicty:0; }

table.nobg {}
table.nobg td, table.nobg th {}
table.nobg td:before, table.nobg th:before { content:''; display:none; }

table tr.tablehead th, 
table tr.tablehead td { /*border-top:0; border-bottom:2px solid var(--border); border-left:1px solid var(--border);*/ padding:1.5em 1em; margin:0; color:white; text-align:center!important; font-weight:normal!important; font-size:.8em; }
table tr.tablehead th:before, 
table tr.tablehead td:before { background:var(--darkgray); background:var(--graygradient); }
table tr.tablehead .tag { display:block; margin:0; padding:1em 2em; border-radius:1em 1em 0 0; background:var(--gray); color:white; }


table tr.tablehead2 th, 
table tr.tablehead2 td { border-right: 1px solid var(--lightgray); padding:1.5em 1em; margin:0; color:var(--black); text-align:center!important; font-weight:normal!important; font-size:.8em; }
table tr.tablehead2 th:first-child, 
table tr.tablehead2 td:first-child{ border-left: 1px solid var(--lightgray);}
table tr.tablehead2 td:before{ background:white; }
table tr.tablehead2 .tag { display:block; margin:0; padding:1em 2em; border-radius:1em 1em 0 0; background:var(--gray); color:white; }
table tr.tablehead2 img { width: auto !important; }


table tr.asbtn { cursor:pointer; }
table tr.asbtn td:before { transition:all .2s; }
table tr.asbtn td .btn-arrow { margin:0; position:absolute; top:50%; transform:translateY(-50%); right:1.5em; opacity:.3; transition:all .2s; }
table tr.asbtn:hover td:before { background:var(--border); }
table tr.asbtn:hover td .btn-arrow { opacity:.5; right:2em; }


table .over { opacity:.5; }
table .nofile { opacity:.5; }
table .smaller { font-size:.9em; }
table .normal { font-weight:normal; }
table span { line-height:1; }


table.table-grayrow tr th:before { display:none; }
table.table-grayrow tr:nth-child(odd) td:before { background:var(--grayrow); }
table tr.grayrow td:before { background:var(--grayrow); }

table.column3 td { width:33.33%; vertical-align:top; }
table.tdpadding2 td { padding:2em 2.5em; }
table.tdpadding2 td strong,
table.column3 td strong { font-size:1.1em; letter-spacing:.2em; }
table .strong { font-weight:bold; }
table td.w50 { width:50%; vertical-align:top; }
table td.w100 { width:100%; vertical-align:top; }

video { width:100%; height:100%; top:0; left:0; }


hr.sep { display:block; margin-top:10vw; border:0; height:4em; width:3em; border-right:2px solid var(--gray);  }

.mobiletag { display:none; }
.mobilelarger { font-size:1.2em; }
.trans { transition:all .2s; }

@media device-width, screen and (min-width:1800px) {
    :root {
        --headerh:6.4rem;
    }
    * { font-size:.92rem; }
}
@media device-width, screen and (max-width:1450px) {
    html { font-size:.85rem; }
}
@media device-width, screen and (max-width:1640px) and (min-width:1221px) {
}
@media device-width, screen and (max-width:1220px) and (min-width:641px) {
}
@media device-width, screen and (max-width:900px) and (min-width:641px) {
}
@media device-width, screen and (max-width:640px) {
    html { font-size:.92rem; }

    table { display:block!important; width:100%; border-top:1px solid var(--border); }
    table tbody,
    table tr { display:block; width:100%; border:0; border-bottom:1px solid var(--border); }
    table tr { border:1px solid var(--border); padding:1em; }
    table td, table th { border:0; display:block; padding:.2em 0; }
    table th { font-weight:bold; }
    table tr th.yearth { border-right:0; font-size:2em; padding:1em 0; }
    table tr .yeartd { font-weight:bold; font-size:2em; }
    table td:before, table th:before { display:none; }
    table tr:before { content:''; display:block; width:calc(100% - .4em); height:calc(100% - .4em); top:.2em; left:.2em; background:var(--lightgray); border-radius:.4em; position:absolute; z-index:-1; mix-blend-mode:multiply; }
    table tr.tablehead { display:none; }
    table tr.tablehead th, 
    table tr.tablehead td { display:none; }
    table tr.blank { opacity:0; }
    

    table.tdpadding2 td { padding:1em; }
    table td.w50,
    table td.w100 { width:100%; }

    .mobiletag { display:inline-block; }
    .mobilelarger { display:block; font-size:1.2em; }

}




/*

      _     _        _   
  ___| |__ (_)___ __| |_ 
 / _ \ '_ \| / -_) _|  _|
 \___/_.__// \___\__|\__|
         |__/            
                         
*/


/*
https://dribbble.com/tags/button_animation
*/




@keyframes _flash { 0%,49% {opacity:1;}50%,99%{opacity:0} }
.header { display:flex; width:100%; padding:0; height:var(--headerh); transition:all .1s; position:fixed; top:0; left:0; z-index:999; background:white; border-bottom:1px solid var(--border); xxxborder:3px solid green; xxxmix-blend-mode:multiply; }
.header:before { content:''; display:block; width:100%; height:var(--headerh); background:white; transition:all .2s; position:absolute; top:0; left:0; z-index:-1; transform:translateY(-50%); opacity:0; }
.header .logo { display:block; height:100%; cursor:pointer; position:relative; padding-left:3em; width:100%; }
.header .logo.disabled { pointer-events:none; }
.header .logo img { display:block; height:95%; }
.header .logo.logo70 { z-index:1999; }
.header .logo.logo70 img { display:block; height:125%; transition:none!important; margin-top:0!important; transform:none!important; }
.header .logo.logo70 img.white { display:none; }
.header .logo .plate { display:block; height:10em; width:10em; position:absolute; top:-6.1em; left:8em; transform:translateX(-50%); background:var(--red); border-radius:15em; }
.header .logo svg.mainlogo { display:block; height:2.3em; position:absolute; top:.62em; left:5.1em; }
.header .logo svg.mainlogo * { fill:white; }
.header .logo svg.slogan { display:block; height:2em; position:absolute; top:.96em; left:13.9em; }
.header .logo svg.slogan * { fill:var(--gray); }
.header .menuicon { display:block; width:3em; height:2.1em; text-align:center; transition:all .3s; position:absolute; top:50%; right:1em; transform:translateY(-50%); cursor:pointer; z-index:600; display:none; }
.header .menuicon span { display:block; height:3px; width:2em; background:var(--black); margin:0; transform-origin:center; transform:translate(-50%,-50%); transition:all .2s; transform-origin:center; position:absolute; top:50%; left:50%; }
.header .menuicon span:nth-child(1) { top:25%; }
.header .menuicon span:nth-child(2) { top:50%; }
.header .menuicon span:nth-child(3) { top:75%; }
.header .menuicon.open { opacity:1; background:white; }
.header .menuicon.open span:nth-child(1) { transform:translate(-50%,-50%) rotate(45deg); top:50%; }
.header .menuicon.open span:nth-child(2) { transform:translate(-50%,-50%) rotate(45deg); opacity:0; }
.header .menuicon.open span:nth-child(3) { transform:translate(-50%,-50%) rotate(-45deg); top:50%; }
.header .menu { display:flex; width:auto; height:var(--headerh); align-items:center; justify-content:right; text-align:right; }
/*
.header .menu a { display:flex; align-items:center; font-size:1.1rem; color:var(--black); padding:1.5em 1.5em; margin:0; height:100%; line-height:1; cursor:pointer; transition:all .2s; }
.header .menu a:before { content:''; display:block; height:1em; width:0; border-right:1px solid var(--border); position:absolute; top:50%; right:0; transform:translateY(-50%); opacity:.3; }
.header .menu a:after { content:''; display:block; height:4px; width:100%; background:var(--red); position:absolute; bottom:0; left:0; display:none; }
.header .menu a:last-child:before { display:none; }
.header .menu a:hover { background:var(--bggray); }
.header .menu a.selected:after { display:block; }
*/
.header .menu a { display:flex; align-items:center; font-size:.9rem; color:var(--black); padding:1.5em 1em; margin:0; height:100%; line-height:1; cursor:pointer; transition:all .2s; font-weight:600; font-weight:normal; letter-spacing:.09em; text-transform:uppercase; word-break:keep-all; }
.header .menu a:after { content:''; display:block; height:4px; width:100%; background:var(--red); position:absolute; bottom:0; left:0; display:none; }
.header .menu a:hover { background:var(--bggray); text-decoration:none; }
.header .menu a.red { color:var(--red)!important; }
.header .menu a.selected:after { display:block; }
.header .menu a.disabled { pointer-events:none; }
.header .menu a.disabled:after { content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-20deg); width:5em; height:0; border-top:1px solid var(--black); opacity:.4; }

.header .menu .mobilemenu { display:none; }

.header .btn-search { cursor:pointer; }



a.disabled { /*background:yellow; */ opacity:.5!important; }



    .header .menu .overmenu { display:block; position:absolute; top:6em; left:0; z-index:12; width:100%; height:calc(100vh - 6em); overflow-y:scroll; background:white; box-shadow:0 2px 2px rgba(0,0,0,.2); }
    .header .menu .overmenu .col { display:block; }
    .header .menu .overmenu .col h2 { font-size:1.2em; padding:1em 3.5em; }
    .header .menu .overmenu .col a { font-size:1.2em; padding:1em 4.75em; }
    .header .menu .overmenu .col a.level3 { font-size:1.2em; padding:1em 1em 1em 6em; opacity:.5; }
    .header .menu .overmenu .btn-titleback { font-size:1.2em; font-weight:bold; padding:1em 2em; color:var(--red); }
    .header .menu .overmenu .btn-titleback:before { content:url(../images/icon-arrow.svg); display:inline-block; width:.9em; height:.9em; transform:rotate(180deg); margin-right:.6em; vertical-align:middle; opacity:.5; }




.header .socialset { display:flex; padding:.5em; }
.header .socialset a { display:block; font-size:1.2em; padding:.5em; margin:0; }
.header .subset { display:flex; padding:1.5em; xxxbackground:var(--lightgray); xxxcolor:white; height:100%; align-items:center; }
.header .subset a { display:block; xxxfont-size:1.1rem; padding:.5em; margin:0; }
.header .subset .btn-lang { font-weight:bold; transform:scale(.8)!important; }
.header.bgwhite { background:white; }
.header.home { background:transparent; border:0; }
.header.home .menu a { color:white; }
.header.home .menu a:before { border-color:white; }
.header.home .menu a { color:white; }
.header.home .subset { color:white; }
.header.home .logo img.black { display:none; }
.header.home .logo img.white { display:block; }
.header:hover { background:white; }
.header:hover:before,
.header.shorten:before { transform:translateY(0); opacity:1; }
.header.shorten:beforexxx { display:block; position:absolute; top:0; left:0; width:100%; height:100px; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 100%); z-index:1; }
.header:hover .menu a,
.header.shorten .menu a { color:var(--black); }
.header:hover .menu a:before,
.header.shorten .menu a:before { border-color:var(--border); }
.header.home:hover .subset,
.header.home.shorten .subset { color:var(--black); }
.header.home:hover .logo img.black,
.header.home.shorten .logo img.black { display:block; }
.header.home:hover .logo img.white,
.header.home.shorten .logo img.white { display:none; }







.header .mega { display:flex; padding:0; width:100%; overflow:hidden; height:auto; margin:0; background:white; position:absolute; top:var(--headerh); left:0; display:none; }
.header .mega .col { display:block; padding:2em; margin:0; border:0; }
.header .mega .col a { display:block; padding:.5em; }
.header .mega .col.imgblock { width:30%; height:20em; padding:0; overflow:hidden; position:relative; display:block; }
.header .mega .col.imgblock img { display:block; width:100%; height:100%; margin:0; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)!important; }
.header .mega .col.catblock { text-align:right; width:280px; border:0; xxxborder-right:1px solid var(--border); }
.header .mega .col.catblock:after { content:''; display:block; width:0; height:calc(100% - 4em); position:absolute; top:2em; right:0; border-right:1px solid var(--border); opacity:.5; animation:_showup 1s ease-out forwards; }
    @keyframes _showup { 0%{height:0}100%{height:50%} }
.header .mega .col.catblock a { font-weight:bold; font-size:1.1em; line-height:1.1; }
.header .mega .col.catblock a.focus { color:var(--red); }
.header .mega .col.catblock a.outlink { padding-right:2em; }
.header .mega .col.catblock a.outlink:after { content:url(../images/icon-outlink.svg); width:1.2em; display:inline-block; position:absolute; top:50%; transform:translateY(-50%); right:.5em; margin-left:.5em; }
.header .mega .col.linkblock { height:100%; border:0; padding:2.4em 3.5em; }
.header .mega .col.linkblock .level4 { padding-left:1.8em; opacity:.5; }
.header .mega .col.linkblock .level4:last-of-type { margin-bottom:.8em; } 
.header .mega .col.linkblock a { padding:.25em 0; transition:all .2s; opacity:.9; padding-right:2em; display:block; width:auto; }
.header .mega .col.linkblock a:hover { margin-left:.2em; opacity:1; }
.header .mega .col.linkblock a.outlink:after { content:url(../images/icon-outlink.svg); width:1.2em; display:inline-block; /*position:absolute; top:50%; transform:translateY(-50%); right:.5em;*/ margin-left:.5em; }






.footer { background:white; background-image:url(/asset/images/test2.jpg); background-repeat:no-repeat; background-size:120vw; text-align:center; color:var(--gray); padding:0 0 10vw 0!important; }
.footer .sloganrow { padding:0 0 0 17.4vw;padding:0; text-align:center; display:none; }
.footer .sloganrow svg { display:block; width:14em; opacity:.7; transform:translateY(3em); }
.footer .sloganrow img.slogan { display:inline-block; margin:0 auto; width:20em; transform:translateY(3em); }
.footer .companyinfo { justify-content:center; align-items:center; text-align:left; }
.footer .companyinfo .col { padding:0 2em; }
.footer .companyinfo .logo { height:2em; margin:1em; text-align:center; display:block; width:auto; }
.footer .companyinfo .logo:after { content:''; height:100%; width:0; border-right:1px solid var(--border); display:block; }
.footer .btn-contact { display:block; font-size:.9rem; margin-top:.1em; }
.footer .btn-contact:before { content:url(../images/icon-arrow.svg); display:inline-block; width:1em; height:1em; margin-right:.5em; }
.copyright { font-size:.7rem; padding:1em 0; opacity:.6; }
.sitemap { margin:2em 0; margin-bottom:6em; border-bottom:2px solid var(--lightgray); }
.sitemap .col { padding:0 2em!important; width:16.66%;width:20%; text-align:left; padding-bottom:1.5em!important; }
.sitemap h2 { font-size:1.5em; margin-bottom:.5em; }
.sitemap a { display:block; padding:.2em; transition:all .2s; }
.sitemap a.level3 { padding-left:1.8em; opacity:.5; }
.sitemap a.level3:hover { opacity:1; }
.sidetext { display:block; position:fixed; top:0; right:0; z-index:1000; height:100vh; width:4.6em; pointer-events:none; }
.sidetext span { display:block; position:fixed; top:calc(50% - 5em); right:2.4em; letter-spacing:.7em; font-size:1em; transform-origin:right top; transform:translateY(-50%) rotate(-90deg) scale(.5); }
.searchblock { display:block; position:fixed; top:-30em; right:0; z-index:1000; height:20em; width:100%; background:white; padding:8em; z-index:1002; display:none; }
.searchblock:after { content:''; display:block; height:100vh; width:100%; background:var(--overlay); opacity:.97; position:absolute; top:20em; left:0; z-index:1000; }
.searchblock .inputrow { display:flex; padding:.2em 0; }
.searchblock .inputrow input { display:block; font-size:1.2em; padding:.5em 0; }
.searchblock .inputrow select { display:block; font-size:1em; width:12em; margin:.14em .4em; border:1px solid var(--gray); border-radius:.2em; }
.searchblock .inputrow .btn { display:block; padding:1em; background:var(--gray); width:10em; color:white; }
.searchblock .inputrow .btn:hover { background:var(--darkgray); }
.searchblock .quicklinkrow { display:flex; align-items:center; padding-top:1em; }
.searchblock .quicklinkrow * { display:block; width:auto; padding:0; margin:0; margin-right:1em; }
.searchblock .quicklinkrow a { color:var(--darkred); }
.scrollmore { position:fixed; bottom:0; right:14em; border-right:1px solid var(--border); transform-origin:right; transform:rotate(90deg); z-index:1999; pointer-events:none; display:none; }



.float-privacy { position:fixed; display:block; background:rgba(50,50,50,.9); padding:3em 5em; padding-left:15em; bottom:0; left:0; width:100vw; z-index:1555; color:white; }
.float-privacy .cow { display:block; display:none; width:4em; position:absolute; top:50%; left:5em; }
.float-privacy p { font-size:1.1em; line-height:1.5em; margin-bottom:.5em; color:white; }
.float-privacy .btn { display:inline-block; transition:all .2s; background:#333; border:0; color:white; font-size:.8rem; padding:1.3em 3.5em; }
.float-privacy .btn:hover { background:#630b0b; padding:1.6em 3.8em; }

.loadingcover { position:fixed; display:block; overflow:hidden; background:white; top:0; left:0; width:100vw; height:100vh; z-index:1556; }
.loadingcover p { position:absolute; display:block; top:50%; left:50%; transform:translate(-50%,-50%); color:white; font-weight:bold; letter-spacing:3px; margin-left:-3px; font-size:2em; font-weight:bold; }
    .loadingcover p img { display:block; width:auto; height:3.2vw; position:relative; z-index:155; }
.loadingcover .centerblock { position:absolute; display:block; xxxbackground:var(--red); top:50%; left:50%; transform:translate(-50%,-50%) scale(.65); width:20em; height:20em; }
.loadingcover .centerblock span { position:absolute; display:block; background:var(--red); top:50%; left:50%; transform:translate(-50%,-50%); width:2em; height:2em; border-radius:5em; }
    .loadingcover .centerblock span:nth-child(1) { top:calc(50% - 1em); left:calc(50% - 2em); }
    .loadingcover .centerblock span:nth-child(2) { top:calc(50% - 1em); left:calc(50% - 0); }
    .loadingcover .centerblock span:nth-child(3) { top:calc(50% - 1em); left:calc(50% + 2em); }
    .loadingcover .centerblock span:nth-child(4) { top:calc(50% + .8em); left:calc(50% - 1em); }
    .loadingcover .centerblock span:nth-child(5) { top:calc(50% + .8em); left:calc(50% + 1em); }


.deco { display:block; position:absolute; width:100%; height:100%; z-index:8888; mix-blend-mode:multiply; pointer-events:none; overflow:hidden; }
.circle.deco { display:block; position:absolute; width:40vw; height:40vw; background:var(--lightgray); border-radius:50%; z-index:8888; opacity:.35; }

.productfloatrow { display:block; }
.productfloatrow .item { width:10em; height:10em; border:0; border-radius:50%; margin:1.2em; display:inline-block; }
.productfloatrow .item:before { content:''; width:8em; height:8em; border-radius:10em; position:absolute; top:50%; left:50%; background:white; z-index:5; transform:translate(-50%,-50%); filter:blur(.5rem); opacity:.7; }
.productfloatrow .item .img { display:block; width:100%; height:100%; background:transparent; z-index:10; border:0; mix-blend-mode:multiply; position:relative; }
.productfloatrow .item .img img { display:block; object-fit:contain; }

#app { position:relative; z-index:88; opacity:0; mix-blend-mode:multiply; }


@media device-width, screen and (min-width:1800px) {
    .header .logo .plate { height:15em; width:15em; top:-9.5em; left:11.8em; }
    .header .logo svg.mainlogo { height:3.4em; top:.76em; left:7.5em; }
    .header .logo svg.slogan { height:2.4em; top:1.7em; left:19.8em; }
}
@media device-width, screen and (max-width:1640px) and (min-width:1221px) {
}
@media device-width, screen and (max-width:1220px) and (min-width:641px) {
    .header .menu a { padding:1em; letter-spacing:-1px; }
}
@media device-width, screen and (max-width:900px) {
    .header .menuicon { display:block; }
    .header .menu { display:none; width:100vw; background:white; position:absolute; top:0; left:0; z-index:40; padding-top:6em; height:0; }
    .header .menu a { width:100%; height:auto; padding:1em 3em; font-size:1.2em; font-weight:normal; position:relative; xxxborder-bottom:1px solid var(--border); border:0; text-align:left; }
    .header .menu a:before { display:none; }
    .header .menu a:last-child { border-bottom:0; }
    .header .menu.open { display:block; height:100vh; }
    .header .menu h2 { text-align:left; }
    .header .menu a.btn-home { font-size:1.2em; padding:1em 3.5em; font-weight:bold; }
    .header .menu a.sub { display:block; position:relative; text-align:left; }
    .header .menu a.sub:before { content:url(../images/icon-arrow.svg); display:block; width:1em; height:1em; position:absolute; top:50%; transform:translateY(-50%); left:auto; right:1em; opacity:.5; background:transparent; z-index:5; }
    .header .menu a.selected { background:var(--bggray); position:relative; }
    .header .menu a.selected:after { content:''; display:block; background:var(--red); left:0; width:4px; top:0; height:100%; position:absolute; }
    .header .menu .mobilemenu { display:block; border-top:1px solid var(--gray); margin:2em 0; padding-top:2em; text-align:center; }
    .header .menu .mobilemenu a {}
    .header .menu .mobilemenu.social a { display:inline-block; padding:0; margin:.4em; width:2em; height:2em; }
    .header .menu .mobilemenu.social a.gs-title { width:100%; margin:0; font-size:1.2em; }

    .header .menu .overmenu .col:last-child { margin-bottom:10em; }
    
    .header .subset { display:none; }
}
@media device-width, screen and (max-width:640px) {
    .header { overflow:visible; }
    .header .logo { padding-left:.5em; width:80vw; }
    .header .logo .plate { height:8em; width:8em; top:-4.4em; left:4.8em; }
    .header .logo svg.mainlogo { height:2.1em; top:.5em; left:2.4em; }
    .header .logo svg.slogan { height:1.8em; top:1.2em; left:9.4em; }

    h2 { font-size:2.4em; }
    .sitemap { display:flex!important; flex-wrap:wrap; margin:0; }
    .sitemap .col { width:50%; padding-bottom:1em!important; margin:0; padding:1em!important; border-right:1px solid var(--border); }

    .sidetext { display:none; }

    .footer { background-size:1200px; }
    .footer .companyinfo {}
    .footer .companyinfo .col { padding:2em 0; }
    .footer .companyinfo .logo { margin:0; }

    .loadingcover p { font-size:1.2em; }
    .loadingcover p img { width:50vw; height:auto; }

    .float-privacy { padding:2em; }
    .float-privacy p { font-size:1em; }
}







.container { position:relative; margin:var(--headerh) auto 0 auto; mix-blend-mode:multiply; }
.container.bggray { background:var(--body); }
.container .con { display:none; }
.container .conarea { margin:5em auto; display:block; }
.container .conarea.flex { position:relative; display:flex; }
.container .conarea.flex .sidemenu { /*position:absolute; height:100%; left:0; top:0;*/ }
.container .conarea.flex>.row { margin-bottom:5em; position:relative; top:0; left:0; }
.container .sidemenurow { border:2px solid red; height:2px; position:relative; }
.container.sidemenuopen {}
.container.sidemenuopen .conarea { display:block; position:relative; }
.container.sidemenuopen .sidemenu { display:block; width:280px; margin-right:3.5em; position:sticky; top:175px; left:0; float:left; }
.container.sidemenuopen .sidemenu .btn-open { transform:translateX(-100%); background-image:url(../images/icon-sidemenu.svg); }
.container.sidemenuopen .sidemenu .btn-open:before { xxxcontent:url(../images/icon-sidemenu.svg); }
.container.sidemenuopen .sidemenu .btn-open:hover { background-image:url(../images/icon-sidemenu.gif); }
.container.sidemenuopen .sidemenu .con { xxposition:sticky; }
.container.sidemenuopen .con { display:block; }
.container.sidemenuopen .conarea.flex>.row { xxxposition:absolute; width:calc(100% - 350px); margin-left:350px; padding-top:0; }
.container.sidemenuopen .conarea .slogan { font-size:1.6em; line-height:2; font-weight:bold; letter-spacing:-1px; margin-bottom:1em; }
.container.sidemenuopen .conarea img { max-width:100%; margin:1em 0; }

.row { padding:1em 0; width:100%; }
.row.bggray { background:var(--bggray); }
.row.bggray.topcurve { xxpadding-bottom:6em; }
.row.bggray.topcurve:before { content:url(../images/curveshape.svg); display:block; width:100%; position:absolute; top:0; left:0; }
.row.bglightgray { background:var(--bglightgray); }
.row.bgwhite { background:white; }
.row.otherbanner { padding:0; }
.row.otherbanner img { width:100%; }
.row.nopadding { padding:0; }
.row.w21 { height:51.5vw; }
.row.h100 { height:100vh; }
.flex { display:flex; padding:0; }
.flex.wrap { flex-wrap:wrap; }
.flex .col { display:block; padding:3vw; position:relative; border-right:1px solid var(--border); }
.flex .col.nopadding { padding:0; }
.flex .col.scrolly { overflow-y:scroll; }
.flex .col.col21 { width:50.00%; }
.flex .col.col31 { width:33.33%; }
.flex .col.col32 { width:66.66%; }
.flex .col.col41 { width:25.00%; }
.flex .col:last-child { border:0; }
.flex .col.flex { padding:0; }
.flex .col.noborder { border:0; }
.flex .col .group { padding-bottom:3em; padding-right:8vw; }
.right { text-align:right; justify-content:right; }
.center { text-align:center; justify-content:center; }
.titlerow { align-items:center; margin:3em 0 0 0; }
.titlerow .col { border:0; padding:0; }
.titlerow .col:last-child { width:100%; text-align:right; }
.titlerow .headtitle { margin-bottom:0; }
.datarow { margin-bottom:2em!important; }
.datarow .item { width:18em; }
.datarow .item b { font-size:3em; }
.floatbottom { position:fixed; bottom:0; right:0; padding:1em; }
.floatbottom a.btn { display:inline-block; padding:1em 4em; background:var(--black); color:white; border-radius:.5em; }


.narrow { margin:0 auto; max-width:var(--maxw); width:80%; }
.supernarrow { max-width:var(--maxw); width:50%; }
@media -ms-viewport, screen and (min-width:1400px) {
    .narrow { padding:0 2em!important; }
}
@media -ms-viewport, screen and (max-width:1200px) and (min-width:641px) {
    .narrow { padding:0 1em!important; width:90%; }

    .container.sidemenuopen .sidemenu { width:220px; }
    .container.sidemenuopen .conarea.flex>.row { width:calc(100% - 270px); margin-left:270px; }
}
@media -ms-viewport, screen and (max-width:640px) {
    .narrow { padding:0 1em!important; }
}

.red { color:var(--red); }
.strong { font-weight:bold; }

.borderbottom { border-bottom:1px solid var(--border); }



    .btn { text-align:center; display:block; padding:.4em .7em .3em .7em; line-height:1; text-transform:uppercase; border:1px solid var(--black); background:var(--btn); xxxborder-radius:.2em; font-size:.95rem; margin:.2em 0; transition:all .2s!important; overflow:hidden; transition:all .2s; }
        .btn:after { content:''; display:block; position:absolute; top:50%; left:50%; z-index:-1; width:0; height:0; border-radius:20em; transition:all ease-out .2s; background:var(--black); transform:translate(-50%,-50%); mix-blend-mode:multiply; opacity:.5; }
    .btn:hover { /*padding:.4em .9em .3em .9em; border:1px solid var(--black); background:var(--btn);*/ color:white; background:var(--black); }
    .btn:hover:afterxxxx { width:15em; height:15em; opacity:.97; }

        .btn-text { display:inline-block; font-size:1em; padding:0; margin:.5rem; text-transform:uppercase; cursor:pointer; line-height:1; position:relative; }
        .btn-text:after { content:''; display:block; position:absolute; top:105%; left:0; z-index:1; width:0; height:0; border-bottom:1px solid var(--black); transition:all .2s; }
        .btn-text:hover:after { width:100%; }
        .btn-text.selected { color:white; }

        .btn-outlink { display:inline-block; font-size:1em; padding:0; margin:.5rem; text-transform:uppercase; cursor:pointer; line-height:1; position:relative; color:var(--orange)!important; text-decoration:underline; }
        .btn-outlink:hover { color:var(--red); }
        

        .btn-arrow { display:block; margin-top:2em; text-align:right; }
        .btn-arrow:before { content:url(../images/icon-arrow.svg); opacity:.4; display:block; width:1.3em; height:1.3em; float:right; }


        .btn-block { display:inline-block; font-size:1em; text-align:center; padding:1.5em 0; margin:.5rem 0; text-transform:uppercase; cursor:pointer; line-height:1; position:relative; width:20em; background:var(--red); color:white!important; border-radius:.2em; max-width:100%; border:0; }
        .btn-block.gray { background:var(--darkgray); }
        .btn-block:hover { background:var(--red); }
        .btn-block.gray:hover { background:var(--red); }

        .btn-block.outline { border:1px solid var(--red); background:transparent; color:var(--red); }
        .btn-block.outline:hover { background:var(--darkred); color:white; }


        .btn-banner { display:inline-block; font-size:1.3em; letter-spacing:2px; text-align:center; padding:4em 0; margin:1em; text-transform:uppercase; cursor:pointer; line-height:1; position:relative; width:calc(50% - 2em); background:var(--darkgray); background-size:cover; color:white!important; border-radius:.2em; font-weight:bold; background-position:center; overflow:hidden; text-shadow:0 1px 3px rgba(0,0,0,.5); }
            .btn-banner:beforexxx { content:''; display:block; margin:0; position:absolute; width:100%; height:100%; z-index:1; background:var(--darkgray); top:0; left:0; mix-blend-mode:multiply; }
        .btn-banner.larger { height:16vw; }
        .btn-banner .img { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)!important; width:calc(100% + 1em); height:calc(100% + 1em); object-fit:cover; opacity:.8!important; margin:0!important; transition:all .7s; z-index:5; }
        .btn-banner .img.bright { opacity:.95!important; }
        .btn-banner .img img { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)!important; width:calc(100% + 1em); height:calc(100% + 1em); object-fit:cover; }
        .btn-banner .logo { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)!important; width:100%; height:75%; margin:0!important; transition:all .7s; z-index:5; }
        .btn-banner .logo img { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)!important; width:auto; height:100%; object-fit:cover; }
        .btn-banner strong { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)!important; z-index:10; display:block; font-size:1.05em; color:white; z-index:10; width:80%; }
        .btn-banner:hover .img { transform:translate(-50%,-50%) scale(1.05)!important; opacity:.7!important; }


        .btn-banner .logocon { display:inline-block; margin:0 auto; width:auto; text-align:center; z-index:16; }
        .btn-banner .logocon .logo { display:inline-block; height:7em; width:7em; padding:1.3em; margin:0 1em; mix-blend-mode:normal; vertical-align:middle; background:white; overflow:hidden; border-radius:10em; }
        .btn-banner .logocon .logo img { display:inline-block; object-fit:contain; height:100%; width:100%; margin:0; }
        .btn-banner .logocon strong { display:inline-block; text-align:left; vertical-align:middle; position:relative; top:auto; left:auto; transform:none!important; width:auto; font-size:1.25em; }






        .btn-all { cursor:pointer; display:block; margin:.5em 0; }
        .btn-all span { display:block; opacity:.5; xxxxborder-top:2px solid var(--black); text-align:center; padding:1em 0; font-size:1.1em; transition:all .2s; }
        .btn-all:hover span { opacity:.9; transform:translateY(-.3em); }

        .btn.btn-all,
        .btn.btn-cat { padding:.5em .8em!important; margin:.2em!important; border-radius:1.5em; border:1px solid var(--border)!important; }



.inputrow { display:flex; width:100%; align-items:top; border-bottom:1px solid var(--black); }
.inputrow label { word-break:keep-all; padding:1.8em 1.5vw; text-transform:uppercase; }
.inputrow input { display:block; width:100%; font-size:1.5em; background:transparent; padding:.7em; }
.inputrow select { display:block; width:100%; font-size:1.5em; border:0; background:transparent; padding:.7em; }
.inputrow textarea { display:block; width:100%; height:20vw; border:0; font-size:1.5em; background:transparent; padding:1em; }
.inputrow .btn { display:block; width:100%; padding:1.8em; border:0; }
.inputrow.error label { color:var(--error); }
.inputrow.error .error { color:var(--error); position:absolute; top:50%; right:1em; transform:translateY(-50%); }

.input2 { display:flex; width:100%; align-items:center; }
.input2 .inputrow:first-child { border-right:1px solid var(--black); }

.inputrow.noborder { border-bottom:0; }


.youtubevideo { width:70vw; width:100%; height:40vw; margin:1em auto; }


.icon { display:block; }
.icon-close { content:url(../images/icon-close.svg); width:1.5em; height:1.5em; }
.icon-close-white { content:url(../images/icon-close-white.svg); width:1.5em; height:1.5em; }
.icon-fb { content:url(../images/icon-facebook.svg); width:1.5em; height:1.5em; }
.icon-ig { content:url(../images/icon-instagram.svg); width:1.5em; height:1.5em; }
.icon-be { content:url(../images/icon-behance.svg); width:1.5em; height:1.5em; }
.icon-yt { content:url(../images/icon-yt.svg); width:1.5em; height:1.5em; }
.icon-line { content:url(../images/icon-line.svg); width:1.5em; height:1.5em; }
.icon-search { content:url(../images/icon-search-dark.svg); width:1.5em; height:1.5em; }
    .header.home .icon-search { content:url(../images/icon-search.svg); }
    .header.home:hover .icon-search,
    .header.home.shorten .icon-search { content:url(../images/icon-search-dark.svg); }

    .breadcrumbrow.white .icon-fb { content:url(../images/icon-facebook-white.svg); }
    .breadcrumbrow.white .icon-ig { content:url(../images/icon-instagram-white.svg); }
    .breadcrumbrow.white .icon-yt { content:url(../images/icon-yt-white.svg); }

.icon-pdf { content:url(../images/icon-pdf.svg); width:2.4em; height:2.4em; margin:0; display:inline-block; vertical-align:middle; transform:translateY(-2px); }
.icon-youtubevideo { content:url(../images/icon-youtube.svg); width:2.4em; height:2.4em; margin:0; display:inline-block; vertical-align:middle; transform:translateY(-2px); }


@media -ms-viewport, screen and (min-width:1800px) {
    .narrow { margin:0 auto; max-width:var(--maxw-l); }
    .btn { font-size:1.05rem; }
}
@media -ms-viewport, screen and (min-width:641px) and (max-width:1024px) {
}
@media -ms-viewport, screen and (min-width:641px) and (max-width:900px) {

}
@media -ms-viewport, screen and (max-width:640px) {

    .container {}
    .container .conarea { margin:1em auto; }
    .container .conarea p { text-align:justify; }
    .container.sidemenuopen .conarea>.row { width:100%; padding:0; }
    .container.sidemenuopen .conarea>.row .row { padding:0; }

    .narrow { max-width:var(--maxw-s); }

    .row { xxxxpadding:1em; }
    .row.borderbottom { border-bottom:1px solid var(--border); }
    .row.narrow { padding:1em; width:100%; }
    .row.narrow .narrow { padding:0!important; margin:0!important; width:100%; max-width:100%; }
    .row.w21,
    .row.h100 { height:auto; }
    .flex { display:block; padding:0; }
    .flex .col { padding:1em 0; border-right:0; border-bottom:1px solid var(--border); }
    .flex .col.col21,
    .flex .col.col31,
    .flex .col.col32,
    .flex .col.col41 { width:100%; }
    .titlerow { xxxxdisplay:flex; }

    .datarow { width:100%; }
    .datarow .item { width:100%; padding:1.2em 0; }
    .datarow .item b { font-size:2em; }
    small { font-size:.7em; }


    .btn-banner { width:calc(100% - 2em); }
    .btn-banner strong { font-size:1em; }
    .btn-block { width:100%; }
}









/*

  _             _      
 | |__  ___  __| |_  _ 
 | '_ \/ _ \/ _` | || |
 |_.__/\___/\__,_|\_, |
                  |__/ 
                         
*/



.overlay { position:fixed; bottom:0; right:0; width:100vw; height:100vh; background:var(--overlay); opacity:.97; z-index:977; display:none; }
    .loader { width:3em; height:3em; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); animation:rotate 1s linear infinite; }
    .loader::before { content:''; box-sizing:border-box; position:absolute; inset:0; border-radius:50%; border:5px solid var(--black); animation:prixClipFix 2s linear infinite; }
    @keyframes rotate { 100%{transform:translate(-50%,-50%) rotate(360deg);} }
    @keyframes prixClipFix {
            0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
            25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
            50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
            75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
            100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
        }
    .msg { display:block; position:fixed; font-size:1.8em; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1111; background:var(--black); color:white; padding:0 .2em; }
.loading { position:fixed; bottom:0; right:0; width:100vw; height:100vh; background:white; opacity:0; z-index:1222; display:none; }
.btnscroll { position:fixed; bottom:0; right:0; }


.breadcrumbrow { position:relative; z-index:251; }
.breadcrumbrow.white { border-top:1px solid rgba(255,255,255,.5); border-bottom:0!important; background:transparent; position:absolute; top:6.7em; z-index:90; }
.breadcrumb { display:flex; align-items:center; width:100%; padding:1.5vw 4em;xxpadding:0 4em; margin:0 auto; }
.breadcrumb.float { /*position:absolute; top:3em; z-index:90; transform:translateX(-50%); left:50%;*/ }
.breadcrumb.home { xxxdisplay:none; }
.breadcrumb.short { xxxpadding:0 4em; }
.breadcrumb a { margin-right:0; display:flex; align-items:center; line-height:1; font-size:.85em; xtext-decoration:underline; }
.breadcrumb a:before { content:''; display:block; width:0; height:0; margin-top:.3em; position:absolute; bottom:0; left:0; border-bottom:1px solid var(--black); transition:all .2s; }
.breadcrumb a:after { content:url(../images/icon-arrow.svg);
    xxxcontent:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"      viewBox="0 0 489 489"><polyline class="st0" points="167.2,55.7 356,244.5 167.2,433.3 "/></svg>'); 
    display:block; width:.9em; height:.9em; object-fit:contain; margin:0 .6em; opacity:.5; transform:translateY(-.1em); }
.breadcrumb a:last-child:after { content:''; }
.breadcrumb.white a { color:white; }
.breadcrumb.white a:after { content:url(../images/icon-arrow-white.svg); }
.breadcrumb a:last-child:after { display:none; }
.breadcrumb a:hover:before { width:calc(100% - 2em); }
.breadcrumb a:last-child:hover:before { width:100%; }
.breadcrumb a.disabled { pointer-events:none; }
.breadcrumb a.nolink { pointer-events:none; }

.breadcrumb .socialblock { display:flex; opacity:.5; position:absolute; right:1.3em; top:50%; transform:translateY(-50%); justify-content:right; }
.breadcrumb .socialblock a { display:block; margin:0 .7em; }

.sidemenu { position:relative; padding-top:2em; margin-bottom:5em; transition:all .5s; }
.sidemenu.fade { opacity:.2; }
.sidemenu.fade:hover { opacity:1; }
.sidemenuxxx { position:absolute; top:auto; left:0; }
.sidemenu .btn-open { display:block; position:absolute; top:0; left:100%; xxxtransform:translateX(-100%); transform:translateY(-.5em); z-index:150; cursor:pointer; left:-2em; opacity:.3; width:1.6em; height:1.6em; background-image:url(../images/icon-sidemenu-out.svg); background-size:cover; }
.sidemenu .btn-open:hover { xxxopacity:.5; background-image:url(../images/icon-sidemenu-out.gif); }
.sidemenu .btn-open:before {}
.sidemenu h2 { display:inline-block; background:var(--black); color:white; padding:.4em .8em; border-radius:4em; font-size:1.1em; line-height:1; width:auto; letter-spacing:0; }
.sidemenu .group { border-bottom:1px solid var(--gray); padding:1em .3em; }
.sidemenu .group:last-child { border-bottom:0; }
.sidemenu .group .group { border-bottom:0; }
.sidemenu .group .subgroup { display:block; }
.sidemenu .group .subgroup a:first-child { padding-top:.7em; }
.sidemenu .group a { display:block; font-size:1.05rem; padding:.2em 0; padding-left:1.6em; font-weight:bold; transition:all .2s; }
/*.sidemenu .group a:before { content:''; display:block; position:absolute; top:85%; left:1.6em; border-bottom:1px solid var(--black); width:0; height:0; transition:all .2s; }
.sidemenu .group a:hover:before { width:calc(100% - 1.6em); }*/
.sidemenu .group a:hover { padding-left:1.7em; }
.sidemenu .group a.nolink_disabeld { opacity:1!important; pointer-events:none; }
.sidemenu .group a .arrow { display:block; position:absolute; top:.2em; left:-.2em; border-radius:2em; width:1.5em; height:1.5em; xxxbackground:var(--black); }
.sidemenu .group a .arrow:before { content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 489 489"><polyline style="fill:transparent;stroke:black;stroke-width:80;" points="167.2,55.7 356,244.5 167.2,433.3 "/></svg>'); display:block; width:.8em; height:auto; margin-top:.2em; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.sidemenu .group a.level3 { padding-left:1.6em; padding-left:2.5em; font-size:1rem; font-weight:normal; opacity:.7; }
.sidemenu .group a.level3:hover { padding-left:2.6em; }
.sidemenu .group a.level4 { padding-left:3.2em; padding-left:5.0em; font-size:1rem; font-weight:normal; opacity:.5; }
.sidemenu .group a.level4:hover { padding-left:5.2em; }
.sidemenu .group a.outlink:after { content:url(../images/icon-outlink.svg); width:1.2em; display:inline-block; /*position:absolute; top:50%; transform:translateY(-50%); right:.5em;*/ margin-left:.5em; }
.sidemenu .group a.dontknow { opacity:.3!important; pointer-events:none; }
.sidemenu .group a.outlink { position:relative; }
.sidemenu .group a.outlink:after { content:url(../images/icon-outlink.svg); width:1.2em; position:absolute; top:50%; transform:translateY(-50%); right:.5em; }
.sidemenu .group .selected { color:var(--red); opacity:1!important; }


.item { xxxtransition:all .6s; }
.lazy { opacity:0; transform:translateY(4em); }
.lazy-totop { opacity:0; transform:translateY(4em); }
    
    /* SPECIAL SETTING */
    .breadcrumb .lazy { opacity:0; transform:translateY(.4em); }

@media -ms-viewport, screen and (min-width:1800px) {
    .breadcrumb.float { top:8em; }
}
@media -ms-viewport, screen and (min-width:641px) and (max-width:1024px) {
}
@media -ms-viewport, screen and (max-width:640px) {
    .breadcrumb { margin:0; padding:1em; }
    .breadcrumb.float { top:0; }
    .breadcrumb a { font-size:.8em; }

    .breadcrumb .socialblock { display:none; }


    .sidemenu { position:absolute; top:0; left:0; z-index:988; display:none!important; }
    .sidemenu .con { position:absolute; top:0; left:0; display:none!important; }
}




h2.sectitle { font-size:1.5em; font-weight:bold; border-left:4px solid var(--red); padding:.2em 1em; word-break:keep-all; }
h2.sectitle:first-of-type { xxmargin-top:0; }
h2.sectitle.center { margin:4em auto!important; border-left:0; display:inline-block; width:auto; border-bottom:4px solid var(--red); }
h2.brandcat { margin:1.5em 0 0 0; display:inline-block; width:100%; font-size:2em; }
h2.headtitle { font-size:3em; font-weight:bold; width:auto; padding:.2em 0; letter-spacing:-1px; display:inline-block; word-break:keep-all; margin-bottom:.3em; /*background:black; color:white; padding-right:1.9em; */ }
h2.headtitle:after { content:''; display:block; width:100%; width:2em; height:8px; background:var(--red); position:absolute; bottom:0; left:0; }
h2.slogan { font-size:1.5em; font-weight:bold; padding:.2em 0; word-break:keep-all; letter-spacing:1px; line-height:2; }
h2.slogan.large { font-size:2em; line-height:1.5; }
h2.slogan:first-of-type { xxmargin-top:0; }

img.person { width:10em!important; height:9em; object-fit:cover; margin:.5em 0; display:block; }
strong.sectitle { font-size:1.5em; font-weight:bold; margin-top:2em; display:block; color:var(--darkred); }
strong.sectitlesmall { font-size:1em; font-weight:bold; margin-top:2em; display:block; letter-spacing:.3em; }
strong.sectitlesmall.bg { background:var(--black); color:white; padding:.2em 1em; width:auto; display:inline-block; border-radius:.2em; }

.tgap { margin-top:4em; }
.bgap { margin-bottom:4em; }
.tbgap { margin:4em 0; }
.tpadding { padding-top:4em; }
.bpadding { padding-bottom:4em; }
.tbpadding { padding:4em 0; }


.row.graycurve { background-image:url(../images/graycurve.svg); background-size:100%; background-repeat:no-repeat; background-position:top; }

.row.cover { padding:0; display:block; height:36vw; margin-bottom:6em; }
.row.cover:before { content:''; display:block; width:100%; height:15vw; position:absolute; bottom:0; left:0; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 100%); z-index:1; }
.row.cover .img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; overflow:hidden; background:var(--black); }
.row.cover .img img { display:block; width:100%; height:100%; object-fit:cover; }
.row.cover .sectitle { display:inline-block; width:auto; position:absolute; top:75%; left:50%; font-size:3em; font-weight:bold; transform:translate(-50%,-50%); z-index:9; text-align:left; color:white; width:100%; }
.row.cover small { display:block; position:absolute; top:59%; left:calc(50% + .2rem); width:100%; color:var(--red);color:white; font-size:.7em; text-transform:uppercase; letter-spacing:.6em; transform:translate(-50%,-50%); font-weight:bold; }
.row.cover .sticker { display:block; position:absolute; top:85%; left:50%; width:100%; transform:translateX(-50%); z-index:10; background:var(--red); padding:2em 3em; border-radius:.5em; font-size:1.2em; }
.row.cover .sticker.gray { background:var(--darkgray); }
.row.cover .sticker p { font-size:1.1em; color:white; }

    

    .row.cover2 { padding:0; display:block; xxxheight:50vw; height:34vw ; margin-bottom:2em; overflow:hidden; background:var(--black); }
    .row.cover2:beforexxxx { content:''; display:block; width:100%; height:15vw; position:absolute; bottom:0; left:0; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 100%); z-index:1; }
    .row.cover2 .img { display:block; position:absolute; top:-5em; left:0; width:100%; height:calc(100% + 10em); object-fit:cover; overflow:hidden; background:var(--black); transition:none!important; }
    .row.cover2 .img img { display:block; width:100%; height:100%; object-fit:cover; transition:none!important; }
    .row.cover2 video { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; overflow:hidden; background:var(--black); opacity:.9; }
    .row.cover2 .svg { display:block; height:4em; margin-top:.15em; }
    .row.cover2 .sticker { display:block; position:absolute; bottom:8vw; left:50%; xxxxwidth:100%; transform:translateX(-50%); z-index:10; padding:0; font-size:1rem; background:transparent; }
    .row.cover2 .sticker.gray { background:var(--darkgray); }
    .row.cover2 .sticker p { font-size:2vw; line-height:1; padding:.2em; color:white; font-weight:bold; letter-spacing:-1px; background:var(--red); display:inline-block; width:auto; margin:0; position:relative; overflow:hidden; margin-bottom:-.1em; }
    .row.cover2 .sticker p span { font-size:1em; line-height:1; padding:0; color:white; font-weight:bold; letter-spacing:-1px; display:block; margin:0; position:absolute; top:.2em; left:.2em; word-break:keep-all; width:100vw; }
    .row.cover2 .sticker small { display:block; color:var(--red);color:white; font-size:.7em; text-transform:uppercase; letter-spacing:.6em; font-weight:bold; margin-bottom:.2vw; margin:0; position:relative; overflow:hidden; }
    .row.cover2 .sticker small span { font-size:1em; line-height:1; padding:0; color:white; letter-spacing:.6em; display:block; margin:0; position:absolute; top:.2em; left:.2em; word-break:keep-all; }
    .row.cover2 .sectitle { display:block; width:auto; color:white; font-size:4em; font-weight:bold; z-index:9; letter-spacing:-1px; margin:.25vw 0;position:relative; overflow:hidden; }
    .row.cover2 .sectitle span img { height:3.6vw; }
    .row.cover2 .sticker.dark p { background:var(--black); }


.row.block { padding:0 10em; z-index:150; width:calc(100% - 10em); height:40em; margin-bottom:6em; overflow:hidden; margin-top:1em; }
    .row.block:before { content:''; width:100%; height:40em; position:absolute; top:0; left:0; background:var(--lightgray); }
    .row.block .con { position:absolute; top:50%; left:10em; transform:translateY(-50%); width:calc(100vw - 20em); display:block; }
    .row.block strong { font-size:.7em; margin:1em 0; letter-spacing:2px; text-transform:uppercase; }
    .row.block p { font-size:2em; margin:1em 0 0 0; font-weight:bold; }
    .row.block .row p { font-size:1rem; font-weight:normal; }
    .row.block.bgblack { background:var(--black); color:white; }
    .row.block.bgblack * { color:white; }
    .row.block.bgdarkred { background:var(--darkred); }
    .row.block.bgdarkred * { color:white; }
    .row.block .img { width:12em; height:12em; border-radius:50%; position:absolute; top:0; right:6em; overflow:hidden; }
    .row.block .img img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; }



.row.bannercover { padding:0; display:block; height:56vw; margin-top:-6.4rem; }
    .row.bannercover:before { content:''; display:block; width:100%; height:10vw; position:absolute; top:0; left:0; background:linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 100%); z-index:1999; }
    .row.bannercover .mask { padding:0; display:block; height:100%; width:100%; position:absolute; top:0; left:0; overflow:hidden; }
    .row.bannercover .mask .item { display:block; height:100%; width:100vw; overflow:hidden; transition:none!important; }
    .row.bannercover .img { display:block; position:absolute; top:50%; left:50%; width:100%; height:100%; object-fit:cover; overflow:hidden; background:var(--black); transform:translate(-50%,-50%) scale(1); transition:none!important; }
    .row.bannercover .img img { display:block; width:100%; height:100%; object-fit:cover; opacity:.8; transition:none!important; }
    .row.bannercover .sectitle { display:block; position:absolute; top:50%; left:50%; color:white; font-size:3em; font-weight:bold; margin-top:1em; transform:translate(-50%,-50%)!important; }
    .row.bannercover .sectitle span { display:inline-block; width:auto; margin:.1em; background:var(--black); color:white; font-weight:bold; }
    .row.bannercover .nav { display:block; position:absolute; top:calc(100% - .00002em); left:50%; transform:translate(-50%,-50%); z-index:4; }
    .row.bannercover .nav a { display:inline-block; width:.7em; height:.7em; margin:.3em; background:var(--gray); border-radius:1em; opacity:.4; transition:all .3s; transform:translate(-50%,-50%); }
    .row.bannercover .nav a.selected { opacity:1; background:var(--red); transform:translate(-50%,-50%) scale(1.3); }


.row.productcover { xxheight:50vw; height:42vw; overflow:hidden; margin-bottom:0; background:var(--lightgray); padding:0; }
.row.productcover .sectitle { display:inline-block; width:auto; position:absolute; top:75%; left:50%; font-size:3em; font-weight:bold; transform:translate(-50%,-50%); z-index:9; text-align:left; color:white; width:100%; }
.row.productcover small { display:block; position:absolute; top:59%; left:calc(50% + .2rem); width:100%; color:var(--red);color:white; font-size:.7em; text-transform:uppercase; letter-spacing:.6em; transform:translate(-50%,-50%); font-weight:bold; }
.row.productcover .sticker { display:block; position:absolute; top:85%; left:50%; width:100%; transform:translateX(-50%); z-index:10; background:var(--red); padding:2em 3em; border-radius:.5em; font-size:1.2em; }
.row.productcover .sticker.gray { background:var(--darkgray); }
.row.productcover .sticker p { font-size:1.1em; color:white; }

.row.productcover.brandcover { margin-top:-5em; }
.row.productcover .img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; }
.row.productcover .img img { display:block; width:100%; height:100%; object-fit:cover; position:absolute; }
.row.productcover .p { display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:37vw; height:37vw; z-index:16; }
.row.productcover .p img { display:block; width:100%; height:100%; object-fit:contain; position:fixed; }
.row.productcover .sectitle { width:auto; top:50%; color:var(--black); line-height:1; transform:translate(-50%,-50%)!important; }
.row.productcover .sectitle span { display:inline-block; width:auto; background:var(--black); color:white; line-height:1; font-size:inherit; padding:.1em; margin:.02em; }
.row.productcover .sticker { background:transparent; top:50%; left:50%; transform:translate(-50%,-50%); width:20vw; padding:0; display:flex; flex-direction:column; }
.row.productcover .sticker p { display:inline-block; width:auto; height:2.7vw; margin-bottom:.1em; overflow:hidden; position:relative; overflow:hidden; }
.row.productcover .sticker p span { display:inline-block; background:var(--black); font-size:2.7vw; font-weight:bold; letter-spacing:-1px; position:absolute; top:0; left:0; color:white; width:auto; height:auto; line-height:1.1; padding:.2em; }


.row.productcover.home { padding:0; display:block; xxxheight:56vw; height:42vw; margin-top:-6.4rem; }
.row.productcover.home .showblock.banner { xxxheight:56vw;height:42vw; }
.row.productcover.home .default { display:block; width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); object-fit:cover; }


.row.stickytop { display:flex; position:fixed; top:var(--headerh); width:100%; xxxbackground:white; z-index:978; padding:1.5em 3em; padding-bottom:.8em; align-items:center; }
.row.stickytop h2 { font-size:2em; z-index:10; transform:none!important; }
.row.stickytop img { height:3em; width:3em; object-fit:contain; z-index:10; margin-right:.6em; }
.row.stickytop .floatright { display:block; float:right; position:absolute; top:50%; right:2em; z-index:16; transform:scale(.8) translateY(-50%); }
.row.stickytop .floatright a { display:inline-block; margin:0 0 0 1.5em; font-size:1.4em; opacity:.5; transition:all .2s; border:0; padding:0; }
.row.stickytop .floatright a:hover { opacity:1; }

.row.btnrow .btn { display:inline-block; width:auto; margin:.2em; border-radius:2em; overflow:hidden; }
.row.btnrow .btn:after { border-radius:2em; }
.row.btnrow .btn.selected { background:var(--black); color:white; }
.row.btnrow.center { text-align:center; }

.row.btnrow.in1,
.row.btnrow.in2,
.row.btnrow.in3,
.row.btnrow.in5 { display:flex; width:calc(100% + 2em); margin-left:-1em; }
.row.btnrow.center { justify-content:center; }
.row.btnrow.in1 .btn-banner { width:calc(100% - 2em); }
.row.btnrow.in3 .btn-block,
.row.btnrow.in5 .btn-block { display:block; font-size:1.1em; letter-spacing:1px; margin:1em; }
.row.btnrow.in3 .btn-block { width:calc(33.33% - 2em); }
.row.btnrow.in5 .btn-block { width:calc(20% - 2em); }



.row.pagecon { line-height:1.8; text-align:justify; letter-spacing:.5px; width:100%; display:block; }
.row.pagecon p,
.row.pagecon div { margin:1em 0; line-height:1.8; height:auto; }
.row.pagecon img { max-width:100%; width:100%; object-fit:cover; height:auto; }
.row.pagecon img.cover { width:10em; height:15em; object-fit:cover; display:block; }
.row.pagecon img.logo-cis { width:10em!important; }
.row.pagecon p { font-size:1.03rem; }
.row.pagecon p:first-child { margin-top:0; }
.row.pagecon p a { display:inline-block; margin:0 .2em; color:var(--red); }
.row.pagecon .redtitle { display:inline-block; background:var(--red); padding:.2em .8em; color:white; margin:.5em 0; border-radius:5em; word-break:keep-all; }
.row.pagecon table, 
.row.pagecon table td,
.row.pagecon table th { text-align:left; }
.row.pagecon table td a,
.row.pagecon table th a { margin:0; padding:0; font-size:inherit; vertical-align:top; color:var(--red); color:var(--darkred); color:var(--black); }
.row.pagecon table td .note { margin:.2em 0; font-size:.9em; opacity:.8; }


.row.block.laptop { margin-top:-5em; margin-bottom:0; }
.row.block.laptop .con { font-size:1.5em; top:50%; transform:translateY(-50%); /*width:calc(100vw - 10em); padding-right:0;*/ }
.row.block.laptop .con .flex.right { width:calc(100% + 2em); }
.row.block.laptop .con .flex.center { width:calc(100% + 0em); }
.row.block.laptop .con .flex.left { width:calc(100% + 0em); justify-content:left; margin-left:-2em; }
.row.block.laptop .con .slogan.title { xxxxborder-bottom:4px solid var(--black); }
.row.block.laptop .con a.col { display:block; width:15vw; transition:all .2s; border-right:1px solid var(--border); }
.row.block.laptop .con a.col:last-child { border-right:0; }
.row.block.laptop .con a.col strong { display:inline-block; font-size:1.1em; letter-spacing:0; width:auto; margin:0; position:relative; background:var(--lightgray); }
.row.block.laptop .con a.col strong:after { content:''; display:inline-block; width:0; height:0; position:absolute; top:105%; left:0; border-top:1px solid var(--black); transition:all .2s; }
.row.block.laptop .con a.col p { display:block; font-size:.9em; font-weight:normal; }
.row.block.laptop .con a.btn-textlarge { display:block; margin:.2em 0; font-size:1.3em; }
.row.block.laptop .con a.btn-block { display:inline-block; }
.row.block.laptop .con a:hover { transform:translateY(-.2em)!important; }
.row.block.laptop .con a:hover strong:after { width:100%; }
.row.block.laptop .listblock { border:1px solid red;  }
.row.block.laptop .item { xxxborder:1px solid red;  }
.row.block.laptop .item p { display:block; font-size:1em; font-weight:normal; }
.row.block.laptop .item a { display:block; font-size:1.2em; }
.row.block.laptop.godown { margin-top:0; margin-bottom:-15em!important; }

.row.center { justify-content:center; text-align:center; }
.row.center .col { border:0; padding:2em; text-align:left; }
.row.center .col>img { width:10vw; height:6vw; object-fit:cover; margin:.5em 0; }
.row.center .sectitle { text-align:left; }

.row.right { /*width:calc(100% + 4em); margin-right:-2em; */}
.row.right .col { border:0; padding:2em; text-align:left; }
.row.right .col>img { width:11vw; height:6vw; object-fit:cover; margin:.5em 0; }
.row.right .col>.btn { width:auto; padding:0; border:0; text-align:left; }
 
.notebox { background:var(--lightgray); padding:4em 5em; margin:3em 0!important; text-align:center; }
.notebox strong { font-size:1.1em; letter-spacing:3px; }
.notebox .stockbg.user { /*position:absolute; top:0; left:0; width:100%; height:100%;*/ display:inline-block; width:7em; height:7em; border-radius:10em; margin:0 auto; overflow:hidden; }
.notebox .stockbg img { display:block; width:100%; height:100%; object-fit:cover; margin:0!important; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

.otherinfo { text-align:left; }
.otherinfo .btn-text { color:var(--darkred); }
.otherinfo .btn-text:hover { color:var(--darkred); }
.bigtext { font-family:'Noto Serif TC',sans-serif!important; font-size:12vw; line-height:1; color:var(--border); position:absolute; z-index:-1; mix-blend-mode:multiply; transform:translate(-.1em,-.7em); opacity:.3; xxxxanimation:_walk 190s linear infinite; }
    @keyframes _walk { 0%{left:-3%} 100%{left:100%}} }



@media -ms-viewport, screen and (min-width:1800px) {
    .row.bannercover { margin-top:-9vw; xxxheight:50vw; }
    .row.cover2 .sticker p { font-size:2.2vw; }
    .row.cover2 .sectitle span img { height:5vw; }
}
@media -ms-viewport, screen and (min-width:1400px) {
    .row.cover2 .sticker p { font-size:2.2em; }
    .row.cover2 .sectitle span img { height:4.4vw; }
}
@media -ms-viewport, screen and (min-width:641px) and (max-width:1024px) {
}
@media -ms-viewport, screen and (max-width:640px) {


    h2.sectitle,
    h2.headtitle,
    h2.slogan { word-break:normal; }
    h2.slogan.large { font-size:1.9em; letter-spacing:-1px; }

    .tbgap { margin:2em 0; }

    .infoblock { display:block; width:100%; padding:7em 1.3em 4em 1.3em; margin:.6em 0; border-top:0; }
    .infoblock .data,
    .infoblock .info { padding:1em 2em; border:0; margin:0; }
    .infoblock .info .btn-arrow { display:inline-block; transform:none; position:relative; }

    .row.center { transform:none; width:100%; }

    .row.cover2 { height:40em; }
    .row.cover2 .sticker { xxxxmargin-left:-1.5em; bottom:6em; }
    .row.cover2 .sticker p { font-size:2em; letter-spacing:-1px; }
    .row.cover2 small { letter-spacing:2px; }
    .row.cover2 .sectitle img { height:3em; margin:.6em 0; }
    .row.cover2:after { background-size:200em; width:300em; height:5em; animation:_milk_m 9s linear infinite; }

    .row.stickytop { padding:1em 1em; }
    .row.stickytop h2 { font-size:1.8em; transform:translateY(0); }
    .row.stickytop .floatright { right:1em; }
    .row.stickytop .floatright a { font-size:1.1em; margin:0 .2em; }




    .row.btnrow.in2, .row.btnrow.in3, .row.btnrow.in5 { display:block; }
    .row.btnrow.in3 .btn-block,
    .row.btnrow.in5 .btn-block { width:calc(100% - 2em); }

    .row.block { padding:20em 2em 6em 2em; width:calc(100% - 0em); height:auto; text-align:center; margin-bottom:5em; }
    .row.block p { font-size:2em; }
    .row.block .img { right:auto; left:50%; transform:translateX(-50%); }
    .row.block .btn-arrow { text-align:center; }
    .row.block .btn-arrow:before { float:none; margin:0 auto; }

    .row.block.laptop { margin-top:0; padding-top:3em; }
    .row.block.laptop.godown { margin-bottom:-5em!important; }
    .row.block:before { width:100%; height:100%; }
    .row.block.laptop .slogan { text-align:center; }
    .row.block.laptop .con { font-size:1em; width:100%; position:relative; text-align:left; left:auto; top:auto; transform:none; padding:3em; }
    .row.block.laptop .con .flex.right { margin-left:-1em; }
    .row.block.laptop .con a,
    .row.block.laptop .con a.col { width:100%; border-right:0; }

    .row.right .col { padding:1em; }
    .row.right .col>img { width:100%; height:9em; }


    
    .row.bannercover { height:40em; }
    .row.bannercover:after { background-size:200em; width:300em; height:5em; animation:_milk_m 9s linear infinite; }
    .row.productcover { overflow:hidden; }
    .row.productcover.home,
    .row.productcover.home .showblock.banner,
    .row.productcover { height:44em; }
    .row.productcover .p { width:100vw; height:100vw; margin-bottom:4em; }
    .row.productcover .sectitle { width:auto; top:50%; color:var(--black); line-height:1; transform:translate(-50%,-50%)!important; }
    .row.productcover .sectitle span { display:inline-block; width:auto; background:var(--black); color:white; line-height:1; font-size:inherit; padding:.1em; margin:.02em; }
    .row.productcover .sticker { background:transparent; top:50%; left:50%; transform:translate(-50%,-50%); width:14.5em; padding:0; display:flex; flex-direction:column; }

    /*
    .row.productcover .sticker p { height:1.2em; width:auto; line-height:1; font-size:2em; font-weight:bold; background:var(--black); word-break:keep-all; }
    .row.productcover .sticker p span { font-size:4em; }
    */

    .row.productcover .sticker p { font-size:1em; height:2em; }
    .row.productcover .sticker p span { font-size:2em; }




    .row.pagecon img { margin-left:-2em!important; width:calc(100% + 4em); max-width:calc(100% + 4em)!important; }
    .row.pagecon img.person,
    .row.pagecon img.locationstore,
    .row.pagecon img.logo-cis { margin-left:0!important; }

    .fullblockpadding { padding:0; }
    .listblock { width:100%!important; padding:0; margin:0!important; }
    .listblock .item { width:calc(100% - 2em); }




    .notebox { padding:2em 2.5em; }

    .bigtext { opacity:.25; font-size:10em; transform:translate(-1.9em,-1.7em) rotate(-90deg); }


}





.infoblock { margin:0; padding:0; display:flex; justify-content:center; align-items:top; padding:5em 0; width:100%; }
.infoblock:before { content:''; display:block; height:100%; width:100%; position:absolute; top:0; left:0; background:var(--lightgray); opacity:.4; display:none; }
.infoblock p { word-break:keep-all; }
.infoblock .dataset { margin:0; padding:0; width:60vw; display:flex; justify-content:left; flex-wrap:wrap; align-items:top; padding:0; }
.infoblock .data,
.infoblock .info { display:block; padding:2em 0; text-align:left; width:20vw; }
.infoblock .info { padding-right:10em; border-right:1px dotted var(--black); position:relative; }
.infoblock .info .btn-arrow { position:absolute; top:50%; right:2em; transform:translateY(-50%); margin:0; }
.infoblock .data { padding:2em 1.2em; width:18vw; }
.infoblock .data strong { font-size:1.2em; font-family:'Noto Serif TC', serif; font-style:italic; display:block; margin:0; line-height:1; }
.infoblock .data strong.smaller { font-size:1em; }
.infoblock .data strong a { font-size:inherit; font-family:inherit; font-style:inherit; line-height:inherit; }
.infoblock .data strong a:hover { text-decoration:underline; }
.infoblock .data p { background:var(--black); color:white; display:inline-block; padding:.2em .3em; margin:.2em 0; font-size:.9em; letter-spacing:2px; line-height:1; }
.infoblock .data small { margin:.2em 0; font-size:.8em; }


.listblock { display:flex; flex-wrap:wrap; justify-content:left; width:calc(100% + 2em); margin-left:-1em; xxborder:1px dotted gray; }
.listblock .item { display:block; margin:1em; border:1px solid var(--gray); width:calc(20% - 2em); overflow:hidden; border-radius:.3em; text-align:center; cursor:pointer; }
.listblock .img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; overflow:hidden; }
.listblock .img img { display:block; position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%,-50%)!important; object-fit:cover; transition:all .3s; }
.listblock .item * { xxxborder:1px solid lightgray; }
.listblock .item:hover .img img { transform:translate(-50%,-50%) scale(1.1)!important; opacity:.7!important; }

.listblock.table { display:flex; flex-wrap:wrap; justify-content:left; width:calc(100% + 2em); margin-left:-1em; }
.listblock.table .item { display:block; margin:1em; border:1px solid var(--gray); width:calc(100% - 2em); overflow:hidden; border-radius:.3em; text-align:center; cursor:pointer; }
.listblock.table .img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; overflow:hidden; background:var(--black); }
.listblock.table .img img { display:block; position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%,-50%); object-fit:cover; transition:all .2s; }
.listblock.table .item * { xxxborder:1px solid lightgray; }



.pconarea { padding:4em 10%!important; }
.listblock-search { padding:2em 0; justify-content:left; }
    .listblock-search .item { display:block; padding:1em 0; width:100%; border-bottom:1px solid var(--border); cursor:pointer; position:relative; }
    .listblock-search .item:last-child { border-bottom:0; }    
    .listblock-search .item.wimg { padding-left:12em; }    
    .listblock-search .item .thumb { display:inline-block; width:9em; height:6em; object-fit:cover; position:absolute; top:1em; left:0; }
    .listblock-search .item .thumb.p { object-fit:contain; }
    .listblock-search .item strong { display:block; font-size:1.2em; color:var(--red); margin:0 0 .8em 0; }
    .listblock-search .item p { font-size:1em; margin-bottom:0; }
    .listblock-search .item:hover { background:var(--lightgray); }

.listblock-pblock { padding:0 0 3em 0; justify-content:center; }
    .listblock-pblock .group { display:flex; flex-wrap:wrap; text-align:center; justify-content:center; padding:0; margin:0; margin-top:4em; }
    .listblock-pblock .group:first-child { xxxxmargin-top:3em; }
    .listblock-pblock .group .subtitle { display:block; font-size:3em; width:100%; text-align:center; margin:2em 0 .5em 0; }
    .listblock-pblock .group p { line-height:1.5; }
    .listblock-pblock .group .data { display:inline-block; text-align:center; margin:0; transform:translateY(-.7em) scale(.8); background:var(--gray); color:white; width:auto; }
    .listblock-pblock .group .data span { color:white; width:auto; padding:.2em; line-height:1; }
    .listblock-pblock .group .item { display:block; justify-content:center; background:transparent; border:0; width:calc(16.6% - 2em); margin:0; padding:1em; 
        display:grid; grid-template-rows:10em 1fr auto; 
        }
    .listblock-pblock .group .item .img { display:block; background:transparent; border:0; position:relative; width:10em; height:10em; margin:0 auto; margin-bottom:1em; }
    .listblock-pblock .group .item .img img { display:block; width:8em; height:8em; object-fit:contain; }
    .listblock-pblock .group .item p { padding:.2em 1em; }


    /* =========== */
        .listblock-pblock .group.group1 .item { width:calc(25% - 2em); grid-template-rows:11em 1fr auto; }
        .listblock-pblock .group.group1 .item .img { width:10em; }
        .listblock-pblock .group.group1 .item .img img { width:10em; height:10em; }
        .listblock-pblock .group.group2 .item { width:calc(25% - 2em); grid-template-rows:11em 1fr auto; }
        .listblock-pblock .group.group2 .item .img { width:10em; }
        .listblock-pblock .group.group2 .item .img img { width:10em; height:10em; }
        .listblock-pblock .group.group3 .item { width:calc(25% - 2em); grid-template-rows:11em 1fr auto; }
        .listblock-pblock .group.group3 .item .img { width:10em; }
        .listblock-pblock .group.group3 .item .img img { width:10em; height:10em; }
        .listblock-pblock .group.group4 .item { width:calc(25% - 2em); grid-template-rows:11em 1fr auto; }
        .listblock-pblock .group.group4 .item .img { width:10em; }
        .listblock-pblock .group.group4 .item .img img { width:10em; height:10em; }
        .listblock-pblock .group.group5 .item { width:calc(20% - 2em); }
        .listblock-pblock .group.group6 .item { width:calc(16.6% - 2em); }
        .listblock-pblock .group.group7 .item { width:calc(25% - 2em); }
        .listblock-pblock .group.group8 .item { width:calc(16.6% - 2em); }
        .listblock-pblock .group.group9 .item { width:calc(16.6% - 2em); }
        .listblock-pblock .group.group10 .item { width:calc(16.6% - 2em); }


    /*.gridblock .item { display:flex; margin:-1px 0 0 -1px; padding:2em; box-sizing:border-box; text-align:center; width:33.33%; border:1px solid #e1e2e5; display:grid; grid-template-rows:17vw 1fr auto; overflow:hidden; position:relative; border-top:0; border-left:0; margin:0; }
    .gridblock .item .img { display:block; margin:1em auto; xxxborder:1px solid #c1c2c5; height:15vw; width:15vw; position:relative; }
    .gridblock .item .img img { display:block; margin:0; height:100%; width:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
    .gridblock .item .img.circle { margin:4vw auto; height:10vw; width:10vw; border-radius:10vw; overflow:hidden; }
    .gridblock .item .info { margin:0; padding:1em; text-align:left; }
    .gridblock .item .info ul, .gridblock .item .info ol { margin-left:1.5em; }
    .gridblock .item h2 { font-size:1.5em; text-align:center; display:block; margin-bottom:1em; font-weight:normal; }
    .gridblock .item .btnrow { display:block; margin:0; padding:1em; text-align:center; }
    .gridblock .item .btn { display:block; background:var(--gold); color:white!important; margin:.4em 0; padding:.8em; text-align:center; cursor:pointer; border-radius:.2em; transition:all .1s; }*/

    .listblock-certblock { justify-content:center; padding:0; margin-top:-4em; margin-bottom:6em; }
    .listblock-certblock .item { background:transparent; border:0; width:auto; margin:1em 2em; padding:1em; pointer-events:none; text-align:center; }
    .listblock-certblock .item .img { display:block; position:relative; transform:none; background:transparent; border:0; margin:1em auto; padding:0; height:auto!important; width:auto!important; text-align:center; }
    .listblock-certblock .item .img img { position:relative; transform:none!important; left:auto; top:auto; display:block; width:6em; height:6em; object-fit:cover; margin:0 auto; }

    .listblock-brandrecommand { justify-content:center; transform:translateY(-3em); }
    .listblock-brandrecommand .item { width:10em; height:10em; border:0; border-radius:50%; margin:1.2em; }
    .listblock-brandrecommand .item:before { content:''; width:8em; height:8em; border-radius:10em; position:absolute; top:50%; left:50%; background:white; z-index:5; transform:translate(-50%,-50%); filter:blur(.5rem); opacity:.7; }
    .listblock-brandrecommand .item .img { display:block; width:100%; height:100%; background:transparent; z-index:10; border:0; mix-blend-mode:multiply; position:relative; }
    .listblock-brandrecommand .item .img img { display:block; object-fit:contain; }





.listblock.plistblock .item { width:10em; border:0; margin:0; }
.listblock.plistblock .item .img { width:10em; height:6em; background:transparent; position:relative; }
.listblock.plistblock .item .img img { height:6em; width:auto; margin:0 auto; }


.listtable a { color:var(--darkred); color:var(--red); }
.listtable tr td.yeartd { width:8em!important; /*font-weight:bold; font-size:1.2em;*/ vertical-align:top; }
.listtable tr td.notop { vertical-align:middle; }


.listtable-cert tr td.logo { width:25%; text-align:right; }
.listtable-cert tr td.logo .certificationlogo { display:block; width:5em!important; float:right; }

.listtable-dividend .bigger { font-weight:bold; font-size:1.2em; }
.listtable-regulation tr td:last-child { width:24%; }

.listtable-quarterreport tr td:last-child {}

.listtable-monthlyreport tr td.datalist { padding:1em 2em; }
.listtable-monthlyreport tr td.datalist .row { display:flex; align-items:flex-start; margin:0; padding:1em 0; border-bottom:1px dotted var(--gray); }
.listtable-monthlyreport tr td.datalist .row:last-child { border-bottom:0; }
.listtable-monthlyreport tr td.datalist .row * { display:block; margin:0; padding:0; line-height:1; font-size:1rem; }
.listtable-monthlyreport tr td.datalist .row span { width:10em; }
.listtable-monthlyreport tr td.datalist .row strong { width:100%; text-align:right; }
.listtable-monthlyreport tr td.datalist .row p { width:10em; border-left:1px solid var(--black); margin-left:1em; padding-left:1em; }
.listtable-monthlyreport tr td.datalist .row p:after { content:'%'; }
.listtable-monthlyreport tr td.right { xxxborder-left:1px solid gray; width:35%; text-align:left!important; vertical-align:top; padding-right:1em; }
.listtable-monthlyreport tr td.right .mobiletag { margin-top:1em; color:var(--darkred); }
.listtable-monthlyreport tr td.right:last-child { border-right:0; }
.listtable-monthlyreport tr td.forceright { text-align:right!important; }


.listtable-dividend tr td .mobiletag { margin-top:1em; color:var(--darkred); }


.listtable tr td.hide { opacity:0; }
.listtable tr td.right { text-align:right; }
.listtable tr td.bgwhite:before { display:none; }

.listtable-board {}
.listtable-board strong { font-size:1.5em; }
.listtable-board tr td:first-child { vertical-align:top; width:45%; padding-left:2em; }
.listtable-board p.type { font-size:.9em; font-weight:bold; color:var(--darkred); }

.listtable-decision {}
.listtable-decision strong { font-size:1.5em; }

.listtable-location tr td.yeartd { width:10em; }
.listtable-location tr td p { margin:0!important; line-height:1.5!important; }

.listtable-contact tr td:first-child { width:20em; }
.listtable-team tr td { vertical-align:top; }
.listtable-team tr td:nth-child(1) { width:10em; }
.listtable-team tr td:nth-child(2) { width:15em; }

.listtable-award tr td.yeartd { width:8em!important; font-weight:bold; font-size:1.2em; vertical-align:top; }
.listtable-award tr td:last-child {}


.listtable-form tr th { width:8em!important; vertical-align:top; }
.listtable-form tr td { padding:.2em .5em; }
.listtable-form tr td input,
.listtable-form tr td select,
.listtable-form tr td textarea { border:1px solid var(--border); display:inline-block; width:70%; min-width:200px; padding:.5em; font-size:1em; border-radius:.2em; }

.listtable-form tr td select { min-width:180px; width:180px; }
.listtable-form tr td textarea { height:250px; }
    @keyframes _flash { 0%,100%{background:var(--red); }50%{background:#b9121e; } }
.listtable-form tr td .error { display:inline-block; width:auto; background:var(--red); color:white; padding:1em 1.5em; border-radius:.2em; margin:0; margin:.2em .1em; animation:_flash 2s infinite; }
.listtable-form tr td .error:before { content:url(../images/icon-alert.svg); padding:0; width:1.5em; height:1.5em; margin-right:.5em; display:inline-block; transform:translateY(.2em); }
.listtable-form tr td.er input,
.listtable-form tr td.er select,
.listtable-form tr td.er textarea { border-color:var(--red); background:rgba(255,80,80,.05)!important; }
.listtable-form tr td .btn { display:inline-block; color:white!important; width:auto; text-align:center; padding:.8em 2.5em !important; background:var(--darkgray)!important; font-size:1rem; margin:.5em .2em!important; border-radius:.2em; border:0; }
.listtable-form tr td .btn:hover { background:var(--red)!important; }


.sendmessage { display:block; padding:2em; background:var(--lightgray); }
.sendmessage strong { display:block; font-size:1.3em; }


@media -ms-viewport, screen and (min-width:1800px) {
    .row.bannercover { margin-top:-9vw; xxxheight:50vw; }

    .listblock-pblock .group .item .img img { width:10em; height:10em; }
}
@media -ms-viewport, screen and (min-width:641px) and (max-width:1024px) {
}
@media -ms-viewport, screen and (max-width:640px) {

    .pconarea { padding:3em 0!important; }
    .listblock-pblock .group { margin-top:2em; xxxxborder:1px solid green; }
    .listblock-pblock .group .subtitle { font-size:2.5em; }
    .listblock-pblock .group .item { padding:.5em; width:calc(33.33% - .2em)!important; grid-template-rows:10em 1fr auto; xxxxborder:1px solid red; }
    .listblock-pblock .group .item .img { height:10em; width:100%!important; }
    .listblock-pblock .group .item .img img { width:10em; height:10em; }


    /* =========== */



    .infoblock { display:block; padding:5em 2em; }
    .infoblock .info { padding:0; border-right:none; position:relative; margin-left:0; }
    .infoblock .info .btn-arrow { display:none; }
    .infoblock .dataset {}
    .infoblock .data strong { font-size:1.6em; }
    .infoblock .data strong.smaller { font-size:1.4em; }
    .infoblock .data { padding:1em 0; width:100%; }

    .listtable-monthlyreport tr td.datalist { padding:1em 0; }
    .listtable-monthlyreport tr td.datalist .row { display:block; padding:2em 0; border-bottom:1px dotted var(--gray); }
    .listtable-monthlyreport tr td.datalist .row * { width:100%; text-align:left; padding:0; margin:.5em 0;  }
    .listtable-monthlyreport tr td.datalist .row p { text-align:right; border:0; width:100%; padding-left:0; margin-left:0; }
    .listtable-monthlyreport tr td.right { width:100%; }
    .listtable-monthlyreport tr td.right .mobiletag { display:block; }

    .listtable-cert tr td.logo { width:100%; }
    .listtable-cert tr td.logo .certificationlogo { float:none; margin:0!important; }

    .listtable-dividend tr td .mobiletag { display:block; margin-top:1em; color:var(--darkred); }

    .listtable-board {}
    .listtable-board tr td:first-child { width:100%; padding-left:0; }
    .listtable-board tr td:last-child { xxxfont-size:.8em; }

    .listblock-brandrecommand { width:100%; margin:0; }
    .listblock-brandrecommand .item { width:8em; height:8em; }

    .listtable-form tr td input,
    .listtable-form tr td select,
    .listtable-form tr td textarea { width:calc(100% + 1em); margin-left:-.5em; padding:.8em; }
    

}











.blockflow {}
.blockflow .item { display:block; margin:0; position:relative; margin-bottom:4em!important; }
.blockflow .item:after { content:url(../images/icon-arrow.svg); display:block; width:1.5em; margin:0 auto; position:absolute; bottom:-3em; left:50%; transform:translateX(-50%) rotate(90deg); }
.blockflow .item:last-child:after { display:none; }


.introblock { padding:2vw 0 6vw 0; }

.showblock { position:relative; display:block; width:100%; height:100%; overflow:hidden; }
.showblock .row { display:flex; justify-content:space-evenly; width:400vw; transform:translateY(-50%); position:absolute; left:0; }
.showblock .row:nth-child(1) { top:10%; }
.showblock .row:nth-child(2) { top:30%; }
.showblock .row:nth-child(3) { top:50%; }
.showblock .row:nth-child(4) { top:70%; }
.showblock .row:nth-child(5) { top:90%; }
.showblock .row .div { mix-blend-mode:multiply; }
.showblock .row img { display:block; width:6vw; height:6vw; object-fit:contain; mix-blend-mode:multiply; }
.showblock.banner { height:50vw; }
.showblock.banner:before { content:''; display:block; position:absolute; top:0; left:0; width:100%; height:15vw; background:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%); z-index:12; }
.showblock.banner:afterxxx { content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:8vw; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.33) 100%); z-index:13; }
.showblock.banner .item { display:block; width:100vw; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); cursor:pointer; opacity:1; }
.showblock.banner .item.important { transform:translate(-50%,-50%)!important; opacity:1; }
.showblock.banner .item .img { display:block; width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--black); }
.showblock.banner .item .img img { display:block; width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); object-fit:cover; opacity:.8; }
.showblock.banner .item .sticker { display:block; width:80%; padding:2em; position:absolute; top:calc(50% + 2em); left:50%; transform:translate(-50%,-50%); }
.showblock.banner .item .sticker p { display:block; position:relative; height:3.2em;height:3.6vw; }
.showblock.banner .item .sticker p span { margin:.1em; background:var(--black); color:white; display:inline-block; width:auto; }
.showblock.banner .nav { position:absolute; bottom:-2em; left:50%; transform:translate(-50%,-50%) scale(.8); z-index:155; animation:_delayin 5s forwards; }
    @keyframes _delayin { 0%,90%{opacity:0} 100%{opacity:1} }
    @keyframes _fadein { 0%{opacity:0} 100%{opacity:1} }
.showblock.banner .nav a { display:inline-block; width:1em; height:1em; background:var(--lightgray); margin:.4em; border-radius:2em; opacity:.5; }
.showblock.banner .nav a.selected { background:var(--red); opacity:1; animation:_fadein .5s forwards; }
.showblock.banner .item video { display:block; position:relative; height:3.2em; }
.showblock.banner .item iframe { display:block; width:100%; height:calc(100% + 140px); xxxxobject-fit:cover; margin-top:-70px; }




.adblock { display:block; height:auto; width:100vw; padding:0; position:relative; height:50vw; overflow:hidden; }
.adblock:beforexxxx { content:''; display:block; height:40vw; width:100%; position:absolute; top:-5vw; left:0; background:var(--lightgray); mix-blend-mode:multiply; pointer-events:none; }
.adblock .ad { display:block; position:relative; height:40vw; text-align:center; position:absolute; top:10vw; left:0; width:calc(100vw - 10em); }
.adblock .ad .img { display:block; position:absolute; top:0; left:0; width:calc(100vw - 10em); height:40vw; object-fit:cover; background:var(--black); }
.adblock .ad .img img { display:block; width:100%; height:100%; object-fit:cover; opacity:.85; }
.adblock .info { display:block; width:auto; text-align:center; margin:0 auto; color:white; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.adblock .info * { color:white; }
.adblock .info .btn { border-color:white; }
.adblock .info .flex { width:auto; justify-content:center; margin:2em auto 0 auto; }
.adblock.full { height:80vw; margin-top:-8vw; xxxpointer-events:none; mix-blend-mode:multiply; z-index:-1; }
.adblock.full:before { width:50%; opacity:.3; }
.adblock.full .ad,
.adblock.full .ad .img { width:100vw; height:80vw; }

.vblock { display:block; padding:0; border:2px solid white; height:60vw; position:relative; text-align:center; margin:0; width:100%; }
.vblock .con { display:block; margin:5em 0; height:100%; overflow:hidden; }
.vblock .img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.vblock .img img { display:block; width:100%; height:100%; object-fit:cover; }
.vblock video { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:2; }
.vblock .screen { display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:var(--black); opacity:.5; z-index:3; }
.vblock .info { display:block; width:auto; text-align:center; margin:0 auto; color:white; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:2em; font-weight:bold; z-index:5; }
.vblock .info * { color:white; }
.vblock .info .flex { width:auto; justify-content:center; margin:2em auto 0 auto; }
.vblock .vtitle { display:block; height:auto; font-size:7vw; letter-spacing:-2px; line-height:1.1; color:var(--black); font-weight:bold; position:absolute; top:15vw; left:50%; transform:translateX(-50%); font-family:'wc'; z-index:1; }
.vblock .vtitle img { display:block; height:auto; width:38vw; }




/* home */
.fullblockpadding { padding:3em 4em; }
.homenewsblock {}
.qualityclaimbox { xxxxbackground:url(../images/milkbubble.jpg); margin-top:1em; width:calc(100% + 6vw); margin-left:-3vw; }
.qualityclaimbox .col { width:33.33%; }
.qualityclaimbox h3 { color:var(--black); background:transparent; padding:0; font-size:1.4em; }
.qualityclaimbox h3 span { font-size:inherit; }
.qualityclaimbox h3 .red { color:var(--red); }
.qualityclaimbox h3 .dblue { color:var(--dblue); }
.qualityclaimbox h3 .dgreen { color:var(--dgreen); }

/* product */
.boardblock { width:100%; margin:0; margin-left:-.5em!important; }
.brandblock .item { border:1px solid var(--gray); width:calc(20% - 1em); height:auto; padding:1em; background:white; margin:.5em!important; }
    .container.sidemenuopen .conarea .sidemenu { xxxborder-right:1px solid var(--gray); }
    .container.sidemenuopen .conarea .brandblock.withsidemenu { justify-content:left }
    .container.sidemenuopen .conarea .brandblock.withsidemenu .item { width:11.5vw; }
.brandblock .item .logo { position:relative; height:6em; background:transparent; margin:0; padding:0; }
.brandblock .item .img { position:relative; height:8em; width:8em; background:transparent; margin:0 auto; padding:0; }
.brandblock .item .img img { height:100%; width:auto; margin:0 auto; object-fit:contain; }
.brandblock .item .thumb { height:6em; width:auto; display:inline-block; border:3px solid green; }
.brandblock .item p { display:none; }
.brandblock .item img { height:4em; }
.brandblock .item .logo { margin:0; margin-top:-.15em; margin-bottom:-1em; height:7em; mix-blend-mode:multiply; }
.brandblock .item .logo img { object-fit:contain; height:100%; }
.brandblock .item .row { height:auto; border:2px solid orange; }
.brandblock .item:hover { border:1px solid var(--gray); width:calc(20% - 1em); height:auto; padding-top:1em; }
.brandblock .item:hover .logo img { xxxtransform:translate(-50%,-50%)!important; }

    .brandblock.in4 { margin-left:-1em!important; }
    .brandblock.in4 .item { width:calc(25% - 1em)!important; }
    .brandblock.in4 .item .logo { margin-top:-1.1em; }

.brandinfoblock { padding:6vw 10vw; xxxmargin-bottom:4em; background:#eee; text-align:center; }
.brandinfoblock .row { font-size:1.2em; line-height:2; color:inherit; text-align:center; }
.brandinfoblock>.row * { font-size:unset!important; line-height:unset!important; color:inherit; margin:unset!important; padding:unset!important; }
.brandinfoblock .row.white,
.brandinfoblock .row.white * { color:white; }
.brandinfoblock .row p { margin:1em 0; }
.brandinfoblock .btn { border:1px solid var(--black); padding:1em 4em; display:inline-block; width:auto; margin:2em .2em; border-radius:.3em; }
.brandinfoblock .btn.white { border:1px solid white; color:white; }
.plateblock { flex-wrap:nowrap; }
.plateblock .mask { display:flex; flex-wrap:nowrap; }
.plateblock .item { border:0!important; width:22vw; height:22vw; }
.plateblock .item .img { background:transparent; }
.plateblock .item .img img { object-fit:contain; }
.plateblock .item .hint { position:absolute; top:72%; left:50%; transform:translate(-50%,-50%)!important; background:var(--darkgray); color:white; padding:.3em 1em; border-radius:.5em; opacity:0!important; }
.plateblock .item:hover .hint { opacity:1!important; }
.plateblock .item:hover .img img { transform:translate(-50%,-50%)!important; }

.catblock { display:flex; flex-wrap:wrap; justify-content:right; width:calc(100% + 2em); margin-left:-1em; margin-right:-.2em; font-size:.9em; }
.catblock .item { border:0; width:calc(25% - 2em); transition:all .2s; height:auto; margin:1em; cursor:pointer; text-align:center; display:block; }
.catblock .item .img { position:relative; height:9em; overflow:hidden; margin:0 auto; }
.catblock .item .img img { object-fit:contain; height:12em; width:auto; margin:0 auto; position:relative; top:0; left:auto; }
.catblock .item .info { margin:0; padding:1em; }
.catblock .item:hover { transform:translateY(-.2em); }

.serviceblock { text-align:center; padding:5em 0; text-align:left; }
.otherbanner { margin:0; line-height:1; }
.shareblock { line-height:1; color:white; padding:2em; margin:0; }
.shareblock .shareit { line-height:1; color:white; padding:2em; margin:0 0 2em 0!important; }
.shareblock .shareit p { margin:2em 0!important; }
.shareblock .shareit a { border-right:1px solid var(--black); }
.shareblock .shareit a:last-child { border-right-width:0!important; }
.shareblock .shareit.white p { color:white; }
.shareblock .shareit.white a { border-right:1px solid white; }
.shareblock .shareit.white a .icon-fb { content:url(../images/icon-facebook-white.svg); }
.shareblock .shareit.white a .icon-line { content:url(../images/icon-line-white.svg); }

.pshowcase { display:block; z-index:1233; position:fixed; top:0; left:0; width:100vw; height:100vh; background:white; xxxborder:3px solid red; }
    .pshowcase .btn-close { display:block; z-index:133; position:absolute; bottom:0; right:0; width:auto; height:auto; padding:1em; background:var(--black); transition:all .2s; cursor:pointer; opacity:.5; border-radius:10em 0 0 0; padding:3em 1.5em 1.5em 3em; }
    .pshowcase .btn-close:hover { opacity:1; padding:3.3em 1.8em 1.8em 3.3em; }
    .pshowcase .con { display:flex; xxxxxborder:2px solid orange; flex-direction:column; }
    .pshowcase .con .info { padding:3em; text-align:center; max-width:50vw; margin:0 auto; }
    .pshowcase .con .info h2 { margin-bottom:.2em; font-size:2em; }
    .pshowcase .con .info .data1 { padding:.3em .5em; background:var(--gray); }
    .pshowcase .con .info .data2 { padding:.3em .5em; background:var(--black); color:white; }
    .pshowcase .con .info .img { margin:3em auto; height:50vh; }
    .pshowcase .con .info .img img { width:auto; height:100%; object-fit:contain; }
    .pshowcase .con .prev,
    .pshowcase .con .next { transition:all .3s; cursor:pointer; display:block; z-index:33; position:absolute; top:50%; width:10em; transform:translate(-50%,-50%); }
    .pshowcase .con .next { left:calc(100vw - 3em); }
    .pshowcase .con .prev { left:3em; }
    .pshowcase .con .next:hover { left:calc(100vw - 3.5em); }
    .pshowcase .con .prev:hover { left:3.5em; }
    .pshowcase .con .prev .img,
    .pshowcase .con .next .img { display:block; width:10em; height:10em; }
    .pshowcase .con .prev .img img,
    .pshowcase .con .next .img img { display:block; width:100%; height:100%; object-fit:contain; }

.twoCol-pagecon .featureblock { display:block; text-align:left; background:white; width:100%; }
    .twoCol-pagecon .featureblock .item {display:flex;margin:0; overflow:hidden;width:100%;border-bottom:1px solid var(--border);justify-content: space-between !important;padding: 3em 0;}
    .twoCol-pagecon .featureblock .item .img {display:block;align-self: center !important; height: 25vw; margin: 0 auto; overflow: hidden;}
    .twoCol-pagecon .featureblock .item .img img {display:block; xxwidth: 100%; object-fit:cover;margin:1em 0 0 !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); width: 102%; height: 102%; object-fit: cover;}
    .twoCol-pagecon .featureblock .item .img.w40 {width: 40%;}
    .twoCol-pagecon .featureblock .item .con {display:block; align-self: center;}
    .twoCol-pagecon .featureblock .item .con.w55 {width: 55%;}
    .twoCol-pagecon .featureblock .item p {margin-bottom: 1.5em 0;}
    .twoCol-pagecon .featureblock .item p.larger { font-size:1.4em; }
    .twoCol-pagecon .featureblock .item p .bold { font-weight:bold; display:inline-block; font-weight:bold; color:var(--darkblue); }


/* investor about */
.sechome .col { width:50%; padding:2em 4em; }
.sechome .col:first-child { padding-left:0; }
.sechome .col:last-child { padding-right:0; }
.sechome .col p { font-size:1.1rem; }
.sechome .col p span { font-size:1.1rem; xxxdisplay:inline-block; margin:0 .2em; }
.boardblock { width:100%; margin:0; }
.boardblock .item { width:100%; border:0; border-bottom:1px solid var(--border); border-radius:0; text-align:left; display:flex; align-items:center; margin:0; padding:2em 0; }
.boardblock .item .img { margin-right:2em; position:relative; overflow:hidden; }
.historyblock { width:100%; margin:0; }
.historyblock .item { width:100%; border:0; border-bottom:1px solid var(--border); border-radius:0; text-align:left; margin:0; padding:2em; padding-left:14em; }
.historyblock .item:after { content:''; display:block; width:calc(100% - .4em); height:calc(100% - .4em); background:var(--lightgray); border-radius:0; margin:0; position:absolute; top:.2em; left:.2em; z-index:-1; }
.historyblock .item:last-child { border-bottom:0; }
.historyblock .item strong { position:absolute; top:2em; left:2em; font-size:1.2em; }
.historyblock .item .info {}
.historyblock .item .info img { position:relative; transform:none; top:0; left:0; max-height:12vw; width:auto; }
.historyblock .nav { position:fixed; top:50%; left:calc(50% - 750px); text-align:center; transform:translate(-50%,-50%) scale(.6); margin-left:350px; }
.historyblock .nav a { display:block; opacity:.5; margin:1.8em 0; }
.historyblock .nav a:after { content:''; display:block; margin:0 auto; width:1em; height:1em; border-radius:3em; background:var(--black); position:absolute; top:50%; left:-2em; transform:translateY(-50%); }
.historyblock .nav a.selected:after { background:var(--red); }
.stockinfo { margin-bottom:3em; margin-top:-1.2em; position:relative; display:flex; align-items:center; }
.stockinfo:before { content:''; display:block; position:absolute; top:0; left:8.3em; border-right:1px solid var(--darkgray); height:100%; }
.stockinfo h2 { font-size:2em; }
.stockinfo small { font-size:1.1em; width:10em; }

/* about */
.locationstore { display:block; height:6em; width:8em!important; object-fit:cover; }
.signatureline { margin:0 2em; height:0; width:4em; border-right:1px solid var(--black); display:inline-block; position:relative; }
.signatureline:after { content:''; height:9em; width:0; border-right:1px solid var(--black); opacity:.7; display:inline-block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.grayareabox { display:block; padding:.3em 2em .8em 2em; }
.grayareabox:before { content:''; display:block; width:calc(100% - .4em); height:calc(100% - .4em); top:.2em; left:.2em; background:var(--lightgray); border-radius:.4em; position:absolute; z-index:-1; mix-blend-mode:multiply; }
.countbox { display:block; padding:1em; padding-left:12em; position:relative; border-top:1px solid var(--border); }
.countbox .count { display:block; position:absolute; top:0; left:0; font-family:'wc'; font-size:5em; padding:.2em; }
.founderbox { display:flex; border-top:1px solid var(--border); position:relative; padding:2em; }
.founderbox:before { content:''; display:block; width:calc(100% - .4em); height:calc(100% - .4em); top:.2em; left:.2em; background:var(--lightgray); z-index:-1; position:absolute; z-index:-1; }
.founderbox .img { display:block; border-radius:10em; width:12em; height:12em!important; margin:2em 3em!important; overflow:hidden; }
.founderbox .img img { display:block; width:100%; height:100%; object-fit:cover; margin:0!important; }
.founderbox .info { display:block; width:calc(100% - 25em); padding:1em 2em; font-size:.8rem; }
.founderbox .info strong { font-size:1.3rem; }


/* esg */
.stakeholdertable {}
.stakeholdertable tr th:first-child { width:50%; }
.stakeholdertable tr th:nth-child(2) { width:25%; }
.stakeholdertable tr td:first-child {}
.stakeholdertable tr td strong.staketitle { font-size:1.5em; xxxcolor:var(--darkred); }
.stakeholdertable tr td:last-child strong,
.stakeholdertable tr td:last-child p { display:inline-block; }
.stakeholdertable tr td:last-child strong { margin-right:1em; }
.stakeholdertable .bigpadding { padding:2em 3em; }
.stakeholdertable .grayrow td:before { background:var(--grayrow); }

.consubtitle { font-size:1.2em; margin-top:2em; display:block; }

.importantissuebox .item { display:block; padding:2em 3em; background:var(--lightgray); color:var(--black); }
.importantissuebox .item strong { font-size:1.5em; }
.importantissuebox .item p { margin-bottom:0; }
.listcolor { flex-wrap:wrap; }
.listcolor .col { width:33.33%; padding:0 1em; }
.listcolor .col:nth-child(3) { border:0; }
.listcolor .col ol,
.listcolor .col ol li { list-style:none; margin:0; }
.listcolor .col ol { padding-left:0; }
.listcolor .col strong { width:100%; padding:.5em 1em; text-align:center; color:white; display:block; margin-bottom:1em; }


/* news */
.newsblock { width:calc(100% + 3em); margin-left:-1.5em; }
.newsblock .item { width:calc(25% - 3em); margin:1.5em; border:0; border-radius:0; margin-bottom:3em; 
        /*display:grid; grid-template-rows:12vw 1fr auto;*/ }
.newsblock .item .row p { text-align:left; }
.newsblock .item .img { position:relative; top:0; left:0; width:100%; height:12vw; object-fit:cover; border-radius:.3em; xxxbackground:var(--black); xxborder-bottom:5px solid var(--red); }
.newsblock .item .img:beforexxx { content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:100%; background:var(--black); transition:all ease-in-out .7s; z-index:55; opacity:.2; }
.newsblock .item .img img { xxxopacity:.8; }
.newsblock .item .row { text-align:left; }
.newsblock .item .row strong { font-weight:normal; }
.newsblock .item .row strong:after { content:''; display:block; position:absolute; top:105%; left:0; z-index:1; width:0; height:0; border-bottom:1px solid var(--black); transition:all .2s; }
    .newsblock .item:hover .row strong:after { width:100%; }

    .newsblock.in3 .item { width:calc(33.33% - 3em); }
    .newsblock.smaller .item { padding-top:2em; }
    .newsblock.smaller .item .img { height:9vw; }
.newsblock .item .info { padding:1em 0 0 0; text-align:left; display:grid; grid-template-rows:5em auto; }
.newsblock .item .info .note { font-size:.8em; opacity:.5; }
.newsblock .item .info strong { font-size:1.4em; padding:.05em 0; font-weight:bold; margin-bottom:.2em; display:inline-block; overflow:hidden; transition:all .2s; }
.newsblock .item .info strong span.line { display:block; height:0; width:0; border-top:1px solid var(--black); position:absolute; bottom:0; }
.newsblock.newsstyle1 {}
.newsblock.newsstyle1 .item:nth-child(1) { width:calc(66.66% - 3em); }
.newsblock.newsstyle1 .item:nth-child(2) { width:calc(33.33% - 3em); }
.newsblock.newsstyle1 .item:nth-child(1) .img,
.newsblock.newsstyle1 .item:nth-child(2) .img { height:20vw; }
.newsblock.newsstyle1 .item:nth-child(4) { width:calc(66.66% - 3em); }
.newsblock.newsstyle1 .item:nth-child(3) { width:calc(33.33% - 3em); }
.newsblock.newsstyle1 .item:nth-child(3) .img,
.newsblock.newsstyle1 .item:nth-child(4) .img { height:20vw; }

.newsblock.newsstyle2 {}
.newsblock.newsstyle2 .item:nth-child(1) { width:calc(60% - 3em); }
.newsblock.newsstyle2 .item:nth-child(1) .img { height:20vw; }
.newsblock.newsstyle2 .item:nth-child(2),
.newsblock.newsstyle2 .item:nth-child(3),
.newsblock.newsstyle2 .item:nth-child(4) { width:calc(40% - 3em); display:flex; align-items:top; }
.newsblock.newsstyle2 .item:nth-child(2) .img,
.newsblock.newsstyle2 .item:nth-child(3) .img,
.newsblock.newsstyle2 .item:nth-child(4) .img { height:3em; width:4em; }
.newsblock.newsstyle2 .item:nth-child(2) .info,
.newsblock.newsstyle2 .item:nth-child(3) .info
.newsblock.newsstyle2 .item:nth-child(4) .info { padding:0 0 0 1em; display:block; }


.newsblock .item:hover .img img { opacity:.7; transform:translate(-50%,-50%) scale(1.1); }
.newsblock .item:hover .img:after { opacity:1; transform:translate(-50%,-50%) scale(2.5); }
.newsblock .item:hover .info strong { xxxcolor:var(--red); }
.newsblock .item:hover .info strong:afterxxx { width:100%; }
.newsblock .item:hover p { text-decoration:none!important; }

.newsblock .item.left { text-align:left; }
.newsblock.paragraph .item { text-align:left; }
.newsblock.paragraph .item strong { font-size:1.3em; font-weight:bold; margin:1em 0; display:block; }
.newsblock.nolink .item { pointer-events:none; }


    .newsblock.homenewsblock .item { margin:1.5em; }
    .newsblock.homenewsblock .item .img { height:9vw; }
    .newsblock.homenewsblock .item .info { display:block; height:auto; }


.newssetblock { padding:5em 0; }

.newsheadblock { display:block; height:auto; width:80%; width:100%; margin:0 auto; padding:5em 10em 0 0; position:relative; xxheight:42vw; height:37vw; overflow:hidden;  }
.newsheadblock:beforexxx { content:''; display:block; width:100vw; position:absolute; height:15vw; background:var(--red); z-index:1; top:0; left:-10vw; }
.newsheadblock .img { display:block; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; background:var(--black); z-index:16; }
.newsheadblock .img img { display:block; width:100%; height:100%; object-fit:cover; opacity:.7!important; }
.newsheadblock .img:after { content:''; display:block; position:absolute; bottom:0; display:block; width:100%; height:25vw; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 100%); z-index:1; }
.newsheadblock .info { display:block; position:absolute; top:70%; left:50%; transform:translateX(-50%) translateY(-100%); color:white; z-index:18; }
.newsheadblock .info .entitle { color:white; font-weight:bold; letter-spacing:.4em; margin-left:.4em; text-transform:uppercase; }
.newsheadblock .info h2 { color:white; width:80%; padding-right:8vw; }
.newsheadblock .info p { color:white; padding-right:8vw; }

.newspagecon { xxxxmargin-top:-5vw; z-index:166; xxxbackground:white; z-index:16; }
.newspagecon .contentblock { width:80%; margin:2vw auto!important; font-size:1.1em; }
.newspagecon .contentblock h2 { margin:2em 0 0 0; }
.newspagecon .contentblock h2.smaller { font-size:2em; color:var(--red); }
.newspagecon .contentblock p.date { font-size:.8em; opacity:.5; margin-bottom:4em;  }
.newspagecon figure.image_resized { display: block; margin: 0 auto; }
.shareit { display:flex; margin:8vw auto!important; width:auto; justify-content:center; flex-wrap:wrap; }
.shareit p { display:block; width:100%; text-align:center; margin:6em 0; }
.shareit a { display:block; margin:0; padding:1em; border-right:1px solid var(--gray); opacity:.3!important; transition:all .3s; }
.shareit a:last-child { border-right:0; }
.shareit a:hover { opacity:.6!important; }
.shareit a .icon { width:4em; height:4em; }

.imguser { display:block; width:8em!important; height:8em!important; border-radius:50%; overflow:hidden; line-height:1; }


/* recruit */
    .rowbannerblock { position:relative; height:27vw; }
    .rowbannerblock .mask { position:absolute; top:0; left:0; display:block; width:auto; }
    .rowbannerblock .mask img { display:inline; height:27vw; width:auto; }
    .logo104 { width:2em; margin:1em 0; vertical-align:middle; }
    .recruitflow * { margin-right:2em; }
    .recruitflow .item { display:flex; align-items:center; }
    .circlenum { display:inline-block; width:2em; height:2em; margin:2em .4em 2em 0; border:1px solid var(--black); position:relative; border-radius:5em; vertical-align:middle; transform:translateY(-.2em); }
    .circlenum span { display:inline-block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }


    .jobblock { margin:3em 0; }
    .jobblock .item { display:block; width:calc(33.33% - 1em); background:var(--lightgray);background:white; border:0; position:relative; text-align:left; padding:1em 1.5em; margin:.5em; }
    .jobblock .item strong { display:block; font-size:1.5em; color:var(--darkred); margin-bottom:.8em; }
    .jobblock .item .btn { border-radius:1.8em; margin-top:1em; padding:.8em 1.5em; width:auto; display:inline-block; margin:1em auto; }
    .jobblock .item ol li,
    .jobblock .item ul li { margin:0; }



    @keyframes _milk { 0%{left:0}100%{left:-4000px;} }
    @keyframes _milk_m { 0%{left:0}100%{left:-200em;} }
.milkshape { content:''; background-image:url(../images/milkshape.svg); background-size:8000px; background-repeat:repeat-x; display:block; width:4000px; height:7em; position:absolute; bottom:-2px; left:0; z-index:102; pointer-events:none; animation:_milk 10s linear infinite; }
.milkshape:after { content:''; background-image:url(../images/milkshape.svg); background-size:8000px; background-repeat:repeat-x; display:block; width:4000px; height:7em; position:absolute; bottom:0; left:3999px; }
.row.stickytop .milkshape { transform:rotate(180deg); bottom:auto; top:calc(100% - 4px);top:0; z-index:2; }
    .row.stickytop .milkshape:after { left:-3999px; }



.captcha-box { display:flex; align-items:center; justify-content:left; }
.captcha-box canvas { display:block; }
.captcha-box .form-control { min-width:10em; width:10em; }



@media -ms-viewport, screen and (min-width:1800px) {
    .row.bannercover { margin-top:-9vw; xxxheight:50vw; }
}
@media -ms-viewport, screen and (min-width:641px) and (max-width:1024px) {
    .newsblock .item { width:calc(33.33% - 3em); }
}
@media -ms-viewport, screen and (min-width:641px) and (max-width:900px) {
    .newsblock.newsstyle1 {}
    .newsblock.newsstyle1 .item:nth-child(1) { width:calc(100% - 3em); }
    .newsblock.newsstyle1 .item:nth-child(2) { width:calc(33.33% - 3em); }
    .newsblock.newsstyle1 .item:nth-child(1) .img { height:36vw; }
    .newsblock.newsstyle1 .item:nth-child(4) { width:calc(33.33% - 3em); }
    .newsblock.newsstyle1 .item:nth-child(3) { width:calc(33.33% - 3em); }
}
@media -ms-viewport, screen and (max-width:640px) {

    .sechome .col { width:100%; padding:2em 0; }
    .sechome .col p { text-align:justify; }

    .catblock { justify-content:center; width:100%; margin:0; }
    .catblock .btn {}
    .catblock .item { width:calc(50% - 2em); padding:0; border:0; }
    .catblock .item .img { height:5em; }
    .catblock .item .img img { height:7em; }
    .qualityclaimbox { width:100%; margin-left:0; }
    .qualityclaimbox .col { width:100%; }
    
    .showblock .row { width:800vw; }
    .showblock .row img { width:60px; height:60px; }
    .showblock.banner { height:44em; }
    .showblock.banner .item { width:100vw; height:44em; }
    .showblock.banner .item .sticker { top:65%; }
    .showblock.banner .item .sticker p { height:auto; }
    .showblock.banner .item .sticker p span { font-size:1.6em; position:relative; }
    .showblock.banner .nav { bottom:1.5em; }


    .adblock { padding:2em 0; height:auto; }
    .adblock.full { height:auto; }
    .adblock.full:before { width:70%; opacity:.5; }
    .adblock:before { height:90%; opacity:.4; }
    .adblock .ad { height:auto!important; padding:15em 2em; position:relative; width:100%; xxxbox-shadow:0 20px 20px rgba(0,0,0,.2); }
    .adblock .ad .img { width:100%; height:100%; }
    .adblock .info { position:relative; top:auto; left:auto; transform:none; font-size:1.4em; }
    .adblock .info p { margin:0; }
    .adblock .info h2 { font-size:1.4em; letter-spacing:-1px; }
    .adblock .info small { font-size:.7em; margin:0; }
    .vblock { height:40em; margin:3em 0; width:100%; }
    .adblock.full .ad, .adblock.full .ad .img { height:100%; }

    .brandblock.in4 { margin-left:0!important; }
    .brandblock.in4 .item { width:calc(50% - 1em)!important; text-align:center; }
    .brandblock.in4 .item .img { text-align:center; position:relative; }
    .brandblock.in4 .item .img img { width:100%; position:relative; top:auto; left:auto; transform:none!important; margin:0 auto!important; }


    .pshowcase .con {}
    .pshowcase .con .info { padding:0; max-width:90vw; }
    .pshowcase .con .info .img { height:40vh; }
    .pshowcase .con .prev,
    .pshowcase .con .next { top:40%; width:5em; }
    .pshowcase .con .next { left:calc(100vw - 1em); }
    .pshowcase .con .prev { left:1em; }
    .pshowcase .con .next:hover { left:calc(100vw - 1.5em); }
    .pshowcase .con .prev:hover { left:1.5em; }
    .pshowcase .con .prev .img,
    .pshowcase .con .next .img { width:5em; height:5em; }



    /* about */
    .brandblock { width:100%; padding:0; }
    .brandblock .item,
    .brandblock .item:hover { width:calc(50% - 1em); margin:.5em; }
    .brandblock .item .img { position:relative; height:6em; }
    .brandblock .item .img img { height:6em; width:auto; margin:0 auto; }
    .brandinfoblock { padding:3em 1em; margin-bottom:0; text-align:justify; }

    .plateblock { width:100%; overflow-x:scroll; }
    .plateblock .item { width:20em; height:20em; }

    .boardblock { width:100%; padding:0; margin:2em 0!important; }
    .boardblock .item { width:100%; padding:1em; }

    .historyblock .item { padding:1em; padding-left:3em; padding-top:4em; }
    .historyblock .item strong { top:1em; left:1em; }
    .historyblock .item .info img { max-height:10em!important; width:100%; height:10em; object-fit:cover; margin:0; }

    .founderbox { display:block; }
    .founderbox .img { width:12em; height:12em!important; margin:2em auto!important; }
    .founderbox .info { width:100%; padding:0; }

    .countbox { padding:1em 0; }
    .countbox .count { position:relative; padding:.2em; }
    .countbox .plistblock { padding:0; }
    .countbox .plistblock .item { width:50%; }
    .countbox .plistblock .item .img { margin:0; width:100%; }
    .countbox .plistblock .item .img img { width:100%; object-fit:contain; margin:0!important; padding:0; }
    .countbox .plistblock .item p { text-align:center; width:100%; }



    /* esg */
    .stakeholdertable .bigpadding { padding:2em 0; }
    .importantissuebox .item { padding:2em; }



    /* news */
    .newsblock { width:100%; margin-left:0; }
    .newsblock .item { width:100%; height:auto; margin:0; margin-bottom:1em; }
    .newsblock.in3 .item { width:100%; }
    .newsblock .item .img { height:12em; }
    .newsblock.smaller .item .img { height:10em; }
    .newsblock.newsstyle1 .item:nth-child(1),
    .newsblock.newsstyle1 .item:nth-child(2),
    .newsblock.newsstyle1 .item:nth-child(3),
    .newsblock.newsstyle1 .item:nth-child(4) { width:100%; }
    .newsblock.newsstyle1 .item:nth-child(1) .img,
    .newsblock.newsstyle1 .item:nth-child(2) .img,
    .newsblock.newsstyle1 .item:nth-child(3) .img,
    .newsblock.newsstyle1 .item:nth-child(4) .img { height:10em; }

    .newsblock.homenewsblock .item .img { height:10em; }
    .newsblock.homenewsblock .item { width:100%; height:auto; margin:0; margin-bottom:1em; }


    .listcolor .col { width:100%; }

    .newsheadblock { height:120vw; }
    .newspagecon .contentblock { width:100%; }


    /* recruit */
    .jobblock { margin:3em 0; padding:0; display:block; width:calc(100% - .005em); }
    .jobblock .item { display:block; width:100%; padding:1em; }
    .jobblock .item strong { position:relative; top:auto; left:auto; margin:0; padding:0; font-size:1.2em; }


    /* product */
    .twoCol-pagecon .featureblock .item { flex-direction:column; }
    .twoCol-pagecon .featureblock .item .img { width:100%; order: 1;height: 40vw;}
    .twoCol-pagecon .featureblock .item .img.w40 { width:100%; }
    .twoCol-pagecon .featureblock .item .con { padding:2em; order: 2;}
    .twoCol-pagecon .featureblock .item .con.w55 { width:100%; }
    .tablehead2:before {background: white;}


}

















/*
                   _         _   
  _ __ _ _ ___  __| |_  _ __| |_ 
 | '_ \ '_/ _ \/ _` | || / _|  _|
 | .__/_| \___/\__,_|\_,_\__|\__|
 |_|                             

*/









/*
body { 
    xxborder-right:3.6em solid white; 
    xxxborder-right:4.6em solid white;
    xxxborder-left:1em solid white; }

.sidetext { background:white; border-left:1px solid var(--bggray); }
.header .darkset { background:transparent; color:var(--black); }
*/


/*
.row.cover { height:50vw; }
.row.cover .sticker { background:transparent; top:72%; left:80%; }
.row.cover .sticker p { line-height:2.4; letter-spacing:2px; }
*/

.titlerow,
.narrow { xborder:1px dotted lightgray; }











.about-carddesign { border-bottom:1px solid var(--border); position:relative; display:flex; background:transparent; }
.about-carddesign:before { content:''; display:block; width:calc(100% - .4em); height:calc(100% - .4em); top:.2em; left:.2em; background:var(--lightgray); border-radius:.4em; position:absolute; z-index:-1; mix-blend-mode:multiply; }
.about-carddesign .img { display:block; object-fit:cover; width:25%!important; height:20vw; padding:0 1em; }
.about-carddesign .img img { display:block; object-fit:cover; width:100%; height:20vw; }
.about-carddesign .info { padding:2em 3em; vertical-align:top; }
.about-carddesign .info h3 {}
.about-carddesign .info strong { font-size:1.5em; }


.about-circledesign { border-bottom:1px solid var(--border); padding-left:12em; }
.about-circledesign .img { display:block; width:10em; height:10em!important; border-radius:50%; overflow:hidden; position:absolute; top:40%; left:0; transform:translateY(-50%); }
.about-circledesign .img img { display:block; object-fit:cover; width:100%; height:100%; margin:0!important; }
.about-circledesign .info { padding:2em; padding-right:0; vertical-align:top; }
.about-circledesign .info h3 {}
.about-circledesign .info p { margin:0; }
.about-circledesign .info strong { font-size:1.5em; }


@media -ms-viewport, screen and (min-width:1800px) {
}
@media -ms-viewport, screen and (min-width:641px) and (max-width:1024px) {
}
@media -ms-viewport, screen and (min-width:641px) and (max-width:900px) {
}
@media -ms-viewport, screen and (max-width:640px) {
    .about-circledesign { padding-left:0; padding-top:12em; }
    .about-circledesign .img { top:0; left:50%; transform:translateX(-50%); }
    .about-circledesign .info { padding:0; }


}























/*

  _                                   
 | |__ _ _ _  __ _ _  _ __ _ __ _ ___ 
 | / _` | ' \/ _` | || / _` / _` / -_)
 |_\__,_|_||_\__, |\_,_\__,_\__, \___|
             |___/          |___/     

*/




.lang-en * { 
    font-family:'Barlow','Roboto Condensed',Arial,sans-serif;
    font-family:'Roboto',Arial,sans-serif;
    font-family:Arial,sans-serif;
    letter-spacing:0; line-height:1.5em;
    }
.lang-en .header .menu axx { font-size:1.1rem; letter-spacing:0; font-weight:500; text-transform:capitalize; xxxxtext-transform:uppercase; padding:1.5em; }
.lang-en .header .menu a { font-size:.8rem; letter-spacing:.05em; font-weight:bold; text-transform:uppercase; padding:1.5em 1.5em; }
.lang-en .infoblock .data p { font-size:.9em; letter-spacing:0; font-family:'Noto Serif TC',sans-serif!important; }

.lang-en .row.cover2 .sectitle img { height:3.4vw; }
.lang-en .btn { padding:.8em 1.2em; font-size:.77rem; font-weight:bold; height:auto; text-transform:capitalize; }
.lang-en .btn:hover { letter-spacing:1px; }
.lang-en .otherinfo .btn-text { font-size:.8em; }

.lang-en .titlerow h2.sectitle { word-break:keep-all; }
.lang-en .btn-banner strong { font-size:1em; letter-spacing:0; }
.lang-en .row.btnrow.in3 .btn-block, .row.btnrow.in5 .btn-block { font-size:.8em; xxxletter-spacing:0; }

.lang-en h2.slogan { text-align:left; letter-spacing:-.03em; }
.lang-en h2 { text-transform:capitalize; }
.lang-en .pagecon p,
.lang-en .maincon p { font-size:1rem; letter-spacing:-.01em; text-align:left; margin:.5em 0; }
.lang-en .maincon strong { font-size:1.1em; }
.lang-en .shareit p { text-align:center; }
.lang-en .btn-block { width:24em; }
.lang-en .row.stickytop .floatright a { font-size:1em; }
.lang-en .infoblock .data small { line-height:1.2; margin:.5em 0; display:inline-block; }
.lang-en .adblock .info h2 { xxxfont-size:2em; }
.lang-en .adblock .info { font-size:.85em; }
.lang-en table.tdpadding2 td strong, 
.lang-en table.column3 td strong { letter-spacing:0; margin-bottom:.7em; font-size:1.3em; }
.lang-en strong.sectitle { margin-top:3em; margin-bottom:.8em; }
@media device-width, screen and (max-width: 640px) {
    .lang-en h2 { font-size:2em; }
}
***** { border:1px solid red; }







.plyr__video-embed iframe {
    top: -50%;
    height: 200%;
}
.ytp-pause-overlay,
.ytp-pause-overlay-container { display:none!important; visibility:hidden!important; }


table.gsc-search-box { border:0!important; margin:0; }
.gsc-control-cse,
.gsc-control-cse table tr,
.gsc-control-cse table tbody,
.gsc-control-cse table td,
.gsc-control-cse table th,
.gsc-input-box { border:0; padding:1px; }
.gsc-input-box table { margin:0; border:0; border-color:white; }
.gsc-input-box table tr,
.gsc-input-box table tbody { margin:0; border:0!important; }
.gsc-input-box table td, .gsc-input-box table th { border:0!important; padding:2px; }

.gstl_50 { display:none; }
.gs-title { padding:1em 0; font-size:1.2em; }
.gsc-webResult .gsc-result { padding:3em 0; }

.gsc-modal-background-image-visible { opacity:0!important; display:none!important; }
.gsc-results-wrapper-overlay { box-shadow:0 2px 20px rgba(0,0,0,.2)!important;
    padding:4em 10%!important; width:100%!important; top:0!important; left:0!important; height:100vh!important;
}

@media device-width, screen and (max-width: 640px) {
    .gsc-control-cse,
    .gsc-control-cse table tbody,
    .gsc-control-cse table tr,
    .gsc-input-box table tr { border:0!important; padding:1px; }
    .gsc-control-cse table td,
    .gsc-control-cse table th { display:table-cell!important; padding:1px; }

    .gssb_c { display:none!important; }

    .gs-promotion-image-box img.gs-promotion-image, .gs-web-image-box-portrait img.gs-image, .gs-web-image-box-landscape img.gs-image { width:60px!important; height:40px!important; }
}