/* site layout */
* {
    margin: 0;
    padding: 0;
    border: none;
}
.navlink { color:#fff; text-decoration:none; padding-left:40px; display: block; }

article,
section { display: block; }

html,
body { overflow: hidden; }

html,body,#book,#pages,.page { width:auto; }
#book,#pages,.page { width: 100%; height: 100%; }

.check,.shownavigation,.nextback {
    cursor: pointer; width: 160px; height: 40px; line-height:40px; font-size:20px; color:#fff;
    /* background-color: #ccc; background-color: rgba(255,255,255,.5); border-bottom: 1px solid #757575; */
    background-repeat: no-repeat; background-position: center center; transition: all .25s ease;
    position: fixed; top: 40px; left: 0px; display: block; 
}
.active {  background: linear-gradient( 270deg, rgba(255,255,255,0) 0%, #F6CFDF 100%); color:#1D567B !important;   }
.active > .navlink { color:#1D567B !important; display: block;}
.top_logo { width:500px; height:100px; margin:0; padding:20px 0 0 2%; }
.top_logo .logo { width:270px; }

.shownavigation {
    border-radius: 5% 5% 0 0;
    box-shadow: 0 -1px 2px #757575;
}

.shownavigation:after {
    position: absolute;
    content: '';
    width: 40%;
    height: 3px;
    background-color: #555;
    top: 50%;
    margin-top: -1px;
    left: 30%;
    box-shadow: 0 -7px #555, 0 7px #555;
}

input,
.check {
    display: none;
}

.check:hover,.shownavigation:hover,.nextback:hover {
    /* background-color: #f0f0f0; background-color: rgba(255,255,255,.75); */
}

#showradio:checked + label,
.move:checked + label,
.move:checked + label:hover {
     /* background-color: #fff; background-color: rgba(255,255,255,.85); */
    cursor: default;
}

/* 选中箭头
.move:checked + label:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;     
    border-left: 10px solid #fff;
    border-left: 10px solid rgba(255,255,255,.85);
    position: absolute;
    left: 160px;
    top: 12px;
}
*/

#showradio ~ .nextback { display: block; }

#showradio:checked ~ .nextback { display: none; }

#showradio:checked + label { cursor: pointer; }

#showradio:checked + label:hover { background-color: #fff; }

#content1:checked ~ .content3,
#content1:checked ~ .content4,
#content2:checked ~ .content2,
#content2:checked ~ .content4,
#content3:checked ~ .content1,
#content3:checked ~ .content3,
#content4:checked ~ .content1,
#content4:checked ~ .content2 { display: none; }

#content1:checked ~ .content1,
#content4:checked ~ .content4 {
    cursor: default;
    background-color: #ccc;
    background-color: rgba(255,255,255,.25);
}

.mail,
#content1:checked ~ .content2, 
#content2:checked ~ .content3, 
#content3:checked ~ .content4, 
#content4:checked ~ .content4 {
    /* border-radius: 0 0 5% 5%; box-shadow: 0 1px 2px #757575; */
    border-bottom: none;
    top: 172px;
}

#content1:checked ~ .content1, 
#content2:checked ~ .content1, 
#content3:checked ~ .content2, 
#content4:checked ~ .content3 { top: 111px; }



#content1:checked ~ .content2:after, 
#content2:checked ~ .content3:after, 
#content3:checked ~ .content4:after,
#content2:checked ~ .content1:after, 
#content3:checked ~ .content2:after, 
#content4:checked ~ .content3:after {
    position: absolute;
    font-size: 2.5em;
    left: 20px;
    top: 2px;
    color: #555;
}

#content1:checked ~ .content2:after, 
#content2:checked ~ .content3:after, 
#content3:checked ~ .content4:after { content: '\00bb'; }

#content2:checked ~ .content1:after, 
#content3:checked ~ .content2:after, 
#content4:checked ~ .content3:after { content: '\00ab'; }

#pages {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
    transition: all .5s cubic-bezier(1,0,0,1);
}

.page {
    background-repeat: no-repeat;
    background-position: center center;
}

