html {

    box-sizing: border-box;
    --bgColorMenu : #1d1d27;
    --duration: .7s;    

}

html *,
html *::before,
html *::after {

    box-sizing: inherit;

}

body{
    
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration);
    flex-direction: column;
    font-family: 'Single Day', cursive;
    color: #321d2f;
    transition: color var(--duration);

}

.navbar-light .navbar-brand {
    line-height: 1.68;
    text-align: left;
    color: #35465d; 
  }

.section {
    margin-top: 50px;
}

.title {
    line-height: 1.67;
    text-align: center;
  }
  
  .subtitle {
    line-height: 1.53;
    text-align: center;
  }


.menu{

    margin: 0;
    display: flex;
    /* Works well with 100% width  */
    width: 100%;
    font-size: 1.5em;
    padding: 0 2.85em;
    position: relative;
    align-items: center;
    justify-content: center;
    background-color: var(--bgColorMenu);
    
}

.menu__item{
    
    all: unset;
    flex-grow: 1;
    z-index: 100;
    display: flex;
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    align-items: center;
    will-change: transform;
    justify-content: center;
    padding: 0.55em 0 0.85em;
    transition: transform var(--timeOut , var(--duration));
    
}

.menu__item::before{
    
    content: "";
    z-index: -1;
    width: 4.2em;
    height: 4.2em;
    border-radius: 50%;
    position: absolute;
    transform: scale(0);
    transition: background-color var(--duration), transform var(--duration);
    
}


.menu__item.active {

    transform: translate3d(0, -.8em , 0);

}

.menu__item.active::before{
    
    transform: scale(1);
    background-color: var(--bgColorItem);

}

.menu-context {
    color: white;
}

.menu-arrow {
    margin-bottom: -5px;
}

.icon{
    
    width: 2.6em;
    height: 2.6em;
    stroke: white;
    fill: transparent;
    stroke-width: 1pt;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    
}

.menu__item.active .icon {

    animation: strok 1.5s reverse;
    
}

@keyframes strok {

    100% {

        stroke-dashoffset: 400;

    }

}

.menu__border{

    left: 0;
    bottom: 99%;
    width: 10.9em;
    height: 2.4em;
    position: absolute;
    clip-path: url(#menu);
    will-change: transform;
    background-color: var(--bgColorMenu);
    transition: transform var(--timeOut , var(--duration));
    
}

.svg-container {

    width: 0;
    height: 0;
}


@media screen and (max-width: 50em) {
    .menu{
        font-size: .8em;
    }
}

#example {
    width: 150px;
    height: 80px;
}

.file-upload {
    padding: 10% 3%;
    margin: 0 auto;
    border-radius: 10px;
    border: solid 1.5px;
}
.file-upload-btn {
  width: 100%;
  margin: 0;
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 4px;
  border-bottom: 4px solid;
  transition: all .2s ease;
  outline: none;
  text-transform: uppercase;
  font-weight: 700;
}

.file-upload-btn:hover {
  color: #ffffff;
  transition: all .2s ease;
  cursor: pointer;
}

.file-upload-btn:active {
  border: 0;
  transition: all .2s ease;
}

.file-upload-content {
    display: none;
    text-align: center;
}
#loading {
    display: none;
    text-align: center;
}
#result {
    display: none;
    text-align: center;
}

.file-upload-input {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  outline: none;
  opacity: 0;
  cursor: pointer;
}

.image-upload-wrap {
    width: 60%;
    margin: 0 auto;
    position: relative;
    object-fit: contain;
    border-radius: 10px;
    border: dashed 1.5px #35465d;
    transition: background-color var(--duration), transform var(--duration);
}

.image-dropping,
.image-upload-wrap:hover {
    background-color: #35465d82;
    border: 1.5px dashed #ffffff;
}

.image-title-wrap {
  padding: 0 15px 15px 15px;
  color: #222;
}

.drag-text {
  text-align: center;
}

.drag-text h3 {
  font-weight: 500;
  text-transform: uppercase;
}

.file-upload-image {
  max-height: 60%;
  max-width: 60%;
  margin: auto;
  padding: 10px;
}

.try-again-btn {
  border-radius: 40px;
  border: solid 1.5px #35465d;
  background-color: #35465d;
}

.try-again-text {
  display: block;
  font-size: 1.5rem;
  text-align: center;
  color: #ffffff;
  padding: 4px 15px;
}

.remove-image:hover {
  background: #c13b2a;
  color: #ffffff;
  transition: all .2s ease;
  cursor: pointer;
}

.remove-image:active {
  border: 0;
  transition: all .2s ease;
}

.result-message {
    font-size: 2rem;
}

.face-explain {
    font-size: 1.5rem;
}
.forehead-before-face-title {
    color: #3d6cb9;
}
.forehead-after-face-title {
    color: #3d6cb9;
}
.eye-before-title {
    color: #3186b2;
}
.eye-after-title {
    color: #3186b2;
}
.nose-before-title {
    color: #0881a3;
}
.nose-after-title {
    color: #0881a3;
}
.chin-before-title {
    color: #163172;
}
.chin-after-title {
    color: #163172;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.ad-banner {
    max-width: 320px;
}

a:link { 
    color: black; text-decoration: none;
}
a:visited { 
    color: black; text-decoration: none;
}
a:hover { 
    color: black; text-decoration: none;
}

.kakao-share .retry {
    display: flex;
    flex-direction: column;
}

.r-link{
	--uirLinkDisplay: var(--rLinkDisplay, inline-block);
	--uirLinkTextColor: var(--rLinkTextColor);
	--uirLinkTextDecoration: var(--rLinkTextDecoration, none);

	display: var(--uirLinkDisplay) !important;
	color: var(--uirLinkTextColor) !important;
	text-decoration: var(--uirLinkTextDecoration) !important;
}

