:root {
  --dark-gray: #6E6E6F;
  --icon-primar: #444;

  --border: #E9E9E9;
  --line-color: #E0E0E0;

  --background_color_1: #F9F9FA;
  --background_color_2: #F5F5F7;

  --text-primary: #111;
  --text-secondary: #666;
  --text-disabled: #999;

  --button-gray: #EAEAEB;

  --main-color: #3BAC59;
  --main-color_2: #70589D;
}

/* layout */
.full_container .inner_container {margin: 0 auto; width: 90%;}

@media screen and (min-width: 1921px) {
  .full_container .inner_container {max-width: 66.67vw;}
}

@media screen and (max-width: 1920px) {
  .full_container .inner_container {max-width: 1280px;}
}

.mo_only {display: none;}
.pc_only {display: block;}

@media screen and (max-width: 481px) {
  .mo_only {display: block;}
  .pc_only {display: none;}
}


.block {display: block;}
.inline_block {display: inline-block;}
.relative {position: relative;}
.absolute {position: absolute;}

img {max-width: 100%; width: 100%;}

/* margin & padding */
.mgt_10 {margin-top: 10px;} 
.mgb_10 {margin-bottom: 10px;}
.mgl_10 {margin-left: 10px;}
.mgr_10 {margin-right: 10px;}
.mgtb_10 {margin: 10px 0;}
.mglr_10 {margin: 0 10px;}
.mg_10 {margin: 10px;}

.mgt_15 {margin-top: 15px;} 
.mgb_15 {margin-bottom: 15px;}
.mgl_15 {margin-left: 15px;}
.mgr_15 {margin-right: 15px;}
.mgtb_15 {margin: 15px 0;}
.mglr_15 {margin: 0 15px;}
.mg_15 {margin: 15px;}

.mgt_20 {margin-top: 20px;} 
.mgb_20 {margin-bottom: 20px;}
.mgl_20 {margin-left: 20px;}
.mgr_20 {margin-right: 20px;}
.mgtb_20 {margin: 20px 0;}
.mglr_20 {margin: 0 20px;}
.mg_20 {margin: 20px;}

.mgt_25 {margin-top: 25px;} 
.mgb_25 {margin-bottom: 25px;}
.mgl_25 {margin-left: 25px;}
.mgr_25 {margin-right: 25px;}
.mgtb_25 {margin: 25px 0;}
.mglr_25 {margin: 0 25px;}
.mg_25 {margin: 25px;}

.mgt_30 {margin-top: 30px;} 
.mgb_30 {margin-bottom: 30px;}
.mgl_30 {margin-left: 30px;}
.mgr_30 {margin-right: 30px;}
.mgtb_30 {margin: 30px 0;}
.mglr_30 {margin: 0 30px;}
.mg_30 {margin: 30px;}

.mgt_35 {margin-top: 35px;} 
.mgb_35 {margin-bottom: 35px;}
.mgl_35 {margin-left: 35px;}
.mgr_35 {margin-right: 35px;}
.mgtb_35 {margin: 35px 0;}
.mglr_35 {margin: 0 35px;}
.mg_35 {margin: 35px;}

.mgt_45 {margin-top: 45px;} 
.mgb_45 {margin-bottom: 45px;}
.mgl_45 {margin-left: 45px;}
.mgr_45 {margin-right: 45px;}
.mgtb_45 {margin: 45px 0;}
.mglr_45 {margin: 0 45px;}
.mg_45 {margin: 45px;}

.mgt_50 {margin-top: 50px;} 
.mgb_50 {margin-bottom: 50px;}
.mgl_50 {margin-left: 50px;}
.mgr_50 {margin-right: 50px;}
.mgtb_50 {margin: 50px 0;}
.mglr_50 {margin: 0 50px;}
.mg_50 {margin: 50px;}

.mgt_60 {margin-top: 60px;} 
.mgb_60 {margin-bottom: 60px;}
.mgl_60 {margin-left: 60px;}
.mgr_60 {margin-right: 60px;}
.mgtb_60 {margin: 60px 0;}
.mglr_60 {margin: 0 60px;}
.mg_60 {margin: 60px;}

.mgt_65 {margin-top: 65px;} 
.mgb_65 {margin-bottom: 65px;}
.mgl_65 {margin-left: 65px;}
.mgr_65 {margin-right: 65px;}
.mgtb_65 {margin: 65px 0;}
.mglr_65 {margin: 0 65px;}
.mg_65 {margin: 65px;}

.mgt_80 {margin-top: 80px;} 
.mgb_80 {margin-bottom: 80px;}
.mgl_80 {margin-left: 80px;}
.mgr_80 {margin-right: 80px;}
.mgtb_80 {margin: 80px 0;}
.mglr_80 {margin: 0 80px;}
.mg_80 {margin: 80px;}

.mgt_85 {margin-top: 85px;} 
.mgb_85 {margin-bottom: 85px;}
.mgl_85 {margin-left: 85px;}
.mgr_85 {margin-right: 85px;}
.mgtb_85 {margin: 85px 0;}
.mglr_85 {margin: 0 85px;}
.mg_85 {margin: 85px;}

.mgt_100 {margin-top: 100px;} 
.mgb_100 {margin-bottom: 100px;}
.mgl_100 {margin-left: 100px;}
.mgr_100 {margin-right: 100px;}
.mgtb_100 {margin: 100px 0;}
.mglr_100 {margin: 0 100px;}
.mg_100 {margin: 100px;}

.mgt_110 {margin-top: 110px;} 
.mgb_110 {margin-bottom: 110px;}
.mgl_110 {margin-left: 110px;}
.mgr_110 {margin-right: 110px;}
.mgtb_110 {margin: 110px 0;}
.mglr_110 {margin: 0 110px;}
.mg_110 {margin: 110px;}

.mgt_115 {margin-top: 115px;} 
.mgb_115 {margin-bottom: 115px;}
.mgl_115 {margin-left: 115px;}
.mgr_115 {margin-right: 115px;}
.mgtb_115 {margin: 115px 0;}
.mglr_115 {margin: 0 115px;}
.mg_115 {margin: 115px;}

.mgt_130 {margin-top: 130px;} 
.mgb_130 {margin-bottom: 130px;}
.mgl_130 {margin-left: 130px;}
.mgr_130 {margin-right: 130px;}
.mgtb_130 {margin: 130px 0;}
.mglr_130 {margin: 0 130px;}
.mg_130 {margin: 130px;}

.mgt_135 {margin-top: 135px;} 
.mgb_135 {margin-bottom: 135px;}
.mgl_135 {margin-left: 135px;}
.mgr_135 {margin-right: 135px;}
.mgtb_135 {margin: 135px 0;}
.mglr_135 {margin: 0 135px;}
.mg_135 {margin: 135px;}

