body{
    overflow-x: hidden;
    margin: 0;  padding: 0; border: 0;
    font-size: 13px;    letter-spacing: 0.35em;
    font-family: 'Indie Flower', cursive ,"Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
    background-color: rgb(47, 47, 49);
    
    transition: 0.15s;
}
main{
    width: 100%;    
    height: 100vh;  min-height: 700px;
}
main>.main_video{
    position: absolute;
    width: 100%;    
    height: 100vh;  min-height: 700px;
    overflow: hidden;
}
main>.main_video video{
    position: absolute;
    width: auto;
    height: auto;   min-height: 100vh;
    filter:brightness(0.75) saturate(1) blur(3px);
}
main>.frame{
    z-index: 5;
    width: 100%;    
    height: 95vh;  min-height: 670px;
    margin: 0 2.5vw;
    transform: rotate(-1.5deg);
    border: solid  rgb(255, 255, 255);
    border-width: 1px 0.5px 1.5px 0.7px;
    border-radius: 99% 1% 99% 0.7% / 0.8% 99% 0.5% 99%;
}
main>.frame .main_circle{
    width: 450px;   max-width: 80vw;
    height: 450px;  max-height: 80vw;
    flex-direction: column;
    transform: rotate(5.5deg);
    color: rgb(47, 47, 49);
    border:solid rgb(47, 47, 49);
    border-width: 3px 1.5px 2px 0.8px;
    border-radius: 97% 70% 75% 80% / 65% 82% 68% 75%;
    background-color: rgb(222, 222, 222);
}
main>.frame .main_circle h1{ 
    font-size: 4.5em;
    margin: 0;
}
main>.frame .main_circle h2{
    font-size: 2em;
    margin: 0;
}
main>.triangle{
    position: absolute;
    width: 100%;    
    height: 100vh;  min-height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
main>.triangle .triangle_lt{
    width: 0;   height: 0;
    transform: rotate(1.5deg) translate(1vw,0);
    border-style: solid;
    border-width: 200px 350px 0 0;
    border-color: rgb(80, 80, 100) transparent transparent transparent;
    filter: drop-shadow(0 10px 0.75rem black);
}
main>.triangle .triangle_br{
    width: 0;   height: 0;
    transform: rotate(1.5deg) translate(-1vw,5px);
    align-self: flex-end;
    border-style: solid;
    border-width: 0 0 200px 350px;
    border-color: transparent transparent rgb(80, 80, 100) transparent;
    filter: drop-shadow(0 -10px 0.75rem black);
}
header{
    z-index: 10;
    width: 100%;    height: 75px;
    background-color: rgba(47, 47, 49,0.9);
}
header>nav ul li{
    width: 15em;    max-width: 30vw;
    float: left;
    text-align: center;
}
header>nav ul li a{
    color: rgb(222, 222, 222);
    font-size: 2.2em;
    text-decoration:none;
}
.profile{
    width: auto;    height: auto;
    display: flex;  flex-direction: column;
    align-items: center;
    padding:1.5em 0;
    overflow: hidden;
}
#what{
    background: linear-gradient(180deg,rgb(30, 30, 40), rgba(80,80,100,0));
}
.profile>.title{
    font-size: 3.5em;
    color: rgb(222, 222, 222); text-align: center;
    padding: 1.5em 0 0 0;
}
.content{
    width: 99%;   max-width: 1500px;
}
.name_space{
    width: 100%;    height: auto;
    padding:2.5em 0;
    display: flex;
}
.jc_start{ justify-content: flex-start;}
.jc_end{ justify-content: flex-end;}
.name{
    width: 1024px;    height: 12em;
    display: flex;
    align-items: center;
    transform: scale(0.8);
    background-color: rgb(255, 255, 235);
    filter: drop-shadow(0px 5px 5px rgb(75, 50, 0));
    transition: 0.5s;
    transition-timing-function:ease-out;
}
.name_trans_r{
    transform:translate(-100vw,0);
}.name_trans_l{
    transform:translate(100vw,0);
}
.b_radius_r{
    border: solid black;
    border-width: 2px 1px 2px 3px;
    border-radius: 95% 4% 83% 0.5% / 2% 90% 7% 70%;
}
.b_radius_l{
    border: solid black;
    border-width: 2px 3px 0.5px 3px;
    border-radius: 90% 1% 80% 3% / 5% 99% 10% 97%;
    flex-direction: row-reverse;
}
.name img{
    width: auto;    height: 22.5em;
    max-height: 40vw;   min-height: 165px;
}
.name h4{
    font-size: 2.25em;
    padding:0 2em;
}
.hand_paint_border{
    border: solid black;
    border-width: 1px 7px 2px 5px;
    border-radius: 90% 3% 83% 5% / 5% 94% 7% 95%;
    transform: rotate(2deg);
}
.hand_paint_border_content{
    transform: rotate(-2deg);
}
.info{
    width:1280px;
    max-width: 90vw;    min-height: 600px;
    flex-direction: column;
    margin-top: 5em; 
    background-color: rgb(222, 222, 222);
}
.info>dl{
    width: 600px; max-width: 70vw;
    display: flex;
    flex-direction: row;
    font-size: 2.5em;
    transform: rotate(-2deg);
    margin: 0.25em 0;
}
.info>dl dt{
   width: 6em;
}
.info>.info_btns{
    width: 800px; max-width: 80vw;
    height: auto;
    display: flex;
    flex-direction: row;    flex-wrap: wrap;
    justify-content: center;
    padding: 4.5em 0;
}
.info>.info_btns .btn{
    width: 12.5em; height: 4.5em;
    border-width: 1.2px 0.5px 1.3px 0.8px;
    margin: 0 1.5em;
}
.info>.info_btns .btn a{
    width: 100%;    height: 100%;
    font-size: 1.5em;
    color: black;
    text-decoration: none;
    background-color: transparent;
    transition: 0.25s;
}
.info>.info_btns .btn a:hover{
    color: white;
    background-color: black;
}

footer{
    width: auto;    height: 100px;
    color: rgb(222, 222, 222);
    background-color: rgb(47, 47, 49);
}

.cc{
    display: flex;
    justify-content: center;    align-items: center;
}
.shadow{
    filter: drop-shadow(3px 3px 1px black);
}

@media screen and (max-width:768px){
    body {font-size: 12px;}
    .name {padding-left: 10vw;}
}
@media screen and (max-width:576px){
    body {font-size: 10px;}
    .name {padding-left: 5vw;}
    
    .info>dl{flex-direction: column;}
}
@media screen and (max-width:414px){
    .name {padding-left: 1em;}

}