@charset "utf-8";/* CSS Document */ body { font-size:16px } .box0 { width:1680px; max-width:94%; margin:0 auto } .box1 { width:1200px; margin:0 auto } .main .box1, #footer .box1 { width:1300px; margin:0 auto; position:relative } .box2 { width:1200px; margin:0 auto } .PC { display:block !important } .PHONE { display:none !important } .page_con { padding: 3em 0 6em 0; } .page_con.conP2 { padding: 0em 0 3em 0; } @keyframes circleAni {0% { opacity:.7 } 100% { opacity:0; transform:scale(1.8,1.8) } } .downAni { animation-name: downAni; animation-duration: 4s; animation-iteration-count: infinite } @keyframes downAni {30% { bottom:1em } 70% { bottom:2em } } /*main_v*/ .mainCsBtn { position: fixed; bottom:12em; right:2em; width:4.2em; height:4.2em; line-height:4.2em; z-index:999; animation:.55s ease !important; -webkit-animation:gitple-launcher-appear .55s ease !important; transition:all 0.12s;animation-duration:.75s; -webkit-animation-duration:.75s; animation-name:bounceInUp; animation-fill-mode:both } .mainCsBtn .in { position:absolute; width:100%; height:100%; background:var(--siteC);; left:0; top:0; border-radius:100%; text-align:center; color:#fff; box-shadow:2px 1px 5px rgba(0,0,0,0.2); } .mainCsBtn .in .tt { display:block; line-height:1; font-size:1.250em; margin-top:12px } .mainCsBtn .in .ts { display:block; font-size:.570em; color:#fff; padding-top:3px; font-weight:400; margin-top: .25em; } .mainCsBtn2 { position: fixed; bottom:17em; right:28px; width:4.5em; height:4.5em; line-height:4.5em; z-index:999; animation:.55s ease !important; -webkit-animation:gitple-launcher-appear .55s ease !important; transition:all 0.12s;animation-duration:.75s; -webkit-animation-duration:.75s; animation-name:bounceInUp; animation-fill-mode:both } .mainCsBtn2 .in { position:absolute; width:100%; height:100%; background:var(--siteC);; left:0; top:0; border-radius:100%; text-align:center; color:#fff; box-shadow:2px 1px 5px rgba(0,0,0,0.2); } .mainCsBtn2 .in .tt { display:block; line-height:1; font-size:1.250em; margin-top:12px } .mainCsBtn2 .in .ts { display:block; font-size:.570em; color:#fff; padding-top:3px; font-weight:400; margin-top: .25em; } /*퀵메뉴*/ #quick { position:fixed; z-index:999; top:75%; right:2vw; transform:translateY(-50%); display:none; } #quick .quick_wrap { display: flex; flex-direction: column; align-items: flex-end; } #quick .quick_wrap:before { /*content:""; position:absolute; top:2em; left:0; bottom:0; width:100%; background:#fff; */ } #quick .quick_wrap > li { position:relative; margin-bottom: .8em; position:relative; display: flex; align-items: center; justify-content: center; width: 3em; height: 3em; min-width: 3em; min-height: 3em; border-radius: 6em; box-shadow:0 .375em .75em rgba(27,60,111,.1); transition: .15s; text-align:center; background: #fdfdfd; } #quick .quick_wrap > li .in { position: relative; align-items: center; } #quick .quick_wrap > li.link { background: var(--siteC); color: #fff; } #quick .quick_wrap > li.naver { background: var(--snsNv); color: #fff; } #quick .quick_wrap > li.yotube { background: var(--snsYt); color: #fff; } #quick .quick_wrap > li:hover { box-shadow: 3px 0 9px rgba(0,0,0, .25); transform: scale(1.05); } /*main_sns*/ .circleAni { position:absolute; width:100%; height:100%; border:1px solid #999; left:-1px; top:-1px; opacity:0; border-radius:100%; animation-duration: 3s; animation-iteration-count: infinite } .circleAni.c1 { animation-name: circleAni } .circleAni.c2 { animation-name: circleAni; animation-delay: 1s } .circleAni.c3 { animation-name: circleAni; animation-delay: 2s } #header { position:fixed; left:0; top:0; width:100%; z-index:1000; } #header:before { content:""; position:absolute; left:0; bottom:0; width:100%; height:100%; background:#fff; opacity:0 } #header .top_wrap { transition:.3s } #header .logo { position:relative; height:100%; box-sizing:border-box; z-index:300; } #header .logo > a { display:block; position:relative; background-image:url(../images/inc/logo.svg); background-repeat:no-repeat; background-position:left center; background-size:contain; width:12.5em; height:80%; top:10%; filter: var(--crWhitefil); } #header .logo > a img { max-height:100% } #header .gnb_wrap { position:absolute; left:0; top:0; width:100%; text-align:center } #header .gnb_wrap .gnbBg { position:absolute; left:0; width:100%; background-color:#fff; display:none; border-bottom:1px solid #ddd; border-top:1px solid #f5f5f5 } #header:not(.pOpen) .gnb_wrap .gnbBg { height: 60px !important; } #header .gnb_wrap .gnb { position:relative } #header .gnb_wrap .gnb > li .dp1:after { content:""; position:absolute; left:50%; bottom:0; width:3em; height:2px; margin-left:-1.5em; background:#fff; transform:scale(0); transition:.3s } #header .gnb_wrap .gnb > li:hover .dp1:after, #header .gnb_wrap .gnb > li.on .dp1:after { transform:scale(1) } #header .gnb_wrap { text-align:center; } #header .gnb_wrap .dp1, #header .gnb_wrap .dp2 * { transition:.3s; } #header .gnb_wrap .gnb .dp2, #header .gnb_wrap .gnb .m_guide { display:none; } #header .gnb_wrap .gnb { display:inline-block; *display:inline; zoom:1; } #header .gnb_wrap .gnb:after { content:""; display:block; clear:both; } #header .gnb_wrap .gnb > li { float:left; /*position:relative; */ } #header .gnb_wrap .gnb > li .dp1 { display:block; color: #fff; padding:0 2.2em; height:80px; line-height:80px; letter-spacing:-1px; font-size:1.188em; font-weight: 400; } #header .gnb_wrap .gnb > li:hover .dp1, #header .gnb_wrap .gnb > li.on .dp1 { color:#fff; } #header .head_bg { position:absolute; /*z-index:1000001; */ width:100%; top:100%; left:0; right:0; background:#1f2f48; display:none; } /* #header .gnb_wrap .gnb:hover {} */ #header .gnb_wrap .gnb .dp2 { position:absolute; width:1100px; top:100%; left:50%; margin-left:-550px; text-align:center; font-size:0; height:auto !important } #header .gnb_wrap .gnb .dp2 > li { display:inline-block; *display:inline; zoom:1; vertical-align:top; } #header .gnb_wrap .gnb .dp2 > li > a { display:block; padding:0 20px; line-height:60px; height:60px; text-align:center; border-right:1px solid rgba(255,255,255,.1); font-size:.938rem; color:#777; letter-spacing:-0.5px; } #header .gnb_wrap .gnb .dp2 > li:first-child > a { border-left:1px solid rgba(255,255,255,.1); } #header .gnb_wrap .gnb .dp2 > li:hover > a { color:#111; } #header .gnb_wrap .gnb > li { position:relative; } #header .gnb_wrap .gnb > li.m_company .dp2, #header .gnb_wrap .gnb > li.m_business .dp2, #header .gnb_wrap .gnb > li.m_products .dp2 { left:25px; margin-left:0; text-align:left; } #header .gnb_wrap .gnb > li.m_customer .dp2, #header .gnb_wrap .gnb > li.m_recruitment .dp2 { right:25px; margin-right:0px; text-align:right; left:auto; } #header .gnb_wrap .gnb > li.m_rnd .dp2 { left:220px; } #header .gnb_wrap .gnb > li.m_brand .dp2 { left:220px } #header .gnb_wrap .gnb > li.m_products .dp2 > li > a { text-align: left; height: auto; line-height: normal; font-size: 1.05em; font-weight: 500; color: #111; } #header .gnb_wrap .gnb > li.m_products .dp2 > li > a > span { margin-top: 1em; margin-bottom: .5em; } #header .gnb_wrap .gnb .dp2 > li > a > .head_img { width: 16em; height: 10em; overflow: hidden; } #header .gnb_wrap .gnb .dp2 > li > a > .head_img > img { width: 100%; height: 100%; object-fit: cover; transition: .3s; } #header .gnb_wrap .gnb .dp2 > li > a:hover > .head_img > img { transform: scale(1.05); } #header .gnb_wrap .gnb .dp3 > li > a { padding: 0 20px; box-sizing: border-box; height: auto !important; } #header .gnb_wrap .gnb .dp3 > li { margin-bottom: .35em; } #header .gnb_wrap .gnb .dp3 > li:last-of-type { margin-bottom: 0em; } #header .gnb_wrap .gnb .dp3 { position:relative; top: 10px; display: flex; flex-direction: column; align-items: start; display:none} #header .gnb_wrap .gnb .dp3 > li > a > span { color: #777; font-size: .938rem; transition: .2s; } #header .gnb_wrap .gnb .dp3 > li > a:hover > span { color: #111; } #header .gnb_wrap .gnb > li.m_service .dp3 { display: none; } #header .etc_wrap .lang { margin-right:.5em; position:relative } #header .etc_wrap .lang .lang_btn { display:block; position:relative; padding:0 3em; width:3em; line-height:3em; /*border:1px solid #fff; */color:#fff; font-size:.813em } #header .etc_wrap .cnt { position:relative; border-right:1px solid rgba(255,255,255,.5) } #header .etc_wrap .cnt .contact_btn .icon { position:absolute; left:1em; top:50%; margin-top:-.6em; } #header .etc_wrap .cnt .contact_btn { display:block; padding:0 2em 0 3em; width:3em; font-size:.938em; color:#fff; } #header .etc_wrap .lang .lang_btn .icon { position:absolute; left:1em; top:50%; margin-top:-.5em } #header .etc_wrap .lang .lang_btn .xi { line-height:1 } #header .etc_wrap .lang .lang_btn .arrow { position:absolute; right:1em; top:50%; margin-top:-.5em; width:1em; text-align:center; transition:.3s } #header .etc_wrap .lang .list { position:absolute; left:0; width:100%; visibility:hidden; opacity:0; transition:.3s } #header .etc_wrap .lang .list .lang_btn { border-color: transparent; border-bottom:1px solid rgba(255,255,255,.1); background:rgba(0,0,0,.7); color:#fff; transition:.3s } #header .etc_wrap .lang .list .lang_btn:hover { background:#666; color:#fff !important } #header .etc_wrap .lang .list .lang_btn:hover .arrow { right:.5em } #header .etc_wrap .lang.on .list { visibility:visible; opacity:1 } #header .etc_wrap .lang:hover > .lang_btn, #header .etc_wrap .lang.on > .lang_btn { background:#fff; color:#666 } #header .top_wrap .side_wrap { color:#fff; } #header .top_wrap .side_wrap .langWrap { position:relative; letter-spacing:0; } #header .top_wrap .side_wrap .langWrap .btn_lang .btn_in { height:2.5em; padding:0 .25em; } #header .top_wrap .side_wrap .langWrap .btn_lang .tt { padding:0 1em 0 .25em; } #header .top_wrap .side_wrap .langWrap .btn_lang .icon { font-size:1em; } #header .top_wrap .side_wrap .langWrap .btn_lang .arrow { font-size:1em; } #header .top_wrap .side_wrap .langWrap .btn_lang .arrow:before { display:block; transition:.3s; } #header .top_wrap .side_wrap .langWrap .list { position:absolute; left:0; right:0; top:100%; padding:.5em .5em; background:#fff; box-shadow:0 2px .5em rgba(27,60,111,.2); text-align:center; opacity:0; visibility:hidden; } #header .top_wrap .side_wrap .langWrap .list > li { } #header .top_wrap .side_wrap .langWrap .list > li .in { display:block; padding:.25em .5em; color:#000; } #header .top_wrap .side_wrap .langWrap .list > li ~ li .in { border-top:1px solid #e5e5e5; } #header .top_wrap .side_wrap .langWrap .list > li .tt { font-size:.875em; opacity:.6; transition:.2s; } #header .top_wrap .side_wrap .langWrap .list > li:hover .in { background:#f5f5f5; } #header .top_wrap .side_wrap .langWrap .list > li:hover .tt, #header .top_wrap .side_wrap .langWrap .list > li.on .tt { opacity:1; } #header .top_wrap .side_wrap .langWrap.on .btn_lang .arrow:before { transform:rotate(-180deg); } #header .top_wrap .side_wrap .langWrap.on .list { opacity:1; visibility:visible; transition:.4s; } #header .all_wrap { width:4.25em; } #header .all_wrap .all_btn { position:relative; display:block; width:1.575em; height:1em; margin-left:auto; } #header .all_wrap .all_btn .ham, #header .all_wrap .all_btn .ham:before, #header .all_wrap .all_btn .ham:after { display:block; width:100%; height:2px; background:#fff; transition:.2s; } #header .all_wrap .all_btn .ham:before, #header .all_wrap .all_btn .ham:after { content:""; position:absolute; right:0; } #header .all_wrap .all_btn .ham:before { top:50%; } #header .all_wrap .all_btn .ham:after { top:100%; } #header .all_wrap .all_btn:hover .ham:before { width:80%; } #header .all_wrap .all_btn:hover .ham:after { width:90%; } #header .etc_wrap .all_wrap .all { position:fixed; left:0; top:0; width:100%; height:100%; background:#fff; visibility:hidden; opacity:0; overflow-y:auto; transition:.3s; transform:scale(.5) } #header .etc_wrap .all_wrap.on .all { visibility:visible; opacity:1; transform:scale(1); z-index:10; } #header .etc_wrap .all_wrap .all .close_btn { position:absolute; top:1em; right:2em; width:3em; line-height:3em; text-align:center; opacity:.5; transition:.3s } #header .etc_wrap .all_wrap .all .close_btn .xi { font-size:3em } #header .etc_wrap .all_wrap .all .close_btn:hover { transform:rotate(90deg); opacity:1 } #header .etc_wrap .all_wrap .all .all_logo { text-align:center; padding:3em 0; } #header .etc_wrap .all_wrap .all .all_logo > img { height:40px } #header .etc_wrap .all_wrap .all .gnb a { height:auto } #header .etc_wrap .all_wrap .all .gnb { justify-content:space-between; padding-bottom:5em; overflow:hidden; display: flex; flex-wrap: wrap; } #header .etc_wrap .all_wrap .all .gnb > li { float:left; width:16.66% } #header .etc_wrap .all_wrap .all .gnb > li .dp2, #header .etc_wrap .all_wrap .all .gnb > li .dp3 { display:block } #header .etc_wrap .all_wrap .all .gnb > li .dp2 > li { width:100%; } #header .etc_wrap .all_wrap .all .gnb > li .dp2 > li > a > .head_img { display: none; } #header .etc_wrap .all_wrap .all .gnb > li .dp1 { border-top:5px solid #ddd; border-bottom:1px solid #aaa; height:5em; position:relative } #header .etc_wrap .all_wrap .all .gnb > li .dp1:after { content:""; position:absolute; left:0; top:-5px; width:0; height:5px; background: var(--siteC); transition:.3s } #header .etc_wrap .all_wrap .all .gnb > li .dp1 .va { font-size:1.25em; font-weight:700 } #header .etc_wrap .all_wrap .all .gnb > li:hover .dp1 { color:var(--siteC) } #header .etc_wrap .all_wrap .all .gnb > li:hover .dp1:after { width:100% } #header .etc_wrap .all_wrap .all .gnb > li .dp2 { } #header .etc_wrap .all_wrap .all .gnb > li .dp2 > li > a { padding:1em; border-bottom:1px solid #ddd; text-align:left; position:relative; padding-left:2em } #header .etc_wrap .all_wrap .all .gnb > li .dp2 > li > a:after { content:"\e913"; font-family:xeicon!important; position:absolute; left:0; top:1em; width:2em; text-align:center; color:#aaa } #header .etc_wrap .all_wrap .all .gnb > li .dp2 > li:hover > a { background:#f5f5f5; color:#111 } #header .etc_wrap .all_wrap .all .gnb > li .dp2 > li:hover > a:after { color:#111 } #header .etc_wrap .all_wrap .all .gnb > li .dp2 > li:hover > .dp3 { background:#f9f9f9 } #header .etc_wrap .all_wrap .all .gnb > li .dp3 { display: flex; flex-direction: column; padding:.5em 0; border-bottom:1px solid #ddd } #header .etc_wrap .all_wrap .all .gnb > li .dp3 > li > a { padding:.25em .75em; text-align:left } #header .etc_wrap .all_wrap .all .gnb > li .dp3 > li > a .va { font-size:.875em; color:#666 } #header .etc_wrap .all_wrap .all .gnb > li .dp3 > li > a .va:before { content:"- "; display:inline-block; padding-right:1em } #header .etc_wrap .all_wrap .all .gnb > li .dp3 > li:hover > a .va { text-decoration:underline; color:#333 } #header .etc_wrap .all_wrap .all .gnb > li .dp3 > li:hover > a .va:before { text-decoration:none } #header .lang_wrap { float:left; position:relative; margin-left:20px; color:#fff } #header .lang_wrap .lang { filter:alpha(opacity=80); opacity:.8; cursor:pointer; } #header .lang_wrap .lang .va_tt { padding-bottom:2px; border-bottom:1px solid #fff; } #header .lang_wrap .lang .va_tt:after { content:"\e941"; font-family:xeicon; font-style:normal; font-size:.750em; padding:0 5px 0 20px; vertical-align:middle; } #header .lang_wrap .lang .xi, #header .lang_wrap .lang .tt { vertical-align:middle; } #header .lang_wrap .lang .xi { font-size:1.375em; } #header .lang_wrap .lang .tt { padding-left:8px; font-size:.875em; text-transform:uppercase; } #header .lang_wrap .lang_list { display:none; position:absolute; top:90%; left:0; right:0; padding:10px 10px; background:#333; z-index:1; } #header .lang_wrap.on .lang_list { display:block; } #header .lang_wrap .lang_list > li { } #header .lang_wrap .lang_list > li > a { display:block; padding:6px 10px; text-align:center; font-size:.875em; color:#fff; text-transform:uppercase; } #header .langg_wrap { float:left; position:relative; color:#fff; padding:.3em 1.5em; border:1px solid rgba(255,255,255,.7); margin-left:.3em } #header .langg_wrap .lang { filter:alpha(opacity=80); opacity:.8; cursor:pointer; } #header .langg_wrap .lang .va_tt { padding-bottom:2px; } #header .langg_wrap .lang .xi, #header .langg_wrap .lang .tt { vertical-align:middle; } #header .langg_wrap .lang .xi { font-size:1.375em; } #header .langg_wrap .lang .tt { padding-left:8px; font-size:.875em; text-transform:uppercase; } .color #header .logo > a { background-image:url(../images/inc/logo_new.png) } .color #header .gnb_wrap .gnb > li .dp1 { color:#333 } /*.color #header .gnb_wrap .gnb > li:hover .dp1 { color:#0072c6 } */ .color #header .gnb_wrap .gnb > li:hover .dp1:after { background:#0072c6 } .color #header .etc_wrap .lang > .lang_btn { border-color:#ccc; color:#666 } .color #header .etc_wrap .all_wrap .all_btn { color:#333 } .color #header:before { border-bottom:1px solid #ddd; } /*.load #header:before { border-bottom:1px solid #ddd; } */ .scroll #header { background:#fff; border-bottom:1px solid rgba(0,0,0,.1) } .scroll #header:after { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#fff; opacity:.2; } .scroll #header .logo > a { filter: none; } .scroll #header .etc_wrap .mem_wrap .mem_t { color:#666 !important; } .scroll #header .gnb_wrap .gnb > li.on .dp1, .scroll #header .gnb_wrap .gnb > li:hover .dp1 { color:#0072c6 } .scroll #header:before { background:none } .scroll #header .etc_wrap .cnt > .contact_btn, .scroll #header .etc_wrap .lang_wrap, .scroll #header .lang_wrap .lang .va_tt { color:#333; border-bottom-color:#333 } .scroll #header .all_wrap .all_btn .ham, .scroll #header .all_wrap .all_btn .ham:before, .scroll #header .all_wrap .all_btn .ham:after { background:#333 } .scroll #header .langg_wrap { border:1px solid #ddd } .scroll #header .gnb_wrap .gnb > li .dp1 { color: #111; } .scroll #header .top_wrap .side_wrap { color: #111; } /*#header.hide { transform:translateY(-6em) } */ .headerH, #header .va_wrap { height:80px } .headerT { top:5em } #header:hover:before { opacity:1; } #header:hover .top_wrap .gnb_wrap .menu .gnb > li .dp1 { color:#333 !important; } #header:hover .cnt > .contact_btn, #header:hover .etc_wrap .lang { color:#333 !important; /*border:1px solid #333*/ } #header:hover .all_wrap .all_btn .ham, #header:hover .all_wrap .all_btn .ham:before, #header:hover .all_wrap .all_btn .ham:after { background:#333 } #header:hover .gnb_wrap .gnb > li .dp1:after { background:var(--siteC); height:3px } #header:hover .etc_wrap .all_wrap:hover .all_btn { color:#fff !important } #header:hover .lang_wrap .lang .va_tt { border-color:#333 } #header:hover .logo > a { filter: none; } #header:hover .top_wrap .side_wrap { color: #111; } /*챗봇*/ #gitple-loader-frame { display:block !important } #gitple-launcher { bottom:120px !important; right:30px !important } #gitple-launcher-icon { width:64px !important; height:64px !important; position:relative; } #gitple-launcher-tooltip { bottom:200px !important; display:none !important } #gitple-container { bottom:200px !important; height:600px !important } #gitple-launcher-icon:before { content:"1:1문의"; position:absolute; top:0; left:0; width:100%; height:100%; line-height:64px; text-align:center; box-sizing:border-box; padding-top:15px; font-size:.570em; color:#fff; } #gitple-launcher-icon.gitple-close:before { display:none; } #gitple-launcher-icon.gitple-open { background-size:40px !important; background-position:center 20% !important } /* footer */ #footer { z-index:10; background: #1e222a; padding: 0 0 3.5em 0 } #footer > .box1 { gap: 16.5em; color:#fff; } #footer .logo img { height:3.5em; /* filter:brightness(0) invert(1) */ } #footer .logo_wrap { margin-top: 3em; filter: var(--crWhitefil); opacity: 0.8; } #footer .logo_wrap .logo { width: 215px; } #footer .info_wrap { margin-top: 3em; /* gap: 10em; */ } #footer .foot-tit { opacity: 0.8; font-size: 0.875rem; margin-bottom: 1em; } #footer .foot-sec { margin-bottom: 2em; } #footer .info_wrap .center { } #footer .info_wrap .center .tel { font-size: 1.3rem; font-weight: 800; opacity: 0.8; } #footer .info_wrap .center .info { font-size: 0.875rem; opacity: 0.8; line-height: 1.5; } #footer .infoCol { display:flex; /*flex-direction:column;*/ gap:1em } #footer .info { overflow:hidden } #footer .info > li { float:left; margin-right:2em; margin-bottom:1em; opacity:.8; position:relative; font-size: 0.875rem; } #footer .info > li:before { content:""; position:absolute; left:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px; background:#fff; opacity:.2 } #footer .info > li.point { font-weight:600 } #footer .info > li.br { clear:left } #footer .copyright { font-size:.75rem; opacity:.6; text-transform:uppercase; margin-top:1em } #footer .cs_wrap { display:flex; gap:0 4em } #footer .cs_wrap .wrap_in { position:relative } #footer .cs_wrap .wrap_in:not(:first-child):after { content:""; position:absolute; left:-2em; top:0; width:1px; height:100%; background:#fff; opacity:.2 } #footer .cs_wrap .t1 { opacity:.7; font-weight:500; margin-bottom:.5em } #footer .cs_wrap .t2 { font-weight:700; font-size:1.25em } #footer .menu_wrap { display:flex; width: 15%; justify-content: flex-end; align-items:baseline; gap:1em 0; color:#fff; } #footer .foot-menu { padding: 0.875em 0; border-bottom: 1px solid rgba(255,255,255,.3); } #footer .menu { display:flex; gap: 1em; color:#fff; } #footer .menu > li { width:auto; } #footer .menu > li > a { display:block; padding-right:2em; position:relative; font-weight:500; color:var(--crWhite); font-size: 15px; } #footer .menu > li > a:hover { text-decoration: underline; } /* #footer .menu > li > a:after { content:"\e915"; font-family:xeicon; position:absolute; right:0; top:0; transform:rotate(45deg) } */ #footer .menu > li > a.point { opacity:1; font-weight:700; color:var(--siteC); filter:brightness(2) } #footer .family { position: relative; } #footer .family .btn { gap:0 5.5em; height:3.5em; padding:0 1.5em; border:1px solid rgba(255,255,255,.3); border-radius:.25em; background: rgba(0,0,0,.3); color:#fff; } #footer .family .btn .tt { font-size:.813em; } #footer .family .btn .xi { font-size:1.125em; } #footer .family .list { display:none; position:absolute; left:0; bottom: calc(100% + 2px); width:100%; max-height: 16em; margin-bottom:-1px; padding:1em 1em; background: #f8f8f8; border-bottom:1px solid rgba(255,255,255,.2); border-radius: .25em; box-sizing:border-box; border: 1px solid #ddd; } #footer .family .list > li > a { display:block; padding:.5em 0; font-size:.938em; color: #777!important;; } #footer .family .list > li > a:hover { text-decoration:underline; } #footer .family.on .in { opacity:1; } #footer .family.on .in .arrow { transform:rotate(180deg); } #footer .family.on .list { display:block } .sns_st { display:flex; gap:.5em } .sns_st > li > a { display:flex; align-items:center; justify-content:center; width:2.5em; height:2.5em; color:#fff; border-radius:50%; transition:.3s } .sns_st > li > a:hover { background:#fff; color:#111 } #footer .sns-wrap { } #footer .sns-wrap > p { font-size: 0.875rem; } #footer .sns-wrap > .sns { } #footer .sns-wrap > .sns > li { } #footer .sns-wrap > .sns > li > a { padding: 0.5em; border-radius: 50%; border: 1px solid #aaa; opacity: 0.7; } #footer .quickFix { z-index:99; position:fixed; right:1em; bottom:1em; text-align:right; transform:translateY(5em); transition:.3s; } #footer .quickFix > li { padding:.5em 0; } #footer .quickFix > li .wrap_in { position:relative; width:4.5em; height:4.5em; box-sizing:border-box; transition:.3s; } #footer .quickFix > li .goLink { color:#fff; animation-name: updownAni; animation-duration: 3s; animation-iteration-count: infinite; } #footer .quickFix > li .goLink:before { content:""; position:absolute; top:0; right:0; width:100%; height:100%; background:var(--siteC); border-radius:50%; } #footer .quickFix > li .goLink > .in { position:relative; white-space:nowrap; } #footer .quickFix > li .goLink > .in .icon, #footer .quickFix > li .goLink > .in .icon img { width:2.5em; } #footer .quickFix > li .goLink > .in .tt { font-size:1.063em; font-weight:600; width:0; opacity:0; overflow:hidden; } @media (hover: hover) {#footer .quickFix > li .goLink:hover { width:100%; padding:0 1.75em 0 1.25em; } #footer .quickFix > li .goLink:hover:before { border-radius:10em; } #footer .quickFix > li .goLink:hover > .in .tt { flex:1; width:100%; opacity:1; padding-left:.75em; } } #footer .quickFix > li .goTop { background:var(--siteC2); border:3px solid transparent; border-radius:50%; color:#fff; opacity:0; } #footer .quickFix > li .goTop > .in .xi { display:block; } #footer .quickFix > li .goTop > .in .tt { display:block; font-size:.750em; } #footer .quickFix > li .goTop:hover { background:#fff; border-color:var(--siteC2); color:var(--siteC2); } .scroll #footer .quickFix { transform:translateY(0); } .scroll #footer .quickFix > li .goTop { opacity:1; } @keyframes updownAni {0% { transform:translateY(.5em); } 50% { transform:translateY(-.5em); } 100% { transform:translateY(.5em); } } /* #footer { background:#303234; } #footer .foot_head { padding:1.2em 0; border-bottom:1px solid #54595d } #footer .foot_head .foot_head_in li { width:23.33% } #footer .foot_head .foot_head_in li:nth-child(1) { width:30% } #footer .foot_head_in { padding-left:1.5em } #footer .foot_head_in .xi { background:rgba(255,255,255,.9); border-radius:50%; width:30px; height:30px; line-height:30px; text-align:center; vertical-align:middle } #footer .foot_head_in .tit { color:#fff; padding:0 .5em; vertical-align:middle; font-weight:500 } #footer .foot_head_in .c1 { color:#14beb4; font-size:1.250em; font-weight:600; vertical-align:middle } #footer .foot_head_in .c2 { color:#fff; vertical-align:middle; opacity:.8 } #footer .inner { padding:1.5em 0 3.5em 0; } #footer .inner .logo { margin-top:.625em; } #footer .inner .logo img { width:9em; } #footer .inner .con { flex:1; padding-left:4.125em; } #footer .inner .con .infoaW { margin-top: 2.15em; gap: 2.5em; } #footer .inner .con .infoaW > .logo { } #footer .inner .con .infoaW > .logo > img { width: 12em; filter: var(--crWhitefil); } #footer .menu_wrap { } #footer .menu_wrap .menu { flex:1; padding-top:.5em; } #footer .menu_wrap .menu > li .in { position:relative; display:block; padding:0 1.375em; color:#fff; } #footer .menu_wrap .menu > li .in:after { content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:1em; background:#fff; opacity:.2; } #footer .menu_wrap .menu > li:first-child .in { padding-left:0; } #footer .menu_wrap .menu > li:last-child .in { padding-right:0; } #footer .menu_wrap .menu > li:last-child .in:after { display:none; } #footer .menu_wrap .menu > li .in .tt { font-size:1.063em; } #footer .menu_wrap .menu > li .point { color: cornflowerblue; } #footer .menu_wrap .menu > li .in:hover .tt { text-decoration:underline; } #footer .info_wrap { } #footer .info_wrap .info > li { padding:.25em 2em .25em 0; } #footer .info_wrap .info > li.br { width: 100%; } #footer .info_wrap .info > li .tt { vertical-align:baseline; font-size:.938em; color:#fff; opacity:.6; } #footer .info_wrap .info > li a[href]:hover { opacity:1; } #footer .info_wrap .copy { margin-top:2.5em; font-size:.688em; color:#fff; text-transform:uppercase; opacity:.4; } #footer .menu_wrap .family_wrap { position:relative; right:4em } #footer .menu_wrap .family_wrap .family_btn { height:3.125em; padding:0 .375em; border-bottom:2px solid #fff; color:#fff; } #footer .menu_wrap .family_wrap .family_btn .tt { font-size:.875em; } #footer .menu_wrap .family_wrap .family_btn .icon { font-size:.938em; margin-left:5em; } #footer .menu_wrap .family_wrap .family_btn .icon:before { content:"\e944"; } #footer .menu_wrap .family_wrap .list_wrap { position:absolute; bottom:100%; left:0; right:0; padding:1em 1em; max-height:20em; background:#303234; border:1px solid #151617; box-shadow:2px 2px 3px rgba(0,0,0,.15); display:none; } #footer .menu_wrap .family_wrap .family > li .in { display:block; padding:.25em 0; color:#fff; } #footer .menu_wrap .family_wrap .family > li .in .tt { font-size:.813em; } #footer .menu_wrap .family_wrap .family > li .in:hover .tt { text-decoration:underline; } #footer .menu_wrap .family_wrap.on .family_btn .icon:before { content:"\e941"; } #footer .menu_wrap .family_wrap.on .list_wrap { display:block; } */ /* footer back 241107 */ /* #footer { z-index:1; color:#fff; background:#222; padding: 5em 0 6em 0; border-top:1px solid rgba(255,255,255,.1) } #footer .goTop { position:fixed; right:0; bottom:0; width:3.5em; line-height:3.5em; text-align:center; background:#333; color:#fff; box-shadow:0 0 1em rgba(0,0,0,.1); opacity:0; transform:translateY(100%); transition:.5s } #footer .goTop .xi { font-size:1.5em; transition:.3s } #footer .goTop:hover .xi { transform:translateY(-.25em) } .scroll #footer .goTop { opacity:1; transform:translateY(0) } #footer .menu { display:flex; justify-content:flex-end; margin-top: 2em; /*flex-direction:column; gap:2em } #footer .menu > li { /*width:100%; } #footer .menu > li > a { display:block; padding-right:2em; font-size:1.063em; position:relative; opacity:.6 } #footer .menu > li:not(:last-child) > a:after { content:''; width:2px; height:2px; background:#999; position:absolute; right:0; top:50%; trnasform:translateY(-50%); } /*#footer .menu > li > a:after { content:"\e915"; font-family:xeicon; position:absolute; right:0; top:0; transform:rotate(45deg) } #footer .menu > li > a.point { opacity:1 } #footer .link { margin-left:auto; display:flex; gap:.5em } #footer .link > li > a { padding:.5em 1em; font-size:1.063em; border:1px solid rgba(255,255,255,.2); line-height:1; opacity:.5; border-radius:.25em } #footer .link > li > a:hover { opacity:1 } #footer .logo_wrap { gap: 3em; justify-content: space-between; } #footer .logo_wrap .logo { } #footer .logo_wrap .logo img { height:3.5em; filter:brightness(0) invert(1); } #footer .infoW { margin-bottom:.25em; display:flex; font-size:.938em; flex-direction: column; } #footer .infoW > dt { width:10em; font-weight:500; opacity:.8; margin-bottom: .5em; } #footer .infoW > dd { flex:1 1 0%; min-width:0 } #footer .info > li { float:left; margin-right:2em; margin-bottom:.3em; opacity:.8; font-weight:300; position:relative } #footer .info > li:before { content:""; position:absolute; right:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px; background:#fff; opacity:.2 } #footer .info > li:last-child:before { display:none } #footer .info > li.point { font-weight:600 } #footer .info > li.br { clear:left } #footer .copyright { font-size:.813em; opacity:.4; text-transform:uppercase; margin-top:3.5em } #footer .menu_wrap .family_wrap { position:relative; } #footer .menu_wrap .family_wrap .family_btn { height:3.125em; padding:0 1em; background: #333; border-bottom:2px solid #fff; color:#fff; } #footer .menu_wrap .family_wrap .family_btn .tt { font-size:.875em; } #footer .menu_wrap .family_wrap .family_btn .icon { font-size:.938em; margin-left:5em; } #footer .menu_wrap .family_wrap .family_btn .icon:before { content:"\e944"; } #footer .menu_wrap .family_wrap .list_wrap { position:absolute; bottom:100%; left:0; right:0; padding:1em 1em; max-height:20em; background:#303234; border:1px solid #151617; box-shadow:2px 2px 3px rgba(0,0,0,.15); display:none; } #footer .menu_wrap .family_wrap .family > li .in { display:block; padding:.25em 0; color:#fff; } #footer .menu_wrap .family_wrap .family > li .in .tt { font-size:.813em; } #footer .menu_wrap .family_wrap .family > li .in:hover .tt { text-decoration:underline; } #footer .menu_wrap .family_wrap.on .family_btn .icon:before { content:"\e941"; } #footer .menu_wrap .family_wrap.on .list_wrap { display:block; } */ #footer .goTop { position:fixed; z-index:99; bottom:-2em; right:1.5%; width:4em; height:4em; background:#fff; border:5px solid #ddd; color:var(--siteC);; opacity:0; visibility:hidden; transition:.2s; } #footer .goTop .tt { display:block; font-size:.688em; font-weight:700; } #footer .goTop:hover { background:var(--siteC);; border-color:var(--siteC);; color:#fff; } .scroll #footer .goTop { bottom:2em; opacity:1; visibility:visible; } #contents { } #contents .subtop_wrap { position:relative } #contents .subtop_wrap .sub_visual { height:25em; position:relative; overflow:hidden } #contents .subtop_wrap .sub_visual .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-color:#ddd; transform: scale(1.07); transition: 2.5s ease-out; } .load #contents .subtop_wrap .sub_visual .bg { transform: scale(1); } #contents .subtop_wrap .sub_visual .bg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.25); content: ''; z-index: 1; } #contents .subtop_wrap .sub_visual .wrap_in { position:relative; height:100% } #contents .subtop_wrap .sub_visual .wrap_in .sub_slogan { flex:1 1 auto } #contents .subtop_wrap .sub_visual .wrap_in .sub_menu { flex:0 0 auto; margin:0 0 0 -.5em } #contents .sub_slogan { position:relative; z-index: 2; color:#fff; transform:translateY(2em); opacity:0 } #contents .sub_slogan .in { width:100%; text-align:center } #contents .sub_slogan .t1 { font-size:3em; font-weight:700; } #contents .sub_slogan .t2 { font-size:2.37em; font-weight:400; } #contents .sub_slogan .t3 { font-size:1.8em; font-weight:400; } .load #contents .sub_slogan { transform:translateY(0); opacity:1; transition:1s; padding-top:3em } .sTit { font-size:.813em } #contents .sub_menu { padding-bottom:1em } #contents .sub_menu .gnb { flex-wrap: wrap; display:flex; font-size:inherit } #contents .sub_menu .gnb > li { width:100%; } #contents .sub_menu .gnb > li .dp2 { margin:-.5em 0 0 -.5em; display:flex } #contents .sub_menu .gnb > li .dp2 > li { flex:1 1 10% } #contents .sub_menu .gnb > li .dp2 > li > a { display:block; height:3.5em; padding:0; border:1px solid rgba(255,255,255,.5); color:#fff; margin:.5em 0 0 .5em; transition:.3s } #contents .sub_menu .gnb > li .dp2 > li > a .va { font-size:1.063em; font-weight:500; letter-spacing:-1px } #contents .sub_menu .gnb > li .dp2 > li > a .va .sTit { display:block } #contents .sub_menu .gnb > li .dp2 > li:hover > a { background:rgba(0, 38, 84,.4); border-color:transparent } #contents .sub_menu .gnb > li .dp2 > li.on > a { background:rgba(0, 38, 84,.8); border-color:transparent } .dp1_guide .sub_nav_wrap { display:none } #contents .sub_nav_wrap { border-bottom:1px solid #ddd; position:relative; z-index:2 } #contents .sub_nav_wrap .nav_btn { background:#1c2335; color:#fff; padding:.5em 1.5em; box-shadow:1px 1px 3px rgba(0,0,0,.3); border-radius:2px; font-size:.938em } #contents .sub_nav_wrap .nav_btn .xi { margin-left:1em; transition:.3s; } #contents .sub_nav_wrap .nav_btn:hover .xi { transform:translateX(.5em) } #contents .sub_nav { position:relative; z-index:1 } #contents .sub_nav > li .navBtn { height:3.4em; border-right:1px solid #ddd; font-size:.938em; color:#777 } #contents .sub_nav > li.home { background:#fff } #contents .sub_nav > li.home .navBtn { width:4em; border-left:1px solid #ddd; } #contents .sub_nav > li.home .navBtn .xi { color:#888 } #contents .sub_nav > li.tt { position: relative; border:1px solid transparent } #contents .sub_nav > li.tt .navBtn { padding:0 4em 0 1.5em; position:relative; width:17em } #contents .sub_nav > li.tt .navBtn:hover { color:#111 } #contents .sub_nav > li.tt .navBtn:after { font-family:xeicon!important; content:"\e940"; position:absolute; right:0; top:50%; line-height:2em; margin-top:-1em; width:3em; text-align:center; transition:.3s } #contents .sub_nav > li .navBtn.tt:hover:after { transform:rotate(90deg) } #contents .sub_nav > li.on .navBtn { background:#fff; color:#111 } #contents .sub_nav > li.on .navBtn.tt:after, #contents .sub_nav > li.on .navBtn.tt:hover:after { transform:rotate(-90deg) } #contents .sub_nav > li .gnb { position:absolute; left:-1px; width:100%; background:#fff; border:1px solid transparent; box-shadow:0 2px 3px rgba(0,0,0,.2); visibility:hidden; opacity:0; transition:.3s; } #contents .sub_nav > li.on { border-color:#333; border-bottom-color:transparent } #contents .sub_nav > li.on .gnb { visibility:visible; opacity:1; border-color:#4b5162; border-top:none; font-size:inherit } #contents .sub_nav > li .gnb { } #contents .sub_nav > li.on .gnb li { display:block; flex-wrap:wrap; width:100%; flex:1 0 100% } #contents .sub_nav > li .gnb li { flex-wrap:wrap; width:100%; flex:1 0 100% } #contents .sub_nav > li .gnb, #contents .sub_nav > li .gnb .flex { display:block } #contents .sub_nav > li .gnb li a { border-top:1px solid #ddd; padding:1.25em 3em 1.25em 1.5em; text-align:left; font-size:.875em; color:#666; position:relative; overflow:hidden; } #contents .sub_nav > li .gnb li a:after { font-family:xeicon!important; content:"\e93f"; position:absolute; right:-4em; top:50%; line-height:2em; margin-top:-1em; width:3em; text-align:center; transition:.3s; margin-right:.25em } #contents .sub_nav > li .gnb li:hover > a:after, #contents .sub_nav > li .gnb li.on > a:after { right:0 } #contents .sub_nav > li .gnb li:hover > a, #contents .sub_nav > li .gnb li.on > a { background:#f9f9f9; color:#111 } #contents .sub_nav > li .gnb .dp4 { display:none } #contents .sub_nav > li .sTit { display:none !important } #contents .sub_nav > li .gnb li .head_img { display: none; } .dp1on .gnb .dp2 { display:none!important } .dp2on .gnb > li, .dp2on .gnb > li .dp1, .dp2on .gnb > li .dp3 { display:none!important } .dp2on .gnb > li.on { display:block!important } .dp3on .gnb > li, .dp3on .gnb > li .dp1, .dp3on .gnb > li .dp2 > li, .dp3on .gnb > li .dp2 > li > a { display:none!important } .dp3on .gnb > li.on, .dp3on .gnb > li .dp3 > li.on { display:block!important } #contents .sub_tit { border-bottom:1px solid #ddd; padding:1.5em 0; text-align:center } #contents .sub_tit .tit { font-weight:700; font-size:2.5em; color:#333 } #contents .sub_tit .tit .sTit { display:block } #contents .doc { padding:3em 0 10em 0 } #contents .doc_st { padding-top:0 } #contents .doc_pd { padding:0 } /*============================== MAIN PAGE =======================================*/ .main_visual_wrap { position:relative; } .main_visual, .main_visual .visual, .main_visual .visual .el { height:calc(100vh); overflow:hidden; } .main_visual { position:relative; } .main_visual .visual { position:absolute; top:0; left:0; width:100%; height:100%; background:#333; } .main_visual .visual .el { position:relative; overflow:hidden; } .main_visual .visual .el:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .25); content: ''; z-index: 1; } .main_visual .visual .el .bg { position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; transform:scale(1.1); transition:2s; } .main_visual .visual .el.activeAni .bg { transform:scale(1); } .main_visual_wrap .slogan { position:absolute; left:0; right:0; top:18em; text-align:center; transform:translateY(3em); opacity:0; transition:2s; z-index: 999;} .main_visual_wrap .slogan .t1 { font-size:3.570em; font-weight:700; color:#fff; text-align:center; text-shadow: 1px 1px 3px #999; } .main_visual_wrap .slogan .t2 { font-size:3.125em; font-weight:400; color:#fff; text-align:center; text-shadow: 1px 1px 3px #999; padding:.2em 0; letter-spacing:-1px } .main_visual_wrap .slogan .t3 { font-size:1.750em; font-weight:400; color:#fff; text-align:center; text-shadow: 1px 1px 3px #999; } .main_visual_wrap .slogan .line { position:relative; margin:1.5em 0 3em 0 } .main_visual_wrap .slogan .line:before, .main_visual_wrap .slogan .line:after { content:""; position:absolute; height:2px; background:#fff; width:0; opacity:0 } .main_visual_wrap .slogan .line:before { left:50%; } .main_visual_wrap .slogan .line:after { right:50%; } .load .main_visual_wrap .slogan { transform:translateY(0); opacity:1; } .load .main_visual_wrap .slogan .line:before, .load .main_visual_wrap .slogan .line:after { width:2em; opacity:1; transition-duration:2s; transition-delay:.5s } .main_visual_wrap .dot_wrap { position:absolute; left:0; right:0; bottom:10em; text-align:center; } .main_visual_wrap .slick-dots > ul > li { display:inline-block; margin:0 .25em; } .main_visual_wrap .slick-dots > ul > li button { display:block; width:3em; height:7px; background:transparent; border:1px solid #fff; text-indent:-999999px; transition:.2s; } .main_visual_wrap .slick-dots > ul > li.slick-active button { width:6em; background:#fff; } .main_visual_wrap .visual_con { position:absolute; left:0; bottom:0; width:100%; background:#fff; } .main_visual_wrap .control_box > li { width:11.5em; height:6.25em; background:var(--siteC); color:#fff; cursor:pointer; } .main_visual_wrap .control_box > li .xi { font-size:1.250em; } .main_visual_wrap .control_box > li .xi:first-child { margin-right:2.5em; } .main_visual_wrap .control_box > li .xi:last-child { margin-left:2.5em; } .main_visual_wrap .control_box > li .tt { font-size:1.125em; font-weight:700; } .main_visual_wrap .visual_con .notice { flex:1; margin-right:3%; } .customer_w { position:relative; height:70px; width:100%; overflow:hidden; } .customer_w .customer_slide .tt { position:absolute; left:0; top:16px; z-index:3; margin:0 50px; cursor:pointer; } .customer_w .customer_slide .tt .xi { display:inline-block; *display:inline; zoom:1; vertical-align:middle; color:#000; font-size:30px; color:#000; } .customer_w .customer_slide .tt span { display:inline-block; *display:inline; zoom:1; vertical-align:middle; color:#fff; color:#111; font-size:1.375em; font-weight:600 } .customer_w .customer_slide .tt > i { color:#111; font-size:1.375em; padding-left:1em } .customer_w .customer_slide .slides { } .customer_w .customer_slide .slides li { height:70px; line-height:70px; position:relative; } .customer_w .customer_slide .slides li .notice_tit { color:#000; font-size: 1.250em; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding-right:180px; margin-left:250px; vertical-align:middle; width:50%; } .customer_w .customer_slide .slides li .notice_tit .xi { vertical-align:bottom; padding-right:1em; } .customer_w .customer_slide .flex-direction-nav { position:absolute; right:0; bottom:0; } .customer_w .customer_slide .flex-direction-nav li { } .customer_w .customer_slide .flex-direction-nav a { display:block; height:40px; width:40px; font-size:0; } .customer_w .customer_slide .flex-direction-nav a:hover { background-color:#f9f9f9; } .customer_w .customer_slide .flex-direction-nav .flex-prev { background-image:url(../images/temp/notice_arrow.png); background-repeat:no-repeat; background-position:center -5px; margin-right:1px; } .customer_w .customer_slide .flex-direction-nav .flex-next { background-image:url(../images/temp/notice_arrow.png); background-repeat:no-repeat; background-position:center -50px; } .customer_w .customer_slide .slides li .notice_date { position:absolute; right:120px; top:0; color:#555; font-size:.1.063em; font-weight:500 } /**/ .main_tit { } .main_tit .t1 { color:var(--siteC); font-size:1.25em; font-weight:500; text-transform:uppercase } .main_tit .t2 { font-size:2.75em; font-weight:500 } .main_tit .t3 { font-size:1.25em; color:#111; padding-top:.5em; } .main_tit .line { width:1px; height:40px; margin:1em .5em; background:#111; } .main_tit.ac .line { margin: 1em auto; } .main_con_bg { background:url(../images/main/main_con1_bg.jpg); background-position:center bottom; background-attachment:fixed; } .main_con { padding:5em 0 10em 0; } /*.main_con.main_sec1 { background:url(../images/main/main_con1_bg.jpg); background-position:center -130px } .main_con.main_sec2 { background:url(../images/main/main_con1_bg.jpg); background-position:center bottom; background-attachment:fixed; } */ .main_con.main_sec2 { padding:5em 0 8em 0 } .main_con.main_sec3 { padding:5em 0 5em 0 } .main_con.main_sec3 { } .main_sec1 { border-top:1px solid #f5f5f5; position:relative } .main_tab { min-width:320px } .main_tab > li { width:100%; position:relative } .main_tab > li > a { position:relative; z-index:99; display:block; margin-left:-1px; padding:1em .5em; transition-duration:.2s; font-size:1.25em; } .main_tab > li > a:before { content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#ddd; } .main_tab > li > a:after { content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#ddd; transform:scale(0); transition:.3s } .main_tab > li > a .tt { font-size:1.063em; font-weight:500; color:#555 } .main_tab > li > a .xi { position:absolute; right:0; border:1px solid #ddd; border-radius:50%; width:35px; height:35px; text-align:center; font-size:1.125em; line-height:35px; color:#888; transition:.2s; } .main_tab > li:hover > a .tt, .main_tab > li.on > a .tt { color:var(--siteC);; } .main_tab > li:hover a:after, .main_tab > li.on > a:after { background:var(--siteC);; height:3px; transform:scale(1) } .main_tab > li:hover > a .xi, .main_tab > li.on > a .xi { background:var(--siteC);; color:#fff; border-color:var(--siteC); } .main_con .con_idx { position:absolute; right:0; top:0; width: 70%; } .main_con .brandImg .in { position:relative } .main_con .brandImg .in > .img { width: 100%; height: 26.5em; } .main_con .brandImg .in > .img > img { width: 100%; height: 100%; object-fit: cover; } .main_con .brandImg .in .brand_box { position:absolute; bottom:-1.5em; width:60%; background:#fff; left:0; padding:1.5em; box-sizing: border-box; border-radius: 0 30px 0 0; } .main_con .brandImg .in .brand_box > ul { gap: 1.5em; } .main_con .brandImg .in .brand_box > ul > li:first-child { /*width:60%*/ } .main_con .brandImg .in .brand_box .tt { font-size:1.715em; font-weight:500; color: var(--siteC); } .main_con .brandImg .in .brand_box .tx { color:#555; padding-top:.5em; } .main_con .brandImg .in .brand_box .linkIcon > a { width:2em; height:2em; border-radius:50%; line-height:2em; text-align:center; margin-left:4px } .linkIcon .icon1 { color:#fff; background:#25cef5 } .linkIcon .icon1.c1 { background:#ce3138 } .linkIcon .icon1.c2 { background:#ea0e08; color:#fff; } .linkIcon .icon2 { color:#fff; background:#00c13a; } .linkIcon .icon3 { color:#fff; background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); } .linkIcon .icon4 { background:#fff; color:var(--siteC); border:3px solid #ddd } .main_sec2 .con_in { flex:1; } .main_sec2 .con_in:first-child { flex:1 0 50%; max-width:55% } .main_prod_slide { width:100%; height:100%; } .main_prod_slide .slides { width:100%; height:100%; position:relative; } /*.main_prod_slide .slides li.slick-slide { display:flex; justify-content:center; align-items:center; } */ /*.main_prod_slide .slides li.slick-slide img { max-height:80%; } */ .main_prod_slide .slides li .layer { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0); opacity:0; visibility:hidden; transition:.3s; } .main_prod_slide .slides li .layer .xi { font-size:2.125rem; color:#fff; width:1.8em; line-height:1.8em; background:#d94148; border-radius:50%; margin-top:1em; transition:.3s; font-family:'xeicon'; } .main_prod_slide .slides li .layer .xi:before { content:"\e913"; } .main_prod_slide .slides li:hover img { transform:scale(1.15,1.15); transition:.3s; } .main_prod_slide .slides li:hover .layer { opacity:1; visibility:visible; } .main_prod_slide .slides li:hover .layer .xi { margin-top:0; } .main_prod_slide .slides li:hover { text-decoration:none !important; } .main_prod_slide .slides li .con_wrap { background:#fff; padding:15px 10px 25px 10px; text-align:center; display:block; font-size:1rem; } .main_prod_slide .slides li .con_wrap .tit { display:block; font-size:1.125em; color:#333; letter-spacing:-1px; text-overflow:ellipsis; } .main_prod_slide .slides li .con_wrap .t1 { display:block; font-size:.875em; color:var(--siteC);; margin-top:5px; letter-spacing:-1px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; font-weight:500 } .main_prod_slide .slides .slick-dots { position:absolute; right:10px; top:-20px; } .main_prod_slide .slides .slick-dots ul { display:flex; justify-content:center; align-items:center; } .main_prod_slide .slides .slick-dots li { cursor:pointer; height:30px; } .main_prod_slide .slides .slick-dots li:not(:last-of-type) { margin-right:10px; } .main_prod_slide .slides .slick-dots li button { border:0; font-size:0; outline:none; width:13px; height:13px; border-radius:50%; background:#777; opacity:.7; transition:.3s; } .main_prod_slide .slides .slick-dots li:not(.slick-active) button { transform:translateY(0); } .main_prod_slide .slides .slick-dots li:hover:not(.slick-active) button { background:var(--siteC);; opacity:.9; } .main_prod_slide .slides .slick-dots li.slick-active button { width:13px; height:13px; border-radius:50%; background:var(--siteC);; box-sizing:border-box; opacity:1; } .main_search_wrap { margin-left:4em } .main_search_wrap .inner { background:#fff; margin:0 auto; position:relative; /*width:70%; padding-left:100px; */ } .main_search_wrap .prod_search_tit { position:absolute; left:0; top:0; width:100px; height:100%; background:#2c476b; color:#fff; text-align:center; font-size:1em; } .main_search_wrap .prod_search_tit .xi { display:block; font-size:1.5em; padding-bottom:5px } .main_search_wrap .prod_search_con { clear:both; margin-top:3em; } .main_search_wrap .prod_search_con > li { position:relative; /*padding-left:180px*/ } .main_search_wrap .prod_search_con > li:last-child { padding-top:1em; border-top:1px solid #ddd; margin-top:1em } .main_search_wrap .prod_search_con > li.left { width:100%; } .main_search_wrap .prod_search_con > li .li_in { border:1px solid #ddd; padding-left:150px; } .main_search_wrap .prod_search_con > li.left .li_in { padding-left:150px; /*border-right:none; */ } .main_search_wrap .prod_search_con > li .con_tit { position:absolute; left:0; top:0; bottom:0; width:145px; background:#f7f7f7; text-align:center; border:1px solid #ddd; } .main_search_wrap .prod_search_con > li .con_tit.icon { width:100%; } .main_search_wrap .prod_search_con > li .con_tit.icon .xi.pharmacy_xi { border-radius:100%; background:#0065a4; margin:0 auto 5px auto; width:45px; height:45px; line-height:45px; font-size:2em; color:#fff; transition:.5s; } .main_search_wrap .prod_search_con > li .con_tit i { vertical-align:middle; font-size:.938em; } .main_search_wrap .prod_search_con > li .con_tit .xi { font-size:1.5em; display:block; font-weight:normal; } .main_search_wrap .prod_search_con > li .inp_wrap .inp_con_w1, .main_search_wrap .prod_search_con > li .inp_wrap .inp_con_w2 { border-width:0 0 2px 0; border-color:#111; border-style:solid; position:relative } .main_search_wrap .prod_search_con > li .inp_wrap .inp_con_w1 > .tit, .main_search_wrap .prod_search_con > li .inp_wrap .inp_con_w2 > .tit { font-size:1.125em; } .main_search_wrap .prod_search_con > li .inp_wrap .inp_con_w2 .input_st { border-bottom:none !important; height:50px; padding:.5em } .main_search_wrap .prod_search_con > li .inp_wrap .inp { box-sizing: border-box; padding-top:5px; padding-bottom:5px; height:50px; font-size:1em; } .main_search_wrap .prod_search_con > li .inp_wrap .input_st { border-bottom:2px solid #111 !important; border:none } .main_search_wrap .prod_search_con > li .inp_wrap select.inp, .main_search_wrap .prod_search_con > li .inp_wrap input.inp { border-width:0; border-color:#111; border-style:solid; min-width:345px; max-width:100%; color:#666; } .main_search_wrap .prod_search_con > li .inp_wrap .label_select.st1 { width:28em } .main_search_wrap .prod_search_con > li .inp_wrap .label_select:after { font-size:1.750em; margin-top:-.325em; text-align:right } .main_search_wrap .prod_search_con > li .inp_wrap .input_st.s1 { padding:0 .5em 0 .5em; } .main_search_wrap .prod_search_con > li .inp_wrap .label_select.st1 .input_st.s1 { padding-bottom:.5em } .main_search_wrap .prod_search_con > li .inp_wrap .label_select.st1:after { margin-top:-0.525em } .main_search_wrap .prod_search_con > li .inp_wrap .inp_con_w2 select.input_st { color:#333; font-weight:400 !important } .main_search_wrap .prod_search_con > li .inp_wrap select.inp { width:40%; } .main_search_wrap .prod_search_con > li .inp_wrap input.inp { padding-left:10px; } .main_search_wrap .prod_search_con > li .inp_wrap .btn { position:absolute; top:0; border:none; background:none !important; padding:0 1em; right:0 } .main_search_wrap .prod_search_con > li .inp_wrap .btn .xi { font-size:1.750em; color:#111; transition:.3s; } .main_search_wrap .prod_search_con > li .inp_wrap .inp_con .check { margin-top:1em } /**/ .main_sec3 .con_in { flex:1; } .main_sec3 .con_in:first-child { flex:1 0 50%; max-width:55% } .main_video_wrap { margin-left:4em } .main_news { overflow:hidden; padding-bottom:3px; margin-top:2em } .main_news > li { width:100% } /*.main_news > li:nth-child(even) a { margin-left:-1px } */ .main_news > li > a { display:flex; justify-content: space-between; padding:1.35em 2em; padding-right:4em; border:1px solid #ddd; color:#333; margin-bottom:-1px; position:relative; background:#fff; border-left:none; border-right:none; } .main_news > li > a.photo { display: block; } .main_news > li:first-child > a:before { content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:#111; } .main_news > li > a:after { content:""; position:absolute; left:0; top:-1px; height:3px; width:100%; background:var(--siteC);; transition:.3s; transform:scaleX(0) } .main_news > li > a .date { display:inline-block; opacity:.4; text-align:right; margin-right: 1em; } .main_news > li > a .tit { font-size:1.125em; font-weight:400; } .main_news > li > a > dl > dd > .tit { padding-right: 2em; } .main_news > li > a .more { position:absolute; right:1em; top:50%; margin-top:-.525em; width:5em; line-height:1em; font-size:1em; text-align:center; opacity:.5 } .main_news > li > a .more:before { font-size:1.875em; padding:.5em } .main_news > li > a:hover:after { transform:scaleX(1) } .main_news > li > a:hover .more { color:var(--siteC);; opacity:1 } .main_news > li > a:hover .date { color:var(--siteC);; opacity:1 } .main_news > li > a:hover .tit { font-weight:400 } .main_news > li:first-child > a { padding:1.2em 1.5em } .main_news > li > a dl dt { width: 35%; } .main_news > li > a dl dt > .ph { width: 100%; height: 9em; } .main_news > li > a dl dt > .ph > img { width: 100%; height: 100%; object-fit: cover; } .main_news > li > a dl dd { width: 65%; padding-top:.5em; padding-left:2em; position:relative; } .main_news > li > a dl dd .date { position:absolute; left:2em; bottom:.5em } .main_news > li > a dl dd .more { right:0 } .main_news > li > a dl dt .img { background-size:100%; background-repeat:no-repeat; } .main_sec3 .mov_wrap { margin-top:2em; } .main_sec3 .main_vod.resize { margin-top:0; padding-bottom:72% } /*메인 버튼*/ .main_more { display: inline-block; cursor: pointer; } .main_more.pd1 { padding-top:2.5em; } .main_more.pd2 { padding-top:4em; } .main_more > .more { text-align:center; padding:0.825em 2em; background:#2a6bb6; border:1px solid #2a6bb6; border-radius:.5em; font-weight: 600; font-size: 1.05em; color:#fff; transition:.3s; cursor: pointer; } .main_more > .more.f-s { font-size: .8em; } .main_more > .more.submit { padding: .625em 1.5em; font-size: .85em; } .main_more > .more > .tt { font-size:.875em; } .main_more > .more > .tt ~ .xi { margin-left:.5em; } .main_more > .more > .xi { font-size:1.250em; padding-left: .5em; transform: rotate(-45deg); position: relative; top: 3px; } .main_more > .more.re:hover { background:#2a6bb6; border-color:#2a6bb6; color:#fff; } .main_more.white > .more { border: none; background: none; padding: 0em; color: #111; color: #222; } .main_more.bgin > .more { background: none; color: #fff; border: 1px solid #fff; border-radius: .5em; font-weight: 500; } .main_more.bgin > .more:hover { background: #fff; color: #111; } .main_more.bgin > .more:hover > .xi { color: var(--siteC); } /*홍보영상*/ .main_video_wrap .youtube_video { position: relative; padding-top: 2em; } .main_video_wrap .youtube_video > iframe { width: 100%; height: 24.25em; } /*메인 어바웃*/ .main_about { position:relative; padding:5em 0 7em 0; color:#fff; overflow:hidden } .main_about .wrapBg { position:absolute; left:0; top:0; width:100%; height:100%; background-attachment:fixed } .main_about .wrapBg:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:var(--siteC); opacity:.5 } .main_about .wrapIn { position:relative; display:flex; flex-direction:column; align-items:center; justify-content: center; gap:2em; text-align:center } .main_about .wrapIn .t1 { font-weight:700; font-size:2.25em } .main_about .wrapIn .t2 { font-size:1.125em; line-height:1.6 } .main_about .wrapTit { position:absolute; left:0; bottom:-.5em; width:100%; overflow:hidden; line-height:1 } .main_about .wrapTit > i { font-size:4.5em; text-transform:uppercase; font-weight:900; opacity:.3; mix-blend-mode:overlay } /**/ .main_vid_wrap { } .main_vid_wrap .in_vid { position:relative } .main_vid_wrap .in_vid .img { background-size:cover; padding-bottom:72% } .main_vid_wrap .in_vid .img:after { content:""; width:100%; height:100%; background:rgba(0,0,0,.4); position:absolute; transition:.3s } .main_vid_wrap .in_vid .play_btn { position:absolute; top:0; left:0; width:100%; height:100%; } .main_vid_wrap .in_vid .play_btn .xi { color:#fff; font-size:5em; transition:.3s; } .main_vid_wrap .in_vid:hover .play_btn .xi { color:#d94148; transition:.3s; } .main_vid_wrap .in_vid:hover .img:after { background:rgba(0,0,0,.7) } /*메인 제품*/ .main_product { position: relative; background: #f7f7f7; } .main_product .wrap_bg { position: absolute; left: 0; bottom: 0; width: 100%; height: 35vh; } .main_product .wrap_bg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.25); content: ''; } .main_product .wrap_prod { box-sizing:border-box; width:100%; position:relative; padding-top: 3em; } .main_product .wrap_prod .mainProdSlide .el { max-width: 25%; } .main_product .wrap_prod .mainProdSlide .el .prod_st { background:#fff; /*border:1px solid #eee; */ overflow:hidden; border-radius:1em; margin:.5em; position:relative } .main_product .wrap_prod .mainProdSlide .el .prod_st .img { padding:3em; position:relative; z-index:1 } .main_product .wrap_prod .mainProdSlide .el .prod_st .img .resize { background-size:contain } .main_product .wrap_prod .mainProdSlide .el .prod_st .con { padding:2em; border-top: 1px solid #e8e8e8; border-radius: 0 0 1em 1em; text-align:center; position:relative; z-index:1 } .main_product .wrap_prod .mainProdSlide .el .prod_st .con .cate { padding:.25em 1em; background:#e60013; position:absolute; left:2em; bottom:calc(100% - .75em); color:#fff; font-weight:500 } .main_product .wrap_prod .mainProdSlide .el .prod_st .con .t1 { font-weight:600; font-size:1.25em; transition:all .3s } .main_product .wrap_prod .mainProdSlide .el .prod_st .con .t2 { margin-bottom:10px; font-weight:600; font-size:1em; color:var(--siteC); opacity:.9; transition:all .3s } .main_product .wrap_prod .mainProdSlide .el .prod_st .con .t2.acc { color:var(--blue) } /*.main_product .wrap_prod .mainProdSlide .el .prod_st::after { content:''; width:100%; height:30%; background:var(--red); position:absolute; left:0; bottom:0; transform:translateY(100%) scaleY(0); opacity:0; transition:all .3s } .main_product .wrap_prod .mainProdSlide .el:hover .prod_st::after { transform:translateY(0) scaleY(100%); opacity:.8 } .main_product .wrap_prod .mainProdSlide .el:hover .prod_st .con .t1, .main_product .wrap_prod .mainProdSlide .el:hover .prod_st .con .t2 { color:#fff } */ .main_product .wrap_prod .mainProdSlide .el:hover .prod_st .con { background-color:var(--siteC) } .main_product .wrap_prod .mainProdSlide .el:hover .prod_st .con.acc { background-color:var(--blue) } .main_product .wrap_prod .mainProdSlide .el:hover .prod_st .con .t1 { color:#fff } .main_product .wrap_prod .mainProdSlide .el:hover .prod_st .con .t2 { color:#fff } .mainProdSlide_control { gap:0 .5em } .mainProdSlide_control .paging { width:20em; filter:brightness(0) invert(1) } /**/ .main_sec4 .con_in { flex:1; } .main_sec4 .main_rec_wrap > ul { margin-left:-15px } .main_sec4 .con_in:first-child { flex:1 0 50%; max-width:55% } .main_rec_wrap { margin-left:4em } .main_recboard { overflow:hidden; padding-bottom:3px; margin-top:2em } .main_recboard > li { width:100% } /*.main_recboard > li:nth-child(even) a { margin-left:-1px } */ .main_recboard > li > a { display:block; padding:1.5em 2em; padding-right:4em; border:1px solid #ddd; color:#333; margin-bottom:-1px; position:relative; background:#fff; border-left:none; border-right:none; } .main_recboard > li:first-child > a:before { content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:#111; } .main_recboard > li > a:after { content:""; position:absolute; left:0; top:-1px; height:3px; width:100%; background:var(--siteC);; transition:.3s; transform:scaleX(0) } .main_recboard > li > a .date { display:inline-block; opacity:.4; text-align:right; } .main_recboard > li > a .tit { display:inline-block; font-size:1.125em; font-weight:400; width:80% } .main_recboard > li > a .more { position:absolute; right:1em; top:50%; margin-top:-.525em; width:5em; line-height:1em; font-size:1em; text-align:center; opacity:.5 } .main_recboard > li > a .more:before { font-size:1.875em; padding:.5em } .main_recboard > li > a:hover:after { transform:scaleX(1) } .main_recboard > li > a:hover .more { color:var(--siteC);; opacity:1 } .main_recboard > li > a:hover .date { color:var(--siteC);; opacity:1 } .main_recboard > li > a:hover .tit { font-weight:400 } .main_sec4 .main_rec_wrap ul li { flex:1 0 50%; max-width:50%; } .main_sec4 .main_rec_wrap ul li .in { display:block; padding:2em; margin:0 0 15px 15px; box-sizing:border-box } .main_sec4 .main_rec_wrap ul li .t1 { color:#111; font-size:1.25em; text-align:left; font-weight:500 } .main_sec4 .main_rec_wrap ul li .xi { text-align:right; display:block; font-size:3.5em; padding-top:5px } .main_sec4 .main_rec_wrap ul li .c1 { color:#fff } .main_sec4 .main_rec_wrap ul li:nth-child(1) .in { background:#ec2541; } .main_sec4 .main_rec_wrap ul li:nth-child(2) .in { background:#aaa6a5; } .main_sec4 .main_rec_wrap ul li:nth-child(3) .in { background:#f5f5f5; color:#aeaeae; border:1px solid #ddd; } .main_sec4 .main_rec_wrap ul li:nth-child(4) .in { background:#f5f5f5; color:#aeaeae; border:1px solid #ddd; } .main_sec4 .main_rec_wrap ul li:hover { } .main_customer { padding-bottom:4em; } .main_customer .con { background:url(../images/main/main_con3_bg0.jpg) no-repeat 50% 50%; background-size:cover; background-attachment:fixed; text-align:center; } .main_customer .list { margin-top:1.875em; } .main_customer .list > li { flex:1; margin-left:1.875em; } .main_customer .list > li:first-child { margin-left:0; } .main_customer .list > li .bg { background-repeat:no-repeat; background-position:50% 50%; background-size:cover; } .main_customer .list > li .bg1 { background-image:url(../images/main/main_con3_bg1.jpg); } .main_customer .list > li .bg2 { background-image:url(../images/main/main_con3_bg2.jpg); } .main_customer .list > li .bg3 { background-image:url(../images/main/main_con3_bg3.jpg); } .main_customer .list > li .in { height:15.625em; padding-left:3.125em; } /* ================================================================================= SUB PAGE =================================================================================*/ /**/ .page_tab { margin-bottom:2.5em; text-align:center; } .page_tab .tab { display:flex; } .page_tab .tab > li > a { position:relative; /*z-index:99; */ display:block; min-width:auto; margin-left:-1px; padding:1em 1em; background:#f0f0f0; border:1px solid #ccc; border-bottom-color:#333; color:#777; transition-duration:.2s; } .page_tab .tab > li:first-child > a { margin-left:0; } .page_tab .tab > li > a .tt { font-size:1.063em; font-weight:500 } .page_tab .tab > li:hover > a, .page_tab .tab > li.on > a { z-index:1; background:#fff; border-color:#111; border-bottom-color:#fff; color:#111; } /**/ .page_tab.faq .tab { overflow:hidden } .page_tab.faq .tab { display:block; padding-top:1px; padding-left:1px } .page_tab.faq .tab > li { width:20%; float:left } .page_tab.faq .tab > li > a { border-bottom-color:#ccc; margin-top:-1px } .page_tab.faq .tab > li:hover > a, .page_tab.faq .tab > li.on > a { background:var(--siteC);; color:#fff; border-color:var(--siteC); } .page_tab.faq .tab > li:first-child > a { margin-left:-1px } /*tab*/ .page_tab_wrap { text-align:center; } .page_tab_wrap .page_tab { } .page_tab_wrap .page_tab .tab1 { font-size:0; margin-bottom:1em } .page_tab_wrap .page_tab .tab1 > li { display:inline-block; *display:inline; zoom:1; font-size:1rem; } .page_tab_wrap .page_tab .m_mypage .tab1 > li { width:14.2857%; } .page_tab_wrap .page_tab .tab1 > li > a { display:block; margin:0 5px; height:45px; font-size:1.125em; color:#888; font-weight:500; letter-spacing:-0.5px; text-transform:uppercase; border-bottom:5px solid #ddd; transition-duration:.3s; padding:0 1em } .page_tab_wrap .page_tab .tab1 > li.on > a { color:var(--siteC); !important; border-bottom-color:var(--siteC); !important } /*퍼슨그룹*/ .page_ceoWrap { padding-top:3em } .page_ceoWrap .p1 { font-size:1.8em; font-weight:500; margin-bottom:.5em; } /*.page_ceoWrap .p1::after { content:''; width:70px; height:1px; background:#1b58a5; display:block; margin:.8em 0 .5em; } */ .page_ceoWrap .st1 { color:#da4148; vertical-align:top; } .page_ceoWrap .left { float:left; width:50%; } .page_ceoWrap .right { float:right; width:50%; } .page_ceoWrap .page_ceoT .right .inner { margin-left:0 } .page_ceoWrap .right .inner { margin-left:100px; } .page_ceoWrap .page_ceoB { padding:3em 0 0 0; } .page_ceoWrap .page_ceoT .t_w { text-align:center; display:block; } .page_ceoWrap .page_ceoT .t_w .tit { display:inline-block; text-align:center; font-weight:700; font-size:1.6em; letter-spacing:-1.5px; line-height:1.5; padding-bottom:2em; color:#0065a4; position:relative; } .page_ceoWrap .page_ceoT .t_w .tit:before { content:""; width:35px; height:27px; position:absolute; left:-40px; top:6px; background:url(../images/sub/ceo_l.png) no-repeat left top; background-size:70%; } .page_ceoWrap .page_ceoT .t_w .tit:after { content:""; width:35px; height:27px; position:absolute; right:-50px; top:6px; background:url(../images/sub/ceo_r.png) no-repeat right top; background-size:70%; } .page_ceoWrap .txt_wrap .tit { font-weight:700; letter-spacing:-2px; font-size:1.6em; line-height:1.3; color:#0065a4; margin-bottom:1em; } .page_ceoWrap .txt_wrap .txt { color:#444; padding:.6em 0; font-size:1.068em; letter-spacing:.2px; line-height:1.5; font-weight:400; } .page_ceoWrap .txt_wrap .txt.ceo_tx { text-align:right; color:#888; margin-top:1.5em; } .page_ceoWrap .txt_wrap .txt.ceo_tx .ceo_name { font-weight:600; color:#333; font-size:1.25em; letter-spacing:6px; } .page_ceoWrap.st2 { padding: 2.75em 0; } .page_ceoWrap.st2 .p1 { font-size:22px; font-weight:500; margin-bottom:.5em; } /*.page_ceoWrap.st2 .p1::after { content:''; width:70px; height:1px; background:#1b58a5; display:block; margin:.8em 0 .5em; } */ .page_ceoWrap.st2 .st1 { color:#da4148; vertical-align:top; } .page_ceoWrap.st2 .left { float:left; width:45%; padding: 1em; box-sizing: border-box; } .page_ceoWrap.st2 .right { float:right; width:55%; padding: .5em; box-sizing: border-box; position: relative; } /* .page_ceoWrap.st2 .right::before { content: ""; position: absolute; top: 55%; left: -1.75em; transform: translateY(-50%); width: 1px; height: 100%; background-color: #ddd; } */ .page_ceoWrap.st2 .page_ceoT .right .inner { margin-left:0 } .page_ceoWrap.st2 .right .inner { margin-left:100px; } .page_ceoWrap.st2 .page_ceoB { padding:3em 0 0 0; } .page_ceoWrap.st2 .page_ceoT .t_w { text-align:center; display:block; } .page_ceoWrap.st2 .page_ceoT .t_w .tit { display:inline-block; text-align:center; font-weight:700; font-size:1.6em; letter-spacing:-1.5px; line-height:1.5; padding-bottom:2em; color:#0065a4; position:relative; } .page_ceoWrap.st2 .page_ceoT .t_w .tit:before { content:""; width:35px; height:27px; position:absolute; left:-40px; top:6px; background:url(../images/sub/ceo_l.png) no-repeat left top; background-size:70%; } .page_ceoWrap.st2 .page_ceoT .t_w .tit:after { content:""; width:35px; height:27px; position:absolute; right:-50px; top:6px; background:url(../images/sub/ceo_r.png) no-repeat right top; background-size:70%; } .page_ceoWrap.st2 .txt_wrap .tit { font-weight:700; letter-spacing:-2px; font-size:1.6em; line-height:1.3; color:#0065a4; margin-bottom:1em; } .page_ceoWrap.st2 .txt_wrap .txt { color:#444; padding:.6em 0; font-size:16px; letter-spacing:.2px; line-height:1.5; font-weight:400; } .page_ceoWrap.st2 .txt_wrap .txt.ceo_tx { text-align:right; color:#888; margin-top:1.5em; } .page_ceoWrap.st2 .txt_wrap .txt.ceo_tx .ceo_name { font-weight:600; color:#333; font-size:1.25em; letter-spacing:6px; } .tr35 { transform: translateY(35px); } .tr45 { transform: translateY(40px); } .tr55 { transform: translateY(55px); } .tr25 { transform: translate(20px, 30px); } .tr75 { transform: translate(75px, 50px); } .imgsz40 { width: 60%; } /**/ .page_sec { margin-top:3em } .page_sec1 { margin-top:1em } .page_sec2 { margin-top:2em } .hover_st1 { cursor:pointer } .hover_st1 .hover_in { position:relative; overflow:hidden } .hover_st1 .hover_in .obj { transition-duration:.5s } .hover_st1 .hover_in .layer { opacity:0 } .hover_st1 .hover_in .layer .more { transition-duration:.3s } .hover_st1 .hover_in .layer.st1 { position:absolute; left:0; top:0; width:100%; height:100%; /*background:rgba(0,0,0,.5); */display:flex; align-items:center; justify-content:center; color:#fff; transition-duration:.2s } .hover_st1 .hover_in .layer.st1 .more { font-size:3em } .hover_st1 .hover_in .layer.st2 { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(27, 91, 143,.6); display:flex; align-items:center; justify-content:center; color:#fff; transition-duration:.2s } .hover_st1 .hover_in .layer.st2 .more { margin-left:.5em; margin-top:-.075em; vertical-align:top } .hover_st1 .hover_in .layer.st2 .more:before { content:"\e917" } .hover_st1:hover .hover_in .obj { transform:scale(1.2) } .hover_st1:hover .hover_in .layer { opacity:1 } .hover_st1:hover .hover_in .layer .more { transform:rotate(90deg) } .vm_wrap { display:block; text-align:center; white-space:nowrap; } .vm_wrap:before { content:""; display:inline-block; *display:inline; zoom:1; vertical-align:middle; width:0; height:100%; } .vm_tt { display:inline-block; *display:inline; zoom:1; vertical-align:middle; white-space:normal; } .vm_wrap img { display:inline-block; *display:inline; zoom:1; vertical-align:middle; max-height:100%; } /*for_response*/ .PC1680 { display:block; } .PC1680f { display:flex; } .PC1680i { display:inline-block; } .PC1680t { display:table; } .PHONE1680 { display:none; } .PHONE1680f { display:none; } .PHONE1680i { display:none; } .PHONE1680t { display:none; } .PC1440 { display:block; } .PC1440f { display:flex; } .PC1440i { display:inline-block; } .PC1440t { display:table; } .PHONE1440 { display:none; } .PHONE1440f { display:none; } .PHONE1440i { display:none; } .PHONE1440t { display:none; } .PC1200 { display:block; } .PC1200f { display:flex; } .PC1200i { display:inline-block; } .PC1200t { display:table; } .PHONE1200 { display:none; } .PHONE1200f { display:none; } .PHONE1200i { display:none; } .PHONE1200t { display:none; } .PC1024 { display:block !important; } .PC1024f { display:flex; } .PC1024i { display:inline-block; } .PC1024t { display:table; } .PHONE1024n { display:none; } .PHONE1024 { display:none; } .PHONE1024f { display:none; } .PHONE1024i { display:none !important; } .PHONE1024t { display:none; } .PC768 { display:block !important; } .PC768f { display:flex; } .PC768i { display:inline-block; } .PC768t { display:table; } .PHONE768 { display:none !important; } .PHONE768f { display:none; } .PHONE768i { display:none; } .PHONE768t { display:none; } .PC500 { display:block; } .PC500f { display:flex; } .PC500i { display:inline-block; } .PC500t { display:table; } .PHONE500 { display:none; } .PHONE500f { display:none; } .PHONE500i { display:none; } .PHONE500t { display:none; } .PC412 { display:block; } .PC412f { display:flex; } .PC412i { display:inline-block; } .PC412t { display:table; } .PHONE412 { display:none; } .PHONE412f { display:none; } .PHONE412i { display:none; } .PHONE412t { display:none; } .PC384 { display:block; } .PC384f { display:flex; } .PC384i { display:inline-block; } .PC384t { display:table; } .PHONE384 { display:none; } .PHONE384f { display:none; } .PHONE384i { display:none; } .PHONE384t { display:none; } .PC360 { display:block; } .PC360f { display:flex; } .PC360i { display:inline-block; } .PC360t { display:table; } .PHONE360 { display:none; } .PHONE360f { display:none; } .PHONE360i { display:none; } .PHONE360t { display:none; } .PC320 { display:block; } .PC320f { display:flex; } .PC320i { display:inline-block; } .PC320t { display:table; } .PHONE320 { display:none; } .PHONE320f { display:none; } .PHONE320i { display:none; } .PHONE320t { display:none; } .PC280 { display:block; } .PC280f { display:flex; } .PC280i { display:inline-block; } .PC280t { display:table; } .PHONE280 { display:none; } .PHONE280f { display:none; } .PHONE280i { display:none; } .PHONE280t { display:none; } /*개인정보처리방침*/ .privacy_area { border-top:2px solid #333; border-bottom:1px solid #666; position:relative; } .privacy_area .privacy_tt { position:absolute; left:0; top:0; width:178px; height:100%; border-left:1px solid #ccc; border-right:1px solid #ccc; text-align:right; } .privacy_area .privacy_tt strong { display:inline-block; *display:inline; zoom:1; font-size:1.308em; color:#fff; padding:20px 15px 0; } .privacy_area .privacy_box { background-color:#f9f9f9; padding:30px; } .privacy_area .privacy_box .privacy_in { overflow-y:hidden; height:auto; padding:30px; border:1px solid #ccc; background:#fff; line-height:1.6; margin-bottom:10px; color:#222; } .privacy_area .privacy_box .privacy_in > strong { font-weight:500; font-size:1.125em; } /* 인사말 */ .greet_wrap { position: relative; /* padding-bottom: 10em; */ overflow: hidden; } .greet_wrap::after { content: ''; width: 26em; height: 26em; background:url(../images/main/brand_bg.svg) no-repeat 0 0; opacity: .1; position: absolute; right: 0; bottom: 3em; z-index: -1; } .greet_wrap .txt_wrap .page_tt .tt.mt { margin-top: 2em; } .ceo_name { gap:1em; margin-top:4em; margin-right: 5em; } .ceo_name .position { font-size: 1.25em; } .ceo_name .name { font-weight: 800; font-size: 1.5em; } .greet_mid { margin: 4em 0; padding: 6em 0; border-radius: 1em; position: relative; z-index: 1; overflow: hidden; } .greet_mid .txt { text-shadow: 1px 1px 5px rgba(0,0,0,.15); } .greet_mid::after { content: ''; width: 100%; height: 100%; background: rgba(0,0,0, .35); position: absolute; left: 0; top: 0; } /* */ .conLay { } .conLay + .conLay { margin-top: 4em } .conLay .inner { gap:4em } .conLay .txt_wrap { flex:1; padding:3em 0 2em; } /* .conLay.layL .txt_wrap { padding-left: 1em; } */ /* .conLay.layR .txt_wrap { padding-right: 1em; } */ .conLay .txt_wrap .tit .line { width: 2.5em; height: 3px; margin-bottom: 1em; background:var(--siteC); } .conLay .txt_wrap .page_tt.s3 { line-height: 1.5; color:#333; } .conLay .img_wrap { width: 45%; } .conLay .img_wrap .img { } .conLay .img_wrap .img.rnd { border-radius: 1em; overflow: hidden; } .conLay.layR .img_wrap { order:-1; } .conLay.layR .img_wrap .img::after { left:auto; right:-.5em; } .conLay.st2 .img_wrap { width: 30%; } .conLay.st2 .img_wrap .img::after { display: none; } .page_txt .tit + .tit { margin-top:1em; } .page_txt .tit + .txt { margin-top:1.5em; } .page_txt .txt + .tit { margin-top:2.5em; } .page_txt .txt + .txt { margin-top:1.5em; } .sub_btn { } .sub_btn .btn { } /* 고객사 */ .siteList_wrap { } .siteList_wrap .siteList { gap:3em 1em } .siteList_wrap .siteList > li { width: calc((100% - 3em) / 4); } .siteList_wrap .siteList > li .logo { margin-bottom: 1em; border:1px solid #ddd; transition: all .3s; } .siteList_wrap .siteList > li .logo > a { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; padding:1.5em 0; } .siteList_wrap .siteList > li .logo img { max-width: 85%; height: 3.5em; object-fit: contain; } .siteList_wrap .siteList > li .tit { color:#333; } .siteList_wrap .siteList > li:hover .logo { border-color:var(--siteC) } /*기업소개*/ .page_con_bg { background:#f9f9f9; padding:6em 0 6em 0 } .page_con_wrap { padding:3em 0 10em 0; } .culture_con { } .culture_con ul { margin-left:-10px; } .culture_con ul li .inn { margin-left:10px; border:1px solid #ddd; height:320px; } .culture_con ul li .inn.bg01 { background:url(../images/sub/intro-main01.png); background-size:cover; background-position:center center; background-repeat:no-repeat; } .culture_con ul li .inn.bg02 { background:url(../images/sub/intro-main02.png); background-size:cover; background-position:center center; background-repeat:no-repeat; } .culture_con ul li .inn.bg03 { background:url(../images/sub/intro-main03.png); background-size:cover; background-position:center center; background-repeat:no-repeat; } .culture_con ul li .inn.bg04 { background:url(../images/sub/culture_bg04.jpg); background-size:cover; background-position:center center; background-repeat:no-repeat; } .culture_con ul li .inn .tt { background:#fff; font-weight:400; font-size:1em; display:block; padding:2em 1em; margin:280px 10px 0 10px; height:160px; text-align:center; box-shadow:3px 3px 10px rgba(0,0,0,.2); } .culture_con ul li .inn .tt .txt { text-align:left; line-height:1.5; display:block; padding:0 1em; word-break:break-all; color:#555; } .culture_con ul li .inn .tt .col { font-size:1.375em; display:block; font-weight:700; padding-bottom:.8em } .vision_list2 > li { border:1px solid #ddd; box-sizing:border-box; padding:1.5em 1.5em 8.5em; background:#fff; margin-left:-1px; position:relative; height:240px; } .vision_list2 > li .nmb { font-size:2em; font-weight:bold; display:inline-block; vertical-align:initial; } .vision_list2 > li .nmb2 { font-size:.6em; font-weight:normal; vertical-align:baseline; margin-left:8px; letter-spacing:-.5px; opacity:.6; } .vision_list2 > li .v_en { display:block; margin-top:15px; color:#333; } .vision_list2 > li .v_icon { position:absolute; bottom:10px; right:15px; opacity:.4; } .page_oemB { padding:3em 0 8em 0; text-align:center; background:url(../images/sub/page_bg01.jpg) no-repeat center center; background-size:cover } .page_oemB .list { margin-right:-5px; } .page_oemB .list .inner { border:1px solid rgba(255,255,255,.6); box-sizing:border-box; padding:1.5em 1em; margin-right:5px; background:rgba(255,255,255,.1); transition:.3s; } .page_oemB .list .inner:hover { background:rgba(255,255,255,0) } .page_oemB .list .icon { position:relative; margin:0 auto; width:82%; padding-top:82%; } .page_oemB .list .icon .re { position:absolute; top:0; left:0; width:100%; height:100%; } .page_oemB .list .icon img { max-width:120px; } .page_oemB .list .txt_wrap { } .page_oemB .list .txt_wrap > dt { font-size:1.45em; font-weight:600; color:#fff } .page_oemB .list .txt_wrap > dt .ts { background:#da4148; color:#fff; display:block; width:2.3em; height:2.3em; line-height:2.3em; margin:0 auto; border-radius:50%; margin-bottom:.3em; } .page_oemB .list .txt_wrap > dt .st1 { font-size:.570em; font-weight:300; display:block; } .page_oemB .list .txt_wrap > dd { line-height:1.5; opacity:1; color:#fff; margin-top:10px; min-height:48px; } .sub_page_tit3 .tit_wrap { position:relative; padding:0 2em 3em 2em; text-align:center; } .sub_page_tit3 .tit_wrap .en { font-family:'Ms','NotoSans',sans-serif; letter-spacing:0; } .sub_page_tit3 .tit_wrap .krL { font-weight:500; letter-spacing:0; } .sub_page_tit3 .tit_wrap .kr { font-weight:500; letter-spacing:0; } .sub_page_tit3 .tit_wrap .t1 { font-size:2.375em; color:#222; } .sub_page_tit3 .tit_wrap .t2 { font-size:1.2em; color:#3c3c3d; font-weight:400; letter-spacing:-1px } .sub_page_tit3 .tit_wrap .t1 * { position:relative; display:inline-block; vertical-align:middle } .sub_page_tit3 .tit_wrap .t1 > span { padding:0 .2em .7em .2em; } .sub_page_tit3 .tit_wrap .t1 > span:before { content:""; position:absolute; left:50%; bottom:0; width:28px; margin-left:-14px; height:2px; background:#193a63; opacity:1; } .sub_page_tit3 .tit_wrap .c1 { color:#fff } .sub_page_tit3 .tit_wrap .t1.c1 > span:before { background:#fff; opacity:.15 } .sub_page_tit3 .tit_wrap .t3 { font-size:1.750em; text-align:center; font-weight:300; margin-top:3em; display:inline-block; position:relative; padding:0 2em } .sub_page_tit3 .tit_wrap .t3:before { content:url(../images/sub/ceo_l.png); position:absolute; left:0; top:0; } .sub_page_tit3 .tit_wrap .t3:after { content:url(../images/sub/ceo_r.png); position:absolute; right:0; top:0; } .sub_page_tit3 .tit_wrap .t3 > strong { font-weight:600 } .sub_page_tit3 .tit_wrap .t4 { margin-top:2em; color:#333; font-size:1.125em; line-height:1.7; } /*연혁*/ .history_bgw { overflow:hidden; position:relative; margin:0 5em 3em 5em; } .history_bgw .bg_w { position:absolute; left:0; top:0; width:100%; height:100%; background-position:center top; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; } .history_bgw .txt_wrap { text-align:center; } .history_bgw .txt_wrap .en { font-weight: 700; padding-bottom:.5em; color:#fff; letter-spacing:5px; font-size:2.5em; } .history_bgw .txt_wrap .kr { font-size:1.7em; color:#fff; font-weight:500; } .history_bgw .line_wrap { position:relative; height:15em; } .history_bgw .line_wrap .line { position:absolute; background:#fff; width:1px; height:1px; transition:1s; opacity:.5; display:none; } .history_bgw .line_wrap .line.hor { transition-delay:1s } .history_bgw .line_wrap .line.top { top:0 } .history_bgw .line_wrap .line.bot { bottom:0 } .history_bgw .line_wrap .line.left { left:0 } .history_bgw .line_wrap .line.right { right:0 } .load .history_bgw .line_wrap { margin:2em 1.5em; } .load .history_bgw .line_wrap .line.ver { height:100% } .load .history_bgw .line_wrap .line.hor { width:40%; } .load .history_bgw .line_wrap .line { display:block } .history_wrap { position:relative; overflow:hidden; padding:2em 0; } .history_wrap:before, .history_wrap .lineAni { content:""; position:absolute; left:calc(24em + 3em); top:0; width:1px; height:100%; background:#ddd } .history_wrap .lineAni { height:0; background:#3167a6; transition:.3s } .history_wrap .lineAni:before, .history_wrap:after { content:""; position:absolute; left:50%; top:0; margin-left:-.5em; width:1em; height:1em; background:#fff; border:.25em solid #3167a6; border-radius:100%; box-sizing:border-box } .history_wrap:after { top:auto; left:calc(24em + 3em + 1px); bottom:0 } .history_wrap .history > li { gap:3em; margin-top:4em } .history_wrap .history > li .img_wrap { width: 24em; padding-bottom: 6em; } .history_wrap .history > li .img_wrap img { width: 100%; border-radius: 1em; object-fit: cover; box-shadow: 3px 3px 10px rgba(0, 0, 0, .1); } .history_wrap .history > li .con_wrap { flex:1; padding-left: 3em; padding-bottom: 3em; border-bottom: 1px solid #ddd; } .history_wrap .history > li:first-child { margin-top:0 } .history_wrap .history > li .year { width:50%; overflow:hidden; /* justify-content:flex-end */ } .history_wrap .history > li .year .wrap_in { position:relative; overflow:hidden; /* width:15em */ } .history_wrap .history > li .year .tt { display:inline-block; position:relative; padding:0 .5em; font-size:2.875em; letter-spacing:-3px; font-weight: 400; color:#3167a6; /* font-family: Georgia, "Times New Roman", Times, serif */ } /* .history_wrap .history > li .year .tt:before { content:""; position:absolute; left:100%; top:50%; margin-top:-1px; width:100%; border-top:2px dotted #aaa; } */ /* .history_wrap .history > li .year .tt:after { content:"'"; font-style:italic } */ .history_wrap .history > li .year .tt:after { content:""; width: .5em; height: .5em; border-radius: 50%; background: var(--siteC); opacity: .2; position: absolute; right: 10px; top: 3px; } .history_wrap .history > li .list { /* width:50%; */margin-top:1em } .history_wrap .history > li .list > li { margin-top:.5em } .history_wrap .history > li .list > li:first-child { margin-top:0 } .history_wrap .history > li .list .wrap_in { padding:0 2em } .history_wrap .history > li .list .wrap_in .img_wrap .resize { padding-bottom:45% !important; } .history_wrap .history > li .list .wrap_in .img_wrap .resize .img_r { text-align:right !important; } .history_wrap .history > li .list .wrap_in .img_wrap .resize .img_l { text-align:left !important; } .history_wrap .history > li .list .month { flex:0 0 3em } .history_wrap .history > li .list .month .tt { color:#999; font-size:1.25em; /* font-family:Georgia, "Times New Roman", Times, serif; */ letter-spacing:-1px } .history_wrap .history > li .list .month .tt:after { /* content:"월"; font-size:.813em; font-weight:500 */ } .history_wrap .history > li .list .detail > li { margin-top:.5em } .history_wrap .history > li .list .detail > li:first-child { margin-top:0 } .history_wrap .history > li .list .detail .tt { position:relative; padding:0 1.5em; margin-top:.125em; color:#333; font-size:1em; line-height:1.7; font-weight:400; word-break: keep-all; } .history_wrap .history > li .list .detail .tt:before { content:""; position:absolute; left:0; top:9px; width:.75em; border-top:2px solid #ddd } .history_wrap .history > li .list .detail .desc { width:calc(100% - 1.125em); margin:.5em 0 .5em 1.25em; padding:.8em; box-sizing: border-box; border: 1px solid #ddd; border-radius: .5em; font-size: .9375em; line-height: 1.5; color:#555; } /* 오시는길 */ /* location */ .map_inn { border-radius: 2em; border:1px solid #ddd; overflow: hidden; } .map_inn .root_daum_roughmap { width: 100%; } .map_inn .root_daum_roughmap .wrap_controllers { display: none; } .map_inn .root_daum_roughmap .map_border { display: none; } .bus_cir { background-color: #0d79d0; padding: 0.5em 1em; border-radius: 2em; color:#fff; margin-right:0.5em; } .bus_cir.st2 { background-color:#4ecc22; } .bus_cir.st3 { background-color:#e54c0f; } .train_cir { background-color: #ff4d00; padding: 0.5em; border-radius: 50%; width:1em; height:1em; line-height:1em; color:#fff; margin-left:.5em; text-align:center; } .train_cir.st2 { width: auto; height: auto; padding:.5em 1em; border-radius: 2em; background-color: #3cb44a; } .train_cir.st3 { width: auto; height: auto; padding:.5em 1em; border-radius: 2em; background-color: #69b996; } .train_cir.st4 { width: auto; height: auto; padding:.5em 1em; border-radius: 2em; background-color: #74c7c7; } /* service */ .board_cate.d3 > li { width:20%; } .board_cate.d4 > li { width:33.3%; } .sub_service .page_twrap { margin-top:0em; } .sub_service .page_twrap .page_tit { padding-top:1em; } .wrap_box2 { margin-top:4em; } .wrap_box2.flex > * { padding:1.4em .4em; border-top:2px solid #e8e8e8; } .wrap_box2.flex > .flex_w1 { flex:1; position:relative; padding-left:0; padding-right:0; border-top-color:#c6cad1; } .wrap_box2.flex > .flex_w1:before, .wrap_box2.flex > .flex_w1:after { content:""; position:absolute; top:-2px; height:2px; width:.8em; } .wrap_box2.flex > .flex_w1:before { left:0; background:#6574b7; } .wrap_box2.flex > .flex_w1:after { left:.8em; background:#6574b7; } .wrap_box2.flex > .flex_w1 .f_tit { font-size:1.3em; font-weight:600; } .wrap_box2.flex > .flex_w1 .f_tit2 { font-size:1.55em; font-weight:600; } .wrap_box2.flex > .flex_w2 { flex:4; margin-left:2em; } .wrap_box2.flex > .flex_w2 .tw { font-size:1.1em; line-height:1.5; color:#222; } .wrap_box2.flex > .flex_w2 .tw2 { font-size:1.3em; padding-left: 1em; line-height:1.5; color:#222; } .wrap_box2.flex > .flex_w2 .tw3 { font-size:1.1em; padding-left: 1em; line-height:1.5; color:#222; } .wrap_box2.flex > .flex_w2 .inner { padding-left:1em; } .wrap_box2.flex .contactList { gap:.5em 4em; } .wrap_box2.flex .contactList .tw { display: flex; align-items: center; gap:1em; } .wrap_box2.flex .contactList .tw .xi { color:#777 } .station_list { gap: 0.5em; } .station_list > li { position: relative; } .station_list > li + li::before { content: '/'; display: inline-block; padding-right: 0.5em; color:#666; } .busNum_list { display: flex; flex-wrap: wrap; gap: 0.5em; } .busNum_list > li { position: relative; } .busNum_list > li + li::before { content: '/'; display: inline-block; padding-right: 0.5em; color:#666; } /*** 제품소개 ***/ .prodListWrap { margin-bottom: 6em; } .prodList { gap: 3em 2em; } .prodList > li { width: calc((100% - 4em) / 3); } .prodList > li .item { display: block; width: 100%; height: 100%; padding: 2em; box-sizing:border-box; border:1px solid #ddd; border-radius:.25em; transition: all .3s; } .prodList > li .item .img_wrap { padding: 1em 1em 1.5em; border-bottom: 1px solid #ddd; } .prodList > li .item .img_wrap .prdImg { width:100%; height:100%; overflow:hidden; } .prodList > li .item .img_wrap .prdImg img { display: block; width: 100%; height: 100%; transition: all .5s ease-in-out; } .prodList > li .item .txt_wrap { padding: 1.5em .5em 1em; } .prodList > li .item .txt_wrap .prdName { font-weight: 600; font-size: 1.75em; color:var(--siteC2); } .prodList > li .item .txt_wrap .prdInfo { margin-top:1em; font-size: .9375em; color:#666; word-break:keep-all} .prodList > li:hover .item .img_wrap .prdImg img { transform:scale(1.1) } .prodList > li:hover .item { border-color:var(--siteC); box-shadow: 3px 3px 15px rgba(15,96,207,.15); } .prodList > li:hover .item .txt_wrap .prdInfo { text-decoration: underline; } /* prod_view */ .prodView_page { } .prodView_intro { gap:4em; margin-bottom: 4em; padding: 0 3px; } .prodView_intro .prodView_img { width:45%; padding: 1em; box-sizing: border-box; border:1px solid #ddd; box-shadow:0 0 5px rgba(0, 0, 0, .1); overflow: hidden; } /* .prodView_intro .prodView_img .img { width: 100%; } .prodView_intro .prodView_img .img img { width: 100%; } */ .prodView_intro .prodView_img .prdimgSlide { overflow: hidden; } .prodView_intro .prodView_img .prdimgSlide .swiper-wrapper { } .prodView_intro .prodView_img .prdimgSlide .el { } .prodView_intro .prodView_img .prdimgSlide .el .img { width: 100%; height: 0; padding-bottom: 80%; position: relative; } .prodView_intro .prodView_img .prdimgSlide .el .img img { width: 100%; height: 100%; object-fit: contain; position: absolute; left: 0; top: 0; } .prodView_intro .prodView_img .prdimgSlide .swiperBtn { display: flex; justify-content: center; align-items: center; width: 2.5em; height: 2.5em; border:none; background: rgba(0, 0, 0, .15); color:#fff; } .prodView_intro .prodView_img .prdimgSlide .swiperBtn::before { font-size: 1.125em; } .prodView_intro .prodView_img .prdimgSlideThumb { background: #f8f8f8; overflow: hidden; } .prodView_intro .prodView_img .prdimgSlideThumb .swiper-wrapper { } .prodView_intro .prodView_img .prdimgSlideThumb .el { box-sizing: border-box; } .prodView_intro .prodView_img .prdimgSlideThumb .el .img { width: 100%; height: 100%; } .prodView_intro .prodView_img .prdimgSlideThumb .el .img img { width: 100%; height: 100%; object-fit: cover; } .prodView_intro .prodView_info { flex:1; padding: 1em 0; position:relative; } .prodView_intro .prodView_info .prod_tit { border-bottom:2px solid var(--siteC2); padding:.5em .5em 1.5em .5em } .prodView_intro .prodView_info .prod_tit .t1 { font-size:2.25em; color:var(--siteC); font-weight:600; } .prodView_intro .prodView_info .prod_tit .t2 { font-size:1.1em; color:#555; padding-top:.625em; } .prodView_intro .prodView_info .table_st .w_form_tit { width:12em; } .prodView_intro .prodView_info .table_st th, .prodView_intro .prodView_info .table_st td { height: 1.875em; padding:1em 1.5em; text-align-last: left; } .prodView_intro .prodView_info .table_st tr:not(:last-child) th, .prodView_intro .prodView_info .table_st tr:not(:last-child) td { border-bottom:1px solid #ddd } .prodView_intro .prodView_info .table_st th { background-color:#f6f6f6; } .prodView_intro .prodView_info .table_st.prod_info { border-bottom:2px solid #333; } .prodView_intro .prodView_info .table_st.prod_info .tt { font-size:1.1em; color:#111; } .prodView_intro .prodView_info .table_st.prod_info .td { font-size:1.1em; color:#555; } .prodView_intro .prodView_btn { gap:.2em; } .prodView_intro .prodView_btn > li { flex:1; } .prodView_intro .prodView_btn > li * { transition:.3s } .prodView_intro .prodView_btn > li.st1 { } .prodView_intro .prodView_btn > li.st2 { } .prodView_intro .prodView_btn > li.st3 { } .prodView_intro .prodView_btn > li.st4 { } .prodView_intro .prodView_btn > li .btn { display:block; line-height:3.5em; text-align:center; font-size:1.063em; font-weight:500; border:1px solid transparent; position:relative; } .prodView_intro .prodView_btn > li .btn * { vertical-align:top; } .prodView_intro .prodView_btn > li .btn .icon { font-size:1.5em; padding-right:10px } .prodView_intro .prodView_btn > li.st1 .btn { background:var(--siteC2); color:#fff } .prodView_intro .prodView_btn > li.st2 .btn { background:#333; color:#fff } .prodView_intro .prodView_btn > li.st3 .btn { background:#fff; border-color:#333; color:#333 } .prodView_intro .prodView_btn > li.st4 .btn { background:#844890; color:#fff } .prodView_intro .prodView_btn > li .btn .arrow { font-size:1em; width:0; overflow:hidden } .prodView_intro .prodView_btn > li .btn .arrow:after { content:"\e93f"; padding-left:3px } .prodView_intro .prodView_btn > li:hover .btn .arrow { width:20px } .prodView_spec { } /* .prodView_spec .list_tab { display: flex; border-left: 1px solid #ddd; border-right: 1px solid #ddd; } .prodView_spec .list_tab > li { flex:1; height: 3.5em; border-top:1px solid #ddd; border-bottom: 2px solid #111; background: #fff; transition: border-color .3s; } .prodView_spec .list_tab > li:not(.on) + li { border-left: 1px solid #ddd;; } .prodView_spec .list_tab > li .tab_tt { font-size: 1.125em; color:#333; text-align: center; line-height: 3.5rem; } .prodView_spec .list_tab > li.on { border:2px solid #111!important; border-bottom: none!important; } */ /* line style */ .prodView_spec .list_tab { display: flex; } .prodView_spec .list_tab > li { flex:1; height: 3.5em; background: #f4f4f4; transition: all .3s; } .prodView_spec .list_tab > li:not(.on) + li { border-left: 1px solid #ddd; } .prodView_spec .list_tab > li .tab_tt { font-size: 1.125em; color:#777; text-align: center; line-height: 3.5rem; } .prodView_spec .list_tab > li.on { background: var(--siteC2); } .prodView_spec .list_tab > li.on .tab_tt { color:#fff; } .prodView_spec .con_idx { border-top:1px solid #ddd; } .prodView_spec .con_idx .idx { } .prodView_spec .con_idx .idx .tab_con { } .prodView_spec .spec_wrap { margin-top:2em; padding: 0 1em; box-sizing: border-box; } /* .prodView_spec .spec_wrap + .spec_wrap { margin-top:2em; } */ .prodView_spec .spec_wrap .spec_tit { border-bottom: 1px solid #111; padding: 0.75em 0; } .prodView_spec .spec_wrap .spec_tit .t1 { font-weight: 600; font-size: 1.5em; color:#333; } .prodView_spec .spec_wrap .spec_con { padding:3em 1em; } .prodView_spec .spec_wrap .spec_con.spec { padding:2em 1.5em; } .prodView_spec .spec_wrap .spec_con.as { padding:2em 3em; } .prodView_spec .spec_wrap .spec_con.bg { background-color:#f6f6f6; } .prodView_spec .spec_wrap .spec_con.bg .inner { padding:2.5em 1.5em; border-radius:.5em; background-color:#fff; } .prodView_spec .spec_wrap .spec_con.spec .inner > p { font-size:1.125em; line-height: 1.4; color:#333; word-break:keep-all; } .prodView_spec .spec_wrap .spec_con.spec .inner > p + p { margin-top:2em; } .prodView_spec .spec_wrap .spec_con.spec .inner > p strong { font-weight: 600; color:var(--siteC2); } .prodView_spec .spec_wrap .spec_con.spec .inner table { margin:0 auto } .prodView_spec .spec_wrap .spec_con.spec .inner img { max-width: 100%; } .relprod_wrap { padding:0 1.55em; box-sizing:border-box; position: relative; } .relprod_wrap .relprod_slide { overflow:hidden; } .relprod_wrap .relprod_slide .swiper-slide { } .relprod_wrap .relprod_slide .prod { } .relprod_wrap .relprod_slide .swiperBtn.next { position: absolute!important; right: 0; } .relprod_wrap .relprod_slide .swiperBtn.prev { position: absolute!important; left: 0; } /* prodSpectable */ .prodSpectable { width: 100%; border-collapse:collapse; border-spacing:0; border-top:2px solid var(--siteC); } .prodSpectable th, .prodSpectable td { height: 2.5em; padding: .5em 1em; border:1px solid #ddd; } .prodSpectable td { } .prodSpectable th { background: #f4f4f4; color:#333; } /* dot_list */ .dot_list { } .dot_list > .dot { position: relative; } .dot_list > .dot + .dot { margin-top: 0.8em; } .dot_list > .dot.st1 { padding-left: 1em; font-size: 1.125em; } .dot_list > .dot.st1::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); position: absolute; left: 0; top: 8px; } /* 인증서 */ .license_list { gap:4em 2em; } .license_list > li { width:calc( ( 100% - 4em) / 3); height: 60%; box-sizing: border-box; } .license_list > li .thumb { overflow:hidden; width:100%; height: 100%; border:1px solid #ddd; position: relative; transition:all .6s; } .license_list > li .thumb img { width: 100%; height: 100%; transform:scale(1); transition:all .6s; } .license_list > li .tit { width:100%; margin-top:.5em; padding:.8em .5em; box-sizing: border-box; text-align:center; word-break: keep-all; } .license_list > li .tit > span { display: block; } .license_list > li .tit .t1 { font-weight: 600; font-size:1.125em; color:var(--siteC3); } .license_list > li .tit .t2 { color:#555; } .license_list > li .hover_line { } .license_list > li .hover_line .line { content:""; background:#03569f; position:absolute; z-index:10; transition:all 0.3s ease-out; } .license_list > li .hover_line .line:nth-child(1) { width:0; height:2px; left:0; top:0; } .license_list > li .hover_line .line:nth-child(2) { width:0; height:2px; right:0; bottom:0; } .license_list > li .hover_line .line:nth-child(3) { width:2px; height:0; left:0; bottom:0; } .license_list > li .hover_line .line:nth-child(4) { width:2px; height:0; right:0; top:0; } .license_list > li:hover .thumb { box-shadow: 3px 3px 15px rgba(0, 0, 0, .1) } .license_list > li:hover .thumb img { transform: scale(1.05); } .license_list > li:hover .hover_line .line { transition:all 0.3s 0s ease-out; } .license_list > li:hover .hover_line .line:nth-child(1) { width:100%; } .license_list > li:hover .hover_line .line:nth-child(2) { width:100%; } .license_list > li:hover .hover_line .line:nth-child(3) { height:100%; } .license_list > li:hover .hover_line .line:nth-child(4) { height:100%; } .license_wrap:not(:last-child) { margin-bottom:5em; } .license_wrap .slide_tit { margin-bottom:1.5em; padding:.8em; border-radius:.5em; background:linear-gradient(90deg, var(--color_dblue), var(--color_lblue)); font-weight: 600; font-size:1.25em; color:#fff; } /* */ .video_wrap { width: 80%; margin:0 auto; } .video-container {position: relative;width: 100%;height: auto;margin:0 auto 2em;padding-top: 56.25%; } .video-container iframe {z-index: 1;top: 0;left: 0;position: absolute;width: 100%;height: 100%; } /*** 서비스 ***/ .dp1_service #contents .sub_nav > li.tt.dp3on { display: none; } .sub3_menu_wrap { margin-bottom: 3em; padding: 0 3vw; } .sub3_menu { display: flex; gap: 0.5em; } .sub3_menu > li { flex:1; } .sub3_menu > li > a { display: flex; justify-content: center; align-items: center; height: 3.5em; padding: 0 1.5em; box-sizing: border-box; border-radius: 3.5em; background: #f4f4f4; border:1px solid #ddd; } .sub3_menu > li >a .tt { font-size: 1.25em; color:#666; text-align: center; } .sub3_menu > li.on > a { background: var(--siteC2); } .sub3_menu > li.on > a .tt { color:#fff; } /* 문의 */ /*agree*/ .agree_wrap { padding: 1.5em 0 1em; font-size: .938em; line-height: 2; border-top: 2px solid #333; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; /*padding:2em; */ /* background:#f9f9f9; */ } .agree_wrap .agree.st strong { font-size: 1.2em; letter-spacing: .5px; line-height: 1.9; /*padding:1em 0; */ color: #222; font-weight: 500; } .agree_wrap .textarea_box { width: 100%; height: 200px; padding: 20px; box-sizing: border-box; overflow-y: auto; font-size: 14px; line-height: 1.4; } .agree_wrap .textarea_box h3 { color: #333; margin-bottom: 10px; font-size: 1.2rem; font-weight: 500 } .code { display: inline-block; vertical-align: middle; height: 2.5em; line-height: 2.5em; background: #222; color: white; font-weight: 300; margin-right: 5px; padding: 0 1em; text-align: center } /*ci*/ .hline { width: 2.5em; height: 3px; margin-bottom: 1em; background:var(--siteC); } .box_pat2 { background: url(../images/sub/bg_pattern2.png) repeat 0 0; border-right: 0px solid #f1f0f0; border-bottom: 0px solid #f1f0f0; } .colorbox { position: relative; width: 90%; height: 10em; background-color: #00a0df; } .bar3{position: relative;} .bar3::before{content: ""; width: 100%; height: 1px; background-color: #e8e8e8; position: absolute; top: 0; left: 0; } .sub_page_wrap > .in.w1 { width: 100%; } .img_con.w1, .txt_con.w1 { width: 100%; } .img_con.w2, .txt_con.w2 { width: 50%; } .con.w1 { width: 100%; } .con.w2 { width: 50%; } .img_con.bline { border: 1px solid #ddd; padding:2em 0; } .txt_con > .tt1 { font-size: 2em; } .txt_con > .tt2 { font-size: 1.3em; padding: .35em 0; } .page_tit > .tit { font-size:4em; font-weight:700; } .page_tit > .tit2 { font-size:2.5em; font-weight:700; } /*service*/ .flex_box .fst1 > li { flex: 1 1 100%; max-width: 100%; } .flex_box .fst2 > li { flex: 1 1 50%; max-width: 50%; } .flex_box .fst2 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst3 > li { flex: 1 1 33.33%; max-width: 33.33%; } .flex_box .fst3 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst4 > li { flex: 1 1 25%; max-width: 25%; } .flex_box .fst4 > li > .in { margin: 0 0 1em 1em; } .bline2 { border: 1px solid #ddd; } .Rnum{position: relative; font-weight: 700; color: var(--siteC); font-size: 1.5em; margin-left: .5em;} .Rnum::before{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: .5em; border-radius: 50%; border: 2px solid var(--siteC);} .txt_con > .titwrap{padding: .3em 0;} .txt_con > .txtwrap{padding-left: 1.3em;} .txt_con > .txtwrap:first-of-type{padding-top: .8em;} .txt_con > .txtwrap > .txtfz1{font-size: 1em; color: #333; padding-bottom: .5em;} .dott { position: relative; } .dott::before { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: .5em; height: .5em; border-radius: 50%; background-color: var(--siteC); } .dott2 { position: relative; } .dott2::before { content: ''; position: absolute; top: 50%; left: -15px; transform: translateY(-50%); margin: auto; width: 3px; height:3px; border-radius: 50%; border: 2px solid var(--siteC); } .dott3 { position: relative; } .dott3::before { content: ""; position: absolute; top: 10px; left: 0; width: .5em; height: .5em; border-radius: 50%; background-color: var(--siteC); }