body{
    color: #333;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}


/* Style for our header texts
* --------------------------------------- */
h1{
    font-size: 5em;
    font-family: arial,helvetica;
    margin:0;
    padding:0;
}
h2{
    font-size: 2em;
    margin: 0 0 18px 0;
    font-family: arial,helvetica;
}

h2 { margin:0px }



/* Common styles
* --------------------------------------- */
img{
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}
.text-left { text-align:left}
.text-center { text-align:center}
.text-right { text-align:right}

.color-999 { color: #999 }

.font-60 { font-size:60px;}
.font-50 { font-size:50px;}
.font-40 { font-size:40px;}
.font-30 { font-size:30px;}
.font-20 { font-size:20px;}
.font-15 { font-size:15px;}
.font-10 { font-size:10px;}

.bg-ddd { background:#ddd }
.bg-photoshop { background:rgb(116,225,250)}
.bg-illustrator { background:rgb(249,224,100)}

.width-530 { width:530px;}
.width-600 { width:600px;}

.padding-10 { padding:10px }
.padding-5 { padding:5px}
.padding-0 { padding:0px !important;}
.p-r-10 { padding-right:10px }

.m-t-0 { margin-top: 0px}

.clear {clear:both}

.work-h2 {
    font-size:60px;
    font-weight:normal;
}

.section{
    text-align:center;
    overflow:hidden;
}
.wrap{
    width: 1280px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.box{
    text-align: left;
    color: #808080;
    font-size: 1.2em;
    line-height: 1.6em;
}



.sub-menu-wrap {
    width:1024px;
    margin:0 auto;
}
.sub-menu {
    float:right;
	display:none;
}
.sub-menu ul {
    list-style-type: none
}
.sub-menu li {
    float:left;
    padding:20px;
    padding-top:0px;
    font-size:20px;
}

.works {
    text-align: left;
    margin-top: 50px;
    margin-left: 100px;
}

ul { list-style-type: none;}
.tile { width:1280px; margin : 0 auto}
.tile .block { float:left; padding:0px }
.tile img { width : 425px }


.logo {
    text-align:left;
    height:55px;
    padding-top:15px;
    padding-left:15px;
}
.logo img { height:100%}

.top-logo {
    position:absolute;
    z-index: 99999999;
    width:100%;
    padding:0px;
}
.top-logo img {
    position:absolute;
    left:15px;
    z-index:50;
    top:10px;
}
.work-wrap {
    width:100%;
    position:absolute;
    top:8%;
}
.work-wrap .wrap {
    height:auto !important;
    margin:0 auto !important;
}


/* Section 0
* --------------------------------------- */
#section0{
    padding: 15px 0;
}
#section0 .main-logo {
    width:100%;
    position:absolute;
    top:35%;
}


#section0 .scroll {
    width:100%;
    position:absolute;
    bottom:0px;
}
#section0 .scroll img {
    width:85px;
}



/* Section 1
* --------------------------------------- */

/* Section 2
* --------------------------------------- */

/* Section 3
* --------------------------------------- */


/* Section 4
* --------------------------------------- */

#section4 ul {
    list-style-type: none;
}

.profile {
    margin-top: 50px;

}
.profile-img {
    float: left;
    text-align:right;
    /*background-color: #eee;*/
    width: 300px;
    height: 500px;
    padding-top: 45px;
    margin-left: 50px;
    padding-left: 100px;
}

.profile-img img {
    padding-right: 0px;
    width: 200px;
}

.profile-text {
    font-family: sans-serif ;
    font-size: 14px;
    padding-top:40px;
    float: left;
    text-align: left

}

.profile-text li {
    padding-bottom: 20px;
}


.knock-knock {
  /* background: url(../icon/icon_profile_jump.gif) no-repeat; */
  height: 300px;
  background-position: top right;
  background-size: 200px;
  padding-top: 10px;
  margin-top: 30px;
}

/* Overwriting fullPage.js tooltip color
* --------------------------------------- */
.fp-tooltip{
    color: #AAA;
}
#fp-nav ul li .fp-tooltip {
    color : #000 !important;
    padding-left:20px;
}
#fp-nav span, .fp-slidesNav span{
    border-color: #AAA;
}
#fp-nav li .active span, .fp-slidesNav .active span{
    background: #AAA;
}

#fp-nav ul li a.active span {
    background: #fff;
    background-image: url(../icon/icon_dot_big.png);
    background-size: 20px;
    background-position: center;
}

#fp-nav ul li a span {
    width:7px;
    height:7px;
    margin : -2px 0 0 -3px
}

.fp-next {
    background-image: url(../icon/icon_right.png);
    background-position: center;
    border: 0px !important;
    height: 77px;
    width: 33px !important;
}

.fp-prev {
    background-image: url(../icon/icon_left.png);
    background-position: center;
    border: 0px !important;
    height: 77px;
    width: 42px !important;
}



.detail-overlay-wrap {
    position: absolute;
    top:0;
    left:0;
    /*background: rgb(240,240,240);*/
    background: rgb(0,0,0);
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    z-index:100;
}

