/*==============================================================
*
*   padding
*
*==============================================================*/
.p0{ padding: 0; }
.p5{ padding: 5px; }
.p10{ padding: 10px; }
.p15{ padding: 15px; }
.p20{ padding: 20px; }
.p25{ padding: 25px; }
.p30{ padding: 30px; }
.p35{ padding: 35px; }
.p40{ padding: 40px; }
.p45{ padding: 45px; }
.p50{ padding: 50px; }

.py10{ padding-top: 10px; padding-bottom: 10px; }
.py15{ padding-top: 15px; padding-bottom: 15px; }
.py20{ padding-top: 20px; padding-bottom: 20px; }
.px8{ padding-left: 8px; padding-right: 8px; }
.px10{ padding-left: 10px; padding-right: 10px; }
.px20{ padding-left: 20px; padding-right: 20px; }

.pt7{ padding-top: 7px; }

.pb0{ padding-bottom: 0; }
.pb5{ padding-bottom: 5px; }
.pb10{ padding-bottom: 10px; }
.pb15{ padding-bottom: 15px; }
.pt40{ padding-top: 40px; }


/*==============================================================
*
*   margin
*
*==============================================================*/
.m0-auto{ margin: 0 auto; }
.my20{ margin-top: 20px; margin-bottom: 20px; }
.my40{ margin-top: 40px; margin-bottom: 40px; }

.mt-30{ margin-top: -30px; }
.mt5{ margin-top: 5px; }
.mt10{ margin-top: 10px; }
.mt15{ margin-top: 15px; }
.mt20{ margin-top: 20px; }
.mt30{ margin-top: 30px; }
.mt40{ margin-top: 40px; }

.mb-1{ margin-bottom: -1px; }
.mb5{ margin-bottom: 5px; }
.mb10{ margin-bottom: 10px; }
.mb15{ margin-bottom: 15px; }
.mb20{ margin-bottom: 20px; }
.mb30{ margin-bottom: 30px; }
.mb40{ margin-bottom: 40px; }

.mr5{ margin-right: 5px; }
.mr10{ margin-right: 10px; }
.mr15{ margin-right: 15px; }
.mr20{ margin-right: 20px; }

.ml3{ margin-left: 3px; }
.ml5{ margin-left: 5px; }
.ml10{ margin-left: 10px; }
.ml15{ margin-left: 15px; }
.ml20{ margin-left: 20px; }

/*==============================================================
*
*   width
*
*==============================================================*/
.w100{ width: 100%; }
.w50{ width: 50%; }
.w48{ width: 48%; }
.w25{ width: 25%; }
.w83{ width: 83%; }
.w120px{ width: 120px; }
.w-calc-120px{ width: calc(100% - 120px); }
.w-calc-80px{ width: calc(100% - 80px); }
.w-calc-140px{ width: calc(100% - 140px); }
.w90px{ width: 90px; }
.w130px{ width: 130px; }
.w140px{ width: 140px; }
.mw-140px{ max-width: 140px; }
.w-max-c{ width: max-content; }

.w126 {
    max-width: 1300px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

.w14 {
    max-width: 1440px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}

.w16 {
    max-width: 1640px;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
}
@media screen and (max-width:620px){
    .w14 {
        padding: 0 10px;
    }
}
/*==============================================================
*   parcent
*==============================================================*/
.wp30{
    width: 30%;
}
.wp68{
    width: 68%;
}
/*==============================================================
*
*   height
*
*==============================================================*/
.h100{ height: 100%; }
.h14px{ height: 14px; }
.h20px{ height: 20px; }
.h30px{ height: 30px; }
.h40px{ height: 40px; }
.mh127px{ min-height: 127px; }
.mh-n{ max-height: none; }
.mh120px{ max-height: 120px; }
.mh400px{ max-height: 400px; }

/*==============================================================
*
*   background
*
*==============================================================*/
.bg-color-main{
    background: var(--frame-color);
}
.bg-color-sub{
    background: var(--frame-color-sub);
}
.bg-color-cover{
    background: var(--cover-color);
}
.bg-blue{
    background: var(--blue);
}
.bg-none{
    background: none;
}
.bg-black-20{
    background: rgba(0,0,0,0.2);
}
.bg-white-08{
    background: #ffffff08;
}
.bg-grad-dark{
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgb(255 255 255 / 8%) 100%), #171a21;
}
.hover-bg-color-cover:hover{
    background: var(--cover-color);
}
.active-bg-color-cover.active{
    background: var(--cover-color);
}

