@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Goldman:wght@400;700&family=Space+Grotesk:wght@300..700&display=swap');
* {
    box-sizing: border-box;
}
:root {
    --webcolor_main01: #E94709;
    --webcolor_main02: #10803B;
    --webcolor_main03: #FF8151;
    --webcolor_gray01: #4C4948;
    --webcolor_gray02: #D2D2D2;
    --webcolor_gray03: #45484C;
    --webcolor_gray04: #c9c9c9;
    --webcolor_gray05: #858585;
    --webcolor_gray06: #F6F6F6;
    --webcolor_gray07: #B5B5B6;
    --webcolor_gray08: #707070;
    --webcolor_gray09: #4A4A4A;
    --webcolor_dark01:#272C30;
    --webcolor_mainhover01: #ba3000;
    --webcolor_mainhover02: #ff6e1b;
    

}
.red {
    color: #D11502;
}
body {
    color: var(--webcolor_gray01);
}
html {
    font-size: 16px;
}
h1,h2 {
    font-family: Arial, 'Microsoft JhengHei', sans-serif;
    line-height: 1.5;
}
.text-Roboto {
    font-family: 'Roboto', sans-serif;
} 
p, a, li {
    font-family: Arial, 'Microsoft JhengHei', sans-serif;
    font-size: 1rem;
    font-size: 1.125rem;
    font-size: clamp( 14px, 0.9375vw, 18px);
    font-weight: initial;
    line-height: 1.6666;
}
/* p {
    line-height: 1.6666;
} */
.color-main {
    color: var(--webcolor_main01);
}
.color-white {
    color: #ffffff;
}
.color-gray01 {
    color: var(--webcolor_gray01);
}
.color-gray02 {
    color: var(--webcolor_gray02);
}
.color-gray03 {
    color: var(--webcolor_gray03);
}
.color-main-hover:hover {
    color: var(--webcolor_main01);
}
.bg-main {
    background-color: var(--webcolor_main01);
}
.bgc-white {
    background-color: #fff;
}
.bgc-gray01 {
    background-color: var(--webcolor_gray01);
}
.bgc-gray02 {
    background-color: var(--webcolor_gray02);
}
.bgc-gray03 {
    background-color: var(--webcolor_gray03);
}
.bgc-gray04 {
    background-color: var(--webcolor_gray04);
}
.bd_b01 {
    border-bottom: 1px solid #DCDCDC;
}
.op06 {
    opacity: 0.6;
}
.op07 {
    opacity: 0.7;
}
.df {
    display: flex;
}
.flex_wrap {
    flex-wrap: wrap;
}
.fd-row {
    flex-direction: row;
}
.fd-col {
    flex-direction: column;
}
.jcs {
    justify-content: start;
}
.jcc {
    justify-content: center;
}
.jce {
    justify-content: flex-end;
}
.ais {
    align-items: start;
}
.aic {
    align-items: center;
}
.dn {
    display: none !important;
}
.w10 {
    width: 10%;
}
.w20 {
    width: 20%;
}
.w25 {
    width: 25%;
}
.w30 {
    width: 30%;
}
.w33 {
    width: 33%;
}
.w35 {
    width: 35%;
}
.w37 {
    width: 37%;
}
.w39 {
    width: 39%;
}
.w40 {
    width: 40%;
}
.w50 {
    width: 50%;
}
.w60 {
    width: 60%;
}
.w61 {
    width: 61%;
}
.w63 {
    width: 63%;
}
.w65 {
    width: 65%;
}
.w67 {
    width: 67%;
}
.w70 {
    width: 70%;
}
.w75 {
    width: 75%;
}
.w80 {
    width: 80%;
}
.w90 {
    width: 90%;
}
.w100 {
    width: 100%;
}
.mbcl100 {
    margin-bottom: clamp( 30px, 5.20833vw, 100px);
}
.op07 {
    opacity: 0.7;
}
.tt {
    text-transform: uppercase;
}
.over_2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.over_3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.over_4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.cardlink {
    cursor: pointer;
}
.imghover {
    overflow: hidden;
}
.imghover img {
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}
.cardimghover:hover .imghover img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}
.rwdtable {
    overflow: overlay;
}
/* main title - start */
.webtitle_h2 {
    font-weight: 700;
    font-size: clamp( 22px, 1.8875vw, 36px);
    line-height: 1.5;
    margin-bottom: 20px;
    font-family: "Space Grotesk", Arial, 'Microsoft JhengHei', sans-serif;
}
.webpage_titleH1 {
    font-size: clamp( 24px, 1.8875vw, 36px);
    font-weight: 700;
    color: var(--webcolor_main01);
}
.webtitle22 {
    font-size: 22px;
    font-weight: 700;
    color: var(--webcolor_main01);
    margin-bottom: 0;
}
.webtitle22_W {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
}
.title02style {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: clamp(10px, 1.8229166vw, 35px);
    /* margin-bottom: clamp(10px, 1.041666vw, 20px); */

}
.title02row {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}
.title02row img {
    width: 24px;
    height: auto;
    margin-right: 17px;
}
.webstyleUl {
    padding-left: 20px;
    list-style-type: square;
}
.webstyleUl li::marker {
    color: var(--webcolor_main01);
    font-size: 24px;
}
/* main title - end */
/* ul style - start */
.webstyleul ul {
    padding-left: 20px;
    list-style-type: square;
    margin-top: 10px;
}
.webstyleul li::marker {
    color: var(--webcolor_main01);
    font-size: 24px;
}
.webstyleul li {
    font-size: clamp(14px, 0.9375vw, 18px);
    line-height: 1.6666;
}
/* ul style - start */
/* Owl style*/
.ksOwl.owl-carousel .owl-nav .owl-prev span, .ksOwl.owl-carousel .owl-nav .owl-next span {
    width: 36px;
    height: 28px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ksOwl.owl-carousel .owl-nav .owl-prev {
    margin-right: 7px;
}
.ksOwl.owl-carousel .owl-nav .owl-prev:hover span, .ksOwl.owl-carousel .owl-nav .owl-next:hover span {
    background-color: var(--webcolor_main01);
}
.ksOwl.owl-carousel .owl-nav .owl-prev span:before, .ksOwl.owl-carousel .owl-nav .owl-next span:before {
    content: "";
    width: 22px;
    height: 10.8px;
    background-size: 100% 100%;
}
.ksOwl.owl-carousel .owl-nav .owl-prev span:before {
    background-image: url(../images/icon/ksOwl_prev_main.svg);
}
.ksOwl.owl-carousel .owl-nav .owl-prev:hover span:before {
    background-image: url(../images/icon/ksOwl_prev_white.svg);
}
.ksOwl.owl-carousel .owl-nav .owl-next span:before {
    background-image: url(../images/icon/ksOwl_next_main.svg);
}
.ksOwl.owl-carousel .owl-nav .owl-next:hover span:before {
    background-image: url(../images/icon/ksOwl_next_white.svg);
}
.ksOwl.owl-carousel .owl-nav .owl-prev, .ksOwl.owl-carousel .owl-nav .owl-next, .ksOwl.owl-carousel .owl-nav {
    display: flex;
    flex-direction: row;
    justify-content: end;
}
.ksOwl.owl-carousel .owl-nav button.owl-next, .ksOwl.owl-carousel .owl-nav button.owl-prev, .ksOwl.owl-carousel button.owl-dot {
    position: initial;
}
.ksOwl.owl-carousel .owl-nav {
    left: initial;
    right: 0;
    width: auto;
}

/* web section padding - start */
.sect_style01 {
    padding-top: clamp(60px,6.25vw, 120px);
    padding-bottom: clamp(60px,6.7708vw, 130px);
}
/* web section padding - end */
/* ---- web btn ---- start */
.webbtn {
    display: flex;
    font-display: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}
.webbtn02 {
    display: flex;
    font-display: row;
    justify-content: space-between;
    align-items: center;
}
.webbtn_more {
    font-weight: 700;
    margin-right: 20px;
}
.webbtn:hover .webbtn_more{
    margin-right: 30px;
}
.webbtn_gray_more {
    color: var(--webcolor_gray01);
}
.webbtn_white_more {
    color: #fff;
}
.webbtn_gray {
    background-color: #fff;
    border: 1px solid var(--webcolor_gray01);
}
.webbtn_more, .webbtn_gray_mor, .webbtn_gray_more, .webbtn_gray {
    font-family: Arial, Microsoft JhengHei, sans-serif;
    font-weight: 100;
}
.webbtn_more, .webbtn_gray_mor, .webbtn_gray_more, .webbtn_gray {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;

}
.btn_img_orange {
    background-image: url(../images/web_comp/web_btn.svg);
}
.btn_img_gray {
    background-image: url(../images/web_comp/web_btn_gray.svg);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.btn_img_white {
    background-image: url(../images/web_comp/web_btn_white.svg);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.btn_img {
    width: 22px;
    height: 11px;
    background-size: cover;
    background-repeat: no-repeat;
}
.btn-bd {
    border: 1px solid var(--webcolor_gray01);
}
.webbtn_gray {
    background-color: #fff;
    border: 1px solid var(--webcolor_gray01);
}
.webbtn_gray:hover {
    background-color: var(--webcolor_main01);
    border: 1px solid var(--webcolor_main01);
}
.webbtn_gray:hover .webbtn_gray_more {
    color: #fff
}
.news_btn {
    background-image: url(../images/web_comp/web_btn_gray.svg);
}
.webbtn_gray:hover .news_btn {
    background-image: url(../images/web_comp/web_btn_white.svg);
}
.webbtn_gray:hover .btn_img_gray {
    background-image: url(../images/web_comp/web_btn_white.svg);
}

.padding_main_L {
    padding-left: clamp( calc( ( 100vw - 1400px ) / 2 ) , calc( ( 100% - 72.91666vw ) / 2 ) , calc( ( 100vw - 1600px ) / 2 ) );
}
#ctaL {
    background-size: cover;
    background-position: center;
}
/* cta ------------- */
#cta_contact {
    display: flex;
    flex-direction: row;
    width: 100vw;
}
#cta_contact .webbtn02:hover .webbtn_more {
    letter-spacing: 1px;
    color: var(--webcolor_main01);
}
#cta_contact .webbtn02:hover .btn_img {
    background-image: url(../images/web_comp/web_btn.svg);
}
#cta_l,#cta_r {
    width: 50%;
}
#cta_l {
    background-image: none;
    background-color: var(--webcolor_gray01);
    width: 100%;
}
#cta_r {
    padding: clamp(15px,4.16666vw,80px) clamp(15px,4.427vw,85px);
    background-color: var(--webcolor_dark01);
}
/* cta ------------- */
/* footer ------------- */
#webfooter {
    background-color: #F6F6F6;
    position: relative;
}
#footer_bgi {
    height: 60%;
    width: auto;
    position: absolute;
    right: 0;
    bottom: 0;
}
.footerName {
    font-size: clamp( 16px, 1.145833vw, 22px);
    margin-bottom: clamp( 10px, 1.041666vw, 20px);
    font-weight: 700;
}
.footer_info p, .footer_info a {
    font-size: clamp( 14px, 0.9375vw, 18px);
    margin-bottom: clamp( 8px, 0.83333vw, 16px);
    padding-top: 7px;
    line-height: 1.2;
    font-weight: 500;
    font-family: 'Microsoft JhengHei', sans-serif;
    color: var(--webcolor_gray01);
}
#footer_logo {
    margin-bottom: clamp( 20px, 3.125vw, 60px);
}
#footer_logo img {
    width: clamp( 170px, 11.0416666vw, 212px);
    height: auto;
}
.footer_info {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
}
#footer_links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#footer_links a {
    font-size: clamp( 14px, 1.041666vw, 20px);
    font-weight: 600;
    width: 50%;
    margin-bottom: clamp( 10px, 1.041666vw, 20px);
    color: var(--webcolor_gray01);
}
#footer_links a:hover {
    color: var(--webcolor_main01);
}
.footer_infoimg {
    padding-top: 5px;
    margin-right: 10px;
}
.footer_infoimg img {
    width: clamp( 12px, 1.25vw, 24px);
    height: auto;
}
#footer_bottom {
    border-top: 1px solid #c4bfbf;
}
#copyrigt {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: clamp( 12px, 1.5625vw, 30px) 0;
}
#copyrigt p {
    font-size: clamp( 12px, 0.9375vw, 18px);
    margin-bottom: 0;
    line-height: 1.2;
}
.copyright_right {
    line-height: 1.2;
    font-weight: 500;
    font-family: 'Microsoft JhengHei', sans-serif;
    color: var(--webcolor_gray01);
    font-size: clamp( 12px, 0.83333vw, 16px);
}
/* footer ------------- */
/* ---- web btn ---- end */
/* web header - nav social group -- start */
.nav_socials {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;

}
.social_item {
    position: relative;
    width: 27px;
    height: 27px;
    background-color: var(--webcolor_gray05);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    display: inline-block;
    overflow: hidden;
    margin-left: 8px;
}
.social_item:hover {
    background-color: var(--webcolor_main01);
}
.social_icon {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
}
.social-line {
    background-image: url(../images/icon/icon_LINE.svg);
}
.social-yt {
    background-image: url(../images/icon/icon_YT.svg);
}
.social-fb {
    background-image: url(../images/icon/icon_FB.svg);
}
.navbarnenuimg .showimg {
    width: 70%;
}
/* web header - nav social group -- end */