.detail-overlay {
    position: absolute;
    width: 90%;
    height: 95%;
    background: rgb(230,230,230);
    right: 0;
    bottom: 0;
    overflow-y:auto;
    padding:20px;
    z-index:110;
}
.detail-overlay .close {
    text-align:right;
    height:40px;
}
.detail-overlay .close img {
    height:100%;
}

.detail-overlay .overlay-image {
    text-align:center;
    height:99%;
    width:100%;
    overflow-y : auto;
    cursor :pointer;
    background:#fff;
}

.detail-overlay  .scroll-wrapper {
    width:2000px;
}

.detail-overlay .overlay-image img {
    width:150%
}

.detail-overlay .overlay-content {
    height: 100%;
    overflow : hidden;
}

.detail-overlay .detail-thumb-list {
    float:left;
    width:10%;
    height:98%;
    overflow-y:auto;
}
.detail-overlay .detail-thumb .active {
    border:2px solid #000;
}
.detail-overlay .detail-thumb-list li {
    cursor:pointer;
    background:#fff;
    margin-top:2px;
}
.detail-overlay .detail-content-view {
    float:right;
    width:89%;
    height:98%;
    position:relative;
}

.detail-overlay .overlay-description {
    position: absolute;
    right: 0;
    top: 0;
    background: #000;
    filter: alpha(opacity=50);
    opacity: 0.5;
    padding: 20px;
}
.detail-overlay .detail-thumb {
    margin-top : 0px;
    padding:0px;
}
.detail-overlay .detail-thumb img {
    width:100%;
}

.icon-scroll-text {
    margin-bottom:10px;
    font-size:17px;
}
.icon-scroll, .icon-scroll:before {
    position: absolute;
    left: 50%
}

.icon-scroll {
    width: 33px;
    height: 45px;
    margin-left: -17px;
    top: 50%;
    margin-top: -65px;
    box-shadow: inset 0 0 0 3px #000;
    border-radius: 25px;

}

.icon-scroll:before {
    content: '';
    width: 4px;
    height: 8px;
    background: #000;
    margin-left: -2px;
    top: 8px;
    border-radius: 4px;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-name: scroll;

}



.ocean {
    height: 5%;
    width:100%;
    position:absolute;
    left:0;
    top:60px;
}

.wave {
    background: url(/assets/css/wave.svg) repeat-x;
    position: absolute;
    top: -198px;
    width: 6400px;
    height: 198px;
    animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
    top: -175px;
    animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
    opacity: 1;
}

@keyframes wave {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -1600px;
    }
}

@keyframes swell {
    0%, 100% {
        transform: translate3d(0,-25px,0);
    }
    50% {
        transform: translate3d(0,5px,0);
    }
}




@media (min-width: 300px) and (max-width: 800px) {
    .sub-menu ul { padding-left:10px; margin-top:0px}
    .main-logo { width:130px !important}
    .fp-controlArrow { display:none }
    .works { display:none }

    .sub-menu-wrap { width:100% }
    .sub-menu { float:left}
    .sub-menu li {padding:10px; font-size:15px; font-weight:bold}

    .tile { width: 100% }

    .profile-text {float:none}
    .profile-img {padding:0px; margin:0px; width:150px; height:150px; height:auto}
    .profile-img img {width:100%}

    .profile-bottom {text-align:right; padding-right:20px}
    .profile-bottom img {width:150px}

    .tile .block { width:50%; padding:0px }
    .tile img { width:100% }


    .wrap {width:100%}
    .detail-content-view { display:none }
    .detail-overlay .detail-thumb-list { width:100%}

    .intro { padding-top:5px}
    .profile {margin-top:0px}
    .profile-text ul { margin-bottom:0px}
    .profile-text li { padding-bottom:10px}

    .logo {height:40px}
    .top-logo img{ top : 5px}
    .work-wrap { z-index:9999 ; top:7px; left:80px}
    .ocean {top:45px; !important;}

    .into-main-logo {
      width:70px !important;
    }
}


@keyframes scroll {
    0% {
        opacity: 1;

    }
    100% {
        opacity: 0;
        transform: translateY(18px);
    }
}

.main-logo {
    position: absolute;
    left:50%;
    top:50%;
    z-index: 999;
    width:180px;
}


.main-logo-flip {
  transition: 0.7s;
  /*animation: main-flip 2s 0.5s;*/
}


.main-logo img { width:100%}
/*
@keyframes main-flip {
    100% {
      -ms-transform: rotateY(360deg);
      -webkit-transform: rotateZ(360deg);
      -moz-transform: rotateY(360deg);
      -o-transform: rotateY(360deg);
    }
}
*/

.into-main-logo {
  transition: 1s;
  left:10px !important;
  top:10px !important;
  width:100px !important;
}

.into-main-logo-mobile {
    transition: 1s;
    left:10px !important;
    top:10px !important;
    width:50px !important;
}