@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');





.min-vh-100-for-ios {min-height: 100vh;min-height:100svh; /** min-height: -webkit-fill-available;**/} /**100dvh shakes when up and down, so use svh for ios address bar**/

body {
  font-family: "Inria Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "微軟雅黑體", "Microsoft YaHei", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; 
}	

.img_icon_user {height:70px;width:70px;}
.w_20 {width: 20% !important;}
.w_60 {width: 60% !important;}
.w_85 {width: 85% !important;}


* {--fa-li-margin:1.6em;} /** reduce extra space from the left **/

.fa-stack {width:2em;} /** take care of fontawesome extra spacing horizontally **/
*:focus {box-shadow: none !important;}


.abs_center_x {left:50%;transform: translateX(-50%);}
.abs_center_y {top:50%;transform: translateY(-50%);}



.bypass_header {margin-top:46px;}


.extra_large {font-size:1.4em !important;}
.extra_small {font-size:0.7em !important;}

/** *********************************************************************************************** **/  
/** contact_wrapper CSS DEFINITIONS *************************************************************** **/  
#contact_wrapper {
  background: linear-gradient(90deg,rgba(255,255,255,0.9), rgba(255,255,255,0.8), rgba(255,255,255,0.1), rgba(255,255,255,0.2)),
  url(https://images.pexels.com/photos/3768894/pexels-photo-3768894.jpeg) center center/cover no-repeat;
}

@media (max-width: 768px) { /** Medium devices (tablets, 768px and down)**/
  #contact_wrapper {
  background: linear-gradient(180deg,rgba(255,255,255,0.5),rgba(255,255,255,0.9),rgba(255,255,255,0.5), rgba(255,255,255,0)),
  url(https://images.pexels.com/photos/3768894/pexels-photo-3768894.jpeg) center center/cover no-repeat;
  }
}
#contact_wrapper .form_width {width:100%;max-width:340px;}
/** contact_wrapper CSS DEFINITIONS *************************************************************** **/  
/** *********************************************************************************************** **/  





/** *********************************************************************************************** **/  
/** app icon link CSS DEFINITIONS ***************************************************************** **/  
.app_icon { display: flex !important; align-items: center !important; } /** .d-flex .align-items-center **/
.app_icon::before {
  content:' ';
  display:inline-block;
  width: 25px;
  height:25px;
  margin-right:0.5em;
  background:transparent url(../images/photo_perfect365_icon.png) left center/auto 100% no-repeat;
}
.app_video::before {background-image:url(../images/video_perfect365_icon.png);} 
.app_studio::before {background-image:url(../images/studio_perfect365_icon.png);} 
.app_ai::before {background-image:url(../images/ai_perfect365_icon.png);} 

.app_web_world::before {background-image:url(../images/ai_travel_icon.png);} 
.app_web_style::before {background-image:url(../images/ai_style_icon.png);} 
.app_web_look::before {background-image:url(../images/ai_perfect365_icon.png);} 
.app_web_skin::before {background-image:url(../images/skin_softener_perfect365_icon.png);} 
.app_web_hair::before {background-image:url(../images/hair_dye_perfect365_icon.png);} 
/** app icon link CSS DEFINITIONS ***************************************************************** **/  
/** *********************************************************************************************** **/    


/** *********************************************************************************************** **/  
/** footer related CSS DEFINITIONS **************************************************************** **/  
footer {background:black url(../images/footer_bg.png) 0 0/auto 100%  repeat;}
footer .footer_logo {width:100%;max-width:200px;}
footer .app_wrapper {max-width:315px;}   
footer .app_wrapper a {
  border-radius: var(--bs-border-radius-pill) !important; /** rounded-pill **/

  background-color:#333333;
  
  padding:0.3em 0.6em 0.3em 1em;
     
}   
@media (min-width: 768px) { /** Medium devices (tablets, 768px and up) **/
  footer .app_wrapper {max-width:650px;} 
}
/** footer related CSS DEFINITIONS **************************************************************** **/  
/** *********************************************************************************************** **/  