/* ---- web header ---- start */
#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
}
#header_deco_top {
    background-color: var(--webcolor_main01);
    height: 12px;
    width: 100%;
}
.header.active {
    background: initial;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 10;
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05);
}
.header-style-1 .top-bar {
    display: flex;
    flex-direction: row;
    justify-content: end;
    width: 100%;
    border-bottom: 1px solid #D2D2D2;
}
.header-style-1 .top-bar a {
    color: var(--webcolor_gray01);
    font-size: 1rem;
    font-weight: 100;
    font-family: sans-serif;
}
.header-style-1 .top-bar .list .item {
    margin: 0 14px;
    padding: 0;
}
.header-style-1 .top-bar .list .item a:hover {
    color: var(--webcolor_main01);
}
.header-style-1 .top-bar .list .socials.item .socialFB {
    font-size: 20px;
    padding-top: 5px;
}
.header-style-1 .nav > .nav-item:hover a {
    color: var(--webcolor_gray01);
}
.header-style-1 .nav > .nav-item > a {
    color: var(--webcolor_gray01);
}
.header-style-1 .nav > .nav-item > a:hover {
    color: var(--webcolor_main01);
}
.header-style-1 .top-bar .list .socials.item a:hover {
    background-color: var(--webcolor_main01);
    color: #fff;
}
.header .nav > .nav-item.dropdown {
    position: relative !important;
    padding-top: clamp( 30px, 2.08333vw, 40px);
    padding-bottom: clamp( 30px, 2.08333vw, 40px);
}
.header .desktop.scrollactive .deskbottom .nav > .nav-item.dropdown {
    padding-top: clamp( 20px, 1.5625vw, 30px);
    padding-bottom: clamp( 20px, 1.5625vw, 30px);
}
.header .top-bar .nav > .nav-item.dropdown {
    padding-top: clamp( 8px, 0.78125vw, 15px);
    padding-bottom: clamp( 8px, 0.78125vw, 15px);
}
.dropdown-style-3 .item-dropdown {
    width: initial;
}
li.nav-item {
    position: relative;
}
.header-style-1 .nav > li.nav-item a {
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 500;
    padding-top: 0;
    padding-bottom: 0;
}
.header .nav > .nav-item .item-dropdown {
    top: calc(100% + 20px);
    left: 0 !important;
    transform: initial !important;
    -webkit-transform: initial !important;
    -moz-transform: initial !important;
    -ms-transform: initial !important;
    -o-transform: initial !important;
}
.header .nav > .nav-item .item-dropdown {
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    /* opacity: 1.0;
    pointer-events: initial; */
    border-top: 1px solid #D2D2D2;
    box-shadow: 0 5px 5px rgba(0,0,0,0.1); 
    background-color: #fff;
    pointer-events: none;
}
.header .desktop.scrollactive .nav > .nav-item:hover .item-dropdown {
    background-color: rgba(255, 255, 255, 0.99);
}
.header .nav > .nav-item:hover {
    color: var(--webcolor_gray01);
}
.header .nav > .nav-item:hover .item-dropdown {
    /* pointer-events: initial; */
}
.item-dropdown {
    display: flex;
    flex-direction: column;
    padding-top: 3rem;
    padding-bottom: 2rem;
}
.header-style-1 .nav > .nav-item .item-dropdown a, .item-dropdown a {
    padding: 0.8em 0rem;
}
.header-style-1 .nav > .nav-item:hover .item-dropdown a, .item-dropdown a {
    color: var(--webcolor_gray01);
    border-bottom: 1px solid var(--webcolor_gray02);
    padding: 0.8em 0rem;
    width: 100%;
    display: block;
    /* background-color: #fff; */
    white-space:nowrap;
    position: relative;
}
.dropdown_arrow::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid;
    border-color: var(--webcolor_gray01) transparent transparent transparent;
    top: 50%;
    right: -20px;
    font-family: sans-serif;
    transform: translate(0, calc( -50% + 3px ));
    -webkit-transform: translate(0, calc( -50% + 3px ));
    -moz-transform: translate(0, calc( -50% + 3px ));
    -ms-transform: translate(0, calc( -50% + 3px ));
    -o-transform: translate(0, calc( -50% + 3px ));
}
.header-style-1 .nav > .nav-item:hover .item-dropdown a:hover {
    /* background-color: var(--webcolor_main01); */
}
.header-style-1 .nav > .nav-item:hover .item-dropdown a:hover p {
    color: var(--webcolor_main01);
}
.item-dropdown a:hover p {
}
.item-dropdown a p {
    margin: 0;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}
