html{ margin: 0px; padding: 0px;}
body{ position: relative; margin: 0px; padding: 0px; background: #ffffff;
    width: 100%; font-family:'Lato', verdana, sans-serif; overflow: auto; }
img{ margin: 0px; padding: 0px; border: 0px;}
input{ position: relative; margin: 0px; padding: 0px}
ul, ol {
    padding-bottom: 1.366em;
    padding-top: 0.644em;
}
ol, ul {
    list-style: outside none none;
}

#outer{ min-width: 980px; min-height: 876px; background: url(../images/back.jpg) #ffffff top center no-repeat;position: relative; margin: 0px auto 0px auto;  }
.inner{ width: 980px; position: relative; margin: 0px auto 0px auto; text-align: center; }

.shadow{ -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0, 1);
-moz-box-shadow:    0px 3px 5px 0px rgba(0,0,0, 1);
box-shadow:         0px 3px 5px 0px rgba(0,0,0, 1);}

.shadow2{-webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 1);}
.shadow4{-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 8px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 8px 0px rgba(0, 0, 0, 1);}
.sp20{ width: 100%; height: 20px; line-height: 20px; font-size: 20px; position: relative;}
 .sp40{ width: 100%; height: 40px; line-height: 40px; font-size: 40px; position: relative;}
 .sp60{ width: 100%; height: 60px; line-height: 60px; font-size: 60px; position: relative;}
 .sp80{ width: 100%; height: 80px; line-height: 80px; font-size: 80px; position: relative;}
 .sp100{ width: 100%; height: 100px; line-height: 100px; font-size: 100px; position: relative;}
.clear{ width: 100%; height: 0px; line-height: 0px; font-size: 0px; position: relative; clear: both;}

