/* Minification failed. Returning unminified contents.
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,34): run-time error CSS1039: Token not allowed after unary operator: '-max_w'
(49,59): run-time error CSS1039: Token not allowed after unary operator: '-container_p'
(53,22): run-time error CSS1039: Token not allowed after unary operator: '-fontSize'
(57,18): run-time error CSS1039: Token not allowed after unary operator: '-color_work2'
(72,35): run-time error CSS1039: Token not allowed after unary operator: '-max_w'
(97,71): run-time error CSS1039: Token not allowed after unary operator: '-color_brand2'
(109,18): run-time error CSS1039: Token not allowed after unary operator: '-btn_w_h'
(109,44): run-time error CSS1039: Token not allowed after unary operator: '-btn_w_h'
(109,112): run-time error CSS1039: Token not allowed after unary operator: '-color_brand7'
(109,133): run-time error CSS1039: Token not allowed after unary operator: '-color_brand8'
(122,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(123,74): run-time error CSS1039: Token not allowed after unary operator: '-navGap'
(123,166): run-time error CSS1039: Token not allowed after unary operator: '-color_brand7'
(123,211): run-time error CSS1039: Token not allowed after unary operator: '-color_brand8'
(127,49): run-time error CSS1039: Token not allowed after unary operator: '-navGap'
(133,84): run-time error CSS1039: Token not allowed after unary operator: '-navGap'
(133,120): run-time error CSS1039: Token not allowed after unary operator: '-navGap'
(133,150): run-time error CSS1039: Token not allowed after unary operator: '-color_white'
(140,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(141,85): run-time error CSS1039: Token not allowed after unary operator: '-color_brand9'
(144,38): run-time error CSS1039: Token not allowed after unary operator: '-color_brand2'
(146,39): run-time error CSS1039: Token not allowed after unary operator: '-color_brand11'
(148,59): run-time error CSS1039: Token not allowed after unary operator: '-color_white'
(151,26): run-time error CSS1039: Token not allowed after unary operator: '-color_brand2'
(152,76): run-time error CSS1039: Token not allowed after unary operator: '-color_brand2'
(156,50): run-time error CSS1039: Token not allowed after unary operator: '-color_brand8'
(156,121): run-time error CSS1039: Token not allowed after unary operator: '-color_white'
(171,110): run-time error CSS1039: Token not allowed after unary operator: '-navGap'
(175,18): run-time error CSS1039: Token not allowed after unary operator: '-btn_w_h'
(185,51): run-time error CSS1039: Token not allowed after unary operator: '-color_brand2'
(185,74): run-time error CSS1039: Token not allowed after unary operator: '-color_brand2'
(185,106): run-time error CSS1039: Token not allowed after unary operator: '-color_white'
(185,146): run-time error CSS1039: Token not allowed after unary operator: '-color_brand2'
(191,32): run-time error CSS1039: Token not allowed after unary operator: '-color_brand2'
(191,265): run-time error CSS1039: Token not allowed after unary operator: '-color_brand5'
(217,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(218,21): run-time error CSS1039: Token not allowed after unary operator: '-percent'
(218,40): run-time error CSS1039: Token not allowed after unary operator: '-banner_mask'
(222,20): run-time error CSS1039: Token not allowed after unary operator: '-banner_mask'
(233,22): run-time error CSS1039: Token not allowed after unary operator: '-banner_mask'
(246,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(251,43): run-time error CSS1039: Token not allowed after unary operator: '-color_white'
(269,22): run-time error CSS1039: Token not allowed after unary operator: '-fontSize'
(273,29): run-time error CSS1039: Token not allowed after unary operator: '-color_brand4'
(277,138): run-time error CSS1039: Token not allowed after unary operator: '-color_brand1'
(316,25): run-time error CSS1039: Token not allowed after unary operator: '-color_brand2'
(319,71): run-time error CSS1039: Token not allowed after unary operator: '-sFont'
(322,36): run-time error CSS1039: Token not allowed after unary operator: '-color_brand2'
(327,114): run-time error CSS1039: Token not allowed after unary operator: '-color_mygray200'
(327,158): run-time error CSS1039: Token not allowed after unary operator: '-color_mygray300'
(330,46): run-time error CSS1039: Token not allowed after unary operator: '-color_brand8'
(333,122): run-time error CSS1039: Token not allowed after unary operator: '-aspectRatio'
(341,18): run-time error CSS1039: Token not allowed after unary operator: '-color_brand2'
(345,85): run-time error CSS1039: Token not allowed after unary operator: '-color_myblack2'
(348,43): run-time error CSS1039: Token not allowed after unary operator: '-color_myblack'
(350,41): run-time error CSS1039: Token not allowed after unary operator: '-color_work2'
(353,25): run-time error CSS1039: Token not allowed after unary operator: '-aspectRatio'
(359,46): run-time error CSS1039: Token not allowed after unary operator: '-page_p'
(359,81): run-time error CSS1039: Token not allowed after unary operator: '-color_brand6'
(359,132): run-time error CSS1039: Token not allowed after unary operator: '-color_mygray200'
(359,180): run-time error CSS1039: Token not allowed after unary operator: '-color_brand11'
(363,73): run-time error CSS1039: Token not allowed after unary operator: '-color_brand9'
(379,43): run-time error CSS1039: Token not allowed after unary operator: '-color_brand10'
(379,74): run-time error CSS1039: Token not allowed after unary operator: '-color_myblack'
(381,48): run-time error CSS1039: Token not allowed after unary operator: '-color_brand10'
(382,49): run-time error CSS1039: Token not allowed after unary operator: '-color_brand9'
(383,49): run-time error CSS1039: Token not allowed after unary operator: '-color_brand12'
(388,86): run-time error CSS1039: Token not allowed after unary operator: '-color_mygray300'
(392,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(393,72): run-time error CSS1039: Token not allowed after unary operator: '-max_w'
(393,97): run-time error CSS1039: Token not allowed after unary operator: '-container_p'
(409,18): run-time error CSS1039: Token not allowed after unary operator: '-w_2-3'
(413,15): run-time error CSS1039: Token not allowed after unary operator: '-w_1-3'
(427,32): run-time error CSS1039: Token not allowed after unary operator: '-color_brand5'
(449,17): run-time error CSS1039: Token not allowed after unary operator: '-btn_w_h'
(449,41): run-time error CSS1039: Token not allowed after unary operator: '-btn_w_h'
(449,101): run-time error CSS1039: Token not allowed after unary operator: '-color_brand4'
(454,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(457,42): run-time error CSS1039: Token not allowed after unary operator: '-percent'
(459,52): run-time error CSS1039: Token not allowed after unary operator: '-percent'
(459,73): run-time error CSS1039: Token not allowed after unary operator: '-unit'
(461,53): run-time error CSS1039: Token not allowed after unary operator: '-percent'
(461,74): run-time error CSS1039: Token not allowed after unary operator: '-unit'
(466,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(472,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(473,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(477,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(485,63): run-time error CSS1039: Token not allowed after unary operator: '-navGap'
(491,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(504,53): run-time error CSS1039: Token not allowed after unary operator: '-navGap'
(524,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(525,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(550,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(551,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(574,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(589,37): run-time error CSS1039: Token not allowed after unary operator: '-btn_w_h'
 */
