@charset "UTF-8";

.cta-button {
color: #FFFFFF;
background: linear-gradient(90deg,rgba(41,167,224,1) 0%,rgba(146,48,142,1) 100%);
padding: 24px 48px;
border: none;
border-radius: 48px;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.06rem;
cursor: pointer;
}
.cta-button img {
width: 24px;
margin-right: 8px;
position: relative;
top: -1px;
}
.cta-button:hover {
opacity: 0.8;
} nav #logo {
width: 350px;
}
.nav-menu {
display: flex;
align-items: center;
column-gap: 24px;
}
nav ul {
display: flex;
column-gap: 16px;
}
.nav_text {
font-size: 14px;
font-weight: 600;
}
nav ul li{line-height:100%;list-style-type:none;text-align:center;}
nav ul li:hover .menu{opacity:1;}
nav ul li a{margin:0 .1em;padding:5px .1em;background:linear-gradient(90deg,#29a7e0, #92308e) right bottom / 0 .11em no-repeat;transition:background-size .4s cubic-bezier(0.215, 0.61, 0.355, 1);}
nav ul li a:hover {background-position:left bottom;background-size:100% .11em;}
nav ul .dropdown {
max-width: 30%;
margin: 10px auto 0 0;
padding: 5px;
transition: all .2s ease-in;
opacity: 0;
overflow: hidden;
position: absolute;
background-color: rgba(234,234,234,0.9);
z-index: 2141733247!important;
}
nav ul li:hover .dropdown{
opacity:1;
display:block;
}
nav ul .dropdown .dropdown_inner {
width: 100%;
margin: 0 auto;
padding: 0 0;
display: block;
}
nav ul .dropdown .dropdown_inner li{
text-align:left;
width:100%;
margin:0 auto 0 auto;
padding:15px 10px;
border:none;
background-color:rgba(255,255,255,0.9);
display:block;
text-decoration:none;
position:relative;-webkit-transition: all .3s;transition: all .3s;
box-shadow:none;box-sizing:border-box;
}
nav ul .dropdown .dropdown_inner li:last-child{
margin:5px auto 0 auto;
}
nav ul .dropdown .dropdown_inner li::before,
nav ul .dropdown .dropdown_inner li::after{position:relative;top:auto;right:auto;bottom:auto;left:auto;z-index:2;content:'';transition:all .3s;}
nav ul .dropdown .dropdown_inner li::before{border-top:none;border-bottom:1px solid #FFFFFF;transform:scale(0, 1);}
nav ul .dropdown .dropdown_inner li::after {border-right:none;border-left:none;transform:scale(1, 0);}
nav ul .dropdown .dropdown_inner li:hover {background-color:rgba(255,255,255,0.5);}
nav ul .dropdown .dropdown_inner li:hover::after,
nav ul .dropdown .dropdown_inner li:hover::before{transform: scale(1);}
#side_nav{width:3%;letter-spacing:0;float:right;position:relative;position:fixed;top:20%;right:0;z-index:2483647;}
#side_nav ul{text-align:center;}
#side_nav ul li{padding:0 0 0 0;}
#side_nav ul #facebook_icon{width:11px;margin:45px auto 30px auto;}
#side_nav ul #facebook_icon path{
fill:#181818;
-webkit-transition: fill 0.3s ease-out;
-moz-transition: fill 0.3s ease-out;
-o-transition: fill 0.3s ease-out;
-ms-transition: fill 0.3s ease-out;
transition: fill 0.3s ease-out;
}
#side_nav ul #facebook_icon a:hover path{
fill:#0facd9;
}
#side_nav ul #twitter_icon{width:16px;margin:0 auto 30px auto;padding: 0 0 0 2px;}
#side_nav ul #twitter_icon path{
fill:#181818;
-webkit-transition: fill 0.3s ease-out;
-moz-transition: fill 0.3s ease-out;
-o-transition: fill 0.3s ease-out;
-ms-transition: fill 0.3s ease-out;
transition: fill 0.3s ease-out;
}
#side_nav ul #twitter_icon a:hover path{
fill:#0facd9;
}
#side_nav ul #instagram_icon{width:16px;margin:0 auto 30px auto;padding: 0 0 0 2px;}
#side_nav ul #instagram_icon path{
fill:#181818;
-webkit-transition: fill 0.3s ease-out;
-moz-transition: fill 0.3s ease-out;
-o-transition: fill 0.3s ease-out;
-ms-transition: fill 0.3s ease-out;
transition: fill 0.3s ease-out;
}
#side_nav ul #instagram_icon a:hover path{
fill:#0facd9;
}
#side_nav ul #line_icon{width:16px;margin:0 auto 30px auto;padding: 0 0 0 2px;}
#side_nav ul #line_icon path{
fill:#181818;
-webkit-transition: fill 0.3s ease-out;
-moz-transition: fill 0.3s ease-out;
-o-transition: fill 0.3s ease-out;
-ms-transition: fill 0.3s ease-out;
transition: fill 0.3s ease-out;
}
#side_nav ul #line_icon a:hover path{
fill:#0facd9;
}
#side_nav ul li#line_icon path.cls-1{fill:#181818;}
#side_nav ul li#line_icon path.cls-2{fill:#fff;}
#side_nav ul li#line_icon a:hover path{fill:#0facd9;}
#side_nav ul #url{color:#181818;font-size:60%;margin:0 auto 0 auto;-webkit-writing-mode:vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;display:inline-block;}
#drower_sns{display:none;}
#drower_sns li#drower_facebook_icon{display:none;}
#drower_sns li#drower_twitter_icon{display:none;}
#drower_sns li#drower_line_icon{display:none;}
.is-fixed{width:100%;position:fixed;top:0;right:0;z-index:2;}
@media only screen and (max-width:1112px) {	
#side_nav{right:10px;}
}
@media only screen and (max-width:1024px) {	
nav{width:100%;flex-direction:column;display:block;}
nav li a:link{color:#FFFFFF;text-decoration:none; padding:0 0 0 0;transition:all .2s ease-in;}
nav li a:visited{color:#FFFFFF;text-decoration:none;}
nav li a:hover{color:#3c154b;text-decoration:none;}
nav li a:active{color:#3c154b;text-decoration:none;}
nav #logo{width:70%; margin:20px auto 10px auto;filter:invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(300%) contrast(101%);}
nav ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 0;
margin-top: 20px;
}
nav ul li:first-child{ }
nav ul li{
font-size: 16px;
border-bottom: #FFFFFF 1px solid;
padding: 8px 0;
}
nav ul li:hover {
color: #3c154b;
background-color:rgba(0,0,0,0.3);
}
nav ul li a{ }
nav ul li a:link{color:#ffffff;text-decoration:none;}
nav ul li a:visited{color:#ffffff;text-decoration:none;}
nav ul li a:hover{color:#0facd9;text-decoration:none;}
nav ul li a:active{color:#0facd9;text-decoration:none;}
nav ul .dropdown{max-width:100%;margin:0 auto 0 auto;padding:0 0 5px 5px;opacity:1;overflow:inherit;position:relative;background-color:rgba(234,234,234,0);box-sizing:border-box;overflow:hidden}	
nav ul li:hover .dropdown{opacity:1;display:block;}
nav ul .dropdown .dropdown_inner{width:100%;margin:0 auto;padding:0 0!important;overflow:hidden;}
nav ul .dropdown .dropdown_inner li{
width:50%!important;height:100%!important;font-size:80%;
margin:0 0 0 0;
padding:15px 0!important;float:none!important;
border:none;
background-color:rgba(255,255,255,0);display:flex;
position:relative;-webkit-transition: all .3s;transition: all .3s;
box-sizing:border-box!important;
overflow:hidden;
}
nav ul .dropdown .dropdown_inner li:last-child{
margin:0 0 0 0;
}
nav ul .dropdown .dropdown_inner li:hover {background-color:rgba(255,255,255,0);}	
nav ul li .nav_text {
font-size: 16px;
letter-spacing: 0.1em;
position: relative;
display: block;
box-sizing: border-box;
max-width: 180px;
text-align: left;
padding-left: 40px;
}
nav ul li .nav_text:after {
content: '';
display: block;
position: absolute;
top: 50%;
margin-top: -0.2em;
left: 0.7em;
width: 0.5em;
height: 0.5em;
border-top: #54caff 1px solid;
border-right: #54caff 1px solid;
transform: rotate(45deg);
}
nav ul li .nav_arrow{display:none;}
.nav_accordion ul {
width:100%;
padding:0;
}
.nav_accordion li {
position:relative;
border-bottom:1px solid #ccc;
list-style:none;
}
.nav_accordion li:first-child {
border-top:1px solid #ccc;
}
.nav_accordion > ul > li > a {
display: block;
text-decoration: none;
cursor: pointer;
padding: 0;
position: relative;
}
.nav_accordion li .nav_accordion_icon,
.nav_accordion li .nav_accordion_icon span {
display: inline-block;
transition: all .3s;
box-sizing: border-box;
}
.nav_accordion li .nav_accordion_icon {
position: absolute;
width: 20px;
height: 20px;
top:10px;
right:20px;
}
.nav_accordion li .nav_accordion_icon span {
position: absolute;
width: 100%;
height: 1px;
background-color: #ccc;
}
.nav_accordion li .nav_accordion_icon span:nth-of-type(1) {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
.nav_accordion li .nav_accordion_icon span:nth-of-type(2) {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.nav_accordion li .nav_accordion_icon.active span:nth-of-type(1) {
display:none;
}
.nav_accordion li .nav_accordion_icon.active span:nth-of-type(2) {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
#side_nav{display:none;}
#drower_sns{width:60%;margin:30px auto 0 auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;}
#drower_sns #drower_facebook_icon{width:14px;margin:0 auto 0 auto;display:block;}
#drower_sns #drower_facebook_icon path{
fill:#FFFFFF;
-webkit-transition: fill 0.3s ease-out;
-moz-transition: fill 0.3s ease-out;
-o-transition: fill 0.3s ease-out;
-ms-transition: fill 0.3s ease-out;
transition: fill 0.3s ease-out;
}
#drower_sns #drower_facebook_icon a:hover path{
fill:#1c1c1c;
}
#drower_sns #drower_twitter_icon{width:25px;margin:3px auto 0 auto;display:block;}
#drower_sns #drower_twitter_icon path{
fill:#FFFFFF;
-webkit-transition: fill 0.3s ease-out;
-moz-transition: fill 0.3s ease-out;
-o-transition: fill 0.3s ease-out;
-ms-transition: fill 0.3s ease-out;
transition: fill 0.3s ease-out;
}
#drower_sns #drower_twitter_icon a:hover path{
fill:#1c1c1c;
}
#drower_sns #drower_instagram_icon{width:26px;margin:2px auto 0 auto;padding: 0 0 0 2px;display:block;}
#drower_sns #drower_instagram_icon path{
fill:#FFFFFF;
-webkit-transition: fill 0.3s ease-out;
-moz-transition: fill 0.3s ease-out;
-o-transition: fill 0.3s ease-out;
-ms-transition: fill 0.3s ease-out;
transition: fill 0.3s ease-out;
}
#drower_sns #drower_instagram_icon a:hover path{
fill:#1c1c1c;
}
#drower_sns #drower_line_icon{width:25px;margin:3px auto 0 auto;display:block;}
#drower_sns #drower_line_icon path{
fill:#FFFFFF;
-webkit-transition: fill 0.3s ease-out;
-moz-transition: fill 0.3s ease-out;
-o-transition: fill 0.3s ease-out;
-ms-transition: fill 0.3s ease-out;
transition: fill 0.3s ease-out;
}
#drower_sns #drower_line_icon a:hover path{
fill:#1c1c1c;
}
nav ul#nav_bnr{max-width:100%;width:90%;margin:0 auto;display:flex;}
nav ul#nav_bnr li{max-width:30%;display:block;border-bottom:none;}
nav ul#nav_bnr li a{border:none;display:block;position:relative;}
nav ul#nav_bnr li::before,
nav ul#nav_bnr li::after {
position:relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 2;
content: '';
transition: all .0;
}
nav ul#nav_bnr li:hover {
color: #FFFFFF;
background-color:transparent;
}
nav ul#nav_bnr li:hover::after,
nav ul#nav_bnr li:hover::before {
transform: scale(0);
}	
}
@media (max-width: 1600px) and (min-width: 1025px) {
nav #logo { width: 220px !important; }
.nav_text { font-size: 13px !important; }
.nav-menu { column-gap: 8px !important; }
nav ul { column-gap: 8px !important; }
.cta-button { padding: 14px 20px !important; font-size: 14px !important; }
}