@import (once) "default.less";
@import (once) "global.less";
@import "../js/css/hover.css";
@import "../js/css/animate.css";
@import "../js/css/effeckt.css";

#challenge .headerImage {background-image: url(../../assets/images/image_challenge.jpg);}

@c1:#429fd7;
@c2:#46a6fc;
@c3:#003cb3;

/*  ///////////////////////*/
#canvas {
position:fixed;
width:100%;
height:100%;
overflow: hidden;
opacity: .3;
z-index:0;
}

/*  ///////////////////////*/
main{
font-size:12.5pt;
background:#e4f0fa;
border:1px #e4f0fa solid;
}


/* top ///////////////////////*/
.top{
.pr;
z-index:10;
padding:50px 0 30px 0;
.tac;

h2{
font-size:14pt;
color:@c1;
border-bottom:5px @c1 dotted;
width:80%;
.center;
padding:0 0 10px 0;
}
h1{
padding:30px 0 0 0;
line-height:100%;
img{
max-width:80%;
}
}

}


@media (max-width:700px) {
.top{
padding:40px 0 20px 0;

h2{
font-size:12pt;
border-bottom:3px @c1 dotted;
width:90%;
padding:0 0 5px 0;
}

h1{
padding:15px 0 0 0;
}

}
}


/* intro ///////////////////////*/
.intro{
.pr;
z-index:10;

article{
.pr;
}

.bg{
padding:30px 160px 30px 60px;
background:#FFF;
.r(20px);
color:@c2;
.bold;
font-size:11pt;
line-height:250%;
width:85%;
}

.chara1{
.pa;
right:0;
bottom:0;
width:270px;
filter:drop-shadow(3px 3px 5px rgba(0,0,0,.2));
}

}


@media (max-width:1100px) {
.intro{

article{
width:90%;
}

}
}


@media (max-width:700px) {
.intro{

.bg{
padding:20px 20px 160px 20px;
font-size:11pt;
line-height:180%;
width:100%;
}

.chara1{
.pa;
right:50%;
bottom:-30px;
width:160px;
margin-right:-80px;
}

}
}


/* profile ///////////////////////*/
.profile{
.pr;
z-index:10;
padding:120px 0 100px 0;

article{
.pr;
}

.bg{
.pr;
background:#FFF;
.r(20px);
}

h2{
img{
.pa;
width:300px;
transform: rotate(-15deg);
top:-60px;
}
}

.title{
padding:50px 0 50px 0;
.tac;

h5{
color:@c1;
letter-spacing:1.7em;
font-size:9pt;
line-height:100%;
}
h4{
color:@c1;
font-size:15pt;
padding:10px 0 15px 0;
line-height:100%;
}
h3{
line-height:100%;
}
img{
width:40%;
}

}

}


@media (max-width:1100px) {
.profile{

article{
width:90%;
}

}
}


@media (max-width:700px) {
.profile{

h2{
img{
.pa;
width:220px;
top:-50px;
left:20px;
}
}

.title{
padding:50px 0 20px 0;
.tac;

h5{
color:@c1;
letter-spacing:1em;
font-size:8pt;
}
h4{
color:@c1;
font-size:13pt;
padding:10px 0 10px 0;
}
img{
width:60%;
}

}

}
}



/* profile pad ///////////////////////*/
.pad{
.pr;
width:70%;
padding:0 0 70px 0;
margin:0 auto 0 auto;
border-bottom:7px @c1 dotted;

.chara2{
.pa;
bottom:70px;
width:300px;
filter:drop-shadow(3px 3px 5px rgba(0,0,0,.2));
}

.wrap{
margin-left:auto;
margin-right:0;
width:420px;
height:590px;
background:url(../image/pad.png) no-repeat 0 0;
background-size:contain;
padding:80px 0 0 50px;
/*
background-color:#a5d2d2;
.r(20px);
*/
}

td{
font-size:14pt;
line-height:140%;
padding:10px;
.vat;
}
td:first-child{
color:#3865a6;
.bold;
}
i{
color:#f98b9f;
}

}


@media (max-width:1100px) {
.pad{

.chara2{
.pa;
width:30%;
}

}
}

@media (max-width:900px) {
.pad{
width:90%;

}
}

@media (max-width:700px) {
.pad{
padding:0 0 160px 0;

.wrap{
.fn;
.center;
width:280px;
height:395px;
padding:50px 0 0 30px;
}


td{
font-size:10pt;
line-height:150%;
padding:5px;
.vat;
}
td:first-child{
color:#3865a6;
.bold;
}
i{
color:#f98b9f;
}

.chara2{
.pa;
bottom:40px;
left:50%;
margin-left:-80px;
width:160px;
}

}
}


.slider2{
width:1000px;
}

.slider2 li{
.dib;
width:500px;
.vam;
.bs;
}


/* profile sercret ///////////////////////*/
.sercret{
.pr;
.tac;

.chara3{
padding:50px 0 0 0;
width:300px;
filter:drop-shadow(3px 3px 5px rgba(0,0,0,.2));
}

.p1{
.pa;
z-index:1;
bottom:250px;
right:80px;
width:250px;
}

.slider{
margin-top:-120px;
padding:0 0 40px 0;
.pr;
z-index:3;
bottom:0;
background:url(../image/profile4.svg) no-repeat 0 100%;
.oh;
}


li{
.dib;
padding:0 30px;
.vam;
}

.box{
.dt;
width:280px;
height:165px;
background:url(../image/profile3.svg) no-repeat 0 0;
background-size:contain;
.tac;
color:#FFF;
.bold;
line-height:180%;
}
p{
.dtc;
.vam;
}
small{
.db;
line-height:140%;
}

}