.text_shadow {text-shadow: 1px 1px 1px #ffffff;}
.text_shadow_dark {text-shadow: 1px 1px 1px #999999;}
.hero_body {width:100%;max-width:320px;}
.download_width {width:100%;max-width:420px;}

.hero_fold_height {min-height: calc(100vh - 100px);  	}

    /** *********************************************************************************************** **/ 
    /** social_wrapper CSS DEFINITIONS **************************************************************** **/ 
    .social_wrapper .fa-circle {color:#ffffff;}       /** default circle color **/
    .social_wrapper .fa-brands, .social_wrapper .fa-solid:not(:first-child) {color:#000000;} /** default icon color **/
    
    .social_wrapper .instagram .fa-circle {	
      background: linear-gradient(135deg, #405DE6, #833AB4, #FD1D1D, #fccb0a);
      -webkit-text-fill-color: transparent; /** necessary to cap the graident area within the circle **/
      -webkit-background-clip: text;        /** necessary to cap the graident area within the circle **/
    }      
    .social_wrapper .instagram .fa-brands {color:#ffffff;}  
    
    .social_wrapper .facebook .fa-circle {color:#0575ec;}       
    .social_wrapper .facebook .fa-brands {color:#ffffff;}  
    
    .social_wrapper .youtube .fa-circle {color:#fe0000;}       
    .social_wrapper .youtube .fa-brands {color:#ffffff;}  
    /** social_wrapper CSS DEFINITIONS **************************************************************** **/  
    /** *********************************************************************************************** **/   
    
    
    /** *********************************************************************************************** **/ 
    /** div_laurel CSS DEFINITIONS ******************************************************************** **/  
    .div_laurel {width:265px;text-align:center;display:inline-block;}  
    
    .div_laurel span {
      height:80px;
      width:calc(100% - 60px);
      display: flex;
      align-items: center;
      float:left;
    }  
    .div_laurel::before, .div_laurel::after {
      content:"";
      height:80px;
      width:30px;
      background:transparent url(../images/laurel_left.png) right center/15px auto no-repeat;
      display:block;
      float:left;
    }  
    .div_laurel::after {
      background:transparent url(../images/laurel_right.png) left center/15px auto no-repeat;
    }  
    /** div_laurel CSS DEFINITIONS ******************************************************************** **/  
    /** *********************************************************************************************** **/ 
    
    
    
    
 
    .fold_title {font-size: calc(1.3rem + 0.6vw);font-weight: 600;}






    
/** *********************************************************************************************** **/  
/** navbar CSS DEFINITIONS ************************************************************************ **/  
.navbar .navbar-brand > img {height:33px;}
.navbar .navbar-toggler {width:35px;height:35px; text-align:center;padding:0;}
.navbar [aria-expanded="true"].navbar-toggler .fa-solid::before {content:"\f00d";} 

.navbar .dropdown-menu li:not(:first-child) {
  border-top: dashed 1px #666666;
}
.navbar .active {background:#f0f0f0;}
.navbar .nav-item:hover {background:#f0f0f0;}

/** Large devices (desktops, 992px and down) **/
@media (max-width: 992px) { 
  .navbar .nav-item { border-top: dashed 1px #666666; }
  .navbar .dropdown-menu { 
    --bs-dropdown-border-radius: none; 
    --bs-dropdown-border-width: none;
    border-top: dashed 1px #666666;
    text-align: center;
  }
  
}


/** navbar CSS DEFINITIONS ************************************************************************ **/  
/** *********************************************************************************************** **/  








.gdpr_consent_wrapper {
  /** bg-light **/
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;

  /** text-black **/
 
  --bs-text-opacity: 1;
  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
  /** p-2 **/
  padding: 0.5rem !important;
  /** small **/
  font-size: 0.875em;

  /** text-center **/
  text-align: center !important;

  /** fixed-bottom **/
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;


  /** shadow **/ 
  box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15) !important;
  /** bg_opacity_85 **/
  --bs-bg-opacity: 0.85
}  









/** *********************************************************************************************** **/  
/** background related CSS DEFINITIONS ************************************************************ **/  
.bg_gradient_image {
  background: linear-gradient(0deg,rgba(255,255,255,0.75),rgba(255,255,255,0.75)),
  url(https://images.pexels.com/photos/7134986/pexels-photo-7134986.jpeg?auto=compress&cs=tinysrgb&w=800&h=800&dpr=2) left top/100% 100% no-repeat;  
}

.bg_image_bubble {
  background: linear-gradient(0deg,rgba(255,255,255,0.85),rgba(255,255,255,0.85)),
  url(https://images.pexels.com/photos/220118/pexels-photo-220118.jpeg?auto=compress&cs=tinysrgb&w=600&h=600&dpr=2) center center/cover no-repeat;  
 
}




.bg_gradient_image_horizontal_makeup {
  background: linear-gradient(45deg,rgba(255,255,255,0.95),rgba(255,255,255,0.6),rgba(255,255,255,0.7), rgba(255,255,255,0.95), rgba(255,255,255,0.95)),
  url(https://images.pexels.com/photos/1926620/pexels-photo-1926620.jpeg?auto=compress&cs=tinysrgb&w=800&h=800&dpr=2) center center/cover no-repeat;

}



/** `md` applies to small devices (landscape phones, less than 768px) **/
@media (max-width: 767.98px) { 
  .bg_gradient_image_horizontal_makeup {
    background: linear-gradient(0deg,rgba(255,255,255,0.9), rgba(255,255,255,0.7)),
    url(https://images.pexels.com/photos/1926620/pexels-photo-1926620.jpeg?auto=compress&cs=tinysrgb&w=800&h=800&dpr=2) center center/cover no-repeat;
   
  }
}


.bg_gradient_vertical {
  background: linear-gradient(0deg, #ffffff, #ffdddd, #ffffff);
}

.bg_gradient_diagonal {
  background: linear-gradient(45deg, #ffffff, #ffdddd, #ffffff);
}

.bg_gradient_horizontal {
  background: linear-gradient(90deg, #E6E6FA, #FFFAF0, #FFE4E1);
 
} 

.bg_gradient_radial_fadeout {
  --color_in_center:rgba(226, 246, 255,0.9);
  background: radial-gradient(var(--color_in_center), rgba(255,255,255,0), rgba(255,255,255,0));
}

    
.bg_move_corners { 
  background-size:200% 200% !important; 
  animation: move_bg_position 60s ease infinite;   
} 
@keyframes move_bg_position {
  0% {background-position: left top;}
  25% {background-position: right top;}
  50% {background-position: right bottom;}  
  75% {background-position: left bottom;}  
  100% {background-position: left top;}    
}

.bg_fixed {background-attachment: fixed !important;}
/** background related CSS DEFINITIONS ************************************************************ **/  
/** *********************************************************************************************** **/  












/** *********************************************************************************************** **/  
/** QNA related CSS DEFINITIONS ******************************************************************* **/  
.qna_q, .qna_a {position:relative;padding-left:1.8em;}  
.qna_q::before, .qna_a::before {
  display: inline-block;
  width:1.2em;
  height:1.2em;
  line-height:1.05;

  content:"Q";
  position:absolute;
  left:0;
  color:#FFFFFF;
  font-weight:bold;
  text-align: center;

  background:transparent url(../images/bg_chat_bubble_circle.png) center center/100% auto no-repeat;
}  
.qna_a::before {content:"A";}
/** QNA related CSS DEFINITIONS ******************************************************************* **/  
/** *********************************************************************************************** **/  


.border_bottom_gradient {
  border-bottom:solid rgba(var(--bs-warning-rgb), 1) 3px;
  border-image: linear-gradient(to right, rgba(var(--bs-warning-rgb), 1),rgba(var(--bs-warning-rgb), 0)) 6;
}  

.join_width {width:100%; max-width: 880px;}

.join_width .card {
  background: linear-gradient(45deg, #ffffff,#fceed8 );
}

.join_width .card p:nth-child(1) span:nth-child(1) {color:rgba(var(--bs-warning-rgb), 1);} 
 

.ratio_9x16 {--bs-aspect-ratio: calc(16 / 9 * 100%);}

.hero_msg {width:100%; max-width:320px;}
@media (max-width: 576px) {
  .hero_msg {max-width:300px;}  
}
 

 




.campaign_wrapper .container-xxl {z-index:1029}    
.campaign_wrapper .campaign_carousel .carousel-item {
    background: linear-gradient(to bottom,rgba(255,255,255,0), rgba(255,255,255,0)),
    url(../images/halloween_bg_2025_0.jpg) center center/cover no-repeat;  

 
  }  
.campaign_wrapper .campaign_carousel .carousel-item:nth-child(2) {
  background: linear-gradient(to bottom,rgba(255,255,255,0), rgba(255,255,255,0)),
    url(../images/halloween_bg_2025_1.jpg) center center/cover no-repeat;      

 
  }
.campaign_wrapper .campaign_carousel .carousel-item:nth-child(3) {
  background: linear-gradient(to bottom,rgba(255,255,255,0), rgba(255,255,255,0)),
    url(../images/halloween_bg_2025_2.jpg) center center/cover no-repeat;         

  
  }




  .bg_ai_japanese_anime_hero {
    background: linear-gradient(to bottom,rgba(255,255,255,0.8), rgba(255,255,255,0.5)),
      url(../images/spring_bg_1.jpg) center center/cover no-repeat;         
  
    
    }