@charset "UTF-8"; 
/* CSS Document */
@import url(3rd/normalize.css);
@import url(3rd/jquery.fancybox.css);

@import url(3rd/basic.css);
@import url(3rd/jPushMenu.css);
@import url(3rd/tab.splide.css);
@import url(icons.css);

.main{
    --input_h: 2.5rem;
	--max_w: 120rem;
	--w_2-3: 78%;
	--w_1-3: 22%;
    --fontSize: 1.125rem;
    --sFont: .95rem;
	--container_p: 1rem;
    --aspectRatio: 16/9;
    --percent: 0%;
  	position: relative;
}

/* sweetalert fancybox */
.fancybox-lock body {
    overflow: visible !important; padding-right: 15px !important;
}

@media ( pointer: coarse ) {
    /* 通常代表手機 / 平板（觸控） */
    .fancybox-lock body {
        overflow: visible !important; padding-right: 0px !important;
    }
}
/* sweetalert fancybox end */

.text-hidden {
    pointer-events: none; position: absolute;
    text-indent: 100%;
    white-space: nowrap;
    width: 0;
    overflow: hidden;
}

.container{ padding: 0; }

section {
    --max_w: 100rem;
    padding: 0; max-width: var( --max_w ); padding: var( --container_p ); margin: 0 auto;
}