.top_bar{ position: relative; margin: 0px 0px 0px 0px; width: 100%; }
.top_logo{ position: relative;}
.step{ position: relative; display: inline-block; text-align: center; width: 150px;}
.nav{ position: relative; position: relative; text-align: center; margin: 10px 0px 0px 0px;}
.step_ttl_a{ display: block; position: relative; width: 150px; height: 39px; position: relative; background: #b20606; text-align: right;}

.step_ttl_d{ display: none; position: relative; width: 150px; height: 39px; position: relative; background: #838581; text-align: right;}
.arr_out{ position: absolute; top:0px; right: -21px; height: 39px;  width: 21px; background: url(../images/arr_out.png) top center no-repeat;}
.arr_in{ position: absolute; top:0px; left: -21px; height: 39px;  width: 21px; background: url(../images/arr_in.png) top center no-repeat;}
.step.disable .arr_out{ position: absolute; top:0px; right: -21px; height: 39px;  width: 21px; background: url(../images/arr_out_d.png) top center no-repeat;}
.step.disable  .arr_in{ position: absolute; top:0px; left: -21px; height: 39px;  width: 21px; background: url(../images/arr_in_d.png) top center no-repeat;}

.footer{ width: 100%; min-height: 125px; background: #000000; }
.content{ }
.right_side{width: 500px; position: relative; margin: 0px 0px 0px 0px; float: right;}
.left_side{width: 380px; position: relative; margin: 0 0 0 100px; float: left;}
.create_ttl{ position: relative; text-align: center;}

.photo_thumbs{ position: relative; text-align: center;}
.arrow_left{ position: relative;display: block; float: left; line-height: 95px;}
.arrow_left:hover{ opacity: 0.5}
.arrow_right:hover{ opacity: 0.5}
.arrow_right{ position: relative;display: block; float: left; line-height: 95px}
.arrow_left img{ display: inline-block; vertical-align: middle;}
.arrow_right img{ display: inline-block; vertical-align: middle;}

.thumb{ width: 78px; height: 78px; border: 1px solid #ffffff; overflow: hidden; vertical-align: middle; display: block; float: left; margin: 10px 10px 10px 10px}
.thumb img{ display:block; margin: 0px; padding: 0px;  position: relative;}
.thumb img:hover{ opacity: 0.76}
.step_ttl_a img{ top:10px; position: relative; left: 0px}
.step_ttl_d img{ top:10px; position: relative; left: 0px}
.upload_btn { text-align: center; margin: 10px 0px 0px 0px}
.continue_btn { text-align: center; margin: 10px 0px 0px 0px}
.select_txt{ position: relative; text-align: center; margin: 10px 0px 0px 0px; color: #000000;  font-size: 14px; line-height: 18px}
.preview{ width: 299px; height: 299px; border: 1px solid #000000; margin: 15px auto 0px auto; position: relative;}
.preview img{ display: block; margin: 0px; padding: 0px;}

.thumbs_ttl{ position: relative; margin: 5px 0px 0px 0px; font-size: 16px; line-height: 18px; color: #000000; font-weight: 700}

.create_ttl{ position: relative; margin: 30px 0px 0px 0px;}
.photo_thumbs{ position: relative; margin: 10px 0px 0px 0px;}

.top_logo{ position: absolute; top:-15px; left: 0px}
.enter_web{ position: absolute; top:20px; right: 10px; text-align: right;}
.connect { position: absolute; top:20px; left: 500px; text-align: left; vertical-align: middle;}
.connect img{ display: inline-block; vertical-align: middle; position: relative; margin: 0px 4px 0px 0px}
.step.disable{}
.step.disable .step_ttl_a{ display: none;}
.step.disable .step_ttl_d{ display: block;}
.socials{ position: relative; margin: 30px 0px 0px 10px; position: relative;}
.socials img{ vertical-align: middle; position: relative; float: left; margin: 0px 10px 0px 0px}
.bottom_links{ position: relative; float: right; font-family: 'Oswald', sans-serif; text-align: right; color: #8c8c8c; font-size: 16px; text-transform: uppercase;}
.bottom_links a{ color: #8c8c8c; text-decoration: none;}
.powered{ position: relative; text-align: center; margin: 15px 0px 0px 0px}
.lyric{ position: relative; text-align: center; display: block; float: left; vertical-align: middle; margin: 0px 5px 0px 5px}

.si{ width: 56px; height: 56px; background: #ffffff; display: inline-block; vertical-align: middle; margin: 0px 1px 0px 1px; -webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;}
.si a{ display: block; vertical-align: middle; line-height:56px; text-align: center; font-size: 44px; color: #B20606;   text-decoration: none; }
.si i{ color:#B20606}
        .si:hover{ opacity: 0.46}
        .share_icons{ position: relative; margin: 5px 0px 0px 0px; text-align: center;}
        .share{ position: relative; text-align: center;}
        .share{ position: relative; margin: 15px 0px 0px 0px;}
        .share_ttl{ position: relative; text-align: center; margin: 10px 0px 0px 0px;}
        .upload_btn:hover{ opacity: 0.5}
        .continue_btn:hover{ opacity: 0.5}

        .thumbs{width: 465px; position: relative; margin: 0px auto}

.carousel {
    margin: 15px auto 0px auto;
    position: relative;
    width: 460px;
    min-height: 65px;
}
.c_left {
    left: -8px;
    position: absolute;
    top: 5px;
    z-index: 1000;
}
.c_right {
    position: absolute;
    right: -8px;
    top: 5px;
    z-index: 1000;
}

.c_right:hover{ opacity: 0.5}
.c_left:hover{ opacity: 0.5}

.lyrics {
    position: relative;
    text-align: center;
    top: 10px;
}

.lyric_div{ width: 300px; height: 300px; position: absolute; top:0px; left: 0px}
.photo_div{ width: 300px; height: 300px; position: absolute; top:0px; left: 0px}
.black{ width: 300px; height: 300px; position: absolute; top:0px; left: 0px}

header{ width: 100%; position: relative; min-height: 55px; background: #171c1f}
.player{ width: 310px; position: relative; margin: 10px auto 0px auto;}
.enter_ttl{ font-size: 31px; line-height: 35px; font-weight: 900; color: #000000}
.connect_btn{ position: relative; margin-top: 10px;}
.connect_txt{ font-size: 14px; line-height: 18px; color: #6e6e6e; margin-top: 5px;}
.connect_txt a{ color: inherit; text-decoration: underline;}
.abbr{ font-size: 12px; line-height: 16px; color: #6e6e6e; margin-top: 5px;}
.abbr a{ color: inherit; text-decoration: underline;}
.connect_ttl{ position: relative; margin-top: 557px}
.create_ttl{ font-size: 30px; line-height: 34px; font-weight: 900}
.album_cover{ width: 155px; position: relative; display: inline-block; vertical-align: middle;}
.album_info{  width: 140px; position: relative; display: inline-block; vertical-align: middle;}
.album{ position: relative; margin-top: 20px;}

.connect{ position: absolute; top:5px; left: 10px; color: #666666; font-size: 30px; line-height: 35px; text-align: left;}
.connect span{ display: inline-block; vertical-align: middle; margin: 0px 5px 0px 0px;}
.connect a{ display: inline-block; vertical-align: middle; margin: 0px 3px 0px 3px; color: #666666; text-decoration: none;}
.enter_web{ position: absolute; top:5px; right: 10px; color: #666666; font-size: 30px; line-height: 35px; text-align: left; font-weight: 700}
.enter_web span{ display: inline-block; vertical-align: middle; margin: 0px 0px 0px 5px;}
.enter_web a{ display: inline-block; vertical-align: middle; margin: 0px 0px 0px 0px; color: #666666; text-decoration: none;}

.footer_left{ position: relative; float: left; width: 40%; text-align: left; }
.footer_right{ position: relative; float: right; width: 40%; text-align: right; }
.subscribe{ position: relative; margin-top: 20px}
.umg{ position: relative; margin-top: 20px;}
.sub_txt{ color: #666666; font-size: 16px; line-height: 20px;}
.sub_btn{ position: relative; margin-top: 10px}