.g-contents * { box-sizing: border-box; } .business { position: relative; padding-bottom: 10px; } .business_primary_links .business_item { position: absolute; width: 51%; } .business_primary_links .business_item01 { top: 3%; left: 0; z-index: 1; width: 100%; text-align: center; } .business_primary_links .business_item02 { top: 29%; left: 2%; z-index: 2; border-radius: 50%; } .business_primary_links .business_item03 { top: 29%; right: 2%; z-index: 3; border-radius: 50%; text-align: right; } .business_primary_links .business_item a { position: relative; display: inline-block; width: 100%; border-radius: 50%; text-align: center; } .business_primary_links .business_item01 a { width: 51%; } .business_primary_links .business_item a:hover { opacity: 0.7; text-decoration: none; } .business_primary_links .business_text { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; padding: 110px 50px 0; background-repeat: no-repeat; border-radius: inherit; } .business_item01 .business_text { padding-top: 90px; } .business_primary_links .business_item01 .business_text { background-image: url("/-/media/Project/Daikin/daikin_com/corporate/overview/business/images/ac_icon png"); background-position: 50% 33px; } .business_primary_links .business_item02 .business_text { background-image: url("/-/media/Project/Daikin/daikin_com/corporate/overview/business/images/chm_icon png"); background-position: 50% 26px; } .business_primary_links .business_item03 .business_text { background-image: url("/-/media/Project/Daikin/daikin_com/corporate/overview/business/images/filter_icon png"); background-position: 50% 19px; } .business_primary_links .business_bg { position: relative; z-index: 0; margin: 0; overflow: hidden; border-radius: inherit; } .business_primary_links .business_bg img { width: 100%; } .business_primary_links .business_item .g-link { margin-bottom: 10px; font-size: 19px; font-weight: bold; } .business_primary_links .business_item .g-p { color: #000; line-height: 1.71; text-align: left; } .business_secondary_links { position: absolute; left: 0; bottom: 0; z-index: 1; } .business_secondary_links a { position: relative; display: block; } .business_secondary_links a:hover { text-decoration: none; } .business_secondary_links .business_text { position: absolute; top: 66px; left: 0; width: 100%; text-align: center; } .business_secondary_links a:hover .business_text { opacity: 0.7; } .business_secondary_links .g-link { font-size: 16px; font-weight: bold; } .business_secondary_links .business_bg { margin: 0 20px; } .business_secondary_links .business_bg img { width: 100%; } .business_secondary_links .g-p { color: #000; line-height: 1.71; } .business_links { display: none; } .lead { font-size: 24px; color: #09c; text-align: center; } .lead b { font-size: 32px; } .lead b:first-child { margin-right: 3px; } .lead .before { padding: 0 8px 0 15px; } .lead .before::after { content: ''; display: inline-block; margin-left: 8px; border-top: 9.5px solid transparent; border-bottom: 9.5px solid transparent; border-left: 16px solid #09c; } .expansion { position: relative; } .percentage { position: absolute; z-index: 1; top: 28%; left: 0; width: 100%; padding: 0 10px; } .percentage_item { position: relative; top: 20px; float: left; width: 33.33%; padding: 0 10px; opacity: 0; -webkit-transition: all 1s; transition: all 1s; } .percentage_item.is-active { top: 0; opacity: 1; } .percentage_text { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; padding-top: 25%; color: #fff; text-align: center; } .percentage_item:nth-child(3) .percentage_text { padding-top: 15%; } .percentage_title { margin-bottom: 7%; font-size: 20px; line-height: 1.3; } .percentage_after { margin-bottom: 0; } .percentage_after .num, .percentage_after .unit, .percentage_before .num, .percentage_before .unit { display: inline-block; line-height: 1.1; } .percentage_after .num, .percentage_before .num { margin-right: 6px; font-weight: bold; } .percentage_after .unit, .percentage_before .unit { font-size: 16px; } .percentage_after .num { font-size: 50px; } .percentage_before .num { font-size: 28px; } .percentage_rate { position: absolute; top: -34px; left: 50%; width: 53%; margin-left: -26.5%; opacity: 0; -webkit-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); background: #fff; border: 2px solid #09c; border-radius: 4px; font-size: 32px; font-weight: bold; color: #09c; line-height: 1.45; } .percentage_item.is-active02 .percentage_rate { -webkit-animation: animScale .5s ease-out forwards; animation: animScale .5s ease-out forwards; } @-webkit-keyframes animScale { 0% { opacity: 0; -webkit-transform: scale(0.4); transform: scale(0.4); } 20% { opacity: 1; -webkit-transform: scale(1.8); transform: scale(1.8); } 40% { -webkit-transform: scale(1); transform: scale(1); } 60% { -webkit-transform: scale(1.4); transform: scale(1.4); } 80% { -webkit-transform: scale(1); transform: scale(1); } 90% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes animScale { 0% { opacity: 0; -webkit-transform: scale(0.4); transform: scale(0.4); } 20% { opacity: 1; -webkit-transform: scale(1.8); transform: scale(1.8); } 40% { -webkit-transform: scale(1); transform: scale(1); } 60% { -webkit-transform: scale(1.4); transform: scale(1.4); } 80% { -webkit-transform: scale(1); transform: scale(1); } 90% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .percentage_item:nth-child(1).is-active02 .percentage_rate { -webkit-animation-delay: 1s; animation-delay: 1s; } .percentage_item:nth-child(2).is-active02 .percentage_rate { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .percentage_item:nth-child(3).is-active02 .percentage_rate { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .percentage_rate::after { content: ''; position: absolute; bottom: -14px; left: 50%; display: inline; width: 0; height: 0; margin-left: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #fff; } .percentage_rate .unit { padding-left: 3px; font-size: 18px; font-weight: normal; } .percentage_bg { position: relative; z-index: 0; margin: 0; } .percentage_bg img { width: 100%; vertical-align: top; } .expansion_bg { position: relative; z-index: 0; } .expansion_bg img { max-width: 100%; } @media only screen and (max-width: 990px) { .business_primary_links .business_text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0; } .business_primary_links .business_item01 .business_text { background-position: 50% 33%; background-size: 32.4%; } .business_primary_links .business_item02 .business_text { background-position: 50% 33%; background-size: 25.97%; } .business_primary_links .business_item03 .business_text { background-position: 50% 33%; background-size: 33.79%; } .business_primary_links .business_item .g-link { margin: 12% 0 0; font-size: 2.3vw; } .business_primary_links .business_item .g-p, .business_secondary_links .g-p { display: none; } .business_secondary_links { bottom: 11%; } .business_secondary_links .business_text, .business_secondary_links .business_item:nth-child(3) .business_text { top: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; } .business_secondary_links .g-link { font-size: 1.6vw; } .business_secondary_links .business_bg { margin: 0 5%; } .business_secondary_links a:hover { opacity: 0.7; } .business_links { position: relative; top: -60px; z-index: 1; display: block; } .business_links a { display: block; color: #000; } .business_links a:hover { text-decoration: none; } .business_links .g-link { margin-bottom: 17px; } .business_links a:hover .g-link { text-decoration: underline; } .percentage, .percentage_item { padding: 0 1%; } .percentage_title { font-size: 1.8vw; } .percentage_after { margin-bottom: 3%; } .percentage_after .num { font-size: 4.4vw; } .percentage_after .unit, .percentage_before .unit { font-size: 1.6vw; } .percentage_before .num { font-size: 2.8vw; } .percentage_rate { top: -16.5%; font-size: 3.2vw; } .percentage_rate .unit { font-size: 1.8vw; } } @media only screen and (max-width: 768px) { .business_bg img { width: 100%; } .business_primary_links .business_item .g-link { font-size: 3.3vw; } .business_secondary_links .g-link { font-size: 2.3vw; } .percentage_text { padding-top: 25%; } .percentage_rate { font-size: 4.2vw; } .percentage_title { font-size: 2.6vw; } .percentage_after .num { font-size: 6.5vw; } .percentage_after .unit, .percentage_before .unit { font-size: 2.1vw; } .percentage_before .num { font-size: 3.6vw; } } @media only screen and (max-width: 480px) { .business_primary_links .business_item02 { left: 3%; } .business_primary_links .business_item03 { right: 3%; } .business_secondary_links.g-grid-3 .business_item { float: left; width: 33.333333%; } .business_secondary_links.g-grid-3 .business_item:first-child { margin-top: 15px; } .lead { font-size: 5vw; } .lead b { font-size: 6.6vw; } .percentage { padding: 0; } .percentage_after { margin-bottom: 1%; line-height: 1; } .percentage_after::after { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #fff; } .percentage_rate::after { bottom: -7px; margin-left: -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7.5px solid #fff; } .percentage_rate .unit, .percentage_after .unit, .percentage_before .unit { font-size: 2.4vw; } .percentage_after .num { font-size: 4.4vw; } }