.header a, .main-nav a, .page .nav a, .f-nav a {
    font-size: var( --fontSize );
}

.header .second-nav a:hover, .main .text-block li a:not(.btn):hover, .f-nav a:hover{
    color: var( --color_work2 );
}

/* header */
.header {
    /* background: url(../img/header.jpg) no-repeat center center; position: sticky; top: 0; */
    width: 100%; z-index: 60; background-color: rgba( 255, 255, 255, 1 ); /*backdrop-filter: blur(10px); border-top: 5px solid;
    border-image: linear-gradient(
        to right,
        var(--color_brand7),
        var(--color_brand8)
    );*/
}

.headerBox {
    width: 100%; max-width: var( --max_w ); display: flex; align-items: center; gap: 1rem; position: relative; padding: .5rem; margin: 0 auto;
}

.headerBox > div { transition: all .3s; }

.header .m-header {
    display: flex; align-items: center; gap: 1rem; font-size: 1.125rem;
}

.header .m-menu, .hide { display: none; }

.header .logo, .titleBox .logo {
    /* background: url(../img/logo.png) no-repeat; */
    position: relative; background: url( "../img/f_logo.png" ) no-repeat center; width: 15.5rem; aspect-ratio: 137/31; text-indent: -9999px; background-size: contain; display: block; float: left;
}

.header h1 {
    position: absolute; z-index: -100; margin: 0;
}

.header .block2 {
    position: relative; display: grid; margin-left: auto;
}

.header .block2 .welcome {
	font-size: .95rem; font-weight: 500; text-align: right; color: var( --color_brand2 );
}

.header .second-nav {
    display: inline-flex; padding-left: 2rem; gap: 1rem;
}

.header .m-header {
    display: flex; gap: .5rem;
}

.header .toggle-menu{ 
    width: var( --btn_w_h ); height: var( --btn_w_h ); padding: 0; background: linear-gradient(to bottom, var(--color_brand7), var(--color_brand8));
}

.header .m-header .login { 
    display: flex; align-items: center; gap: .5rem; text-align: center;
}
 
.header .m-header .login.logout {
    background: #D14300; color: #fff; border: 1px solid #a52c00;
}

/* navMenu */
.nav-block{
    --navGap: .85rem;
	display: flex; align-items: center; justify-content: center; gap: var( --navGap ); box-shadow: 0px 0px 1px 2px #e0e0e0; background: linear-gradient(to bottom, var(--color_brand7), rgba( 1, 126, 157, 1 ), var(--color_brand8)); padding: .5rem; /*position: sticky; top: 0;*/ z-index: 60; margin-top: 2px; transition: top .5s;
}

.nav-block .main-nav {
	display: flex; align-items: center; gap: var( --navGap ); position: relative;
}

.nav-block .main-nav li.home { display: none; }

.nav-block .main-nav li a {
	display: flex; align-items: center; height: 2.625rem; padding: .25rem calc( var( --navGap ) * .75 ); gap: calc( var( --navGap ) / 3 ); color: var( --color_white ); border-radius: 20rem; border: 1px solid transparent;
}