.item-dropdown a.active p {
    color: var(--webcolor_main01);
}

.header-style-1 .lan .dropdown-toggle {
    background-color: initial;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-left: 1px solid #867d7d;
    color: var(--webcolor_gray01);
}
.header-style-1 .lan .dropdown-toggle::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid;
    border-color: var(--webcolor_gray01) transparent transparent transparent;
    top: 50%;
    right: -20px;
    font-family: sans-serif;
    transform: translate(0, calc( -50% + 3px ));
    -webkit-transform: translate(0, calc( -50% + 3px ));
    -moz-transform: translate(0, calc( -50% + 3px ));
    -ms-transform: translate(0, calc( -50% + 3px ));
    -o-transform: translate(0, calc( -50% + 3px ));
}
.deskbottom, .header-style-1 .top-bar {
    padding-right: 6.875vw;
    padding-left: 6.875vw;
}
.header-style-1 .nav > .nav-item:hover .item-dropdown a.navimg, 
.item-dropdown a.navimg, .item-dropdown:hover a.navimg {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.dropdownitem {
    opacity: 0;
    /* pointer-events: none; */
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    display: none;
}
.dropdownitem.active {
    opacity: 1;
    display: block;
    animation: fadeLoop .6s ease-in-out both;
    -webkit-animation: fadeLoop .6s ease-in-out both;
}
@keyframes fadeLoop {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
.pdiatitle {
    padding-right: 10px;
    padding-top: 5px;
}
.header-style-1 .nav > .nav-item .item-dropdown .pdia a {
    padding: 0em 0rem;
    border-bottom: none;
}
.header-style-1 .nav > .nav-item .item-dropdown .pdia {
    padding: 0.755em 0rem;
    border-bottom: 1px solid var(--webcolor_gray02);
    line-height: 1.875;
}
.pdia .df a+a::before {
    content: "/";
    margin-left: 10px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    padding-top: 0px;
}
.pdia p {
    margin-bottom: 0;
    display: inline-block;
}


.header-style-1 .desktop {
    -webkit-box-shadow: initial;
    box-shadow: initial;
}

.header-style-1 .nav-wrapper {
    padding-bottom: 0;
}
/* ---- web header ---- end */

#offsetTop {
    position: fixed;
    right: clamp( 8px, 1.041666vw, 20px);
    bottom: -60px;
    opacity: 0.5;
    width: clamp( 35px, 3.125vw, 60px);
    height: clamp( 35px, 3.125vw, 60px);
    background-color: var(--webcolor_main01);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    cursor: pointer;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
}
#offsetTop.active {
    bottom: 100px;
}
#offsetTop.active:hover {
    opacity: 1;
}
#offsetTop img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: auto;
    transform: translate(-50%,-50%) rotate(-90deg);
    -webkit-transform: translate(-50%,-50%) rotate(-90deg);
    -moz-transform: translate(-50%,-50%) rotate(-90deg);
    -ms-transform: translate(-50%,-50%) rotate(-90deg);
    -o-transform: translate(-50%,-50%) rotate(-90deg);
}

