.beforeafter>.title {
 margin-top:3.43vw;
 margin-bottom:2.91vw
}
.beforeafter>.title>h1 {
 text-align:center;
 font-size:1.875vw;
 font-family:ScoreB
}
.beforeafter>.title>h1>span {
 display:block;
 font-family:Lato,sans-serif;
 font-size:.67vw;
 letter-spacing:2px;
 margin-top:1.25vw
}
#before-after_board ul.menu {
 display:flex;
 border:1px solid #adadad;
 margin-top:.83vw
}
#before-after_board ul.menu > li {
 cursor:pointer;
 flex:1;
 border-right:1px solid #adadad;
 background-color:#f1f1f1;
 color:#555252;
 font-size:.9375vw;
 font-family:ScoreM;
 height:3.125vw;
 display:flex;
 align-items:center;
 justify-content:center
}
#before-after_board ul.menu > li:last-child {
 border-right:0
}
#before-after_board ul.menu > li.on {
 background-color:#7e64c8;
 color:#fff
}
#before-after_board ul.menu > li a{flex: 1;text-align: center;}
#before-after_board .beforeafter-list {
 margin-top:3.64vw
}
#before-after_board .beforeafter-list > ul {
 display:flex;
 justify-content:space-between;
 flex-wrap:wrap
}
#before-after_board .beforeafter-list > ul > li {
 margin-bottom:2.08vw;
 width: 50%;
}
#before-after_board .beforeafter-list > ul > li > .image {
 position:relative;
}
#before-after_board .beforeafter-list > ul > li > .image img {
 width:100%;
 height:100%
}
#before-after_board .beforeafter-list > ul > li > .image .title {
 position:absolute;
 width:100%;
 left:0;
 top:0;
 text-align:center;
 color:#fff;
 font-family:ScoreM;
 font-size:1.3rem;
 padding-bottom:2%;
 background-image:url(/images/pages/reallast/hover-frame.png);
 background-size:100%;
 background-position:center;
 background-repeat:no-repeat;
 z-index:1;
 height:100%;
 display:none
}
#before-after_board .beforeafter-list > ul > li > .image:hover .title {
 display:flex;
 align-items:flex-end;
 justify-content:center;
 height: 100%;
}
#before-after_board .beforeafter-popup {
 position:fixed;
 width:100vw;
 height:100vh;
 background-color:rgba(0,0,0,.75);
 top:0;
 left:0;
 align-items:center;
 justify-content:center;
 display:none;
 z-index:2
}
#before-after_board .beforeafter-popup.on {
 display:flex
}
#before-after_board .beforeafter-popup-content .swiper-wrapper {
 width:45.66vw
}
#before-after_board .beforeafter-popup-content .swiper-slide {
 padding:0 6vw
}
#before-after_board .beforeafter-popup-content .popup-title {
 background-size:100%;
 background-repeat:no-repeat;
 background-position:top center;
 background-color:white;
 height:3.85vw;
 font-family:ScoreM;
 font-size:1.04vw;
 display:flex;
 align-items:center;
 justify-content:center;
 color:#1b1b1b
}
#before-after_board .beforeafter-popup-content {
 padding:0 5.72vw
}
#before-after_board .swiper-button-prev:after,
#before-after_board .swiper-container-rtl .swiper-button-next:after {
 content:'';
 background-image:url(/images/common/pager_prev.png);
 background-size:100%;
 background-position:center;
 background-repeat:no-repeat;
 width:1.77vw;
 height:1.77vw
}
#before-after_board .swiper-button-next:after,
#before-after_board .swiper-container-rtl .swiper-button-prev:after {
 content:'';
 background-image:url(/images/common/pager_next.png);
 background-size:100%;
 background-position:center;
 background-repeat:no-repeat;
 width:1.77vw;
 height:1.77vw
}
#before-after_board .login-box {
 position:absolute;
 top:0;
 left:0;
 background-color:rgba(0,0,0,.84);
 display:flex;
 align-items:center;
 justify-content:center;
 flex-direction:column;
 height:100%;
 width:52%
}
#before-after_board .login-box>p {
 color:#fff;
 text-align:center;
 font-family:ScoreL
}
#before-after_board .login-box>p>span {
 color:#7e64c8;
 display:block
}
#before-after_board .login-box .btn-login {
 background-color:#7e64c8;
 color:#fff;
 font-family:ScoreM;
 display:flex;
 align-items:center;
 justify-content:center;
 margin-top:1vw;
 width:10vw;
 height:2vw;
 border-radius:2vw
}
@media screen and (max-width :768px) {
 .beforeafter>.title>h1 {
  font-size:4.94vw
 }
 .beforeafter>.title>h1>span {
  font-size:1.82vw;
  font-weight:300
 }
 .beforeafter>.title {
  margin-top:7.8125vw;
  margin-bottom:6.51vw
 }
#before-after_board ul.menu {
  flex-wrap:wrap;
  justify-content:center;
  border:0
 }
 #before-after_board ul.menu > li {
  flex-wrap:wrap;
  width:31.25vw;
  height:8.46vw;
  font-size:3.38vw;
  flex:initial;
  border:0
 }
 #before-after_board ul.menu > li:nth-child(1) {
  border-top:1px solid #adadad;
  border-bottom:1px solid #adadad;
  border-left:1px solid #adadad
 }
 #before-after_board ul.menu > li:nth-child(2) {
  border-top:1px solid #adadad;
  border-bottom:1px solid #adadad;
  border-left:1px solid #adadad
 }
 #before-after_board ul.menu > li:nth-child(3) {
  border-top:1px solid #adadad;
  border-bottom:1px solid #adadad;
  border-left:1px solid #adadad;
  border-right:1px solid #adadad
 }
 #before-after_board ul.menu > li:nth-child(4) {
  border-bottom:1px solid #adadad;
  border-left:1px solid #adadad;
  border-right:1px solid #adadad
 }
 #before-after_board ul.menu > li:nth-child(5) {
  border-bottom:1px solid #adadad;
  border-right:1px solid #adadad
 }
 #before-after_board ul.menu > li.last {
	border-right: 1px solid #adadad;
	border-bottom: 1px solid #adadad;
 }
 #before-after_board .beforeafter-list > ul {
  flex-direction:column;
  flex-wrap:initial
 }
 #before-after_board .beforeafter-list > ul > li {
  width: 100%;
  margin-bottom:8.85vw;
 }
 #before-after_board .beforeafter-list > ul > li > .image {
  width:100%;
  height:auto
 }
 #before-after_board .beforeafter-list > ul > li > .image img {
  width:100%;
  height:auto;
  position:static
 }
 #before-after_board .beforeafter-list > ul > li > .image .title {
  display:flex;
  background-image:unset;
  font-size:1rem;
  padding-bottom:0.1rem;
  align-items:center;
  justify-content:center;
  background-color:#7e64c8;
  bottom:0;
  top:auto;
  height:8.85vw;
 }
 #before-after_board .beforeafter-list > ul > li > .image:hover .title {
  background-image:unset;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:#7e64c8;
  height:30px;
  bottom:0;
  top:auto;
  height:8.85vw
 }
 #before-after_board .beforeafter-popup-content .swiper-wrapper {
  width:90vw
 }
 #before-after_board .swiper-button-prev:after,
 #before-after_board .swiper-container-rtl .swiper-button-next:after {
  width:6vw;
  height:6vw
 }
 #before-after_board .swiper-button-next:after,
 #before-after_board .swiper-container-rtl .swiper-button-prev:after {
  width:6vw;
  height:6vw
 }
 #before-after_board .beforeafter-popup-content .popup-title {
  height:8vw;
  font-size:3vw
 }
 #before-after_board .login-box {
  width:49vw;
  height:calc(100% - 8.85vw)
 }
 #before-after_board .login-box>p {
  font-size:2.73vw
 }
 #before-after_board .login-box .btn-login {
  margin-top:2.6vw;
  font-size:2.73vw;
  width:25vw;
  height:5.46vw;
  border-radius:5.46vw
 }
}

