.title2 {
        font-size: 1.3em;
        line-height: 1.3em;
        color: #fff;
        padding-top: 40px;
}

/*titlebar*/

.titlesection {
        overflow: hidden;
}

.bghover {
        position: relative;
}

.titlebar {
        font-size: 1.6em;
        line-height: 1.3em;
        font-family: 'Oswald', 'Arial', 'cwTeXHei', 'Microsoft JhengHei';
        color: #F6F7F7;
        text-align: center;
        margin-top: 4%;
}

.linebg {
        font-size: 1.6em;
        line-height: 1.3em;
        font-family: 'myfont', 'Arial', 'cwTeXHei', 'Microsoft JhengHei';
        color: #fff;
        text-align: center;
        margin-top: -20px;
        padding: 0px 0px 50px 0px;
        background-image: url("../images/line.png");
        background-position: 10% center;
        background-repeat: no-repeat;
}

.titlebottombg {
        background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0.59) 49%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 99%);
        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0.59) 49%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 99%);
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 41%, rgba(255, 255, 255, 0.59) 49%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 99%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
        height: 4px;
        width: 100%;
        bottom: 21px;
        position: absolute;
        animation: led-style3 2s linear infinite;
        -webkit-animation: led-style3 2s linear infinite;
}


@keyframes led-style3 {
        0% {
                left: -80%;
        }
        30% {
                left: 30%;
        }
        31% {
                left: 50%;
        }
        50% {
                left: 100%;
        }
        100% {
                left: 100%;
        }
}

@-webkit-keyframes led-style3 {
        0% {
                left: -60%;
        }
        25% {
                left: 30%;
        }
        25.1% {
                left: 50%;
        }
        50% {
                left: 100%;
        }
        100% {
                left: 100%;
        }
}

#main {
    position: relative;
}

#main .title{
        color:#B2B2B2;
        font-size:64px;
}

#main .t1 {
    position: absolute;
    padding-top:4%;
}


#main .text1{   
        font-size:34px; 
        line-height: 40px;
        width:52%;
        padding-top:1%;
        font-family: 'Oswald', 'Arial', 'cwTeXHei', 'Microsoft JhengHei';
        color:#F6F7F7;
}

/*SDK*/

.sdkbox {
        width: 60%;
        background: #fff;
        display: block;
}

.gicon {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff0000+0,ff8c28+15,fff728+31,48f226+47,2869ff+66,ff28b7+85,b600ff+100 */
        background: rgb(255, 0, 0);
        /* Old browsers */
        background: -moz-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(255, 140, 40, 1) 15%, rgba(255, 247, 40, 1) 31%, rgba(72, 242, 38, 1) 47%, rgba(40, 105, 255, 1) 66%, rgba(255, 40, 183, 1) 85%, rgba(182, 0, 255, 1) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(255, 140, 40, 1) 15%, rgba(255, 247, 40, 1) 31%, rgba(72, 242, 38, 1) 47%, rgba(40, 105, 255, 1) 66%, rgba(255, 40, 183, 1) 85%, rgba(182, 0, 255, 1) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 140, 40, 1) 15%, rgba(255, 247, 40, 1) 31%, rgba(72, 242, 38, 1) 47%, rgba(40, 105, 255, 1) 66%, rgba(255, 40, 183, 1) 85%, rgba(182, 0, 255, 1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#b600ff', GradientType=1);
        /* IE6-9 */
        padding: 6px;
        border-radius: 4px;
        box-shadow: 0px 0px 30px #ff7200;
        float: left;
        width: 60%;
}

.gicon>div {
        background: #000;
        cursor: pointer;
        text-align: center;
        transition: all 0.2s linear;
        -webkit-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        font-size: 30px;
        line-height: 60px;
}

.gicon>div a {
        text-decoration: none;
        color: #fff;
}

.gicon>div:hover {
        background: #333;
}

/*TOP*/

#gotop {
        background-color: rgba(51, 51, 51, 0.8);
        color: #FFFFFF;
        margin: 10px;
        padding: 14px;
        cursor: pointer;
        bottom: 46px;
        right: 4%;
        position: fixed;
        display: none;
        transition: all 0.3s linear;
        z-index: 2;
}

#gotop img {
        margin: 0 auto;
}

#gotop:hover {
        background-color: #666;
}

/*tabs*/

#functiontabs {
        position: relative;
}