.nav-block .main-nav > li > a i { filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(308deg) brightness(101%) contrast(103%); }

/* 左側以及 有進階搜尋nav的 共用 */
.main .nav li a {
    --page_p: 1rem;
    display: flex; align-items: center; gap: .5rem; border-bottom: 1px dotted var( --color_brand9 ); padding:  .85rem 1.5rem;
}

.aside .nav li a:hover{ color: var( --color_brand2 ); }

.main .nav li a.active { color: var( --color_brand11 ); }

.nav-block .main-nav li a:hover { border: 1px solid var( --color_white ); }

.nav-block .main-nav li a.active {
	border: 1px solid var( --color_brand2 );
    background: linear-gradient(to bottom, #fee777, #fcd10a); color: var( --color_brand2 );
}

.nav-block .main-nav li a.open {
    background: linear-gradient(to bottom, var( --color_brand8 ), rgba( 3, 129, 150, 1 ) 30% ); border: 1px solid var( --color_white );
}

.nav-block .main-nav li a i { filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%); }

.nav-block .main-nav li a.active i { filter: brightness(0) saturate(100%) invert(23%) sepia(83%) saturate(867%) hue-rotate(10deg) brightness(103%) contrast(103%) !important; }

.nav-block .main-nav li a.active:hover { filter: brightness(1.1); }

/* search */
#searchForm { 
    position: relative; display: flex; align-items: center; gap: .5rem;
}

.nav-block .search-block { 
    min-width: 9.5rem; max-width: clamp( 21rem, 100%, 100% ); display: flex; align-items: center; gap: var( --navGap ); position: relative; justify-content: end;
}

.search-btn, .search-block > #s {
    width: var( --btn_w_h ); aspect-ratio: 1/1; padding: 0;
}

.search-block > #s { display: none; }

#s.btn::before{ 
    position: absolute; content: "";
}

.fancybox{
    background: linear-gradient( to bottom, var( --color_brand2 ), var( --color_brand2 ) ); color: var( --color_white ); border: 1px solid var( --color_brand2 ); white-space: nowrap;
}

.fancybox:hover{ filter: brightness(1.3); }

.swal2-confirm { 
    width: 10rem; color: var( --color_brand2 ); padding: .5rem 1rem; font-weight: bold; background-position: center; background-repeat: no-repeat; border: 0; background-size:1rem; transition:all 0.5s; cursor: pointer; border-radius: 50rem; border: 1px solid var( --color_brand5 ); background: linear-gradient(to bottom, #fee777, #fcd10a);
}

/* main ｜ page */
main{
	position: relative;
}

main .title-block {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: .5rem 0;
}


/* splide */
section .splide__slide {
    padding: 1rem;
}

.videoBox.splide:not(.is-overflow) .splide__arrows, .videoBox.splide:not(.is-overflow) .splide__pagination { display: none; }

/* banner */
.banner{
	width: 100dvw; display: flex; align-items: end; justify-content: center; position: relative;
}

.banner::before, .banner::after{
	--banner_mask: 0%;
	width: calc( var( --percent ) + var( --banner_mask ) ); height: 100%; content: ""; position: absolute; z-index: 40;
}

.banner::before{ 
	left: calc( var( --banner_mask ) * -1 ); 
	background-image: linear-gradient( 
		90deg, 
		rgba( 0, 0 ,0 , 1 ) 0%,
		rgba( 0, 0 ,0 , 1 ) 5%,
		rgba( 0, 0 ,0 , .55 ) 50%,
		rgba( 0, 0 ,0 , .50 ) 100%
	); 
}

.banner::after{ 
	right:  calc( var( --banner_mask ) * -1 );
	background-image: linear-gradient( 
		90deg, 
		rgba( 0, 0 ,0 , .50 ) 0%, 
		rgba( 0, 0 ,0 , .55 ) 50%,
		rgba( 0, 0 ,0 , 1 ) 95%,
		rgba( 0, 0 ,0 , 1 ) 100%
	); 
}

.banner .splide__slide > a { outline-offset: -2px; }

.banner .splide__arrows { 
	--position_w: .5rem; width: calc( 100% - 15px );
}

/* Nwws section 課程，套課，個人學習 list */
main .sec-block .ng-scope {
    position: relative; background: var( --color_white );
}

main .sec-block .news-block::before, main .sec-block .subject-block::before, main .sec-block .rank-block::before {
    width: 8px; height: 100%; position: absolute; content: ""; left: -4px; top: 0; pointer-events: none; z-index: 0;
    background: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, .1) 50%, transparent 100% ); filter: blur(4px);
}

