/*CSS Reset*/ * { margin:0; padding:0; outline:0;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td { margin:0;padding:0; } table { border-collapse:collapse;border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal;font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; margin:0 auto;} q:before,q:after { content:'';} a, a:link, a:visited, a:active { text-decoration:underline;} a:hover { text-decoration:none;} strong { font-weight:bold;} p { margin:0px; padding:0 0 15px 0;} /* Container and Base ----------------------------------------------- */ .dnone { display:none;} .clear { clear:both;} /* ul fix ----------------------------------------------- */ .contents ul, .contents dl, .section, .body, .cfix{ height:inherit; margin:auto; zoom:1; } .contents ul:after, .contents dl:after, .section:after, .body:after, .cfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } /*mac\*/ *html .contents ul, *html .contents dl, *html .section, *html .body, *html .cfix{ height:1%;} .contents ul, .contents dl, .section, .body, .cfix { display:block;} /*end*/ /* class ------------------------------------------------*/ .toggle_container{ padding:0 20px 0 20px; overflow:hidden; z-index:999;} .areaContents{ width:940px; padding:0; overflow:hidden; margin:auto; position:relative;} .productLink{ width:auto; padding-right:50px; height:44px;} .productLink span{ display:block; width:300px; height:44px; text-align:center; float:right;} .productLink span a{ display:block; width:300px; height:44px; left:0; text-indent:-9999px; overflow:hidden;} .areaClose{ width:auto; padding-right:63px;} .areaClose span{ display:block; width:30px; height:32px; text-align:center; float:right;} .areaClose span a{ display:block; width:30px; height:32px; left:0; text-indent:-9999px; overflow:hidden;} /* top ------------------------------------------------*/ #grid1{ position:relative;} #grid1 #logo { height:30px; padding-left:70px;} #grid1 #logo ul{} #grid1 #logo ul li{ float:left;} #grid1 #logo ul li.btn1{ width:100px;} #grid1 #logo ul li.btn2{ width:65px;} #grid1 #logo ul li.btn3{ width:120px; position:relative; left:640px;} #grid1 #logo a{ text-indent:-9999px; overflow:hidden; display:block; width:100px; height:30px;} #grid1 .mainMov{ position:absolute; top:76px; left:544px; width:425px; height:239px; background-color:#FFFFFF;} #grid1 .btnArea{ position:absolute; top:180px; left:165px; width:375px; height:222px;} #grid1 .btnArea2{ position:absolute; top:175px; left:180px; width:240px; height:30px;} #grid1 .btnArea2 a{ display:block; height:30px; text-indent:-9999px; overflow:hidden} #grid1 img#goBtn{ position:absolute; top:0px; left:0px;} #grid1 img#arrow{ position:absolute; top:62px; left:207px; visibility:hidden} #grid1hover{ background:url(../Images/Common/grid1/bg_grid1_hover.jpg) no-repeat; background-position:0 222px;} #grid1_1 .areaClose, #grid1_2 .areaClose{ height:70px; padding-right:112px !important} #grid1_1 .areaClose span, #grid1_2 .areaClose span{ position:relative; top:40px; width:20px; height:20px;} #grid1_1{ background:url(../Images/Common/grid1/unit1.jpg) no-repeat; height:1012px;} #grid1_1 ul.btnArea{ position:relative; height:800px;} #grid1_1 ul.btnArea li { width:222px; height:46px;} #grid1_1 ul.btnArea li a { display:block; height:46px; text-indent:-9999px; overflow:hidden;} #grid1_1 ul.btnArea li.btn1 { position:absolute; top:274px; left:376px;} #grid1_1 ul.btnArea li.btn2 { position:absolute; top:274px; left:603px;} #grid1_1 ul.btnArea li.btn3 { position:absolute; top:333px; left:376px;} #grid1_1 ul.btnArea li.btn4 { position:absolute; top:333px; left:603px;} #grid1_1 ul.btnArea li.btn5 { position:absolute; top:392px; left:376px;} #grid1_1 ul.btnArea li.btn6 { position:absolute; top:392px; left:603px;} #grid1_1 ul.btnArea li.btn7 { position:absolute; top:451px; left:376px;} #grid1_1 ul.btnArea li.btn8 { position:absolute; top:451px; left:603px;} #grid1_1 ul.btnArea li.btnMediaGo { position:absolute; top:655px; left:360px; width:64px; height:18px;} #grid1_1 ul.btnArea li.btn1 a{ background:url(../Images/Common/grid1/btn_dl_xperia.gif) no-repeat; } #grid1_1 ul.btnArea li.btn1 a:hover{ background-position:0 -46px;} #grid1_1 ul.btnArea li.btn2 a{ background:url(../Images/Common/grid1/btn_dl_xperia_s.gif) no-repeat; } #grid1_1 ul.btnArea li.btn2 a:hover{ background-position:0 -46px;} #grid1_1 ul.btnArea li.btn3 a{ background:url(../Images/Common/grid1/btn_dl_iphone.gif) no-repeat; } #grid1_1 ul.btnArea li.btn3 a:hover{ background-position:0 -46px;} #grid1_1 ul.btnArea li.btn4 a{ background:url(../Images/Common/grid1/btn_dl_iphone_s.gif) no-repeat; } #grid1_1 ul.btnArea li.btn4 a:hover{ background-position:0 -46px;} #grid1_1 ul.btnArea li.btn5 a{ background:url(../Images/Common/grid1/btn_dl_iphone4.gif) no-repeat; } #grid1_1 ul.btnArea li.btn5 a:hover{ background-position:0 -46px;} #grid1_1 ul.btnArea li.btn6 a{ background:url(../Images/Common/grid1/btn_dl_iphone4_s.gif) no-repeat; } #grid1_1 ul.btnArea li.btn6 a:hover{ background-position:0 -46px;} #grid1_1 ul.btnArea li.btn7 a{ background:url(../Images/Common/grid1/btn_dl_ipad.gif) no-repeat; } #grid1_1 ul.btnArea li.btn7 a:hover{ background-position:0 -46px;} #grid1_1 ul.btnArea li.btn8 a{ background:url(../Images/Common/grid1/btn_dl_ipad_s.gif) no-repeat; } #grid1_1 ul.btnArea li.btn8 a:hover{ background-position:0 -46px;} #grid1_1 ul.btnArea li.btnMediaGo a{ height:18px;} #grid1_2{ background:url(../Images/Common/grid1/unit2.jpg) no-repeat; height:676px;} #grid1_2 ul.btnArea{ position:relative; height:450px;} #grid1_2 ul.btnArea li { width:449px; height:46px;} #grid1_2 ul.btnArea li a { display:block; height:46px; text-indent:-9999px; overflow:hidden;} #grid1_2 ul.btnArea li.btn1 { position:absolute; top:274px; left:376px;} #grid1_2 ul.btnArea li.btn1 a{ background:url(../Images/Common/grid1/btn_dl_tv.gif) no-repeat; } #grid1_2 ul.btnArea li.btn1 a:hover{ background-position:0 -46px;} #grid2{ position:relative;} #grid2_1 .areaClose, #grid2_2 .areaClose, #grid2_3 .areaClose{ height:220px;} #grid2_1 .areaClose span, #grid2_2 .areaClose span, #grid2_3 .areaClose span{ position:relative; top:40px;} #grid2_4 .areaClose{ height:70px; padding-right:112px !important} #grid2_4 .areaClose span{ position:relative; top:40px; width:20px; height:20px;} #grid2_1{ background:url(../Images/Common/grid2/unit1.jpg) no-repeat; height:968px;} #grid2_1 h2{ height:0px; text-indent:-9999px; overflow:hidden;} #grid2_1 h3{ display:none;} #grid2_1 .section{ width:auto; height:142px; padding-left:73px; margin-bottom:118px; padding-top:5px;} #grid2_1 .movie{ width:254px; height:142px; float:left; margin:0 16px 0 0;} #grid2_2{ background:url(../Images/Common/grid2/unit2.jpg) no-repeat; height:968px;} #grid2_2 h2{ height:0px; text-indent:-9999px; overflow:hidden;} #grid2_2 h3{ display:none;} #grid2_2 .section{ width:auto; height:142px; padding-left:73px; margin-bottom:118px; padding-top:5px;} #grid2_2 .movie{ width:254px; height:142px; float:left; margin:0 16px 0 0;} #grid2_3{ background:url(../Images/Common/grid2/unit3.jpg) no-repeat; height:968px;} #grid2_3 h2{ height:0px; text-indent:-9999px; overflow:hidden;} #grid2_3 h3{ display:none;} #grid2_3 .section{ width:auto; height:142px; padding-left:73px; margin-bottom:118px; padding-top:5px;} #grid2_3 .movie{ width:254px; height:142px; float:left; margin:0 16px 0 0;} #grid2_4{ background:url(../Images/Common/grid2/unit4.jpg) no-repeat; height:488px;} #grid2_4 h2{ height:0px; text-indent:-9999px; overflow:hidden;} #grid2_4 h3{ display:none;} #grid2_4 .section{ width:auto; height:142px; padding-left:74px; margin-bottom:123px;} #grid2_4 .movie{ width:254px; height:142px; float:left; margin:0 15px 0 0;} #grid2_4 .areaContents{ height:380px;} #grid2_4 .btn1{ position:relative; top:335px; left:280px; width:100px; height:18px;} #grid2_4 .btn1 a{ display:block; height:18px; text-indent:-9999px; overflow:hidden;} #grid3{ position:relative;} #grid3_1 .areaClose, #grid3_2 .areaClose, #grid3_3 .areaClose{ height:50px;} #grid3_1 .areaClose span, #grid3_2 .areaClose span, #grid3_3 .areaClose span{ position:relative; top:10px;} #grid3_1{ background:url(../Images/Common/grid3/unit1.jpg) no-repeat; height:1040px;} #grid3_1 h2{ height:95px; text-indent:-9999px; overflow:hidden;} #grid3_1 h3{ display:none;} #grid3_1 .section{ width:auto; height:142px; padding-left:74px; margin-bottom:123px;} #grid3_1 .movie{ width:254px; height:142px; float:left; margin:0 15px 0 0; background-color:#999999;} #grid3_1 .areaContents{ height:900px; } #grid3_1 div.btn{ width:800px; position:absolute; overflow:hidden;} #grid3_1 div.btn a{ display:block; height:190px; text-indent:-9999px; overflow:hidden;} #grid3_1 #a1{ top:140px; left:70px; height:140px;} #grid3_1 #a2{ top:320px; left:70px; height:140px;} #grid3_1 #a3{ top:500px; left:70px; height:140px;} #grid3_1 #a4{ top:670px; left:70px; height:190px;} #grid3_2{ background:url(../Images/Common/grid3/unit2.jpg) no-repeat; height:1104px;} #grid3_2 .areaContents{ height:1000px; } #grid3_2 div.btn{ width:370px; position:absolute; overflow:hidden;} #grid3_2 div.btn a{ display:block; height:200px; text-indent:-9999px; overflow:hidden;} #grid3_2 #ba1{ top:210px; left:70px; height:200px;} #grid3_2 #ba2{ top:477px; left:70px; height:200px;} #grid3_2 #ba3{ top:730px; left:70px; height:200px;} #grid3_2 #bb1{ top:210px; left:500px; height:200px;} #grid3_2 #bb2{ top:477px; left:500px; height:200px;} #grid3_2 #bb3{ top:730px; left:500px; height:200px;} #grid3_3{ background:url(../Images/Common/grid3/unit3.jpg) no-repeat; height:1040px;} #grid3_3 .areaContents{ height:1000px; } #grid3_3 div.btn{ width:370px; position:absolute; overflow:hidden;} #grid3_3 div.btn a{ display:block; height:200px; text-indent:-9999px; overflow:hidden;} #grid3_3 #c1{ top:150px; left:70px; height:200px;} #grid3_3 #c2{ top:150px; left:500px; height:200px;} #grid3_3 #c3{ top:415px; left:70px; height:200px;} #grid3_3 #c4{ top:415px; left:500px; height:200px;} #grid3_3 #c5{ top:670px; left:70px; height:200px;} #grid3_3 #c6{ top:670px; left:500px; height:200px;} #grid4{ position:relative;} #grid4_1 .areaClose, #grid4_2 .areaClose{ height:220px;} #grid4_1 .areaClose span, #grid4_2 .areaClose span{ position:relative; top:40px;} #grid4_1{ background:url(../Images/Common/grid4/unit1.jpg) no-repeat; height:1296px;} #grid1_1, #grid1_2, #grid2_1, #grid2_2, #grid2_3, #grid3_1, #grid3_2, #grid3_3, #grid4_1{ visibility:hidden;} /* share ------------------------------------------------*/ #linkBox{ width:auto; height:50px; position:relative;background:url(../Images/Common/bg_linkbox.jpg) no-repeat;} #linkBox ul { width:200px; height:34px; background-color:#ccc;} #linkBox ul li{ margin-right:5px; width:16px; height:15px;float:left; padding:0;} #linkBox ul li img{ border:0; margin:0;} #shareArea{ position:absolute; top:10px; left:70px;width:96px; height:41px; background:url(../Images/Common/share.gif) no-repeat;} #shareArea2{ position:absolute; top:10px; left:70px;} #shareArea2 ul{ width:130px; background:url(../Images/Common/share_on.gif) no-repeat; padding:8px 0 0 80px;} #environment{ height:50px;} #environment a{ display:block; width:60px; height:12px; position:relative; top:15px; left:90px;background:url(../Images/Common/btn_environment.gif) no-repeat; text-indent:-9999px; overflow:hidden;} body#environmentArea{ background:url(../Images/Common/environment.jpg) no-repeat; background-position:center top;background-color:#e9e9e9; padding:0; margin:0;} body#environmentArea .area{ margin:auto; width:700px; height:480px; position:relative;} body#environmentArea .btn{ position:absolute; top:325px; left:120px; width:400px; height:40px;} body#environmentArea .btn a{ display:block; height:40px; text-indent:-9999px; overflow:hidden;} body#bookmarklet{ background:url(../Images/Common/bookmarklet.jpg) no-repeat; background-position:center top;background-color:#e9e9e9; padding:0; margin:0;} body#bookmarklet .area{ position:relative; margin:auto; width:750px; height:500px; } body#bookmarklet .btn{ position:absolute; top:100px; left:40px; width:280px; height:30px;} body#bookmarklet .btn a, body#bookmarklet .btn a:link, body#bookmarklet .btn a:visited, body#bookmarklet .btn a:active, body#bookmarklet .btn a:hover {color:#06bed6; text-decoration:none; font-size:22px; text-align:center; text-decoration:underline;} /* Banner WX5 ------------------------------------------------*/ #bannerWX5{ height:112px;background:url(../Images/Common/banner/bg_banner_wx5.jpg) no-repeat;} #bannerWX5 a{ display:block; width:890px; height:112px; margin:auto; text-indent:-9999px; overflow:hidden;}