body{ background: #efefef; } div.searchBox{ margin-top: 65px; overflow: hidden; position:relative; line-height: 90px; height: 90px; } div.searchBox input.kw{ display:block; width:100%; height: 100%; font-size: 18px; padding: 0 80px 0 40px; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border:1px solid #fff; } div.searchBox input.kw::-webkit-input-placeholder { color: #222; } div.searchBox input.kw::-moz-placeholder { color: #222; } div.searchBox input.kw:-ms-input-placeholder { color: #222; } div.searchBox a.searchBtn{ display: block; width: 80px; text-align: center; color: #000; font-size: 28px; opacity: 0.2; position:absolute; right:0; top:0; height: 100%; } div.searchBox a.searchBtn i{ font-size: inherit; } div.searchBox:hover input.kw, div.searchBox input.kw:focus{ border-color:#00b188; } section.container{ margin: 75px auto; } div.container-list{ } div.container-list div.item{ padding: 65px 65px 50px; background: #fff; margin-bottom: 10px; position: relative; } div.container-list div.item a.title{ color: #000; } div.container-list div.item a.title span{ display:block; font-size: 20px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; } div.container-list div.item a.title small{ font-size: 14px; margin-top: 3px; display: block; font-family: 'Montserrat-Medium'; } div.container-list div.item div.desc{ font-size: 16px; line-height: 28px; max-height: 56px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 20px; } div.container-list div.item:after{ content:''; display:block; width:100%; height:0; background: #00b188; position:absolute; left:0; bottom: 0px; opacity: 0; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; } div.container-list div.item:hover:after{ opacity: 1; bottom: 0; height: 4px; } div.container-list div.item:hover a.title{ color: #00b188; } div.noitem{ text-align: center; padding: 60px 0; font-size: 18px; color: #666; } @media screen and (max-width:1400px) { section.container div.container-list{ margin-left:10px; margin-right:10px; } } @media screen and (max-width:1199px) { div.searchBox{ height: 70px; line-height: 70px; margin-top: 35px; } section.container{ margin: 50px auto; } } @media screen and (max-width:991px) { div.searchBox{ height: 50px; line-height: 50px; margin-top: 20px; } div.searchBox input.kw{ padding-left: 20px; font-size: 16px; } div.searchBox a.searchBtn{ font-size: 24px; } div.container-list div.item{ padding: 35px; } } @media screen and (max-width:767px) { div.searchBox{ height: 42px; line-height: 42px; width: 70%; margin-left: auto; margin-right: auto; } div.searchBox input.kw{ padding-left: 15px; } div.searchBox a.searchBtn{ font-size: 24px; width: 60px; } div.container-list div.item{ padding: 25px; } div.container-list div.item div.desc{ margin-top: 15px; } } @media screen and (max-width:479px) { div.searchBox{ height: 42px; line-height: 42px; width: 90%; margin-left: auto; margin-right: auto; } section.container{ margin: 25px auto; } div.container-list div.item{ padding:15px; } div.container-list div.item a.title span{ font-size: 16px; } div.container-list div.item a.title small{ font-family: 'Montserrat-Regular'; } div.container-list div.item div.desc{ font-size: 14px; margin-top: 10px; line-height: 24px; } }