.main .title-block.gray-bg {
    background: linear-gradient( to bottom,#fff,#e1e1e1); padding: .5rem 1rem;
}

main .con ul.text-block:not(.newsList) {
    position: relative; z-index: 0; display: grid; gap: 1rem;
}

/* tree */
.tree li, .tree li a:link {
    font-size: var( --fontSize ) !important; line-height: 2rem !important; margin-left: .25rem !important; color: #173273 !important; padding: .25rem .5rem; border-radius: .5rem;
}

.tree li .doc.hover, .tree li .doc.active { 
    background-color: var( --color_brand4 ) !important;
    background-image: none !important;
}

.tree li a:focus-visible, .tree2 li a:focus-visible, .tree li img:focus-visible, .tree2 li img:focus-visible { outline: 2px dashed var( --color_brand1 ) !important; }

.tree ul:not(:first-child), .tree li .node, .tree li .lastnode {
    background-image: url( "../img/noImg.png" ) !important;
}

.tree li .mrootnode, .tree li .mlastnode, .tree li .mnode {
    background-image: url( "../img/hasChildActive.svg" ) !important; width: 1rem; 
}

.tree li .prootnode, .tree li .plastnode, .tree li .pnode {
    background-image: url( "../img/hasChild.svg" ) !important; width: 1rem;  
}

.tree li .folclose, .tree2 li .folclose, .tree li .icon { background-image: url( "../img/folder.svg" ) !important; width: 1.5rem !important; }

.tree2 li .folopen, .tree2 li .folclose, .tree2 li .icon {
    position: relative !important; width: 1.5rem !important; height: 1.5rem !important; padding-top: 0 !important; background-position: center 0 !important;
}

.tree li .folopen, .tree2 li .folopen{  background-image: url( "../img/folderOpen.svg" ) !important; width: 1.5rem !important; }

.tree2 li .icon {
    background-image: url( "../img/note.svg" ) !important;
}

.pane .tree2 li .icon {
    background-image: url( "../img/folder.svg" ) !important; width: 1.5rem !important;
}
/* Nwws section 課程，套課，個人學習 list end */

.main .gray-bg {
    background: linear-gradient( to bottom,#fff,#e1e1e1); padding: .5rem 1rem;
}

main .title-block .h3 {
    display: flex; align-items: center; gap: .5rem; font-size: 1.6rem; font-weight: bolder;
}

.h3.brown { color:var( --color_brand2 ); }

.page .breadcrumb, .page #roadmap {
    display: flex; align-items: center; gap: .25rem; font-size: var( --sFont ); flex-flow: wrap;
}

.page .breadcrumb a { color: var( --color_brand2 ); }


/* video */
.main .video {
    display: block; border-radius: .5rem; overflow: hidden; padding: .25rem; box-shadow: 0px 0px .5rem 0px var( --color_mygray200 ); border: 1px solid var( --color_mygray300 ); 
}

.main .video:hover { border: 1px solid var( --color_brand8 ); }

.main .video .top-block {
    position: relative; box-shadow: 0px 0px 4px 0px #ccc; border: 1px solid #efefef; display: block; aspect-ratio: var( --aspectRatio ); overflow: hidden; text-align: center; background-color: black; border-radius: .25rem .25rem 0 0;
}

.main .video .text, .main .video .detail {
    padding: 0 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.main .video .text {
    color: var( --color_brand2 ); margin: .5rem 0;
}

.main .video .detail {
    display: grid; gap: .5rem; margin-bottom: .75rem; font-size: 1rem; color: var( --color_myblack2 );
}

.main .video:hover .detail { color: var( --color_myblack ); } 

.main .video:hover .text { color: var( --color_work2 ); }

.main .top-block img { 
    aspect-ratio: var( --aspectRatio ); transition: all .5s;
}

.main .top-block:hover img { transform: scale(1.1); }

.page .about2-block, .page .subject-block, .page .listBox{
    display: grid; gap: 1rem; padding: var( --page_p ); background-color: var( --color_brand6 ); box-shadow: 0px 0px 6px 0px var( --color_mygray200 ); border-top: 5px solid var( --color_brand11 );
}

.main .text-block li:not(.subject-list) {
    display: flex; align-items: center; border-bottom: 1px dotted var( --color_brand9 ); gap: .5rem; transition: all 0.3s; padding: .25rem .5rem; 
}

.main .text-block.newsList li { height: 4rem; }

p.CourseSummary { padding: 0 .5rem; }

.main .text-block li:not(.subject-list) a:first-child{
    display: flex; align-items: center; gap: .5rem; padding: .75rem 0; flex: 1; width: clamp( 8rem, 100%, 50rem );
}

.main .text-block li:not(.subject-list) a:first-child .text {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

.text-block span.date, .text-block span.news-icon, .text-block span.couse-icon, .text-block span.media-icon { 
    width: fit-content; background: var( --color_brand10 ); color: var( --color_myblack ); padding: 0rem .5rem; border-radius: 10rem; font-size: .875rem; white-space: nowrap;
}
.text-block span.news-icon { background: var( --color_brand10 ); }
.text-block span.couse-icon { background: var( --color_brand9 ); }
.text-block span.media-icon { background: var( --color_brand12 ); }


/* footer */
.footer {
    background: rgba(244, 244, 246, 1); padding: 1rem 0; border-top: 1px solid var( --color_mygray300 );
}

.footer .container{
	--max_w: 100rem;
	display: flex; flex-wrap: wrap; align-items: center; max-width: var( --max_w ); padding: var( --container_p ); margin: 0 auto; transition: all .3s;
}

.footer .logo {
    background: url( "../img/f_logo.png" ) no-repeat;
    width: 274px;
    height: 62px;
    background-size: contain;
    margin-bottom: .5rem;
}

.col-left, .col-right, .imgBox {
    display: grid; gap: .25rem; padding: 0 .5rem;
}

.col-left {
    width: var( --w_2-3 ); gap: 1rem;
}

.col-right{
	width: var( --w_1-3 ); justify-items: right; gap: .25rem;
}

.col-left .f-nav, .footer p, .col-right .tool-block {
	display: flex; margin: 0; padding: 0; align-items: center;
}

.footer p {
	white-space: break-spaces; display: block;
}

.col-left .f-nav:not(brown) { flex-wrap: wrap; }

.footer .f-nav.brown, .footer p.brown, .footer p.brown a {
  	display: grid; color: var( --color_brand5 );
}

.col-right .tool-block {
	width: fit-content; flex-direction: column; align-items: start;
}

.accessibilityModa{
	display: flex; gap: 1rem; justify-content: end;
}

.goTop {
    width: 4.475rem; height: 2.875rem; position: fixed; right: 1rem; bottom: 1.25rem; cursor: pointer; display: none; z-index: 80; background: url( "../img/goTop.png" ) no-repeat;
}

.bgBlock {
    width: 100dvw; height: 100dvh; position: relative; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); z-index: 70; display: none;
}

.titleBox .logo { display: none; }

.close {
    width: var(--btn_w_h); height: var(--btn_w_h); cursor: pointer; z-index: 100; background: var( --color_brand4 ) url( "../img/closeBtn.svg" ) no-repeat; margin-left: auto; display: none;
}

@media only screen and (min-width: 2160px) {
    .main {
        --percent: 10%;
    }

    .splide__controls { left:calc( var( --percent ) + .5rem ) }

    .banner .splide__arrow--prev{ left:calc( var( --percent ) - ( var( --unit ) / 2 ) ); }

    .banner .splide__arrow--next{ right:calc( var( --percent ) - ( var( --unit ) / 2 ) );  }
}

@media only screen and (min-width: 1850px) {
    .footer .container{
        --max_w: 110rem;
    }
}

@media only screen and (max-width: 1280px) {
    .main{ 
        --w_2-3: 70%;
        --w_1-3: 30%;
    }

    .nav-block {
        --navGap: .6rem;
    }

    .search-block > #s { display: flex; }
}

@media only screen and (min-width: 1024px) and (max-width: 1280px) {
    #searchForm { 
        position: absolute; display: none; right: calc( var( --navGap ) * 11.535 );
    }
}

@media only screen and (max-width: 1024px) {
    .main{
        --container_p: 1rem;
    }

    .header .m-menu {
        display: flex; position: relative;
    }

    .nav-block { justify-content: end; }

    .nav-block .main-nav li { display: none; }
    .nav-block .main-nav.cbp-spmenu-open li{ display: block; }

    .nav-block .main-nav.cbp-spmenu-open .titleBox {
	    display: flex; align-items: center; gap: var( --navGap ); position: relative; margin-bottom: .5rem;
    }

    .titleBox .logo { width: 10rem; display: block; }

    .close { display: block; }

    #searchForm { 
        display: flex !important; position: relative; right: 0;
    }

    .search-block > #s { display: none; }

    .nav-block .search-block, #searchForm { width: 100%; }
    
    .search-block .inputGroup { min-width: auto; }
}

