
/**/
.mh-10{margin:0 10px;}
.mh-20{margin:0 20px;}
.mh-30{margin:0 30px;}
.mh-40{margin:0 40px;}

.mv-10{margin:10px 0;}
.mv-20{margin:20px 0;}
.mv-30{margin:30px 0;}
.mv-40{margin:40px 0;}
.mv-80{margin:80px 0;}

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}
.mt-60{margin-top:60px;}
.mt-70{margin-top:70px;}
.mt-80{margin-top:80px;}
.mt-90{margin-top:90px;}
.mt-100{margin-top:100px;}
.mt-120{margin-top:120px;}
.mt-150{margin-top:150px;}
.mt-180{margin-top:180px;}
.mt-200{margin-top:200px;}
.mt-250{margin-top:250px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}
.mb-60{margin-bottom:60px;}
.mb-70{margin-bottom:70px;}
.mb-80{margin-bottom:80px;}
.mb-90{margin-bottom:90px;}
.mb-100{margin-bottom:100px;}
.mb-120{margin-bottom:120px;}
.mb-150{margin-bottom:150px;}

.ml-10{margin-left:10px;}
.ml-20{margin-left:20px;}
.ml-30{margin-left:30px;}
.ml-40{margin-left:40px;}
.ml-50{margin-left:50px;}
.ml-100{margin-left:100px;}

.mr-10{margin-right:10px;}
.mr-20{margin-right:20px;}
.mr-30{margin-right:30px;}
.mr-40{margin-right:40px;}
.mr-50{margin-right:50px;}

.pd-10{padding:10px;}
.pd-20{padding:20px;}
.pd-50{padding:50px;}
.pd-90{padding:90px;}

.pv-10{padding: 10px 0;}
.pv-20{padding: 20px 0;}
.pv-30{padding: 30px 0;}
.pv-50{padding: 50px 0;}
.pv-80{padding: 80px 0;}
.pv-100{padding: 100px 0;}
.pv-150{padding: 150px 0;}
.pv-180{padding: 180px 0;}
.pv-250{padding: 250px 0;}
.pv-300{padding: 300px 0;}

.ph-10{padding: 0 10px;}
.ph-20{padding: 0 20px;}
.ph-30{padding: 0 30px;}
.ph-50{padding: 0 50px;}
.ph-100{padding: 0 100px;}
.ph-150{padding: 0 150px;}
.ph-250{padding: 0 250px;}

.pt-10{padding-top:10px;}
.pt-20{padding-top:20px;}
.pt-30{padding-top:30px;}
.pt-40{padding-top:40px;}
.pt-50{padding-top:50px;}
.pt-60{padding-top:60px;}
.pt-70{padding-top:70px;}
.pt-80{padding-top:80px;}
.pt-90{padding-top:90px;}
.pt-100{padding-top:100px;}
.pt-120{padding-top:120px;}
.pt-150{padding-top:150px;}

.pb-10{padding-bottom:10px;}
.pb-20{padding-bottom:20px;}
.pb-30{padding-bottom:30px;}
.pb-40{padding-bottom:40px;}
.pb-50{padding-bottom:50px;}
.pb-60{padding-bottom:60px;}
.pb-70{padding-bottom:70px;}
.pb-80{padding-bottom:80px;}
.pb-90{padding-bottom:90px;}
.pb-100{padding-bottom:100px;}
.pb-120{padding-bottom:120px;}
.pb-150{padding-bottom:150px;}

.pl-10{padding-left:10px;}
.pl-20{padding-left:20px;}
.pl-30{padding-left:30px;}
.pl-40{padding-left:40px;}
.pl-50{padding-left:50px;}

.pr-10{padding-right:10px;}
.pr-20{padding-right:20px;}
.pr-30{padding-right:30px;}
.pr-40{padding-right:40px;}
.pr-50{padding-right:50px;}
@media screen and (max-width:960px) {
  .pl-10{padding-left:0px;}
  .pl-20{padding-left:0px;}
  .pl-30{padding-left:0px;}
  .pl-40{padding-left:0px;}
  .pl-50{padding-left:0px;}

  .pr-10{padding-right:0px;}
  .pr-20{padding-right:0px;}
  .pr-30{padding-right:0px;}
  .pr-40{padding-right:0px;}
  .pr-50{padding-right:0px;}
  .pd-10{padding:10px;}
  .pd-20{padding:10px;}
  .pd-50{padding:10px;}
  .pd-90{padding:50px 15px;}


  .pv-100{padding: 60px 0;}
  .pv-150{padding: 100px 0;}
  .pv-180{padding: 100px 0;}
  .pv-250{padding: 100px 0;}
  .pv-300{padding: 100px 0;}

  .pb-50{padding-bottom:25px;}
  .pb-60{padding-bottom:30px;}
  .pb-70{padding-bottom:35px;}
  .pb-80{padding-bottom:40px;}
  .pb-90{padding-bottom:45px;}
  .pb-100{padding-bottom:50px;}
  .pb-120{padding-bottom:60px;}
  .pb-150{padding-bottom:70px;}

  .ph-30{padding: 0 15px;}
  .ph-50{padding: 0 20px;}
  .ph-100{padding: 0 0px;}
  .ph-150{padding: 0 0px;}
  .ph-250{padding: 0 0px;}

  .mt-180{margin-top:80px}
  .mt-200{margin-top:100px}
  .mt-250{margin-top:100px}
  .mv-80{margin: 40px 0}

  .mt-10-mo{margin-top: 10px;}
  .mt-30-mo{margin-top: 30px;}
  .mt-50-mo{margin-top: 50px;}
  .mt-100-mo{margin-top: 100px;}
}
@media screen and (max-width:426px) {
  .pv-100{padding: 30px 0;}
  .pv-150{padding: 80px 0;}
  .pv-250{padding: 80px 0;}
  .pl-30{padding-left:15px;}
  .pl-40{padding-left:15px;}
  .pl-50{padding-left:15px;}
}



