@charset "utf-9";
/* *{
    font-family: serif;
} */

.bg_transparent_color {
    background-color: rgba(0, 0, 0, 0) !important;
}

.bg_main_color {
    background-color: #fff !important;
}

.main_color-f {
    color: #fff !important;
}

.main_border_color {
    border-color: #fff !important;
}

.main_fill_color {
    fill: #fff !important;
}

.main_stroke_color {
    stroke: #fff !important;
}

.bg_sub1_color {
    background-color: #c5c5c5 !important;
}

.sub1_color-f {
    color: #c5c5c5 !important;
}

.sub1_border_color {
    border-color: #c5c5c5 !important;
}

.sub1_fill_color {
    fill: #c5c5c5 !important;
}

.sub1_stroke_color {
    stroke: #c5c5c5 !important;
}

.bg_sub2_color {
    background-color: #555555 !important;
}

.sub2_color-f {
    color: #555555 !important;
}

.sub2_border_color {
    border-color: #555555 !important;
}

.sub2_fill_color {
    fill: #555555 !important;
}

.sub2_stroke_color {
    stroke: #555555 !important;
}

.bg_sub3_color {
    background-color: rgb(33, 33, 33) !important;
}

.sub3_color-f {
    color: rgb(33, 33, 33) !important;
}

.sub3_border_color {
    border-color: rgb(33, 33, 33) !important;
}

.sub3_fill_color {
    fill: rgb(33, 33, 33) !important;
}

.sub3_stroke_color {
    stroke: rgb(33, 33, 33) !important;
}

.main_btn_sharp {
    position: relative;
}

.main_btn_sharp::before,
.main_btn_sharp::after {
    content: "";
    position: absolute;
    width: 20%;
    height: 100%;
    ;
    top: 0;
}

.main_btn_sharp::before {
    left: -20%;
    background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #fff 50%);
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #fff 50%);
}

.main_btn_sharp::after {
    right: -20%;
    background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #fff 50%);
    background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #fff 50%);
}

.sub1_btn_sharp {
    position: relative;
}

.sub1_btn_sharp::before,
.sub1_btn_sharp::after {
    content: "";
    position: absolute;
    width: 20%;
    height: 100%;
    ;
    top: 0;
}

.sub1_btn_sharp::before {
    left: -20%;
    background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
}

.sub1_btn_sharp::after {
    right: -20%;
    background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
}

.sub2_btn_sharp {
    position: relative;
}

.sub2_btn_sharp::before,
.sub2_btn_sharp::after {
    content: "";
    position: absolute;
    width: 20%;
    height: 100%;
    ;
    top: 0;
}

.sub2_btn_sharp::before {
    left: -20%;
    background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #555555 50%);
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #555555 50%);
}

.sub2_btn_sharp::after {
    right: -20%;
    background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #555555 50%);
    background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #555555 50%);
}

.sub3_btn_sharp {
    position: relative;
}

.sub3_btn_sharp::before,
.sub3_btn_sharp::after {
    content: "";
    position: absolute;
    width: 20%;
    height: 100%;
    ;
    top: 0;
}

.sub3_btn_sharp::before {
    left: -20%;
    background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, rgb(33, 33, 33) 50%);
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, rgb(33, 33, 33) 50%);
}

.sub3_btn_sharp::after {
    right: -20%;
    background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, rgb(33, 33, 33) 50%);
    background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, rgb(33, 33, 33) 50%);
}

.main-textshadow-wrap {
    text-shadow: #fff 1px 0px, #fff -1px 0px, #fff 0px -1px, #fff 0px 1px, #fff 1px 1px, #fff -1px 1px, #fff 1px -1px, #fff -1px -1px,
        #fff 1px 1px, #fff -1px 1px, #fff 1px -1px, #fff -1px -1px, #fff 1px 1px, #fff -1px 1px, #fff 1px -1px, #fff -1px -1px;
}

.sub1-textshadow-wrap {
    text-shadow: #c5c5c5 1px 0px, #c5c5c5 -1px 0px, #c5c5c5 0px -1px, #c5c5c5 0px 1px, #c5c5c5 1px 1px, #c5c5c5 -1px 1px, #c5c5c5 1px -1px, #c5c5c5 -1px -1px,
        #c5c5c5 1px 1px, #c5c5c5 -1px 1px, #c5c5c5 1px -1px, #c5c5c5 -1px -1px, #c5c5c5 1px 1px, #c5c5c5 -1px 1px, #c5c5c5 1px -1px, #c5c5c5 -1px -1px;
}

.sub2-textshadow-wrap {
    text-shadow: #555555 1px 0px, #555555 -1px 0px, #555555 0px -1px, #555555 0px 1px, #555555 1px 1px, #555555 -1px 1px, #555555 1px -1px, #555555 -1px -1px,
        #555555 1px 1px, #555555 -1px 1px, #555555 1px -1px, #555555 -1px -1px, #555555 1px 1px, #555555 -1px 1px, #555555 1px -1px, #555555 -1px -1px;
}

.sub3-textshadow-wrap {
    text-shadow: rgb(33, 33, 33) 1px 0px, rgb(33, 33, 33) -1px 0px, rgb(33, 33, 33) 0px -1px, rgb(33, 33, 33) 0px 1px, rgb(33, 33, 33) 1px 1px, rgb(33, 33, 33) -1px 1px, rgb(33, 33, 33) 1px -1px, rgb(33, 33, 33) -1px -1px,
        rgb(33, 33, 33) 1px 1px, rgb(33, 33, 33) -1px 1px, rgb(33, 33, 33) 1px -1px, rgb(33, 33, 33) -1px -1px, rgb(33, 33, 33) 1px 1px, rgb(33, 33, 33) -1px 1px, rgb(33, 33, 33) 1px -1px, rgb(33, 33, 33) -1px -1px;
}


.sub1_speech_balloon {
    border: 4px solid #c5c5c5 !important;
}

.sub1_speech_balloon:before {
    border-top-color: #c5c5c5 !important;
}

.sub2_speech_balloon {
    border: 4px solid #555555 !important;
}

.sub2_speech_balloon:before {
    border-top-color: #555555 !important;
}

.sub3_speech_balloon {
    border: 4px solid rgb(33, 33, 33) !important;
}

.sub3_speech_balloon:before {
    border-top-color: rgb(33, 33, 33) !important;
}

.main_half_arrow_top,
.sub1_half_arrow_top,
.sub2_half_arrow_top,
.sub3_half_arrow_top {
    position: relative;
}

.main_half_arrow_top::before,
.sub1_half_arrow_top::before,
.sub2_half_arrow_top::before,
.sub3_half_arrow_top::before {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1px;
    transform: rotate(45deg);
    right: -1px;
    top: 2px;
}

.main_half_arrow_top::before {
    background-color: #fff;
}

.sub1_half_arrow_top::before {
    background-color: #c5c5c5;
}

.sub2_half_arrow_top::before {
    background-color: #555555;
}

