@charset "utf-8";
@import url("common.css");

body{width:100%; overflow-y:auto;overflow-x:hidden; max-width: 100%; display:grid; grid-template-rows: 46px 1fr 60px;}
.wrap{max-width: 100%;}
.header .logo{transition: all 0.5s ease;}


html, body{height:100%;}
.wrap.main-wrap::-webkit-scrollbar{-webkit-appearance:none;}
.wrap.main-wrap::-webkit-scrollbar:vertical{width:0.5rem;}
.wrap.main-wrap::-webkit-scrollbar:horizontal{height:0.5rem;}
.wrap.main-wrap::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.25);border-radius:0.5rem;}
.wrap.main-wrap::-webkit-scrollbar-track{background-color:rgba(0, 0, 0, 0.05);border-radius:0.5rem;}
.wrap.main-wrap::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0);}

.header-wrap{position:relative;z-index: 1;}
.header{width:100%; grid-row:1/2; transition:var(--transition-custom);letter-spacing: -0.5px; padding-right:20px;}
.header > .inner-wrap{position: relative; margin:0 auto;height:100%;display:flex;align-items:flex-end;justify-content:flex-end;}
.header .logo{position:absolute;left:30px;cursor:pointer;}
.header .logo span {display:block; font-size:24px; font-family: 'Zen Antique', serif; transition: all 0.5s ease;}
.header .logo .svg-logo{display:none;}
.header .menu-wrap{display:flex;flex-direction:row;align-items:center;height:100%;justify-content: flex-end;}
.header .gnb{height:100%;z-index:9;}
.header .gnb ul{
  height:100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.header .gnb li{
  position:relative;
  height:100%;
  transition: all 0.5s ease;
  font-weight:bold;
  justify-content: flex-end;
  align-items: flex-end;
}
.header .gnb li a,
.header .gnb li a:visited{
  height:100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin:0 20px;
  color:#adadad; font-size:20px;
  font-weight:bold;
}
.header .gnb li a:active,
.header .gnb li a:hover
{color:#383838; margin:0 20px;font-weight:bold;}
.header .gnb li a.active{color:#383838;font-weight:bold;}

.footer{width:100%; background:#fff; grid-row:3/4;  padding:0 24px; display: flex; justify-content: space-between; align-items: center;}
.footer .text,
.footer .copyright{font-size: 12px; color:#000000; font-family: Arial, sans-serif;}

.lh-140{line-height:1.4!important;}
.lh-160{line-height:1.6!important;}

.fw-600{font-weight:600!important;}
.fw-700{font-weight:700!important;}
.fw-800{font-weight:800!important;}

.fs-13{font-size:13px!important;}
.fs-16{font-size:16px!important;}
.fs-18{font-size:18px!important;}
.fs-24{font-size:24px!important;}
/* --------------------------------
  main
-------------------------------- */

.main-container-wrap{
  grid-row:2/3;
  height:auto;
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.worksList{
  grid-row:2/3;
  display: block;
  height:auto;
  overflow-y: auto;
}
.infoWrap,
.detailWrap{
    position: fixed;
    left: 0;
    top: 0;
    width: 60vw;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
    background: #EBEBEB;
    padding: 0 20px 0 40px;
    transform: translate(-100%, 0);
    transition: transform 0.5s;
    z-index: 10;
    padding-top: calc(env(safe-area-inset-top) + 20px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
}
.open #detailWrap{
	transform: translate(0, 0);
}
.detailHeader{
  height:86px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detailHeader .title{
  font-family: Arial, serif;
  font-size:18px;
  font-weight:800;
}
.detailHeader .btn-ico-close,
.detailHeader .btn-info-close{
  width:30px;
  height:30px;
  background:url(../images/btn-ico-close.svg) center center no-repeat;
  cursor: pointer;
  background-size:13px!important;
}
.detailBodyWrite{
  display: flex;
  flex-direction: column;
  gap:10px;
  height: calc(100vh - 90px);
}
.ck-content{
  width:100%;
  height: calc(100vh - 420px);
  border:solid 1px #ccc;
  background:#fff;
  border-radius:5px;
  overflow-y: auto;
}
.ck-content.info{
  height: calc(100vh - 220px);
}
.ck-content img,
.detailBody img{
  max-width:100%;
}
.ck-content img {
  aspect-ratio: auto !important;
  height:auto;
}
.detailBody{
  position: relative;
  height: calc(100vh - 172px);
  overflow-y: scroll;
  overflow-x: auto;
  padding: 0 20px 20px 0;
  line-height: 1.6;
  border:solid 0 #ccc;
  background:transparent;
}
.detailFooter{
  height:86px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blur--panel{
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100%;
	opacity: 0;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	pointer-events: none;
	transition: opacity 0.5s;
	z-index: 9;
	cursor: pointer;
}
.open .blur--panel{
	pointer-events: auto;
	opacity: 1;
}
.detailFooter a[class*=btn-]{
  font-size:16px;
  color:#000;
  font-weight:800;
}
/******************************************************************main accordion 0710*/
.pages{
  position: fixed;
  width: 100%;
  height:calc(100vh - 106px);
  overflow: hidden;
  pointer-events: none;
}
.page{
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: calc(100% - 0px);
  top: 0;
  padding: 20px;
  transform: translate(0, 100%);
}
.page ::-webkit-scrollbar {
  display: none;
}
.page.active{
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.5s;
  transform: translate(0, 0);
}
.page.hide{
  opacity: 1;
  transition: transform 0.5s;
  transform: translate(0, 0);
}
.showcase{
  overflow: hidden;
}
.showcase--cards{
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
}
.showcase--cards .card{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(0, -50%);
  transition: transform 0.5s;
}
.showcase--cards .card.push{
  transform: translate(-400px, -50%);
}
.touch .showcase{
  overflow: scroll;
  display: inline;
}
.touch .showcase--cards{
  position: absolute;
  display: inline-flex;
  flex-direction: row-reverse;
  width: auto;
  height: auto;
  top: 50%;
  transform: translate(0, -50%);
  padding: 0 100px;
}
.touch .showcase--cards .card{
  position: relative;
  transform: none;
  margin-left: -350px;
}
.touch .showcase--cards .card:last-child{
  margin-left: 0;
}
.touch .showcase--cards .card.push{
  transform: translate(-350px, 0);
}
.card{
  width:440px;
  height:500px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr 1fr 0.7fr 1fr;
  background:#fff;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 1s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card:hover{
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.6)!important;
  transition: all 0.5s;
}
.card--small{
  width: calc((100% - 100px) / 5);
}
.cardImg{
  width:100%;
  grid-row: 1/4;
  overflow: hidden;
}
.cardImg img{
  width: 100%;
  height: 100%;
}
.card-desc{
  width:100%;
  grid-row:4/5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
/******************************************************************main accordion 0710*/
.card-desc .text{
  font-size:18px;
  color:#383838;
  font-weight:800;
}
.card-desc .sub-text{
  font-size:14px;
  color:#adadad;
  font-weight:500;
}
.text{
  font-size:18px;
  color:#383838;
  font-weight:800;
}
.sub-text{
  font-size:14px;
  color:#adadad;
  font-weight:500;
}
/*works*/
ul.cardListWrap{
  padding:40px 20px 0 40px;
  margin-left:-20px;
  margin-bottom:60px;
}
ul.cardListWrap li{
  width:calc((100% / 4) - 40px);
  height: 480px;
  margin:20px;
  padding:80px 40px 60px 40px;
  float:left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background:#fff;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: visible;
}
ul.cardListWrap li:hover{
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8)!important;
  transition: all 0.5s;
  cursor: pointer;
}
ul.cardListWrap li .imgBox{
  width:100%;
  height:65%;
  overflow:hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
ul.cardListWrap li .imgBox img{
  width: 100%;
}
ul.cardListWrap li .card-desc{
  width:100%;
  height:calc(35% - 60px);
  padding-top:60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
}
ul.cardListWrap li .badgeArea{
  width:auto;
  height:40px;
  position: absolute;
  display: flex;
  align-items:center;
  justify-content: flex-start;
  top:20px;
  left:25px;
  z-index:5;
}
ul.cardListWrap li .badgeArea img{
  height:100%;
}
ul.cardListWrap li .newIcon{
  width:60px;
  height:60px;
  display: block;
  position: absolute;
  background:url('../images/ico-new.svg')0 0 no-repeat;
  background-size:contain;
  top:0;
  left:0;
  z-index:6;
}
ul.cardListWrap::after{
  content: '';
  clear: both;
  display: block;
}
.worksTitle{
  width:90%;
  height:20%;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  font-size:1.4rem;
  font-family: "Pretendard", serif;
  font-weight:bold;
  background:rgba(255,255,255,.7);
  border:solid 2px #383838;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s;
  overflow: visible;
}
.icoArea{
  width:30%;
  height:100%;
  position: absolute;
  top:100%;
  right: 0;
  transform: translateY(-80%);
}
.new{
  background:url(../images/ico-new.svg) center center no-repeat;
  background-size:90%;
}
/*관리자페이지*/
.admin-container-wrap{
  height:calc(100vh - 106px);
  transition: all 0.5s ease;
  padding:40px 30px;
  display: flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items: center;
}
.admin-label{
  display: inline-flex;
  font-size:16px;
  font-weight:bold;
  width:150px;
}
.admin-label::before{
  content: '·';
  display: flex;
  align-items: center;
  padding-right:10px;
}
.admin-label + input{
  width:calc(100% - 150px)!important;
}
.listHeader.ui-widget.ui-widget-content{
  width:100%;
  border-width:0!important;
}
.listHeader .ui-widget-header{
  background:#fff;
  border:0;
  border-bottom:solid 1px #dbdbdb;
}
.listContents{
  padding:30px 0!important;
}
ul.list{
  list-style:none;
  margin-top:20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row:auto;
  gap:40px;
}
ul.list li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border:solid 1px #f1f1f1;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.1  );
  border-radius:10px;
  padding:20px;
  gap:10px;
}
ul.list li .pro-thumbnail{
  width:160px;
  height:128px;
  display: flex;
  align-items: center;
}
ul.list li .pro-thumbnail img{
  width:100%;
}
ul.list li .info{
  width:calc(100% - 450px);
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: flex-start;
  gap:8px;
}
ul.list li .info h1{
  font-size:1.4rem;
  font-family: "Pretendard", serif;
  font-weight:bold;
  position: relative;
}
ul.list li .info h1 .new{
  background:url(../images/ico-new.svg) center center no-repeat;
  background-size:90%;
}
ul.list li .editWrap{
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
  gap:5px;
}
.badgeWrap{
  width:auto;
  padding:20px;
  display: flex;
  justify-content:center;
  align-items: center;
}
.badgeWrap img{
  height:60px;
}
.badgeWrap.new{
  width:60px;
}
.badgeWrap.new img{
  width:100%;
  height:auto;
}
.btn-default{
  height:40px;
  width:auto;
  padding:0 24px;
  display: flex;
  align-items: center;
  justify-content:center;
  font-family: 'pretendard', serif !important;
  font-size:1rem!important;
  font-weight:500!important;
  border:solid 1px #333;
  color:#383838;
}
.btn-default:hover{
  border:solid 1px #000;
  color:#000;
  transition: all 0.5s ease-out;
}
.btn-secondary{
  height:32px;
  width:92px;
  display: flex;
  align-items: center;
  justify-content:center;
  font-family: 'pretendard', serif !important;
  font-size:.85rem!important;
  font-weight:500!important;
  border:solid 1px #dbdbdb;
  color:#383838;
}
.btn-secondary:hover{
  border:solid 1px #000;
  color:#000;
  transition: all 0.5s ease-out;
}
.btn-secondary img{
  width:18px;
  margin-right:5px;
}
.btn-secondary.logout{
  border:solid 1px #ffffff;
}
input[type=text],
input[type=password]{
  width:100%;
  font-size:1rem !important;
  padding:10px;
  border:solid 1px #dbdbdb;
  border-radius:3px;
}
.img-wrap {
  width: 160px;
  height: 128px;
  margin: 0 15px;
  border-radius: 0.8rem;
  overflow: hidden;
  position: relative;
  background: #f1f1f1;
}
.img-wrap .btn-del {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 2rem;
    height: 2rem;
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23CCCCCC'/%3E%3Cpath d='M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A") no-repeat 0 0;
    background-size: auto 100%;
    z-index: 3;
}

.img-wrap .img {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.img-wrap .img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: auto;
}

.img-wrap .img:empty {
    display: none;
}

.img-wrap .img:not(:empty) {
    background: #fff;
}

.img-wrap .img:empty ~ .btn-del {
    display: none;
}

.img-wrap .upload {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: .8rem;
    font-weight: 500;
    color: #aaa;
    line-height: 1.2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.img-wrap .upload input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    cursor: pointer;
}

.img-wrap .upload:before {
    content: '';
    display: block;
    margin: 0 auto 0.7rem;
    width: 2.5rem;
    height: 2.5rem;
    background: url("data:image/svg+xml,%3Csvg width='41' height='40' viewBox='0 0 41 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.1299 23.2729C13.1299 27.3668 16.4351 30.6971 20.4983 30.6971C24.5615 30.6971 27.8667 27.3668 27.8667 23.2729C27.8667 19.1789 24.5615 15.8486 20.4983 15.8486C16.4351 15.8486 13.1299 19.1789 13.1299 23.2729ZM20.4983 28.5759C17.5962 28.5759 15.2351 26.197 15.2351 23.2729C15.2351 20.3488 17.5962 17.9698 20.4983 17.9698C23.4004 17.9698 25.7615 20.3488 25.7615 23.2729C25.7615 26.197 23.4004 28.5759 20.4983 28.5759Z' fill='%23AAAAAA'/%3E%3Cpath d='M39.4474 17.9696C38.8668 17.9696 38.3947 18.4453 38.3947 19.0302V33.8787C38.3947 35.6329 36.9779 37.0605 35.2368 37.0605H5.76316C4.02211 37.0605 2.60526 35.6329 2.60526 33.8787V14.7878C2.60526 13.0335 4.02211 11.6059 5.76316 11.6059H9.97368C12.8758 11.6059 15.2368 9.227 15.2368 6.30291C15.2368 5.71799 15.7089 5.24231 16.2895 5.24231H20.5C21.0805 5.24231 21.5526 4.76662 21.5526 4.1817C21.5526 3.59678 21.0805 3.12109 20.5 3.12109H16.2895C14.5484 3.12109 13.1316 4.54867 13.1316 6.30291C13.1316 8.05715 11.7147 9.48473 9.97368 9.48473H5.76316C2.86105 9.48473 0.5 11.8637 0.5 14.7878V33.8787C0.5 36.8028 2.86105 39.1817 5.76316 39.1817H35.2368C38.1389 39.1817 40.5 36.8028 40.5 33.8787V19.0302C40.5 18.4453 40.0279 17.9696 39.4474 17.9696Z' fill='%23AAAAAA'/%3E%3Cpath d='M26.8163 9.48485H32.0795V14.7879C32.0795 15.3728 32.5516 15.8485 33.1321 15.8485C33.7126 15.8485 34.1847 15.3728 34.1847 14.7879V9.48485H39.4479C40.0284 9.48485 40.5005 9.00917 40.5005 8.42424C40.5005 7.83932 40.0284 7.36364 39.4479 7.36364H34.1847V2.06061C34.1847 1.47568 33.7126 1 33.1321 1C32.5516 1 32.0795 1.47568 32.0795 2.06061V7.36364H26.8163C26.2358 7.36364 25.7637 7.83932 25.7637 8.42424C25.7637 9.00917 26.2358 9.48485 26.8163 9.48485Z' fill='%23AAAAAA'/%3E%3C/svg%3E%0A") no-repeat 50% 50%;
    background-size: auto 100%;
}
.admin-container-wrap .ui-state-active a,
.admin-container-wrap .ui-state-active a:link,
.admin-container-wrap .ui-state-active a:visited{
  color: #000 !important;;
}
.admin-container-wrap .ui-state-active,
.admin-container-wrap .ui-widget-content .ui-state-active,
.admin-container-wrap .ui-widget-header .ui-state-active,
.admin-container-wrap a.ui-button:active,
.admin-container-wrap .ui-button:active,
.admin-container-wrap .ui-button.ui-state-active:hover{
  border:solid 1px #000;
  border-bottom:solid 1px #dbdbdb;
  background:#fff;
  color: #000 !important;
  font-family: 'pretendard', serif;
}
.thumbnailCard{
  width:100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border:solid 1px #f1f1f1;
  border-radius:10px;
  padding:20px;
  background:#fff;
  margin-bottom:10px;
  gap:30px;
}


/*로그인*/
.loginBody{
  background: url('../images/info/info01.jpeg') 0 0 no-repeat;
  background-size: cover;
  backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.loginWrap{
  width:25%;
  height:auto;
  padding:40px;
  display: flex;
  flex-direction: column;
  gap:15px;
  background: rgba(0,0,0,.3);
  border:solid 2px #666;
}
.loginWrap p{
  font-size:28px;
  font-family: 'Arial', serif;
  font-weight: 700;
  color:#fff;
}
.btn-login{
  width: 100%;
  background: rgba(255,255,255,.3);
  color:#fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:20px;
  border:solid 1px #000;
}
.btn-login:hover{
  width: 100%;
  background: rgba(255,255,255,.1);
  border:solid 1px #000;
  transition: all 0.3s;
}
@media all and (max-width:1850px) {
  ul.cardListWrap li {
    height: 460px;
  }
  .card-desc .text{
    font-size:100%;
  }
  .card-desc .sub-text{
    font-size:85%;
  }
  .text{
    font-size:100%;
  }
  .sub-text{
    font-size:85%;
  }
}
@media all and (max-width:1720px) {
  ul.cardListWrap li {
    height: 424px;
  }
}
@media all and (max-width:1700px) {
  ul.cardListWrap li {
    height: 380px;
  }
}
@media all and (max-width:1700px) {
  ul.cardListWrap li {
    height: 410px;
  }
}
@media all and (max-width:1650px) {
  ul.cardListWrap li {
    height: 400px;
  }
}
@media all and (max-width:1600px) {
  ul.cardListWrap li{
    width:calc((100% / 3) - 40px);
    height:480px;
  }
}
@media all and (max-width:1457px) {
  ul.cardListWrap li{
    width:calc((100% / 3) - 40px);
  }
}
@media all and (max-width:1337px) {
  ul.cardListWrap li {
    height: 438px;
  }
}
@media all and (max-width:1320px) {
  ul.cardListWrap li {
    height: 432px;
  }
}
@media all and (max-width:1300px) {
  ul.cardListWrap li {
    height: 424px;
  }
}
@media all and (max-width:1220px) {
  ul.cardListWrap li {
    height: 395px;
  }
}
@media all and (max-width:1200px) {
  ul.cardListWrap li {
    height: 386px;
  }
}
@media all and (max-width:1180px) {
  ul.cardListWrap li {
    height: 380px;
  }
}
@media all and (max-width:1090px) {
  ul.cardListWrap li {
    height: 346px;
  }
}
@media all and (max-width:1080px) {
  ul.cardListWrap li {
    height: 342px;
  }
}
@media all and (max-width:1024px) {
  .header .gnb li a,
  .header .gnb li a:visited{
    margin:0 10px; font-size:18px;
  }
  .header .gnb li a:active,
  .header .gnb li a:hover
  { margin:0 10px;}
  .detailWrap{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #EBEBEB;
    padding:0 20px 0 40px;
    transform: translate(-100%, 0);
    transition: transform 0.5s;
    z-index: 10;
  }
  .worksTitle{
    width:100%;
  }
  .icoArea{
    width:30%;
    height:100%;
    position: absolute;
    top:100%;
    right: 0;
    transform: translateY(-80%);
  }
  ul.cardListWrap li{
    width:calc((100% / 2) - 40px);
    height: 505px;
  }
  .loginWrap{
    width:50%;
  }
}
@media all and (max-width:960px) {
  ul.cardListWrap li {
    height: 469px;
  }

}
@media all and (max-width:860px) {
  ul.cardListWrap li {
    height: 413px;
  }
}
@media all and (max-width:830px) {
  ul.cardListWrap li {
    height: 396px;
  }
}
@media all and (max-width:815px) {
  ul.cardListWrap li {
    height: 387px;
  }
}
@media all and (max-width:800px) {
  ul.cardListWrap li {
    height: 380px;
  }
}
@media all and (max-width:780px) {
  .detailBody{
    padding: 0 0 20px 0;
  }
  ul.cardListWrap li {
    height: 368px;
  }
}
@media all and (max-width:500px) {

  ul.cardListWrap li{
    width:calc(100% - 40px);
    height:469px;
  }
  .loginWrap{
    width:80%;
  }
  .detailWrap{
    height: calc(var(--vh, 1vh) * 100);
    padding:0 20px 0 20px;
  }
  .ql-editor{
    padding:0!important;
  }
  .card{
    width: calc(100vw / 1.4);
    height:48vh;
  }
  .card--small{
    width: calc((100% - 30px) / 2);
    border-radius: 5px;
  }
  .touch .showcase--cards{
    padding: 0 30px;
  }
  .touch .showcase--cards .card{
    position: relative;
    transform: none;
    margin-left: -50vw;
  }
  .touch .showcase--cards .card:last-child{
    margin-left: 0%;
  }
  .touch .showcase--cards .card.push{
    transform: translate(-50vw, 0);
  }
  ::-webkit-scrollbar {
    display: none;
  }
}
@media all and (max-width:430px) {
  ul.cardListWrap li {
    height: 391px;
  }
}
@media all and (min-width:1921px) {
  body{
    max-width:1920px;
    margin:0 auto;
  }
}