html { width: 100%; height: 100%; } body { padding: 0 0 !important; height: 100%; overflow-y: scroll; } .aboutus { padding: 0 0; margin: 0 0; } .aboutus h2 { font-size: 2vw; font-weight: bolder; color: #ea5529; } .aboutus h3 { font-weight: 300; font-size: 1.2vw; } .aboutus p { font-size: 16px; font-weight: 300; } .aboutus span { font-size: 21px; } .aboutus b { font-size: 21px; color: #ea5529; } .aboutus hr { width: 50px; background-color: #ea5529; height: 0.1vw; border-top: none; margin-top: 30px; margin-bottom: 30px; } .aboutus-banner img { width: 100%; padding: 0 0; margin: 0 0; } .introduction { background-image: url(https://static.bodor.com/images/aboutus2021/bg-introduction.webp); background-repeat: no-repeat; background-size: cover; padding: 4vw 0 18vw 0; } .introduction b { font-size: 28px; } .introduction-icon { width: 26%; margin-bottom: 10px; } .globalNetwork { padding: 0vw 0 0vw 0; position: relative; } .globalNetwork h2, .globalNetwork p { color: #fff; } .globalNetwork-message { position: absolute; top: 5%; } .globalNetwork-message b { font-size: 28px; } /* country point start*/ .point { width: 21px; height: 14px; border-radius: 50%; border: 2px solid #e0e0e0; position: absolute; cursor: pointer; } .pointanimation { -webkit-animation: warn 3s ease-out; -moz-animation: warn 3s ease-out; animation: warn 3s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; box-shadow: 0px 0px 5px #e0e0e0; } @keyframes warn { 0% { transform: scale(0.4); -webkit-transform: scale(0.4); opacity: 0.4; } 25% { transform: scale(0.6); -webkit-transform: scale(0.6); opacity: 0.6; } 50% { transform: scale(0.8); -webkit-transform: scale(0.8); opacity: 0.8; } 75% { transform: scale(1); -webkit-transform: scale(1); opacity: 1; } 100% { transform: scale(1.2); -webkit-transform: scale(1.2); opacity: 0.2; } } .point:after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 0; border-radius: 50%/15px; transition: height 0.5s; cursor: pointer; z-index: 9999999; } .point:after { background: radial-gradient( 30px 30px at 50% 0%, rgba(182, 182, 182, 0) 80%, rgba(182, 182, 182, 0.4) 100% ); z-index: 0; } .point:hover:after { height: 200px; } .pointt { width: 50%; height: 50%; border-radius: 50%; background-color: #e0e0e0; position: absolute; top: 24%; left: 25%; } .America { top: 52%; left: 22%; width: 36px; height: 24px; } .India { top: 60%; left: 63.5%; width: 30px; height: 20px; } .Hungary { top: 52.8%; left: 47.5%; width: 15px; height: 10px; } .SouthKorea { top: 55.2%; left: 73.8%; width: 15px; height: 10px; } .Germany { top: 52%; left: 45%; width: 15px; height: 10px; } .Japan { top: 55%; left: 76.5%; } .Hongkong { top: 59%; left: 73%; width: 15px; height: 10px; } .Mexico { top: 60%; left: 17.5%; width: 30px; height: 20px; } .Brazil { top: 74%; left: 28%; width: 36px; height: 24px; } .Turkey { top: 54%; left: 49.5%; } .Vietnam { top: 62.5%; left: 72.2%; } .Canada { top: 52.5%; left: 26%; } .Thailand { top: 62%; left: 70.5%; } .Russia { top: 50%; left: 50%; width: 30px; height: 20px; } .UK { top: 51%; left: 43%; } .Belarus { top: 51%; left: 48.5%; width: 15px; height: 10px; } .Poland { top: 51.5%; left: 47%; width: 15px; height: 10px; } .Ukraine { top: 52.3%; left: 49%; width: 15px; height: 10px; } .CzechRepublic { top: 52.8%; left: 45.6%; width: 15px; height: 10px; } .Bulgaria { top: 54%; left: 48.5%; width: 15px; height: 10px; } .Greece { top: 55.2%; left: 48.5%; width: 15px; height: 10px; } .Colombia { top: 66%; left: 21.8%; } .Chile { top: 80%; left: 20.8%; } .Peru { top: 70%; left: 20.5%; } .Argentina { top: 79%; left: 25%; } .SaudiArabia { top: 60%; left: 55%; } .SouthAfrica { top: 76%; left: 50%; } .globalmessage-country { position: absolute; display: none; top: 10%; overflow: hidden; } .globalmessage .globalmessage-mes { padding: 10px 30px; border-radius: 20px; box-shadow: 0 0 30px #000; border: 1px solid#ea5529; background-color: rgba(0, 0, 0, 0.6); } .globalmessage .globalmessage-mes h2 { font-size: 25px; color: #fff; border-bottom: 1px dashed #fff; padding: 0 0 10px 0; } .globalmessage .globalmessage-country img { width: 16px; margin-right: 8px; } .globalmessage .globalmessage-country b, .globalmessage .globalmessage-country p { text-align: left; color: #fff; } /* country point end */ .companyHistory { background-image: url(https://static.bodor.com/images/aboutus2021/bg-companyHistory.webp); background-repeat: no-repeat; background-size: cover; padding: 4vw 0 31vw 0; } .companyHistory img { width: 100%; } .capability { background-image: url(https://static.bodor.com/images/aboutus2021/bg-capability.webp); background-repeat: no-repeat; background-size: cover; padding: 7vw 0 12vw 0; } .capability hr { margin-left: 0; left: 0; } .capability b, .capability p { color: #fff; } .rdcapability { background-image: url(https://static.bodor.com/images/aboutus2021/bg-rdcapability.webp); background-repeat: no-repeat; background-size: cover; padding: 4vw 0 5vw 0; } .rdcapability hr { margin-left: 0; left: 0; } .service { background-image: url(https://static.bodor.com/images/aboutus2021/bg-service.webp); background-repeat: no-repeat; background-size: cover; padding: 5vw 0 5vw 0; } .service-box { border: 1px solid #c4c4c4; padding: 20px 10px; margin-bottom: 60px; height: 250px; cursor: pointer; border-radius: 10px; } .service-box-center { margin-left: 80px; margin-right: 80px; } .service-box h3, .service-box p { color: #fff; } .service-box h3 { font-size: 21px; font-weight: bolder;margin-top:15px;margin-bottom:15px; } .service-box p { font-size: 15px; } .service-box img { margin-top: 30px; width: 80%; } .service-box:hover { background-color: rgba(255, 255, 255, 0.08); border-top: 3px solid #ea5529; box-shadow: 0 0 8px #fff inset, 0 0 8px #000; } .aboutusVideo { background-color: #d9d9d9; padding: 5vw 0; } @media only screen and (max-width: 1300px) { .aboutus h2 { font-size: 28px; font-weight: bolder; } .aboutus h3 { font-size: 18px; margin-top: 8px; margin-bottom: 8px; } .aboutus hr { width: 50px; height: 1.5px; margin-top: 15px; margin-bottom: 15px; } .aboutus p { font-size: 16px; } .aboutus b { font-size: 16px; color: #ea5529; } .globalmessage .globalmessage-mes h2 { font-size: 23px; } .globalmessage .globalmessage-country b, .globalmessage .globalmessage-country p { font-size: 16px; } } @media only screen and (max-width: 750px) { .aboutus h2 { font-size: 28px; font-weight: bolder; } .aboutus h3 { font-size: 18px; margin-top: 8px; margin-bottom: 8px; } .aboutus hr { width: 50px; height: 1.5px; margin-top: 15px; margin-bottom: 15px; } .aboutus p { font-size: 14px; } .aboutus b { font-size: 14px; color: #ea5529; } .aboutus-banner img { width: 100%; padding: 0 0; margin: 0 0; margin-top: 50px; } .introduction { background-image: url(https://static.bodor.com/images/aboutus2021/bg-introduction-m.webp); padding: 14vw 0 64vw 0; } .introduction b { font-size: 20px; } .introduction-icon { width: 50%; margin-bottom: 10px; } .globalNetwork { background-image: url(https://static.bodor.com/images/aboutus2021/bg-globalNetwork-m.webp); background-repeat: no-repeat; background-size: cover; padding: 56vw 0 100vw 0; } .globalNetwork-message p { line-height: 26px; margin: 0 0 0px; } .globalNetwork-message b { font-size: 30px; background-image: -webkit-gradient( linear, 0 0, 0 bottom, from(#888888), to(#eeeeee) ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .companyHistory { background-image: url(https://static.bodor.com/images/aboutus2021/bg-companyHistory-m.webp); padding: 2vw 0 136vw 0; } .capability { background-image: url(https://static.bodor.com/images/aboutus2021/bg-capability-m.webp); padding: 9vw 0 72vw 0; } .capability hr { text-align: center; margin: 10px auto; } .capability p { font-size: 16px; } .capability b { font-size: 17px; } .capability h2, .capability p { text-align: center; } .rdcapability { background-image: url(https://static.bodor.com/images/aboutus2021/bg-rdcapability-m.webp); padding: 5vw 0 72vw 0; } .rdcapability h2 { text-align: center; } .rdcapability p { margin: 0 0 5px; } .rdcapability hr { text-align: center; margin: 10px auto; } .rdcapability .rdcapability-icon { width: 30%; margin-bottom: 10px; } .service-box { height: auto; padding: 5px; border-top: 4px solid #ea5529; margin-bottom: 15px; } .service-icon { width: 80%; } .service-box-center { margin-left: 32px; margin-right: auto; } .aboutusVideo { padding: 10vw 5vw; } }