/*ZIP ==================== data : 2017 / 1 / 12 - 1046 version : 4.0 - 2 pre : event ANNIV 2016 pre : header 4.0 pre : #mmHeader{top: 0;} this : #mmHeader .mainMenu:hover{ba-co} ==================== */ #mmHeader{border-bottom:solid 2px #0ca3B9; background-color:rgba(1,195,224,.9); height:43px;width: 100%; position:fixed;z-index:990;top: 0; -webkit-transform-origin:0% 0%;-moz-transform-origin:0% 0%;-ms-transform-origin:0% 0%;-o-transform-origin:0% 0%;transform-origin:0% 0%; -webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0); -webkit-transition:.1s;-moz-transition:.1s;-ms-transition:.1s;-o-transition:.1s;transition:.1s; } #mmHeader.mmHeaderRise{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%); -webkit-transition:.6s;-moz-transition:.6s;-ms-transition:.6s;-o-transition:.6s;transition:.6s; } #mmHeader .wrapper{overflow:hidden;min-width:320px;} #mmHeader a:hover{text-decoration:none;} #mmLogIn .memInfo:hover,#mmLogIn .noti:hover,#mmHeader .pm:hover,#mmHeader .logOut:hover, #mmLogOut .logMM:hover,#mmLogOut .logFB:hover, #mmLogOut .logG:hover,#mmLogOut .register:hover,#mmLogOut .logIn:hover{background-color:#0ca3b9;color:#fff;} /**/ #mmLogIn .memInfo,#mmLogIn .noti, #mmLogOut .logIn{margin-top:3px;} #mmLogIn .memInfo,#mmLogIn .noti, #mmLogOut .logIn{margin-left:1px;} /**/ #mmHeaderCountBox{overflow:hidden;} #mmHeaderCountBox, #mmMenuSwitch,#mmLogo{float:left;} /**/ #mmMenuSwitch,#mmLogo,#mmSearchBar a, #mmLogIn .noti, #mmLogIn .noti,#mmLogIn .pm, #mmLogOut .logMM,#mmLogOut .logFB,#mmLogOut .logG, #mmHeader .first:before, #mmSearchBar:after, #mmLogIn .memInfo:after,#mmLogIn .noti:after,#mmLogIn .logOut:after, #mmLogOut .logMM:after,#mmLogOut .register:after{background-image:url(../img/mmHeader.png?v20161202_1635);} #mmHeader.pc .pm, #mmHeader.pc .logFB,#mmHeader.pc .logG, #mmHeader.pc #mmLogo, #mmHeader.pc .noti{background-image:url(../img/mmHeaderPC.png?v20161202_1635);background-size:200px 300px; } /**/ #mmMenuSwitch,#mmLogo, #mmSearchBar a, #mmLogIn .noti,#mmLogIn .pm{background-repeat:no-repeat; background-size:260px 750px; } #mmMenuSwitch span,#mmLogIn .noti span,#mmLogIn .pm span,#mmLogIn .pm span{border-radius:2px; background-color:#ff9000; font-size:12px;text-align:center;color:#fff; display:block;line-height:11px;min-width: 18px; padding:1px 2px; position: absolute; transform:scale(0.86);-o-transform:scale(0.86);-ms-transform:scale(0.86); -moz-transform:scale(0.86);-webkit-transform:scale(0.86); } /* all end */ #mmMenuSwitch{background-color:#00b8d4;background-position:-220px -5px; width: 38px;height: 41px; position:relative;z-index:995; } #mmMenuSwitch.on{background-color:#3092ca;height:43px;} #mmMenuSwitch span{right: 1px;top: 9px;} #mmMenuSwitch span:empty{display:none;} /**/ #mmLogo{background-position:-35px 0; width:110px;height:36px; margin:2px 6px; } #mmHeader.pc #mmLogo{background-position:-35px 0; background-size:200px 300px; } /****/ #mmSearchBar{float:left;position:relative;width: 88px;} #mmSearchBar *{float:left;} #mmSearchBar input{-webkit-appearance:none; border-radius:0;outline:none;border:none; font-size:12px;text-indent:7px; height: 25px;width: calc( 100% - 34px ); } #mmSearchBar a{background-color:#fff;background-position:-224px -211px; display:block;width:34px;height: 25px; } #mmSearchBar a:hover{background-color:#ededed;} /****/ #mmLogIn{float:right;} #mmLogIn > * {float:left;} #mmLogIn .memInfo{height:40px; padding:4px; } #mmLogIn .memInfo img{width: 30px;height: 30px;} #mmLogIn .memInfo p{display:none;} /**/ #mmLogIn .noti{display:block;height: 40px; position:relative; } #mmLogIn .noti span{right: 2px;top: 6px;} #mmLogIn .noti span:empty{display:none;} /**/ #mmLogIn .pm,#mmLogIn .logOut{display:none;} /* mmLogIn end */ #mmLogOut{float:right;} #mmLogOut .logMM,#mmLogOut .logFB,#mmLogOut #gSignInWrapper,#mmLogOut .register{display:none;} #mmLogOut .logIn{font-size:12px;color:#fff;text-align:center; display:block;width: 38px;height: 40px;line-height:40px; } @media screen and (max-width: 359px){#mmHeader .dTime360{display: none;} } @media screen and (max-width:767px){#mmLogIn .noti{background-position: -225px -253px;display:block;width: 30px;} #mmHeader.pc .noti{background-position: -160px -104px;} } @media screen and (min-width: 480px){#mmLogo{background-position:0 0; width:146px;height:36px; } #mmHeader.pc #mmLogo{background-position:0 0;} } @media screen and (min-width:768px){#mmLogIn .noti{background-position: -222px -253px;display:block;width: 36px;} #mmHeader.pc .noti{background-position: -157px -104px;} } @media screen and (min-width: 768px) and (max-width: 1023px){} @media screen and (max-width: 1023px){#mmHeader .mainMenu{display: none;} #mmSearchBar{margin:9px 0 0 0;} } @media screen and (min-width:1024px){#mmLogo{margin-right: 15px;} #mmLogIn .pm,#mmLogIn .logOut{margin:3px 0 0 1px;} /**/ #mmLogOut .logMM,#mmLogOut .logFB,#mmLogOut .logG,#mmLogOut .register, #mmHeader .first:before, #mmSearchBar:after, #mmLogIn .memInfo:after,#mmLogIn .noti:after,#mmLogIn .logOut:after, #mmLogOut .logMM:after,#mmLogOut .register:after{background-size:260px 750px;background-repeat:no-repeat; } /**/ #mmSearchBar, #mmLogIn .memInfo,#mmLogIn .pm,#mmLogIn .logOut, #mmLogOut .logMM,#mmLogOut .register{position:relative;} #mmHeader .first:before, #mmSearchBar:after, #mmLogIn .memInfo:after,#mmLogIn .noti:after,#mmLogIn .logOut:after, #mmLogOut .logMM:after,#mmLogOut .register:after{content:""; background-position:-219px 0; display: block;width: 1px;height: 9px; position:absolute; } /* all end */ #mmMenuSwitch{display:none!important;width: 0;} /****/ #mmHeader .mainMenu{font-size: 12px;color:#fff;text-indent: 0;text-align: left; width: auto;line-height: 40px; margin-top: 3px;padding: 0 15px 0 6px; position: relative; float:left; } #mmHeader .mainMenu:after{content:""; display: block;width: 0;height: 0; border-style: solid; border-width: 6px 3px 0 3px; border-color: #fff transparent transparent transparent; position:absolute;top: 17px;right: 5px; } #mmHeader .first:before{top:15px;left:-1px;} #mmHeader .shop{padding-right: 6px;} #mmHeader .shop:after{display: none;} /**/ #mmHeader .mainMenu.mainOver{background-color: #ddf0f9;color: #2b6f99;} #mmHeader .mainMenu.mainOver:after, #mmHeader .mainMenu:hover:after{border-top-color: #2b6f99;} #mmHeader .mainMenu.now{background-color: #0ca3b9;} #mmHeader .mainMenu:hover{background-color: #b9eef6;color: #2b6f99;} /**/ #mmSearchBar{padding:9px 7px 0 6px;} #mmSearchBar:after{top:19px;left: 0;} /****/ #mmLogIn .memInfo{padding:6px 7px 0 6px;} #mmLogIn .memInfo:after{left: -1px;top:16px;} #mmLogIn .memInfo > *{float:left;} #mmLogIn .memInfo p{font-size:14px;color:#fff; display:block; margin:5px 0 0 5px; } #mmLogIn .noti:after{left:-1px;top:17px;} #mmLogIn .pm{background-position:-221px -303px; display:block;width: 36px;height: 40px; } #mmLogIn .pm span{right:2px;top:6px;} #mmLogIn .pm span:empty{display:none;} #mmHeader.pc .pm{background-position:-156px -153px;} /**/ #mmLogIn .logOut{border:none; font-size:12px;text-align:center;color:#fff; display:block;width: 38px;height: 40px;line-height:40px; } #mmLogIn .logOut:after{left: -1px;top: 17px;} /* mmLogIn end */ #mmLogOut > *{float:left;} #mmLogOut #gSignInWrapper{display:block;} #mmLogOut .logMM,#mmLogOut .logFB,#mmLogOut .logG,#mmLogOut .register{color:#fff;font-size:12px; height: 40px;line-height:40px; display:block; margin:3px 0 0 1px; } #mmLogOut .logMM:after,#mmLogOut .register:after{top: 15px;left: -1px;} /****/ #mmLogOut .logMM{text-indent:28px; background-position:-223px -355px; width: 105px; } #mmLogOut .logFB{text-indent:25px; background-position:-226px -405px; width: 55px; } #mmHeader.pc .logFB{background-position:-160px -203px;} #mmLogOut .logG{cursor:pointer; text-indent:25px; background-position: -225px -452px; display:block;width: 55px; } #mmHeader.pc .logG{background-position:-160px -256px;} #mmLogOut .register{text-align: center; width: 38px; } #mmLogOut .logIn{display:none;} /* mmLogOut end */ }