.mgt_140 {margin-top: 140px;} 
.mgb_140 {margin-bottom: 140px;}
.mgl_140 {margin-left: 140px;}
.mgr_140 {margin-right: 140px;}
.mgtb_140 {margin: 140px 0;}
.mglr_140 {margin: 0 140px;}
.mg_140 {margin: 140px;}

.pdt_10 {padding-top: 10px;} 
.pdb_10 {padding-bottom: 10px;}
.pdl_10 {padding-left: 10px;}
.pdr_10 {padding-right: 10px;}
.pdtb_10 {padding: 10px 0;}
.pdlr_10 {padding: 0 10px;}
.pd_10 {padding: 10px;}

.pdt_15 {padding-top: 15px;} 
.pdb_15 {padding-bottom: 15px;}
.pdl_15 {padding-left: 15px;}
.pdr_15 {padding-right: 15px;}
.pdtb_15 {padding: 15px 0;}
.pdlr_15 {padding: 0 15px;}
.pd_15 {padding: 15px;}

.pdt_20 {padding-top: 20px;} 
.pdb_20 {padding-bottom: 20px;}
.pdl_20 {padding-left: 20px;}
.pdr_20 {padding-right: 20px;}
.pdtb_20 {padding: 20px 0;}
.pdlr_20 {padding: 0 20px;}
.pd_20 {padding: 20px;}

.pdt_25 {padding-top: 25px;} 
.pdb_25 {padding-bottom: 25px;}
.pdl_25 {padding-left: 25px;}
.pdr_25 {padding-right: 25px;}
.pdtb_25 {padding: 25px 0;}
.pdlr_25 {padding: 0 25px;}
.pd_25 {padding: 25px;}

.pdt_30 {padding-top: 30px;} 
.pdb_30 {padding-bottom: 30px;}
.pdl_30 {padding-left: 30px;}
.pdr_30 {padding-right: 30px;}
.pdtb_30 {padding: 30px 0;}
.pdlr_30 {padding: 0 30px;}
.pd_30 {padding: 30px;}

.pdt_35 {padding-top: 35px;} 
.pdb_35 {padding-bottom: 35px;}
.pdl_35 {padding-left: 35px;}
.pdr_35 {padding-right: 35px;}
.pdtb_35 {padding: 35px 0;}
.pdlr_35 {padding: 0 35px;}
.pd_35 {padding: 35px;}

.pdt_45 {padding-top: 45px;} 
.pdb_45 {padding-bottom: 45px;}
.pdl_45 {padding-left: 45px;}
.pdr_45 {padding-right: 45px;}
.pdtb_45 {padding: 45px 0;}
.pdlr_45 {padding: 0 45px;}
.pd_45 {padding: 45px;}

.pdt_50 {padding-top: 50px;} 
.pdb_50 {padding-bottom: 50px;}
.pdl_50 {padding-left: 50px;}
.pdr_50 {padding-right: 50px;}
.pdtb_50 {padding: 50px 0;}
.pdlr_50 {padding: 0 50px;}
.pd_50 {padding: 50px;}

.pdt_65 {padding-top: 65px;} 
.pdb_65 {padding-bottom: 65px;}
.pdl_65 {padding-left: 65px;}
.pdr_65 {padding-right: 65px;}
.pdtb_65 {padding: 65px 0;}
.pdlr_65 {padding: 0 65px;}
.pd_65 {padding: 65px;}

.pdt_60 {padding-top: 60px;} 
.pdb_60 {padding-bottom: 60px;}
.pdl_60 {padding-left: 60px;}
.pdr_60 {padding-right: 60px;}
.pdtb_60 {padding: 60px 0;}
.pdlr_60 {padding: 0 60px;}
.pd_60 {padding: 60px;}

.pdt_80 {padding-top: 80px;} 
.pdb_80 {padding-bottom: 80px;}
.pdl_80 {padding-left: 80px;}
.pdr_80 {padding-right: 80px;}
.pdtb_80 {padding: 80px 0;}
.pdlr_80 {padding: 0 80px;}
.pd_80 {padding: 80px;}

.pdt_85 {padding-top: 85px;} 
.pdb_85 {padding-bottom: 85px;}
.pdl_85 {padding-left: 85px;}
.pdr_85 {padding-right: 85px;}
.pdtb_85 {padding: 85px 0;}
.pdlr_85 {padding: 0 85px;}
.pd_85 {padding: 85px;}

.pdt_100 {padding-top: 100px;} 
.pdb_100 {padding-bottom: 100px;}
.pdl_100 {padding-left: 100px;}
.pdr_100 {padding-right: 100px;}
.pdtb_100 {padding: 100px 0;}
.pdlr_100 {padding: 0 100px;}
.pd_100 {padding: 100px;}

.pdt_110 {padding-top: 110px;} 
.pdb_110 {padding-bottom: 110px;}
.pdl_110 {padding-left: 110px;}
.pdr_110 {padding-right: 110px;}
.pdtb_110 {padding: 110px 0;}
.pdlr_110 {padding: 0 110px;}
.pd_110 {padding: 110px;}

.pdt_115 {padding-top: 115px;} 
.pdb_115 {padding-bottom: 115px;}
.pdl_115 {padding-left: 115px;}
.pdr_115 {padding-right: 115px;}
.pdtb_115 {padding: 115px 0;}
.pdlr_115 {padding: 0 115px;}
.pd_115 {padding: 115px;}

.pdt_130 {padding-top: 130px;} 
.pdb_130 {padding-bottom: 130px;}
.pdl_130 {padding-left: 130px;}
.pdr_130 {padding-right: 130px;}
.pdtb_130 {padding: 130px 0;}
.pdlr_130 {padding: 0 130px;}
.pd_130 {padding: 130px;}

.pdt_135 {padding-top: 135px;} 
.pdb_135 {padding-bottom: 135px;}
.pdl_135 {padding-left: 135px;}
.pdr_135 {padding-right: 135px;}
.pdtb_135 {padding: 135px 0;}
.pdlr_135 {padding: 0 135px;}
.pd_135 {padding: 135px;}

.pdt_140 {padding-top: 140px;} 
.pdb_140 {padding-bottom: 140px;}
.pdl_140 {padding-left: 140px;}
.pdr_140 {padding-right: 140px;}
.pdtb_140 {padding: 140px 0;}
.pdlr_140 {padding: 0 140px;}
.pd_140 {padding: 140px;}

/* flex */
.flex {display: flex; flex-wrap: wrap; align-items: center; gap: 20px;}
.flex-center {display: flex; align-items: center; justify-content: center; gap: 20px;}
.flex-end {display: flex; align-items: center; justify-content: flex-end; gap: 20px;}
.flex-column {display: flex; flex-direction: column; gap: 20px;}
.flex-column-center {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;}
.flex-space-between {display: flex; justify-content: space-between; align-items: center; gap: 20px;}


