@charset "utf-8";
/* CSS Document */

/* body */

html, body
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #0f0;
font-size: 24px;
font-family: "Segoe UI Light", "Segoe UI", Segoe, Helvetica, Arial, sans-serif;
}

/* structure */

.s001
{
display: table;
margin: 0 auto;
width: 100%;
position: relative;
}

.center
{
display: table;
margin: 0 auto;
width: 90%;
}

.cnt
{
display: table-cell;
}


/* img */

img
{
border: 0;
}

/* a */

a
{
text-decoration: none;
}

a:hover
{
text-decoration: none;
}

/* align */

.top
{
vertical-align: top;
}

.btm
{
vertical-align: bottom;
}

.mdl
{
vertical-align: middle;
}

.lft
{
float: left;
}

.rgt
{
float: right;
}

/* font */

.f001
{
font-size: 200%;
line-height: 100%;
}

.f002
{
font-size: 140%;
line-height: 120%;
}

.f003
{
font-size: 130%;
line-height: 130%;
}

.f004
{
font-size: 100%;
line-height: 100%;
}

.f005
{
font-size: 80%;
line-height: 80%;
}

/* cta */

.cta
{
display: inline-table;
padding: 6px 30px 10px 30px;
border-radius: 30px;
background-color: #6d2077;
border: 1px solid #6d2077;
color: #fff;
opacity: 1.0;
}

.cta:hover
{
background-color: #990099;
border: 1px solid #990099;
color: #fff;
opacity: 1.0;
}

/* background */

.b000
{
background-color:#f9f9f9;
background-size: cover;
background-position: center;
}

.b001
{
background-color: #ffffff;
}

.b002
{
background-color: #000000;
}	

.b003
{
background-color: #6d2077;
}

.b004
{
background-color: #444444;
}

.b005
{
background-color: #cccccc;
}

.b006
{
background-color: #dddddd;
}

.b007
{
background-color: #eeeeee;
}

.b008
{
background-color: #fafafa;
}

.b009
{
background-color: #f9f9f9;
}


/* color */

.c001
{
color: #fff;
}

.c002
{
color: #ccc;
}

.c003
{
color: #F6F6F6;
}

.c004
{
color: #444;
}

.c005
{
color: #6d2077;
}

/* modules */

.menu, .m100, .m200, .m300, .m400, .m500, .m600, .foot
{
display: table;
clear: both;
width: 100%;
}

.e001
{
display: table;
}

/* menuon */

.menuon
{
display: none;
clear: both;
width: 100%;
z-index: 3;
position: absolute;
}

.menuon .e001
{
width: 100%;
}

.menuon .l001
{
display: table;
width: 100%;
margin: 40px 0 40px 0;
}

.menuon .l002
{
display: table;
width: 100%;
margin: 40px 0 80px 0;
}

.menuon a
{
display: table;
}

.menuon .l001 .spc
{
margin: 0 20px 0 0;
}

.menuon .l001 img
{
height: 40px;
}
	
.menuon .l002 .cnt2
{
display: table-cell;
vertical-align: middle;
font-size: 140%;
line-height: 140%;
padding: 10px 10px 10px 30px;
background-size: 20px;
background-position: center left;
background-repeat: no-repeat;
}
	
.menuon .l001 a
{
opacity: 1.0;
}	

.menuon .l001 a:hover
{
opacity: 0.8;
}

.menuon .l002 a
{
width: 100%;
color: #444;
}	

.menuon .l002 a:hover
{
color: #6d2077;
background-color: #f9f9f9;
}

/* menu */

.menu
{
z-index: 2;
position: absolute;
}

.menu .e001
{
width: 100%;
}

.menu .l001
{
display: table;
width: 100%;
margin: 40px 0 40px 0;
}

.menu a
{
display: table;
}

.menu .l001 img
{
height: 40px;
}
	
.menu .l001 a
{
opacity: 1.0;
}	

.menu .l001 a:hover
{
opacity: 0.8;
}


/* m100 */
.m100
{
background-repeat: no-repeat;
background-position: bottom center;
background-size: 100%;
transition: all 2s;
}

.m100 .e001
{
float: left;
width: 50%;
min-height: 650px;
}

.m100 .e001 .cnt
{
vertical-align: bottom;
text-align: left;
padding: 10% 0 10% 0;
}

.m100:hover
{
background-size: 104%;
}


/* m100 */
.m100e
{
background-repeat: no-repeat;
background-position: bottom center;
background-size: 100%;
transition: all 2s;
}

.m100e .e001
{
float: left;
width: 50%;
min-height: 500px;
}

.m100e .e001 .cnt
{
vertical-align: bottom;
text-align: left;
padding: 10% 0 5% 0;
}

.m100e:hover
{
background-size: 104%;
}




/* m200 */
.m200
{
background-repeat: no-repeat;
background-position: bottom left;
background-size: auto 100%;
transition: all 2s;
}

.m200 .e001
{
float: right;
width: 45%;
min-height: 650px;
}

.m200 .e001 .cnt
{
vertical-align: middle;
text-align: right;
padding: 5% 0 5% 0;
}

