/* CSS Document */ @-ms-viewport { width: device-width; } .main-bg{ padding-top: 72px; padding-bottom: 58px; background: url(/machinetool/-/media/machinery/product/machine/speedio-navi/img/events/main-bg.jpg) no-repeat center top / cover; } .main-bg .wrap{ display: flex; justify-content: space-between; } .main-bg .icon{ width: 9.5%; } .main-bg .text{ width: 87%; color: #fff; } .main-bg .text .ttl{ font-size: 35px; line-height: 1; font-weight: 700; } .main-bg .text .ttl .mini-text{ font-size: 17px; line-height: 1.64; display: block; margin-top: 20px; font-weight: 500; } .pick-cont .pankuzu li a{ color: #fff; } .pick-cont .pankuzu li a:after { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 4px; height: 4px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-left: 5px; } .pick-cont{ padding-top: 15px; padding-bottom: 80px; color: #fff; background: #06225d; } .pick-cont .m-ttl{ margin-top: 70px; } .pick-list li{ margin-bottom: 15px; } .pick-list li:last-child{ margin-bottom: 0px; } .pick-list li a{ display: flex; justify-content: space-between; padding: 15px 15px; background: #fff; align-items: center; position: relative; color: #1d1d1d; } .pick-list li .pic-box{ width: 35%; } .pick-list li .text{ width: 62%; } .pick-list li .text .name{ font-size: 17px; line-height: 1.47; font-weight: 700; margin-bottom: 24px; color: #0d2e9b; } .pick-list li .text dl{ display: flex; } .pick-list li .text dl dt{ width: 11%; font-size: 15px; line-height: 1.6; text-align-last: justify; } .pick-list li .text dl dd{ width: 87%; font-size: 15px; line-height: 1.6; padding-left: 1em; text-indent: -1em; } .pick-list li .text dl dd::before{ content: ":"; } .pick-list li .text .icon{ position: absolute; right: 14px; bottom: 14px; width: 22px; } .pick-list li .text .icon img{ display: block; } .eve-cont{ padding-top: 80px; padding-bottom: 110px; color: #fff; background: #b7d8ee; color: #0d2e9b; } .eve-cont2 .pankuzu li a{ color: #fff; } .eve-cont2 .pankuzu li a:after { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 4px; height: 4px; border-top: 1px solid #fff; border-right: 1px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-left: 5px; } .eve-cont2{ padding-top: 15px; padding-bottom: 80px; color: #fff; background: #06225d; } .eve-cont2 .m-ttl{ margin-top: 70px; } .eve-list li{ margin-bottom: 15px; display: flex; justify-content: space-between; padding: 15px 15px; background: #fff; align-items: center; position: relative; color: #1d1d1d; } .eve-list li.y-link{ padding: 0 0; display: block } .eve-list li.y-link a{ display: flex; justify-content: space-between; padding: 15px 15px; background: #fff; align-items: center; position: relative; color: #1d1d1d; } .eve-list li:last-child{ margin-bottom: 50px; } .eve-list li .ttl{ padding-left: 0.5%; padding-right: 0.5%; width: 34%; font-size: 17px; line-height: 1.47; font-weight: 700; } .eve-list li .ttl p{ padding-left: 1em; text-indent: -1em; } .eve-list li .ttl p::before{ content: ""; margin-right: 10px; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; } .eve-list li .ttl a,.eve-list li .ttl p.link{ color: #0d2e9b; text-decoration: underline; } .eve-list li .ttl p.link::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #0d2e9b; border-right: 2px solid #0d2e9b; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-right: 10px; } .eve-list li .text{ width: 65%; padding-left: 3%; border-left: 1px solid #000000; position: relative; } .eve-list li .text dl{ display: flex; } .eve-list li .text dl dt{ width: 11%; font-size: 15px; line-height: 1.6; text-align-last: justify; } .eve-list li .text dl dd{ width: 87%; font-size: 15px; line-height: 1.6; padding-left: 1em; text-indent: -1em; } .eve-list li .text dl dd::before{ content: ":"; } .eve-list.ptn2 li .text dl dt{ width: 6.7%; } .eve-list.ptn2 li .text dl dd{ width: 92%; } .mini-btn{ text-align: right; } .mini-btn a{ text-align: center; padding-top: 8px; padding-bottom: 8px; line-height: 1; border-radius: 20px; background: #fff00a; color: #1d1d1d; padding-left: 20px; padding-right: 10px; font-weight: 700; } .mini-btn a span{ display: inline-block; } .mini-btn a span::after { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 6px; height: 6px; border-top: 2px solid #1d1d1d; border-right: 2px solid #1d1d1d; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-left: 20px; } .shere-list{ text-align: right; margin-top: 140px; } .shere-list li{ display: inline-block; width: 40px; margin-right: 18px; line-height: 1; vertical-align: middle; } .shere-list li.text{ width: 150px; margin-right: 14px; } .shere-list li:last-child{ margin-right: 0; } @media print, screen and (min-width : 1367px) { } @media print, screen and (max-width: 900px) { .main-bg{ padding-top: 6.04vw; padding-bottom:4.35vw; background: url(/machinetool/-/media/machinery/product/machine/speedio-navi/img/events/main-bg-sp.jpg) no-repeat center top / cover; } .main-bg .wrap{ display: flex; justify-content: space-between; } .main-bg .icon{ width: 20.8%; padding-top: 5.8vw; } .main-bg .text{ width: 72.4%; } .main-bg .text .ttl{ font-size: 5.8vw; line-height: 1; font-weight: 700; } .main-bg .text .ttl .mini-text{ font-size: 3.6vw; line-height: 1.64; display: block; margin-top: 3.8vw; font-weight: 500; } .pick-cont{ padding-top: 9.66vw; padding-bottom: 9.66vw; } .pick-cont .m-ttl{ margin-top: 0px; margin-bottom: 4.83vw; } .pick-list li{ margin-bottom: 2.4vw; } .pick-list li:last-child{ margin-bottom: 0px; } .pick-list li a{ display: block; padding: 3.3vw 3.3vw 10.6vw; } .pick-list li .pic-box{ width: 100%; } .pick-list li .text{ width: 100%; margin-top: 4.8vw; } .pick-list li .text .name{ font-size: 4.1vw; line-height: 1.47; margin-bottom: 3.3vw; } .pick-list li .text dl{ display: flex; } .pick-list li .text dl dt{ width: 8%; font-size: 3.1vw; line-height: 1.6; text-align-last: left; } .pick-list li .text dl dd{ width: 92%; font-size: 3.1vw; line-height: 1.6; padding-left: 1em; text-indent: -1em; } .pick-list li .text dl:nth-of-type(3) dt{ width: 16%; } .pick-list li .text dl:nth-of-type(3) dd{ width: 84%; } .pick-list li .text dl dd::before{ content: ":"; } .pick-list li .text .icon{ position: absolute; right: 3.3vw; bottom: 3.3vw; width: 6.2vw; } .pick-list li .text .icon img{ display: block; } .eve-cont{ padding-top: 9.66vw; padding-bottom: 9.66vw; } .eve-cont .m-ttl{ margin-top: 0px; margin-bottom: 4.83vw; } .eve-cont2{ padding-top: 9.66vw; padding-bottom: 9.66vw; } .eve-cont2 .m-ttl{ margin-top: 0px; margin-bottom: 4.83vw; } .eve-list li{ margin-bottom: 2.4vw; display: block; padding: 3.3vw 3.3vw; } .eve-list li.y-link{ padding: 0 0; display: block } .eve-list li.y-link a{ display: block; padding: 3.3vw 3.3vw; } .eve-list li:last-child{ margin-bottom: 7.25vw; } .eve-list li .ttl{ padding-left: 0%; padding-right: 0%; width: 100%; font-size: 3.8vw; line-height: 1.47; margin-bottom: 2.4vw; } .eve-list li .ttl p{ padding-left: 0em; text-indent: -0em; } .eve-list li .ttl p::before{ display: none; } .eve-list li .ttl p.link{ padding-left: 1em; text-indent: -1em; } .eve-list li .ttl p.link::before { content: ""; margin-right: 2.42vw; display: inline-block; vertical-align: middle; text-decoration: none; width: 1.5vw; height: 1.5vw; } .eve-list li .text{ width: 100%; padding-left: 0%; border-left: 0; } .eve-list li .text dl{ display: flex; } .eve-list li .text dl dt{ width: 8%; font-size:3.1vw; line-height: 1.6; text-align-last: left; } .eve-list li .text dl dd{ width:92%; font-size:3.1vw; line-height: 1.6; padding-left: 1em; text-indent: -1em; } .eve-list li .text dl:nth-of-type(3) dt{ width: 16%; } .eve-list li .text dl:nth-of-type(3) dd{ width: 84%; } .eve-list li .text dl dd::before{ content: ":"; } .eve-list.ptn2 li .text dl dt{ width: auto; } .eve-list.ptn2 li .text dl dd{ width: auto; } .mini-btn{ text-align: center; } .mini-btn a{ text-align: center; padding-top: 2.4vw; padding-bottom: 2.4vw; line-height: 1; border-radius: 4.8vw; padding-left: 6.8vw; padding-right: 2.8vw; } .mini-btn a span{ display: inline-block; } .mini-btn a span::after { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 1.5vw; height: 1.5vw; border-top: 2px solid #1d1d1d; border-right: 2px solid #1d1d1d; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-left:2.8vw; } .shere-list{ margin-top: 14.49vw; text-align: right; } .shere-list li{ display: inline-block; width: 9.6vw; margin-right: 3.3vw; line-height: 1; vertical-align: middle; } .shere-list li.text{ width: 39vw; margin-right: 3.5vw; font-size: 3vw; } .shere-list li:last-child{ margin-right: 0; } } /*詳細ページ用*/ .main-bg.ex{ height: 240px; } .det-cont{ background: #06225d; padding-bottom: 110px; } .det-cont .mini-btn{ margin-top: 50px; } .contents-bg{ background: #fff; padding-top: 15px; padding-bottom: 110px; margin-bottom: -190px; bottom: 190px; position: relative; } .contents-box .pankuzu li,.contents-box .pankuzu li a{ color: #1d1d1d } .contents-bg .head-wrap{ width: 90%; max-width: 806px; margin-left: auto; margin-right: auto; padding-bottom: 50px; } .contents-bg .head-wrap .det-flex{ display: flex; justify-content: space-between; align-items: center; margin-top: 50px; } .contents-bg .head-wrap .det-flex .icon{ width: 10%; } .contents-bg .head-wrap .det-flex .text{ width: 85.2%; } .contents-bg .head-wrap .det-flex .text .ttl{ line-height: 1.5; color: #0d2e9b; font-size: 27px; margin-bottom: 10px; } .contents-bg .head-wrap .det-flex .text .dat{ font-size: 12px; color: #808080; line-height: 1; } .contents-bg .img-box{ display: block; position: relative; } .contents-bg .img-box .ex-obi{ position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); top: 50%; left: 50%; display: inline-block; padding: 22px 27px; color: #fff; background: #a20017; line-height: 1; font-size: 15px; } .contents-bg .contents-box{ width: 90%; max-width: 806px; margin-left: auto; margin-right: auto; padding-top: 70px; } .contents-bg .contents-box h2{ line-height: 1.47; margin-bottom: 25px; padding-bottom: 12px; border-bottom: 1px solid #2282cc; font-size:26px; color: #2282cc; } .contents-bg .contents-box h2.ex{ margin-bottom: 50px; } .contents-bg .contents-box h3{ margin-bottom: 30px; padding:6px 18px; border-left: 5px solid #2282cc; font-size:20px; background: #0d2e9b; color: #fff; } /* ▼▼▼ 20240617 西岡追加 ▼▼▼ */ .contents-bg .contents-box h4 { margin-bottom: 25px; padding:6px 18px; font-size:18px; color: #2282cc; border-bottom:1px #2282cc dashed; } .contents-bg .contents-box h5 { margin-bottom: 20px; padding: 1px 10px; font-size:16px; color: #464646; border-left: 3px #2282cc solid; } .contents-bg .contents-box span.small { font-size: 0.7em; font-weight: normal; } /* ▲▲▲ 20240617 西岡追加 ▲▲▲ */ .contents-bg .contents-box p{ margin-bottom: 50px; font-size: 15px; line-height: 1.86; } .contents-bg .contents-box p.big{ font-size: 17px; } .contents-bg .contents-box p .notes{ font-size: 12px; } .contents-bg .contents-box p .bold{ font-weight: 700; } .contents-bg .contents-box .link{ color: #2282cc; text-decoration: underline; display: block; } .contents-bg .contents-box .link .icon{ width: 20px; display: inline-block; margin-left: 3px; vertical-align: middle;; } .contents-bg .contents-box .link .icon img{ display: block; } .contents-bg .contents-box .link::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 8px; height: 8px; border-top: 2px solid #2282cc; border-right: 2px solid #2282cc; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-right: 5px; } /* ▼▼▼ 20240617 西岡追加 ▼▼▼ */ .contents-bg .contents-box dl { margin-bottom:20px; } .contents-bg .contents-box dl dt { margin-top:10px; font-weight:bold; display:inline-block; } .contents-bg .contents-box dl dt:first-of-type { margin-top:0; } .contents-bg .contents-box dl dd { margin-left:1em; } .contents-bg .contents-box ol { margin: 0 0 20px 30px; list-style-position: inside; } .contents-bg .contents-box ol li{ list-style: decimal; } .contents-bg .contents-box .btn_application { width: 100%; margin: 50px 0; text-align: center; } .contents-bg .contents-box .btn_application a { display: inline-block; background: #e68000; padding: 10px 20px; color: #fff; font-size: 20px; font-weight: bold; border: 6px solid #c57005; border-radius: 10px; } /* ▲▲▲ 20240617 西岡追加 ▲▲▲ */ @media print, screen and (max-width: 900px) { .main-bg.ex{ height:42vw; } .det-cont{ padding-bottom: 9.66vw; } .det-cont .mini-btn{ margin-top: 7.25vw; } .contents-bg{ padding-top: 7.25vw; padding-bottom: 14.49vw; margin-bottom: -36.8vw; bottom: 36.8vw; position: relative; } .contents-bg .head-wrap{ width: 90%; max-width: none; margin-left: auto; margin-right: auto; padding-bottom: 4.83vw; } .contents-bg .head-wrap .det-flex{ display: flex; justify-content: space-between; align-items:flex-start; margin-top: 0px; } .contents-bg .head-wrap .det-flex .icon{ width: 18%; } .contents-bg .head-wrap .det-flex .text{ width: 75%; } .contents-bg .head-wrap .det-flex .text .ttl{ line-height: 1.6; font-size: 4.8vw; margin-bottom: 3.3vw; } .contents-bg .head-wrap .det-flex .text .dat{ font-size: 3vw; line-height: 1; } .contents-bg .img-box{ display: block; position: relative; } .contents-bg .img-box .ex-obi{ position: absolute; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); top: 50%; left: 50%; display: inline-block; padding: 3vw 3vw; line-height: 1; font-size: 2.7vw; } .contents-bg .contents-box{ width: 90%; max-width: 806px; margin-left: auto; margin-right: auto; padding-top: 14.49vw; } .contents-bg .contents-box h2{ margin-bottom: 4vw; padding-bottom: 2.42vw; border-bottom: 1px solid #2282cc; font-size:5.07vw; } .contents-bg .contents-box h2.ex{ margin-bottom: 5.3vw; } .contents-bg .contents-box h3{ margin-bottom: 4.83vw; padding:2.5vw 4.8vw; border-left: 1.2vw solid #2282cc; font-size:4.1vw; line-height: 1.47; } /* ▼▼▼ 20240617 西岡追加 ▼▼▼ */ .contents-bg .contents-box h4{ font-size:4.0vw; margin-bottom: 3.5vw; } .contents-bg .contents-box h5{ font-size:3.6vw; margin-bottom: 3.5vw; } /* ▲▲▲ 20240617 西岡追加 ▲▲▲ */ .contents-bg .contents-box p{ margin-bottom: 9.66vw; font-size: 3.6vw; line-height: 1.86; } .contents-bg .contents-box p.big{ font-size: 3.6vw; } .contents-bg .contents-box p .notes{ font-size: 2.9vw; } /* ▼▼▼ 20240617 西岡追加 ▼▼▼ */ .contents-bg .contents-box dl { font-size: 3.6vw; } .contents-bg .contents-box ol li { font-size: 3.6vw; } .contents-bg .contents-box .btn_application a { font-size: 4vw; border: 1vw solid #c57005; } .contents-bg .contents-box .btn_application { margin: 9.66vw 0; } /* ▲▲▲ 20240617 西岡追加 ▲▲▲ */ .contents-bg .contents-box .link .icon{ width: 4.8vw; display: inline-block; margin-left: 1vw; } .contents-bg .contents-box .link .icon img{ display: block; } .contents-bg .contents-box .link::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 1.4vw; height: 1.4vw; border-top: 2px solid #2282cc; border-right: 2px solid #2282cc; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0; margin-right: 2.4vw; } } .ttl-box{ padding: 20px 20px; display: flex; background: #deecf7; box-sizing: border-box; justify-content: space-between; } .ttl-box .pic{ width: 48.6%; } .ttl-box .text{ width: 49.2%; text-align: justify; color: #1d1d1d; font-size: 15px; line-height: 1.86; } .ttl-box .text .name{ line-height: 1.21; font-size: 23px; margin-bottom: 15px; font-weight: 700; } .ttl-box .text .bold{ font-weight: 700; } .ex-table{ margin-bottom: 80px; } .ex-table tr th{ width: 24.5%; box-sizing: border-box; padding: 12px 20px; color: #fff; background: #949392; border-bottom: 1px solid #ffffff; font-size: 15px; line-height: 1.86; text-align: left; vertical-align: top; } .ex-table tr td{ width: 75.5%; box-sizing: border-box; padding: 12px 20px; color: #1d1d1d; background: #ebebeb; border-bottom: 1px solid #ffffff; font-size: 15px; line-height: 1.86; vertical-align: top; } .ex-table tr:last-child th,.ex-table tr:last-child td{ border-bottom: 0; } .ex-table tr td .mini{ font-size: 12px; } .ex-table tr td .bold{ font-weight: 700; } .ex-table tr td .img-box{ margin-top: 12px; box-sizing: border-box; padding: 25px 15px; background: #fff; margin-bottom: 6px; } .contents-bg .contents-box .ex-table tr td .link{ display: inline-block; margin-right: 0.5em; } .item-list{ margin-bottom: 50px; } .item-list li{ margin-bottom: 50px; display: flex; justify-content: space-between; align-items: center; } .item-list li:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .item-list li .pic{ width: 35%; text-align: center; } .item-list li .pic img{ width: auto; max-height: 200px; } .item-list li .textbox{ width: 59.5%; padding-top: 26px; text-align: justify; } .item-list li p.name{ font-size: 19px; margin-bottom: 15px; font-weight: 700; } .item-list li p.item{ padding-left: 1em; text-indent: -1em; font-size: 15px; margin-top: 12px; margin-bottom: 0; } .item-list li p.item a{ color: #0d2e9b; font-weight: 700; text-decoration: none; } .item-list li p.item::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 8px; height: 8px; border-top: 2px solid #0d2e9b; border-right: 2px solid #0d2e9b; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -4px; margin-right: 4px; } .item-list li p.info{ font-size: 15px; line-height: 1.86; margin-bottom: 30px; } /*▼▼▼ 20240617 西岡追加 ▼▼▼*/ .item-list li p.info span.icon{ display: inline-block; line-height: 1; text-indent: 0; padding: 10px 12px 10px; margin-right: 10px; border-radius: 10px; } .item-list li p.info span.icon.icon_red{ background: #c51324; color: #fff; } .item-list li p.info span.icon.icon_blue{ background: #2282cc; color: #fff; } /*写真部分をもう少し大きくしたかったので急遽サブのクラスを作成(item-list-w48)20240617西岡追加*/ .item-list.item-list-w48 li{ align-items:flex-start; } .item-list.item-list-w48 li .pic{ width: 48%; } .item-list.item-list-w48 li .pic img{ max-height: none; } .item-list.item-list-w48 .textbox { padding-top: 0px; } .item-list.item-list-w48 li .textbox{ width: 48%; } /*▲▲▲ 20240617 西岡追加 ▲▲▲*/ .eve-list li .icon{ position: absolute; right: 14px; bottom: 14px; width: 22px; } .eve-list li .icon img{ display: block; } /*▼▼▼ 20240617 西岡追加 ▼▼▼*/ .item-list li .item_img { max-width: 60%; } /*▲▲▲ 20240617 西岡追加 ▲▲▲*/ @media print, screen and (max-width: 900px) { .ttl-box{ padding: 0px 0px; display: block; } .ttl-box .pic{ width: 100%; } .ttl-box .text{ width: 100%; font-size: 3.6vw; line-height: 1.86; padding: 4.5vw 4.5vw; box-sizing: border-box; } .ttl-box .text .name{ line-height: 1.21; font-size: 4.3vw; margin-bottom: 1vw; } .ex-table{ margin-bottom: 14.49vw; } .ex-table tr th{ width: 100%; box-sizing: border-box; display: block; padding: 1.4vw 4.3vw; font-size: 3.6vw; line-height: 1.86; border-bottom:0; } .ex-table tr td{ display: block; box-sizing: border-box; padding: 1.4vw 4.3vw; border-bottom: 1.2vw solid #ffffff; width: 100%; } .ex-table tr td .mini{ font-size: 2.9vw; } .ex-table tr td .img-box{ margin-top: 3.2vw; box-sizing: border-box; padding: 3.1vw 2.4vw; margin-bottom: 1vw; } .ex-table tr td .kakko{ padding-left: 1em; } .contents-bg .contents-box .ex-table tr td .link{ display: block; margin-right: 0em; } .ex-table tr:last-child th,.ex-table tr:last-child td{ border-bottom: 0; } .item-list{ margin-bottom: 7.25vw; } .item-list li{ margin-bottom: 9.66vw; display: block; } .item-list li:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .item-list li .pic{ width: 100%; } .item-list li .pic img{ width: auto; max-height: 48vw; } .item-list li .textbox{ width: 100%; padding-top: 4.83vw; } /* ▼▼▼ 20240617 西岡追加 ▼▼▼ */ .item-list.item-list-w48 li .pic{ width: 100%; } .item-list.item-list-w48 li .textbox{ width: 100%; padding-top: 4.83vw; } /* ▲▲▲ 20240617 西岡追加 ▲▲▲ */ .item-list li p.name{ margin-bottom: 1.6vw; font-size: 4.6vw; } .item-list li p.item{ padding-left: 1em; text-indent: -1em; font-size: 3.6vw; margin-top: 2vw; } .item-list li p.item::before { content: ""; display: inline-block; vertical-align: middle; text-decoration: none; width: 1.44vw; height: 1.44vw; border-top: 2px solid #0d2e9b; border-right: 2px solid #0d2e9b; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -0.8vw; margin-right: 1.4vw; } .item-list li p.info{ font-size: 3.6vw; line-height: 1.86; margin-bottom: 6.76vw; } .eve-list li .icon{ position: relative; right: 3.3vw; bottom: 3.3vw; width: 6.2vw; margin-left: calc(100% - 6.2vw); padding-top: 2vw; } .eve-list li .icon img{ display: block; } }