.sub3_half_arrow_top::before {
    background-color: rgb(33, 33, 33);
}

.sub1_checked_effect,
.sub2_checked_effect,
.sub3_checked_effect {
    position: relative;
    padding-left: 1rem;
}

.sub1_checked_effect_huge,
.sub2_checked_effect_huge,
.sub3_checked_effect_huge {
    position: relative;
    padding-left: 1.5rem;
}

.sub1_checked_effect::before,
.sub2_checked_effect::before,
.sub3_checked_effect::before,
.sub1_checked_effect_huge::before,
.sub2_checked_effect_huge::before,
.sub3_checked_effect_huge::before {
    content: "";
    position: absolute;
    display: block;
    top: .25rem;
    left: -.5rem;
    padding-top: calc(1rem - 2px);
    width: 1rem;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.sub1_checked_effect_huge::before,
.sub2_checked_effect_huge::before,
.sub3_checked_effect_huge::before {
    padding-top: calc(1.5rem - 2px);
}

.sub1_checked_effect::before,
.sub2_checked_effect::before,
.sub3_checked_effect::before {
    width: 1rem;
}

.sub1_checked_effect_huge::before,
.sub2_checked_effect_huge::before,
.sub3_checked_effect_huge::before {
    width: 1.5rem;
}

.sub1_checked_effect::after,
.sub2_checked_effect::after,
.sub3_checked_effect::after,
.sub1_checked_effect_huge::after,
.sub2_checked_effect_huge::after,
.sub3_checked_effect_huge::after {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    top: .25rem;
    left: -.5rem;
    transform: rotate(-45deg);
    border-bottom: 3px solid;
    border-left: 3px solid;
}

.sub1_checked_effect_huge::after,
.sub2_checked_effect_huge::after,
.sub3_checked_effect_huge::after {
    border-bottom: 7px solid;
    border-left: 5px solid;
}

.sub1_checked_effect::after,
.sub2_checked_effect::after,
.sub3_checked_effect::after {
    width: 18px;
    height: 9px;
}

.sub1_checked_effect_huge::after,
.sub2_checked_effect_huge::after,
.sub3_checked_effect_huge::after {
    width: 24px;
    height: 12px;
}

.sub1_checked_effect::after,
.sub1_checked_effect_huge::after {
    border-color: #c5c5c5;

}

.sub2_checked_effect::after,
.sub2_checked_effect_huge::after {
    border-color: #555555;
}

.sub3_checked_effect::after,
.sub3_checked_effect_huge::after {
    border-color: rgb(33, 33, 33);
}






.main_color_shadow,
.sub1_color_shadow,
.sub2_color_shadow,
.sub3_color_shadow {
    position: relative;
}

.main_color_shadow::after,
.sub1_color_shadow::after,
.sub2_color_shadow::after,
.sub3_color_shadow::after {
    content: "";
    width: 95%;
    height: 95%;
    position: absolute;
    top: 6%;
    left: 6%;
    z-index: -1;
}

.main_color_shadow::after {
    background-color: #fff;
}

.sub1_color_shadow::after {
    background-color: #c5c5c5;
}

.sub2_color_shadow::after {
    background-color: #555555;
}

.sub3_color_shadow::after {
    background-color: rgb(33, 33, 33);
}


.main_color_left_top_right_bottom_triangle,
.sub1_color_left_top_right_bottom_triangle,
.sub2_color_left_top_right_bottom_triangle,
.sub3_color_left_top_right_bottom_triangle {
    position: relative;
}

.main_color_left_top_right_bottom_triangle::before,
.sub1_color_left_top_right_bottom_triangle::before,
.sub2_color_left_top_right_bottom_triangle::before,
.sub3_color_left_top_right_bottom_triangle::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0rem;
    left: 0rem;
    border-right: solid 1.5rem rgba(0, 0, 0, 0);
    border-bottom: solid 1.5rem rgba(0, 0, 0, 0);
}

.main_color_left_top_right_bottom_triangle::after,
.sub1_color_left_top_right_bottom_triangle::after,
.sub2_color_left_top_right_bottom_triangle::after,
.sub3_color_left_top_right_bottom_triangle::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0rem;
    right: 0rem;
    border-left: solid 1.5rem rgba(0, 0, 0, 0);
    border-top: solid 1.5rem rgba(0, 0, 0, 0);

}

.main_color_left_top_right_bottom_triangle::before {
    border-left: solid 1.5rem #fff;
    border-top: solid 1.5rem #fff;

}

.sub1_color_left_top_right_bottom_triangle::before {
    border-left: solid 1.5rem #c5c5c5;
    border-top: solid 1.5rem #c5c5c5;

}

.sub2_color_left_top_right_bottom_triangle::before {
    border-left: solid 1.5rem #555555;
    border-top: solid 1.5rem #555555;

}

.sub3_color_left_top_right_bottom_triangle::before {
    border-left: solid 1.5rem rgb(33, 33, 33);
    border-top: solid 1.5rem rgb(33, 33, 33);
}

.main_color_left_top_right_bottom_triangle::after {
    border-right: solid 1.5rem #fff;
    border-bottom: solid 1.5rem #fff;

}

.sub1_color_left_top_right_bottom_triangle::after {
    border-right: solid 1.5rem #c5c5c5;
    border-bottom: solid 1.5rem #c5c5c5;

}

.sub2_color_left_top_right_bottom_triangle::after {
    border-right: solid 1.5rem #555555;
    border-bottom: solid 1.5rem #555555;

}

.sub3_color_left_top_right_bottom_triangle::after {
    border-right: solid 1.5rem rgb(33, 33, 33);
    border-bottom: solid 1.5rem rgb(33, 33, 33);

}



.main_color_right_top_left_bottom_triangle,
.sub1_color_right_top_left_bottom_triangle,
.sub2_color_right_top_left_bottom_triangle,
.sub3_color_right_top_left_bottom_triangle {
    position: relative;
}

.main_color_right_top_left_bottom_triangle::before,
.sub1_color_right_top_left_bottom_triangle::before,
.sub2_color_right_top_left_bottom_triangle::before,
.sub3_color_right_top_left_bottom_triangle::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0rem;
    right: 0rem;
    border-left: solid 1.5rem rgba(0, 0, 0, 0);
    border-bottom: solid 1.5rem rgba(0, 0, 0, 0);
}

.main_color_right_top_left_bottom_triangle::after,
.sub1_color_right_top_left_bottom_triangle::after,
.sub2_color_right_top_left_bottom_triangle::after,
.sub3_color_right_top_left_bottom_triangle::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0rem;
    left: 0rem;
    border-right: solid 1.5rem rgba(0, 0, 0, 0);
    border-top: solid 1.5rem rgba(0, 0, 0, 0);

}

.main_color_right_top_left_bottom_triangle::before {
    border-right: solid 1.5rem #fff;
    border-top: solid 1.5rem #fff;

}