#one {
    background:url(../images/one_bg.png) no-repeat left bottom #6AB9EE ;
}

#one_about {  background:url(../images/aboutbg.png) no-repeat left bottom ;}
#chanel06bg {  background:url(../images/chanel06bg.jpg) no-repeat center center ;}
#chanel05bg {  background:url(../images/chanel05bg.png) no-repeat left bottom ;}
#chanel04bg {  background:url(../images/chanel04bg.png) no-repeat left bottom ;}
#chanel09bg {  background:rgba(156, 214, 253, 1); }
#one_about3 { background-color:rgba(156, 214, 253, 1); position: relative; }
#one_about12 { background:url(../images/bg12.png) no-repeat left bottom; position: relative; }
#one_about13 { background:url(../images/bg13.png) no-repeat left bottom; position: relative; }
#chanel07bg { background:url(../images/chanel04bg.png) no-repeat left bottom; position: relative; }
#chanel10bg { background:#9CD6FD; position: relative; }

#aoubt3_row2 { background-color:rgba(44, 170, 255, 1); position:absolute; top:400px; left:0; width:100%; height:calc(100% - 200px); z-index:5000; }
#about301 { position:absolute; left:400px; top:100px; width:300px; }
#about303 { position:absolute; left:720px; top:150px; width:1000px; }
#about302 { position:absolute; right:0; bottom:0; width:450px; z-index:6000; }
#about310 { position:absolute; right:-100px; bottom:60px; width:600px; z-index:6100; }
#about311 { position:absolute; right:-50px; bottom:0px; width:900px; z-index:6100; }
.about3_content { float:left; width:800px; height:auto; padding:50px 0 0 400px; color:#fff; }
.about3_content h3 { float:left; width:100%; height:auto; padding:0px 0 0 0px; font-size:28px; color:#fff; }
.about3_contentlist { float:left; width:100%; height:auto; line-height:180%; font-size:16px; }
.about3_since { position:absolute; left:950px; top:80px; width:300px; height:200px; }
#about3_star { float: left; width:100%; text-align:right;}
#about3_txt { float: left; width:100%; text-align:right; font-family: SourceHanSansCN-Heavy; font-weight:bold; font-size:78px; color:rgba(201, 255, 129, 1); }
#about3_year { float: left; width:100%; text-align:right; font-family: SourceHanSansCN-Heavy; font-size:28px; color:#fff; }

#div12_adv {   
    position:absolute; left:18%; top:10%;  
    width: 356px; height: 38px;overflow-wrap: break-word; color: rgba(255, 255, 255, 1);
    font-size: 38px; font-family: SourceHanSansCN-Bold;font-weight: 700;
    text-align: left; white-space: nowrap;line-height: 57px;
}
#div13_list { width:1200px; height:auto; margin:0 auto; position:absolute; top:20%; left:18%; z-index:1000; text-align: center; background:url(/images/img1301.png) no-repeat center top; }
.chanel12img01 { position:absolute; right:50px; bottom:100px; width:250px; }
.chanel12img02 { position:absolute; left:50px; bottom:0px; width:330px; }
.chanel13img02 { position:absolute; left:180px; bottom:70px; width:230px; }
.chanel13img03 { position:absolute; left:240px; bottom:70px; width:100%; z-index:20; }

#div08_list { width:82%; height:100%; margin:0 auto; position:absolute; top:0%; left:18%; z-index:1000;
    text-align:left; background:url(/images/chanel08img2.jpg) no-repeat right top; background-size:41% auto;
}
#div15_list { width:82%; height:100%; margin:0 auto; position:absolute; top:0%; left:18%; z-index:1000; text-align:left; }
#div08_tit { position:absolute; width:100%; height:100px; left:10px; top:110px; font-family: SourceHanSansCN, SourceHanSansCN; font-size:60px;color:#fff; text-transform: uppercase; font-weight:800; z-index: 100; }
#div08_tit2 { position:absolute; width:100%; height:100px; left:30px; top:100px; z-index: 200;
    font-family: SourceHanSansCN, SourceHanSansCN; font-weight: 800;font-size: 40px;
    color: #105689;line-height: 60px;text-align: left;font-style: normal;
}
#div08_adv { position:absolute; width:100%; height:100px; left:30px; top:250px; z-index: 300; }
#div08_adv ul { float:left; width:50%; height:auto; }
#div08_adv ul li { float:left; width:100%; height:auto; margin:0; padding:5px 0; list-style:none; }
#div08_adv ul li.big { font-family: SourceHanSansCN, SourceHanSansCN; font-weight: bold; font-size: 27px;color: #105689; 
    line-height: 41px;letter-spacing: 30px;text-align: left; font-style: normal; }