.ta-center{text-align: center;}
.ta-left{text-align: left;}
.ta-right{text-align: right;}
@media screen and (max-width:960px) {
  .ta-right{text-align: center;}
}

.fc-white{color:#fff;}
.fc-black{color:#000;}
.fc-deepgray{color:#333;}
.fc-lightgray{color:#EFEEF2}
.fc-blue{color:#328FD6}

.fw-100{font-weight: 100;}
.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-900{font-weight: 900;}

.fs-14{font-size: 14px; line-height: 1.2;}
.fs-16{font-size: 16px; line-height: 1.2;}
.fs-18{font-size: 18px; line-height: 1.2;}
.fs-20{font-size: 20px; line-height: 1.2;}
.fs-24{font-size: 2.4rem; line-height: 1.2;}
.fs-30{font-size: 3rem; line-height: 1.2;}
.fs-35{font-size: 3.5rem; line-height: 1.2;}
.fs-40{font-size: 4.0rem; line-height: 1.2;}
.fs-45{font-size: 45px; line-height: 1.2;}
.fs-48{font-size: 4.8rem; line-height: 1.2;}
.fs-50{font-size: 5.0rem; line-height: 1.2;}
.fs-60{font-size: 6.0rem; line-height: 1.2;}
.fs-70{font-size: 7.0rem; line-height: 1.2;}
.fs-90{font-size: 9.0rem; line-height: 1.2;}
.fs-180{font-size: 18rem; }

@media screen and (max-width:960px) {
  .fs-180{font-size: 15rem; }
}
@media screen and (max-width:426px) {
  .fs-24{font-size: 16px;}
  .fs-180{font-size: 10rem; }
}

.dp-b{display:block}
.dp-i{display: inline;}
.dp-ib{display: inline-block;}

.bg-lightgray{background:#f8f8f8}
.bg-gray{background:#1D1D1D}
.bg-white{background:#fff}
.bg-blue{background:#328FD6}

.flex{
  display:flex;
  justify-content: center;
  align-items: center;
}
.flex-sb{
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.flex-start{
  display:flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.flex-end{
  display:flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
}

.flex-1{flex:1}

@media screen and (max-width:960px) {
  .flex-1{ flex:initial }
  .flex-order-1{order:-1}
}

.flex-wrap{ flex-wrap: wrap;}

.flex-col4{display: flex;}
.flex-col4>div{width: 25%}

.flex-col5{display: flex;}
.flex-col5>div{width: 20%}
.flex-col5-1{display: flex;}
.flex-col5-1>div{width: 20%}

.flex-col6{display: flex;}
.flex-col6>div{width: 16.666%}
@media screen and (max-width:960px) {
  .flex-col4{flex-wrap: wrap; justify-content: center;}
  .flex-col4>div{width: 50%}
  .flex-col5{flex-wrap: wrap; justify-content: center;}
  .flex-col5>div{width: 33.333%}
  .flex-col5-1{flex-wrap: wrap; justify-content: center;}
  .flex-col5-1>div{width: 50%}
  .flex-col6{display: flex; flex-wrap: wrap;}
  .flex-col6>div{width: 50%}
}
@media screen and (max-width:640px) {
	.flex-col4>div{width: 100%}
  .flex-col5-1>div{width: 100%}
  .flex-col5>div{width: 100%}
  .flex-col6>div{width: 100%}
}

.grid-col4{
  /* 모바일에서 2열로 */
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 28px;
  row-gap: 28px;
}
.grid-col4-1{
  /* 모바일에서 1열로 */
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 28px;
  row-gap: 28px;
}
.grid-col3{
  /* 모바일에서 2열로 */
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 28px;
  row-gap: 28px;
}
.grid-col2{
  /* 모바일에서 2열로 */
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 28px;
  row-gap: 60px;
}
.grid-col2-1{
  /* 모바일에서 1열로 */
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 28px;
  row-gap: 60px;
}

.grid-col3-1{
  /* 모바일에서 1열로 */
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 28px;
  row-gap: 28px;
}
@media screen and (max-width:960px){

  .grid-col4{grid-template-columns:  repeat(2, 1fr); }
  .grid-col4-1{grid-template-columns:  1fr; }
  .grid-col3{grid-template-columns:  repeat(2, 1fr); }
  .grid-col3-1{grid-template-columns:  1fr; }
  .grid-col2{grid-template-columns:  repeat(2, 1fr); }
  .grid-col2-1{grid-template-columns:  1fr; }
}