.sub1_color_right_top_left_bottom_triangle::before {
    border-right: solid 1.5rem #c5c5c5;
    border-top: solid 1.5rem #c5c5c5;

}

.sub2_color_right_top_left_bottom_triangle::before {
    border-right: solid 1.5rem #555555;
    border-top: solid 1.5rem #555555;

}

.sub3_color_right_top_left_bottom_triangle::before {
    border-right: solid 1.5rem rgb(33, 33, 33);
    border-top: solid 1.5rem rgb(33, 33, 33);
}

.main_color_right_top_left_bottom_triangle::after {
    border-left: solid 1.5rem #fff;
    border-bottom: solid 1.5rem #fff;

}

.sub1_color_right_top_left_bottom_triangle::after {
    border-left: solid 1.5rem #c5c5c5;
    border-bottom: solid 1.5rem #c5c5c5;

}

.sub2_color_right_top_left_bottom_triangle::after {
    border-left: solid 1.5rem #555555;
    border-bottom: solid 1.5rem #555555;

}

.sub3_color_right_top_left_bottom_triangle::after {
    border-left: solid 1.5rem rgb(33, 33, 33);
    border-bottom: solid 1.5rem rgb(33, 33, 33);

}



.bg-triangle-right-top-main-color-before,
.bg-triangle-left-top-main-color-before,
.bg-triangle-right-bottom-main-color-after,
.bg-triangle-left-bottom-main-color-after {
    position: relative;
}

.bg-triangle-left-top-main-color-before::before,
.bg-triangle-right-top-main-color-before::before,
.bg-triangle-left-bottom-main-color-after::after,
.bg-triangle-right-bottom-main-color-after::after {
    content: "";
    width: 100%;
    height: 15%;
    max-height: 5rem;
    position: absolute;
    z-index: 2;
}

