h1, h2, h3, h4, h5, h6 { font-family: 'Ubuntu', sans-serif; font-weight: bold; margin: 0; padding: 0; } body { background: #f2f3f8; font-family: 'PT Sans', sans-serif; color: #000000; } img { height: auto; } /* font-family: 'Oswald', sans-serif; */ nav { background: #e1e5ee; } nav .title { width: 30%; float: left; } nav .title h1 { font-size: 5.3125vw; color: #2c3546; text-transform: uppercase; margin-top: 1.5625vw; } nav .title h2 { font-size: 5.3125vw; color: #ff1936; text-transform: uppercase; margin-bottom: 1.5625vw; } nav .menu_ic { border: 0.3125vw solid #2c3546; padding: 0.9375vw 2.34375vw 0.46875vw; float: right; margin: 2.03125vw 2.34375vw 0 0; color: #2c3546; font-size: 5.625vw; cursor: pointer; } nav .container_menu { width: 100%; background: #2c3546; display: none; } nav .container_menu .menu_item { color: #ffffff; font-weight: bold; font-family: 'Ubuntu', sans-serif; width: 100%; text-align: center; display: block; padding: 1.09375vw 1.5625vw; font-size: 4.375vw; } nav .container_menu .menu_item:nth-child(odd) { background: #262c3a; } #first { padding-top: 3.125vw; border-bottom: 0.78125vw solid #ff1936; } #first h1 { font-size: 5.625vw; color: #2c3546; text-transform: uppercase; } #first h2 { font-size: 4.6875vw; font-weight: 300; color: #ff1936; text-transform: uppercase; margin-bottom: 2.34375vw; } #first p { font-size: 4.375vw; } #first .man { max-width: 30.78125vw; display: block; margin: 0 auto; position:relative; } #first .product { background: #ffffff; width: 80%; margin: 0 auto; border: 0.46875vw solid #2c3546; } #first .product img { max-width: 30.3125vw; display: block; margin: 1.5625vw auto; } #first .product a { display: block; color: #ffffff; padding: 2.34375vw 0.3125vw; background: #00d628; text-align: center; font-weight: bold; font-size: 4.0625vw; } #first .product a:hover { background: #00bd23; text-decoration: none; } #main .main_top { position: relative; width: 100%; text-align: center; height: 11.25vw; } #main .main_top img { max-width: 15.625vw; z-index: 999; } #main .ranking_box { background: #e1e5ee; margin-bottom: 5vw; } #main .ranking_box .ranking_title { color: #2c3546; font-family: 'Ubuntu', sans-serif; border-bottom: 0.46875vw solid #c7cede; height: 9.84375vw; box-sizing: border-box; font-weight: 700; } #main .ranking_box .ranking_title .title_nr { font-size: 7.5vw; float: left; margin: -0.625vw 9.375vw 0 3.4375vw; } #main .ranking_box .ranking_title .title_content { font-size: 4.6875vw; padding-top: 1.5625vw; } #main .ranking_box .title_1 { background: url(../images/1.png) no-repeat left top; background-size: 15.15625vw 9.84375vw; } #main .ranking_box .title_2 { background: url(../images/2.png) no-repeat left top; background-size: 15.15625vw 9.84375vw; } #main .ranking_box .title_3 { background: url(../images/3.png) no-repeat left top; background-size: 15.15625vw 9.84375vw; } #main .ranking_box .title_4 { background: url(../images/4.png) no-repeat left top; background-size: 15.15625vw 9.84375vw; } #main .ranking_box .ranking_body { margin-top: 1.875vw; } #main .ranking_box .ranking_body .ranking_body_left { width: 100%; } #main .ranking_box .ranking_body .ranking_body_right { width: 100%; } #main .ranking_box .ranking_img { background: url(../images/bg_ranking_img.png) no-repeat center top; background-size: 70.3125vw 68.75vw; width: 70.3125vw; height: 68.75vw; margin: 0 auto; } #main .ranking_box .ranking_img img { display: block; margin: 0 auto; padding-top: 9.375vw; max-width: 61.25vw; } #main .ranking_box .rate_main { font-size: 4.0625vw; width: 100%; background: #ff1936; color: #ffffff; text-align: center; padding: 0.78125vw 0; font-weight: 700; } #main .ranking_box .stars { background: #2c3546; color: #ffffff; font-size: 4.0625vw; font-weight: 700; padding: 1.09375vw 1.25vw; text-align: center; } #main .ranking_box .stars img { max-width: 3.4375vw; margin: 0 0.3125vw; } #main .ranking_box .stars span { position: relative; top: 0.3125vw; } #main .ranking_box .url_producer { background: #00d628; color: #2c3546; text-transform: uppercase; display: block; text-align: center; font-weight: 700; padding: 1.875vw 0; font-size: 4.375vw; margin-top: 2.34375vw; } #main .ranking_box .url_producer:hover { background: #00bd23; text-decoration: none; } #main .ranking_box .rates { margin-top: 2.5vw; font-size: 3.75vw; text-transform: uppercase; font-weight: bold; } #main .ranking_box .rate_title { font-size: 4.375vw; font-weight: 700; color: #2c3546; } #main .ranking_box .rates_box { background: #2c3546; color: #ffffff; font-size: 4.0625vw; padding-top: 1.5625vw; margin-top: 0.78125vw; } #main .ranking_box .rates_box img { max-width: 3.125vw; margin: 0 0.625vw; } #main .ranking_box .rates_box .dl-horizontal dt { font-weight: 400; padding-bottom: 1.5625vw; width: 40.625vw; float: left; clear: left; text-align: right; } #main .ranking_box .rates_box .dl-horizontal dd { margin-left: 43.75vw; } #main .ranking_box p { font-size: 4.0625vw; padding-left: 2.34375vw; } #main .review { background: #e1e5ee; color: #2c3546; padding: 3.59375vw; margin-bottom: 3.4375vw; } #main .review img { max-width: 100%; display: block; margin: 0 auto; } #main .review .review_name { border-top: 0.3125vw solid #ff1936; background: #2c3546; color: #ff1936; font-weight: bold; text-align: center; font-size: 5.3125vw; padding: 1.09375vw 0; margin-bottom: 3.4375vw; } #main .review p { font-size: 4.375vw; } #text { margin: 3.90625vw 0; } #text .box_desc { background: #e1e5ee; color: #2c3546; font-size: 4.375vw; padding: 3.125vw; border-bottom: 0.78125vw solid #ff1936; } #last { margin-bottom: 5.46875vw; } #last .box_desc { background: #e1e5ee; color: #2c3546; font-size: 4.375vw; padding: 3.125vw; border-bottom: 0.78125vw solid #ff1936; } footer { font-size: 5vw; padding: 3.125vw 0; text-align: center; color: #e1e5ee; background: #2c3546; } footer a { color: #e1e5ee; } footer a:hover { color: #ffffff; } footer .text-right { text-align: center; margin-top: 3.125vw; } @media (min-width: 768px) { .container { max-width: 100vw; } nav { background: none; } nav .title { width: 30%; } nav .title h1 { font-size: 2.41935vw; margin-top: 2.01613vw; } nav .title h2 { font-size: 2.41935vw; margin: 0; } nav .dots { width: 70%; float: right; color: #2c3546; padding-bottom: 3.02419vw; } nav .dots .box_dot { float: left; width: 25%; font-weight: bold; font-size: 1.6129vw; text-align: center; } nav .dots .box_dot img { max-width: 4.83871vw; display: block; margin: 0 auto 2.52016vw; } nav .container_menu { display: block; } nav .container_menu .menu_item { width: 20%; float: left; padding: 0.70565vw 0; font-size: 1.81452vw; } #first { padding-top: 4.03226vw; border-bottom: 0.50403vw solid #ff1936; height:38vw; } #first h1 { font-size: 3.62903vw; } #first h2 { font-size: 3.02419vw; margin-bottom: 3.02419vw; } #first p { font-size: 1.81452vw; line-height: 2.82258vw; } #first .man { max-width: 19.63306vw; top:5vw; } #first .product { width: 90%; border: 0.30242vw solid #2c3546; float: right; position: relative; bottom: -2.21774vw; } #first .product img { max-width: 16.10484vw; margin: 1.00806vw auto; } #first .product a { padding: 1.5121vw 0.20161vw; font-size: 1.6129vw; } #main .main_top { height: 2.21774vw; } #main .main_top img { max-width: 10.08065vw; position: absolute; } #main .ranking_box { margin-bottom: 2.21774vw; } #main .ranking_box .ranking_title { border-bottom: 0.30242vw solid #c7cede; height: 6.35081vw; } #main .ranking_box .ranking_title .title_nr { font-size: 4.83871vw; margin: -0.40323vw 6.04839vw 0 2.21774vw; } #main .ranking_box .ranking_title .title_content { font-size: 3.02419vw; padding-top: 1.00806vw; } #main .ranking_box .title_1 { background-size: 9.77823vw 6.35081vw; } #main .ranking_box .title_2 { background-size: 9.77823vw 6.35081vw; } #main .ranking_box .title_3 { background-size: 9.77823vw 6.35081vw; } #main .ranking_box .title_4 { background-size: 9.77823vw 6.35081vw; } #main .ranking_box .ranking_body { margin-top: 1.20968vw; } #main .ranking_box .ranking_body .ranking_body_left { float: left; width: 22.68145vw; margin-left: 1.71371vw; } #main .ranking_box .ranking_body .ranking_body_right { float: right; width: 39.31452vw; } #main .ranking_box .ranking_img { background-size: 22.68145vw 22.17742vw; width: 22.68145vw; height: 22.17742vw; } #main .ranking_box .ranking_img img { padding-top: 3.02419vw; max-width: 15.18145vw; } #main .ranking_box .rate_main { font-size: 1.6129vw; padding: 0.50403vw 0; } #main .ranking_box .stars { font-size: 1.6129vw; padding: 0.70565vw 0.80645vw; } #main .ranking_box .stars img { max-width: 2.21774vw; margin: 0 0.20161vw; } #main .ranking_box .stars span { position: relative; top: 0.20161vw; } #main .ranking_box .url_producer { padding: 1.20968vw 0; font-size: 1.81452vw; margin-top: 1.5121vw; } #main .ranking_box .rates { margin-top: 1.6129vw; font-size: 1.41129vw; } #main .ranking_box .rate_title { font-size: 1.81452vw; } #main .ranking_box .rates_box { font-size: 1.6129vw; padding-top: 1.00806vw; margin-top: 0.50403vw; } #main .ranking_box .rates_box img { max-width: 1.6129vw; margin: 0 0.40323vw; } #main .ranking_box .rates_box .dl-horizontal dt { padding-bottom: 1.00806vw; width: 16.12903vw; } #main .ranking_box .rates_box .dl-horizontal dd { margin-left: 18.14516vw; } #main .ranking_box p { font-size: 1.6129vw; padding: 0 2.01613vw; } #main .review { padding: 2.31855vw; margin-bottom: 2.21774vw; } #main .review img { max-width: 26.5121vw; } #main .review .review_name { border-top: 0.20161vw solid #ff1936; font-size: 2.41935vw; padding: 0.70565vw 0; margin-bottom: 2.21774vw; } #main .review p { font-size: 1.81452vw; line-height: 2.62097vw; } #text { margin: 2.52016vw 0; } #text .box_desc { font-size: 1.81452vw; padding: 2.01613vw; border-bottom: 0.50403vw solid #ff1936; } #last { margin-bottom: 3.52823vw; } #last .box_desc { font-size: 1.81452vw; padding: 2.01613vw; border-bottom: 0.50403vw solid #ff1936; } footer { font-size: 1.6129vw; padding: 2.01613vw 0; text-align: left; } footer .text-right { text-align: right; margin: 0; } } @media (min-width: 992px) { .container { max-width: 992px; } nav { background: none; } nav .title { width: 30%; } nav .title h1 { font-size: 24px; margin-top: 20px; } nav .title h2 { font-size: 24px; margin: 0; } nav .dots { width: 70%; float: right; color: #2c3546; padding-bottom: 30px; } nav .dots .box_dot { float: left; width: 25%; font-weight: bold; font-size: 16px; text-align: center; } nav .dots .box_dot img { max-width: 48px; display: block; margin: 0 auto 25px; } nav .container_menu { display: block; } nav .container_menu .menu_item { width: 20%; float: left; padding: 7px 0; font-size: 18px; } #first { padding-top: 40px; border-bottom: 5px solid #ff1936; height:390px; } #first h1 { font-size: 36px; } #first h2 { font-size: 30px; margin-bottom: 30px; } #first p { font-size: 18px; line-height: 28px; } #first .man { max-width: 195px; top:55px;} #first .product { width: 90%; border: 3px solid #2c3546; float: right; position: relative; bottom: -22px; } #first .product img { max-width: 180px; margin: 10px auto; } #first .product a { padding: 15px 2px; font-size: 16px; } #main .main_top { height: 22px; } #main .main_top img { max-width: 100px; position: absolute; } #main .ranking_box { margin-bottom: 22px; } #main .ranking_box .ranking_title { border-bottom: 3px solid #c7cede; height: 63px; } #main .ranking_box .ranking_title .title_nr { font-size: 48px; margin: -4px 60px 0 22px; } #main .ranking_box .ranking_title .title_content { font-size: 30px; padding-top: 10px; } #main .ranking_box .title_1 { background-size: 97px 63px; } #main .ranking_box .title_2 { background-size: 97px 63px; } #main .ranking_box .title_3 { background-size: 97px 63px; } #main .ranking_box .title_4 { background-size: 97px 63px; } #main .ranking_box .ranking_body { margin-top: 12px; } #main .ranking_box .ranking_body .ranking_body_left { float: left; width: 225px; margin-left: 17px; } #main .ranking_box .ranking_body .ranking_body_right { float: right; width: 390px; } #main .ranking_box .ranking_img { background-size: 225px 220px; width: 225px; height: 220px; } #main .ranking_box .ranking_img img { padding-top: 30px; max-width: 191px; } #main .ranking_box .rate_main { font-size: 16px; padding: 5px 0; } #main .ranking_box .stars { font-size: 16px; padding: 7px 8px; } #main .ranking_box .stars img { max-width: 22px; margin: 0 2px; } #main .ranking_box .stars span { position: relative; top: 2px; } #main .ranking_box .url_producer { padding: 12px 0; font-size: 18px; margin-top: 15px; } #main .ranking_box .rates { margin-top: 16px; font-size: 14px; } #main .ranking_box .rate_title { font-size: 18px; } #main .ranking_box .rates_box { font-size: 16px; padding-top: 10px; margin-top: 5px; } #main .ranking_box .rates_box img { max-width: 16px; margin: 0 4px; } #main .ranking_box .rates_box .dl-horizontal dt { padding-bottom: 10px; width: 160px; } #main .ranking_box .rates_box .dl-horizontal dd { margin-left: 180px; } #main .ranking_box p { font-size: 16px; padding: 0 20px; } #main .review { padding: 23px; margin-bottom: 22px; } #main .review img { max-width: 263px; } #main .review .review_name { border-top: 2px solid #ff1936; font-size: 24px; padding: 7px 0; margin-bottom: 22px; } #main .review p { font-size: 18px; line-height: 26px; } #text { margin: 25px 0; } #text .box_desc { font-size: 18px; padding: 20px; border-bottom: 5px solid #ff1936; } #last { margin-bottom: 35px; } #last .box_desc { font-size: 18px; padding: 20px; border-bottom: 5px solid #ff1936; } footer { font-size: 16px; padding: 20px 0; text-align: left; } footer .text-right { text-align: right; margin: 0; } } /*# sourceMappingURL=main.css.map */