/* skip nav */
.skip-nav a{position:fixed; left:1rem; top:-5rem; right:1rem; display:block; height:3rem; line-height:3rem; color:#fff; background-color:var(--black); text-align:center; z-index:20;}
.skip-nav a:focus{top:1rem;}

/* header */
#header{height:15.3rem; position:relative; z-index:20; box-sizing:border-box; border-bottom: 0.1rem solid var(--line);}
#header.active {background:#fff;}
.header-dim{display:none;content:''; position:fixed;left:0;top:0;right:0;bottom:0; background-color:rgba(0,0,0,0.6); z-index:19;}
.header-dim.active{display:block;}
.header-top{width:var(--width-max); max-width:calc(100% - 4.8rem); margin:0 auto; box-sizing:border-box; display:flex; flex-wrap:wrap; padding-top:3.2rem; align-items: flex-start; position:relative; height:7rem;}

.header-logo a{display:block; width:16.2rem;height:3.8rem; overflow:hidden; text-align:left; text-indent:-9999rem; background:url(../../images/tha/common/top_logo.svg) 0 0 / contain no-repeat;}
.main .header-logo a{background-image:url(../../images/tha/main/top_logo.svg);}
@media all and (max-width:1023px){
    .main .header-logo a{background-image:url(../../images/tha/common/top_logo.svg);}
}
.active .header-logo a{background-image:url(../../images/tha/common/top_logo.svg) !important;}

.header-nav{position:relative;}

.gnav-inner{width:var(--width-max); max-width:calc(100% - 4.8rem); margin:0 auto; display:flex; align-items:center; position:relative; z-index:30;}

.header-nav nav{width:calc(100% - 6rem); position:relative;}
.header-nav .gnav-dep1{display:flex; position: relative;}

.header-nav .gnav-dep1 > li{position:relative; box-sizing:border-box; flex:0;}
.header-nav .gnav-dep1 > li::after{content: ''; display: block; position: absolute; top: 8.3rem; left: 0; width: 0.1rem;height: calc(100% - 8.3rem); border-right: 0.1rem solid var(--line);}
.header-nav .gnav-dep1 > li > a{display:flex; align-items: center; justify-content: center; height: 100%; height: 8.3rem; text-align:center; font-weight:700; color: var(--black); line-height:1.25; white-space:nowrap; padding: 0 2.4rem;}
.header-nav .gnav-dep1 > li.act > a,
.header-nav .gnav-dep1 > li:hover > a{color: var(--black);}

.active .header-nav .gnav-dep1 > li > a{color: var(--black);}
.active .header-nav .gnav-dep1 > li.act > a{color: var(--gray-50);}

.header-nav .gnav-dep1 > li.active > a{overflow:hidden; position:relative;}
.header-nav .gnav-dep1 > li.active > a:after{display:block; content:''; width:4rem; height:0.4rem; border-radius:0.2rem; position:absolute; left:50%; bottom:-0.2rem; margin-left:-2rem;}

.header-nav .gnav-dep2{text-align:left; padding:2.4rem 0; box-sizing:border-box; display:none;}
.header-nav .gnav-dep2 > li{padding: 0 1rem; text-align: center;}
.header-nav .gnav-dep2 > li > a{display:block; padding:1.2rem 0; word-break: break-all;}
.header-nav .gnav-dep2 > li:first-child > a{padding-top: 0;}
.header-nav .gnav-dep2 > li > a:hover,
.header-nav .gnav-dep3 > li > a:hover{text-decoration:underline; text-underline-position: under;}

.header-nav .gnav-dep3{padding: 0.5rem 0 1.5rem;}
.header-nav .gnav-dep3 > li{position:relative;}
.header-nav .gnav-dep3 > li > a{position: relative; display: inline; line-height: 2rem;padding-left: 1rem;}
.header-nav .gnav-dep3 > li > a::after{content: '-'; display: block; position: absolute; top: 0; left: 0.1rem;}
.header-nav.active nav:hover li > a{color: var(--gray-50);}

.header-nav.active .gnav-dep1 > li:hover a{color:var(--black);}
.header-nav.active .gnav-dep1 > li:hover .gnav-dep3 a{color:var(--gray-50);}

.btn-menu-all{margin-left:auto; display:inline-flex; align-items:center; width:4rem; height: 8.3rem; box-sizing: border-box; justify-content: flex-end; position:absolute; right:0; top:0;}
.btn-menu-all:before{display:block; content:''; width:4rem; height:4rem; background: url(../../images/tha/common/ic_menu.svg) center center no-repeat;}
.active .btn-menu-all:before{background-image: url(../../images/tha/common/ic_menu_close.svg) !important;}

.main .btn-menu-all:before{background-image: url(../../images/tha/main/ic_menu.svg);}

/* active */
.header-nav.active:before{display:block; content:''; background-color:#fff; position:absolute; left:0; top: 8.3rem; right:0; bottom:0; z-index:0; border-bottom: 0.1rem solid var(--line);}
.header-nav.active .gnav-dep2{display:block;}

/* mobile nav */
.btn-menu-mobile{width:4rem; height:4rem; text-align:left; text-indent:-9999rem; overflow:hidden; position:absolute; right:0; top:2.8rem; display:none;background-image: url(../../images/tha/common/ic_menu_m.svg);background-repeat: no-repeat; background-position: center;}
.btn-menu-mobile.active{background-image: url(../../images/tha/common/ic_menu_close_m.svg);}

.mobile-nav{position:fixed; left:0; top:9.2rem; right:0; bottom:0; background-color:#fff; z-index:90; box-sizing:border-box;  display:none;}
.mobile-nav.active{display:block;}

#gnav-m{height:100%; overflow-y:auto;}

.mobile-nav .gnav-dep1{padding-bottom:2rem; text-align: center;}
.mobile-nav .gnav-dep1 > li{position:relative; border-bottom:0.1rem solid var(--line); padding:0 1.6rem;}
.mobile-nav .gnav-dep1 > li > a{display:block; font-weight: 700; color:var(--black); position:relative; padding: 1.6rem 0; font-size:1.7rem; }
.mobile-nav.enter .gnav-dep1 > li > a{color: var(--gray-50);}
.mobile-nav.enter .gnav-dep1 > li.is-sub.active > a{color: var(--black);}

.mobile-nav .gnav-dep1 .is-sub > a span{position: relative; padding-right: 2.4rem;}
.mobile-nav .gnav-dep1 .is-sub > a span:after{display:block; content:''; width:1.2rem; height:0.7rem; background:url(../../images/tha/common/ic_nav_arr.svg) center right no-repeat; position:absolute; right:0.3rem; top:50%; margin-top:-0.3rem;}
.mobile-nav .gnav-dep1 .is-sub.active > a span::after{transform: rotate(-180deg);}

.mobile-nav .gnav-dep2{padding:1rem 0 2.6rem; display:none;}
.mobile-nav .gnav-dep2 > li > a{display:block; padding: 1rem 0; color:var(--black);}

.mobile-nav .gnav-dep3{padding:0.4rem 0;}
.mobile-nav .gnav-dep3 > li > a{padding:0.4rem 0 0.4rem 1rem; box-sizing: border-box; font-size:1.5rem; display:block;}
.mobile-nav .gnav-dep3 > li > a span{position: relative; padding-left: 1rem;}
.mobile-nav .gnav-dep3 > li > a span:before{display:block; content:'-'; position:absolute; top:0; left:0;}

.mobile-nav .gnav-dep1 > li.active .gnav-dep2{display:block;}
.mobile-nav .gnav-dep3 > li.active > a{text-decoration: underline; text-underline-position: under;}


/* select */
.lang-select{position: absolute; right: 0; z-index: 31;}
.lang-select details{position:relative;}
.lang-select summary{display: flex; align-items: center; width:14.4rem; height:3.2rem; border-radius:1.6rem; border: 0.1rem solid var(--line); position:relative; padding:0 3.8rem 0 1.6rem; box-sizing:border-box; cursor:pointer; font-size:1.5rem; color: var(--black); line-height: 3rem;}
.lang-select summary:after{display:block; content:''; width:1.8rem; height:1.8rem; position:absolute; right:1.6rem; top:50%; margin-top:-0.9rem; background:url(../../images/tha/common/lang_arr.svg) center center no-repeat;}
.lang-select details ul{position:absolute; left:0; top:calc(100% + 0.8rem); right:0; background-color:#fff; border:0.1rem solid var(--black); padding: 0.8rem 0; box-sizing:border-box;z-index:9;}
.lang-select details a{display:block; padding:0.8rem; box-sizing: border-box; text-align: center; font-size:1.5rem; }
.lang-select details a:focus-visible,
.lang-select details a:hover{color:var(--black); background-color: var(--bg-gray);}
.lang-select details[open] summary:after{transform: rotate(-180deg);}

.lang-select i{display:none;}


/* subheader */
.subNavBox{position: relative;}
.subNavBox:after{content: ''; display: block; position: absolute; bottom: 0; width: 100%; height: 0.1rem; border-bottom: 0.1rem solid var(--line);}
.side-wrap{max-width: var(--width-max); margin: 0 auto;}
.side-wrap{position: relative; padding: 0 0 0 5.6rem; height:5.6rem; box-sizing:border-box; background: #fff url(../../images/tha/common/ic_home.svg) no-repeat center left 1.8rem; border-left: 0.1rem solid var(--line); box-sizing: border-box;}
.side-wrap > ul{position: relative; z-index: 2; display: flex;}
.side-wrap > ul > li{flex: 1; float: left; box-sizing: border-box;}
.subSelect-links{position:relative; border-right: 0; box-sizing: border-box;}
.subSelect-links summary{display: flex; align-items: center; height:5.6rem; position:relative; padding:1.2rem 4rem 1.2rem 1.6rem; box-sizing:border-box; cursor:pointer;border-right: 0.1rem solid var(--line); color: var(--black);}
.side-wrap li:first-child .subSelect-links summary{border-left: 0.1rem solid var(--line);}
.subSelect-links summary:after{display:block; content:''; width:2.4rem; height:2.4rem; position:absolute; right:2.4rem; top:50%; margin-top:-1.3rem; background:url(../../images/tha/common/ic_nav_arr.svg) center center no-repeat;}
.subSelect-links[open] summary:after{transform: rotate(-180deg);}
.subSelect-links ul{position:absolute; top:5.6rem; left: -0.1rem; right: 0; background-color:#fff; z-index:5; padding: 0.8rem 0; border:0.1rem solid var(--line-dark);}
.side-wrap  li:first-child ul{left: 0;}
.subSelect-links a{display:flex; padding: 1.2rem 1.6rem; line-height: 1.6rem; box-sizing: border-box;}
.subSelect-links a:hover{background: var(--bg-gray); color: var(--black);}


/* footer */
#footer{border-top: 0.1rem solid var(--line);}
.main #footer{margin-top:6rem;}
.footer-inner{max-width:var(--width-max); margin:0 auto; padding:4rem 2.4rem; font-size: 1.5rem;}
.footer-inner p{ text-align: center; color: var(--gray-50);}
.footer-inner p + p{margin-top: 1.5rem;}

.container-inner{width: var(--width-max); max-width:calc(100% - 4.8rem); margin: 0 auto;}

.content-wrap{padding: 8rem 0;}
.sub-header{margin-bottom: 5.6rem;}
.sub-header .sub-title{font-size:4.8rem; font-weight: 800; position:relative; text-align: center; color:var(--black);}


@media all and (max-width:1280px){
    .header-nav .gnav-dep1 > li{flex:1 0 22%;}
    .header-nav .gnav-dep1 > li:last-child{flex:1 0 12%;}
    .header-nav .gnav-dep1 > li > a{white-space:normal;}
}

@media all and (min-width:1024px){
    .mobile-nav{display:none !important;}
}

@media all and (max-width:1024px){

    #header{height:9.2rem; position:fixed; left:0; top:0; right:0; background-color: #fff;}
    #header.fixed{background-color: #fff;}
    .header-top{height:9.2rem; padding:3.2rem 0 2.4rem; border-bottom: 0.1rem solid var(--line);}
    .header-top.open{border: none;}
    .header-top.open h1 img{display: none;}
    .header-top.open h1 a{width: 2.8rem; height: 3.2rem; margin-top: -0.5rem; padding: 0; background: url(../../images/tha/common/ic_home.svg) no-repeat center top 0.5rem;}
    .header-nav{display:none;}

    .btn-menu-mobile{display:block;}

    .lang-select{display: none;}

    #header .open .lang-select{top: 2.8rem; right: 5.2rem; z-index: 91; display: block;}
    #header .lang-select .related-links summary{width: 4rem; height: 4rem; text-indent: -9999rem; border: 0; background: #fff url(../../images/tha/common/ic_language.svg) no-repeat center; list-style: none ; padding:0;}
    #header .related-links summary:after{display: none;}
    #header .related-links ul{width: 10rem; transform: translate(-50%, 0%); left: 50%; right:inherit;}

    .container-inner{margin-top:9.2rem; display:block;}
    .content-wrap {padding: 4rem 0;}

    .sub-header{margin-bottom: 4rem;}
    .sub-header .sub-title{font-size: 3.2rem; line-height:1.16;}
    .side-wrap{display:none;}
    .subNavBox:after{display:none;}

}

@media all and (max-width:600px){

    .header-top { max-width: calc(100% - 3.2rem);}
    .container-inner{max-width:calc(100% - 3.2rem);}
    .content-wrap {padding: 4rem 0;}

    .footer-inner{padding:3.2rem 1.6rem;}
    .footer-inner p{font-size: 1.3rem;}

}