html, body { margin: 0; padding: 0;}
* { margin: 0px; padding: 0px; font-family: 'Noto_R';  font-size: 14px;  box-sizing: border-box;}
a {text-decoration: none; color: #000;}
.section {padding-top: 70px;}
.wrap{ width: 100%; height: 100vh;
  background: rgb(205,167,255);
  background: linear-gradient(180deg, rgba(205,167,255,1) 0%, rgba(255,200,244,1) 100%);}
.wrap .inner {
  width: 600px; height: 100vh; margin: 0 auto; text-align: center;
  padding: 120px 20px 60px 20px;
}
.wrap .inner .white {position: relative; background: #fff; border-radius: 20px; width: 100%; height: 100%; padding: 100px 20px 96px 20px;}
.wrap .white .logo {
  position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 160px; height: 160px; border-radius: 100%; overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.wrap .white .top_text h2 {font-size: 16px; margin:0 0 10px 0;}
.wrap .white .top_text p {color: #555;}
.wrap .white .top_text a {display: inline-block; border-radius: 4px 6px; background: #fae100; font-size: 13px; padding: 4px;}
.wrap .white .top_text a i {vertical-align: middle;}
.wrap .white .logo img {width: 100%; height: 100%;}
.wrap .white .content {width: 100%; height: 100%;  overflow-x: hidden; overflow-y: scroll; margin:20px 0 0 0; -ms-overflow-style: none;  scrollbar-width: none; }
.wrap .white .content::-webkit-scrollbar { display: none; }
.wrap .white .box {display: block; float: left; padding: 10px; }
.wrap .white .box.long {width: 100%; margin:10px 0 0 0;}
.wrap .white .box.short {width: 50%;}
.wrap .white .box img {display: block; width: 100%; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;}
/* 긴박스 */
.wrap .white .box.long .text {padding: 0 10px;}
.wrap .white .box.long .text p {width: calc(100% - 100px); float: left;text-align: left;}
.wrap .white .box.long .text p:nth-of-type(1) {font-size: 16px; font-family: 'Noto_B'; margin:14px 0 4px 0;}
.wrap .white .box.long .text span {width: 40px; height: 40px; background: #000; color: #fff; border-radius: 100%; display: block; float: right; text-align: center; line-height: 40px; transform: translateY(-23px);}
/* 짧은박스 */
.wrap .white .box.short .text p {text-align: left;}
.wrap .white .box.short .text p:nth-of-type(1) {font-size: 16px; font-family: 'Noto_B'; margin:14px 0 4px 0;}

.wrap .footer {color: #fff; padding:10px 0 0 0; font-size: 12px;}

@media (max-width: 800px) and (min-width: 300px){
  .wrap .inner { width: 100%;  padding: 88px 16px 54px 16px}
  .wrap .white .logo {width: 100px; height: 100px; top: -50px;}
  .wrap .inner .white {padding: 78px 4px 96px 4px}
  .wrap .white .box img {border-radius: 10px;}
  .wrap .white .box.long .text p:nth-of-type(1) P {font-size: 14px;}
  .wrap .white .box.long .text p {font-size: 12px; width: calc(100% - 60px)}
  .wrap .white .box.long .text span {width: 36px; height: 36px; line-height: 36px; font-size: 13px;}

  .wrap .white .box.short .text p:nth-of-type(1) {font-size: 13px;}
  .wrap .white .box.short .text p {font-size: 11px;}
  .wrap .white .box {padding: 5px;}
}