/* The component will reset browser's styles of titles */

.r-title{
	--uirTitleMarginTop: var(--rTitleMarginTop, 0);
	--uirTitleMarginBottom: var(--rTitleMarginBottom, 0);

	margin-top: var(--uirTitleMarginTop) !important;
	margin-bottom: var(--uirTitleMarginBottom) !important;
}

/*
=====
CORE STYLES
=====
*/

.animated-underline{
	--uiAnimatedUnderlineWidth: var(--animatedUnderlineWidth, 100%);
	--uiAnimatedUnderlineHeight: var(--animatedUnderlineHeight, 2px);
	--uiAnimatedUnderlineBgColor: var(--animatedUnderlineBgColor, currentColor);
	--uiAnimatedUnderlinePositionX: var(--animatedUnderlinePositionX, left);
	--uiAnimatedUnderlinePositionY: var(--animatedUnderlinePositionY, bottom);

	/*
		1. For multi-line animated underline the "inline" value for the display property is compulsory.
		2. Adds opportunity to create multi-line padding
	*/

	--rLinkDisplay: inline; /* 1 */

	background-image: linear-gradient(0, var(--uiAnimatedUnderlineBgColor) 0, var(--uiAnimatedUnderlineBgColor));
	background-size: var(--uiAnimatedUnderlineWidth) var(--uiAnimatedUnderlineHeight);
	background-position: var(--uiAnimatedUnderlinePositionX) var(--uiAnimatedUnderlinePositionY);
	background-repeat: no-repeat;
	
	-webkit-box-decoration-break: clone; /* 2 */
	box-decoration-break: clone; /* 2 */
	
	will-change: background-size;
	transition: background-size .25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/*
=====
SETTINGS
=====
*/

:root{
	--animatedUnderlineHeight: 1rem;
	--animatedUnderlineBgColor: var(--accentColor);
}	

.animated-underline_type1{
	--animatedUnderlineWidth: 100%;
}

.animated-underline_type1:hover{
	--animatedUnderlineHeight: 100%;
}

.animated-underline_type2{
	--animatedUnderlineWidth: 100%;
}

.animated-underline_type2:hover{
	--animatedUnderlineWidth: 0;
}

.animated-underline_type3{
	--animatedUnderlineHeight: 0;
}

.animated-underline_type3:hover{
	--animatedUnderlineHeight: 100%;
}

.animated-underline_type4{
	--animatedUnderlineWidth: 0;
}

.animated-underline_type4:hover{
	--animatedUnderlineWidth: 100%;
}

.animated-underline_type5{
	--animatedUnderlineWidth: 100%;
	--animatedUnderlineHeight: 5px;
	--animatedUnderlinePositionY: 90%;
}

.animated-underline_type5:hover{
	--animatedUnderlineHeight: 1rem;
}

/*
=====
DEMO
=====
*/

:root{
	--mainColor: #673AB7;
	--accentColor: #ff7eb2;
	--accentColorDark: #f15493;
	--blackColor: #222;
	--whiteColor: #fff;
	--rLinkTextColor: var(--blackColor);
}

.page{
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}

.page__name-effect{
	display: inline-flex;
	align-items: center;
	font-weight: 700;
	font-size: .875rem;
}

.page__name-effect::before{
	content: "";
	width: 3.75rem;
	height: 2px;
	background-color: var(--mainColor);
	margin-top: .25rem;
	margin-right: .625rem;
}

.page__section:nth-child(n+2){
	margin-top: 5rem;
}

.page__group{
	margin-top: 2rem;
}

.news{
	position: relative;

	padding: 70px 6%;
	border-top: 6px solid var(--mainColor);
	border-radius: 4px;

	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
	background-color: var(--whiteColor);
}

.news:nth-child(n+2){
	margin-top: 3rem;
}

.news__date{
	font-size: 0.9375rem;
	font-weight: 700;
}

.news__title{
	font-family: 'Amaranth', sans-serif;
	line-height: 1.25;
}

.news__link::after{
	content: "";
	width: 100%;
	height: 100%;

	position: absolute;
	top: 0;
	left: 0;
}

.news__content{
	margin-top: 1.875rem;
}

p{
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.78;
}

@media (max-width: 640px){

	html{
		font-size: 93.75%;
	}
}

@media (min-width: 641px) and (max-width: 768px){

	html{
		font-size: 100%;
	}
}

@media (min-width: 769px) and (max-width: 960px){

	html{
		font-size: 106.25%;
	}
}

@media (min-width: 961px){

	html{
		font-size: 112.5%;
	}
}

@media (max-width: 960px){

	.page{
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.page__name-effect{
		padding-left: .625rem;
		padding-right: .625rem;
	}

	.news__title{
		--rTitleMarginTop: .75rem;
		font-size: 1.75rem;
	}
}

@media (min-width: 961px){

	.page{
		padding: 80px 50px;
	}

	.news__header{
		display: flex;
		align-items: flex-start;

		padding-left: 1.5rem;
		padding-right: 2.5rem;
	}

	.news__date{
		flex-shrink: 0;
		font-family: 'Amaranth', sans-serif;

		margin-right: 40px;
		text-align: center;
	}

	.news__day{
		line-height: 1;
		display: block;
		font-size: 4.333rem;
		color: var(--accentColorDark);
	}

	.news__year{
		display: block;
		font-size: 1rem;
		margin-top: 5px;
	}

	.news__title{
		font-size: 2.5rem;
	}	
}

@media (min-width: 1301px){

	.page__group{
		padding-left: 190px;
		padding-right: 100px;
	}
}

a {
    font-family: 'Single Day', cursive;
}

.kakao-ad {
    margin: 0 auto;
}