@media screen and (min-width: 576px){
    
}
@media screen and (min-width: 768px){

}
@media screen and (min-width: 992px) {

}
@media screen and (min-width: 1100px) {

}
@media screen and (min-width: 1200px) {

}
@media screen and (min-width: 1400px) {
  
}
@media screen and (max-width: 1440px) {
    .padding_main_L {
        padding-left: 0;
        width: 50%;
    }

}
@media screen and (max-width: 1399px) {

}
@media screen and (max-width: 1299px) {

}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1199px) {

}
@media screen and (max-width: 1099px) {

}
@media screen and (max-width: 991px) {
}
@media screen and (max-width: 951px) {

}
@media screen and (max-width: 899px) {

}
@media screen and (max-width: 820px) {

}
@media screen and (max-width: 767px) {
    .flex-767-column-reverse {
        flex-direction: column-reverse;
    }
    p,li {
        line-height: 1.4;
    }
    .padding_main_L {
        width: 30%;
    }
    #cta_r {
        width: 70%;
    }
    #cta_l {
        background-image: initial;
    }
    #cta_l img { 
        display: none;
    }
    #cta_r {
        padding: clamp(15px,4.16666vw,80px) clamp(15px,4.427vw,85px);
        background-color: var(--webcolor_gray01);
    }
    #copyrigt {
        padding: 15px 0;
    }
    .copyright_right {
        font-size: 0.75rem;
    }
    #offsetTop {
        width: 40px;
        height: 40px;
    }
    .webtitle22 {
        font-size: 20px;
    }
}
@media screen and (max-width: 575px) {
    #copyrigt {
        flex-direction: column;
        justify-content: center;
        align-items: start;
    }
    p, a, li {
        font-size: clamp( 14px, 0.9375vw, 18px);
    }
    .webstyleul li {
        line-height: 1.2;
    }
}
@media screen and (max-width: 425px) {
    
}
@media screen and (max-width: 414px) {

}
@media screen and (max-width: 380px) {

}
@media screen and (max-width: 375px) {

}
@media screen and (max-width: 320px) {

}
@media screen and (max-width: 767px) {
}