/* column */
.column_2 {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.column_3 {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}

/* gap */
[class*="flex"].gap_0, [class*="column"].gap_0 {gap: 0px;}
[class*="flex"].gap_5, [class*="column"].gap_5 {gap: 5px;}
[class*="flex"].gap_8, [class*="column"].gap_8 {gap: 8px;}
[class*="flex"].gap_10, [class*="column"].gap_10 {gap: 10px;}
[class*="flex"].gap_15, [class*="column"].gap_15 {gap: 15px;}
[class*="flex"].gap_30, [class*="column"].gap_30 {gap: 30px;}
[class*="flex"].gap_45, [class*="column"].gap_45 {gap: 45px;}
[class*="flex"].gap_50, [class*="column"].gap_50 {gap: 50px;}

[class*="flex"].no_wrap {flex-wrap: nowrap;}

/* divider */
.divider {background: var(--line-color);}
.divider.vertical {width: 1px; height: 100%;}
.divider.horizontal {height: 1px; width: 100%;}

/* icon */
.icon {width: 40px; height: 40px; aspect-ratio: 1 / 1; display: inline-flex; mask-position: center; mask-size: cover;  -webkit-mask-position: center; -webkit-mask-size: cover;background: var(--dark-gray); transition: all 0.3s;}
.icon:hover {background: var(--icon-primar);} 
.icon.insta {mask-image: url(../img/common/insta.svg); -webkit-mask-image: url(../img/common/insta.svg);}
.icon.blog {mask-image: url(../img/common/blog.svg); -webkit-mask-image: url(../img/common/blog.svg);}
.icon.cafe {mask-image: url(../img/common/cafe.svg); -webkit-mask-image: url(../img/common/cafe.svg);}
.icon.phone {mask-image: url(../img/common/phone.svg); -webkit-mask-image: url(../img/common/phone.svg);}
.icon.email {mask-image: url(../img/common/email.svg); -webkit-mask-image: url(../img/common/email.svg);}
.icon.prev {mask-image: url(../img/common/prev.svg); -webkit-mask-image: url(../img/common/prev.svg);}
.icon.next {mask-image: url(../img/common/next.svg); -webkit-mask-image: url(../img/common/next.svg);}
.icon.calendar {mask-image: url(../img/common/calendar.svg); -webkit-mask-image: url(../img/common/calendar.svg);}
.icon.location {mask-image: url(../img/common/location.svg); -webkit-mask-image: url(../img/common/location.svg);}
.icon.address {mask-image: url(../img/common/address.svg); -webkit-mask-image: url(../img/common/address.svg);}
.icon.content {mask-image: url(../img/common/content.svg); -webkit-mask-image: url(../img/common/content.svg);}

.icon.md {width: 24px; height: 24px;}
.icon.sm {width: 20px; height: 20px;}
.icon.xs {width: 16px; height: 16px;}

.icon.key_color_2 {background: var(--main-color_2);}
.icon.key_color_2:hover {background: var(--main-color_2);}

/* radius */
.radius_15 {border-radius: 15px;}
.radius_20 {border-radius: 20px;}
.radius_50 {border-radius: 50px;}
.circle {border-radius: 50%;}

/* font */
[class*="font_"] {line-height: 140%;}
[class*="font_"].line_height_100 {line-height: 100%;}
[class*="font_"].line_height_120 {line-height: 120%;}
[class*="font_"].line_height_130 {line-height: 130%;}
[class*="font_"].line_height_150 {line-height: 150%;}

.font_14 {font-size: 0.88rem;}
.font_15 {font-size: 0.94rem;}
.font_16 {font-size: 1rem;}
.font_18 {font-size: 1.13rem;}
.font_19 {font-size: 1.19rem;}
.font_20 {font-size: 1.25rem;}
.font_22 {font-size: 1.375rem;}
.font_24 {font-size: 1.5rem;}
.font_30 {font-size: 1.88rem;}
.font_32 {font-size: 2rem;}
.font_40 {font-size: 2.5rem;}
.font_55 {font-size: 3.44rem;}

[class*="font_"].weight_400 {font-weight: 400;}
[class*="font_"].weight_500 {font-weight: 500;}
[class*="font_"].weight_600 {font-weight: 600;}
[class*="font_"].weight_700 {font-weight: 700;}

[class*="font_"].center {text-align: center;}

.word_keep {word-break: keep-all;} 

/* 모달 */
html.no_scroll {overflow:hidden; padding-right: var(--sb-width);} /* 모달 오픈 시 배경 스크롤 방지 */

/* module - box */
.box_style {background: #fff; border-radius: 20px; border: 1px solid var(--line-color); box-shadow: 4px 4px 18px 0 rgba(0,0,0,0.06); -webkit-box-shadow: 4px 4px 18px 0 rgba(0,0,0,0.06);}

/* module - button */
.btn_wrap {display: flex; gap: 10px;}
.btn_wrap.center {justify-content: center;}

.butn {border-radius: 6px; height: 44px; display: flex; justify-content: center; align-items: center; padding: 5px; font-size: 14px; background: var(--button-gray); transition: all .3s ease; border: none; width: 100%;}
.butn.key_color {background: var(--main-color_2); color: #fff;}
.butn:hover {opacity: .8;}
.butn.center {margin-left: auto; margin-right: auto;}
.butn.mw_150 {max-width: 150px;}

/* header */
#hd {border-bottom: 1px solid var(--border); background: #fff;}
#hd #hd_wrapper .header #logo {max-width: 97px; width: 100%;}

/* footer */
#ft {background: #fff;}
#ft .footer > div:nth-of-type(2) {flex: 1;}
#ft .footer .footer_logo {position: relative;}
#ft .footer .footer_logo a {max-width: 119px;}
#ft .footer .footer_logo::after {content: ''; display: block; width: 1px; height: 100%; background: var(--line-color); position: absolute; right: 0; top: 0;}
#ft .footer .footer_link li a:first-child {max-width: 199px; width: 100%;}
#ft .footer .footer_link li a:last-child {max-width: 218px; width: 100%;}

/***** media queries *****/

/* margin & padding */

/* ============================================================
   Tablet / Small Desktop (Max-width: 1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {
    /* 80px 이상: 약 10~15% 축소 */
    .mgt_80 { margin-top: 70px; } .mgb_80 { margin-bottom: 70px; } .mgl_80 { margin-left: 70px; } .mgr_80 { margin-right: 70px; } .mgtb_80 { margin: 70px 0; } .mglr_80 { margin: 0 70px; } .mg_80 { margin: 70px; }
    .mgt_85 { margin-top: 75px; } .mgb_85 { margin-bottom: 75px; } .mgl_85 { margin-left: 75px; } .mgr_85 { margin-right: 75px; } .mgtb_85 { margin: 75px 0; } .mglr_85 { margin: 0 75px; } .mg_85 { margin: 75px; }
    .mgt_100 { margin-top: 85px; } .mgb_100 { margin-bottom: 85px; } .mgl_100 { margin-left: 85px; } .mgr_100 { margin-right: 85px; } .mgtb_100 { margin: 85px 0; } .mglr_100 { margin: 0 85px; } .mg_100 { margin: 85px; }
    .mgt_110 { margin-top: 95px; } .mgb_110 { margin-bottom: 95px; } .mgl_110 { margin-left: 95px; } .mgr_110 { margin-right: 95px; } .mgtb_110 { margin: 95px 0; } .mglr_110 { margin: 0 95px; } .mg_110 { margin: 95px; }
    .mgt_115 { margin-top: 100px; } .mgb_115 { margin-bottom: 100px; } .mgl_115 { margin-left: 100px; } .mgr_115 { margin-right: 100px; } .mgtb_115 { margin: 100px 0; } .mglr_115 { margin: 0 100px; } .mg_115 { margin: 100px; }
    .mgt_130 { margin-top: 110px; } .mgb_130 { margin-bottom: 110px; } .mgl_130 { margin-left: 110px; } .mgr_130 { margin-right: 110px; } .mgtb_130 { margin: 110px 0; } .mglr_130 { margin: 0 110px; } .mg_130 { margin: 110px; }
    .mgt_135 { margin-top: 115px; } .mgb_135 { margin-bottom: 115px; } .mgl_135 { margin-left: 115px; } .mgr_135 { margin-right: 115px; } .mgtb_135 { margin: 115px 0; } .mglr_135 { margin: 0 115px; } .mg_135 { margin: 115px; }
    .mgt_140 { margin-top: 120px; } .mgb_140 { margin-bottom: 120px; } .mgl_140 { margin-left: 120px; } .mgr_140 { margin-right: 120px; } .mgtb_140 { margin: 120px 0; } .mglr_140 { margin: 0 120px; } .mg_140 { margin: 120px; }

    .pdt_80 { padding-top: 70px; } .pdb_80 { padding-bottom: 70px; } .pdl_80 { padding-left: 70px; } .pdr_80 { padding-right: 70px; } .pdtb_80 { padding: 70px 0; } .pdlr_80 { padding: 0 70px; } .pd_80 { padding: 70px; }
    .pdt_85 { padding-top: 75px; } .pdb_85 { padding-bottom: 75px; } .pdl_85 { padding-left: 75px; } .pdr_85 { padding-right: 75px; } .pdtb_85 { padding: 75px 0; } .pdlr_85 { padding: 0 75px; } .pd_85 { padding: 75px; }
    .pdt_100 { padding-top: 85px; } .pdb_100 { padding-bottom: 85px; } .pdl_100 { padding-left: 85px; } .pdr_100 { padding-right: 85px; } .pdtb_100 { padding: 85px 0; } .pdlr_100 { padding: 0 85px; } .pd_100 { padding: 85px; }
    .pdt_110 { padding-top: 95px; } .pdb_110 { padding-bottom: 95px; } .pdl_110 { padding-left: 95px; } .pdr_110 { padding-right: 95px; } .pdtb_110 { padding: 95px 0; } .pdlr_110 { padding: 0 95px; } .pd_110 { padding: 95px; }
    .pdt_115 { padding-top: 100px; } .pdb_115 { padding-bottom: 100px; } .pdl_115 { padding-left: 100px; } .pdr_115 { padding-right: 100px; } .pdtb_115 { padding: 100px 0; } .pdlr_115 { padding: 0 100px; } .pd_115 { padding: 100px; }
    .pdt_130 { padding-top: 110px; } .pdb_130 { padding-bottom: 110px; } .pdl_130 { padding-left: 110px; } .pdr_130 { padding-right: 110px; } .pdtb_130 { padding: 110px 0; } .pdlr_130 { padding: 0 110px; } .pd_130 { padding: 110px; }
    .pdt_135 { padding-top: 115px; } .pdb_135 { padding-bottom: 115px; } .pdl_135 { padding-left: 115px; } .pdr_135 { padding-right: 115px; } .pdtb_135 { padding: 115px 0; } .pdlr_135 { padding: 0 115px; } .pd_135 { padding: 115px; }
    .pdt_140 { padding-top: 120px; } .pdb_140 { padding-bottom: 120px; } .pdl_140 { padding-left: 120px; } .pdr_140 { padding-right: 120px; } .pdtb_140 { padding: 120px 0; } .pdlr_140 { padding: 0 120px; } .pd_140 { padding: 120px; }
}

/* ============================================================
   Tablet Portrait (Max-width: 768px)
   ============================================================ */
@media screen and (max-width: 768px) {
    /* 10~25px */
    .mgt_10 { margin-top: 10px; } .mgb_10 { margin-bottom: 10px; } .mgl_10 { margin-left: 10px; } .mgr_10 { margin-right: 10px; } .mgtb_10 { margin: 10px 0; } .mglr_10 { margin: 0 10px; } .mg_10 { margin: 10px; }
    .mgt_15 { margin-top: 12px; } .mgb_15 { margin-bottom: 12px; } .mgl_15 { margin-left: 12px; } .mgr_15 { margin-right: 12px; } .mgtb_15 { margin: 12px 0; } .mglr_15 { margin: 0 12px; } .mg_15 { margin: 12px; }
    .mgt_20 { margin-top: 18px; } .mgb_20 { margin-bottom: 18px; } .mgl_20 { margin-left: 18px; } .mgr_20 { margin-right: 18px; } .mgtb_20 { margin: 18px 0; } .mglr_20 { margin: 0 18px; } .mg_20 { margin: 18px; }
    .mgt_25 { margin-top: 22px; } .mgb_25 { margin-bottom: 22px; } .mgl_25 { margin-left: 22px; } .mgr_25 { margin-right: 22px; } .mgtb_25 { margin: 22px 0; } .mglr_25 { margin: 0 22px; } .mg_25 { margin: 22px; }
    /* 30~65px */
    .mgt_30 { margin-top: 25px; } .mgb_30 { margin-bottom: 25px; } .mgl_30 { margin-left: 25px; } .mgr_30 { margin-right: 25px; } .mgtb_30 { margin: 25px 0; } .mglr_30 { margin: 0 25px; } .mg_30 { margin: 25px; }
    .mgt_35 { margin-top: 30px; } .mgb_35 { margin-bottom: 30px; } .mgl_35 { margin-left: 30px; } .mgr_35 { margin-right: 30px; } .mgtb_35 { margin: 30px 0; } .mglr_35 { margin: 0 30px; } .mg_35 { margin: 30px; }
    .mgt_45 { margin-top: 40px; } .mgb_45 { margin-bottom: 40px; } .mgl_45 { margin-left: 40px; } .mgr_45 { margin-right: 40px; } .mgtb_45 { margin: 40px 0; } .mglr_45 { margin: 0 40px; } .mg_45 { margin: 40px; }
    .mgt_50 { margin-top: 45px; } .mgb_50 { margin-bottom: 45px; } .mgl_50 { margin-left: 45px; } .mgr_50 { margin-right: 45px; } .mgtb_50 { margin: 45px 0; } .mglr_50 { margin: 0 45px; } .mg_50 { margin: 45px; }
    .mgt_60 { margin-top: 50px; } .mgb_60 { margin-bottom: 50px; } .mgl_60 { margin-left: 50px; } .mgr_60 { margin-right: 50px; } .mgtb_60 { margin: 50px 0; } .mglr_60 { margin: 0 50px; } .mg_60 { margin: 50px; }
    .mgt_65 { margin-top: 55px; } .mgb_65 { margin-bottom: 55px; } .mgl_65 { margin-left: 55px; } .mgr_65 { margin-right: 55px; } .mgtb_65 { margin: 55px 0; } .mglr_65 { margin: 0 55px; } .mg_65 { margin: 55px; }
    /* 80~140px */
    .mgt_80 { margin-top: 60px; } .mgb_80 { margin-bottom: 60px; } .mgl_80 { margin-left: 60px; } .mgr_80 { margin-right: 60px; } .mgtb_80 { margin: 60px 0; } .mglr_80 { margin: 0 60px; } .mg_80 { margin: 60px; }
    .mgt_85 { margin-top: 65px; } .mgb_85 { margin-bottom: 65px; } .mgl_85 { margin-left: 65px; } .mgr_85 { margin-right: 65px; } .mgtb_85 { margin: 65px 0; } .mglr_85 { margin: 0 65px; } .mg_85 { margin: 65px; }
    .mgt_100 { margin-top: 75px; } .mgb_100 { margin-bottom: 75px; } .mgl_100 { margin-left: 75px; } .mgr_100 { margin-right: 75px; } .mgtb_100 { margin: 75px 0; } .mglr_100 { margin: 0 75px; } .mg_100 { margin: 75px; }
    .mgt_110 { margin-top: 80px; } .mgb_110 { margin-bottom: 80px; } .mgl_110 { margin-left: 80px; } .mgr_110 { margin-right: 80px; } .mgtb_110 { margin: 80px 0; } .mglr_110 { margin: 0 80px; } .mg_110 { margin: 80px; }
    .mgt_115 { margin-top: 85px; } .mgb_115 { margin-bottom: 85px; } .mgl_115 { margin-left: 85px; } .mgr_115 { margin-right: 85px; } .mgtb_115 { margin: 85px 0; } .mglr_115 { margin: 0 85px; } .mg_115 { margin: 85px; }
    .mgt_130 { margin-top: 90px; } .mgb_130 { margin-bottom: 90px; } .mgl_130 { margin-left: 90px; } .mgr_130 { margin-right: 90px; } .mgtb_130 { margin: 90px 0; } .mglr_130 { margin: 0 90px; } .mg_130 { margin: 90px; }
    .mgt_135 { margin-top: 100px; } .mgb_135 { margin-bottom: 100px; } .mgl_135 { margin-left: 100px; } .mgr_135 { margin-right: 100px; } .mgtb_135 { margin: 100px 0; } .mglr_135 { margin: 0 100px; } .mg_135 { margin: 100px; }
    .mgt_140 { margin-top: 110px; } .mgb_140 { margin-bottom: 110px; } .mgl_140 { margin-left: 110px; } .mgr_140 { margin-right: 110px; } .mgtb_140 { margin: 110px 0; } .mglr_140 { margin: 0 110px; } .mg_140 { margin: 110px; }

    /* Padding (Margin과 동일 수치) */
    .pdt_10 { padding-top: 10px; } .pdb_10 { padding-bottom: 10px; } .pdl_10 { padding-left: 10px; } .pdr_10 { padding-right: 10px; } .pdtb_10 { padding: 10px 0; } .pdlr_10 { padding: 0 10px; } .pd_10 { padding: 10px; }
    .pdt_15 { padding-top: 12px; } .pdb_15 { padding-bottom: 12px; } .pdl_15 { padding-left: 12px; } .pdr_15 { padding-right: 12px; } .pdtb_15 { padding: 12px 0; } .pdlr_15 { padding: 0 12px; } .pd_15 { padding: 12px; }
    .pdt_20 { padding-top: 18px; } .pdb_20 { padding-bottom: 18px; } .pdl_20 { padding-left: 18px; } .pdr_20 { padding-right: 18px; } .pdtb_20 { padding: 18px 0; } .pdlr_20 { padding: 0 18px; } .pd_20 { padding: 18px; }
    .pdt_25 { padding-top: 22px; } .pdb_25 { padding-bottom: 22px; } .pdl_25 { padding-left: 22px; } .pdr_25 { padding-right: 22px; } .pdtb_25 { padding: 22px 0; } .pdlr_25 { padding: 0 22px; } .pd_25 { padding: 22px; }
    .pdt_30 { padding-top: 25px; } .pdb_30 { padding-bottom: 25px; } .pdl_30 { padding-left: 25px; } .pdr_30 { padding-right: 25px; } .pdtb_30 { padding: 25px 0; } .pdlr_30 { padding: 0 25px; } .pd_30 { padding: 25px; }
    .pdt_35 { padding-top: 30px; } .pdb_35 { padding-bottom: 30px; } .pdl_35 { padding-left: 30px; } .pdr_35 { padding-right: 30px; } .pdtb_35 { padding: 30px 0; } .pdlr_35 { padding: 0 30px; } .pd_35 { padding: 30px; }
    .pdt_45 { padding-top: 40px; } .pdb_45 { padding-bottom: 40px; } .pdl_45 { padding-left: 40px; } .pdr_45 { padding-right: 40px; } .pdtb_45 { padding: 40px 0; } .pdlr_45 { padding: 0 40px; } .pd_45 { padding: 40px; }
    .pdt_50 { padding-top: 45px; } .pdb_50 { padding-bottom: 45px; } .pdl_50 { padding-left: 45px; } .pdr_50 { padding-right: 45px; } .pdtb_50 { padding: 45px 0; } .pdlr_50 { padding: 0 45px; } .pd_50 { padding: 45px; }
    .pdt_60 { padding-top: 50px; } .pdb_60 { padding-bottom: 50px; } .pdl_60 { padding-left: 50px; } .pdr_60 { padding-right: 50px; } .pdtb_60 { padding: 50px 0; } .pdlr_60 { padding: 0 50px; } .pd_60 { padding: 50px; }
    .pdt_65 { padding-top: 55px; } .pdb_65 { padding-bottom: 55px; } .pdl_65 { padding-left: 55px; } .pdr_65 { padding-right: 55px; } .pdtb_65 { padding: 55px 0; } .pdlr_65 { padding: 0 55px; } .pd_65 { padding: 55px; }
    .pdt_80 { padding-top: 60px; } .pdb_80 { padding-bottom: 60px; } .pdl_80 { padding-left: 60px; } .pdr_80 { padding-right: 60px; } .pdtb_80 { padding: 60px 0; } .pdlr_80 { padding: 0 60px; } .pd_80 { padding: 60px; }
    .pdt_85 { padding-top: 65px; } .pdb_85 { padding-bottom: 65px; } .pdl_85 { padding-left: 65px; } .pdr_85 { padding-right: 65px; } .pdtb_85 { padding: 65px 0; } .pdlr_85 { padding: 0 65px; } .pd_85 { padding: 65px; }
    .pdt_100 { padding-top: 75px; } .pdb_100 { padding-bottom: 75px; } .pdl_100 { padding-left: 75px; } .pdr_100 { padding-right: 75px; } .pdtb_100 { padding: 75px 0; } .pdlr_100 { padding: 0 75px; } .pd_100 { padding: 75px; }
    .pdt_110 { padding-top: 80px; } .pdb_110 { padding-bottom: 80px; } .pdl_110 { padding-left: 80px; } .pdr_110 { padding-right: 80px; } .pdtb_110 { padding: 80px 0; } .pdlr_110 { padding: 0 80px; } .pd_110 { padding: 80px; }
    .pdt_115 { padding-top: 85px; } .pdb_115 { padding-bottom: 85px; } .pdl_115 { padding-left: 85px; } .pdr_115 { padding-right: 85px; } .pdtb_115 { padding: 85px 0; } .pdlr_115 { padding: 0 85px; } .pd_115 { padding: 85px; }
    .pdt_130 { padding-top: 90px; } .pdb_130 { padding-bottom: 90px; } .pdl_130 { padding-left: 90px; } .pdr_130 { padding-right: 90px; } .pdtb_130 { padding: 90px 0; } .pdlr_130 { padding: 0 90px; } .pd_130 { padding: 90px; }
    .pdt_135 { padding-top: 100px; } .pdb_135 { padding-bottom: 100px; } .pdl_135 { padding-left: 100px; } .pdr_135 { padding-right: 100px; } .pdtb_135 { padding: 100px 0; } .pdlr_135 { padding: 0 100px; } .pd_135 { padding: 100px; }
    .pdt_140 { padding-top: 110px; } .pdb_140 { padding-bottom: 110px; } .pdl_140 { padding-left: 110px; } .pdr_140 { padding-right: 110px; } .pdtb_140 { padding: 110px 0; } .pdlr_140 { padding: 0 110px; } .pd_140 { padding: 110px; }
}

/* ============================================================
   Mobile (Max-width: 480px)
   ============================================================ */
@media screen and (max-width: 480px) {
    /* 10~25px */
    .mgt_10 { margin-top: 8px; } .mgb_10 { margin-bottom: 8px; } .mgl_10 { margin-left: 8px; } .mgr_10 { margin-right: 8px; } .mgtb_10 { margin: 8px 0; } .mglr_10 { margin: 0 8px; } .mg_10 { margin: 8px; }
    .mgt_15 { margin-top: 10px; } .mgb_15 { margin-bottom: 10px; } .mgl_15 { margin-left: 10px; } .mgr_15 { margin-right: 10px; } .mgtb_15 { margin: 10px 0; } .mglr_15 { margin: 0 10px; } .mg_15 { margin: 10px; }
    .mgt_20 { margin-top: 15px; } .mgb_20 { margin-bottom: 15px; } .mgl_20 { margin-left: 15px; } .mgr_20 { margin-right: 15px; } .mgtb_20 { margin: 15px 0; } .mglr_20 { margin: 0 15px; } .mg_20 { margin: 15px; }
    .mgt_25 { margin-top: 18px; } .mgb_25 { margin-bottom: 18px; } .mgl_25 { margin-left: 18px; } .mgr_25 { margin-right: 18px; } .mgtb_25 { margin: 18px 0; } .mglr_25 { margin: 0 18px; } .mg_25 { margin: 18px; }
    /* 30~65px */
    .mgt_30 { margin-top: 20px; } .mgb_30 { margin-bottom: 20px; } .mgl_30 { margin-left: 20px; } .mgr_30 { margin-right: 20px; } .mgtb_30 { margin: 20px 0; } .mglr_30 { margin: 0 20px; } .mg_30 { margin: 20px; }
    .mgt_35 { margin-top: 25px; } .mgb_35 { margin-bottom: 25px; } .mgl_35 { margin-left: 25px; } .mgr_35 { margin-right: 25px; } .mgtb_35 { margin: 25px 0; } .mglr_35 { margin: 0 25px; } .mg_35 { margin: 25px; }
    .mgt_45 { margin-top: 30px; } .mgb_45 { margin-bottom: 30px; } .mgl_45 { margin-left: 30px; } .mgr_45 { margin-right: 30px; } .mgtb_45 { margin: 30px 0; } .mglr_45 { margin: 0 30px; } .mg_45 { margin: 30px; }
    .mgt_50 { margin-top: 35px; } .mgb_50 { margin-bottom: 35px; } .mgl_50 { margin-left: 35px; } .mgr_50 { margin-right: 35px; } .mgtb_50 { margin: 35px 0; } .mglr_50 { margin: 0 35px; } .mg_50 { margin: 35px; }
    .mgt_60 { margin-top: 40px; } .mgb_60 { margin-bottom: 40px; } .mgl_60 { margin-left: 40px; } .mgr_60 { margin-right: 40px; } .mgtb_60 { margin: 40px 0; } .mglr_60 { margin: 0 40px; } .mg_60 { margin: 40px; }
    .mgt_65 { margin-top: 45px; } .mgb_65 { margin-bottom: 45px; } .mgl_65 { margin-left: 45px; } .mgr_65 { margin-right: 45px; } .mgtb_65 { margin: 45px 0; } .mglr_65 { margin: 0 45px; } .mg_65 { margin: 45px; }
    /* 80~140px */
    .mgt_80 { margin-top: 50px; } .mgb_80 { margin-bottom: 50px; } .mgl_80 { margin-left: 50px; } .mgr_80 { margin-right: 50px; } .mgtb_80 { margin: 50px 0; } .mglr_80 { margin: 0 50px; } .mg_80 { margin: 50px; }
    .mgt_85 { margin-top: 55px; } .mgb_85 { margin-bottom: 55px; } .mgl_85 { margin-left: 55px; } .mgr_85 { margin-right: 55px; } .mgtb_85 { margin: 55px 0; } .mglr_85 { margin: 0 55px; } .mg_85 { margin: 55px; }
    .mgt_100 { margin-top: 60px; } .mgb_100 { margin-bottom: 60px; } .mgl_100 { margin-left: 60px; } .mgr_100 { margin-right: 60px; } .mgtb_100 { margin: 60px 0; } .mglr_100 { margin: 0 60px; } .mg_100 { margin: 60px; }
    .mgt_110 { margin-top: 65px; } .mgb_110 { margin-bottom: 65px; } .mgl_110 { margin-left: 65px; } .mgr_110 { margin-right: 65px; } .mgtb_110 { margin: 65px 0; } .mglr_110 { margin: 0 65px; } .mg_110 { margin: 65px; }
    .mgt_115 { margin-top: 70px; } .mgb_115 { margin-bottom: 70px; } .mgl_115 { margin-left: 70px; } .mgr_115 { margin-right: 70px; } .mgtb_115 { margin: 70px 0; } .mglr_115 { margin: 0 70px; } .mg_115 { margin: 70px; }
    .mgt_130 { margin-top: 75px; } .mgb_130 { margin-bottom: 75px; } .mgl_130 { margin-left: 75px; } .mgr_130 { margin-right: 75px; } .mgtb_130 { margin: 75px 0; } .mglr_130 { margin: 0 75px; } .mg_130 { margin: 75px; }
    .mgt_135 { margin-top: 80px; } .mgb_135 { margin-bottom: 80px; } .mgl_135 { margin-left: 80px; } .mgr_135 { margin-right: 80px; } .mgtb_135 { margin: 80px 0; } .mglr_135 { margin: 0 80px; } .mg_135 { margin: 80px; }
    .mgt_140 { margin-top: 85px; } .mgb_140 { margin-bottom: 85px; } .mgl_140 { margin-left: 85px; } .mgr_140 { margin-right: 85px; } .mgtb_140 { margin: 85px 0; } .mglr_140 { margin: 0 85px; } .mg_140 { margin: 85px; }

    /* Padding (Margin과 동일 수치) */
    .pdt_10 { padding-top: 8px; } .pdb_10 { padding-bottom: 8px; } .pdl_10 { padding-left: 8px; } .pdr_10 { padding-right: 8px; } .pdtb_10 { padding: 8px 0; } .pdlr_10 { padding: 0 8px; } .pd_10 { padding: 8px; }
    .pdt_15 { padding-top: 10px; } .pdb_15 { padding-bottom: 10px; } .pdl_15 { padding-left: 10px; } .pdr_15 { padding-right: 10px; } .pdtb_15 { padding: 10px 0; } .pdlr_15 { padding: 0 10px; } .pd_15 { padding: 10px; }
    .pdt_20 { padding-top: 15px; } .pdb_20 { padding-bottom: 15px; } .pdl_20 { padding-left: 15px; } .pdr_20 { padding-right: 15px; } .pdtb_20 { padding: 15px 0; } .pdlr_20 { padding: 0 15px; } .pd_20 { padding: 15px; }
    .pdt_25 { padding-top: 18px; } .pdb_25 { padding-bottom: 18px; } .pdl_25 { padding-left: 18px; } .pdr_25 { padding-right: 18px; } .pdtb_25 { padding: 18px 0; } .pdlr_25 { padding: 0 18px; } .pd_25 { padding: 18px; }
    .pdt_30 { padding-top: 20px; } .pdb_30 { padding-bottom: 20px; } .pdl_30 { padding-left: 20px; } .pdr_30 { padding-right: 20px; } .pdtb_30 { padding: 20px 0; } .pdlr_30 { padding: 0 20px; } .pd_30 { padding: 20px; }
    .pdt_35 { padding-top: 25px; } .pdb_35 { padding-bottom: 25px; } .pdl_35 { padding-left: 25px; } .pdr_35 { padding-right: 25px; } .pdtb_35 { padding: 25px 0; } .pdlr_35 { padding: 0 25px; } .pd_35 { padding: 25px; }
    .pdt_45 { padding-top: 30px; } .pdb_45 { padding-bottom: 30px; } .pdl_45 { padding-left: 30px; } .pdr_45 { padding-right: 30px; } .pdtb_45 { padding: 30px 0; } .pdlr_45 { padding: 0 30px; } .pd_45 { padding: 30px; }
    .pdt_50 { padding-top: 35px; } .pdb_50 { padding-bottom: 35px; } .pdl_50 { padding-left: 35px; } .pdr_50 { padding-right: 35px; } .pdtb_50 { padding: 35px 0; } .pdlr_50 { padding: 0 35px; } .pd_50 { padding: 35px; }
    .pdt_60 { padding-top: 40px; } .pdb_60 { padding-bottom: 40px; } .pdl_60 { padding-left: 40px; } .pdr_60 { padding-right: 40px; } .pdtb_60 { padding: 40px 0; } .pdlr_60 { padding: 0 40px; } .pd_60 { padding: 40px; }
    .pdt_65 { padding-top: 45px; } .pdb_65 { padding-bottom: 45px; } .pdl_65 { padding-left: 45px; } .pdr_65 { padding-right: 45px; } .pdtb_65 { padding: 45px 0; } .pdlr_65 { padding: 0 45px; } .pd_65 { padding: 45px; }
    .pdt_80 { padding-top: 50px; } .pdb_80 { padding-bottom: 50px; } .pdl_80 { padding-left: 50px; } .pdr_80 { padding-right: 50px; } .pdtb_80 { padding: 50px 0; } .pdlr_80 { padding: 0 50px; } .pd_80 { padding: 50px; }
    .pdt_85 { padding-top: 55px; } .pdb_85 { padding-bottom: 55px; } .pdl_85 { padding-left: 55px; } .pdr_85 { padding-right: 55px; } .pdtb_85 { padding: 75px 0; } .pdlr_85 { padding: 0 55px; } .pd_85 { padding: 55px; }
    .pdt_100 { padding-top: 60px; } .pdb_100 { padding-bottom: 60px; } .pdl_100 { padding-left: 60px; } .pdr_100 { padding-right: 60px; } .pdtb_100 { padding: 60px 0; } .pdlr_100 { padding: 0 60px; } .pd_100 { padding: 60px; }
    .pdt_110 { padding-top: 65px; } .pdb_110 { padding-bottom: 65px; } .pdl_110 { padding-left: 65px; } .pdr_110 { padding-right: 65px; } .pdtb_110 { padding: 65px 0; } .pdlr_110 { padding: 0 65px; } .pd_110 { padding: 65px; }
    .pdt_115 { padding-top: 70px; } .pdb_115 { padding-bottom: 70px; } .pdl_115 { padding-left: 70px; } .pdr_115 { padding-right: 70px; } .pdtb_115 { padding: 70px 0; } .pdlr_115 { padding: 0 70px; } .pd_115 { padding: 70px; }
    .pdt_130 { padding-top: 75px; } .pdb_130 { padding-bottom: 75px; } .pdl_130 { padding-left: 75px; } .pdr_130 { padding-right: 75px; } .pdtb_130 { padding: 75px 0; } .pdlr_130 { padding: 0 75px; } .pd_130 { padding: 75px; }
    .pdt_135 { padding-top: 80px; } .pdb_135 { padding-bottom: 80px; } .pdl_135 { padding-left: 80px; } .pdr_135 { padding-right: 80px; } .pdtb_135 { padding: 80px 0; } .pdlr_135 { padding: 0 80px; } .pd_135 { padding: 80px; }
    .pdt_140 { padding-top: 85px; } .pdb_140 { padding-bottom: 85px; } .pdl_140 { padding-left: 85px; } .pdr_140 { padding-right: 85px; } .pdtb_140 { padding: 85px 0; } .pdlr_140 { padding: 0 85px; } .pd_140 { padding: 85px; }
}


/* font */

/* ============================================================
   Tablet / Small Desktop (Max-width: 1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {
    html { font-size: 93.75%; } /* 15px */
    
    .font_55 { font-size: 3rem; }
    .font_40 { font-size: 2.2rem; }
}

/* ============================================================
   Tablet Portrait (Max-width: 768px)
   ============================================================ */
@media screen and (max-width: 768px) {
    html { font-size: 87.5%; } /* 14px */

    .font_55 { font-size: 2.5rem; }
    .font_40 { font-size: 2rem; }
    .font_32 { font-size: 1.75rem; }
    .font_30 { font-size: 1.6rem; }
}

/* ============================================================
   Mobile (Max-width: 480px)
   ============================================================ */
@media screen and (max-width: 480px) {
    html { font-size: 81.25%; } /* 13px */

    .font_55 { font-size: 2rem; }
    .font_40 { font-size: 1.75rem; }
    .font_32 { font-size: 1.5rem; }
    .font_30 { font-size: 1.4rem; }
    .font_24 { font-size: 1.25rem; }

    .font_14 { font-size: 0.95rem; } /* 약 12.3px */
}


/* flex */

@media screen and (max-width: 1024px) {
  .t_flex {display: flex; flex-wrap: wrap; align-items: center; gap: 20px;}
  .t_flex-center {display: flex; align-items: center; justify-content: center; gap: 20px;}
  .t_flex-end {display: flex; align-items: center; justify-content: flex-end; gap: 20px;}
  .t_flex-column {display: flex; flex-direction: column; gap: 20px;}
  .t_flex-column-center {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;}
  .t_flex-space-between {display: flex; justify-content: space-between; align-items: center; gap: 20px;}

  .t_justify-center {justify-content: center;}
  .t_justify-end {justify-content: flex-end;}
}

@media screen and (max-width: 768px) {
  .m_flex {display: flex; flex-wrap: wrap; align-items: center; gap: 20px;}
  .m_flex-center {display: flex; align-items: center; justify-content: center; gap: 20px;}
  .m_flex-end {display: flex; align-items: center; justify-content: flex-end; gap: 20px;}
  .m_flex-column {display: flex; flex-direction: column; gap: 20px;}
  .m_flex-column-center {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;}
  .m_flex-space-between {display: flex; justify-content: space-between; align-items: center; gap: 20px;}

  .m_justify-center {justify-content: center;}  
  .m_justify-end {justify-content: flex-end;} 
}

@media screen and (max-width: 480px) {
  .x_flex {display: flex; flex-wrap: wrap; align-items: center; gap: 20px;}
  .x_flex-center {display: flex; align-items: center; justify-content: center; gap: 20px;}
  .x_flex-end {display: flex; align-items: center; justify-content: flex-end; gap: 20px;}
  .x_flex-column {display: flex; flex-direction: column; gap: 20px;}
  .x_flex-column-center {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;}
  .x_flex-space-between {display: flex; justify-content: space-between; align-items: center; gap: 20px;}

  .x_justify-center {justify-content: center;}  
  .x_justify-end {justify-content: flex-end;} 
}


/* gap */

@media screen and (max-width: 1024px) {
  [class*="flex"].t_gap_0, [class*="column"].t_gap_0 {gap: 0px;}
  [class*="flex"].t_gap_5, [class*="column"].t_gap_5 {gap: 5px;}
  [class*="flex"].t_gap_8, [class*="column"].t_gap_8 {gap: 8px;}
  [class*="flex"].t_gap_10, [class*="column"].t_gap_10 {gap: 10px;}
  [class*="flex"].t_gap_15, [class*="column"].t_gap_15 {gap: 15px;}
  [class*="flex"].t_gap_30, [class*="column"].t_gap_30 {gap: 30px;}
  [class*="flex"].t_gap_45, [class*="column"].t_gap_45 {gap: 45px;}
  [class*="flex"].t_gap_50, [class*="column"].t_gap_50 {gap: 50px;}
}

@media screen and (max-width: 768px) {
  [class*="flex"].m_gap_0, [class*="column"].m_gap_0 {gap: 0px;}
  [class*="flex"].m_gap_5, [class*="column"].m_gap_5 {gap: 5px;}
  [class*="flex"].m_gap_8, [class*="column"].m_gap_8 {gap: 8px;}
  [class*="flex"].m_gap_10, [class*="column"].m_gap_10 {gap: 10px;}
  [class*="flex"].m_gap_15, [class*="column"].m_gap_15 {gap: 15px;}
  [class*="flex"].m_gap_30, [class*="column"].m_gap_30 {gap: 30px;}
  [class*="flex"].m_gap_45, [class*="column"].m_gap_45 {gap: 45px;}
  [class*="flex"].m_gap_50, [class*="column"].m_gap_50 {gap: 50px;}
}

@media screen and (max-width: 480px) {
  [class*="flex"].x_gap_0, [class*="column"].x_gap_0 {gap: 0px;}
  [class*="flex"].x_gap_5, [class*="column"].x_gap_5 {gap: 5px;}
  [class*="flex"].x_gap_8, [class*="column"].x_gap_8 {gap: 8px;}
  [class*="flex"].x_gap_10, [class*="column"].x_gap_10 {gap: 10px;}
  [class*="flex"].x_gap_15, [class*="column"].x_gap_15 {gap: 15px;}
  [class*="flex"].x_gap_30, [class*="column"].x_gap_30 {gap: 30px;}
  [class*="flex"].x_gap_45, [class*="column"].x_gap_45 {gap: 45px;}
  [class*="flex"].x_gap_50, [class*="column"].x_gap_50 {gap: 50px;}
}

/* icon */

@media screen and (max-width: 768px) {
  .icon.m_md {width: 24px; height: 24px;}
  .icon.m_sm {width: 20px; height: 20px;}
  .icon.m_xs {width: 16px; height: 16px;}
}

/* module - box */

@media screen and (max-width: 480px) {
  .box_style {border-radius: 10px;}
}


/* column */
@media screen and (max-width: 480px) {
  .column_3 {grid-template-columns: 1fr;}
}

/* button */
@media screen and (max-width: 768px) {
  .butn:hover {opacity: 1;}
}


/* header & footer */

@media screen and (max-width: 1024px) {
  #ft .footer .footer_logo {padding-right: 0;}
  #ft .footer .footer_logo::after {display: none;}
}

@media screen and (max-width: 480px) {
  /* header */
  #hd #hd_wrapper .header #logo {max-width: 67px;}

  /* footer */
  #ft .footer .footer_logo a {max-width: 89px;}
  #ft .footer .footer_info ul li span {display: block; height: 0; font-size: 0; line-height: 0;}
  
}