/* =============================================================== COWON BASIC CSS ================================================================*/ @charset "euc-kr"; *{list-style:none; margin:0 auto; padding:0; border:none; text-decoration:none; line-height:0; } button{cursor:pointer; } body{ text-align:center; width:100%; } *::-moz-selection { background-color: #626262; color: #fff;} *::selection { background-color: #626262; color: #fff;} h1 img::selection, nav img::selection { background-color: #bec3c6; color: #fff;} /*basic font css sample*/ .nanum{font-family:'나눔고딕', 'Nanum Gothic', sans-serif; font-style:normal;} .lato{ font-family:lato; } .segoe{ font-family:"Segoe UI", "SegoeUI", "Segoe", "Arial", "Tahoma";}/*feature header menu*/ /* =============================================================== COWON BASIC header, footer ================================================================*/ footer{display:block; width:100%; clear:both; border-top:1px solid #ddd; padding-top:28px; padding-bottom:8px; height:54px; overflow:hidden } header{} /* = */ #cowon_header{} #cowon_header{display:block; width:100%; border-bottom:1px solid #ddd; overflow:hidden; } #cowon_header #gnb a{ color:#000; } #cowon_header #gnb p{ display:none; font-size:0;} #cowon_header #gnb{position:relative; display:block; width:970px; height:80px; } @media only all and (max-width : 970px){#cowon_header #gnb{width:100%; min-width:800px;} } #cowon_header #gnb h1{ position:relative; display:block; float:left; width:240px; padding-top:28px; overflow:hidden; text-align:left;} #cowon_header #gnb h1 img{ } #cowon_header #gnb h1 p{} #cowon_header #gnb nav{display:block; position:relative; float:right; } #cowon_header #gnb nav ul li{ display:block; float:left; } #cowon_header #gnb nav ul li span{display:block; float:left; position:relative; } /* nav = top, main*/ #cowon_header #gnb #top{ height:12px; padding-top:8px; } #cowon_header #gnb #top ul li span{ height:12px; background:url(/common_v2/images//gnb/nav_gnb_top.png) no-repeat; } #cowon_header #gnb #top ul li span:hover{ animation-name:gnb_top_hover ; -webkit-animation-name:gnb_top_hover ; animation-duration:0.1s; -webkit-animation-duration:0.1s; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } @keyframes gnb_top_hover{ 0%{ top:0px; }100%{ top:-1px; } } @-webkit-keyframes gnb_top_hover{ 0%{ top:0px; }100%{ top:-1px; } } #cowon_header #gnb #top #top_01 span, #cowon_header #gnb #top #top_03 span, #cowon_header #gnb #top #top_05 span{ width:34px; } /*logout*/#cowon_header #gnb #top #top_06 span{width:47px; } /*mypage*/#cowon_header #gnb #top #top_07 span{width:52px; } #cowon_header #gnb #top #top_02 span, #cowon_header #gnb #top #top_04 span{ width:3px; } #cowon_header #gnb #top #top_01 span{ background-position:0px bottom; padding-right:7px; } #cowon_header #gnb #top #top_02 span{ background-position:-42px bottom; padding-right:8px; } #cowon_header #gnb #top #top_03 span{ background-position:-53px bottom; padding-right:7px;} #cowon_header #gnb #top #top_04 span{ background-position:-94px bottom; } #cowon_header #gnb #top #top_05 span{ background-position:-97px bottom; } #cowon_header #gnb #top #top_01 .selected{ background-position:0px top; } #cowon_header #gnb #top #top_03 .selected{ background-position:-53px top; } #cowon_header #gnb #top #top_05 .selected{ background-position:-97px top; } #cowon_header #gnb #top #top_06 span{ background-position:-131px bottom; } #cowon_header #gnb #top #top_06 .selected{ background-position:-131px top; } #cowon_header #gnb #top #top_07 span{ background-position:-178px bottom; } #cowon_header #gnb #top #top_07 .selected{ background-position:-178px top; } /*================================================== ================================================== ================================================== ==================================================*/ #cowon_header #gnb #top #top_12 span{ width:3px; } #cowon_header #gnb #top #top_12 span{ background-position:-42px bottom; padding-right:8px; margin-left:7px; } #cowon_header #gnb #top #top_11 span{ background:none; color:#949494; font-size:10px; line-height:10px; font-weight:400; font-family:'나눔고딕', 'Nanum Gothic', sans-serif; font-style:normal; } #cowon_header #gnb #top #top_11 span b{ color:#949494; font-size:10px; line-height:10px; font-weight:600; font-family:'나눔고딕', 'Nanum Gothic', sans-serif; font-style:normal;} #cowon_header #gnb #top #top_11 span img{ margin-right:5px; position:relative; top:1px;} #cowon_header #gnb #top #top_11 span img{ animation-name:msg_alert_ani ; -webkit-animation-name:msg_alert_ani ; animation-duration:3s; -webkit-animation-duration:3s; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; } @keyframes msg_alert_ani{ 0%{ opacity:0 }50%{ opacity:1 }100%{ opacity:0 } } @-webkit-keyframes msg_alert_ani{ 0%{ opacity:0 }50%{ opacity:1 }100%{ opacity:0 } } /*================================================== ================================================== ================================================== ==================================================*/ #cowon_header #gnb #main{width:729px; height:40px;padding-top:16px; }/*수정*/ #cowon_header #gnb #main ul li span{ height:40px; width:100%; background:url(/common_v2/images//gnb/nav_gnb_main_2020_v3.jpg) no-repeat; } /*수정*/ #cowon_header #gnb #main ul li:hover span{ animation-name:gnb_hover ; -webkit-animation-name:gnb_hover ; animation-duration:0.2s; -webkit-animation-duration:0.2s; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } @keyframes gnb_hover{ 0%{ top:0px; }100%{ top:-3px; } } @-webkit-keyframes gnb_hover{ 0%{ top:0px; }100%{ top:-3px; } } #cowon_header #gnb #main #main_01{ padding-left:20px; width:100px; } #cowon_header #gnb #main #main_02{ padding-left:25px; width:97px; } #cowon_header #gnb #main #main_03{ padding-left:14px; width:144px; } #cowon_header #gnb #main #main_04{ padding-left:29px; width:100px;} #cowon_header #gnb #main #main_05{ padding-left:30px; width:88px; } #cowon_header #gnb #main #main_06{ padding-left:30px; width:50px; } #cowon_header #gnb #main #main_01 span, #cowon_header #gnb #main #main_01 .selected{ background-position-x:0px } #cowon_header #gnb #main #main_02 span, #cowon_header #gnb #main #main_02 .selected{ background-position-x:-150px } #cowon_header #gnb #main #main_03 span, #cowon_header #gnb #main #main_03 .selected{ background-position-x:-300px } #cowon_header #gnb #main #main_04 span, #cowon_header #gnb #main #main_04 .selected{ background-position-x:-450px } #cowon_header #gnb #main #main_05 span, #cowon_header #gnb #main #main_05 .selected{ background-position-x:-598px } #cowon_header #gnb #main #main_06 span, #cowon_header #gnb #main #main_06 .selected{ background-position-x:-750px } #cowon_header #gnb #main #main_01 span, #cowon_header #gnb #main #main_02 span, #cowon_header #gnb #main #main_03 span, #cowon_header #gnb #main #main_04 span, #cowon_header #gnb #main #main_05 span, #cowon_header #gnb #main #main_06 span{background-position-y:15spx; opacity:0.45 } #cowon_header #gnb #main #main_01 .selected, #cowon_header #gnb #main #main_02 .selected, #cowon_header #gnb #main #main_03 .selected, #cowon_header #gnb #main #main_04 .selected, #cowon_header #gnb #main #main_05 .selected, #cowon_header #gnb #main #main_06 .selected{background-position-y:0px; opacity:1 }