@charset "utf-8";

header{padding: 16px 0 4px;background: #000000;}
header::after{content:'';position:absolute;left:0;right:0;bottom: 5px;height:4px;background:url(menu-bottom-line.png)}
header .navbar-expand-lg{display:flex;justify-content: space-between;align-items: center;}
header a{color:#fff;display:block;padding:5px 7px}
header .navbar-brand{float:left;padding:0;height: 45px;/* padding:5px 0; */}
header .navbar-brand img{max-width:100%;max-height:100%;/* height: 100%; */width: 100%;}
.navbar-nav .icon-group a{display:block;padding: 0;}
.navbar-nav .icon-group img{max-width:25px;max-height:25px}
.navbar-nav .icon-group > *{display:inline-block;vertical-align:middle}
.navbar-nav .icon-group .items{position:relative}
.navbar-nav .icon-group div {width: 30px;text-align: center;}
.navbar-nav .icon-group .items .icon{line-height:47px;cursor:pointer}
.navbar-nav .icon-group .items ul{display:none;list-style:none;margin:0;padding:10px;position:absolute;right:-15px;top:100%;width:200px;background:#eee}
.menu-r {margin-bottom: 0;list-style: none;padding-left: 0;margin-right: 10px;}
.menu-r .items{width:35px;text-align:center;cursor: pointer;}
.menu-r .items .icon{line-height: 47px;}
.menu-r .items a.on{background-color:#0A5596;color: #fff;}
.navbar-nav .icon-group .items ul li{margin-bottom:5px}
.navbar-nav .icon-group .items a{padding:5px 7px}
.navbar-nav .icon-group .items ul img{display:inline-block;vertical-align:middle;max-height:20px;margin-right:10px}
header .menu{margin:0 -15px;padding:0 15px;font-size: 18px;}
.navbar-nav .nav-link:focus,.navbar-nav .nav-link:hover{color:#00A0E6}
header .navbar-toggler{float:right;margin-right:-15px;width:56px;height:50px;border-radius:0}
header .navbar-toggler.btn-search{margin-right:0;background:transparent;border:none}
.navbar-nav .nav-link{padding:15px 15px 10px;cursor:pointer}
header .nav-item:not(.full){position: relative;}
header .nav-item .nav-link{position:relative;padding-top: 1rem;padding-bottom: 1rem;}
header .nav-item .nav-link:after{content:'';opacity:0;display:inline-block;position:absolute;left:50%;bottom:0;width:0;height:2px;margin-left:0;background:#00A0E6;border:none;-ms-transform:translate(-50%,0);-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}
header .sub-unit li.active.has_next:before,header .sub-unit li.has_next:hover:before{opacity:0;left:0}
header .full .dropdown-menu{display:none;clear:both;width:100%;background:#fff}
header .sub-unit{padding:30px}
header .full .dropdown-menu a{display:inline-block;padding:5px;font-size: 17px;}
header .sub-unit{list-style:none;margin:0;padding:30px;font-size: 17px;background: url(motif-2.png) #DCDCDC;background-size: 70% auto;background-repeat: no-repeat;background-position: 150% -2em;}
header .sub-unit li{position:relative;max-width: 340px;text-align:left;margin:0 0 0 auto}
header .sub-unit li:after{content:'';opacity:0;position:absolute;right: -33px;top:50%;width:0;height:0;border-style:solid;border-width:10px 12px 10px 0;border-color:transparent #00a0e6 transparent transparent;-ms-transform:translate(0,-50%);-webkit-transform:translate(0,-50%);transform:translate(0,-50%);}
header .sub-unit li.active:after{opacity:1}
header .tab_content{width: 70%;}
header .tab_content a{color:#000000}
header .tab_content--nobg .tabs_item{position: relative;z-index: 1;height: 100%;background: linear-gradient(135deg, rgba(220, 220, 220, 1) 1%, rgb(255 255 255 / 0%) 100%), #DCDCDC}
header .tab_content--nobg .tabs_item::after{content: '';position: absolute;z-index: -1;right: 30px;bottom: 50px;width: 50%;height: 150px;background-image: var(--bgimg);background-size: contain;background-position: right bottom;background-repeat: no-repeat;}
header .tab_content--nobg .tabs_item--noIcon::after{bottom: 0;right: 0;background: url(motif-3.png),linear-gradient(135deg, rgba(220,220,220,1) 1%,rgb(255 255 255 / 0%) 100%), #DCDCDC;background-repeat: no-repeat;background-position: right bottom;background-size: auto 110px;}
header .tabs_item:nth-child(n+2){display: none;}
header .tabs_item{clear:both;overflow:hidden;padding: 30px;}
header .tabs_item h4{color:#0A5596;font-weight:700}
header .tab_content .unit-image{max-width:280px}
header .tabs_item .right-title{list-style:none;margin:0;padding:0}
header .tab_content .unit-image{display:none}
header.pc.fix_top{box-shadow:0 0 3px rgba(0,0,0,.3)}
header.pc.fix_top .navbar-nav .nav-link{padding-top:26px;padding-bottom: 12px;}
header .nav-item:hover .nav-link{color:#00A0E6}
header .nav-item:hover .nav-link:after{opacity:1;width:50px}
header .dropdown.full{position:static}
.dropdown-menu{margin-top:0;border-radius:0;background: #DCDCDC;background-repeat: no-repeat;background-size: 80% auto;background-position: top center;}
.dropdown-menu a{color:#000000}
.dropdown-menu a:hover{color:#00A0E6}
.full .dropdown-menu{padding:0}
.btn-search{display:block;margin:0 auto;fill:currentColor;padding: 0 7px;}
.search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:rgba(33,33,33,.9);position:fixed;z-index:9999;top:0;left:0;width:100%;height:100vh}
.search::before,.search::after{content:'';position:absolute;width:calc(100% + 15px);height:calc(100% + 15px);pointer-events:none;border:1.5em solid #212121}
.search::before{top:0;left:0;border-right-width:0;border-bottom-width:0}
.search::after{right:0;bottom:0;border-top-width:0;border-left-width:0}
.btn-search-close{font-size:2em;position:absolute;top:0;right: 0;display:none;display:block;}
.search_form{margin:5em 0}
.search_input{font-family:inherit;font-size:2rem;line-height:1;display:inline-block;box-sizing:border-box;width:75%;padding:.05em 0;color:#00A0E6;border:none;border-bottom:1px solid #00A0E6;background:transparent}
.search_input::-webkit-input-placeholder{opacity:.3;color:#00A0E6}
.search_input::-moz-placeholder{opacity:.3;color:#00A0E6}
.search_input:-ms-input-placeholder{opacity:.3;color:#00A0E6}
.search_input::-webkit-search-cancel-button,.search_input::-webkit-search-decoration{-webkit-appearance:none}
.search_input::-ms-clear{display:none}
.search_info{font-size:90%;font-weight:700;display:block;width:75%;margin:0 auto;padding:.85em 0;text-align:right;color:#00A0E6}
.search{pointer-events:none;opacity:0;transition:opacity .5s}
.search-open{pointer-events:auto;opacity:1}
.search::before,.search::after{transition:transform .5s}
.search::before{transform:translate3d(-15px,-15px,0)}
.search::after{transform:translate3d(15px,15px,0)}
.search-open::before,.search-open::after{transform:translate3d(0,0,0)}
.btn-search-close{opacity:0;transform:scale3d(0.8,0.8,1);transition:opacity 0.5s,transform .5s}
.search-open .btn-search-close{opacity:1;transform:scale3d(1,1,1)}
.search_form{opacity:0;transform:scale3d(0.8,0.8,1);transition:opacity 0.5s,transform .5s}
.search-open .search_form{opacity:1;transform:scale3d(1,1,1)}


@media (max-width: 1199px) {
    header .container{max-width:100%}
    
}
@media (max-width: 1024px) {
    header .menu{width: calc(100% - 180px);}
}
@media (max-width: 991px) {
    header .navbar-expand-lg{display:block}
    header .menu{width: calc(100% + 30px);padding:0;box-shadow:0 2px 3px rgba(0,0,0,.2);}
    .header-top{position:absolute;right:80px;top:8px}
    header .container{max-width:100%}
    header .navbar-brand{margin-top:2px;height: auto;width: calc(100% - 160px);max-width: 190px;}
    header .menu .navbar-collapse{background:#212121;padding:15px;padding:0;height:500px;overflow:hidden;overflow-y:scroll}
    header .full .dropdown-menu{min-height:inherit}
    header .full .dropdown-menu a,nav a{padding:8px 0}
    header .sub-unit li{margin-left:0;max-width:100%}
    header .tab_content{display:none}
    .navbar-nav .icon-group .items{display:block;width:100%}
    .navbar-nav .icon-group .items ul{position:static;width:100%}
    .navbar-nav .icon-group .items ul li{float:left;width:50%;text-align:left}
    header .nav-item .nav-link:after{left:0;-ms-transform:translate(0,0);-webkit-transform:translate(0,0);transform:translate(0,0)}
    .navbar-nav .icon-group .items ul{display:block!important;background:#797979;clear:both;overflow:hidden;border:none}
    .navbar-nav .icon-group a{color:#fff}
    .dropdown-menu{padding:30px 0;}
    .language-box a.on{background-color:#0A5596;color:#fff}
    .dropdown-menu li a{padding-left:30px;padding-right:30px}
    .dropdown-menu a{display:block}
    header .full .dropdown-menu{background-color:#E5E5E5}
    .navbar-nav{padding-bottom:15px}
    .menu-r .items{display: none!important;}
    .menu-r{display:-webkit-flex;display:flex;display:-ms-flexbox;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-end;justify-content:flex-end}
    .mouse{display: none;}

    .search_form{margin:5em 0 1em}
    .btn-search-close{font-size:1.25em;top:-5px;right:10px}
}

@media screen and (max-width:768px) {
    .btn-search{padding: .5rem 1rem 0;}
}


@media (min-width: 992px) {
    .has_next{position:relative}
    .has_next:before{content:'';position:absolute;left:-15px;top:50%;padding:5px;background:url(https://www.chromaate.com/)no-repeat center/contain;-ms-transform:translate(0,-50%);-webkit-transform:translate(0,-50%);transform:translate(0,-50%);-webkit-filter:brightness(10)}
    .header-top{float:right;max-width:250px;padding-top:10px}
    header .navbar-brand{margin-bottom: 12px;height: 40px;/* margin-right:0; *//* padding:5px 0; */}
    header .menu{margin: 0;background:transparent;-webkit-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-moz-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-o-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);-ms-transition:all .3s cubic-bezier(0.165,0.84,0.44,1);transition:all .3s cubic-bezier(0.165,0.84,0.44,1);}
    .navbar-right {width: calc(100% - 230px);}
    .navbar-expand-lg .navbar-collapse{justify-content:space-between}
    header .full .dropdown-menu{position:absolute;top:100%;left:0;right:0;box-shadow:0 2px 3px rgba(0,0,0,.2);border:none;height: 80vh;}
    header .sub-unit,header .tab_content{position:relative;z-index:1;vertical-align:top;height: 80vh;padding-bottom:100px;overflow-x: hidden;overflow-y:scroll}
    header .tab_content{z-index:3;background: url(motif-3.png),linear-gradient(135deg, rgba(220,220,220,1) 1%,rgb(255 255 255 / 0%) 100%), #DCDCDC;background-repeat: no-repeat;background-position: right bottom;background-size: auto 110px;}
    header .tab_content.tab_content--nobg{background: #DCDCDC;}
    header .tab_content--nobg{padding-bottom: 0;}
    header .tab_content--nobg .tabs_item{padding-bottom:100px;}
    header .sub-unit{width: 30%;text-align:right;background-color: #0A5596;background: linear-gradient(to bottom, rgba(10,85,150,1) 25%,rgba(10,85,150,.7) 100%),url(motif-1.png) #0A5596;background-repeat: no-repeat;background-position: 0 bottom;background-size: cover;position:relative;}
    header .full .dropdown-menu:before,header .full .dropdown-menu:after,header .mark-content:before,header .mark-content:after{content:'';pointer-events:none;position:absolute;z-index:2;left:0;right:0;height:100px;background:-moz-linear-gradient(top,rgba(0,102,187,0) 0%,#0A5596 85%,#0A5596 100%);background:-webkit-linear-gradient(top,rgba(0,102,187,0) 0%,#0A5596 85%,#0A5596 100%);background:linear-gradient(to bottom,rgba(0,102,187,0) 0%,#0A5596 85%,#0A5596 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000066BB',endColorstr='#0A5596',GradientType=0)}
    header .mark-content:before,header .mark-content:after{z-index:4;left: 30%;background:-moz-linear-gradient(top,rgba(241,241,241,0) 0%,rgba(241,241,241,1) 85%,rgba(241,241,241,1) 100%);background:-webkit-linear-gradient(top,rgba(241,241,241,0) 0%,rgba(241,241,241,1) 85%,rgba(241,241,241,1) 100%);background:linear-gradient(to bottom,rgba(241,241,241,0) 0%,rgba(241,241,241,1) 85%,rgba(241,241,241,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00f1f1f1',endColorstr='#f1f1f1',GradientType=0);}
    header .full .dropdown-menu:before,header .mark-content:before{top:0;height:30px;-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg)}
    header .full .dropdown-menu:after,header .mark-content:after{bottom:0;}
    header .tabs_item .right-title{display:inline-block;vertical-align:top;width:calc(100% - 400px)}
    header .tab_content .unit-image{display:inline-block;vertical-align:bottom;width:100%;max-width:400px;max-height:100%}
    header .sub-unit a{display:block}
    header .sub-unit a.pc{color:#fff;display: block;}
    header .sub-unit li.active,header .sub-unit li:hover{background: #DCDCDC;}
    header .sub-unit li.active a,header .sub-unit li:hover a{color: #0A5596;}
    .dropdown-menu{width:200px;padding: 20px 10px 10px;box-shadow:0 2px 3px rgba(0,0,0,.2);border:none;background-size: auto 1.5rem;background-position: top;}
    header .nav-item .nav-link{padding: 26px .5rem 12px;}
    /*scroll-down*/
    .mouse{opacity: .8;position: absolute;z-index: 4;top: 75vh;left: 30%;margin-left: -335px;margin-top: -30px;color: #fff;text-align: center;animation: mouse-animation 2s ease-in-out infinite alternate;}
    .mouse:before{content:'';position: absolute;display:inline-block;width: 8px;height: 8px;top: 6px;left: -20px;border-left: solid 2px #fff;border-bottom: solid 2px #fff;-ms-transform: translate(-50%,0);-webkit-transform: translate(-50%,0);transform: rotate(-45deg);/* background-color: #fff; *//* animation: mouse-animation 2s ease-in-out infinite; */}
    @keyframes mouse-animation {
        0%{
        -ms-transform: translate(0,-100%);
        -webkit-transform: translate(0,-100%);
        transform: translate(0,-100%)}
        100%{
        -ms-transform: translate(0,0);
        -webkit-transform: translate(0,0);
        transform: translate(0,0);        
        }
    }
}