.m200:hover
{
background-size: auto 104%;
}


/* m300 */
.m300 .center
{
width: 100%;
}

.m300 .e001
{
width: 100%;
}

.m300 .e001 .cnt
{
vertical-align: middle;
text-align: center;
padding: 5% 0 2% 0;
}

.m300 .l001
{
display: table;
margin: 0 auto;
width: 80%;
}

.m300 .l002
{
display: table;
margin: 0 auto;
width: 90%;
}

.m300 .f002
{
margin: 0 0 30px 0;
}

/* m300 */ /* carousel */
.a000 {
display: block;
width: 100%;
height: 400px;
overflow: hidden;
}

.a001 {
display: table;
width: 400%;
height: 400px;
position: relative;
overflow: hidden;
animation-name: ani01;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: forwards;
}
	
.a002 {
display: table;
float:left;
width: 6.25%;
height: 400px;
opacity: 1.0;
}

.a002:hover {
opacity: 0.9;
}

.a002 .cnt2
{
display: table-cell;
padding: 10px;
}

.a003 {
display: table;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
background-position: top center;
box-shadow: 0 0 0 2px #fff inset;
}

.a003 .cnt3
{
display: table-cell;
vertical-align: bottom;
text-align: center;
}

.a003 .cnt3 .f004
{
width: 100%;
padding: 20px 0 20px 0;
}

.a003:hover .cnt3 .f004
{
color: #6d2077;
}

@keyframes ani01
{
0% {
left:0px; 
}
30% {
left:0px; 
}

34% {
left:-100%; 
}
63% {
left:-100%; 
}

67% {
left:-200%; 
}
96% {
left:-200%; 
}

100% {
left:-300%; 
}
}

/* m400 */
.m400
{
background-repeat: no-repeat;
background-position: bottom right;
background-size: auto 100%;
transition: all 2s;
}

.m400 .e001
{
float: left;
width: 45%;
min-height: 650px;
}

.m400 .e001 .cnt
{
vertical-align: middle;
text-align: left;
padding: 5% 0 5% 0;
}

.m400:hover
{
background-size: auto 104%;
}


/* m500 */
.m500
{
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
transition: all 2s;
}

.m500 .e001
{
margin: 0 auto;
width: 50%;
min-height: 650px;
}

.m500 .e001 .cnt
{
vertical-align: middle;
text-align: center;
padding: 5% 0 5% 0;
}

.m500:hover
{
background-size: 104%;
}

/* m600 */
.m600 .e001
{
margin: 0 auto;
width: 80%;
}

.m600 .e001 .cnt
{
vertical-align: middle;
text-align: center;
padding: 5% 0 5% 0;
}

.m600 .cta
{
display: inline-table;
padding: 6px 30px 10px 30px;
border-radius: 30px;
background-color: transparent;
border: 1px solid #999;
color: #444;
opacity: 1.0;
}

.m600 .cta:hover
{
background-color: #6d2077;
border: 1px solid #6d2077;
color: #fff;
opacity: 1.0;
}


/* gallery */

.gallery
{
display: table;
clear: both;
width: 100%;
}

.gallery .cnt
{
padding: 20px 0 20px 0;
}

.gallery .e001
{
display: table;
float: left;
margin: 0 1% 1% 0;
width: 24%;
height: 300px;
background-size: cover;
background-position: center top;
box-shadow: 0 0 0 1px #ccc inset;
opacity: 1.0;
}

.gallery .e001:hover
{
cursor: zoom-in;
opacity: 0.9;
}


/* foot */
.foot .e001
{
width: 100%;
}

.foot .l001, .foot .l002
{
display: table;
width: 100%;
margin: 40px 0 40px 0;
}

.foot a
{
display: table;
}

.foot .l001 .spc
{
margin: 0 20px 0 0;
}

.foot .l001 img
{
height: 40px;
}
	
.foot .l002 .cnt2
{
display: table-cell;
vertical-align: middle;
font-size: 80%;
line-height: 80%;
padding: 10px 10px 10px 30px;
background-size: 20px;
background-position: center left;
background-repeat: no-repeat;
}
	
.foot .l001 a
{
opacity: 0.5;
}	

.foot .l001 a:hover
{
opacity: 1.0;
}

.foot .l002 a
{
opacity: 1.0;
color: #444;
}	

.foot .l002 a:hover
{
opacity: 0.5;
color: #444;
}


/* form */

.form
{
display: table;
width: 100%;
margin: 0;
}

.form img
{
height: 30px;
margin: 10px;
}

/* modal */

.modal
{
display:none;
z-index:4;
padding-top:50px;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.4);
}

.modal-content
{
margin:auto;
position:relative;
padding:0;
outline:0;
width:800px;
}

.zoom
{
animation:ani02 0.6s
}

@keyframes ani02
{
from{transform:scale(0)} 
to{transform:scale(1)}
}

.zoomout
{
width: 100%;
cursor: zoom-out;
}



/* margin */

.mxxx
{
margin: 0 0 10px 0;
}

.mxxa
{
margin: 0 0 30px 0;
}


.m600 .cta
{
margin: 0 20px 20px 0;
}