#div08_adv ul li.small { font-family: PingFangSC, PingFang SC;font-weight: 500;
    font-size: 14px;color: #105689;line-height: 24px; text-align: left; font-style: normal; }
#div08_adv ul li.phone { font-family: SourceHanSansCN, SourceHanSansCN; font-weight: bold; font-size: 27px;color: #105689; 
        line-height: 41px;letter-spacing:0px;text-align:center; font-style: normal; }
#div08_adv ul li.date { font-size:14px;color:#105689; line-height:24px; text-align:center; padding:0; }
#div08_adv ul li.weixin { float:left; width:250px; text-align:center; font-size:14px; color:#749BB7; }
#div08_adv ul li.weixin img { width:180px; padding-bottom:10px; }

#div08_info { position:absolute; width:100%; height:150px; left:30px; top:400px; z-index: 300; }
#div08_info ul { float:left; width:260px; height:150px; }
#div08_info ul li { float:left; width:100%; height:auto; margin:0; padding:5px 0; list-style:none; }
#div08_info ul li.big { 
    width: 100%;height: 30px;font-family: SourceHanSansCN, SourceHanSansCN; background:url(../images/img0803.jpg) no-repeat left bottom;
    font-weight: bold;font-size: 24px;color: #105689; text-align: left;font-style: normal; padding-bottom:3px;
}
#div08_info ul li.small { 
    width: 100%;height: 66px;font-family: PingFangSC, PingFang SC;font-weight: 500;font-size: 14px;color: #105689;
    line-height: 22px;text-align: left;font-style: normal; padding:10px 0 0 0;
}
#div08_foot  { position:absolute; width:100%; height:150px; left:30px; top:550px; z-index: 300; padding-left:100px; }
#div15_foot  { position:absolute; width:100%; height:150px; left:30px; top:380px; z-index: 300; padding-left:10px; }


#div10_adv { position:absolute; width:100%; height:100px; left:0px; top:200px; z-index: 300; padding:30px 0 0 0; }
#div11_adv { position:absolute; width:100%; height:100%; left:0px; top:200px; z-index: 300; padding:30px 0 0 0; 
    background:url(../images/chanel11img02.png) no-repeat 270px 320px; background-size:33% auto }
#div_one_about10 { background-image:url(../images/chanel10_bg02.jpg); background-repeat: repeat-y; background-position:900px 100%;  }
.div10_item { float:left; width:500px; height:500px; margin-right:200px; }
#imgbg1001 { background:url(../images/chanel10img04.png) no-repeat right bottom; background-size:25%;  }
#imgbg1002 { background:url(../images/chanel10img05.png) no-repeat right bottom; background-size:25%; }

.div10_item ul li { list-style:none; }
.div10_item ul.tit li.bname { font-weight: 800;font-size: 24px;color: #105689;line-height: 36px;text-align: left;font-style: normal; padding:10px 0;  }
.div10_item ul.info { float:left; width:100%; height:auto; margin:0; padding:10px 0; } 
.div10_item ul.info li.name { float:left; width:20%; height:35px; line-height:35px; margin:0; padding:0; font-weight: bold;font-size:16px;color: #105689; }
.div10_item ul.info li.text { float:left; width:80%; height:35px; line-height:35px; margin:0; padding:0; font-weight: 400;font-size: 14px;color: #105689; }
.div10_item ul.adv { float:left; width:100%; height:auto; margin:0; padding:30px 0; } 
.div10_item ul.adv li { float:left; width:100%; height:35px; line-height:35px; margin:0; padding:10px 0; font-size:20px;color: #fff; }


#two {
    background-color: #739c7e; background: radial-gradient(circle, #9FC99F 25%, #0C9B6E 100%);
}

#three {
    background-color: #dc4b39; background: radial-gradient(circle, #dc4b39 25%, #722C16 100%);
}

#four {
    background-color: #FFD697; background: radial-gradient(circle, #FFD697 25%, #C18802 100%);
}
#five {
    background-color: #ff0000; background: radial-gradient(circle, #ff0000 25%, #C18802 100%);
}

