@charset "UTF-8"; /* -------------------------------------------------- shared/css/ir.css --------------------------------------------------- */ /* ------------- common -------------- */ p.note { text-indent: -1em; } h2 + .m_linkList { margin-top: -5px !important; } .m_linkList li { border-bottom: 1px solid #e2e6e8; } .m_linkList li > a { position: relative; display: block; padding: 10px 60px 10px 15px; transition: background-color 0.2s; transition: background-color 0.3s; } .m_linkList li > a:hover { background-color: #eff3f9; } .m_linkList li > a:before { font-style: normal; font-size: 1.2rem; font-variant: normal; font-weight: 400; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; position: absolute; top: 50%; right: 20px; bottom: 0; margin: -0.55rem auto 0; height: 0; transition: 0.3s; } .m_linkList li > a:hover:before { right: 30px; } .noLinktext { margin: 20px 0 0 15px; } .irHeadContainer { display: flex; height: 100%; padding: 0; margin: 0 auto; max-width: 1200px; flex-direction: row-reverse; justify-content: flex-end; } .irTopimgWrapper { width: 100%; overflow: hidden; position: relative; } .irTopimgWrapper--fixing img { width: 100%; max-width: 1200px; margin: auto; display: block; } .irTopimgWrapper-inner { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; } /* ------------- コーポレート・ガバナンス -------------- */ .governanceUpdate { padding: 0 0 0 10px; } /* ------------- 株主・投資家情報 -------------- */ .getIRdoc-body { padding: 8px 20px; } .getIRdoc-body > .hd { font-weight: 700; font-size: 1.6rem; margin: 0; position: relative; text-align: center; } .getIRdoc-body > .hd > span:after { position: absolute; top: 50%; right: 0; margin-top: -0.5rem; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; color: #356cb6; font-size: 1rem; } .irTopimgWrapper-ttl { color: #000; letter-spacing: 0.1em; } .irTopimgWrapper-ttl-label { border: 1px solid #ffffff; padding: 2px 10px 0; display: inline-block; } .irTopimgWrapper-ttl-big { font-size: 3rem; display: block; line-height: 1.4; padding: 20px; } .irTopimgWrapper-txt { color: #000; font-size: 1.2em; margin: 20px; } .irTopimgWrapper-txt span { position: relative; border: 1px solid #a9a9a9; padding: 12px 30px 12px 15px; } .irTopimgWrapper-txt span:after { content: ""; position: absolute; top: 25px; width: 6px; height: 6px; margin: auto; border-top: 2px solid #333; border-right: 2px solid #333; transform-origin: right top; transform: rotate(45deg); right: 10px; } .irTopimgWrapper-txt span:hover { background-color: rgba(182, 172, 166, 0.4); transition: 0.4s; } .card-thumb-ir, .card-thumb .card-thumb-ir > img { position: relative; } .card-thumb-ir > .card-thumb-ir-text { position: absolute; width: 95%; background: #fff; opacity: 0.9; padding: 13px; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } /*.card-ir{ border: 1px solid #e2e6e8; border-right: none; } .card-ir:nth-child(4){ border: 1px solid #e2e6e8; }*/ .ir-news { background-color: #ffffff; color: #356cb6; border: 1px solid #356cb6; vertical-align: middle; height: 25px; border-radius: 15px; line-height: 23px; font-size: 1.2rem; display: block; float: right; } /*--決算ダウンロードリスト--*/ .card-ir { display: flex; flex-direction: column; justify-content: space-between; background-color: #fff; border: 1px solid #e2e6e8; width: 270px; border-top: none; box-sizing: border-box; } .card-ir .btn-sytle01 { font-size: 1.3rem; border: 1px solid #356cb6; width: 250px; line-height: 32px; } .irp-listWrapper { height: -webkit-fill-available; height: -moz-available; height: fill-available; } .irp-listWrapper > div:first-child { text-align: center; margin: 0; padding: 2px 0; position: relative; } .irp-listBody { padding: 30px 10px 0; display: flex; flex-direction: column; align-items: center; } @media (max-width:820px){ .irp-listBody { padding: 10px; display: flex; flex-direction: column; align-items: center; } } .irp-listBody .btn-getIRdocAll { margin: 10px 10px 0 10px; } .irp-getDocument { background-color: #eff3f9; } .irp-getDocument:hover { background-color: #a1b9dd; } /*--//決算ダウンロードリスト--*/ .grid--layout.grid--4col > div:nth-child(odd) > .card { border-left: 1px solid #e2e6e8; border-right: 1px solid #e2e6e8; } .grid--layout.grid--4col > div:nth-child(3) > .card { border-left: none; } #irp-library-latest-zip { max-width: 90%; } .card .card-body > .ir-hd { font-weight: 700; font-size: 1.8rem; padding-bottom: 0; border-bottom: none; margin-bottom: 0; } .card .card-body > .ir-hd > span { display: flex; align-items: center; height: 100%; position: relative; padding-right: 15px; line-height: 1.3; } .card .card-body > .ir-hd > span:after { position: absolute; top: 50%; right: 0; margin-top: -0.5rem; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; color: #356cb6; font-size: 1rem; } span.new { color: #ffffff; font-size: 1.2rem; font-weight: bold; background-color: #ff0000; margin-left: 1em; padding: 2px 8px 3px; } .irMasWrapper-ttl { color: #000; font-size: 2.8rem; letter-spacing: 0.07em; position: absolute; margin-top: 28px; left: 2%; } .irMasWrapper-ttl-big { font-size: 2.9rem; display: block; line-height: 1.4; margin-top: 5px; } /* ------------- 個人投資家の皆様へ -------------- */ #individual { /*.imgWrapper { background: url("/company/ir/message/images/img_01.jpg") no-repeat 0 0; } .irTitle { width: 600px; margin: 0 0 0 300px; font-size: 32px; text-align: left; }*/ /*@media screen and (max-width: 1123px) and (min-width: 769px) { .irTitle { width: 100%; font-size: 1.8rem; margin-top: 180px; margin-left: 0; } }*/ /* 個人投資家 施工実績 ================================*/ /* 個人投資家 H2 ================================*/ /* 個人投資家 事業紹介部分 ================================*/ /* 個人投資家 VISION、横並び部分 ================================*/ /* 個人投資家 ESG部分 ================================*/ /* 個人投資家 IRマガジン ================================*/ /* 個人投資家 MORE部分 ================================*/ /* 個人投資家 STEP1,2 Topics部分 ================================*/ } #individual .inMasWrapper-ttl { margin-top: 0; left: 32%; } #individual .inMasWrapper-inner { top: 75px; } #individual .inTopimgWrapper-txt { padding: 0; text-align: right; padding-top: 100px; } #individual .card .card-body > .in-hd { border: none; margin: 0; padding: 0; } #individual .in-card { width: 300px; margin: 0 auto; } #individual .h3-ir { font-weight: 700; } #individual .number-txt-big { font-size: 6rem; margin: 0 auto; font-weight: 700; } #individual .number-item-name .number-txt-big { display: flex; color: #356cb6; line-height: 0.8 !important; } #individual .number-item-name .number-txt-big span { line-height: 2 !important; } #individual .number-txt-big > span { font-size: 3rem; font-weight: normal; } #individual .number-item { display: flex; color: #356cb6; } #individual .number-txt-left { color: #356cb6; font-weight: 700; } #individual .sekou_border { border: solid 1px #e2e6e8; padding: 30px 15px 20px; } #individual .images-h2 img { max-width: 110px; } #individual .images-h2 h2 { font-weight: 700; background: none; padding: 0; padding: 10px; } #individual .images-h2 h2 span.first-h2 { color: #356cb6; display: flex; border-bottom: 1px solid #356cb6; } #individual .images-h2 h2 span.second-h2 { display: block; padding-top: 10px; } #individual .images-h2 h2 span.second-h2.more-h2 { margin-top: 20px; padding-bottom: 10px; border-bottom: 1px solid #356cb6; } #individual .images-h2 h2::before { background: none; position: static; height: 0; } #individual .images-h2 .sub-h2 { font-weight: 700; } #individual .images-h2 .ruby-h2 { font-size: 16px; } #individual .images-h3 .text-h3 { background: #356cb6; color: #fff; display: flex; padding: 10px 15px; } #individual .images-h3 .text-h3 h3 { border: none; padding-bottom: 0; margin: 0; margin-right: 20px; border-right: solid 1px #fff; padding-right: 20px; } #individual .images-h3 .text-h3 h3::before { border: none; } #individual .ir-business.ir-business-border { margin: 0 auto; border: 1px solid #e2e6e8; } #individual .ir-business.ir-business-border:nth-child(3) { margin-top: 36px; } #individual .ir-business.ir-business-border.border-none { border: none; } #individual .ir-business.ir-business-border > div { padding: 0; margin: 0 auto; margin-top: 36px; } #individual .ir-business.ir-business-border > div.grid-box_child { margin: 10px 10px 0; } #individual .ir-business .noicon-box { width: 90%; margin: 0 auto; } #individual .ir-business .noicon-box a.link-box:hover { background-color: #eff3f9; } #individual .ir-business .noicon-box .card-body_flex { display: flex; flex-direction: row; min-height: 11rem; padding: 20px 20px 20px 0; position: relative; } #individual .ir-business .noicon-box .card-body_flex::after { position: absolute; top: 50%; right: 1.6rem; margin-top: -0.5rem; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; font-family: glyphs; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: "\f010"; color: #356cb6; font-size: 1rem; } #individual .ir-business .noicon-box .hd { font-weight: 700; font-size: 1.8rem; flex: 3; display: flex; align-items: center; justify-content: center; border-right: 2px solid #ccc; text-align: center; } #individual .ir-business .noicon-box .sub-text { padding: 0 1rem; flex: 7; } #individual .ir-business .icon-box:has(section) { border: none; } #individual .ir-business .icon-box > section { display: flex; align-items: center; justify-content: center; max-width: 100%; flex-grow: 1; flex-shrink: 1; width: 100%; max-width: 580px; } #individual .ir-business .icon-box > section .icon-box-icon { border: none; } #individual .ir-business .icon-box > section .icon-box-icon .icon-box-icon { max-width: 100px; } #individual .ir-business .icon-box > section p { overflow-wrap: break-word; word-wrap: break-word; width: 100%; max-width: 480px; } #individual .ir-business .icon-box > section .hd > span::after { content: none; } #individual .ir-business .icon-box a { display: flex; align-items: center; justify-content: center; max-width: 100%; flex-grow: 1; flex-shrink: 1; width: 100%; max-width: 580px; } #individual .ir-business .icon-box a .icon-box-icon { border: none; } #individual .ir-business .icon-box a .icon-box-icon .icon-box-icon { max-width: 100px; } #individual .ir-business .icon-box a p { overflow-wrap: break-word; word-wrap: break-word; width: 100%; max-width: 480px; } #individual .ir-arrow .ir-arrowl > p { margin-top: 0; position: absolute; top: 0; background: #356cb9; width: 86%; max-width: 100%; text-align: center; color: #fff; padding: 4px 0; font-weight: 700; margin-left: 20px; } #individual .ir-arrow .ir-arrowl > p::before { content: ""; display: inline-block; position: absolute; top: 11%; left: -38px; width: 0; height: 0; margin-top: -5px; border-top: 18px solid transparent; border-left: 19px solid transparent; border-bottom: 18px solid transparent; border-right: 19px solid #356cb9; } #individual .ir-arrow .ir-arrowc > p { margin-top: 0; position: absolute; top: 0; background: #82aae2; width: 91%; text-align: center; color: #333; padding: 4px 0; font-weight: 700; } #individual .ir-arrow .ir-arrowr > p { margin-top: 0; position: absolute; top: 0; background: #d3e5ff; width: 91%; text-align: center; color: #333; padding: 4px 0; font-weight: 700; } #individual .ir-esglink { transition: all 0.3s; } #individual .ir-esglink h3 { color: #333; } #individual .ir-esglink p { color: #333; } #individual .ir-esglink:hover { background-color: #eff3f9; } #individual .ir-magazine { background: url(/company/ir/individual/images/img_index_39.jpg) no-repeat 150px 180px; } #individual .ir-magazine .ir-magazine-txt { color: #333; } #individual .ir-magazine .ir-magazine-book { position: relative; left: 80px; z-index: 1; margin-top: 50px; } #individual .ir-magazine .ir-magazine-ir { position: relative; z-index: 2; } #individual .ir-business-more { background-color: #eff3f9; padding: 25px 20px; } #individual .ir-business-more h3 { color: #356cb6; border-bottom: 2px solid #356cb6; text-align: center; max-width: 320px; margin: 0 auto; } #individual .ir-business-more h3::before { border: none; } #individual .ir-topics1, #individual .ir-topics2 { background: #eff3f9; padding: 5px 20px 15px; } #individual .ir-topics1 .ir-topcslink, #individual .ir-topics2 .ir-topcslink { background: #fff; transition: all 0.3s; } #individual .ir-topics1 .ir-topcslink a, #individual .ir-topics2 .ir-topcslink a { color: #333; } #individual .ir-topics1 .ir-topcslink:hover, #individual .ir-topics2 .ir-topcslink:hover { background-color: #eff3f9; } #individual .ir-topics1 .ir-topcslink h3, #individual .ir-topics2 .ir-topcslink h3 { margin-top: 0; } #individual .ir-topics1 h3 { margin-top: 15px; } #individual .ir-topics2 { background: #f0f9ef; } #individual .ir-topics2 h3 { margin-top: 20px; border-bottom: 2px solid #f0f9ef; } #individual .ir-topics2 h3::before { border-bottom: 2px solid #5eb636; } #individual .ir-topics2 h3.heading-lv3 { border-bottom: 2px solid #f0f9ef; } #individual .ir-topics2 h3.heading-lv3::before { border-bottom: 2px solid #5eb636; } @media screen and (max-width: 1200px) { /* ------------- common -------------- */ /* ------------- 株主・投資家情報 -------------- */ /*.irTopimgWrapper-ttl-big > br { display: none !important; } .irTopimgWrapper-ttl { padding-left: 50px; max-width: 690px; } .irTopimgWrapper-txt { padding-top: 150px; padding-left: 50px; }*/ .irTopimgWrapper-ttl-big { font-size: 2.5rem; } /* ------------- 個人投資家の皆様へ -------------- */ #individual .irMasWrapper-ttl { color: #ffffff; font-size: 2.7rem; font-weight: 700; text-shadow: 2px 2px 5px #000000, 1px 1px 10px #000000; letter-spacing: 0em; position: absolute; margin-top: 50px; } #individual .irMasWrapper-ttl-big { font-size: 2.1rem; max-width: 350px; } } @media screen and (max-width: 1024px) { /* ------------- 株主・投資家情報 -------------- */ .irTopimgWrapper-ttl { font-size: 1.4rem; max-width: 540px; } .irTopimgWrapper-ttl-big { font-size: 2.1vw; margin-top: 5px; } /* .irTopimgWrapper-txt { display: none; }*/ .grid.grid--layout.grid--2col-ir-tb { margin: 0 -18px; } .grid--layout.grid--wrap.grid--2col-ir-tb > div { width: 50%; padding: 0 18px !important; margin-top: 36px !important; } .grid--layout.grid--4col.grid--2col-ir-tb > div > .card { border-left: 1px solid #e2e6e8; border-right: 1px solid #e2e6e8; } /* ------------- 個人投資家の皆様へ -------------- */ #individual { /* 個人投資家 IRマガジン ================================*/ } #individual .irMasWrapper-ttl { font-size: 2.1rem; max-width: 400px; margin-top: 20px; } #individual .irMasimgWrapper-ttl { padding-left: 35%; font-size: 1.4rem; } #individual .ir-magazine { background: url(/company/ir/individual/images/img_index_39.jpg) no-repeat 0px 380px; background-size: 100%; padding-bottom: 125px; } } @media (max-width: 991px) and (min-width: 768px) { /* ------------- 株主・投資家情報 -------------- */ .grid--layout.grid--wrap.grid--2col-ir-tb > div { width: 50%; padding: 0 12px !important; margin-top: 24px !important; } .grid--layout.grid--4col.grid--2col-ir-tb > div:nth-child(3) > .card { border-left: 1px solid #e2e6e8; } /* .irTopimgWrapper-ttl-big { font-size: 2rem; } .irTopimgWrapper-txt { padding-top: 170px; padding-left: 260px; }*/ .irMasimgWrapper-ttl-big { font-size: 2.2rem; margin-top: 5px; } /* ------------- 個人投資家の皆様へ -------------- */ #individual .number-txt-big { font-size: 5rem; } } @media (max-width: 768px) { /* ------------- common -------------- */ .grid--layout.grid--2col-tb > div:nth-child(even) > .card { border-left: 1px solid #e2e6e8; } .grid--layout.grid--wrap.grid--2col-ir-tb > div { width: 100%; } /* ------------- 株主・投資家情報 -------------- */ .card-ir { width: 100%; } .irHeadContainer { width: 100%; display: block; } .irHeadContainer > a { position: absolute; bottom: 100%; } .irTopimgWrapper { overflow: visible; } .irTopimgWrapper-inner { position: relative; } .getIRdoc-body { text-align: center; padding: 8px 50px; } .irTopimgWrapper-ttl { max-width: 100%; } .irTopimgWrapper-txt { font-size: 1.3rem; margin: 10px 0 40px 20px; } .irTopimgWrapper-txt span:after { top: 22px; } .irTopimgWrapper-ttl-big { font-size: 2.2vw; } .irTopimgWrapper-ttl-big .hideBr { display: none; } /* .irTitle { margin-top: 180px; margin-left: 0; width: 100%; font-size: 1.8rem; display: block; width: 80%; color: #ffffff; height: 120px; }*/ /*@media (max-width: 767px) { .imgWrapper { overflow: visible; background: url("/company/ir/message/images/img_01.jpg") no-repeat 0 0; margin-bottom: 0; } .irTitle { margin-top: 180px; margin-left: 0; } */ /* ------------- common -------------- */ .m_linkList li > a { padding: 10px 30px 10px 10px; } .m_linkList li > a:before { right: 0 !important; } #individual { /* 個人投資家 H2 ================================*/ /* 個人投資家 施工実績 ================================*/ /* 個人投資家 IRマガジン ================================*/ } #individual .images-h2 h2 { font-size: 2rem; } #individual .sekou_border img { max-width: 100%; } #individual .ir-magazine { padding-bottom: 50px; } } @media (max-width: 480px) { /* ------------- 株主・投資家情報 -------------- */ /*.grid--wrap.grid--break-sp > .card-ir { padding: 0; width: auto; max-width: inherit; margin-top: 18px; }*/ .irTopimgWrapper-ttl-big { display: none; } .irTopimgWrapper-txt { transform: translate(20px, -50%); position: relative; border: 1px solid #a9a9a9; padding: 12px 30px 12px 15px; margin: 0; } .irTopimgWrapper-txt:hover { background-color: rgba(182, 172, 166, 0.4); transition: 0.4s; } .irTopimgWrapper-txt::before { content: "トップメッセージ"; } .irTopimgWrapper-txt::after { content: ""; position: absolute; top: 21px; width: 6px; height: 7px; margin: auto; border-top: 2px solid #333; border-right: 2px solid #333; transform-origin: right top; transform: rotate(45deg); right: 13px; } .irTopimgWrapper-txt span { display: none; } .grid--layout.grid--wrap.grid--2col-ir-tb > div { margin-top: 18px !important; } /* ------------- 個人投資家の皆様へ -------------- */ #individual .number-txt-big { font-size: 5rem; } }/*# sourceMappingURL=ir.css.map */ /*==============- マジカルポケット様作業分 ================*/ /* 共通 */ .irp-page .pc{ display: block; } .irp-page .sp{ display: none; } @media (max-width: 768px) { .irp-page .pc{ display: none; } .irp-page .sp{ display: block; } } .irp-page h1::before{ display: block; position: absolute; left: 0px; top: 0px; width: 4px; height: 24px; background-color: rgb(53, 108, 182); content: ""; } .irp-page #type_and_sheet_box { display: flex; justify-content: center; flex-wrap: wrap; } .irp-page #type_and_sheet_box input[type=radio] { display: none; } .irp-page #type_and_sheet_box label { flex-basis: 50%; height: 50px; display: flex; align-items: center; justify-content: center; background-color: transparent; border-top:1px solid #EFF3F9; border-bottom:1px solid #EFF3F9; font-weight: bold; color:#356CC5; } .irp-page #type_and_sheet_box label:hover { background-color: #EFF3F9; cursor: pointer; } .irp-page .tbl_sheet_index { display: none; justify-content: start; text-align: center; flex-wrap: wrap; width: 100%; } .irp-page .tbl_sheet_index>* { flex-basis: 25%; height: 50px; display: flex; align-items: center; justify-content: center; } .irp-page .tbl_sheet_index a { color:#333; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; line-height: 100%; box-sizing: border-box; } .irp-page .tbl_sheet_index a:hover { background-color: #EFF3F9; border-bottom: 2px solid #356CB6; } .irp-page #idx_non-consolidated>* { flex-basis: 50%; } .irp-page #type_consolidated:checked~#idx_consolidated, .irp-page #type_non-consolidated:checked~#idx_non-consolidated { display: flex; } .irp-page #type_consolidated:checked+label, .irp-page #type_non-consolidated:checked+label { background-color: #356CB6; color:#fff; } .irp-page #type_consolidated:checked+label:hover, .irp-page #type_non-consolidated:checked+label:hover { background-color: #356CB6; cursor:initial; } .irp-page .area_ren, .irp-page .area_tan { display: none; } .irp-page #type_consolidated:checked~.area_ren { display: block; } .irp-page #type_non-consolidated:checked~.area_tan { display: block; } .irp-page .heading-lv4{ border-left:none; padding-left:3px; } .irp-page .irp_data_table::before{ content: attr(data-content); margin-block: 20px -30px; display: block; text-align: right; } .irp-page.section table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-block: 40px 80px; } .irp-page.section table td, .irp-page.section table th { padding: 12px; border: 1px solid #eaeaea; text-align: right; } .irp-page.section table th { background: #EFF3F9; font-weight: normal; text-align: left; } .irp-page.section table tr.r1 th { text-align: center; } .irp-small_txt{ font-size:9pt; } .irp-td_fcrslt { display: flex; justify-content: flex-end; align-items: baseline; gap: .5em; } .irp-td_fcrslt_txt { text-align: right; flex-shrink: 0; } .irp-td_fcrslt_data { text-align: right; flex: 0 0 5ch; min-width: 0; } @media (max-width: 768px) { .irp-td_fcrslt { flex-wrap: wrap; } .irp-page.section table td, .irp-page.section table th { font-size:9pt; padding: 5px; } td:has(.irp-small_txt){ position: relative; } .irp-small_txt{ position: relative; right: auto; left: auto; font-size:7.5pt; } } /* TOP追記*/ .heading-lv4-ir{ margin: 36px 0 24px; padding: 3px 0 3px 18px; border-left: 4px solid #356cb6; min-height: 24px; font-size: 1.8rem; font-weight: 700; line-height: 1.4; } /* ------------- ●株主還元● -------------- */ /* 配当状況 */ #dividend.irp-page.section .highcharts-legend.highcharts-no-tooltip { display: none; } #dividend.irp-page.section table tr.r1 th { background: #EFF3F9; font-weight: bold; } /* ------------- ●業績ハイライト● -------------- */ /* ------------- ●売上高・売上総利益の内訳● -------------- */ /* 内訳 */ #segment_profit.irp-page .tbl_sheet_index>* { flex-basis: 50%; } /* ------------- ●IRカレンダー● -------------- */ .color_bl{ color: #356cb6; } .color_gr{ color: #38d349; } /*====================================================================*/ /*====================================================================*/ /*====================================================================*/ .ir-top{ max-width: 1200px; margin: auto; } #topimage{ width: 900px; margin-left: auto; } #top_ul img{ width: 100%; height: 450px; /* border-bottom: 5px solid #F29C9F;*/ } .slick-prev{ z-index: 30; left: 25px; /* display: none;*/ } .slick-next{ z-index: 30; right: 25px; /* display: none;*/ } .slick-dots{ z-index: 30; bottom: 80px; } .slick-prev,.slick-next{ width: 30px; height: 30px; } .slick-prev:before,.slick-next:before{ font-size: 30px; color: rgba(0,0,0,0); } .slick-dots li button:before{ font-size: 90px!important; } .slick-dots li { margin: 0 5px 0 0; } .slick-dotted.slick-slider { margin-bottom:0; } .slick-track{ height: 500px; } .card-ir{ position: absolute; top: 97px; height: 450px; width: 300px; } @media (max-width:600px){ #topimage { max-width: 90vw; width: 100%; margin: auto; height: 320px; } .ir-top{ height: 640px; } .card-ir{ height: 320px; width: 100%; top: 390px; } #top_ul img{ height: 320px; } .slick-dots{ z-index: 100; bottom: 210px; } } @media (max-width:820px){ #topimage { max-width: 90vw; width: 100%; margin: auto; height: 320px; } .ir-top{ height: 640px; } .card-ir{ height: 280px; width: 100%; top: 420px; } #top_ul img{ height: 320px; } .slick-dots{ z-index: 100; bottom: 210px; } } @media (max-width:1024px){ .ir-top{ max-width: 1024px; } #topimage{ width: 724px; } } @media (min-width:1025px){ .ir-top{ max-width: 1200px; } .card-ir{ height: 450px; } .slick-dots{ z-index: 30; bottom: 80px; } } /*====================================================================*/ /*====================================================================*/