@charset "utf-8";

/********************
// tablet 분기점
********************/
@media only screen and (max-width: 1200px) {

  .inner{width:calc(100% - 120px);margin:0 auto;}

  .greetings{background:url('/img/greetingsBg-t.svg')center left no-repeat;background-size:auto 100%}

  .systemCnts {display:grid; grid-template-columns:repeat(2,1fr);}

  .system-reward{background:url('/img/rewardBg.svg')bottom center no-repeat; background-size:auto 25%;}

  .clip {top:-8%; left:50%; right:50%; transform:translateX(-50%);}

  .contactPolicyIcon{width:20px; height:20px;}
}


/********************
// 모바일 분기점
********************/
@media only screen and (max-width: 768px) {

  .inner{width:calc(100% - 40px);margin:0 auto;}


  .systemCnts {display:grid; grid-template-columns:repeat(1,1fr);}

  .systemSalesBox {display:grid; grid-template-columns:repeat(1,1fr);}

  .systemRewardBox {display:grid; grid-template-columns:repeat(1,1fr);}
  .system-reward{background:url('/img/rewardBg.svg')bottom center no-repeat; background-size:auto 15%;}

  .reviewCnt{min-height:auto;}

  .clip {top:-6%; left:50%; right:50%; transform:translateX(-50%);}
  .penWrap{
    position:relative;
    width:100%;
    max-width:100%;
    aspect-ratio:799 / 68;
    right:0%;
  }
  .pen{
    position:absolute;
    top:50%;
    left:50%;
    width:calc(100% * 68 / 799) !important;
    max-width:none;
    transform:translate(-50%, -50%) rotate(90deg);
    transform-origin:center;
  }

  .contactPolicyIcon{width:16px; height:16px;}

}