#div_one { background:url(../images/one_bg2.png) no-repeat left bottom; position: relative;  } 
#div_one_about { background-color:rgba(0, 0, 0, 0.57); position: relative;  } 
#div_one img { z-index:2000; }
#div_one_about img { z-index:2000; }
#div_one_waterlogo { width:100%; height:100%; left:7%; top:-40%; z-index:1000; background:url(../images/one_title.png) no-repeat left bottom; position:absolute; } 
#div_one_waterlogo2 { width:100%; height:100%; left:65%; top:-40%; z-index:1000; background:url(../images/one_title.png) no-repeat left bottom; position:absolute; } 
#div_one_waterlogo_about { width:100%; height:100%; left:40%; top:-5%; z-index:1000; background:url(../images/about_02.png) no-repeat left bottom; position:absolute; } 


#div_one_chanel5 { position: relative;  } 
#div_one_chanel9 { position: relative;  } 
#div_chanel05list { width:1100px; height:300px; margin:0 auto; top:180px; background:url(../images/chanel_img05.png) no-repeat center center; position: relative; }
#imgchanel501 { position:absolute; left:80px; top:-100px; }
#imgchanel502 { position:absolute; left:0; top:120px; }
#imgchanel503 { position:absolute; right:-80px; top:-100px; }
#imgchanel504 { position:absolute; right:-120px; top:120px; }
.txt_advert0501 {     text-shadow: 5px 5px 0px rgba(2, 50, 55, 0.69);
    width: 1104px;
    height: 80px;
    overflow-wrap: break-word;
    color: rgba(249, 249, 249, 1);
    font-size: 76px;
    letter-spacing: 4px;
    font-family: SourceHanSansCN-Heavy;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
    line-height: 120px; top:100px; left:50px; position: absolute; }

.txt_advert0502 {   top:190px; left:50px; position: absolute;
    text-shadow: 3px 3px 0px rgba(13, 48, 58, 1);
    width: 480px;
    height: 40px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 40px;
    letter-spacing: 40px;
    font-family: SourceHanSansCN-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 60px;
    margin: 31px 0 0 312px;
}


.div_chanel09_item1 { background:url(../images/chanel901.png) no-repeat left top !important; }
.div_chanel09_item2 { background:url(../images/chanel902.png) no-repeat left top !important; }
.div_chanel09_item3 { background:url(../images/chanel903.png) no-repeat left top !important; }
.div_chanel09_item4 { background:url(../images/chanel904.png) no-repeat left top !important; }
.div_chanel09_item5 { background:url(../images/chanel905.png) no-repeat left top !important; }
.div_chanel09_item1_hover { background:url(../images/chanel901_hover.png) no-repeat left top !important; }
.div_chanel09_item2_hover { background:url(../images/chanel902_hover.png) no-repeat left top !important; }
.div_chanel09_item3_hover { background:url(../images/chanel903_hover.png) no-repeat left top !important; }
.div_chanel09_item4_hover { background:url(../images/chanel904_hover.png) no-repeat left top !important; }
.div_chanel09_item5_hover { background:url(../images/chanel905_hover.png) no-repeat left top !important; }


