@charset "UTF-8";
@import url("/assets/stylesheets/font.css");

/* ========================================================================

  /assets/stylesheets/add.css

======================================================================== */

/************************************************************************
  margin
************************************************************************/
.mb10 { margin-bottom:10px !important; }

/************************************************************************
  .circle
************************************************************************/

.box { position:relative; }
.circle { margin:auto; width:104px; height:104px; border-radius:50%; background:linear-gradient(to bottom, rgba(250,225,145,0.9), rgba(249,190,0,0.9)); display:block; position:absolute; top:0; bottom:0; right:0; left:0; font-size:0; z-index:5; }
.circle:after { content:''; margin:auto; width:78px; height:9px; background:url(../images/index/btn_chat.svg) no-repeat; background-size:100%  auto; display:block; position:absolute; top:0; bottom:0; right:0; left:0; font-size:0; }

.circle-wrapper { width:126px; height:126px; border-radius:50%; position:absolute; bottom:-15px; right:-40px; }

.circle-wrapper:after{ content:''; margin:auto; width:126px; height:126px;background:linear-gradient(to bottom, rgba(250,225,145,0.4), rgba(249,190,0,0.4)); border:0; border-radius:50%; position:absolute; top:0; bottom:0; right:0; left:0; z-index:1;
-webkit-animation:blink 1.5s ease-in-out infinite alternate;
-moz-animation:blink 1.5s ease-in-out infinite alternate;
animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}


/* ============ smart phone ============ */
@media screen and (max-width:750px){

}


/************************************************************************
  .leader
************************************************************************/
.p-image-triple ul li.leader { margin-bottom:20px; width:auto; max-width:904px; }
.p-imagecenter ul li.leader .image-area { width:auto; max-width:904px; }

/************************************************************************
  #mute
************************************************************************/
#mute { padding:10px; border-radius:50%; background-color:#ffffff; position:absolute; bottom:10px; right:10px; z-index:1000; font-size:0; opacity:0.4; }
#mute:hover {  opacity:0.8; cursor:pointer; }

#mute span { width:30px; height:30px; border-radius:50%; background-repeat:no-repeat; background-size:100% auto; display:block; }

#mute.sound-off span { background-image:url('../images/index/btn_sound_off.png'); }
#mute.sound-on span { background-image:url('../images/index/btn_sound_on.png'); }


.p-video-area { position:relative; }


/************************************************************************
  .p-white-button
************************************************************************/
/*--------------------------------------------------
* White Button
* --------------------------------------------------*/
.p-white-button { /*padding:6px 43px 6px 26px;*/ padding:0 0 4px 17px; width:78px; color:#636363; border:#636363 1px solid; display:block; position:absolute; z-index:0; bottom:15px; right:15px; box-sizing:border-box; }
.p-white-button span {
  font-size:10px;
line-height:1;
  color:#636363;
  white-space:nowrap;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family:'Noto Sans Bold', sans-serif;
  -webkit-transition:all 300ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  transition:all 300ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  /* easeOutQuint */
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
display:inline-block;
}

.p-white-button::after {
  content:'';
  background:url("/assets/images/index/double-arrow-g.svg") center left no-repeat;
  background-size:contain;
  position:absolute;
  top:50%;
  right:8px;
  width:8px;
  height:8px;
  -webkit-transform:translate(0, -50%);
  transform:translate(0, -50%);
  -webkit-transition:all 300ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  transition:all 300ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  /* easeOutQuint */
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

@media all and (max-width:768px) {
.p-white-button { /*padding:2.1306818182% 0 2.1306818182% 0;*/ padding:calc(10/768*100vw); width:auto; text-align:center; }
.p-white-button span { /*padding-right:8.8235294118%;*/ padding-right:calc(20/768*100vw); font-size:14px; }
.p-white-button::after { /*padding-top:6.4705882353%;*/ width:calc(10/768*100vw); height:calc(10/768*100vw); right:8.8235294118%; }
}


@media all and (max-width:768px) and (max-width:420px) {
.p-white-button span { padding-right: calc(20/420*100vw); /*font-size:15.5555555556px; font-size:3.7333333333vw;*/ }
.p-white-button::after { width:calc(10/420*100vw); height:calc(10/420*100vw); }
}

@media all and (max-width:768px) and (min-width:421px) {
.p-white-button span { /*font-size:17.5px; font-size:3.7333333333vw;*/ }
}

@media all and (max-width:768px) and (min-width:601px) {
.p-white-button span { /*font-size:23.3333333333px; font-size:3.7333333333vw;*/ }
}

@media all and (min-width:769px) {
.p-white-button:hover span { opacity:0.8; }
.p-white-button:hover::after { -webkit-transform:translate(4px, -50%); transform:translate(4px, -50%); }
}

@media all and (max-width:320px) {
.p-white-button { bottom:10px; right:10px; }
.p-white-button span { font-size:12px; }
}

/************************************************************************
  #chatplusview
************************************************************************/
#chatplusview.chatplusview-modern.closed:not(.float) { z-index:0; }

/************************************************************************
  .lity-close
************************************************************************/
.lity-close { width:50px; height:50px; background:url('/assets/images/special/common/close-w.svg') no-repeat; position:absolute; top:-80px; right:0; cursor:pointer; font-size:0; }
.lity-close:hover,
.lity-close:focus,
.lity-close:active,
.lity-close:visited { background:url('/assets/images/special/common/close-w.svg') no-repeat; opacity:1; font-size:0; }
.lity-close:active { top:-80px; }

.lity-close::after { content:'CLOSE'; margin-top:45px; color:#FFF; text-align:center; letter-spacing: 0.06rem; display:inline-block; font-weight:bold; font-family:'Noto Sans Bold', sans-serif; font-size:13px; }

/************************************************************************
  .btn-click
************************************************************************/
.btn-click { max-width:775px; text-align:right; }
.btn-click a { margin:0; width:calc(220/775*100%); height:calc(18/1024*100vw); background:url('/assets/images/index/btn_click_off.svg') no-repeat; font-size:0; display:inline-block; }
.btn-click a:hover { background-image:url('/assets/images/index/btn_click_on.svg'); }