@media screen and (min-width :2441px) {
 .beforeafter>.title {
  margin-top:66px;
  margin-bottom:56px
 }
 .beforeafter>.title>h1 {
  font-size:36px
 }
 .beforeafter>.title>h1>span {
  font-size:13px;
  margin-top:24px
 }

 #before-after_board ul.menu {
  margin-top:16px
 }
 #before-after_board ul.menu > li {
  font-size:18px;
  height:60px
 }
 #before-after_board .beforeafter-list {
  margin-top:70px
 }
 #before-after_board .beforeafter-list > ul > li {
  margin-bottom:40px
 }
 #before-after_board .beforeafter-list > ul > li > .image:hover {
  border:5px solid #7e64c8;
  overflow:hidden
 }
 #before-after_board .beforeafter-list > ul > li > .image .title {
  height:52px;
  font-size:18px;
 }
 #before-after_board .beforeafter-popup-content .swiper-wrapper {
  width:877px
 }
 #before-after_board .beforeafter-popup-content .popup-title {
  height:74px;
  font-size:20px
 }
 #before-after_board .beforeafter-popup-content {
  padding:0 110px
 }
 #before-after_board .beforeafter-popup-content .swiper-slide {
  padding:0 110px
 }
 #before-after_board .swiper-button-prev:after,
 #before-after_board .swiper-container-rtl .swiper-button-next:after {
  width:34px;
  height:34px
 }
 #before-after_board .swiper-button-next:after,
 #before-after_board .swiper-container-rtl .swiper-button-prev:after {
  width:34px;
  height:34px
 }
}