@media (max-width:1100px) {
.sercret{

.chara3{
width:35%;
}

.p1{
right:40px;
width:25%;
}

.slider{
margin-top:-80px;
}

.box{
width:240px;
height:145px;
font-size:11pt;
}

}
}


@media (max-width:700px) {
.sercret{

.chara3{
padding:20px 0 0 0;
width:160px;
}

.p1{
bottom:180px;
right:10px;
width:30%;
}

.slider{
margin-top:-65px;
}

li{
padding:0 20px;
}

.box{
width:200px;
height:125px;
font-size:9pt;
}

}
}



/* profile memo ///////////////////////*/
.memo{
padding:50px 150px;
color:@c1;
.bold;
.tac;
}

.chara4{
.pa;
bottom:-100px;
left:-40px;
filter:drop-shadow(3px 3px 5px rgba(0,0,0,.2));
}


@media (max-width:1100px) {
.memo{
padding:30px 150px;
}
}

@media (max-width:700px) {
.memo{
padding:30px 0 100px 0;
font-size:10pt;
}

.chara4{
bottom:-100px;
left:50%;
margin-left:-80px;
width:160px;
}

}



/* gallery ///////////////////////*/
.gallery{
.pr;
z-index:10;
padding:80px 0 50px 0;
.tac;

article{
.pr;
}

.bg{
.pr;
background:#FFF;
.r(20px);
padding:0 0 50px 0;
}

h2{
img{
.pa;
width:250px;
transform: rotate(-15deg);
top:-50px;
left:50px;
}
}

.title{
padding:50px 0 50px 0;
.tac;
h3{
color:@c1;
}
}

.chara5{
.pa;
bottom:-10px;
right:-80px;
filter:drop-shadow(3px 3px 5px rgba(0,0,0,.2));
}

}

@media (max-width:1100px) {
.gallery{

article{
width:90%;
}

.chara5{
.dn;
}

}
}


@media (max-width:700px) {
.gallery{

h2{
img{
.pa;
width:200px;
top:-40px;
}
}

.title{
padding:40px 0 0 0;
.tac;
h3{
font-size:12pt;
}
}

}
}

/* gallery movie ///////////////////////*/
.gallery dd{
.dib;
width:49%;
.tac;
padding:80px 30px 50px 60px;
}
.gallery dd:nth-child(even){
padding:80px 60px 50px 30px;
}


.gallery dd a{
.pr;
.db;
.tdn;
.center;

.p1{
.pa;
width:80px;
top:-95px;
left:50%;
margin-left:-25px;
}

.image{
.pr;
}
.p2{
.pa;
width:16%;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}

.movie{
border:10px @c1 solid;
.r(20px);
}
p{
color:@c1;
line-height:150%;
padding:20px 0 5px 0;
margin:0;
font-size:11pt;
}
h4{
color:@c1;
line-height:150%;
padding:0;
margin:0;
}

}

.gallery dd a:hover > .image .p2{
width:20%;
}
.gallery dd a:hover > .image .movie{
opacity:.6;
}
.gallery dd a:hover > p,
.gallery dd a:hover > h4,{
color:@c3;
.tdu;
}


@media (max-width:1100px) {
.gallery dd{
padding:80px 10px 50px 30px;
}
.gallery dd:nth-child(even){
padding:80px 30px 50px 10px;
}

}


@media (max-width:700px) {
.gallery dd{
padding:80px 10px 10px 30px;
}
.gallery dd:nth-child(even){
padding:80px 30px 10px 10px;
}

.gallery dd a{

.p1{
.pa;
width:42px;
top:-50px;
left:50%;
margin-left:-10px;
}

.movie{
border:5px @c1 solid;
.r(20px);
}

}
}


@media (max-width:500px) {
.gallery dd{
.db;
width:100%;
padding:80px 20px 10px 20px;
}
.gallery dd:nth-child(even){
padding:80px 20px 10px 20px;
}

}



/* gallery more ///////////////////////*/
.gallery .more,
.gallery .more_topics{
.pr;

a{
.db;
padding:30px 10px;
.center;
margin-top:-40px;
max-width:350px;
background:@c1;
color:#FFF;
.tdn;
.bold;
.r(20px);
}
a:hover{
background:@c3;
}

}


@media (max-width:700px) {
.gallery .more,
.gallery .more_topics{

a{
padding:20px 10px;
margin-top:-30px;
max-width:250px;
.r(15px);
}

}
}


/* back ///////////////////////*/
.back{
.pr;
z-index:10;
padding:50px 0 100px 0;

article{
.pr;
}

a{
.db;
padding:20px 0 0 0;
.center;
margin-top:-40px;
width:130px;
height:130px;
line-height:150%;
background:@c1;
color:#FFF;
.tdn;
.tac;
.bold;
.r(20px);
}
img{
width:20px;
margin:10px;
}
big,
small{
.db;
}

.chara4{
.pa;
width:200px;
}

}


.back a:hover{
background:@c3;
}

@media (max-width:700px) {
.back{
padding:40px 0 60px 0;

a{
padding:15px 0 0 0;
width:110px;
height:110px;
}
img{
width:15px;
margin:10px;
}
big,
small{
.db;
}

.chara4{
.ps;
width:160px;
margin:50px 0 -50px 0;
}

}
}



/* detail ///////////////////////*/
.detail{

h2{
img{
.pa;
width:400px;
transform: rotate(0deg);
top:-50px;
left:50%;
margin-left:-200px;
}
}

}


@media (max-width:700px) {
.detail{

h2{
img{
.pa;
width:280px;
transform: rotate(0deg);
top:-30px;
left:50%;
margin-left:-140px;
}
}

}

}