/* CSS Document */
/* 重設
--------------------------------------------------- */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, lag11bel, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;background: transparent;/*vertical-align: baseline;*/}
ol, ul, li{list-style: none;}

/*以下為針對HTML5,暫時不開放----------------*/  
/* HTML5 display-role reset for older browsers */
/*
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
*/
fieldset,img { border: none; }

/*-------------------基本-----------------------------*/
a{ font-size:15px; text-decoration:none;outline:none; /* for Firefox */
 hlbr:expression(this.onFocus=this.blur()); color:#000 /* for IE */;}
a:hover{ font-size:15px; text-decoration:none;color:#000;outline:none; /* for Firefox */hlbr:expression(this.onFocus=this.blur());}
a:focus{outline: none;hlbr:expression(this.onFocus=this.blur());text-decoration:none;}

body{outline: none; /* for Firefox */
 hlbr:expression(this.onFocus=this.blur()); /* for IE */ line-height:0px}

/*------故事開始---------*/
/*--------左邊範圍----*/
.m1{ width:100%; height:100%; margin:0 auto; background:#000; position:relative; z-index:0}
.m1 .l1{ width:55%; height:100%; float:left; background:url(../images/L.png) center top no-repeat; position:absolute; top:0; left:0; overflow:hidden; z-index:1; transition: 0.2s; background-size: 100% 100%;-webkit-clip-path: polygon(0 0, 93% 0, 99% 100%, 0% 100%);
clip-path: polygon(0 0, 93% 0, 99% 100%, 0% 100%);}
<!-- .m1 .l1:hover{ z-index:4;width:55%} -->
.m1 .l1 .x1{ width:100%; height:100%; position:absolute; top:70px; bottom:33px; left:0; right:0;}

/*-----選單---------*/
/*----上方選單----*/
.m1 .l1 .x1 .n1{ margin:0 auto;/* %*/width:95%;/* %*/height:40%; float:left; position:relative; padding:1%}
.m1 .l1 .x1 .n1 .nn1{/* %*/width:100%;/* %*/height:280px; position:absolute; bottom:0px}
/*---icon圓球---*/
.m1 .l1 .x1 .n1 .nn1 .o1{/* %*/width:100%;/* %*/height:200px}
.m1 .l1 .x1 .n1 .nn1 .o1 .icon1{/* %*/width:320px;/* %*/height:120px; margin:0 auto; padding-left:5px}
.m1 .l1 .x1 .n1 .nn1 .o1 .tx1{/* %*/width:300px;/* %*/height:80px; overflow: hidden; text-align: left; margin:0 auto}
.m1 .l1 .x1 .n1 .nn1 .o1 .tx1 h4{ font: bold 66px/45px Verdana, "微軟正黑體";color: #fff; margin:0 0 5px 5px;overflow: hidden; text-align:left;}

.m1 .l1 .x1 .n1 .nn1 .o1 .tx1 h3{ font:32px/32px Verdana, "微軟正黑體";color: #fd4d00 ; margin-bottom:5px;overflow: hidden; text-align: left; margin-top:5px}
/*---免費下載---*/
.m1 .l1 .x1 .n1 .nn1 .o2{/* %*/width:320px;/* %*/height:55px; margin:0 auto; padding-left: 5px;}
.m1 .l1 .x1 .n1 .nn1 .o2 .but1{/* %*/width:300px;/* %*/height:50px; margin-top:10px}
.m1 .l1 .x1 .n1 .nn1 .o2 .but1 .bt1{/* %*/width:55%;/* %*/height:65%; background:#fdb700;border-radius:50px; font: bold 25px/25px Verdana, "微軟正黑體"; color: #333; text-align:center; box-shadow:0px 2px 4px rgba(0%,0%,0%,0.5); padding-top:10px}
.m1 .l1 .x1 .n1 .nn1 .o2 .but1 .bt1:hover{background:#fff; color: #fdb700;}

/*----下方選單----*/
.m1 .l1 .x1 .n2{ margin:0 auto;/* %*/width:100%;/* %*/height:40%; float:left; position:relative}
.m1 .l1 .x1 .n2 .nn2 {/* %*/width:100%;/* %*/height:80%; position:absolute; top:0px;}
/*-----------QR----------*/
.m1 .l1 .x1 .n2 .nn2 .qr1{/* %*/width:400px;/* %*/height:205px; margin:0 auto;}

/*------二維碼提醒--------*/
.m1 .l1 .x1 .n2 .nn2 .tt1{/* %*/width:330px;/* %*/height:20%; font: bold 21px/21px Verdana, "微軟正黑體"; color:#999; margin:0 auto}

/*----黑影子_左邊----*/
.m1 .mask1{ width:100%; height:100%; float:left; opacity:0.5; transition: 0.3s; background:#000; position:absolute; top:0; left:0; z-index:2;}


/*---------------------右邊範圍-------------------------*/
.m1 .r1{ width:55%; height:100%; float:right; background:url(../images/R.png) center top no-repeat; position:absolute; top:0; right:0; overflow:hidden; z-index:4; transition: 0.2s; background-size: 100% 100%;-webkit-clip-path: polygon(6.3% 0, 100% 0, 100% 100%, 0.3% 100%);
clip-path: polygon(6.3% 0, 100% 0, 100% 100%, 0.3% 100%);}
<!-- .m1 .r1:hover{ z-index:4; width:55%} -->
.m1 .r1 .x2{ width:100%; height:100%; position:absolute; top:70px; bottom:33px; left:0; right:0;}

/*-----選單---------*/
/*----上方選單----*/
.m1 .r1 .x2 .n3{/* %*/width:95%;/* %*/height:40%; float:right; margin:0 auto; position:relative; padding:1%}
.m1 .r1 .x2 .n3 .nn3{/* %*/width:100%;/* %*/height:280px; position:absolute; bottom:0px}
/*---icon圓球---*/
.m1 .r1 .x2 .n3 .nn3 .o3{/* %*/width:100%;/* %*/height:200px}
.m1 .r1 .x2 .n3 .nn3 .o3 .icon2{/* %*/width:170px;/* %*/height:120px; margin:0 auto;}
.m1 .r1 .x2 .n3 .nn3 .o3 .tx2{/* %*/width:210px;/* %*/height:80px; overflow: hidden ; margin:0 auto}
.m1 .r1 .x2 .n3 .nn3 .o3 .tx2 h5{ font: bold 66px/45px Verdana, "微軟正黑體";color: #fff; margin:0 0 5px 5px;overflow: hidden; text-align:center;}
.m1 .r1 .x2 .n3 .nn3 .o3 .tx2 h4{ width:190px; font: bold 32px/32px Verdana, "微軟正黑體"; color:#4c1e4b; margin-bottom:5px;overflow: hidden; text-align: center; margin-top:5px}
/*---免費下載---*/
.m1 .r1 .x2 .n3 .nn3 .o4{/* %*/width:166px;/* %*/height:55px; margin:0 auto}
.m1 .r1 .x2 .n3 .nn3 .o4 .but2{ width:300px; height:50px; margin-top:10px}
.m1 .r1 .x2 .n3 .nn3 .o4 .but2 .bt2{ width:55%; height:70%; margin:auto 0; background:#4c1e4b;border-radius:50px; font: bold 25px/25px Verdana, "微軟正黑體"; color: #fff; text-align:center; box-shadow:0px 2px 4px rgba(0%,0%,0%,0.5); padding-top:10px}
.m1 .r1 .x2 .n3 .nn3 .o4 .but2 .bt2:hover{ font: bold 25px/25px Verdana, "微軟正黑體";background:#fff; color: #4c1e4b;}

/*----下方選單----*/
.m1 .r1 .x2 .n4{ margin:0 auto;/* %*/width:100%;/* %*/height:40%; float:right; position:relative}
.m1 .r1 .x2 .n4 .nn4 {/* %*/width:100%;/* %*/height:80%; position:absolute; top:0px; padding-left:10px}
/*-----------QR----------*/
.m1 .r1 .x2 .n4 .nn4 .qr2{/* %*/width:230px;/* %*/height:205px; margin:0 auto;}

/*------二維碼提醒--------*/
.m1 .r1 .x2 .n4 .nn4 .tt2{/* %*/width:230px;/* %*/height:20%; font: bold 21px/21px Verdana, "微軟正黑體"; color:#999; margin:0 auto; text-align:center; padding-left:20px; padding-top: 10px;}

/*---黑影子_右邊---*/
.m1 .mask2{ width:80%; height:950px; float:right; opacity:0.5; position:absolute; top:0 ; right:0; background:#000; z-index:2; display:none}
.m1 .mask2:hover{ z-index:0}