.AboutSection > div{ display:flex; flex-direction: column;} .AboutSection > div > div{ display:flex; width:100%; flex-direction: column; align-items:center; justify-content:center; position:relative; overflow:hidden; z-index:2; } .AboutSection > div > div > .text{ width:100%; height:100vh; display:flex; justify-content:center ; align-items:center; flex-direction: column;} .AboutSection > div > div > .text > h3{ text-align:center; font-size:64px; margin-bottom:0px} .AboutSection > div > div > .text > nav{ display:flex; justify-content:center ; align-items:center; } .AboutSection > div > div > .text > nav > ul{ display:flex; justify-content:center ; align-items:center; gap:30px; } .AboutSection > div > div > .text > nav > ul > li > a{ font-size:18px;;} .AboutSection > div > div > .text > nav > ul > li > a:hover{ color:#ffd400;} .CeoMessageSection{ width:100%; height:100vh; display:flex; justify-content:center; align-items:center; background-color:#0b0b0b;} .CeoMessageSection > div{ display:flex; flex-direction: column; padding:50px 0;} .CeoMessageSection > div > div{ display:flex; margin:auto; flex-direction: column; align-items:center; justify-content:center; position:relative; overflow:hidden; z-index:2; } .CeoMessageSection > div > div > h3{ text-align:center; font-size:64px; margin-bottom:30px;} .CeoMessageSection > div > div > div >.text{ display:flex; align-items:center;} .CeoMessageSection > div > div > div >.text > div > h3{ font-size:42px; margin-bottom:30px;} .CeoMessageSection > div > div > div >.text > div > h4{ font-size:26px; line-height:1.8; margin-bottom:24px;} .CeoMessageSection > div > div > div >.text > div > p{ font-size:18px; line-height:1.8; margin-bottom:12px;} .HistorySection2{ width:100%; min-height:100vh; display:flex; justify-content:center; align-items:center; background-color:#0b0b0b;} .HistorySection2 > div{ display:flex; flex-direction: column;} .HistorySection2 > div > div{ display:flex; margin:auto; flex-direction: column; align-items:center; justify-content:center; position:relative; overflow:hidden; z-index:2; } .HistorySection2 > div > div > h3{ text-align:center; font-size:64px; margin-bottom:30px;} .HistorySection2 > div > div > .text > ul{ min-width:800px;} .HistorySection2 > div > div > .text > ul > li{ display:flex; border-top:1px solid rgba(255,255,255,0.8); padding:12px 0; align-items:center;} .HistorySection2 > div > div > .text > ul > li > h4{ font-size:32px; width:140px; text-align:center; padding:8px 0;} .HistorySection2 > div > div > .text > ul > li > ul > li{ margin-left:30px; list-style:disc; font-size:18px;} .CeoMessageSection{ background-color:#ffffff;} .CeoMessageSection *{ color:#000;} .CeoMessageSection > div > div > h3{ color:#004586;} .CeoMessageSection > div > div > div >.text > div > h4{ color:#0B89C6;} .HistorySection1{ background-color:gray;} .HistorySection2{ background-color:#f1f1f1;} .HistorySection2 *{ color:#000;} .HistorySection2 > div > div > .text > ul > li{ border-top:1px solid rgba(0,0,0,0.8);} .AboutMenuSection > div > nav{ width:90%; max-width:1400px; margin:auto; margin-top:80px;} .AboutMenuSection > div > nav > div{ position:relative;} .AboutMenuSection > div > nav > div > ul{ display:flex; flex-wrap:wrap; gap:10px;} .AboutMenuSection > div > nav > div > ul > li{flex-grow:1; border:1px solid #070930; border-bottom:5px solid #12176A;} .AboutMenuSection > div > nav > div > ul > li > a{ width:100%; text-align:center; display:inline-block; color:#12176A; padding:8px 0; font-size:24px; font-weight:400; text-transform:uppercase; transition-duration:0.3s;} .AboutMenuSection > div > nav > div > ul > li > a.active{ color:#fff; background-color:#12176A; cursor:default; pointer-events: none;} .AboutMenuSection > div > nav > div > ul > li > a:hover{ background-color:#070930; color:#fff;} .IntroduceSection{ } .IntroduceSection > div > div > .img{ } .IntroduceSection > div > div > .text{ position:relative; z-index:1; width:100%; height:690px; background-image:url(https://file.bmi-protection.co.kr/img/20231222/025156_0.png); background-size:cover; background-position:right bottom; background-repeat:no-repeat; display:flex; justify-content:flex-start; align-items:flex-end;} .IntroduceSection > div > div > .text > div{ margin-left:60px; margin-bottom:60px;} .IntroduceSection > div > div > .text > div > h3{ font-size:20px; text-transform:uppercase; /*font-family:'SEBANG_Gothic_Bold';*/ font-weight:600; text-shadow:0px 0px 5px #000; color:#BAAFAF; } .IntroduceSection > div > div > .text > div > p{ margin-top:14px; } .IntroduceSection > div > div > .text > div > p > span{ font-size:64px; text-transform:uppercase; /*font-family:'SEBANG_Gothic_Bold';*/ font-weight:600; line-height:1; text-shadow:0px 0px 5px #000; color:#ffffff; display:none; } .VisionSection{ margin:80px 0;} .VisionSection > div{ padding:50px 0; } .VisionSection > div > div{ width:100%; max-width:845px; margin:auto; display:flex; flex-direction: column; position:relative;} .VisionSection > div > div > .img{ } .VisionSection > div > div > .img > h3{ position:relative; z-index:2; max-width:720px; } .VisionSection > div > div > .img > div{ position:relative; display:none; width:100%; overflow:hidden; z-index:1; margin-top:-30px;} .VisionSection > div > div > .img > div > img{ width:100%; height:466px; object-fit:cover; object-position:center; float:left; } .VisionSection > div > div > .img > div:after{ content:""; background:linear-gradient(90deg, #000 -0.27%, rgba(0, 0, 0, 0.00) 26.55%, #000 100.05%); width:100%; height:100%; position:absolute; left:0; top:0; z-index:2;} .VisionSection > div > div > .text{ } .VisionSection > div > div > .text > .visitiontitle > p{display:flex; flex-direction: column; margin:30px 0; } .VisionSection > div > div > .text > .visitiontitle > p > span{ font-size: 30px; font-weight:300; } .VisionSection > div > div > .text > .visitiontitle > p > span > span{} .VisionSection > div > div > .text > .visitioncontent{ } .VisionSection > div > div > .text > .visitioncontent > ul{display:flex; flex-direction: column; gap:20px; margin:auto; } .VisionSection > div > div > .text > .visitioncontent > ul > li{ display:flex; flex-grow:1; align-items:flex-start; gap:30px;} .VisionSection > div > div > .text > .visitioncontent > ul > li > label{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22171%22%20height%3D%22102%22%20viewBox%3D%220%200%20171%20102%22%20fill%3D%22none%22%3E%0A%20%20%3Cmask%20id%3D%22mask0_629_1156%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22171%22%20height%3D%22102%22%3E%0A%20%20%20%20%3Crect%20width%3D%22171%22%20height%3D%22102%22%20fill%3D%22%23D9D9D9%22%2F%3E%0A%20%20%3C%2Fmask%3E%0A%20%20%3Cg%20mask%3D%22url(%23mask0_629_1156)%22%3E%0A%20%20%20%20%3Cg%20filter%3D%22url(%23filter0_d_629_1156)%22%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2284%22%20cy%3D%22100%22%20r%3D%2273%22%20fill%3D%22white%22%2F%3E%0A%20%20%20%20%20%20%3Ccircle%20cx%3D%2284%22%20cy%3D%22100%22%20r%3D%2272%22%20stroke%3D%22%231943AD%22%20stroke-width%3D%222%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22filter0_d_629_1156%22%20x%3D%22-0.7%22%20y%3D%2210.3%22%20width%3D%22169.4%22%20height%3D%22169.4%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%0A%20%20%20%20%20%20%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22BackgroundImageFix%22%2F%3E%0A%20%20%20%20%20%20%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22hardAlpha%22%2F%3E%0A%20%20%20%20%20%20%3CfeOffset%20dy%3D%22-5%22%2F%3E%0A%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%225.85%22%2F%3E%0A%20%20%20%20%20%20%3CfeComposite%20in2%3D%22hardAlpha%22%20operator%3D%22out%22%2F%3E%0A%20%20%20%20%20%20%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.15%200%22%2F%3E%0A%20%20%20%20%20%20%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22BackgroundImageFix%22%20result%3D%22effect1_dropShadow_629_1156%22%2F%3E%0A%20%20%20%20%20%20%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22effect1_dropShadow_629_1156%22%20result%3D%22shape%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%3C%2Fsvg%3E"); background-size:cover; width:171px; height:102px; display:flex; align-items:flex-end; justify-content:center;} .VisionSection > div > div > .text > .visitioncontent > ul > li > label > span{ font-size: 23px; font-weight:900; text-transform:uppercase; color:#22183D; } .VisionSection > div > div > .text > .visitioncontent > ul > li > div{ width:calc(100% - 171px); max-width:658px; padding-top:30px;} .VisionSection > div > div > .text > .visitioncontent > ul > li > div > p{ } .VisionSection > div > div > .text > .visitioncontent > ul > li > div > p > span{ font-size: 25px; font-weight:400; } /* .VisionSection > div > div > .img > h3{ color:transparent; font-size:0; opacity:0.2; position:absolute; top:408px; left:50px; background-image:url(https://file.bmi-protection.co.kr/data/20240119/100736_0.svg); width:268px; height:738px; display:inline-block; background-repeat:no-repeat; z-index:3;} .VisionSection > div > div > .img > div{ position:relative; width:100%; overflow:hidden;} .VisionSection > div > div > .img > div > img{ width:100%; float:left;} .VisionSection > div > div > .img > div:after{ content:""; background:linear-gradient(90deg, #000 -0.27%, rgba(0, 0, 0, 0.00) 26.55%, #000 100.05%); width:100%; height:100%; position:absolute; left:0; top:0; z-index:2;} .VisionSection > div > div > .text{ order:1;} .VisionSection > div > div > .text > .visitiontitle > p{ display:flex; flex-direction: column; margin:75px 50px;} .VisionSection > div > div > .text > .visitiontitle > p > span{ font-size: 46.765px; color:#fff; } .VisionSection > div > div > .text > .visitiontitle > p > span > span{ background:repeating-linear-gradient(transparent, transparent 33px, rgba(23,28,97,1) 0, rgba(23,28,97,1) 71px, transparent 0,transparent 100px);} .VisionSection > div > div > .text > .visitioncontent{ display:flex; justify-content: flex-end;} .VisionSection > div > div > .text > .visitioncontent > ul{ display:flex; flex-direction: column; margin:50px 120px; gap:80px; max-width:450px;} .VisionSection > div > div > .text > .visitioncontent > ul > li > label{ margin:20px 0; display:inline-block;} .VisionSection > div > div > .text > .visitioncontent > ul > li > label > span{ font-size: 39.993px; color:#fff; text-transform:uppercase; background:repeating-linear-gradient(transparent, transparent 33px, rgba(23,28,97,1) 0, rgba(23,28,97,1) 71px, transparent 0,transparent 100px); padding-right:44px; } .VisionSection > div > div > .text > .visitioncontent > ul > li > div > p{ display:flex; flex-direction: column; } .VisionSection > div > div > .text > .visitioncontent > ul > li > div > p > span{ font-size: 21.535px; color:#fff;} */ .CertificationSection { background-color:#F8F8F8;} .CertificationSection > div{ width:90%; max-width:1380px; margin:auto; display:flex; justify-content:flex-end;} .CertificationSection > div > div{ display:flex; justify-content:space-between; width:1100px;} .CertificationSection > div > div > .img{ order:2 } .CertificationSection > div > div > .text{ order:1; width:100%; position:relative; display:flex; align-items:center;} .CertificationSection > div > div > .text > div{ } .CertificationSection > div > div > .text > div > h3{ max-width:340px;} .CertificationSection > div > div > .text > div > h3 > span{ font-size: 30px; font-weight: 700;} .CertificationSection > div > div > .text > div > nav{ margin-top:70px;} .CertificationSection > div > div > .text > div > nav > a{ display:flex; justify-content:center; align-items:center; gap:20px; width:230px; height:44px; border: 2px solid #1943AD; transition-duration:0.3s;} .CertificationSection > div > div > .text > div > nav > a > .linktext{ color:#22183D; font-size:20px; font-weight:600; order:1; text-transform:uppercase; transition-duration:0.3s;} .CertificationSection > div > div > .text > div > nav > a > .linkicon{ order:2; background-image:url("data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%2F%3E%3Cg%20data-name%3D%22Layer%202%22%20id%3D%22Layer_2%22%3E%3Cpath%20d%3D%22M12%2C25a1%2C1%2C0%2C0%2C1-.71-.29%2C1%2C1%2C0%2C0%2C1%2C0-1.42L18.59%2C16l-7.3-7.29a1%2C1%2C0%2C1%2C1%2C1.42-1.42l8%2C8a1%2C1%2C0%2C0%2C1%2C0%2C1.42l-8%2C8A1%2C1%2C0%2C0%2C1%2C12%2C25Z%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22frame%22%3E%3Crect%20class%3D%22cls-1%22%20height%3D%2232%22%20width%3D%2232%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); width: 30px;height: 30px;display: inline-block;background-size: cover;background-repeat: no-repeat; transition-duration:0.3s; } .CertificationSection > div > div > .text > div > nav > a:hover{ background-color:#1943AD;} .CertificationSection > div > div > .text > div > nav > a:hover > .linktext{ color:#fff;} .CertificationSection > div > div > .text > div > nav > a:hover > .linkicon{ background-image:url("data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%2F%3E%3Cg%20data-name%3D%22Layer%202%22%20id%3D%22Layer_2%22%3E%3Cpath%20d%3D%22M12%2C25a1%2C1%2C0%2C0%2C1-.71-.29%2C1%2C1%2C0%2C0%2C1%2C0-1.42L18.59%2C16l-7.3-7.29a1%2C1%2C0%2C1%2C1%2C1.42-1.42l8%2C8a1%2C1%2C0%2C0%2C1%2C0%2C1.42l-8%2C8A1%2C1%2C0%2C0%2C1%2C12%2C25Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22frame%22%3E%3Crect%20class%3D%22cls-1%22%20height%3D%2232%22%20width%3D%2232%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")} .bmiis { display: flex; flex-direction: column; flex-wrap:wrap; gap:20px; width:481px; height:627px; } .bmiis > li:first-child > div{ width:231px; height:109px; background-color:#22183D; display:inline-block; float:left;} .bmiis > li:last-child > div{ width:231px; height:73px; background-color:#22183D; display:inline-block; float:left;} .bmiis > li > img{ width:231px; float:left;} .CertificationSlideDiv { } .CertificationSlideDiv .swiper-slide{ width:auto;} .CertificationSlideDiv .swiper-slide > a{ margin:8px; display:inline-block;} .LicenseImg > img{ height:263px;} .LicenseTitle{ font-size:16px; font-weight:400; text-align:center; line-height:1.2; color:#000;} .CertificationSlideDiv .LicenseTitle{ max-width:180px;} .IntroqualitySection{ } .IntroqualitySection > div{ } .IntroqualitySection > div > div{ background-image:url(https://file.bmi-protection.co.kr/img/20231222/012140_0.png); background-position:top center; background-size:cover; background-repeat:no-repeat; height:417px; width:100%; margin:auto;} .IntroqualitySection > div > div > .text{ display:none; justify-content:flex-end; align-items:center; height:585px; width:90%; max-width:1400px; margin:auto; } .IntroqualitySection > div > div > .text > div{ } .IntroqualitySection > div > div > .text > div > h3{ color: #FFFFFF; font-size: 64px; font-weight: 600; } .IntroqualitySection > div > div > .text > div > p{ display:flex; flex-direction: column; margin-top:40px;} .IntroqualitySection > div > div > .text > div > p > span{ color: #FFFFFF; font-size: 40px; font-weight: 400;} .IntroduceMessageSection{ } .IntroduceMessageSection > div{ padding:50px 0; padding-top:80px; max-width:980px; margin:auto;} .IntroduceMessageSection > div > div{ width:90%; max-width:1400px; margin:auto;} .IntroduceMessageSection > div > div > .text{ display:flex; width:100%; margin:auto; } .IntroduceMessageSection > div > div > .text > div > h3{ display:flex; flex-direction: column;} .IntroduceMessageSection > div > div > .text > div > h3 > span{ font-size:30px; font-weight:700; line-height:1.5; color:#393636;} .IntroduceMessageSection > div > div > .text > div > p{ display:flex; flex-direction: column; margin-top:50px;} .IntroduceMessageSection > div > div > .text > div > p > span{ font-size:25px; font-weight:400; line-height:1.5; color:#4B4949;} .IntroduceProductSection{} .IntroduceProductSection > div{ padding:50px 0;} .IntroduceProductSection > div > div{ display:flex; justify-content:flex-end; width:calc(100% - 120px); max-width:1400px; margin:auto;} .IntroduceProductSection > div > div > ul{ display:flex; flex-wrap:wrap; gap:60px; justify-content:center; align-items:center; } .IntroduceProductSection > div > div > ul > li{ width:650px;} .IntroduceProductSection > div > div > ul > li > .img{ width:100%; height:490px; display:inline-block; background-color:#D9D9D9; } .IntroduceProductSection > div > div > ul > li > .img:before{ content:"#IMG"; color:#00f; font-size:48px; font-weight:900; margin:1em;} .IntroduceProductSection > div > div > ul > li > .text{ position:relative; width:100%; } .IntroduceProductSection > div > div > ul > li > .text > div > h4{ position:absolute; display:inline-block; font-size:36px; font-weight:400; top:-110px; left:40px;} .IntroduceProductSection > div > div > ul > li > .text > div > p{ display:flex; flex-direction: column; margin-top:30px; margin-bottom:30px; margin-left:22px; position:relative;} .IntroduceProductSection > div > div > ul > li > .text > div > p:before{ content: ""; position: absolute; left: -18px; top: 6px; width: 9px; height: calc(100% - 12px); display: inline-block; background-color: #12176A; } .IntroduceProductSection > div > div > ul > li > .text > div > p > span{ font-size:24px; font-weight:500; line-height:1.2;} .IntroduceProductSection > div > div > ul > li > .text > div > nav{ margin:0 22px;} .IntroduceProductSection > div > div > ul > li > .text > div > nav > a{ display:flex; gap:8px; align-items:center; } .IntroduceProductSection > div > div > ul > li > .text > div > nav > a > .linktext{font-size:20px; font-weight:400; text-transform:uppercase;} .IntroduceProductSection > div > div > ul > li > .text > div > nav > a:hover > .linktext{ color:#12176A;} .IntroduceProductSection > div > div > ul > li > .text > div > nav > a > .linkicon{ width:20px; height:20px; background-size:cover; display:inline-block; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill%3D%22%23000%22%20%20d%3D%22M12%2C1A11%2C11%2C0%2C1%2C0%2C23%2C12%2C11%2C11%2C0%2C0%2C0%2C12%2C1Zm6.707%2C11.707-4%2C4a1%2C1%2C0%2C0%2C1-1.414-1.414L15.586%2C13H6a1%2C1%2C0%2C0%2C1%2C0-2h9.586L13.293%2C8.707a1%2C1%2C0%2C1%2C1%2C1.414-1.414l4%2C4A1%2C1%2C0%2C0%2C1%2C18.707%2C12.707Z%22%2F%3E%0A%3C%2Fsvg%3E");} .IntroduceProductSection > div > div > ul > li > .text > div > nav > a:hover > .linkicon{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill%3D%22%2312176A%22%20%20d%3D%22M12%2C1A11%2C11%2C0%2C1%2C0%2C23%2C12%2C11%2C11%2C0%2C0%2C0%2C12%2C1Zm6.707%2C11.707-4%2C4a1%2C1%2C0%2C0%2C1-1.414-1.414L15.586%2C13H6a1%2C1%2C0%2C0%2C1%2C0-2h9.586L13.293%2C8.707a1%2C1%2C0%2C1%2C1%2C1.414-1.414l4%2C4A1%2C1%2C0%2C0%2C1%2C18.707%2C12.707Z%22%2F%3E%0A%3C%2Fsvg%3E");} .AboutHistorySection{ } .AboutHistorySection > div > div > .img{ } .AboutHistorySection > div > div > .text{ position:relative; z-index:1; width:100%; height:690px; background-image:url(https://file.bmi-protection.co.kr/img/20231222/040034_0.png); background-size:cover; background-position:right bottom; background-repeat:no-repeat; display:flex; justify-content:flex-start; align-items:flex-end;} .AboutHistorySection > div > div > .text > div{ margin-left:60px; margin-bottom:60px;} .AboutHistorySection > div > div > .text > div > h3{ font-size:20px; text-transform:uppercase; /*font-family:'SEBANG_Gothic_Bold';*/ font-weight:600; text-shadow:0px 0px 5px #000; color:#BAAFAF; } .AboutHistorySection > div > div > .text > div > p{ font-size:64px; text-transform:uppercase; /*font-family:'SEBANG_Gothic_Bold';*/ margin-top:14px; font-weight:600; line-height:1; text-shadow:0px 0px 5px #000; color:#ffffff; } .HistorySection > div{ padding:50px 0;} .HistorySection > div > div > h3{ display:none;} .HistorySection > div > div > .text > nav{ width:90%; max-width:1400px; margin:auto; margin-top:80px;} .HistorySection > div > div > .text > nav > div{ margin-left:380px; position:relative;} .HistorySection > div > div > .text > nav > div:after{ content:""; position:absolute; width:100%; right:0; bottom:-5px; height:5px; background-color:#12176A; display:inline-block;} .HistorySection > div > div > .text > nav > div > ul{ display:flex; flex-wrap:wrap;} .HistorySection > div > div > .text > nav > div > ul > li > a{ display:inline-block; color:#12176A; padding:8px 36px; border:1px solid #12176A; margin-right:-1px; margin-bottom:-1px; font-size:24px; font-weight:400; text-transform:uppercase; transition-duration:0.3s;} .HistorySection > div > div > .text > nav > div > ul > li > a.active{ color:#fff; background-color:#12176A; cursor:default; pointer-events: none;} .HistorySection > div > div > .text > nav > div > ul > li > a:hover{ background-color:#0B89C6; color:#fff;} .HistorySection > div > div > .text > ul{ width:90%; max-width:1400px; margin:auto;} .HistorySection > div > div > .text > ul > li{ display:flex; align-items:center; position:relative; padding:50px 0; } .HistorySection > div > div > .text > ul > li:after{ content:""; position:absolute; width:calc(100% - 380px); right:0; bottom:-5px; height:5px; background-color:#12176A; display:inline-block;} .HistorySection > div > div > .text > ul > li:last-child:after{ display:none;} .HistorySection > div > div > .text > ul > li > h4{ font-size:48px; font-weight:500; width:380px; text-align:center; padding:8px 0;} .HistorySection > div > div > .text > ul > li > ul{ display:flex; flex-direction: column; gap:16px; width:calc(100% - 380px);} .HistorySection > div > div > .text > ul > li > ul > li{ margin-left:30px; list-style:disc; font-size:24px; font-weight:500;} .AboutPerformanceSection{ } .AboutPerformanceSection > div > div > .img{ } .AboutPerformanceSection > div > div > .text{ position:relative; z-index:1; width:100%; height:690px; background-image:url(https://file.bmi-protection.co.kr/img/20240103/014018_0.jpg); background-size:cover; background-position:60% 50%; background-repeat:no-repeat; display:flex; justify-content:flex-start; align-items:flex-end;} .AboutPerformanceSection > div > div > .text > div{ margin-left:60px; margin-bottom:60px;} .AboutPerformanceSection > div > div > .text > div > h3{ font-size:20px; text-transform:uppercase; /*font-family:'SEBANG_Gothic_Bold';*/ font-weight:600; text-shadow:0px 0px 5px #000; color:#BAAFAF; } .AboutPerformanceSection > div > div > .text > div > p{ font-size:64px; text-transform:uppercase; /*font-family:'SEBANG_Gothic_Bold';*/ margin-top:14px; font-weight:600; line-height:1; text-shadow:0px 0px 5px #000; color:#ffffff; } .PerformanceSection > div{ padding:50px 0;} .PerformanceSection > div > div > h3{ display:none;} .PerformanceSection > div > div > .text > nav{ width:90%; max-width:1400px; margin:auto; margin-top:80px;} .PerformanceSection > div > div > .text > nav > div{ margin-left:380px; position:relative;} .PerformanceSection > div > div > .text > nav > div:after{ content:""; position:absolute; width:100%; right:0; bottom:-5px; height:5px; background-color:#12176A; display:inline-block;} .PerformanceSection > div > div > .text > nav > div > ul{ display:flex; flex-wrap:wrap;} .PerformanceSection > div > div > .text > nav > div > ul > li > a{ display:inline-block; color:#12176A; padding:8px 36px; border:1px solid #12176A; margin-right:-1px; margin-bottom:-1px; font-size:24px; font-weight:400; text-transform:uppercase; transition-duration:0.3s;} .PerformanceSection > div > div > .text > nav > div > ul > li > a.active{ color:#fff; background-color:#12176A; cursor:default; pointer-events: none;} .PerformanceSection > div > div > .text > nav > div > ul > li > a:hover{ background-color:#0B89C6; color:#fff;} .PerformanceSection > div > div > .text > ul{ width:90%; max-width:1400px; margin:auto;} .PerformanceSection > div > div > .text > ul > li{ display:flex; align-items:center; position:relative; padding:50px 0; } .PerformanceSection > div > div > .text > ul > li:after{ content:""; position:absolute; width:calc(100% - 380px); right:0; bottom:-5px; height:5px; background-color:#12176A; display:inline-block;} .PerformanceSection > div > div > .text > ul > li:last-child:after{ display:none;} .PerformanceSection > div > div > .text > ul > li > h4{ font-size:48px; font-weight:500; width:380px; text-align:center; padding:8px 0;} .PerformanceSection > div > div > .text > ul > li > ul{ display:flex; flex-direction: column; gap:16px; width:calc(100% - 380px);} .PerformanceSection > div > div > .text > ul > li > ul > li{ margin-left:30px; list-style:disc; font-size:24px; font-weight:500;} .AboutCertificationSection{ } .AboutCertificationSection > div > div > .img{ } .AboutCertificationSection > div > div > .text{ position:relative; z-index:1; width:100%; height:690px; background-image:url(https://file.bmi-protection.co.kr/img/20231222/042928_0.jpg); background-size:cover; background-position:left center; background-repeat:no-repeat; display:flex; justify-content:flex-start; align-items:flex-end;} .AboutCertificationSection > div > div > .text > div{ margin-left:60px; margin-bottom:60px;} .AboutCertificationSection > div > div > .text > div > h3{ font-size:20px; text-transform:uppercase; /*font-family:'SEBANG_Gothic_Bold';*/ font-weight:600; text-shadow:0px 0px 5px #000; color:#BAAFAF; } .AboutCertificationSection > div > div > .text > div > p{ font-size:64px; text-transform:uppercase; /*font-family:'SEBANG_Gothic_Bold';*/ margin-top:14px; font-weight:600; line-height:1; text-shadow:0px 0px 5px #000; color:#ffffff; } .PatentCertificationSection > div{ padding:50px 0;} .PatentCertificationSection > div > div > h3{ display:none;} .PatentCertificationSection > div > div > .text > div{ width:90%; max-width:1400px; margin:50px auto;} .PatentCertificationSection > div > div > .text > div > ul{ display:flex; flex-wrap:wrap; gap:50px; margin:auto;} .PatentCertificationSection > div > div > .text > div > ul > li .LicenseImg{ width:220px; height:306px; padding:5px; border:1px solid #12176A; display:flex; justify-content:center; align-items:center;} .PatentCertificationSection > div > div > .text > div > ul > li .LicenseImg img{ width:100%; height:100%; object-fit:contain; } .PatentCertificationSection > div > div > .text > div > ul > li .LicenseTitle{ margin:8px auto; font-size:17px; font-weight:400; display:block; width:100%; max-width:200px; line-height:1.2;} .IntroduceDesignSection{ } .IntroduceDesignSection > div{ padding:50px 0; } .IntroduceDesignSection > div > div{ width:90%; max-width:900px; margin:auto; display:flex;} .IntroduceDesignSection > div > div > .text{ display:flex; width:100%; margin:auto; } .IntroduceDesignSection > div > div > .text > div > h3{ display:flex; flex-direction: column;} .IntroduceDesignSection > div > div > .text > div > h3 > span{ font-size:64px; font-weight:600; line-height:1.2;} .IntroduceDesignSection > div > div > .text > div > p{ display:flex; flex-direction: column; max-width:900px; margin:auto;} .IntroduceDesignSection > div > div > .text > div > p > span{ font-size:30px; font-weight:700; line-height:1.5; color:rgba(0,0,0,1);} .IntroducePartnerSection > div > div > .text{ padding:80px 0; width:90%; max-width:1400px; margin:auto;} .IntroducePartnerSection > div > div > .text > div > h2{ width:100%; position:relative; background: repeating-linear-gradient(transparent, transparent calc(50% - 3px), #12176A 0, #12176A calc(50% + 3px), transparent 0,transparent 100px); } .IntroducePartnerSection > div > div > .text > div > h2 > span{ font-size:36px; font-weight:900; background-color:#fff; padding:0 10px; display:inline-block;} .IntroducePartnerSection > div > div > .text > div > ul{ display:flex; justify-content:center; flex-wrap:wrap; gap:30px; margin-top:30px;} .IntroducePartnerSection > div > div > .text > div > ul > li > a{ padding:16px; border-radius:8px; font-size:0; width:282px; height:134px; display:inline-block; background-size:auto 60%; background-position:center; background-repeat:no-repeat;} .IntroducePartnerSection > div > div > .text > div > ul > li > .Partner_BOA ,.IntroducePartnerSection > div > div > .text > div > ul > li > .Partner_D3O ,.IntroducePartnerSection > div > div > .text > div > ul > li > .Partner_CRYE_PRECISION{ background-color:#000; background-size:auto 60%; } .IntroducePartnerSection > div > div > .text > div > ul > li > .Partner_DYNEEMA ,.IntroducePartnerSection > div > div > .text > div > ul > li > .Partner_KRYPTEK ,.IntroducePartnerSection > div > div > .text > div > ul > li > .Partner_Avient ,.IntroducePartnerSection > div > div > .text > div > ul > li > .Partner_YKK{ background-size:90% auto; } .Partner_Avient{ background-image:url(https://file.bmi-protection.co.kr/data/20240430/102852_0.svg);} .Partner_DSM{ background-image:url(https://www.dsm.com/etc.clientlibs/dsm/clientlibs/dsm/clientlib-site/resources/logo-dsm.svg);} /*.Partner_D3O{ background-image:url(https://file.bmi-protection.co.kr/img/20240103/025234_0.png);}*/ .Partner_D3O{ background-image:url(https://file.bmi-protection.co.kr/mobileimg/20240126/031632_1.png);} .Partner_YKK{ background-image:url(https://file.bmi-protection.co.kr/mobileimg/20240430/101544_0.png);}/*https://www.ykk.com/shared/image/ykk_logo.svg*/ .Partner_BOA{ background-image:url(https://file.bmi-protection.co.kr/mobileimg/20240126/031632_0.png);} .Partner_T_plus{} .Partner_KRYPTEK{ background-image:url(https://d3k81ch9hvuctc.cloudfront.net/company/KfaWU2/images/03ce9a57-e683-4746-86ba-c69f34f8e5a3.png);} .Partner_CRYE_PRECISION{ background-image:url(https://file.bmi-protection.co.kr/data/20231206/031237_0.svg);} .Partner_DYNEEMA{ background-image:url(https://file.bmi-protection.co.kr/mobileimg/20240430/100358_0.png);} .IntroducePartnerSection > div > div > .text > div > p{ display:flex; flex-wrap:wrap; gap:8px; margin:auto; margin-top:50px; margin-bottom:100px; max-width:770px; text-align:center; justify-content:center;:} .IntroducePartnerSection > div > div > .text > div > p > span{ font-size:20px; font-weight:400; line-height:1.4; color:rgba(0,0,0,1);} .tabcontent{ display:none;} .tabcontent.active{ display:block;}