/** ======================= * Contenedor Principal ===========================*/ .accordion { width: 100%; /* max-width: 360px;*/ margin: 30px auto 20px; background: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 0; } /* @font-face { font-family: "PingFang-Light"; src: url("font/PingFang Light.ttf"); src: url("http://font.oss.cn-north-1.jcloudcs.com/PingFang-Light.ttf"); src: url("http://blogwl.qiniudn.com/PingFang-SC-UltraLight.ttf"); }*/ .accordion .link { font-family: '微软雅黑', arial,sans-serif; font-weight: 100; cursor: pointer; display: block; padding: 20px 50px 20px 60px; color: #333; font-size: 16px; border-bottom: 1px solid #e5e5e5; position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .accordion li:first-child .link { border-top: 1px solid #e5e5e5; } .accordion li i { position: absolute; top: 24px; left: 12px; /* font-size: 18px;*/ color: #595959; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .accordion li i:nth-child(1) { top: 13px; } .accordion li i.fa-angle-down { right: 12px; left: auto; /* font-size: 16px;*/ } .accordion li.open .link { color: #0c90e8; } .accordion li.open i { color: #0c90e8; } .accordion li.open i.fa-angle-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /** * Submenu -----------------------------*/ .submenu { display: none; font-size: 14px; padding: 0; } .submenu li { border-bottom: 1px solid #e5e5e5; } .submenu a { display: block; text-decoration: none; color: #434343; padding: 20px 10px 20px 15px; -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .submenu a:hover { background: #0c90e8; color: #FFF; } .submenu .a-content-1, .submenu .a-content-2 { font-family: '微软雅黑', arial,sans-serif; font-size: 16px; margin: 10px 0; font-weight: 100; color: #333; } .submenu .a-content-2 { font-size: 12px; }