/*==============================================================
*
*   color
*
*==============================================================*/
.c-white{ color: #fff; }
.c-black{ color: #333; }
.c-gray{ color: #999; }
.c-blue{ color: #6e8efb; }

/*==============================================================
*
*   position
*
*==============================================================*/
.posi-rel{
    position: relative;
}
.posi-ab{
    position: absolute;
}
.posi-st{
    position: sticky;
}
.top0{ top: 0; }
.left0{ left: 0; }
.top-5{ top: 5px; }

/*==============================================================
*
*   display
*
*==============================================================*/
.dis-b{ display: block; }
.dis-f{display: flex;}
.dis-n{ display: none; }
.dis-t{ display: table; }
.dis-tc{ display: table-cell; }
.dis-ib{ display: inline-block; }

/*==============================================================
*   flex
*==============================================================*/
.fl-wrap{
    flex-wrap: wrap;
}
.fl-jc-start{
    justify-content: flex-start;
}
.fl-jc-center{
    justify-content: center;
}
.fl-jc-end{
    justify-content: flex-end;
}
.fl-jc-between{
    justify-content: space-between;
}
.fl-ai-start{
    align-items: flex-start;
}
.fl-ai-center{
    align-items: center;
}
.fl-ai-end{
    align-items: flex-end;
}
.fl-flow-row{
    flex-flow: row;
}
.fl-flow-row-r{
    flex-flow: row-reverse;
}
.fl-flow-col{
    flex-flow: column;
}
.fl-flow-col-r{
    flex-flow: column-reverse;
}
.fl-shrink-0{ flex-shrink: 0; }

/*==============================================================
*
*   font
*
*==============================================================*/
.f-dot6r{ font-size: .6rem; }
.f-dot7r{ font-size: .7rem; }
.f-dot75r{ font-size: .75rem; }
.f-dot8r{ font-size: .8rem; }
.f-dot875r{ font-size: .875rem; }
.f-dot9r{ font-size: .9rem; }
.f-1r{ font-size: 1rem; }
.f-12r{ font-size: 1.2rem; }
.f-15r{ font-size: 1.5rem; }
.f-2r{ font-size: 2rem; }

.fw-b{ font-weight: bold; }
.fw-n{ font-weight: normal; }
.fw-600{ font-weight: 600; }
.active-fw-b.active{ font-weight: bold; }

.lh-1{ line-height: 1; }
.lh-14{ line-height: 1.4; }

.ta-c{ text-align: center; }
.ta-r{ text-align: right; }
.ta-l{ text-align: left; }

.ws-nw{ white-space: nowrap; }

/*==============================================================
*
*   border
*
*==============================================================*/
.br-2{ border-radius: 2px; }
.br-4{ border-radius: 4px; }
.br-50p{ border-radius: 50%; }
.bd-none{ border: none; }
.bd-b-none{ border-bottom: none; }
.bd-c-sub{ border-collapse: collapse; }
.bd-b-white-10{ border-bottom: 1px solid rgba(255,255,255,0.1); }
.bd-b-white-05{ border-bottom: 1px solid rgba(255,255,255,0.05); }

.bb-1-s{
    border-bottom: 1px solid #ffffff0d;
}
/*==============================================================
*
*   overflow
*
*==============================================================*/
.ov-h{ overflow: hidden; }
.ov-x-s{ overflow-x: scroll; }
.ov-y-h{ overflow-y: hidden; }

/*==============================================================
*
*   cursor
*
*==============================================================*/
.cu-p{ cursor: pointer; }
.pe-n{ pointer-events: none; }
.pe-a{ pointer-events: all; }

/*==============================================================
*
*   transition
*
*==============================================================*/
.tr-all-3s{ transition: ease all .3s; }
.tr-all-4s{ transition: ease all .4s; }

/*==============================================================
*
*   opacity
*
*==============================================================*/
.op0{ opacity: 0; }
.op1{ opacity: 1; }
.hover-op7:hover{ opacity: .7; }

/*==============================================================
*
*   z-index
*
*==============================================================*/
.z-1{ z-index: 1; }
.z-2{ z-index: 2; }
.z-10{ z-index: 10; }

/*==============================================================
*
*   object-fit
*
*==============================================================*/
.object-fit-cover{ object-fit: cover; }
.object-fit-contain{ object-fit: contain; }

/*==============================================================
*
*   column
*
*==============================================================*/
.col2-left{
    width: 30%;
    height: 100%;
}
.col2-right {
    width: 68%;
    max-width: calc(100% - 380px);
}

/*==============================================================
*
*   Custom Scrollbar
*
*==============================================================*/
.custom-scroll::-webkit-scrollbar {
    height: 2px;
    left: 0;
}
.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background: #8d99a1;
    border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #8d99a1;
}
.custom-scroll-none::-webkit-scrollbar {
    width: 0;
    height: 0;
}