@media only screen and (max-width: 987px) {
    .main{ 
        --w_2-3: 60%;
        --w_1-3: 40%;
    }
}

@media only screen and (max-width: 768px) {
    .headerBox {
        display: grid; gap: .25rem;
        grid-template-areas:
        "b c"
        "a a";
    }

    .header .block2 { 
        display: flex; grid-area: a; flex-wrap: wrap; margin: auto; gap: 0 1rem; justify-content: center;
    }

    .header .second-nav { padding: 0 2rem; }

    .header .logo { grid-area: b; }

    .header .m-header { 
        grid-area: c; justify-content: flex-end;
    }

    .main{ 
        --w_2-3: 100%;
        --w_1-3: 100%;
    }

    .col-right {
        display: flex; flex-direction: row-reverse; align-items: center; margin-top: 2rem; padding-top: 2rem; justify-content: flex-end;
    }
}

@media only screen and (max-width: 728px) {
    .header .m-header { padding: .25rem; }
}

@media only screen and (max-width: 640px) {
    .col-right {
        display: grid; justify-content: center;
    }

    .main .text-block li a:first-child{ display: grid; }

    .banner .splide__pagination {
        bottom: .25rem; right: 0rem;
    }

    .splide__pagination__page { --dot: .5rem; }
}

@media only screen and (max-width: 537px) {
    .header .logo {
        width: 13.5rem; margin-right: auto;
    }

    .headerBox { gap: .5rem; }

    .banner .splide__arrows { display: none; }
}

@media only screen and (max-width: 430px) {
    .header .login.btn {
        display: grid; width: var( --btn_w_h ); padding: 0; gap: 0rem;
    }

    .header .m-header .icon-login, .header .m-header .icon-logout {
        background-size: 22rem; background-position: -4rem -4rem;
    }

    .header .m-header .icon-login { background-position: -10.25rem  0rem; }

    .header .login.btn span {
        font-size: .75rem; margin: -.35rem auto .125rem auto;
    }

    .header .logo { width: 11.5rem; }

    .header .m-header { gap: .5rem; }
}