#div07_list { width:1300px; height:900px; margin:0 auto; position:absolute; top:12%; left:15%; 
    z-index:1000; text-align: center; background:url(/images/chanel07img.png?t=22) no-repeat center top;
    background-size:100% auto;
}
#div07_blue { position:absolute; width:1500px; height:317px; background-color:#0D97FF; opacity:0.42; top:52%; left:18%;  }
#div07_content { float:left; width:400px; height:400px; line-height:50px; font-size:26px; color:#105689; padding:450px 0 0 100px; }

@media only screen and (max-width: 1920px)
{
#one_img01 { width:220px; position:absolute; left:10%; bottom:280px; }
#one_img02 { width:260px; position:absolute; left:25%; bottom:150px; }
#one_img03 { width:420px; position:absolute; left:calc(50% - 200px); bottom:-10px; }
#one_img04 { width:200px; position:absolute; left:60%; bottom:300px; }
#one_img05 { width:260px; position:absolute; left:67%; bottom:120px; }
#one_img06 { width:200px; position:absolute; left:83%; bottom:250px; }
#one_img03_about { width:1100px; position:absolute; left:20%; bottom:230px; }
#div12_txt {  width:100%; height:100px; margin:0 auto; position:absolute; z-index:10; top:calc(50% - 90px);
    overflow-wrap: break-word;color: rgba(255, 255, 255, 1); font-size: 133px;letter-spacing: 20px; text-transform: uppercase;
    font-family: SourceHanSansCN-Heavy;font-weight: 900; text-align: center; white-space: nowrap; }
#div12_list { width:1200px; height:auto; margin:0 auto; position:absolute; top:20%; left:18%; z-index:1000; text-align: center; }
#div_chanel09list { width:1220px; height:100%; margin:0 auto; top:0px; position:absolute; left:320px;  }
.chanel9item { float:left; width:240px; height:100%;  background:#ff0000; margin-right:1px; position: relative; }
.texttit09 { width: 144px;height: 36px; overflow-wrap: break-word; color: rgba(245, 245, 245, 1);font-size: 36px; font-family: SourceHanSansCN-Heavy; font-weight: 900;
    text-align: left; white-space: nowrap; line-height: 54px; margin: 301px 0 0 48px; }
.chanel09prod { height: 250px; background-size: 100% 100%; width: 80px; left: 45px; top: 598px; position: absolute; }

}

@media only screen and (max-width: 1366px)
{
#one_img01 { width:220px; position:absolute; left:10%; bottom:80px; }
#one_img02 { width:260px; position:absolute; left:22%; bottom:50px; }
#one_img03 { width:400px; position:absolute; left:calc(50% - 200px); bottom:-50px; }
#one_img04 { width:200px; position:absolute; left:60%; bottom:200px; }
#one_img05 { width:260px; position:absolute; left:65%; bottom:30px; }
#one_img06 { width:200px; position:absolute; left:83%; bottom:200px; }
#one_img03_about { width:1100px; position:absolute; left:20%; bottom:230px; }
#div12_txt {  width:100%; height:100px; margin:0 auto; position:absolute; z-index:10; top:calc(50% - 100px); left:5%;
    overflow-wrap: break-word;color: rgba(255, 255, 255, 1); font-size: 110px;letter-spacing: 20px; text-transform: uppercase;
    font-family: SourceHanSansCN-Heavy;font-weight: 900; text-align: center; white-space: nowrap; }

    #div12_list { width:1200px; height:auto; margin:0 auto; position:absolute; top:20%; left:10%; z-index:1000; text-align: center; }
    .chanel12imgmain { width:900px; }
    #div_chanel09list { width:1010px; height:100%; margin:0 auto; top:0px; position:absolute; left:320px;  }
    .chanel9item { float:left; width:200px; height:100%;  background:#ff0000; margin-right:1px; position: relative; }
    .texttit09 { width: 190px;height: 36px; overflow-wrap: break-word; color: rgba(245, 245, 245, 1);font-size: 36px; font-family: SourceHanSansCN-Heavy; font-weight: 900;
        text-align:center; white-space: nowrap; line-height: 54px; margin: 301px 0 0 0px; }
    .chanel09prod { height: 250px; background-size: 100% 100%; width: 80px; left: 45px; top: 400px; position: absolute; }


}