#functiontabs .tabtitle {
        padding: 2% 6% 2% 6%;
        cursor: pointer;
        background-color: #262626;
        border: 1px solid #ff7401;
        color: #ff7800;
        margin-right: 1%;
        -webkit-transform: skew(-20deg);
        -moz-transform: skew(-20deg);
        -o-transform: skew(-20deg);
        transform: skew(-20deg);
        display: inline-block;
}

#functiontabs .tabskew {
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
        transform: skew(20deg);
}

#functiontabs .tabtitle:hover {
        color: #fff;
}

#functiontabs .funtabs {
        background-size: cover;
        padding-top: 4%;
        padding-bottom: 6%;
}

#functiontabs .title {
        color: #fff;
        font-size: 1.6em;
}

#functiontabs .conbox1 {
        position: relative;
        vertical-align: top;
        display: inline-block;
        width: 26%;
        font-size: 30px;
        padding-left: 2%;
}

#functiontabs .conbox2 {
        display: inline-block;
        position: relative;
        width: 60%;
}

#funtabs2, #funtabs3, #funtabs4 {
        display: none;
}

#XMP20 .conbox1, #warranty .conbox1 {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 10%;
}

#XMP20 .conbox2, #warranty .conbox2 {
        display: inline-block;
        position: relative;
        width: 85%;
}

#modules {
        background-image: url("../images/modules_1920.jpg");
        background-position: top center;
        background-repeat: no-repeat;
        min-height: 1000px;
}

@media screen and (max-width: 1366px) {
        #memoryrgb {
                position: relative;
                min-height: 450px;
        }
        .sdktitle {
                width: 90%;
                margin-bottom: 10px;
        }
        #modules {
                background-image: url("../images/modules_1366.jpg");
                background-position: top center;
                background-repeat: no-repeat;
                min-height: 800px;
        }
        .titlebar {
                font-size: 1.3em;
                line-height: 1.3em;
        }
        .sdkbox {
                width: 80%;
        }
        .gicon {
                width: 80%;
        }
        #functiontabs .conbox1 {
                width: 40%;
        }
        #functiontabs .conbox2 {
                width: 55%;
        }
        #main .t1 {            
            padding-top:6px;
        }
}

@media screen and (max-width: 960px) {
        
        #main .t1 {            
            padding-top:6px;
            position:static;
        }

        #main .title{   
                font-size:40px; 
                line-height: 50px;                
        }

        #main .text1{   
                font-size:30px; 
                line-height: 40px;
                width:100%;
                padding-top:1%;
                font-family: 'Oswald', 'Arial', 'cwTeXHei', 'Microsoft JhengHei';
                color:#F6F7F7;
        }

        .gicon {
                float: static;
                width: 100%;
                margin-bottom: 0px;
        }
        .sdk2 {
                float: static;
        }
        #memoryrgb {
                min-height: 500px;
                position: relative;
        }
        /*tabs*/
        #functiontabs .tabtitle {
                width: 70%;
                text-align: center;
                -webkit-transform: skew(0deg);
                -moz-transform: skew(0deg);
                -o-transform: skew(0deg);
                transform: skew(0deg);
                display: inline-block;
        }
        #functiontabs .tabskew {
                -webkit-transform: skew(0deg);
                -moz-transform: skew(0deg);
                -o-transform: skew(0deg);
                transform: skew(0deg);
        }

        #modules {
                background-image: url("../images/modules_960.jpg");
                background-position: top center;
                background-repeat: no-repeat;
                min-height: 700px;
        }
        #functiontabs .conbox1 {
                width: 100%;
        }
        #functiontabs .conbox2 {
                width: 100%;
        }
}

@media screen and (max-width: 640px) {
        .titlebar {
                font-size: 1.0em;
                line-height: 1.4em;
                width: 90%;
                margin: 0 auto;
                margin-top: 10%;
        }
        #memoryrgb {
                min-height: 1300px;
                position: relative;
        }
        #memoryrgb .frame .cell {
                width: 100%;
        }
        #functiontabs .tabtitle {
                padding: 6%;
                width: 84%;
                font-size: 0.8em;
        }
        /*TOP*/
        #gotop {
                width: 100%;
                background-color: rgba(51, 51, 51, 0.8);
                color: #FFFFFF;
                border-radius: 0px;
                margin: 0px;
                padding: 10px;
                cursor: pointer;
                text-align: center;
                font-size: 13px;
                bottom: 0px;
                right: 0%;
                position: fixed;
                display: none;
                transition: all 0.3s linear;
                font-family: Arial, Helvetica, sans-serif;
        }
        #modules {
                background-image: url("../images/modules_640.jpg");
                background-position: top center;
                background-repeat: no-repeat;
                min-height: 460px;
        }
}