@charset "utf-8";

/**************************************************

    Public

**************************************************/
@media screen and (max-width: 1300px){
    html:has(#landing) {padding: 0;}

    #header {top: 0 !important;}
    #header .logo {left: 15px;height: 50px;}
    #header .logo img {max-height: 25px;}
    #header.down {height: 50px;background: #fff;}

    #tnb {right: 15px;gap: 5px;height: 50px;transform: none;flex-wrap: nowrap;}
    #tnb > li {display: block !important;}
    #tnb > li > a {padding: 0 10px;height: 30px;border-radius: 3px;font-size: 12px;}
}



/**************************************************

	Landing
	
**************************************************/
@media screen and (max-width: 1300px){
    .title {margin-bottom: 25px;}
    .title > h2 {font-size: 20px;}
    .title > h3 {font-size: 18px;}
    .title > p {margin-top: 10px;font-size: 14px;font-weight: normal;}

    .imgc {gap: 5px;}


    .land1 {padding: calc(50px + 12vw) 20px 0;background-position: left top, right 100vw;}
    .land1 .slogan {margin-bottom: 12vw;}
    .land1 .slogan > h2 {font-size: 26px;line-height: 1.4;}
    .land1 .slogan > p {margin-top: 10px;font-size: 16px;line-height: 1.6;}
    .land1 .slogan > a {padding-left: 5px;margin-top: 30px;width: 170px;height: 40px;border-radius: 5px;font-size: 15px;}
    .land1 .slogan > a i {margin-left: 5px;font-size: 16px;vertical-align: -1px;}

    .land1 .counting {flex-wrap: wrap;width: auto;margin-bottom: 12vw;justify-content: center;gap: 10px;}
    .land1 .counting > li + li {border-left: 0;}
    .land1 .counting > li {flex: inherit;padding: 0;width: calc(100%/3 - 20px/3);box-sizing: border-box;}
    .land1 .counting > li > .num strong {font-size: 24px;}
    .land1 .counting > li > .num i {font-size: 12px;margin-left: 3px;}
    .land1 .counting > li > p {margin-top: 10px;font-size: 15px;}

    .land1 .banner {padding: 10px 0 0;margin: 0;}
    .land1 .banner .imgc img {transform: translateY(10px);}
    .land1 .banner .btn {width: calc(100% - 20px);margin-left: 0;bottom: 10px;left: 10px;padding: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.12);}
    .land1 .banner .btn p {margin-left: 5px;font-size: 13px;}
    .land1 .banner .btn a {width: 160px;height: 40px;border-radius: 5px;font-size: 14px;}
    .land1 .banner .btn:hover {z-index: 0;}
    .land1 .banner .btn:hover:after {display: block;content: '';position: absolute;z-index: -1;inset: 0;border: 1px solid var(--color);border-radius: 10px;}
    .land1 .banner .btn:hover p {color: var(--color);}


    .land2 {margin: 12vw 20px;}
    .land2 ._tabWrap {border-radius: 10px;display: block;}
    .land2 ._tabWrap .tab-tab {width: auto;display: flex;padding: 0;}
    .land2 ._tabWrap .tab-tab > li button {padding: 15px 20px;width: 100%;}
    .land2 ._tabWrap .tab-tab > li button:after,
    .land2 ._tabWrap .tab-tab > li button:before {top: 14px;right: 15px;}
    .land2 ._tabWrap .tab-tab > li button:after {margin-top: 10px;}
    .land2 ._tabWrap .tab-tab > li button:before {margin-top: 2px;}
    .land2 ._tabWrap .tab-tab > li button img {display: none;}
    .land2 ._tabWrap .tab-tab > li button strong {line-height: 1.4;font-size: 16px;}
    .land2 ._tabWrap .tab-tab > li button p {margin-top: 5px;font-size: 13px;line-height: 1.4;}
    .land2 ._tabWrap .tab-article {border-left: 0;border-top: 1px solid #ddd;}


    .land3 {margin: 12vw 20px;}
    .land3 .txt_boxs {margin: 0;}
    .land3 .txt_boxs > li > .img {margin-top: 10px;}
    .land3 .txt_boxs > li.gra > p {font-size: 16px;}
    .land3 .txt_boxs > li.gra > strong {margin-top: 5px;font-size: 24px;}
    .land3 .txt_boxs > li.gra > .img {margin-top: 5px;}



    .land4 {padding: 12vw 0;margin: 12vw 0;}
    .land4 .inner {margin: 0 20px;}
    .zigzag > li + li {margin-top: 12vw;}
    .zigzag > li {gap: 20px;flex-direction: column;align-items: inherit;}
    .zigzag > li:nth-child(even) {flex-direction: column;}
    .zigzag > li > * {flex: inherit;}
    .zigzag > li .img {border-radius: 10px;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
    .zigzag > li .inf {padding-left: 10px;padding-right: 10px;}
    .zigzag > li .inf > .cate {padding: 0 15px;height: 30px;border-radius: 15px;font-size: 14px;}
    .zigzag > li .inf > strong {margin-top: 15px;font-size: 18px;}
    .zigzag > li .inf > p {margin-top: 5px;font-size: 14px;line-height: 1.6;}
    .zigzag > li .inf > p.fwb {font-size: 16px;}
    .zigzag > li .inf > a {margin-top: 15px;width: 140px;height: 35px;border-radius: 5px;font-size: 14px;}
    .ul_txt > li {padding: 20px 0;}
    .ul_txt > li > strong {font-size: 18px;}
    .ul_txt > li > p {margin-top: 5px;font-size: 14px;line-height: 1.6;}



    .land5 {margin: 12vw 20px;}



    .land6 {margin: 12vw 0 0;}
    .land6 .slide_wrap {margin-bottom: 12vw;padding: 12vw 0;border-radius: 0;}
    .land6 .slide_wrap .title {margin-bottom: 20px;}
    .land6 .slide_wrap .item {height: 30vw;margin: 2px;border-radius: 5px;padding: 15px 5px;box-sizing: border-box;}
    .land6 .slide_wrap .item .ico {height: 40px;}
    .land6 .slide_wrap .item > p {font-size: 14px;color: #111;margin-top: 10px;}
    .txt_boxs {gap: 10px;margin: 0 20px;flex-direction: column;}
    .txt_boxs > li {flex: inherit;padding-top: 30px;border-radius: 10px;}
    .txt_boxs > li > strong {font-size: 18px;line-height: 1.4;}
    .txt_boxs > li > p {font-size: 14px;line-height: 1.6;}
    .txt_boxs > li > *:not(.img) {padding: 0 20px;}





    .land7 {padding: 12vw 0;margin: 0;}
    .land7 .inner {margin: 0 20px;}
    .land7 .btns {gap: 5px;}
    .land7 .btns > * {width: auto;padding: 0 20px;height: 40px;line-height: 38px;font-size: 15px;}
    .land7 .btns > *.gra {line-height: 40px;}
    .land7 .btns > *,
    .land7 .btns > *:hover {box-shadow: 0 0 10px rgba(0,0,0,0.12);}
}