#showradio:checked ~ .radio { display: block; }

.home { background-position: left bottom; top: 111px; }

.book { background-position: right top; top: 155px; }

.view { background-position: left top; top: 200px; }

.mail { background-position: right bottom; top: 245px; }
.lxwm { background-position: right bottom; top: 290px; }
#divbody04 { position:absolute; top:80px; left:0; width:100%; height:100%; margin:0 auto; padding:0; background:url(../images/chanel04bg2.png) no-repeat center top; background-size:40% auto; z-index:9000; }
.divbody04_left { float:left; width:340px; height:100%; margin:0px 0 0 150px; padding:0px 0 0 0;  }
.divbody04_center { float:left; width:740px; height:100%; margin:0px 0 0 0px; padding:0; }
.divbody04_right { float:left; width:calc(100% - 1270px); height:100%; margin:0px 0 0 0px; padding:0; }
.divbody04_center_titl1 { float:left; width:740px; height:30px; margin:0px 0 0 0px; padding:100px 0 0 0; font-size:40px; font-weight:bold; text-align:center; color:rgba(16, 86, 137, 1); }
.divbody04_center_mark { float:left; width:363px; height:auto; line-height:24px; border-top:1px dashed rgba(16, 86, 137, 0.3); border-bottom:1px dashed rgba(16, 86, 137, 0.3);
     margin:100px 150px 0 150px; padding:20px 0 ; font-size:14px; font-weight:500; text-align:center; color:rgba(16, 86, 137, 1); }
.divbody04_center_info { float:left; width:500px; height:auto; margin:40px 100px 0 100px; padding:20px 0 ; }
.divbody04_center_info ul { float:left; width:50%; height:auto; margin:0; padding:0 ; }
.divbody04_center_info ul li { list-style:none; }
.divbody04_center_info ul li.name { float:left; width:100%; height:auto; margin:0; padding:0; font-size:20px; color:rgba(16, 86, 137, 1); text-align:center; }
.divbody04_center_info ul li.tit { float:left; width:100%; height:auto; margin:0; padding:0; font-size:14px; color:rgba(16, 86, 137, 1); text-align:center; }
.divbody04_center_info ul li.mark { float:left; width:100%; height:auto; line-height:20px; letter-spacing:2px; margin:0; padding:20px 0 0 0; font-size:14px; color:rgba(16, 86, 137, 1); text-align:center; }



.divbody04_left ul { float:left; width:100%; margin:100px 0px; }
.divbody04_left ul li.left { float:left; width:170px; height:auto; padding:0 10px; list-style:none; }
.divbody04_left ul li.right { float:left; width:120px; height:auto; padding:0 0px 0 20px; list-style:none; }

.divbody04_right ul { float:left; width:100%; margin:100px 50px; }
.divbody04_right ul li.left { float:left; width:160px; height:auto; padding:0 10px; list-style:none; }



#divbody06 { position:absolute; top:80px; left:0; width:calc(100% - 300px); height:100%; margin:0 auto; padding:0 0 0 300px;  z-index:9000; }
#divbody06_tit1 { float:left; width:100%; height:60px; line-height:60px; margin:0; padding:0; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size:40px; font-weight:900;; color:#fff; }
#divbody06_tit2 { float:left; width:100%; height:60px; line-height:60px; margin:0; padding:0; font-family:SourceHanSansCN-Heavy; text-transform:uppercase; font-size:60px; font-weight:900; opacity:0.5; color:#fff; }

