/* common */ .wrap { width: 1400px; } .cp { color:#24408f; } .cb { background: #24408f; color:#fff; } /* #w_header, section, #w_footer { font:18px/1.6 stm; } */ .pad { padding:120px 0 300px; } .shd { box-shadow: 0 0 20px rgba(0,0,0,0.05); } /* header & footer */ #w_header { height: 74px; position: fixed; left: 0; top: 0; width: 100%; z-index: 99; transition:0.3s; overflow: hidden; } #w_header:before { content:""; position: absolute; left: 0; top: 74px; width: 100%; border-bottom:1px solid #ddd; } #w_header.fix, #w_header.down { background: #fff; border-bottom:1px solid #ddd;} /* #w_header.down { height: 400px; } */ #w_header.up { top: -100px; } #w_header .wrap { max-width: 1355px; width: 100%; height: 100%; display: flex; align-items: center;} #w_header h1 {} /* [26.09.29] 로고 교체((주)비엘포스메드). 기존 top_logo.svg 는 내재크기 172x44 라 크기 지정이 없어도 됐지만, 새 로고는 488x109 이라 그대로 두면 헤더가 약 3배로 커짐 → 기존과 같은 높이(44px)로 고정. 폭은 비율대로(약 197px). ※ 모바일(≤800px)은 m_style.css 의 `#w_header h1 img{height:30px}` 가 뒤에 로드되어 그대로 적용됨. */ #w_header h1 img { height: 44px; width: auto; } #w_header #w_gnb {display: flex; align-items: center; font-size:18px; margin-left: auto;} #w_header #w_gnb > li { } #w_header #w_gnb > li > a {display: inline-block; padding: 1.25em; font-family: stb; text-align: center;} #w_header #w_gnb > li:hover > a, #w_header #w_gnb > li.select > a { color:var(--main-color);} #w_header #w_gnb ul { padding-top: 60px; position: absolute; top:20px; line-height:1.2; } #w_header #w_gnb ul li { margin-bottom: 16px; } #w_header #w_gnb ul li a { color:#999; display: block; } #w_header #w_gnb ul li a:hover { color:#000; } #w_header #w_gnb ul li a:after { content:""; display: block; margin-top: 4px; width: 0; height: 1px; background: #24408f; transition:0.3s; } #w_header #w_gnb ul li a:hover:after { width: 100%; } #w_header .order { width: 130px; height: 40px; position: absolute; right: 0; top: 40px; border-radius: 8px; border:2px solid #24408f; box-sizing: border-box; transition: 0.3s; } #w_header .order:hover { background: #fff; color:#24408f; } #w_header .lang { position: absolute; right: 0; top: 10px; border:none; background: none; padding-right: 6px; } #w_footer { background: #000; color:#333; } #w_footer .wrap { width: 1520px; } #w_footer img { position: absolute; } #w_footer address { font-style:normal; float:right; } #w_footer .b_gnb > li { float:left; margin-right: 70px; font-style: normal; } #w_footer .b_gnb > li > a { font-family: steb; } #w_footer .b_gnb ul { position: absolute; padding-top: 20px; line-height:1.2; } #w_footer .b_gnb ul li { margin-bottom: 10px; } #w_footer address p { padding-top: 240px; } @media (max-width:1400px) { #w_header .wrap {padding: 0 4%;} #w_header #w_gnb {font-size: 16px;} } @media (max-width:1280px) { #w_header #w_gnb {font-size: 15px;} } ul.adm { display: flex; align-items: center; justify-content: center; font-size:14px; position: absolute; right: 0; bottom: 0; white-space: nowrap;} ul.adm li:before { content:"|"; margin:0 6px; } ul.adm li:first-child:before { display: none; } #top_btn { border-radius: 50px; transition:0.3s; opacity: 0; } #top_btn.on { opacity: 1; } /* index */ .more { font:16px stb; color:#24408f; display: inline-block; } .more:after { content:""; width: 0; height: 2px; background: #24408f; display: block; margin-top: 4px; transition:0.3s; } .more:hover:after { width: 97%; } .more i { position: relative; top:1px; } #main { position: relative; height: 100vh; overflow: hidden; } /* #main .mainSlide { height: 890px; overflow: visible; } #main .swiper-pagination { bottom: -60px; } #main .swiper-pagination .swiper-pagination-bullet-active { background: #24408f; } #main .ment { position: absolute; left: calc(50% - 650px); top:50%; transform: translateY(-50%); z-index:10; } #main .ment a { display: inline-block; } */ #main:after { content:""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } #main iframe { position: absolute; width: 2400px; height: 120%; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: cover; } #bltech figure { width: 50%; overflow: hidden; border-radius: 30px; } #bltech figure img { transform: scale(1); transition:0.3s; width: 100%; height: 458px; object-position: top;} #bltech figure:hover img { transform: scale(1.1); } #bltech article { width: 50%; padding:0 50px; box-sizing: border-box; } #bltech article a { display: inline-block; } #prd ul { width: 920px; } #prd ul li { width: 440px; margin-right: 40px; margin-bottom: 40px; border-radius: 20px; position: relative; float:left; } #prd ul li:nth-child(2n) { margin-right: 0; } #prd ul li img { transform: scale(1); transition:0.3s; } #prd ul li:hover img { transform: scale(1.1); } #prd ul li h3 { position: absolute; left: 0; top: 30px; width: 100%; } #prd ul li dl { position: absolute; left: 0; bottom: 50px; width: 100%; } #tech { background: #24408f; } #tech article { width: 50%; } #tech article ul li { padding-left: 23px; position: relative; margin-top: 10px; opacity: 0.3; transition:0.3s; cursor: pointer; } #tech article ul li.act { opacity: 1; } #tech article ul li:before { content:""; width: 12px; height: 12px; border-radius: 20px; background: #fff; position: absolute; left:0; top:8px; } #tech article a { color:#fff; } #tech article a:after { background: #fff; } #tech figure { width: 50%; position: relative; } #tech figure img:last-child { position: absolute; left: 0; top: 0; opacity: 0; transition:0.3s; } #tech figure img:last-child.on { opacity: 1; } #cus .wrap > div { border-radius: 30px; overflow: hidden; overflow: hidden; position: relative; width: 725px; height: 425px; } #cus .wrap > div img { transform: scale(1); transition: 0.3s; width: 100%; height: 100%; } #cus .wrap > div:hover img { transform: scale(1.1); } #cus .wrap > .pic1 { height: 900px; } #cus .pic1 h2 { position: absolute; left: 50px; top: 70px; } #cus .pic1 p { position: absolute; left: 50px; bottom: 80px; } #cus .pic2 h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } #cus .pic3 { position: absolute !important; right: 0; bottom: 0; } #cus .pic3 a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition:0.3s; } #cus .pic3 a:hover { color:#fff; background: #24408f; } /* sub layout */ .sv .wrap { height: 360px; justify-content: start; padding-top: 160px; box-sizing: border-box; } .sm ul { display:flex; justify-content: start; align-items: center; width: 1400px; margin:0 auto; border-bottom:1px solid #ddd; } .sm ul li { position: relative; line-height:60px; } .sm ul li br { display: none; } .sm ul li a { padding: 0 30px; opacity: 0.5; } .sm ul li a:after { content:""; position: absolute; left: 0; bottom: -2px; width: 100%; border-bottom:3px solid rgba(255,255,255,0); } .sm ul li.select a { opacity: 1; } .sm ul li.select a:after { border-color:#24408f; } /* sub1_1 */ #sub1_1 .cont1 figure { width: 680px; } #sub1_1 .cont1 figure img { width: 100%; } #sub1_1 .cont1 article { width: 680px; } #sub1_1 .cont1 article p { position: absolute; left: 720px; bottom: 0; } #sub1_1 .cont2 ul { margin-top: 30px; border-top:2px solid #ddd; border-bottom:2px solid #ddd; padding:20px 0; } #sub1_1 .cont2 ul li { padding:10px 0 10px 360px; line-height:2;} #sub1_1 .cont2 ul li strong { position: absolute; left: 0; } #sub1_1 .cont2 ul li p { position: relative; padding-left: 160px; } #sub1_1 .cont2 ul li em { font-style:normal; display: inline-block; width: 160px; position: absolute; left: 0; } #sub1_1 .cont3 ul li { width: 680px; overflow: hidden; border-radius: 30px; position: relative; } #sub1_1 .cont3 ul li img { width: 100%; transition:0.3s; transform: scale(1); } #sub1_1 .cont3 ul li div { position: absolute; left:0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); transition:0.3s; } #sub1_1 .cont3 ul li div p { height: 60px; } #sub1_1 .cont3 ul li:hover img { transform: scale(1.1); } #sub1_1 .cont3 ul li:hover div { background: rgba(0,0,0,0.5); } /* sub1_2 */ #sub1_2 .cont1 article { width: 620px; float:left; position: sticky; left: 0; top: 0; border-top:1px solid #000; border-bottom:1px solid #000; box-sizing: border-box; padding:20px 0;} #sub1_2 .cont1 article ul li { display: inline-block; width: 170px; cursor: pointer; } #sub1_2 .cont1 article ul li.act { font-family: sth; } #sub1_2 .cont1 .year { float:right; width: 700px; position: relative; box-sizing: border-box; padding-left: 50px; } #sub1_2 .cont1 .year:before { content:""; position: absolute; left: 0; top: 0; height: 100%; border-left:1px solid #999; } #sub1_2 .cont1 .year > li { margin-bottom: 180px; } #sub1_2 .cont1 .year > li:last-child { margin-bottom: 0; } #sub1_2 .cont1 .year h3 { position: relative; } #sub1_2 .cont1 .year h3:before { content:""; width: 13px; height: 13px; background: #24408f; border-radius: 13px; position: absolute; left: -56px; top: 8px; } #sub1_2 .cont1 .year ul li { position: relative; padding-left: 110px; margin-top: 30px; } #sub1_2 .cont1 .year ul li:before { content:""; width: 13px; height: 13px; background: #999; border-radius: 13px; position: absolute; left: -56px; top: 7px; } #sub1_2 .cont1 .year ul li span { font-family: stb; position: absolute; left: 0; } #sub1_2 .cont1 .year ul li.img { cursor: pointer; } #sub1_2 .cont1 .year ul li.img:after { content:"\e941"; font-family: 'xeicon'; font-size:14px; position: absolute; right: 0; top:2px; } #sub1_2 .cont1 .year ul li.img.on:after { transform:rotate(180deg); } #sub1_2 .cont1 .year ul li.img figure { margin-left: -110px; display: none; margin-top: 10px; } #sub1_2 .cont1 .year ul li.img figure img { width: 100%; } /* sub1_3 */ #sub1_3 .cont1 p { line-height:2; } #sub1_3 .cont2 img { width: 100%; height: 570px; } #sub1_3 .cont3 ul { border-top:2px solid #000; } #sub1_3 .cont3 ul li { border-bottom:1px solid #000; padding:60px 0; display:flex; align-items: center; justify-content: start;} #sub1_3 .cont3 ul li h3 { position: relative; width:720px; } #sub1_3 .cont3 ul li h3 span { position: absolute; left: 0; bottom: -30px; color:#000; } /* sub1_4 */ #sub1_4 ul li { float:left; width: 320px; margin:0 40px 50px 0; } #sub1_4 ul li:nth-child(4n) { margin-right: 0; } #sub1_4 ul li:nth-child(4n+1) { clear: both; } #sub1_4 ul li figure { width: 100%; height:240px; background:url(/images/bg_aw.png) no-repeat center/cover; display:flex; align-items: center; justify-content: center; cursor: pointer; } #sub1_4 ul li figure img { max-width:120px; } #sub1_4 ul li:hover figure { background:url(/images/bg_aw_blue.png) no-repeat center/cover; } #sub1_4 ul li h3 { margin-top: 14px; } .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 9999; } .modal.on { display: flex; } .modal img { max-width:60vw; max-height:70vh; } /* sub1_5 */ #sub1_5 .cont1 figure { height: 350px; } #sub1_5 .cont1 ul li { margin:0 40px; } #sub1_5 .cont1 ul li a { width: 210px; height: 50px; border:1px solid #24408f; border-radius: 50px; transition:0.3s; padding-left: 4px; box-sizing: border-box;} #sub1_5 .cont1 ul li a i { margin-left: 10px; transition:0.3s; } #sub1_5 .cont1 ul li:hover a { background: #24408f; color:#fff; } #sub1_5 .cont1 ul li:hover a i { color:#fff; } .left { width: 320px; float:left; } .right { width: 1040px; float:right; } #sub1_5 .cont2 { border-top:2px solid #000; border-bottom:1px solid #000; } #sub1_5 .cont2 figure { height: 450px; } #sub1_5 .cont3 ul li { margin-top: 20px; border-radius: 30px; overflow: hidden; display: flex; align-items: center; justify-content: center; } #sub1_5 .cont3 ul li > div { width: 50%; height: 270px; position: relative; } #sub1_5 .cont3 ul li > div:last-child { background: #f5f5f5; font-family: stsb; } #sub1_5 .cont3 ul li div.blue { background: #0c3388;} #sub1_5 .cont3 ul li div.grn { background: #00913a;} #sub1_5 .cont3 ul li div.sky { background: #036eb8;} #sub1_5 .cont3 ul li div.light { background: #8fc31f;} #sub1_5 .cont3 ul li div > span { position: absolute; left: 40px; bottom: 40px; } #sub1_5 .cont3 ul li div p { position: absolute; left: 30px; bottom: 40px; } #sub1_5 .cont3 ul li div p span { display: block; margin-top: 6px; } /* sub1_6 */ #sub1_6 .cont1 .org strong, #sub1_6 .cont1 .org b, #sub1_6 .cont1 .org li { border:1px solid #666; border-radius: 100px; height: 54px; display:flex; align-items: center; justify-content: center; width: 160px; position: relative; } #sub1_6 .cont1 .org strong:nth-child(1) { margin:0 auto; } #sub1_6 .cont1 .org strong:nth-child(1):before { content:""; position: absolute; left: 50%; top: 53px; height: 184px; border-left:1px solid #666; } #sub1_6 .cont1 .org strong:nth-child(2) { margin-top: 50px; margin-left: calc(50% + 130px); } #sub1_6 .cont1 .org strong:nth-child(2):before { content:""; position: absolute; left:-130px; top: 25px; width: 130px; border-top:1px solid #666; } #sub1_6 .cont1 .org b:nth-child(3) { margin-top: -54px; margin-left: calc(50% - 290px); } #sub1_6 .cont1 .org b:nth-child(3):before { content:""; position: absolute; right:-132px; top: 25px; width: 132px; border-top:1px solid #666; } #sub1_6 .cont1 .org ul { margin-top: 80px; padding-top: 40px; position: relative; } #sub1_6 .cont1 .org ul:before { content:""; position: absolute; left: 80px; width: calc(100% - 159px); top: 0; border-top:1px solid #666; } #sub1_6 .cont1 .org ul li { cursor: pointer; } #sub1_6 .cont1 .org ul li:before { content:""; position: absolute; left: 50%; top:-40px; border-left:1px solid #666; height: 40px; } #sub1_6 .cont1 .org ul li.cb { border-color:#24408f;} #sub1_6 .cont2 { background: #f0f0f0; height: 160px; padding:40px; box-sizing: border-box; } #sub1_6 .cont2 article, #sub1_6 .cont2 span { width:calc(50% - 20px); } #sub1_6 .cont3 ul li { border:1px solid #666; border-radius: 100px; height: 54px; display:inline-flex; align-items: center; justify-content: center; width: 160px; position: relative; margin-right: 20px; cursor: pointer; } #sub1_6 .cont3 ul li.cb { border-color:#24408f;} #sub1_6 .cont3 > div { border-top:2px solid #000; border-bottom:1px solid #000; display: none; } #sub1_6 .cont3 > div.on { display:flex; } #sub1_6 .cont3 > div article { width: 680px; } #sub1_6 .cont3 > div article strong { display: block; } #sub1_6 .cont3 > div iframe { border-radius: 30px; } /* sub2_1 */ .sm2 ul li br { display: none; } .pt .cont1 p { line-height:2; } .pt .cont1 div a { margin:0 8px; border:3px solid #ddd; transition:0.3s; border-radius: 30px; overflow: hidden; position: relative; } .pt .cont1 div a:hover { border-color: #000; } .pt .cont1 div a:first-child { margin-left: 0; } .pt .cont1 div a:last-child { margin-right: 0; } .pt .cont1 div a img { width: 100%; } .pt .cont1 div a dl { position: absolute; left: 0; bottom: 60px; width: 100%; } .n_bns nav { width: 280px; position: sticky; top: 120px; z-index: 9; float: left; } .n_bns nav h3 { font:22px/50px sth; border-bottom:2px solid #24408f; color:#24408f; cursor: pointer; } .n_bns nav h3.on + ul { display: block; } .n_bns nav h3 + ul { display: none;} .n_bns nav h3 i { font-size:18px; font-weight: 900; } .n_bns nav h3.on i { transform: rotate(-90deg); } .n_bns nav h4 { font:18px/40px steb; color:#24408f; border-top:1px solid #24408f; } .n_bns nav .subMenu { font:18px/40px steb; border-top:1px solid #ddd; border-bottom:1px solid #24408f; } .n_bns nav .subMenu li a { display:flex; align-items: center; justify-content: space-between;} .n_bns nav .subMenu li a:after { content:"\e93e"; font-family: 'xeicon'; font-size:14px; opacity: 0; font-weight: 900; } .n_bns nav .subMenu li.on a:after { opacity: 1; } .n_bns .cont { float: right; width: 1040px; } .n_bns .cont:before { content:""; display: block; height: 50px; border-bottom:3px solid #24408f; box-sizing: content-box; } .n_bns .pic h2 {padding-bottom: 30px;} .n_bns .spc h2 { border-bottom:3px solid #000; } .n_bns .spc ul { flex-wrap: wrap; } .n_bns .spc ul li { padding-bottom: 0; width:calc(100% / 2); } .n_bns .spc ul .spc_2{padding-left: 40px;} .n_bns .spc ul li img { width: 100%; } .n_bns .spc2 ul li img { width: 70%; } .n_bns .spc ul li dd { margin-top: 10px; } .n_bns .spc3 ul li img { aspect-ratio: 700 / 140; width: 100%; } .n_bns .spc_4 h2 { border-bottom:3px solid #000; } .n_bns .spc_4 ul { flex-wrap: wrap; } .n_bns .spc_4 ul li dd { margin-top: 10px; } .n_bns .app_img { width: 100%; } /* 원형 이미지 */ .n_bns .app_spc .app_img li { display: flex; justify-content: center;} .n_bns .app_spc .app_img li img { width: 260px !important; height: 260px !important; aspect-ratio: auto !important; border-radius: 50%; object-fit: cover;} .n_bns .app_info { width: 100%;} .n_bns .app_info .spc_4 { width: 50%; padding-left: 0; } .n_bns .app_spc dd { margin-top: 10px; line-height: 1.6;} .app_spc .app_box { background: #f5f5f5; padding: 30px 35px; width: 100%;} .app_spc .app_box dt { margin-bottom: 15px;} .app_spc .app_box dd { margin-top: 8px; line-height: 1.7;} .n_bns .blue { color: #24408f; } .n_bns .note { font-size: 14px; color: #666; } .app_spc .app_info { align-items: stretch;} .n_bns .app_spc .app_info .spc_4:first-child { padding-right: 10px;} .n_bns .app_spc .app_info .spc_4:last-child { padding-left: 10px;} .n_bns .type_1 h2 { border-bottom:3px solid #000; } .n_bns .type_1 ul { flex-wrap: wrap; } .n_bns .type_1 img { width: 100%; } .n_bns .type_1 ul > .type_font { width:calc(100% / 2); } .n_bns .type_1 dd { display: flex; align-items: flex-start; gap: 30px;} .n_bns .type_3 h2 { border-bottom:3px solid #000; } .n_bns .type_3 h3 {text-align: center; } .n_bns .type_3 ul { flex-wrap: wrap; border-bottom:2px solid #000; padding-bottom: 50px;} .n_bns .type_3 img { width: 100%; } .n_bns .type_3 ul > .type_font { width:calc(100% / 2); } .n_bns .type_3 dd { align-items: flex-start; gap: 30px; justify-content: space-around;} .n_bns .type_3 ul li dl{text-align: center; } .n_bns .type { display: flex; justify-content: center;} .n_bns .type article.right { display: flex; gap: 80px; align-items: flex-start; max-width: 1040px; width: 100%; margin: 0 auto;} .n_bns .type article.right .click { flex: 1;} .n_bns .type .right .color ul li { width: 74px; height: 74px; margin: 0 27px 10px 0; float:left; border-radius: 78px; box-sizing:border-box; padding-top: 4px; } .n_bns .type .right .color .cl > div { float:left; margin-right: 27px; } .n_bns .type .right .color .cl > div:nth-of-type(2n) { margin-right: 0; } .n_bns .type .right .color ul li:last-child { margin-right: 0; } .n_bns .type .right .color ul li.gr { background: #087400; } .n_bns .type .right .color ul li.bl { background: #24408f; color:#fff;} .n_bns .type .right .color ul li.wt { background: #ffffff; color:#000; border:1px solid #000; } .n_bns .type .right .color ul li.pn { background: #f855b5; } .n_bns .type .right .color ul li.yl { background: #fbcf00; } .n_bns .type .right .color ul li.or { background: #ff8400; } .n_bns .type .right .color ul li.rd { background: #fa0000; } .n_bns .type .right .color ul li.mt { background: #afcdcb; } .n_bns .type .right .color ul li.bk { background: #000; } .n_bns .type .right .color .cl > div p { margin-top: 20px; text-align: center; border:1px solid #000; border-top:none; padding-bottom: 10px; } .n_bns .type .right .color .clear { clear: both; display: block; } .n_bns .type .right .size table { width: 100%; border-collapse: collapse; text-align: left; border-bottom:1px solid #000; } .n_bns .type .right .size table th, .n_bns .type .right .size table td { border-left:1px solid #000; padding:5px 0 0 14px; } .n_bns .type .right .size table th:first-child, .n_bns .type .right .size table td:first-child { border-left:none; padding-left: 0; font: 16px;} .n_bns .type .right .size_2 table td { font:16px/1.4 stm;} .n_bns .type .right .size table th { border-top:1px solid #000; border-bottom:1px solid #000; width: 150px; } .n_bns .type .right .size table th:first-child { width:auto; } .n_bns .type .right .size table tr:last-child td { padding-bottom: 5px; } .n_bns .type .right .size figure { border-top:2px solid #000;} .n_bns .type .right .size figure img {width:100%;} .size .drag { overflow-x: auto; width: 480px; } .size .drag:after { content:"* 표를 드래그하여 확인하세요."; display: block; margin-top: 10px; font-size:14px; color:#036eb8; } .n_bns .type .right .size .drag table { width: 780px; } .n_bns .type .right .size .drag table th { width:auto; } /* Size가 전체 폭 차지 */ .n_bns .type .click.size.full { width: 100%;} /* Size 아래 border를 끝까지 */ .n_bns .type .click.size.full h2 { border-bottom: 2px solid #000;} /* 아코디언 */ .n_bns .type .click .box { display: none; padding-top: 20px;} /* 좌우 컬럼 */ .n_bns .type .size_cols { display: flex; gap: 80px;} .n_bns .type .size_cols .col { flex: 1;} .yt-wrap { position: relative; overflow: hidden;} .yt-cover { position: absolute; inset: 0; background: #000; /* 또는 첫 프레임 이미지 */ opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 2;} .yt-wrap.is-ending .yt-cover { opacity: 1;} /*type 예전꺼*/ .n_bns .type .left ul { border-top:2px solid #000; } .n_bns .type .left ul li { border-bottom:1px solid #000; padding-top: 30px; padding-bottom: 40px; } .n_bns .type .left ul li:last-child { border-bottom:none; } .n_bns .type .left ul li p { line-height: 2; word-break: keep-all; } .n_bns .type .left ul li img { vertical-align: top; object-fit: cover; } .n_bns .type .typeSpc { padding-left: 360px; border-top:3px solid #000; position: relative; } .n_bns .type .typeSpc h2 { position: absolute; left: 0; top: 20px; } .n_bns .type .typeSpc ul li { border-bottom:1px solid #000; padding-bottom: 60px; padding-top: 20px; } .n_bns .type .typeSpc ul li p { margin-top: 20px; } .bns .type_2 .left ul li img { aspect-ratio: 680 / 380; width: 100%; } .bns .type_2 .left ul.icon li img { aspect-ratio:auto; width:auto; } .bns .type_2 .left ul li dd { line-height:2; margin-top: 10px;} .bns .type .left ul.icon li { padding:30px 0 30px 200px; position: relative; height: 250px;} .bns .type .left .icon figure { width: 140px; height: 140px; border-radius: 140px; position: absolute; left: 0; top: 30px; border:1px solid #24408f; } .n_bns .type .right .click h2 { position: relative; cursor: pointer; border-bottom:2px solid #000;} .n_bns .type .right .click h2 i { position: absolute; right: 0; top:50%; transform: translateY(-50%); } .n_bns .type .right .click .box { display: none; } .n_bns .type .right ul li a { width: auto; height: 50px; border:1px solid #24408f; border-radius: 50px; transition:0.3s; padding-left: 4px; box-sizing: border-box;} .n_bns .type .right ul li a i { margin-left: 10px; transition:0.3s; } .n_bns .type .right ul li:hover a { background: #24408f; color:#fff; } .n_bns .type .right ul li:hover a i { color:#fff; } /*type 예전꺼 여기까지*/ .n_bns .patch ul { border-top:3px solid #000; } .n_bns .patch ul li { border-bottom:1px solid #000; position: relative; padding-left: 180px; } .n_bns .patch ul li h3 { position: absolute; left: 0; top: 30px; } .n_bns .patch ul li div { padding-top: 30px; justify-content: start; border-bottom:1px solid #000; padding-bottom: 40px; } .n_bns .patch ul li div:last-child { border-bottom:none; } .n_bns .patch ul li div dl { width: 350px; } .n_bns .patch ul li div dl dd { line-height:1.8; margin-top: 10px; } .n_bns .odm h2 { border-bottom:3px solid #000; padding-bottom: 10px; } .n_bns .odm .circle { margin-top: 60px; } .n_bns .odm .circle li h3 { width: 170px; height: 170px; border-radius: 240px; border:2px solid #24408f; color:#24408f; box-sizing: border-box; position: relative; } .n_bns .odm .circle li h3 i { font-weight:900; position: absolute; left:calc(100% + 16px); } .n_bns .odm article { height: 56px; border-bottom:1px solid #ddd; display:flex; align-items: center; justify-content: start; } .n_bns .odm article:first-of-type { border-top:2px solid #666; margin-top: 40px; } .n_bns .odm article span { width: 210px; } .n_bns .odm article h4 { width: 300px; } .n_bns .purpose { padding-left: 350px; border-top:3px solid #000; position: relative; text-align: left; } .n_bns .purpose h2 { position: absolute; left: 0; top: 20px; } .n_bns .purpose ul li { border-bottom:1px solid #000; padding-bottom: 20px; padding-top: 20px; } .n_bns .purpose ul li p { margin-top: 20px; } .n_bns .pf { padding-left: 360px; border-top:3px solid #000; position: relative; text-align: left; } .n_bns .pf h2 { position: absolute; left: 0; top: 20px; } .n_bns .pf ul { flex-wrap: wrap; justify-content: start; } .n_bns .pf ul li { padding-top: 20px; margin-bottom: 20px; margin-right: 25px; } .n_bns .pf ul li:nth-child(3n) { margin-right: 0; } .n_bns .pf ul li p { margin-top: 20px; } .n_bns .pf ul li img { width: 210px; aspect-ratio: 1 / 1;} .n_bns .all a { width: 400px; height: 60px; display: flex; margin:120px auto 0; padding-top: 6px; box-sizing: border-box; border-radius: 60px;} .n_bns .all a i { margin-left: 20px; margin-top: -4px; } .bns .product-fullimg { width: 100%; overflow: hidden; margin-bottom: 0; padding-bottom: 0;} .bns .product-fullimg img { width: 100%; height: auto; display: block; object-fit: cover; } .n_bns .type .spc2 > ul > li { padding-top: 34px; padding-bottom: 40px; border-bottom:1px solid #ddd; padding-left: 540px;} .n_bns .type .spc2 > ul dl { position: absolute; left: 0; width: 370px; } .n_bns .type .spc2 > ul dd { margin-top: 10px;} .n_bns .type .spc2 > ul dl + img { width: 100%; } .n_bns .type .spc2 > ul ul li { justify-content: space-between; margin-bottom: 20px; } .n_bns .type .spc2 > ul ul li figure { border:1px solid #000; width: 100px; height: 100px; border-radius: 100px; } .n_bns .type .spc2 > ul ul li figure img { height: 70px; } .n_bns .type .spc2 > ul ul li div { width: 376px; } .n_bns .video_wrap { width: 1040px; height: 500px; margin: 0 auto; position: relative; margin-top: 100px; overflow: hidden; display:flex; align-items: end; justify-content: center; } .n_bns .video_wrap:after { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; } .n_bns .video_wrap iframe { width: 2400px; height: 117%; border: none;} /* sub2_4 */ #sub2_4 .cont2 img { width: 100%; } #sub2_4 .cont3 .bnsSlide { overflow: visible; } #sub2_4 .cont3 .bnsSlide:after { content:""; position: absolute; width: 100%; height: 100%; left: -100%; background: #fff; top: 0; z-index:1; } #sub2_4 .cont3 .swiper-slide { position: relative; } #sub2_4 .cont3 .swiper-slide img { aspect-ratio: 680 / 620; } #sub2_4 .cont3 .swiper-slide p { position: absolute; left: 40px; bottom: 50px; line-height:1.4; text-align: left; } #sub2_4 .cont4 figure { position: relative; } #sub2_4 .cont4 figure img { width: 100%; } #sub2_4 .cont4 figure figcaption { position: absolute; left: 40px; top: 40px; right: 40px; } #sub2_4 .cont4 figure.mt40 { margin-left: auto; margin-right: 0; } #sub2_4 .cont4 figure.mt40 figcaption { text-align: right; } #sub2_4 .cont5 ul li { width: 110px; box-sizing: border-box; border:1px solid #000; height: 320px; position: relative; } #sub2_4 .cont5 ul li.act { border-width:2px; width: 520px; transition: 0.3s; } #sub2_4 .cont5 ul li strong { position: absolute; left: 38px; top: 30px; } #sub2_4 .cont5 ul li dl { position: absolute; left: 38px; bottom: 60px; opacity: 0; } #sub2_4 .cont5 ul li.act dl { opacity: 1; transition:0.5s 0.3s; white-space: nowrap; } #sub2_4 .cont6 ul li { overflow: hidden; position: relative; height: 180px; border-radius: 20px; background: #000; } #sub2_4 .cont6 ul li img { width: 100%; height: 100%; opacity: 0.5; transition:0.3s; } #sub2_4 .cont6 ul li a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; justify-content: start; padding-left: 50px; box-sizing: border-box; padding-top: 10px; opacity: 0.5; transition:0.3s; } #sub2_4 .cont6 ul li.on img { opacity: 0.8; } #sub2_4 .cont6 ul li.on a { opacity: 1; } #sub2_4 .cont6 > a { width: 460px; height: 60px; display: flex; margin:60px auto 0; padding-top: 10px; box-sizing: border-box; border-radius: 60px; } /* 제품검색 게시판 */ #sub2_4 .cont #bo_gall .gall_text_href a { font:30px steb; text-align: center; } #sub2_4 .cont #bo_gall .gall_li { width: calc((100% - 40px) / 2); margin-right: 40px; } #sub2_4 .cont #bo_gall .gall_li:nth-child(2n) { margin-right: 0; } #sub2_4 .cont #bo_gall .gall_li:nth-child(2n+1) { clear: both; } #sub2_4 .cont #bo_gall .gall_img img, #sub2_5 .cont2 #bo_gall .gall_img video { aspect-ratio: 5 / 3; } #bo_gall .gall_img a { position: relative; } #bo_gall .gall_img a:before { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #24408f; opacity: 0; transition:0.3s; } #bo_gall .gall_img a:hover:before { opacity: 0.3; } /* 플랜트 */ #sub2_5.plant .cont2 #bo_gall .gall_li { width: 680px; } #sub2_5.plant .cont2 #bo_gall .gall_li:nth-child(2n) { margin-right: 0; } #sub2_5.plant .cont2 #bo_gall .gall_li:nth-child(2n+1) { clear: both; } #sub2_5.plant .cont2 #bo_gall .gall_img img, #sub2_5.plant .cont2 #bo_gall .gall_img video { aspect-ratio: 680 / 320; } /* sub3_1 */ #sub3_1 .cont1 { line-height:1.8; } #sub3_1 .cont2 { position: relative; } #sub3_1 .cont2 img { width: 100%; } #sub3_1 .cont2 p { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; line-height: 1.8; } #sub3_1 .cont3 article { height: 100px; border-bottom:3px solid #000; } #sub3_1 .cont3 article h2 { width: 680px; float:left; } #sub3_1 .cont3 article p { width: 680px; float:right; } #sub3_1 .cont3 figure{width:100%; height:auto; padding-top: 50px; float:right; } #sub3_1 .cont3 img { width: 100%;} #sub3_1 .cont4 article { height: 100px; border-bottom:3px solid #000; } #sub3_1 .cont4 article h2 { width: 680px; float:left; } #sub3_1 .cont4 article p { width: 680px; float:right; } #sub3_1 .cont4 figure{width:100%; height:auto; padding-top: 50px; float:right; } #sub3_1 .cont4 img { width: 100%;} #sub3_1 .cont5 .gifSlide { overflow: visible;} #sub3_1 .cont5 .gifSlide .swiper-slide { display:block; width:auto;} #sub3_1 .cont5 .gifSlide .swiper-slide iframe { width:700px; height:auto; aspect-ratio: 16 / 9; } /* sub3_2 */ #sub3_2 .cont1 ul li { width: 190px; height: 190px; border:1px solid #333; border-radius: 200px; position: relative; } #sub3_2 .cont1 ul li:before { content:"\e93e"; font-family: 'xeicon'; font-size:24px; position: absolute; left: 108%; top:50%; transform: translateY(-50%); } #sub3_2 .cont1 ul li:last-child:before { display: none; } #sub3_2 .cont1 ul li p { margin-top: 6px; } #sub3_2 .cont2 ul li { margin-bottom: 40px; } #sub3_2 .cont2 ul li:nth-child(2n+1) { flex-direction: row-reverse; } #sub3_2 .cont2 ul li figure { display:flex; align-items: center; justify-content: center; overflow: hidden; width: 700px; aspect-ratio: 16 / 9; position: relative; } #sub3_2 .cont2 ul li figure:after { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #sub3_2 .cont2 ul li iframe { width: 2000px; height:137%; } #sub3_2 .cont2 ul li div { width: 700px; box-sizing: border-box; } #sub3_2 .cont2 ul li:nth-child(2n+1) div { padding-left: 360px; } #sub3_2 .cont2 ul li:nth-child(2n) div { padding-left: 20px; } /* sub4_1 */ .bbs > h2.f32.gsb { margin-bottom: 40px; } .bbs .tbl_head01 table, .bbs .tbl_head01 th, .bbs .tbl_head01 td, .bbs #bo_list .td_chk { border-color:#000; } .bbs .tbl_head01 td, .bbs .tbl_head01 td a { color:#000; } #bo_list .td_datetime { min-width:100px; } /* sub4_2 */ #sub4_2 .cont1 div.mt80 ul, #sub4_2 .cont1 div.mt80 div { width: 680px; border-top:1px solid #000; } #sub4_2 .cont1 div.mt80 ul li { border-bottom:1px solid #000; box-sizing: border-box; display:flex; align-items: center; justify-content: start; padding:20px 0;} #sub4_2 .cont1 div.mt80 div { border-bottom:1px solid #000; height: 406px; box-sizing: border-box; padding:20px 0; display:flex; align-items: start; justify-content: start;} #sub4_2 .cont1 div.mt80 div label { line-height:40px; } #sub4_2 .cont1 div.mt80 div textarea { height: 360px; resize: none; } #sub4_2 .cont1 div.mt80 label { width: 210px; font:20px stb; padding-left: 20px; box-sizing: border-box; } #sub4_2 .cont1 div.mt80 input, #sub4_2 .cont1 div.mt80 textarea, #sub4_2 .cont1 div.mt80 select { width: calc(100% - 160px); border:none; height: 40px; font:20px stm; } #sub4_2 .cont1 div.mt80 input[type="file"] { padding-top: 4px; box-sizing: border-box; } #sub4_2 .cont1 div.mt80 + input { width: 300px; height: 60px; border-radius: 60px; display: block; margin:100px auto 0; border:none; cursor: pointer; } #category { position: static; display: block; box-shadow: none; } #agreement { -webkit-appearance:auto; } /* sub4_3 */ #sub4_3 .xi-download { font-size:28px; color:#24408f; padding:0 20px; } #sub4_3 #bo_cate li { margin-right: 10px; } #sub4_3 #bo_cate li a { font-size:18px; border-color:#333; color:#000; width: 160px; line-height: 54px; text-align: center; padding:0; font-family: steb; } #sub4_3 #bo_cate li a:hover { background: none; } #sub4_3 #bo_cate #bo_cate_on { background: #24408f; border-color:#24408f; box-shadow: none; color:#fff; font-weight: normal; } /* sub5_1 */ #sub5_1 .cont1 em { font-style: normal; } #sub5_1 .cont2 ul li { width: 450px; height: 480px; box-sizing: border-box; border:1px solid #000; position: relative; padding:40px; transition:0.3s; cursor: pointer; } #sub5_1 .cont2 ul li figure { height: 85px; display: inline-flex; } #sub5_1 .cont2 ul li figure img { transition: 0.3s; } #sub5_1 .cont2 ul li.cb figure img { filter: invert(1); } #sub5_1 .cont2 ul li article { position: absolute; left: 40px; bottom: 40px; } #sub5_1 .cont2 ul li article a { display: inline-block; } #sub5_1 .cont2 ul li article a i { position: relative; top: 1px; } #sub5_1 .cont3 > div { display: none; align-items: start; justify-content: space-between; } #sub5_1 .cont3 > div.on { display: flex; } #sub5_1 .cont3 article { width: 680px; } #sub5_1 .cont3 article h2 { border-bottom:2px solid #000; margin-bottom: 30px; } #sub5_1 .cont3 article ul li, #sub5_1 .cont3 article p { line-height:2; } #sub5_1 .cont3 article ul.num li { position: relative; padding-left: 24px; } #sub5_1 .cont3 article ul.num li span { position: absolute; left: 0; } /* sub5_2 */ #sub5_2 .cont2 img { width: 100%; height: 570px; } #sub5_2 .cont3 .cl { border-top:2px solid #000; } #sub5_2 .cont3 .cl:last-child { border-bottom:2px solid #000;} #sub5_2 .cont3 .cl .right { width: 680px; } #sub5_2 .cont3 .cl .right.ovh { height: 440px; overflow: auto; } #sub5_2 .cont3 .cl .right.ovh::-webkit-scrollbar{ width:4px;} #sub5_2 .cont3 .cl .right.ovh::-webkit-scrollbar-track {background-color:#ddd;} #sub5_2 .cont3 .cl .right.ovh::-webkit-scrollbar-thumb {background-color:#24408f; } #sub5_2 .cont3 .cl strong { display: block; margin-top: 40px; font-family: steb; } #sub5_2 .cont3 .cl strong:first-child { margin-top: 0; } /* sub5_3 */ #sub5_3 .cont2 { position: relative; } #sub5_3 .cont2 img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #sub5_3 .cont2 .wrap { z-index: 1; } #sub5_3 .cont2 .wrap .wh { width: 680px; margin-left: auto; } #sub5_3 .cont2 .wrap .wh span { display: block; } #sub5_3 .cont3 div.mt80 ul, #sub5_3 .cont3 div.mt80 div { width: 680px; border-top:1px solid #000; } #sub5_3 .cont3 div.mt80 ul li { border-bottom:1px solid #000; box-sizing: border-box; display:flex; align-items: center; justify-content: start; padding:20px 0;} #sub5_3 .cont3 div.mt80 div { border-bottom:1px solid #000; height: 406px; box-sizing: border-box; padding:20px 0; display:flex; align-items: start; justify-content: start;} #sub5_3 .cont3 div.mt80 div label { line-height:40px; } #sub5_3 .cont3 div.mt80 div textarea { height: 360px; resize: none; } #sub5_3 .cont3 div.mt80 label { width: 250px; font:20px stb; padding-left: 20px; box-sizing: border-box; } #sub5_3 .cont3 div.mt80 input, #sub5_3 .cont3 div.mt80 textarea, #sub5_3 .cont3 div.mt80 select { width: calc(100% - 160px); border:none; height: 40px; font:20px stm; } #sub5_3 .cont3 div.mt80 select { display: block; position: static; box-shadow: none;} #sub5_3 .cont3 div.mt80 input[type="file"] { padding-top: 4px; box-sizing: border-box; } #sub5_3 .cont3 #w_info { margin-top: 70px; border:1px solid #000; width: 100%; padding:30px; box-sizing: border-box; font:18px stm; height: 200px; } #sub5_3 .cont3 input[type="submit"] { width: 300px; height: 60px; border-radius: 60px; display: block; margin:100px auto 0; border:none; cursor: pointer; } /* sub5_4 */ #sub5_4 .all a { width: 500px; height: 60px; display: flex; margin:120px auto 0; padding-top: 6px; box-sizing: border-box; border-radius: 60px;} #sub5_4 .all a i { margin-left: 20px; margin-top: -4px; font-size:28px;} #sub5_4 .cont2 .cl { border-top:2px solid #000; } #sub5_4 .cont2 .cl:last-child { border-bottom:2px solid #000;} #sub5_4 .cont2 .cl .right { width: 680px; } #sub5_4 .cont2 .cl .right.ovh { height: 440px; overflow: auto; } #sub5_4 .cont2 .cl .right.ovh::-webkit-scrollbar{ width:4px;} #sub5_4 .cont2 .cl .right.ovh::-webkit-scrollbar-track {background-color:#ddd;} #sub5_4 .cont2 .cl .right.ovh::-webkit-scrollbar-thumb {background-color:#24408f; } #sub5_4 .cont2 .cl strong { display: block; margin-top: 40px; font-family: steb; } #sub5_4 .cont2 .cl strong:first-child { margin-top: 0; } /* sub6_2 */ #sub6_2 .cont2 img { width: 100%; } #sub6_2 .cont3 { border-top:2px solid #000;} .both .left, .both .right { width: 680px; } #sub6_2 .cont4 { border-top:1px solid #000;} #sub6_2 .cont4 ul li { position: relative; width: 190px; height: 190px; border:1px solid #24408f; border-radius: 200px; } #sub6_2 .cont4 ul li:before { content:"\e93e"; font-family: 'xeicon'; font-size:24px; position: absolute; left: 125%; top:50%; transform: translateY(-50%); } #sub6_2 .cont4 ul li:last-child:before { display: none; } #sub6_2 .cont4 ul li strong { position: absolute; left: 0; top: 0; } #sub6_2 .cont4 ul li figure { height: 70px; } #sub6_2 .cont5 ul { border-top:1px solid #000; } #sub6_2 .cont5 ul li { border-bottom:1px solid #000; box-sizing: border-box; min-height: 270px; padding-left: 40px; position: relative; } #sub6_2 .cont5 ul li strong { position: absolute; left: 0; } #sub6_2 .cont5 ul li p { margin-top: 20px; } #sub6_2 .cont5 ul:last-child li:last-child { height:540px;} /* sub6_3 */ #sub6_3 .cont2 img { width: 100%; } #sub6_3 .cont3 ul li { width: 380px; height: 380px; border:2px solid #24408f; box-sizing: border-box; border-radius: 400px; text-align: center; } #sub6_3 .cont4 ul { border-top:2px solid #000; } #sub6_3 .cont4 ul li { margin-bottom: 50px; } #sub6_3 .cont5 ul { border-top:2px solid #000; } #sub6_3 .cont5 ul li { border-bottom:1px solid #000; box-sizing: border-box; padding-top: 30px; line-height:2; position: relative; } #sub6_3 .cont5 ul:last-child li { height: 400px; } #sub6_3 .cont5 ul:first-child li:first-child { height: 160px; } #sub6_3 .cont5 ul:first-child li:last-child { height: 240px; } #sub6_3 .cont5 ul li figure { width: 100px; height: 100px; position: absolute; right: 0; top: 15px; } /* sub6_4 */ #sub6_4 .cont1 div.mt80 ul, #sub6_4 .cont1 div.mt80 div { width: 680px; border-top:1px solid #000; } #sub6_4 .cont1 div.mt80 ul li { border-bottom:1px solid #000; box-sizing: border-box; display:flex; align-items: center; justify-content: start; padding:20px 0;} #sub6_4 .cont1 div.mt80 div { border-bottom:1px solid #000; height: 243px; box-sizing: border-box; padding:20px 0; display:flex; align-items: start; justify-content: start;} #sub6_4 .cont1 div.mt80 div label { line-height:40px; } #sub6_4 .cont1 div.mt80 div textarea { height: 200px; resize: none; } #sub6_4 .cont1 div.mt80 label { width: 140px; font:20px stb; padding-left: 20px; box-sizing: border-box; } #sub6_4 .cont1 div.mt80 input, #sub6_4 .cont1 div.mt80 textarea, #sub6_4 .cont1 div.mt80 select { width: calc(100% - 160px); border:none; height: 40px; font:20px stm; } #sub6_4 .cont1 div.mt80 input[type="file"] { padding-top: 4px; box-sizing: border-box; } #sub6_4 .cont1 div.mt80 + input { width: 300px; height: 60px; border-radius: 60px; display: block; margin:100px auto 0; border:none; cursor: pointer; } /* shop */ /* .blank { height: 100px; } */