.bg-triangle-right-top-main-color-before::before {
    top: 0;
    left: 0;
    background: linear-gradient(to left bottom, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-left-top-main-color-before::before {
    top: 0;
    right: 0;
    background: linear-gradient(to right bottom, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-right-bottom-main-color-after::after {
    bottom: 0;
    left: 0;
    background: linear-gradient(to left top, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-left-bottom-main-color-after::after {
    bottom: 0;
    right: 0;
    background: linear-gradient(to right top, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-right-top-sub1-color-before,
.bg-triangle-left-top-sub1-color-before,
.bg-triangle-right-bottom-sub1-color-after,
.bg-triangle-left-bottom-sub1-color-after {
    position: relative;
}

.bg-triangle-left-top-sub1-color-before::before,
.bg-triangle-right-top-sub1-color-before::before,
.bg-triangle-left-bottom-sub1-color-after::after,
.bg-triangle-right-bottom-sub1-color-after::after {
    content: "";
    width: 100%;
    height: 15%;
    max-height: 5rem;
    position: absolute;
    z-index: 2;
}

.bg-triangle-right-top-sub1-color-before::before {
    top: 0;
    left: 0;
    background: linear-gradient(to left bottom, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-left-top-sub1-color-before::before {
    top: 0;
    right: 0;
    background: linear-gradient(to right bottom, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-right-bottom-sub1-color-after::after {
    bottom: 0;
    left: 0;
    background: linear-gradient(to left top, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-left-bottom-sub1-color-after::after {
    bottom: 0;
    right: 0;
    background: linear-gradient(to right top, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-right-top-sub2-color-before,
.bg-triangle-left-top-sub2-color-before,
.bg-triangle-right-bottom-sub2-color-after,
.bg-triangle-left-bottom-sub2-color-after {
    position: relative;
}

.bg-triangle-left-top-sub2-color-before::before,
.bg-triangle-right-top-sub2-color-before::before,
.bg-triangle-left-bottom-sub2-color-after::after,
.bg-triangle-right-bottom-sub2-color-after::after {
    content: "";
    width: 100%;
    height: 15%;
    max-height: 5rem;
    position: absolute;
    z-index: 2;
}

.bg-triangle-right-top-sub2-color-before::before {
    top: 0;
    left: 0;
    background: linear-gradient(to left bottom, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-left-top-sub2-color-before::before {
    top: 0;
    right: 0;
    background: linear-gradient(to right bottom, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-right-bottom-sub2-color-after::after {
    bottom: 0;
    left: 0;
    background: linear-gradient(to left top, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-left-bottom-sub2-color-after::after {
    bottom: 0;
    right: 0;
    background: linear-gradient(to right top, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-right-top-sub3-color-before,
.bg-triangle-left-top-sub3-color-before,
.bg-triangle-right-bottom-sub3-color-after,
.bg-triangle-left-bottom-sub3-color-after {
    position: relative;
}

.bg-triangle-left-top-sub3-color-before::before,
.bg-triangle-right-top-sub3-color-before::before,
.bg-triangle-left-bottom-sub3-color-after::after,
.bg-triangle-right-bottom-sub3-color-after::after {
    content: "";
    width: 100%;
    height: 15%;
    max-height: 5rem;
    position: absolute;
    z-index: 2;
}

.bg-triangle-right-top-sub3-color-before::before {
    top: 0;
    left: 0;
    background: linear-gradient(to left bottom, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-left-top-sub3-color-before::before {
    top: 0;
    right: 0;
    background: linear-gradient(to right bottom, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-right-bottom-sub3-color-after::after {
    bottom: 0;
    left: 0;
    background: linear-gradient(to left top, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
}

.bg-triangle-left-bottom-sub3-color-after::after {
    bottom: 0;
    right: 0;
    background: linear-gradient(to right top, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
}




.bg_main_color.next::before {
    border-left-color: #fff;
}

.bg_sub1_color.next::before {
    border-left-color: #c5c5c5;
}

.bg_sub2_color.next::before {
    border-left-color: #555555;
}

.bg_sub3_color.next::before {
    border-left-color: rgb(33, 33, 33);
}

.bg_main_color.prev::after {
    border-right-color: #fff;
}

.bg_sub1_color.prev::after {
    border-right-color: #c5c5c5;
}

.bg_sub2_color.prev::after {
    border-right-color: #555555;
}

.bg_sub3_color.prev::after {
    border-right-color: rgb(33, 33, 33);
}


.badge {
    position: absolute;
    display: table;
    width: 284px;
    height: 284px;
    text-align: center;
}

.badge::before,
.badge::after {
    position: absolute;
    content: "";
}

.badge_inner {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    z-index: 2;
    -webkit-animation: badgeAnime 22s linear infinite;
    animation: badgeAnime 22s linear infinite;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.badge_inner::before {
    position: absolute;
    content: "";
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2;
}

.badge_ttl {
    position: relative;
    font-size: 1.7rem;
    z-index: 2;
}

.badge_text {
    position: relative;
    font-size: 0.8rem;
    z-index: 2;
}

.badge_main,
.badge_sub1,
.badge_sub2,
.badge_sub3 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.badge_main_left,
.badge_sub1_left,
.badge_sub2_left,
.badge_sub3_left {
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
}

.badge_main_right,
.badge_sub1_right,
.badge_sub2_right,
.badge_sub3_right {
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
}

.badge_left::before,
.badge_right::after {
    width: 170px;
    height: 170px;
    border: 2px solid #fff;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    z-index: 3;
}

.badge_left::before {
    top: 40px;
    left: 28px;
}

.badge_right::after {
    top: 40px;
    left: 80px;
}

.badge_main .badge_inner::before,
.badge_sub1 .badge_inner::before,
.badge_sub2 .badge_inner::before,
.badge_sub3 .badge_inner::before {
    top: 40px;
    left: 50px;
    width: 170px;
    height: 170px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.badge_main .badge_inner::before {
    background: #fff;
}

.badge_sub1 .badge_inner::before {
    background: #c5c5c5;
}

.badge_sub2 .badge_inner::before {
    background: #555555;
}

.badge_sub3 .badge_inner::before {
    background: rgb(33, 33, 33);
}

.skew_left_main {
    background-image: -webkit-linear-gradient(20deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
    background-image: linear-gradient(290deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
}

.skew_right_main {
    background-image: -webkit-linear-gradient(20deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
    background-image: linear-gradient(70deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
}

.skew_left_sub1 {
    background-image: -webkit-linear-gradient(20deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
    background-image: linear-gradient(290deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
}

.skew_right_sub1 {
    background-image: -webkit-linear-gradient(20deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
    background-image: linear-gradient(70deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
}

.skew_left_sub2 {
    background-image: -webkit-linear-gradient(20deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
    background-image: linear-gradient(290deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
}

.skew_right_sub2 {
    background-image: -webkit-linear-gradient(20deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
    background-image: linear-gradient(70deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
}

.skew_left_sub3 {
    background-image: -webkit-linear-gradient(20deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
    background-image: linear-gradient(290deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
}

.skew_right_sub3 {
    background-image: -webkit-linear-gradient(20deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
    background-image: linear-gradient(70deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
}

.title_main_stripe,
.title_sub1_stripe,
.title_sub2_stripe,
.title_sub3_stripe,
.title_sub1_sub2_stripe {
    position: relative;
    padding: 1.5rem 0rem
}

.title_main_stripe::after,
.title_sub1_stripe::after,
.title_sub2_stripe::after,
.title_sub3_stripe::after,
.title_sub1_sub2_stripe::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1rem;
    content: '';
    background-size: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.title_sub1_sub2_stripe::after {
    background-image: -webkit-repeating-linear-gradient(135deg, #c5c5c5, #c5c5c5 5px, rgba(0, 0, 0, 0) 6px, rgba(0, 0, 0, 0) 16px, #555555 16px, #555555 21px, rgba(0, 0, 0, 0) 22px, rgba(0, 0, 0, 0) 32px);
    background-image: repeating-linear-gradient(-45deg, #c5c5c5, #c5c5c5 5px, rgba(0, 0, 0, 0) 6px, rgba(0, 0, 0, 0) 16px, #555555 16px, #555555 21px, rgba(0, 0, 0, 0) 22px, rgba(0, 0, 0, 0) 32px);
}

.title_main_stripe::after {
    background-image: -webkit-repeating-linear-gradient(135deg, #fff, #fff 1px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 5px);
    background-image: repeating-linear-gradient(-45deg, #fff, #fff 1px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 5px);
}

.title_sub1_stripe::after {
    background-image: -webkit-repeating-linear-gradient(135deg, #c5c5c5, #c5c5c5 1px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 5px);
    background-image: repeating-linear-gradient(-45deg, #c5c5c5, #c5c5c5 1px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 5px);
}

.title_sub2_stripe::after {
    background-image: -webkit-repeating-linear-gradient(135deg, #555555, #555555 1px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 5px);
    background-image: repeating-linear-gradient(-45deg, #555555, #555555 1px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 5px);
}

.title_sub3_stripe::after {
    background-image: -webkit-repeating-linear-gradient(135deg, rgb(33, 33, 33), rgb(33, 33, 33) 1px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 5px);
    background-image: repeating-linear-gradient(-45deg, rgb(33, 33, 33), rgb(33, 33, 33) 1px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 5px);
}

.clip-box.clip-box-main {
    border-color: #fff;
}

.clip-box.clip-box-sub1 {
    border-color: #c5c5c5;
}

.clip-box.clip-box-sub2 {
    border-color: #555555;
}

.clip-box.clip-box-sub3 {
    border-color: rgb(33, 33, 33);
}

.clip-box.clip-box-main::before {
    border-color: #fff;
}

.clip-box.clip-box-sub1::before {
    border-color: #c5c5c5;
}

.clip-box.clip-box-sub2::before {
    border-color: #555555;
}

.clip-box.clip-box-sub3::before {
    border-color: rgb(33, 33, 33);
}

.main_trapezoid,
.sub1_trapezoid,
.sub2_trapezoid,
.sub3_trapezoid {
    position: relative;
}

.main_trapezoid::before,
.sub1_trapezoid::before,
.sub2_trapezoid::before,
.sub3_trapezoid::before,
.main_trapezoid::after,
.sub1_trapezoid::after,
.sub2_trapezoid::after,
.sub3_trapezoid::after {
    content: "";
    position: absolute;
    width: 30%;
    height: 100%;
    top: 0;
    z-index: 1;
}

.main_trapezoid::before,
.sub1_trapezoid::before,
.sub2_trapezoid::before,
.sub3_trapezoid::before {
    left: -30%;
}

.main_trapezoid::after,
.sub1_trapezoid::after,
.sub2_trapezoid::after,
.sub3_trapezoid::after {
    right: -30%;
}

.sub1_trapezoid::before {
    background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
}

.sub1_trapezoid::after {
    background-image: -webkit-linear-gradient(bottom right, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
}

.sub2_trapezoid::before {
    background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #555555 50%);
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #555555 50%);
}

.sub2_trapezoid::after {
    background-image: -webkit-linear-gradient(bottom right, rgba(0, 0, 0, 0) 50%, #555555 50%);
    background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #555555 50%);
}

.sub3_trapezoid::before {
    background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, rgb(33, 33, 33) 50%);
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, rgb(33, 33, 33) 50%);
}

.sub3_trapezoid::after {
    background-image: -webkit-linear-gradient(bottom right, rgba(0, 0, 0, 0) 50%, rgb(33, 33, 33) 50%);
    background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, rgb(33, 33, 33) 50%);
}



.text_cover.cover_main_color::before,
.text_cover.cover_sub1_color::before,
.text_cover.cover_sub2_color::before,
.text_cover.cover_sub3_color::before {
    position: absolute;
    top: 0%;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: text_cover 1.4s ease;
    animation-fill-mode: both;
    transform: translate3d(0, 0, 0);
}

.text_cover.cover_main_color::before {
    background-color: #fff;
}

.text_cover.cover_sub1_color::before {
    background-color: #c5c5c5;
}

.text_cover.cover_sub2_color::before {
    background-color: #555555;
}

.text_cover.cover_sub3_color::before {
    background-color: rgb(33, 33, 33);
}


.left_center_main_color_triangle,
.left_center_sub1_color_triangle,
.left_center_sub2_color_triangle,
.left_center_sub3_color_triangle,
.right_center_main_color_triangle,
.right_center_sub1_color_triangle,
.right_center_sub2_color_triangle,
.right_center_sub3_color_triangle {
    position: relative;
}

.left_center_main_color_triangle::before,
.left_center_sub1_color_triangle::before,
.left_center_sub2_color_triangle::before,
.left_center_sub3_color_triangle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-2rem * 1.5);
    width: 0;
    height: 0;
    border-top: 2rem solid rgba(0, 0, 0, 0);
    border-bottom: 2rem solid rgba(0, 0, 0, 0);
    border-left: 0;
    z-index: 1;
    transform: translate(0, -50%);
}

.left_center_main_color_triangle::before {
    border-right: calc(2rem * 1.5) solid #fff;
}

.left_center_sub1_color_triangle::before {
    border-right: calc(2rem * 1.5) solid #c5c5c5;
}

.left_center_sub2_color_triangle::before {
    border-right: calc(2rem * 1.5) solid #555555;
}

.left_center_sub3_color_triangle::before {
    border-right: calc(2rem * 1.5) solid rgb(33, 33, 33);
}

.right_center_main_color_triangle::before,
.right_center_sub1_color_triangle::before,
.right_center_sub2_color_triangle::before,
.right_center_sub3_color_triangle::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-2rem * 1.5);
    width: 0;
    height: 0;
    border-top: 2rem solid rgba(0, 0, 0, 0);
    border-right: 0;
    border-bottom: 2rem solid rgba(0, 0, 0, 0);
    z-index: 1;
    transform: translate(0, -50%);
}

.right_center_main_color_triangle::before {
    border-left: calc(2rem * 1.5) solid #fff;
}

.right_center_sub1_color_triangle::before {
    border-left: calc(2rem * 1.5) solid #c5c5c5;
}

.right_center_sub2_color_triangle::before {
    border-left: calc(2rem * 1.5) solid #555555;
}

.right_center_sub3_color_triangle::before {
    border-left: calc(2rem * 1.5) solid rgb(33, 33, 33);
}

span.next,
span.prev {
    display: table;
    margin: auto;
    text-align: left;
    /* 親要素に text-align: center が効いている場合はこちらも */
}

li.next,
li.prev {
    position: relative;
}

li.next::before,
li.next::after,
li.prev::before,
li.prev::after {
    content: "";
    position: absolute;
    height: 50%;
    width: 1.5rem;
    /* transform: translateY(-50%); */
}

li.next::before {
    top: 0;
    right: -1.5rem;
    background-image: -webkit-linear-gradient(top right, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    background-image: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
}

li.next::after {
    top: 50%;
    right: -1.5rem;
    background-image: -webkit-linear-gradient(bottom right, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
}

li.prev::before {
    top: 0;
    left: -1.5rem;
    background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
}

li.prev::after {
    top: 50%;
    left: -1.5rem;
    background-image: -webkit-linear-gradient(bottom left, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    background-image: linear-gradient(to right top, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
}

.news_link {
	display: inline-block;
	max-width: 100%;
	word-break: break-all;
    word-wrap: break-word;
}


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

    .left_center_main_color_triangle::before,
    .left_center_sub1_color_triangle::before,
    .left_center_sub2_color_triangle::before,
    .left_center_sub3_color_triangle::before {
        content: "";
        position: absolute;
        top: calc(-2rem * 1.5);
        left: 50%;
        z-index: 1;
        transform: translate(-50%, 0);
        border-left: 2rem solid rgba(0, 0, 0, 0);
        border-right: 2rem solid rgba(0, 0, 0, 0);
        border-top: 0;
    }

    .right_center_main_color_triangle::before,
    .right_center_sub1_color_triangle::before,
    .right_center_sub2_color_triangle::before,
    .right_center_sub3_color_triangle::before {
        top: calc(-2rem * 1.5);
        right: 50%;
        transform: translate(50%, 0);
        border-left: 2rem solid rgba(0, 0, 0, 0);
        border-right: 2rem solid rgba(0, 0, 0, 0);
        border-top: 0;
    }

    .left_center_main_color_triangle::before,
    .right_center_main_color_triangle::before {
        border-bottom: calc(2rem * 1.5) solid #fff;
    }

    .left_center_sub1_color_triangle::before,
    .right_center_sub1_color_triangle::before {
        border-bottom: calc(2rem * 1.5) solid #c5c5c5;
    }

    .left_center_sub2_color_triangle::before,
    .right_center_sub2_color_triangle::before {
        border-bottom: calc(2rem * 1.5) solid #555555;
    }

    .left_center_sub3_color_triangle::before,
    .right_center_sub3_color_triangle::before {
        border-bottom: calc(2rem * 1.5) solid rgb(33, 33, 33);
    }
}








.bg_image_none {
    background-image: none !important;
}

@media screen and (min-width:1200px) {
    .xl_bg_transparent_color {
        background-color: rgba(0, 0, 0, 0) !important;
    }

    .xl_bg_main_color {
        background-color: #fff !important;
    }

    .xl_main_color-f,
    .xl_main_color-f:hover {
        color: #fff !important;
    }

    .xl_main_border_color {
        border-color: #fafafa !important;
    }

    .xl_bg_sub1_color {
        background-color: #c5c5c5 !important;
    }

    .xl_sub1_color-f,
    .xl_sub1_color-f:hover {
        color: #c5c5c5 !important;
    }

    .xl_sub1_border_color {
        border-color: #c5c5c5 !important;
    }

    .xl_bg_sub2_color {
        background-color: #555555 !important;
    }

    .xl_sub2_color-f,
    .xl_sub2_color-f:hover {
        color: #555555 !important;
    }

    .xl_sub2_border_color {
        border-color: #555555 !important;
    }

    .xl_skew_left_main {
        background-image: -webkit-linear-gradient(20deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .xl_skew_right_main {
        background-image: -webkit-linear-gradient(20deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .xl_skew_left_sub1 {
        background-image: -webkit-linear-gradient(20deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .xl_skew_right_sub1 {
        background-image: -webkit-linear-gradient(20deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .xl_skew_left_sub2 {
        background-image: -webkit-linear-gradient(20deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .xl_skew_right_sub2 {
        background-image: -webkit-linear-gradient(20deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .xl_skew_left_sub3 {
        background-image: -webkit-linear-gradient(20deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .xl_skew_right_sub3 {
        background-image: -webkit-linear-gradient(20deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .xl_bg_image_none {
        background-image: none !important;
    }

    .xl_bg-triangle-right-top-main-color-before,
    .xl_bg-triangle-left-top-main-color-before,
    .xl_bg-triangle-right-bottom-main-color-after,
    .xl_bg-triangle-left-bottom-main-color-after {
        position: relative;
    }

    .xl_bg-triangle-left-top-main-color-before::before,
    .xl_bg-triangle-right-top-main-color-before::before,
    .xl_bg-triangle-left-bottom-main-color-after::after,
    .xl_bg-triangle-right-bottom-main-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .xl_bg-triangle-right-top-main-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-left-top-main-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-right-bottom-main-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-left-bottom-main-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-right-top-sub1-color-before,
    .xl_bg-triangle-left-top-sub1-color-before,
    .xl_bg-triangle-right-bottom-sub1-color-after,
    .xl_bg-triangle-left-bottom-sub1-color-after {
        position: relative;
    }

    .xl_bg-triangle-left-top-sub1-color-before::before,
    .xl_bg-triangle-right-top-sub1-color-before::before,
    .xl_bg-triangle-left-bottom-sub1-color-after::after,
    .xl_bg-triangle-right-bottom-sub1-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .xl_bg-triangle-right-top-sub1-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-left-top-sub1-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-right-bottom-sub1-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-left-bottom-sub1-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-right-top-sub2-color-before,
    .xl_bg-triangle-left-top-sub2-color-before,
    .xl_bg-triangle-right-bottom-sub2-color-after,
    .xl_bg-triangle-left-bottom-sub2-color-after {
        position: relative;
    }

    .xl_bg-triangle-left-top-sub2-color-before::before,
    .xl_bg-triangle-right-top-sub2-color-before::before,
    .xl_bg-triangle-left-bottom-sub2-color-after::after,
    .xl_bg-triangle-right-bottom-sub2-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .xl_bg-triangle-right-top-sub2-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-left-top-sub2-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-right-bottom-sub2-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-left-bottom-sub2-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-right-top-sub3-color-before,
    .xl_bg-triangle-left-top-sub3-color-before,
    .xl_bg-triangle-right-bottom-sub3-color-after,
    .xl_bg-triangle-left-bottom-sub3-color-after {
        position: relative;
    }

    .xl_bg-triangle-left-top-sub3-color-before::before,
    .xl_bg-triangle-right-top-sub3-color-before::before,
    .xl_bg-triangle-left-bottom-sub3-color-after::after,
    .xl_bg-triangle-right-bottom-sub3-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .xl_bg-triangle-right-top-sub3-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-left-top-sub3-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-right-bottom-sub3-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_bg-triangle-left-bottom-sub3-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .xl_badge_main_left,
    .xl_badge_sub1_left,
    .xl_badge_sub2_left {
        top: 50%;
        left: 0%;
        transform: translate(0%, -50%);
    }

    .xl_badge_main_right,
    .xl_badge_sub1_right,
    .xl_badge_sub2_right {
        top: 50%;
        left: 0%;
        transform: translate(0%, -50%);
    }

    .xl_main_btn_sharp {
        position: relative;
    }

    .xl_sub1_btn_sharp {
        position: relative;
    }

    .xl_sub2_btn_sharp {
        position: relative;
    }

    .xl_main_btn_sharp::before {
        background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #fff 50%);
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #fff 50%);
    }

    .xl_main_btn_sharp::after {
        background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #fff 50%);
        background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #fff 50%);
    }

    .xl_sub1_btn_sharp::before {
        background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    }

    .xl_sub1_btn_sharp::after {
        background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
        background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    }

    .xl_sub2_btn_sharp::before {
        background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #555555 50%);
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #555555 50%);
    }

    .xl_sub2_btn_sharp::after {
        background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #555555 50%);
        background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #555555 50%);
    }


}

@media screen and (min-width:992px) {
    .lg_bg_transparent_color {
        background-color: rgba(0, 0, 0, 0) !important;
    }

    .lg_bg_main_color {
        background-color: #fff !important;
    }

    .lg_main_color-f,
    .lg_main_color-f:hover {
        color: #fff !important;
    }

    .lg_main_border_color {
        border-color: #fafafa !important;
    }

    .lg_bg_sub1_color {
        background-color: #c5c5c5 !important;
    }

    .lg_sub1_color-f,
    .lg_sub1_color-f:hover {
        color: #c5c5c5 !important;
    }

    .lg_sub1_border_color {
        border-color: #c5c5c5 !important;
    }

    .lg_bg_sub2_color {
        background-color: #555555 !important;
    }

    .lg_sub2_color-f,
    .lg_sub2_color-f:hover {
        color: #555555 !important;
    }

    .lg_sub2_border_color {
        border-color: #555555 !important;
    }

    .lg_skew_left_main {
        background-image: -webkit-linear-gradient(20deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .lg_skew_right_main {
        background-image: -webkit-linear-gradient(20deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .lg_skew_left_sub1 {
        background-image: -webkit-linear-gradient(20deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .lg_skew_right_sub1 {
        background-image: -webkit-linear-gradient(20deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .lg_skew_left_sub2 {
        background-image: -webkit-linear-gradient(20deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .lg_skew_right_sub2 {
        background-image: -webkit-linear-gradient(20deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .lg_skew_left_sub3 {
        background-image: -webkit-linear-gradient(20deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .lg_skew_right_sub3 {
        background-image: -webkit-linear-gradient(20deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .lg_bg-triangle-right-top-main-color-before,
    .lg_bg-triangle-left-top-main-color-before,
    .lg_bg-triangle-right-bottom-main-color-after,
    .lg_bg-triangle-left-bottom-main-color-after {
        position: relative;
    }

    .lg_bg-triangle-left-top-main-color-before::before,
    .lg_bg-triangle-right-top-main-color-before::before,
    .lg_bg-triangle-left-bottom-main-color-after::after,
    .lg_bg-triangle-right-bottom-main-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .lg_bg-triangle-right-top-main-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-left-top-main-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-right-bottom-main-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-left-bottom-main-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-right-top-sub1-color-before,
    .lg_bg-triangle-left-top-sub1-color-before,
    .lg_bg-triangle-right-bottom-sub1-color-after,
    .lg_bg-triangle-left-bottom-sub1-color-after {
        position: relative;
    }

    .lg_bg-triangle-left-top-sub1-color-before::before,
    .lg_bg-triangle-right-top-sub1-color-before::before,
    .lg_bg-triangle-left-bottom-sub1-color-after::after,
    .lg_bg-triangle-right-bottom-sub1-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .lg_bg-triangle-right-top-sub1-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-left-top-sub1-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-right-bottom-sub1-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-left-bottom-sub1-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-right-top-sub2-color-before,
    .lg_bg-triangle-left-top-sub2-color-before,
    .lg_bg-triangle-right-bottom-sub2-color-after,
    .lg_bg-triangle-left-bottom-sub2-color-after {
        position: relative;
    }

    .lg_bg-triangle-left-top-sub2-color-before::before,
    .lg_bg-triangle-right-top-sub2-color-before::before,
    .lg_bg-triangle-left-bottom-sub2-color-after::after,
    .lg_bg-triangle-right-bottom-sub2-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .lg_bg-triangle-right-top-sub2-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-left-top-sub2-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-right-bottom-sub2-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-left-bottom-sub2-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-right-top-sub3-color-before,
    .lg_bg-triangle-left-top-sub3-color-before,
    .lg_bg-triangle-right-bottom-sub3-color-after,
    .lg_bg-triangle-left-bottom-sub3-color-after {
        position: relative;
    }

    .lg_bg-triangle-left-top-sub3-color-before::before,
    .lg_bg-triangle-right-top-sub3-color-before::before,
    .lg_bg-triangle-left-bottom-sub3-color-after::after,
    .lg_bg-triangle-right-bottom-sub3-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .lg_bg-triangle-right-top-sub3-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-left-top-sub3-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-right-bottom-sub3-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg-triangle-left-bottom-sub3-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .lg_bg_image_none {
        background-image: none !important;
    }

    .lg_badge_main_left,
    .lg_badge_sub1_left,
    .lg_badge_sub2_left {
        top: 50%;
        left: 0%;
        transform: translate(0%, -50%);
    }

    .lg_badge_main_right,
    .lg_badge_sub1_right,
    .lg_badge_sub2_right {
        top: 50%;
        left: 0%;
        transform: translate(0%, -50%);
    }

    .lg_main_btn_sharp {
        position: relative;
    }

    .lg_sub1_btn_sharp {
        position: relative;
    }

    .lg_sub2_btn_sharp {
        position: relative;
    }

    .lg_main_btn_sharp::before {
        background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #fff 50%);
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #fff 50%);
    }

    .lg_main_btn_sharp::after {
        background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #fff 50%);
        background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #fff 50%);
    }

    .lg_sub1_btn_sharp::before {
        background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    }

    .lg_sub1_btn_sharp::after {
        background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
        background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    }

    .lg_sub2_btn_sharp::before {
        background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #555555 50%);
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #555555 50%);
    }

    .lg_sub2_btn_sharp::after {
        background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #555555 50%);
        background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #555555 50%);
    }

}

@media screen and (min-width:768px) {
    .md_bg_transparent_color {
        background-color: rgba(0, 0, 0, 0) !important;
    }

    .md_bg_main_color {
        background-color: #fff !important;
    }

    .md_main_color-f,
    .md_main_color-f:hover {
        color: #fff !important;
    }

    .md_main_border_color {
        border-color: #fafafa !important;
    }

    .md_bg_sub1_color {
        background-color: #c5c5c5 !important;
    }

    .md_sub1_color-f,
    .md_sub1_color-f:hover {
        color: #c5c5c5 !important;
    }

    .md_sub1_border_color {
        border-color: #c5c5c5 !important;
    }

    .md_bg_sub2_color {
        background-color: #555555 !important;
    }

    .md_sub2_color-f,
    .md_sub2_color-f:hover {
        color: #555555 !important;
    }

    .md_sub2_border_color {
        border-color: #555555 !important;
    }

    .md_skew_left_main {
        background-image: -webkit-linear-gradient(20deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .md_skew_right_main {
        background-image: -webkit-linear-gradient(20deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .md_skew_left_sub1 {
        background-image: -webkit-linear-gradient(20deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .md_skew_right_sub1 {
        background-image: -webkit-linear-gradient(20deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .md_skew_left_sub2 {
        background-image: -webkit-linear-gradient(20deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .md_skew_right_sub2 {
        background-image: -webkit-linear-gradient(20deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .md_skew_left_sub3 {
        background-image: -webkit-linear-gradient(20deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .md_skew_right_sub3 {
        background-image: -webkit-linear-gradient(20deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .md_bg-triangle-right-top-main-color-before,
    .md_bg-triangle-left-top-main-color-before,
    .md_bg-triangle-right-bottom-main-color-after,
    .md_bg-triangle-left-bottom-main-color-after {
        position: relative;
    }

    .md_bg-triangle-left-top-main-color-before::before,
    .md_bg-triangle-right-top-main-color-before::before,
    .md_bg-triangle-left-bottom-main-color-after::after,
    .md_bg-triangle-right-bottom-main-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .md_bg-triangle-right-top-main-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-left-top-main-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-right-bottom-main-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-left-bottom-main-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-right-top-sub1-color-before,
    .md_bg-triangle-left-top-sub1-color-before,
    .md_bg-triangle-right-bottom-sub1-color-after,
    .md_bg-triangle-left-bottom-sub1-color-after {
        position: relative;
    }

    .md_bg-triangle-left-top-sub1-color-before::before,
    .md_bg-triangle-right-top-sub1-color-before::before,
    .md_bg-triangle-left-bottom-sub1-color-after::after,
    .md_bg-triangle-right-bottom-sub1-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .md_bg-triangle-right-top-sub1-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-left-top-sub1-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-right-bottom-sub1-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-left-bottom-sub1-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-right-top-sub2-color-before,
    .md_bg-triangle-left-top-sub2-color-before,
    .md_bg-triangle-right-bottom-sub2-color-after,
    .md_bg-triangle-left-bottom-sub2-color-after {
        position: relative;
    }

    .md_bg-triangle-left-top-sub2-color-before::before,
    .md_bg-triangle-right-top-sub2-color-before::before,
    .md_bg-triangle-left-bottom-sub2-color-after::after,
    .md_bg-triangle-right-bottom-sub2-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .md_bg-triangle-right-top-sub2-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-left-top-sub2-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-right-bottom-sub2-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-left-bottom-sub2-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-right-top-sub3-color-before,
    .md_bg-triangle-left-top-sub3-color-before,
    .md_bg-triangle-right-bottom-sub3-color-after,
    .md_bg-triangle-left-bottom-sub3-color-after {
        position: relative;
    }

    .md_bg-triangle-left-top-sub3-color-before::before,
    .md_bg-triangle-right-top-sub3-color-before::before,
    .md_bg-triangle-left-bottom-sub3-color-after::after,
    .md_bg-triangle-right-bottom-sub3-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .md_bg-triangle-right-top-sub3-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-left-top-sub3-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-right-bottom-sub3-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg-triangle-left-bottom-sub3-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .md_bg_image_none {
        background-image: none !important;
    }

    .md_badge_main_left,
    .md_badge_sub1_left,
    .md_badge_sub2_left {
        top: 50%;
        left: 0%;
        transform: translate(0%, -50%);
    }

    .md_badge_main_right,
    .md_badge_sub1_right,
    .md_badge_sub2_right {
        top: 50%;
        left: 0%;
        transform: translate(0%, -50%);
    }

    .md_main_btn_sharp {
        position: relative;
    }

    .md_sub1_btn_sharp {
        position: relative;
    }

    .md_sub2_btn_sharp {
        position: relative;
    }

    .md_main_btn_sharp::before {
        background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #fff 50%);
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #fff 50%);
    }

    .md_main_btn_sharp::after {
        background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #fff 50%);
        background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #fff 50%);
    }

    .md_sub1_btn_sharp::before {
        background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    }

    .md_sub1_btn_sharp::after {
        background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
        background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    }

    .md_sub2_btn_sharp::before {
        background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #555555 50%);
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #555555 50%);
    }

    .md_sub2_btn_sharp::after {
        background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #555555 50%);
        background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #555555 50%);
    }
}

@media screen and (min-width:568px) {
    .sm_bg_transparent_color {
        background-color: rgba(0, 0, 0, 0) !important;
    }

    .sm_bg_main_color {
        background-color: #fff !important;
    }

    .sm_main_color-f,
    .sm_main_color-f:hover {
        color: #fff !important;
    }

    .sm_main_border_color {
        border-color: #fafafa !important;
    }

    .sm_bg_sub1_color {
        background-color: #c5c5c5 !important;
    }

    .sm_sub1_color-f,
    .sm_sub1_color-f:hover {
        color: #c5c5c5 !important;
    }

    .sm_sub1_border_color {
        border-color: #c5c5c5 !important;
    }

    .sm_bg_sub2_color {
        background-color: #555555 !important;
    }

    .sm_sub2_color-f,
    .sm_sub2_color-f:hover {
        color: #555555 !important;
    }

    .sm_sub2_border_color {
        border-color: #555555 !important;
    }

    .sm_skew_left_main {
        background-image: -webkit-linear-gradient(20deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .sm_skew_right_main {
        background-image: -webkit-linear-gradient(20deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, #fff 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .sm_skew_left_sub1 {
        background-image: -webkit-linear-gradient(20deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .sm_skew_right_sub1 {
        background-image: -webkit-linear-gradient(20deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, #c5c5c5 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .sm_skew_left_sub2 {
        background-image: -webkit-linear-gradient(20deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .sm_skew_right_sub2 {
        background-image: -webkit-linear-gradient(20deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, #555555 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .sm_skew_left_sub3 {
        background-image: -webkit-linear-gradient(20deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(290deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .sm_skew_right_sub3 {
        background-image: -webkit-linear-gradient(20deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
        background-image: linear-gradient(70deg, rgb(33, 33, 33) 70%, rgba(0, 0, 0, 0) 70%) !important;
    }

    .sm_bg-triangle-right-top-main-color-before,
    .sm_bg-triangle-left-top-main-color-before,
    .sm_bg-triangle-right-bottom-main-color-after,
    .sm_bg-triangle-left-bottom-main-color-after {
        position: relative;
    }

    .sm_bg-triangle-left-top-main-color-before::before,
    .sm_bg-triangle-right-top-main-color-before::before,
    .sm_bg-triangle-left-bottom-main-color-after::after,
    .sm_bg-triangle-right-bottom-main-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .sm_bg-triangle-right-top-main-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-left-top-main-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-right-bottom-main-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-left-bottom-main-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, #fff 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-right-top-sub1-color-before,
    .sm_bg-triangle-left-top-sub1-color-before,
    .sm_bg-triangle-right-bottom-sub1-color-after,
    .sm_bg-triangle-left-bottom-sub1-color-after {
        position: relative;
    }

    .sm_bg-triangle-left-top-sub1-color-before::before,
    .sm_bg-triangle-right-top-sub1-color-before::before,
    .sm_bg-triangle-left-bottom-sub1-color-after::after,
    .sm_bg-triangle-right-bottom-sub1-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .sm_bg-triangle-right-top-sub1-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-left-top-sub1-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-right-bottom-sub1-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-left-bottom-sub1-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, #c5c5c5 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-right-top-sub2-color-before,
    .sm_bg-triangle-left-top-sub2-color-before,
    .sm_bg-triangle-right-bottom-sub2-color-after,
    .sm_bg-triangle-left-bottom-sub2-color-after {
        position: relative;
    }

    .sm_bg-triangle-left-top-sub2-color-before::before,
    .sm_bg-triangle-right-top-sub2-color-before::before,
    .sm_bg-triangle-left-bottom-sub2-color-after::after,
    .sm_bg-triangle-right-bottom-sub2-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .sm_bg-triangle-right-top-sub2-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-left-top-sub2-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-right-bottom-sub2-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-left-bottom-sub2-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, #555555 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-right-top-sub3-color-before,
    .sm_bg-triangle-left-top-sub3-color-before,
    .sm_bg-triangle-right-bottom-sub3-color-after,
    .sm_bg-triangle-left-bottom-sub3-color-after {
        position: relative;
    }

    .sm_bg-triangle-left-top-sub3-color-before::before,
    .sm_bg-triangle-right-top-sub3-color-before::before,
    .sm_bg-triangle-left-bottom-sub3-color-after::after,
    .sm_bg-triangle-right-bottom-sub3-color-after::after {
        content: "";
        width: 100%;
        height: 15%;
        position: absolute;
        z-index: 2;
    }

    .sm_bg-triangle-right-top-sub3-color-before::before {
        top: 0;
        left: 0;
        background: linear-gradient(to left bottom, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-left-top-sub3-color-before::before {
        top: 0;
        right: 0;
        background: linear-gradient(to right bottom, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-right-bottom-sub3-color-after::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(to left top, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg-triangle-left-bottom-sub3-color-after::after {
        bottom: 0;
        right: 0;
        background: linear-gradient(to right top, rgb(33, 33, 33) 49.5%, rgba(0, 0, 0, 0) 50%);
    }

    .sm_bg_image_none {
        background-image: none !important;
    }

    .sm_badge_main_left,
    .sm_badge_sub1_left,
    .sm_badge_sub2_left {
        top: 50%;
        left: 0%;
        transform: translate(0%, -50%);
    }

    .sm_badge_main_right,
    .sm_badge_sub1_right,
    .sm_badge_sub2_right {
        top: 50%;
        left: 0%;
        transform: translate(0%, -50%);
    }

    .sm_main_btn_sharp {
        position: relative;
    }

    .sm_sub1_btn_sharp {
        position: relative;
    }

    .sm_sub2_btn_sharp {
        position: relative;
    }

    .sm_main_btn_sharp::before {
        background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #fff 50%);
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #fff 50%);
    }

    .sm_main_btn_sharp::after {
        background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #fff 50%);
        background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #fff 50%);
    }

    .sm_sub1_btn_sharp::before {
        background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    }

    .sm_sub1_btn_sharp::after {
        background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
        background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #c5c5c5 50%);
    }

    .sm_sub2_btn_sharp::before {
        background-image: -webkit-linear-gradient(top left, rgba(0, 0, 0, 0) 50%, #555555 50%);
        background-image: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, #555555 50%);
    }

    .sm_sub2_btn_sharp::after {
        background-image: -webkit-linear-gradient(right bottom, rgba(0, 0, 0, 0) 50%, #555555 50%);
        background-image: linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, #555555 50%);
    }


}