.chanel06_item { width:200px; height:260px; margin:0; padding:0; color:#fff; position:absolute; }
.chanel06_item ul { float:left; width:calc(100% - 20px); height:260px; margin:0; padding:10px 0 0 20px; }
.chanel06_item ul.line1 { background:url(../images/chanel0601.png) no-repeat left 10px; }
.chanel06_item ul.line2 { background:url(../images/chanel0602.png) no-repeat left 10px; padding-top:110px; }
.chanel06_item ul.line3 { background:url(../images/chanel0603.png) no-repeat left 45px; padding-top:110px; }
.chanel06_item ul li { float:left; width:100%; list-style:none; }
.chanel06_item ul li.name {  margin:0; padding:0; height:25px; line-height:25px; font-size:16px; font-weight:700; }
.chanel06_item ul li.year {  margin:0; padding:0px 0; height:34px; line-height:34px; font-size:34px; font-weight:700; font-family:DINCond-Bold; }
.chanel06_item ul li.mark {  margin:0; padding:5px 0 5px 0; height:auto; line-height:22px; font-size:14px; }

#chanel06_item01 { left:300px; top:200px; }
#chanel06_item02 { left:370px; top:420px; }
#chanel06_item03 { left:600px; top:160px; }
#chanel06_item04 { left:710px; top:380px; }
#chanel06_item05 { left:880px; top:120px; }
#chanel06_item06 { left:990px; top:330px; }
#chanel06_item07 { left:1180px; top:70px; }
#chanel06_item08 { left:1270px; top:260px; color:rgba(255, 202, 28, 1) }

/* page layout */
.pagebody {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

/* media query */
@media (min-width:801px) {
   #content2:checked ~ #pages { top: -100%; }
   #content3:checked ~ #pages { top: -200%; }
   #content4:checked ~ #pages { top: -300%; }
   #content5:checked ~ #pages { top: -400%; }
}

@media (max-width:800px) {
    .page { display: none; }

    #content1:checked ~ #pages #one,
    #content2:checked ~ #pages #two,
    #content3:checked ~ #pages #three,
    #content4:checked ~ #pages #four { display: block; }

    .check,
    .shownavigation,
    .nextback,
    #content1:checked ~ .content1, 
    #content2:checked ~ .content1, 
    #content3:checked ~ .content2, 
    #content4:checked ~ .content3,
    #content5:checked ~ .content4,
    #content1:checked ~ .content2, 
    #content2:checked ~ .content3, 
    #content3:checked ~ .content4, 
    #content4:checked ~ .content5, 
    #content5:checked ~ .content5 {
        width: 50px;
        height: 50px;
        position: relative;
        top: 25px;
        left: 25px;
    }

    .move:checked + label:after {
        left: 50px;
        top: 15px;
    }

    .home { background-position: -5px -65px; }

    .book { background-position: -65px -3px; }

    .view { background-position: -5px -5px; }

    .mail { background-position: -65px -65px; }

    #content1:checked ~ .content2:after, 
    #content2:checked ~ .content3:after, 
    #content3:checked ~ .content4:after,
    #content2:checked ~ .content1:after, 
    #content3:checked ~ .content2:after, 
    #content4:checked ~ .content3:after {
        font-size: 2em;
        left: 16px;
        top: 5px;
    }
}

@media (max-width:640px) {
    .check,
    .shownavigation,
    .nextback {
        border: none;
        border-right: 1px solid #757575;
        margin-right: -1px;
        top: 12px;
        left: 12px;
    }

    .move:checked + label:after {
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;     
        border-top: 10px solid #fff;
        border-top: 10px solid rgba(255,255,255,.85);
        left: 15px;
        top: 50px;
    }

    #content1:checked ~ .content1, 
    #content2:checked ~ .content1, 
    #content3:checked ~ .content2, 
    #content4:checked ~ .content3,
    #content1:checked ~ .content2, 
    #content2:checked ~ .content3, 
    #content3:checked ~ .content4, 
    #content4:checked ~ .content4 {
        top: 12px;
        left: 12px;
    }

    #showradio:checked ~ .radio,
    #showradio ~ .nextback,
    .shownavigation {
        display: inline-block;
        margin-left: -3px;
    }

    .shownavigation {
        border-radius: 5% 0 0 5%;
        box-shadow: -1px 0 1px #757575;
    }

    .mail,
    #content1:checked ~ .content2, 
    #content2:checked ~ .content3, 
    #content3:checked ~ .content4, 
    #content4:checked ~ .content4 {
        border-radius: 0 5% 5% 0;    
        box-shadow: 1px 0 0 #757575;
        border-right: none;
    }
}