@charset "utf-8"; /* CSS Document */ .box0 { padding: 0 8vw; margin: 0 auto; } .box1 { width: var(--baseWidth); margin: 0 auto; max-width: var(--fullWidth); } .box2 { width: var(--smallWidth); margin: 0 auto; max-width: var(--fullWidth); } .box3 { width: var(--subWidth); margin: 0 auto; max-width: var(--fullWidth); } html.allGnbOn [data-lenis-scroll] { pointer-events: none; touch-action: none; } .hideT { position: absolute; z-index: -1; display: inline-block; overflow: hidden; height: 1px; width: 1px; border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); word-break: initial; word-wrap: initial; } .hideT.close { display: none } .gnb li.m_hide { display: none !important } .gnb .layer { display: none !important; } .gnb .blank .arrow:before { content: "\e980"; } .pcHide { display: none !important; } .moHide { display: block !important; } .sns > li > .in.blog .xi:before { content: "\ebf9"; } .sns > li > .in.youtube .xi:before { content: "\ec32"; } .sns > li > .in.facebook .xi:before { content: "\ebd3"; } .sns > li > .in.instagram .xi:before { content: "\ebe9"; } .sns > li > .in.kakao .xi:before { content: "\ebee"; } .ps_sticky { position: sticky; position: -webkit-sticky; top: 0; } .fullH { height: calc(100vh); box-sizing: border-box; } .fullMH { min-height: calc(100vh) !important; box-sizing: border-box; } .filW { filter: var(--crWhitefil); } /*화이트*/ .filB { filter: var(--crBlackfil); } /*블랙*/ .filRE { filter: var(--crfilRE); } /*색상반전*/ .page_con{padding: 0 0 4em 0em;position: relative;} .page_con.bg1{position: relative;padding: 4em 0 4em 0em;} /* .page_con.bg1::before{content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 20em; background-image: url(../images/sub/company/sum_bg.png); background-repeat: no-repeat; background-size: cover;z-index: -1;} */ /*header*/ .headT { padding-top: var(--headH); } .headH, #header .gnb_wrap .gnb > li, #header .gnb_wrap .gnb > li .dp1 { height: var(--headH); transition: height .2s, background .2s, padding .5s ease; box-sizing: border-box; } #header { z-index: 999; position: fixed; top: 0; left: 0; width: 100%; transition: transform .5s, background-color .5s; } #header .inner { gap: 0 1vw; color: #fff; } #header .inner .inner_wrap { gap: 5em; } #header .logo { width: 13.5em; filter: var(--crWhitefil);} .scroll #header .logo{filter: none;} #header .util_wrap { } /* .wrapHide, */ /* html:not(.scroll) #header .logo { filter: var(--crWhitefil); } */ .scroll.up #header { background: rgba(255, 255, 255, 1); backdrop-filter: blur(12px); box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.1); } .scroll.up #header .inner { color: var(--crBlack); } .scroll.up #header .all_wrap .allBtn .quad_btn > li { background: var(--siteC); } .scroll.up #header .snb-list li a { color: #fff; } .scroll:not(.up) #header { transform: translateY(-100%) } #header .gnb_wrap .gnb > li { overflow: hidden; width: 11em; transition: width 0.5s, background-color 0.5s; } #header .all_wrap .all_layer .wrap_middle .gnb > li.m_community { display: none; } #header .gnb_wrap .gnb > li .dp1 { position: relative; /* padding:0 2.5em; */ } #header .gnb_wrap .gnb > li .dp1 .tt { font-size: 1.1em; font-weight: 500; text-transform: uppercase; } #header .gnb_wrap .gnb > li .dp1:after { content: ""; display: block; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: #fff; opacity: 0; transform: scaleX(0); transition: transform .3s; } #header .gnb_wrap .gnb > li:hover .dp1:after, #header .gnb_wrap .gnb > li.on .dp1:after { opacity: 1; transform: scaleX(.5); } #header .gnb_wrap .gnb > li .dp2 { display: block; margin: 0 auto; padding: 1.5em 0; } #header .gnb_wrap .gnb > li:hover { background: var(--siteC); color: rgba(255, 255, 255, .8); } #header .gnb_wrap .gnb > li:hover .dp1 .tt { color: #fff; } #header .gnb_wrap .gnb > li .dp2 > li > a { position: relative; display: block; padding: .75em .5em; } #header .gnb_wrap .gnb > li .dp2 > li > a .tt { position: relative; font-size: .96em; font-weight: 500; padding-bottom: .1em; } #header .gnb_wrap .gnb > li .dp2 > li > a .tt:after { /* content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--crBlack); */ } #header .gnb_wrap .gnb > li .dp2 > li > a:hover .tt { color: #fff; } #header .gnb_wrap .gnb > li .dp3 { display: none; } #header .gnb_wrap .gnb > li:hover .dp1:after, #header .gnb_wrap .gnb > li.on .dp1:after { opacity: 1; } #header .gnb_wrap .gnb > li.m_customer { display: none; } #header .etcH { height: 2.5em; } #header .mem_wrap { border-radius: 3em; overflow: hidden; display: flex; align-items: center; padding: 0 1em; gap: 1.5em; background: var(--siteC); border: 1px solid transparent; margin-right: 2em; } #header .mem_wrap > li > a { display: flex; align-items: center; position: relative; gap: .25em; color: #fff } #header .mem_wrap > li:not(:first-child) > a:after { content: ""; position: absolute; left: -1em; top: 50%; transform: translateY(-50%); width: 1px; height: 1em; background: #ddd } #header .mem_wrap > li > a .tt { font-size: .85em; font-weight: 500 } #header .mem_wrap > li > a .ico { font-size: 1em; } #header.gnbOpen { background: rgba(255, 255, 255, 1); backdrop-filter: blur(12px); box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.1); } #header.gnbOpen:before { background: #f1f1f1; opacity: 1; } #header.gnbOpen .inner { color: var(--crBlack); } #header.gnbOpen .logo { filter: none !important; } #header.gnbOpen .gnb_wrap .gnb > li { height: auto; } #header.gnbOpen .gnb_wrap .gnb > li .dp1 { /* padding: 0 3.5em; */ } #header.gnbOpen .all_wrap .allBtn .quad_btn > li { background: var(--crBlack); } #header.gnbOpen .gnb_wrap .gnb > li { width: 10em; } #header .all_wrap { display: flex; align-items: center; } #header .all_wrap .allBtn { } #header .all_wrap .allBtn.pcHide { display: none; } #header .all_wrap .allBtn .all_btn { position: absolute; width: 22px; height: 22px; z-index: 2; } #header .all_wrap .allBtn .quad_btn { position: relative; width: 22px; height: 22px; display: flex; flex-wrap: wrap; box-sizing: border-box; } #header .all_wrap .allBtn .quad_btn > li { position: absolute; border-radius: 50%; display: inline-block; background: #fff; width: .5rem; height: .5rem; transition: all 0.4s; } #header .all_wrap .allBtn .quad_btn > li:nth-child(1) { /* background: #E60012; */ top: 0; left: 0; } #header .all_wrap .allBtn .quad_btn > li:nth-child(2) { right: 0; top: 0; } #header .all_wrap .allBtn .quad_btn > li:nth-child(3) { left: 0; bottom: 0; } #header .all_wrap .allBtn .quad_btn > li:nth-child(4) { /* background: #0235bb; */ right: 0; bottom: 0; } #header .all_wrap .all_layer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, .65); backdrop-filter: blur(20px); color: #fff; transform: translateY(-80%); opacity: 0; visibility: hidden; transition: .3s; } #header .all_wrap .all_layer .all_header { padding: 2em 0 0; } #header .all_wrap .all_layer .all_header .all_logo > a > img { filter: var(--crWhitefil); height: 3.3em;} #header .all_wrap .all_layer .all_header .close_btn { align-items: center; justify-content: center; } #header .all_wrap .all_layer .all_header .close_btn .xi { font-size: 1.875em; } #header .all_wrap .all_layer .all_inner { flex: 1; opacity: 0; transition: .3s; } #header .all_wrap .all_layer .all_inner > .wrap_in { gap: 2em; padding: 3.5em 0 0 0; } #header .all_wrap .all_layer .wrap_top .all_mem { gap: .5em; } #header .all_wrap .all_layer .wrap_top .all_mem > li .in { align-items: center; height: 2.75em; padding: 0 2em; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6em; transition: .2s; } #header .all_wrap .all_layer .wrap_top .all_mem > li .in .tt { font-size: .938em; font-weight: 500; } #header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover { background: var(--siteC); border-color: var(--siteC); } #header .all_wrap .all_layer .wrap_middle .gnb { flex-wrap: wrap; } #header .all_wrap .all_layer .wrap_middle .gnb > li { flex: 1 1 100%; gap: 3em; display: flex; align-items: center; padding: 1.5em 0; border-bottom: 1px solid rgba(255, 255, 255, .2); } #header .all_wrap .all_layer .wrap_middle .gnb > li.m_customer { display: none; } #header .all_wrap .all_layer .wrap_middle .gnb > li:first-of-type { border-top: 1px solid rgba(255, 255, 255, .2); } #header .all_wrap .all_layer .wrap_middle .gnb > li ul { display: flex; gap: 1em; } #header .all_wrap .all_layer .wrap_middle .gnb > li a { justify-content: flex-start; text-align: left !important; padding: .5em 1em; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 { width: 14em; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .in { display: flex; align-items: flex-end; gap: .75em; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt { font-size: 1.75em; font-weight: 700; background: linear-gradient(to right, var(--gradC2), var(--gradC1) 50%, #fff 50%); background-size: 200% 100%; background-position: 100%; transition: background-position 0.2s linear; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .arrow { display: inline-block; margin-bottom: .375em; width: .5em; height: .5em; background: var(--siteC); border-radius: 50%; } #header .all_wrap .all_layer .wrap_middle .gnb > li.act { background: rgba(0, 0, 0, .2); } #header .all_wrap .all_layer .wrap_middle .gnb > li.act .dp1 .tt { background-position: 0 100%; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .in { display: inline-block; position: relative; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .in:after { content: ""; position: absolute; left: 0; bottom: -.25em; width: 100%; height: 2px; background: #fff; transform: scaleX(0); transform-origin: left bottom; transition: .2s; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .tt { font-size: 1.188em; font-weight: 500; color: rgba(255, 255, 255, .8); transition: .1s; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a:hover .tt { color: rgba(255, 255, 255, 1); } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li.act > a .in:after { transform: scaleX(1) } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 { display: none; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li > a { gap: 0 .75em; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li > a:before { content: ""; width: 4px; height: 2px; background: rgba(255, 255, 255, .4); } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li > a .tt { opacity: .7; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp3 > li.act > a .tt { text-decoration: underline; opacity: 1; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp4 { display: none; } #header .all_wrap .all_layer .wrap_bottom { display: none; } .allGnbOn { overflow-y: hidden; } .allGnbOn #header .all_wrap .all_layer { transform: translateY(0); opacity: 1; visibility: visible; background: rgba(0, 0, 0, .65); } .allGnbOn #header .all_wrap .all_layer .all_inner { opacity: 1; transition-delay: .4s; } .allGnbOn.scroll #header { transform: translateY(0); } .allGnbOn #header { backdrop-filter: unset !important; } .stickyT { position: sticky !important; top: var(--headHS); } #header:has(.gnb_wrap .gnb > li.act .dp1) { height: auto; } /*footer*/ #footer { color: #fff; background: #333; } #footer .foot-menu { padding: 1.5em 0; border-bottom: 1px solid rgba(255, 255, 255, .3); } #footer .menu { display: flex; gap: 1em; } #footer .menu > li { width: auto; } #footer .menu > li > a { display: block; padding-right: 2em; position: relative; color: var(--crWhite); font-size: 1.05em; } #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: #91e0ff; } #footer .info_wrap { gap: 3em; } #footer .info_wrap { flex: 1 1 1%; margin-left: 4em; } #footer .info_wrap > li .tt { display: inline-block; font-size: 1.05em; margin-right: 1.438em; margin-bottom: .4em; } #footer .info_wrap > li .copy { display: inline-block; color: #cacaca; font-size: .975em; text-transform: uppercase; } #footer .bottom_wrap{padding: 3em 0 4em; box-sizing: border-box;} #footer .bottom_wrap .loGo{width: 15em; filter: var(--crWhitefil);} /* member */ .memBannerSlider_wrap { padding: 1em 0em; border-top: 1px solid #ddd; background: #f7fafd; background: #f7fafd; } .memBannerSlider_wrap .inner { gap: 1em 2em; } .memBannerSlider_wrap .tit_wrap { gap: 0 2em; } .memBannerSlider_wrap .tit_wrap .tit { gap: 1em; } .memBannerSlider_wrap .tit_wrap .tit .tt { font-size: 1.125em; font-weight: 700; color: #000; } .memBannerSlider_wrap .tit_wrap .tit .xi { font-size: 1.500em; color: var(--siteC); transition: .2s; } .memBannerSlider_wrap .tit_wrap .tit:hover { color: var(--siteC); } .memBannerSlider_wrap .tit_wrap .tit:hover .xi { transform: rotate(180deg); } .memBannerSlider { flex: 1; padding-right: 4px; } /* .memBannerSlider .el .in { height: 4.65em; overflow: hidden; } */ .memBannerSlider .el { } .memBannerSlider .el .in { height: 3.25em; padding: 0 1em; overflow: hidden; } .memBannerSlider .el .in .tt { font-weight: 700; color: #777; text-align: center; } /*contents*/ .main #contents { padding-top: 0 } #contents .sub_visual_wrap { position: relative; overflow: hidden; height: 18em; padding-top: var(--headH); padding-bottom: 2em; } #contents .sub_visual_wrap::before{position: absolute; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.18); left: 0; top: 0; z-index: 10;} #contents .sub_visual_wrap .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #contents .sub_visual_wrap .wrap_in { position: relative; height: 20em; box-sizing: border-box; } #contents .sub_visual_wrap .wrap_in .sub_tit_wrap { margin: 6em auto 4em; text-align: center; color: #fff; position: relative; z-index: 10; } #contents .sub_visual_wrap .wrap_in .sub_tit_wrap .tit { margin-bottom: 2.125em; } #contents .sub_visual_wrap .wrap_in .sub_tit_wrap .t2 { font-size: 2.8em; font-weight: 700; text-transform: uppercase; } #contents .sub_visual_wrap .wrap_in .sub_tit_wrap .slogan { } #contents .sub_visual_wrap .wrap_in .sub_tit_wrap .slogan .tt { font-size: 1.250em; font-weight: 400; letter-spacing: .094em; } #contents .page_menu { position: relative; } #contents .sub_nav { } #contents .sub_nav > li { font-size: 1em; } #contents .sub_nav > li.home .xi { font-size: 1em } #contents .sub_nav > li.home > a { width: 2em; height: 2em; border-radius: 50%; text-align: center; background: var(--siteC); display: block; } #contents .sub_nav > li.home > a .xi { width: 2em; line-height: 2em; color: #fff; font-size: 1em; border-radius: 50% } #contents .sub_nav > li:before { content: "\e940"; font-family: xeicon; display: inline-block; vertical-align: middle; padding: 0 .5em } #contents .sub_nav > li:first-child:before { display: none } #contents .sub_nav > li:last-child .tt { color: var(--siteC); font-weight: 600; } .load #contents .sub_nav { } #contents .sub_tit_wrap2 { padding: 3em 0 0; border-bottom: 1px solid #ddd; padding-bottom: 1em; } #contents .sub_tit_wrap2 .tit { font-size: 2.2em; font-weight: 700; } #contents .sub_tab { position: relative; z-index: 10; } #contents .sub_tab .dp2on { width: 100%; margin: 0 auto; border-radius: 3em; overflow: hidden; } #contents .sub_tab .gnb { display: block; /* transform:translateX(-2em); */ } #contents .sub_tab .gnb .center_vod2 { display: none; } #contents .sub_tab .gnb .dp2 { justify-content: center; } #contents .sub_tab .gnb .dp2 > li { width: calc(100% / 5); } #contents .sub_tab .gnb .dp2 > li > a { height: 3em; padding: .5em 2em; color: #fff; background: rgba(255, 255, 255, .1); backdrop-filter: blur(15px); } #contents .sub_tab .gnb .dp2 > li:first-child > a { border-radius: 3em 0 0 3em; } #contents .sub_tab .gnb .dp2 > li:last-child > a { border-radius: 0 3em 3em 0; } #contents .sub_tab .gnb .dp2 > li > a .tt { font-size: 1.1250em; font-weight: 500; } #contents .sub_tab .gnb .dp2 > li > a .in { position: relative; padding: 0 .5em; } #contents .sub_tab .gnb .dp2 > li > a .in:after { /* content:""; */ position: absolute; left: 0; bottom: -.875em; width: 100%; height: 3px; background: #042d5c; transform: scaleX(0); transition: transform .3s; } #contents .sub_tab .gnb .dp2 > li.act > a, #contents .sub_tab .gnb .dp2 > li.on > a { background: #333; } #contents .sub_tab .gnb .dp2 > li.act > a .in, #contents .sub_tab .gnb .dp2 > li.on > a .in { color: #fff; } #contents .sub_tab .gnb .dp2 > li.act > a .in:after, #contents .sub_tab .gnb .dp2 > li.on > a .in:after { transform: scaleX(1); } #contents .sub_tab .gnb > li .dp3 { display: none; } /* #contents .sub_tab { background:rgba(0,0,0,.3); } #contents .sub_tab > .gnb { width:1200px; margin:0 auto; } #contents .sub_tab .gnb > li { width:100% } #contents .sub_tab .gnb > li .dp2 { justify-content:center; padding-left:1px } #contents .sub_tab .gnb > li .dp2:before { content:''; width:2000px; height:1px; background:#fff; position:absolute; opacity:.7 } #contents .sub_tab .gnb > li .dp2 > li { flex:1 1 100%; max-width:25%; position:relative } #contents .sub_tab .gnb > li .dp2 > li > a { display:block; color:#e5e5e5; padding: 1.4em 0; } #contents .sub_tab .gnb > li .dp2 > li > a .va { font-size:1.188em; font-weight:500; } #contents .sub_tab .gnb > li .dp2 > li:hover > a { color:#fff } #contents .sub_tab .gnb > li .dp2 > li.on { z-index:1; } #contents .sub_tab .gnb > li .dp2 > li.on:before { content:''; width:100%; position:absolute; height:4px; background:#fff; top:-2px; } #contents .sub_tab .gnb > li .dp2 > li.on > a { color:#fff; border-color:transparent; position:relative; } #contents .sub_tab .gnb > li .dp2 > li > a:before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:1em; background:#fff; opacity:.7; } #contents .sub_tab .gnb > li .dp2 > li:first-child > a:before { display:none; } #contents .sub_tit_wrap { padding:5em 0 0 0 } #contents .sub_tit_wrap .tit { font-weight:300; font-size:2.75em; letter-spacing:-.063em; word-spacing:.063em; margin-bottom:1em; font-family:'gs',sans-serif; font-weight:700; } #contents .sub_tit_wrap .nav { margin-bottom:1em } #contents .sub_tit_wrap .nav > li { color:#888; font-size:.938em } #contents .sub_tit_wrap .nav > li:before { content:"\e940"; font-family:xeicon; padding:0 .5em; vertical-align:middle } #contents .sub_tit_wrap .nav > li:first-child:before { display:none } #contents .sub_tit_wrap .nav > li:last-child .tt { text-decoration: } */ .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 .dp2 > li.on { display: block !important } #contents .doc { padding: 3em 0 8em 0 } #contents .doc.pt1 { padding: 1em 0 8em 0 } #contents .doc.pt0 { padding: 0em 0 8em 0 } /************************/ /*POPUP******************/ .popWrap.popDef { width: 50em; } .popWrap.popPw { width: 28em; } .popWrap.popMsg { width: 38em; } /*quick*/ #quick { position: fixed; z-index: 999; top: 50%; right: 1vw; transform: translateY(-50%); } #quick .quick_wrap { position: relative; width: 7.5em; border-radius: 2em 2em 6em 6em; box-shadow: 0 .375em .75em rgba(27, 60, 111, .1); text-align: center; overflow: hidden; } #quick .quick_wrap:before { content: ""; position: absolute; top: 2em; left: 0; bottom: 0; width: 100%; background: #fff; } #quick .quick_wrap > li { position: relative; } #quick .quick_wrap > li:not(.top) .in, #quick .quick_wrap > li .in .tt { display: block; } #quick .quick_wrap > li:not(.top) .in { padding: 1.55em .5em 0.5em; } #quick .quick_wrap > li .in .ico { display: inline-block; width: 2.125em; margin-bottom: .625em; transition: .3s; color: var(--siteC); } #quick .quick_wrap > li .in .ico img { width: 100%; } #quick .quick_wrap > li .in .t1 { font-size: 1em; word-break: break-word; } #quick .quick_wrap > li .in .t2 { font-size: .875em; } #quick .quick_wrap > li.tel { } #quick .quick_wrap > li.tel .in { padding: 1em .5em; background: var(--siteC); color: #fff; } #quick .quick_wrap > li.tel .ico { width: 1.625em; } #quick .quick_wrap > li.time { padding: 0 .625em; } #quick .quick_wrap > li.time .in { background: #f5f5f5; } #quick .quick_wrap > li.top { padding: 1.25em 1.25em; } #quick .quick_wrap > li.top .in { width: 5em; height: 5em; background: var(--siteC); border-radius: 50%; color: #fff; transition: .2s; } #quick .quick_wrap > li.top .in .xi { font-size: 1.125em; } #quick .quick_wrap > li.top .in .tt { font-size: .750em; } #quick .quick_wrap > li:not(.tel) .in[href]:hover .ico { transform: rotateY(180deg); } #quick .quick_wrap > li.top .in:hover { background: #787cfd; } /**/ .swiperBtn { line-height: 1; } .swiperBtn.btn { width: 2.313em; height: 2.313em; position: static; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 100; cursor: pointer; font-size: 1.375em; color: #000; transition: .2s } .swiperBtn.prev { left: 0 } .swiperBtn.next { right: 0 } .swiperBtn:before { font-family: xeicon } .swiperBtn.prev:before { content: "\e93d" } .swiperBtn.next:before { content: "\e940" } .swiperBtn.pause:before { content: "\ea3b" } .swiperBtn.play:before { content: "\ea3e" } .swiperBtn:focus, .swiperBtn:hover, .swiperBtn.play { opacity: 1 } .swiperBtn.st1 { border: 1px solid #ddd; border-radius: .25em; } .a1 .swiperBtn.st1 { margin-right: -1px } .a1 .swiperBtn.st1.pause, .a1 .swiperBtn.st1.play { border-radius: .25em 0 0 .25em } .a1 .swiperBtn.st1.prev { border-radius: 0 } .a1 .swiperBtn.st1.next { border-radius: 0 .25em .25em 0 } .swiperBtn .total { font-size: 1.250em; color: #888; } .swiperBtn .total .this { font-size: 1.375em; color: #1560a7; font-weight: 700; } .swiperBtn.s1 { font-size: 1.625em } .swiperBtn.c1 { opacity: 1; background: #fff; box-shadow: 2px 4px .5em rgba(0, 0, 0, .1); } .swiperBtn.c1:hover { opacity: 1; background: #1560a7; color: #fff; } .swiperBtn.c2 { background: rgba(0, 0, 0, .2); color: #fff } .swiperBtn.c2:hover, .swiperBtn.c2.play { background: rgba(0, 0, 0, .5) } .swiperBtn.round { border-radius: 50% } .swiperPauseWrap .play { display: none } .swiperPauseWrap.pause .play { display: flex } .swiperPauseWrap.pause .pause { display: none } .swiperPG .paging { gap: 0 1em; } .swiperPG .paging > span { position: relative; width: 1.125em; height: 1.125em; margin: 0 0; background: transparent; border: none; border-radius: 50%; opacity: 1; transition: .3s } .swiperPG .paging > span:before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; right: 3px; background: #000; border-radius: 50%; opacity: .4; transition: .3s } .swiperPG .paging > span.swiper-pagination-bullet-active { background: #fff !important; } .swiperPG .paging > span.swiper-pagination-bullet-active:before { background: #1560a7 !important; opacity: 1 !important; } .swiperBtn.white { color: #fff; opacity: 1 } .swiperBtn.white .total .this { color: #1560a7; } .swiperBtn.st1.white { border-color: rgba(255, 255, 255, .5); } .swiperBtn.st1.white:hover, .swiperBtn.st1.white.play { background: #1560a7; border-color: rgba(255, 255, 255, .2) } .swiperPG.white .paging > span:before { background: #fff; opacity: .8; } .slider_wrap { position: relative } /**/ /* main */ .mainVisualSlide_wrap { height: 100vh; } .mainVisualSlide { height: 100%; } .mainVisualSlide .el { position: relative; overflow: hidden; height: 100%; } .mainVisualSlide .el .bg { position: absolute; left: 0; top: 0; width: calc(100% + 6em); height: 100%; opacity: 0; transition: 2s, opacity 4s; } .mainVisualSlide .el .bg:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); } .mainVisualSlide .el.swiper-slide-active .bg, .mainVisualSlide .el.swiper-slide-duplicate-active .bg { left: -3em; opacity: 1; transition: 3s, opacity 1s; } .mainVisualSlide .slogan { position: absolute; top: 55%; transform: translateY(-50%); left: 0; width: 100%; z-index: 10; color: #fff; z-index: 3; } .mainVisualSlide .slogan .wrap_in { gap: .875em; line-height: 1.2; } .mainVisualSlide .slogan .line { margin: 0 .25em 1em; } .mainVisualSlide .slogan .line:after { content: ""; display: inline-block; width: 6em; height: 1px; background: #fff; } .mainVisualSlide .slogan .tt.pd { padding: 2em 0 0; } .mainVisualSlide .slogan .t1 { font-size: 4.5em; font-weight: 800; line-height: 1.2; text-transform: uppercase; } .mainVisualSlide .slogan .t2 { font-size: 3em; line-height: 1.5; letter-spacing: 0.03em; font-weight: 700; color:#ffe17d!important} .mainVisualSlide .slogan .t3 { font-size: 1.5em; margin-bottom: 1em; color: rgba(255, 255, 255, 1); font-weight: 400; line-height: 1.6; word-break: keep-all; transform: translateY(2em); opacity: 0; } .mainVisualSlide .slogan .t4 { font-size: 1.2rem; margin-bottom: 1em; color: rgba(255, 255, 255, 1); font-weight: 400; line-height: 1.6; word-break: keep-all; transform: translateY(2em); opacity: 0; } .mainVisualSlide .slogan .row { height: auto; display: block; overflow: hidden; line-height: 1; display:inline-block } .mainVisualSlide .slogan .row > .in { display: inline-block; transform: translateY(150%); transition: 1s; } .mainVisualSlide .slogan .tt.line { transform: scaleX(0); transform-origin: left center; } .mainVisualSlide .el.swiper-slide-active .slogan .tt { opacity: 1; transform: translateY(0); transition: 1.5s; } .mainVisualSlide .el.swiper-slide-active .slogan .tt.dy1 { transition-delay: 1s; } .mainVisualSlide .el.swiper-slide-active .slogan .tt:nth-child(1) { transition-delay: 0.2s; } .mainVisualSlide .el.swiper-slide-active .slogan .tt:nth-child(2) { transition-delay: 0.7s; } .mainVisualSlide .el.swiper-slide-active .slogan .tt:nth-child(3) { transition-delay: 1.2s; } .mainVisualSlide .el.swiper-slide-active .slogan .tt:nth-child(4) { transition-delay: 1.7s; } .mainVisualSlide .el.swiper-slide-active .slogan .tt.line { transform: scaleX(1); } .mainVisualSlideSlogan_wrap { position: absolute; left: 0; width: 100%; bottom: 50px; box-sizing: border-box; z-index: 10; color: #fff } .mainVisualSlideSlogan_wrap .wrapIn { display: flex; flex-direction: column; height: 100% } /* .mainVisualSlide_wrap .slogan { text-align: center; margin-bottom: auto; transform: translateY(-230%); box-sizing: border-box; padding: 0 5vw } .mainVisualSlide_wrap .slogan .t1 { font-size: 1.875em; font-weight: 500 } .mainVisualSlide_wrap .slogan .t2 { font-size: 3.25em; font-weight: 800; letter-spacing: .01em; word-spacing: .125em; margin: .125em 0 .375em 0; line-height: 1.2 } .mainVisualSlide_wrap .slogan .t3 { font-size: 1.375em; line-height: 1.6 } .mainVisualSlide_wrap .slogan .ani { overflow: hidden } .mainVisualSlide_wrap .slogan .ani > i { transform: translateY(200%); } .load .mainvisualSlide_wrap .slogan .ani > i { transform: translateY(0); transition: 1s } .load .mainVisualSlide_wrap .slogan .ani.d1 > i { transition-delay: .5s } .load .mainVisualSlide_wrap .slogan .ani.d2 > i { transition-delay: 1s } .load .mainVisualSlide_wrap .slogan .ani.d3 > i { transition-delay: 1.5s } */ .mainVisualSlide_control { margin-top: 2em; display: flex; align-items: flex-end; width: 100% } .mainVisualSlide_control .control { margin: 0 0 1em auto } .mainVisualSlide_control .paging { width: 5em; text-align: center; } .mainVisualSlide_control .paging .swiper-pagination-current { font-weight: 700 } .mainScroll { color: #fff } .mainScroll .line { position: relative; display: block; height: 4em; overflow: hidden } .mainScroll .line:before { content: ""; position: absolute; left: 50%; top: 0; height: 100%; width: 1px; background: #fff; } .mainScroll .dot { position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: .5em; height: .5em; background: #fff; border-radius: 50% } .mainScroll .tt { display: block; transform: rotate(90deg); font-size: .75em; margin: 0 0 2.5em 0 } .mainScroll .tt .xi { font-size: 1.5em; margin-right: .25em } .mainVisual_wrap { height: 36.25em; padding-bottom: 3.750em; background: #f5f5f5; } .mainVisual_wrap .inH { height: 100%; box-sizing: border-box; } .mainVisual_pagination .el .img_wrap:before, .mainVisual_txt { height: 22.5em; } .mainVisual_pagination .el .wrap_in:before, .mainVisual_con:before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #000; opacity: .07; } .mainVisual_wrap .swiper-container { margin: 0 0; } .mainVisual_wrap .control_wrap { gap: .313em; margin-bottom: 1.25em; } .mainVisual_pagination { flex: 1; } .mainVisual_pagination .el { flex: 1; width: auto; height: auto; opacity: 1; border-radius: 0; background: none; margin: 0 0; } .mainVisual_pagination .el .wrap_in { position: relative; margin-right: 1.875em; } .mainVisual_pagination .el .img_wrap { position: relative; overflow: hidden; } .mainVisual_pagination .el .img_wrap:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; background: #1a3144; transition: .3s; } .mainVisual_pagination .el .img_wrap .img { position: absolute; left: -.875em; bottom: 0; } .mainVisual_pagination .el .txt_wrap { position: absolute; bottom: 22.5em; right: 0; width: 100%; padding: 1.375em .25em; text-align: right; transition: .3s; } .mainVisual_pagination .el .txt_wrap .txt { font-size: 1.34em; font-weight: 300; letter-spacing: -.063em; } .mainVisual_pagination .el:hover .img_wrap:before { height: 80%; } .mainVisual_pagination .el:hover .txt_wrap { bottom: 80%; } .mainVisual_pagination .el.swiper-pagination-bullet-active { background: #fff; } .mainVisual_pagination .el.swiper-pagination-bullet-active .img_wrap:before { background: #2893ea; } .mainVisual_con { width: 28.5%; position: relative; } .mainVisual_txt { background: #1560a7; overflow: hidden; } .mainVisual_txt .shape { position: absolute; right: -2.125em; bottom: -2.625em; width: 13em; opacity: .3; } .mainVisual_txt .shape img { width: 100% } .mainVisual_txt .el .txt_wrap { padding: 3.125em 3.125em; transform: translateX(4em); opacity: 0; transition: .5s; } .mainVisual_txt .el .txt_wrap .txt { padding-bottom: 1em; color: #fff; } .mainVisual_txt .el .txt_wrap .txt .t1 { font-size: 1.875em; font-weight: 300; } .mainVisual_txt .el .txt_wrap .txt .t2 { font-size: 1.063em; font-weight: 400; margin-top: 1.125em; } .mainVisual_txt .el .txt_wrap .txt .t2 > p { padding: .375em 0; } .mainVisual_txt .el.swiper-slide-active .txt_wrap { transform: translateX(0); opacity: 1; transition: 1.5s; } /* main 공통 */ .mainBox { padding: 10vmin 0; overflow: hidden; position: relative } .mainBox.p1 { padding: 8vmin 0 } .mainBox.bg1 { background: #f4f8ff } .mainBox .wrapBg { position: absolute; left: 0; top: 0; width: 100%; height: 100% } .mainBox .wrapBg:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: .5 } .mainBox .wrapF { display: flex; flex-direction: column; gap: 4vmin 8vmin; position: relative } .mainBox .wrapF.dRow { flex-direction: row } .mainBox .wrapF.dRow .wrap_con { flex: 1; min-width: 0 } .main_tit { margin-bottom: 2vmin; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5vmin } .main_tit.hc { align-items: center; text-align: center } .main_tit.hr { align-items: flex-end } .main_tit.vc { justify-content: center } .main_tit .tit0 { font-size: 2vmin; font-weight: 900; color: var(--siteC); text-transform: uppercase; position: relative; display: inline-flex; align-items: center } .main_tit .tit0:before, .main_tit .tit0:after { content: ""; display: block; width: 2em; height: 1px; background: var(--siteC); margin: 0 1vmin } .main_tit .tit1 { font-size: 4.5vmin; font-weight: 800; letter-spacing: -.2vmin; word-spacing: .4vmin } .main_tit .tit1.s1 { font-size: 6.5vmin } .main_tit .tit2 { font-size: 4.25vmin; font-weight: 500; letter-spacing: -.05em; word-spacing: .1em } .main_tit .tit3 { font-size: 4.25vmin; font-weight: 700; letter-spacing: -.05em; word-spacing: .1em ; line-height: 1.4;} .main_tit .tt1 { font-size: 2.3vmin; line-height: 1.6; opacity: .7; font-weight: 500 } .main_tit .tt2 { font-size: 1.19em; line-height: 1.6; opacity: .7; font-weight: 500 } .main_tit.white { filter: brightness(0) invert(1) } .main_tit .m1 { margin-top: 5vmin } .main_tit.mb-1{margin-bottom: 2.5em;} .main_more { } .main_more .more { height: 3.125em; padding: 0 1.5em; gap: 1.125em; background: #fff; box-shadow: 2px 2px .5em rgba(9, 9, 51, .1); color: #1560a7; } .main_more .more > .tt { font-size: 1.063em; } .main_more .more > .xi { font-size: 1.625em; } /*버튼 공통*/ .Abtn .more { display: inline-flex; width: auto; align-items: center; border: 1px solid var(--crBlack); box-sizing: border-box; font-size: 16px; padding: .8em 2em; overflow: hidden; position: relative; font-weight: 700; } .Abtn .more.white { border: 1px solid #fff; color: #fff; transition: all 0.2s; } .Abtn .more.white:hover { border: 1px solid var(--crBlack); } .Abtn .more.round { border-radius: 70px; } .Abtn .more:before { content: ""; display: inline-block; position: absolute; top: 0; left: 0; height: 100%; width: 0; z-index: 1; background-color: var(--siteC2); transition: all 0.5s; background-color: #222; } .Abtn .more.c1:before { background-color: var(--siteC); color: #fff; } .Abtn .more.c1 { border: 1px solid var(--siteC); color: var(--siteC); } .Abtn .more.c2 { background: var(--siteC); color: #fff; border: 1px solid #fff; } .Abtn .more.c2:before { display: none; } .Abtn .more.s1 { font-size: .9em; } .Abtn .more.s2 { font-size: .85em; } .Abtn .more.s3 { font-size: 1.15em; } .Abtn .more > span { position: relative; z-index: 2; line-height: 1; } .Abtn .more:hover { color: #fff; background: var(--gradC1); } .Abtn .more:hover::before { width: 100%; } .Abtn .more > .xi { padding-left: .65em; position: relative; z-index: 2; } .Abtn .more.st1 { border: none; padding: 0em; font-weight: 500; font-size: 1.25em; border-radius: 0; color: #eee; } .Abtn .more.st1:before { top: unset; bottom: 0; width: 0%; height: 3px; background: rgba(255, 255, 255, .65); content: ''; transition: .3s all; } .Abtn .more.st1:hover:before { width: 100%; } /* main_about */ .mainAbout .about { position: relative } .mainAbout .about .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100% } /* .mainAbout .about .bg:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:.5 } */ .mainAbout .about .con { position: relative; padding: 8vmin 0 } .mainAbout .about .con .list { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; position: relative; overflow: hidden; margin: 3em auto 0; width: 90%; color: #fff } .mainAbout .about .con .list > li { position: relative; border: 1px solid #fff; border-radius: 50%; width: 19em; height: 19em; overflow: hidden; } .mainAbout .about .con .list > li .st { display: flex; text-align: center; justify-content: center; flex-direction: column; gap: 2vmin; box-sizing: border-box; width: 100%; height: 100%; background: rgba(0, 0, 0, .5); } .mainAbout .about .con .list > li:hover .st { background: var(--siteC); transition: .3s; } /* .mainAbout .about .con .list > li .st:after { content:""; position:absolute; right:-1px; bottom:-1px; width:100%; height:100%; border:1px solid rgba(255,255,255,.1); border-left:none; border-top:none } */ .mainAbout .about .con .list > li .st .ico { height: 6vmin; display: flex; align-items: center; justify-content: center } .mainAbout .about .con .list > li .st .ico img { height: 100%; display: flex; filter: brightness(0) invert(1) } .mainAbout .about .con .list > li .st .t1 { font-size: 2.1vmin; font-weight: 700; display: flex; justify-content: center; gap: 1vmin } /* notice */ .notice_wrap { flex: 1; background: #fff; overflow: hidden; } .notice_wrap .notice_top { padding: 1em; } .notice_wrap .notice_top .main_tab { gap: 4em; margin-left: 3em; } .notice_wrap .notice_top .main_tab > li { position: relative; font-size: 1.25em; font-weight: 600; color: #999; } .notice_wrap .notice_top .main_tab > li:before { position: absolute; top: 50%; left: -1.75em; width: 5px; height: 5px; background: #999; border-radius: 50%; content: ''; } .notice_wrap .notice_top .main_tab > li:first-of-type:before { display: none; } .notice_wrap .notice_top .main_tab > li > .tab_btn { } .notice_wrap .notice_top .main_tab > li.on { color: var(--gradC1); font-weight: 700; } .notice_wrap .plus { position: absolute; right: 2em; top: -3em; width: 1.5em; height: 1.5em; background: #a6a4a4; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .25s; } .notice_wrap .plus > .xi { color: #fff; } .notice_wrap .plus:hover { background: #111; } .notice_wrap .notice_list { padding: 1em 0.5em 1.5em; } .notice_wrap .notice_list .btm_list { gap: 1em; width: 100%; } .notice_wrap .notice_list .btm_list > li { flex: 0 0 25%; max-width: 24%; box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.1); background: #fff; border: 1px solid #ccc; border-radius: .8em; flex: 1; } .notice_wrap .notice_list .btm_list > li:last-child { } .notice_wrap .notice_list .btm_list > li > a { display: block; padding: 2.5em 2em; height: 10em; } .notice_wrap .notice_list .btm_list > li > a > .tit { width: 100%; font-weight: 700; color: #111; font-size: 1.25em; margin-bottom: 1em; } .notice_wrap .notice_list .btm_list > li > a > .tit2 { width: 100%; font-weight: 500; color: #111; line-height: 1.4; margin-bottom: 1em; height: 5.5em; } .notice_wrap .notice_list .btm_list > li > a > .date { width: auto; font-size: .9em; font-weight: 800; color: var(--siteC); } .notice_wrap .notice_list .btm_list > li:hover { background: var(--siteC); } .notice_wrap .notice_list .btm_list > li:hover > a > .tit { color: #fff; } .notice_wrap .notice_list .btm_list > li:hover > a > .tit2 { color: #fff; } .notice_wrap .notice_list .btm_list > li:hover > a > .date { color: #fff; } .notice_wrap .nocon { height: 15em; } /* */ .main_blog .blog_wrap { gap: 2em; } .main_blog .blog_wrap .con { flex: 1; } .main_blog .blog_wrap .con.first { flex: unset; width: 20%; } .main_blog .blog_wrap .blog_ttl { margin-bottom: 1em; } .main_blog .blog_wrap .blog_ttl > p { font-size: 1.25em; font-weight: 500; } .main_blog .blog_wrap .blog_box_con { } .main_blog .blog_wrap .blog_box_con .blog_box_list { background: #fff; border-radius: .8em; box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.1); } .main_blog .blog_wrap .blog_box_con .blog_box_list > li { } .main_blog .blog_wrap .blog_box_con .blog_box_list > li a:hover .plus_con > i { transition: .3s; transform: rotate(90deg); padding-right: -3px; } .main_blog .blog_wrap .blog_box_con .blog_box_list > li a:hover .plus_con > i:before { position: relative; top: 1px; left: -1px; } .main_blog .blog_wrap .blog_box_con .blog_box_list > li .box_in_con .box_in_ttl { text-align: center; background: #1560a7; height: 4em; padding: 2em .5em; } .main_blog .blog_wrap .blog_box_con .blog_box_list > li .box_in_con .box_in_ttl > p { font-size: 19px; font-weight: 500; color: #fff; } .main_blog .blog_wrap .blog_box_con .blog_box_list > li .box_in_con .box_in_b_txt { text-align: center; } .main_blog .blog_wrap .blog_box_con .blog_box_list > li .box_in_con .box_in_b_txt > p { font-size: 16px; font-weight: 500; padding: 0 1em; } .main_blog .blog_wrap .blog_box_con .blog_box_list > li .box_in_con .box_in_b_txt .plus_con > i:before { } .main_blog .blog_wrap .blog_box_con .blog_box_list > li .box_in_con .blog_img { position: relative; text-align: center; margin-top: -1.5em; z-index: 2; } .main_blog .blog_wrap .blog_box_con .blog_box_list > li .box_in_con .blog_img > img { width: 4em; height: 4em; background: #fff; border-radius: 50%; } .main_blog .blog_wrap .blog_box_con .blog_box_list > li .box_in_con .blog_img:before { /*position: absolute; width: 4em; height: 4em; background: #fff; top: -7px; left: 63px; z-index: -1; content: ''; border-radius: 50%; */ } .interver.pb_n { padding: 60px 0 0 0; } .main_blog .blog_wrap .submit_ttl { margin-bottom: 1em; } .main_blog .blog_wrap .submit_ttl > p { font-size: 1.25em; font-weight: 700; } .main_blog .blog_wrap .submit_ttl .xi { width: 1.5em; height: 1.5em; background: #a6a4a4; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .main_blog .blog_wrap .submit_wrap { } .main_blog .blog_wrap .submit_wrap .submit_list { background: var(--siteC); border-radius: .8em; } .main_blog .blog_wrap .submit_wrap .submit_list > li { padding: 2em; } .main_blog .blog_wrap .submit_wrap .submit_list > li .submit_list_ttl { margin-bottom: 1em; } .main_blog .blog_wrap .submit_wrap .submit_list > li .submit_list_ttl > p { color: #fff; font-size: 1.125em; font-weight: 500; } .main_blog .blog_wrap .submit_wrap .submit_list > li .input_con { } .main_blog .blog_wrap .submit_wrap .submit_list > li .input_con > input { border: 0; background: #f5f5f5; margin-bottom: .3em; } .main_blog .blog_wrap .submit_wrap .submit_list > li .right_box_con .notice_list { } .main_blog .blog_wrap .submit_wrap .submit_list > li .right_box_con .notice_list .notice_list_wirte { height: 9.9em; } .main_blog .blog_wrap .submit_wrap .submit_list > li .right_box_con .notice_list .notice_list_wirte > li { position: relative; display: flex; margin-bottom: .5em; font-size: 1.05em; padding: .5em 1em; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, .2); border-radius: 2em; color: #fff; } .main_blog .blog_wrap .submit_wrap .submit_list > li .right_box_con .notice_list .notice_list_wirte > li > p:hover { text-decoration: underline; } .main_blog .blog_wrap .submit_wrap .submit_list > li .right_box_con .notice_list .notice_list_wirte > li > p > i { font-size: .9em; vertical-align: bottom; } .main_blog .blog_wrap .submit_wrap .submit_list > li .right_box_con .notice_list .notice_list_wirte > li .date { min-width: 3em; font-size: 13px; color: #fff; } .main_blog .blog_wrap .quick_list { gap: 1em; } .main_blog .blog_wrap .quick_list .st1 { background: #fff; border: 1px solid var(--gradC1); padding: 2em; border-radius: .8em; } .main_blog .blog_wrap .quick_list .st1 .tit { font-size: 1.25em; font-weight: 700; } .main_blog .blog_wrap .quick_list .st1 .tit2 { margin-top: .5em; font-size: 1.05em; } .main_blog .blog_wrap .quick_list .st1 .detail { margin-top: 1em; } .main_blog .blog_wrap .quick_list .st1 .detail .tt { font-size: 1.5em; margin-bottom: .5em; font-weight: 700; display: flex; align-items: center;} .main_blog .blog_wrap .quick_list .st1 .detail .tt:last-child { margin-bottom: unset; } .main_blog .blog_wrap .quick_list .st1 .detail .tt span { font-weight: 600; width: 8.5em; display: inline-block; background: var(--gradC1); border-radius: .5em; font-size: .75em; color: #fff; text-align: center; padding: 1em .5em; margin-right: 1em; } .main_blog .blog_wrap .quick_list .st2 { } .main_blog .blog_wrap .quick_list .st2 .in { background: var(--gradC1); color: #fff; padding: 1.7em; position: relative; border-radius: .8em;} .main_blog .blog_wrap .quick_list .st2 .in .tt { font-size: 1.25em; font-weight: 600; gap: 0.5em;} .main_blog .blog_wrap .quick_list .st2 .in .tt .xi { background: #fff; color: var(--siteC); width: 1.5em; height: 1.5em; text-align: center; line-height: 1.5em; border-radius: 50%; margin-right: .5em; } .main_blog .blog_wrap .quick_list .st2 .in .arrow { background: rgba(255, 255, 255, .2); width: 2em; height: 2em; line-height: 2em; text-align: center; color: #fff; border-radius: 50%; font-size: .8em;} .main_blog .blog_wrap .quick_list .st2 .in:hover .arrow { background: rgba(255, 255, 255, 1); color: var(--siteC); } .main_blog .blog_wrap .quick_list .st2 .in .icon_img{position: absolute; right: 1.2em; top: 42%; transform: translateY(-50%); } .main_blog .blog_wrap .quick_list .st2 .in .icon_img img{width: 100%; height: 100%; object-fit: contain;} .btn_con { text-align: center; } .btn_con.mt1 { margin-top: .9em; } .btn_con a { background: rgba(255, 255, 255, .4); width: 100%; position: relative; display: inline-block; box-sizing: border-box; padding: 1em 1em; color: #fff; transition: .3s; border: 1px solid #fff; border-radius: .5em; } .btn_con a:hover { background: #fff; border: 1px solid var(--siteC); transition: .3s; color: var(--siteC); } .btn_con a.c2 { background: var(--siteC); border: 1px solid var(--siteC); } .btn_con a.c2:hover { background: var(--gradC1); color: #fff; } .plus_con { margin-bottom: 1em; text-align: center; margin-top: .8em; } .plus_con > i { position: relative; font-size: .9em; margin: 0 auto; color: #fff; font-weight: 600; width: 1.8em; height: 1.8em; border-radius: 50%; line-height: 1.8em; background: #1560a7; transition: .3s; } .swiperPauseWrap { justify-content: end; } .box1.psi_r { position: relative; } /*메인 공지*/ .main_inquiry { } .main_inquiry .inquiryBg { position: relative; width: 100%; height: 55vh; overflow: hidden; } .main_inquiry .inquiryBg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--siteC); opacity: .7; content: ''; z-index: 1; } .main_inquiry .inquiryBg > img { width: 100%; object-fit: cover; } .main_inquiry .infoWrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; } /**/ .members_info .list_wrap { margin-top: 2em; } /*popup*/ #popupzone .box1 { padding-left: 0; } #popupzone { position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); display: none; } #popupzone .popWrap { position: relative; box-sizing: border-box; padding-bottom: 12vh; top: 18%; } #popupzone.popOpen { display: block; } #popupzone .con_box { position: relative; } #popupzone .todayChk { z-index: 2; position: absolute; bottom: -6em; right: 0; } #popupzone .todayChk, #popupzone .todayChk .close_btn { } #popupzone .todayChk .close_btn { width: 3.5em; height: 3.5em; background: #ed1c24; color: #fff; transition: .2s; border-radius: 10px; margin-left: 1em; } #popupzone .todayChk .close_btn .xi { font-size: 1.8em; } #popupzone .todayChk .close_btn:hover { background: #a68d7a; } #popupzone .todayChk .label_st { color: #fff; font-size: .95em; } #popupzone .todayChk .label_st * { color: inherit; } #popupzone .popWrap .popup { width: 100%; } #popupzone .popup_zone .main_text { font-size: 1.7em; color: #fff; font-weight: 500; } /*.hover_st1 { width:25% !important; } */ .hover_st1 .hover_in { position: relative; overflow: hidden; } /* sub */ .sub_tt { line-height: 1.7; } .sub_tt.intro { line-height: 1.5; } .sub_tt.t1 { font-size: 1em; padding-bottom: 1.3em; } .sub_tt.t1:last-of-type { padding-bottom: 0; } .sub_tt.t2 { font-size: 2em; padding-bottom: 0.8em; } .sub_tt.t3 { font-size: 1.05em; } .sub_tt.t4 { font-size: 1.2em; } .sub_tt.t5 { font-size: 1.3em; } .sub_tt.t6 { font-size: .98em; } .sub_tt.t7 { font-size: 1em; position: relative; padding-left: 0.8em; color: #333; } .sub_tt.t7:before { position: absolute; content: ""; width: 5px; height: 5px; border-radius: 50%; background: #313193; top: 9px; left: 0; } .sub_tt.t8 { font-size: 1.4em; } .sub_tt.t9 { font-size: 1.8em; } .sub_tt.t10 { font-size: 1.1em; } .sub_tt.t11 { font-size: 2em; } .sub_tt.t12 { font-size: 1.2em; padding-bottom: 1.13em; } .sub_tt.t12:last-of-type { padding-bottom: 0; } .sub_tt.t13 { font-size: 4em; } .sub_tt.t14 { font-size: 1.05em; } .sub_tt.t1_1 { font-size: 1.1em; padding-bottom: 1.7em; } .pointO { color: #ed6e33; } .sub_tt.we1 { font-weight: 600; } .sub_tt.we2 { font-weight: 500; } .sub_tt.we3 { font-weight: 400; } .sub_tt.we4 { font-weight: 300; } .sub_tt > strong { font-weight: 600; } .sub_tt.line { position: relative; /*padding-left: 2em; */ } /*.sub_tt.line:before { position: absolute; content: ""; width: 1.5em; height: 2px; background: #000; top: 50%; left: 0; transform: translateY(-50%); } */ .sub_tt.line:after { position: absolute; content: ""; width: 6px; height: 6px; background: #ed6e33; border-radius: 50%; margin-left: 0.3em; } .sub_tt.dot { padding-left: 1.1em; position: relative; } .sub_tt.dot:before { position: absolute; content: ""; width: 5px; height: 5px; top: 9px; left: 6px; background: #313193; border-radius: 50%; } .sub_tt.p_circle { width: 2em; height: 2em; background: #ed6e33; border-radius: 50%; color: #fff; font-size: 0.9em; margin-bottom: 1em; } /**/ .page_tt { font-size: 1.125em; word-break: keep-all; line-height: 1.4; } .page_tt.s3 { color: #111; } .page_tt.s3 b { color: var(--siteC); } .page_tt.st1 { padding: 0 .6em; color: #555; } .page_tt.st2 { padding: 0 1.7em; color: #555; } .page_tt.st3 { padding: 0 0.7em; position: relative; display: inline-block; font-size: 1.125em; } .page_tt.st4 { padding: 0 0.7em; font-size: 1.125em; color: #111; } .page_tt.st3::before { content: ''; position: absolute; border-bottom: 1px solid #111; bottom: 0; width: 90%; } .page_tt.dot1 { margin-bottom: .8em; padding-left: 1.2em; display: inline-block; font-weight: 600; font-size: 1.875em !important; color: #111; position: relative; } .page_tt.dot1.st2 { margin-bottom: .8em; padding-left: 1.2em; display: inline-block; font-weight: 600; font-size: 2.3em !important; color: #111; position: relative; } .page_tt.dot1.st3 { margin-bottom: .8em; padding-left: 1.2em; text-align: center; display: inline-block; font-weight: 600; font-size: 3.2em !important; color: #111; position: relative; } .page_tt.dot1::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 10px; height: 10px; border: 6px solid #e4e4ff; background: var(--siteC); border-radius: 15%; } .page_tt.dot2 { margin-bottom: .5em; font-weight: 600; padding-left: .5em; font-size: 1.425em; color: #111; position: relative; } .page_tt.dot2::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .page_tt.dot2.st2 { margin-bottom: .5em; font-weight: 500; padding-left: .8em; font-size: .95em; color: #333; position: relative; display: inline-block; } .page_tt.dot2.st3 { margin-bottom: .5em; font-weight: 800; padding-left: .8em; font-size: 1.25em; color: #333; position: relative; } .page_tt.dot2.st2::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .page_tt.dot2.st4 { margin-bottom: .5em; font-weight: 500; padding-left: .8em; font-size: .985em; color: #333; position: relative; } .page_tt.dot2.st4::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); position: absolute; left: 0; top: .8em; transform: translateY(-50%); } .page_tt.dot3 { margin-bottom: .5em; /* padding-left: 1.2em; */ font-weight: 600; font-size: 1.125em; color: #111; position: relative; } .page_tt.dot3.st2 { margin-bottom: .5em; /* padding-left: 1.2em; */ font-weight: 600; font-size: 1.125em; color: #555; position: relative; } .page_tt.dot3::before { content: "\e92b"; display: inline-block; transform: translateY(2px); margin-right: .3em; font-family: xeicon; color: var(--siteC); /* width:15px; height:5px; border-radius: 5px; background-color:var(--color_lblue); */ /* position:absolute; left:0; top: 6px; */ } .page_tt.dot4 { padding-left: 1em; color: #555; position: relative; } .page_tt.dot4::before { content: ''; width: 5px; height: 1px; background-color: #777; position: absolute; left: 0; top: 9px; } .page_tt.dot5 { padding-left: 1.2em; display: inline-block; font-weight: 600; font-size: 1.05em !important; color: #111; position: relative; } .page_tt.dot5::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 5px; height: 5px; border: 6px solid var(--siteC); background: #e4e4ff; border-radius: 15%; } .page_tt.quotes { position: relative; } .page_tt.quotes::before { content: " "; position: absolute; width: 5px; height: 5px; background-image: url(../images/inc/Lquotes.svg); background-repeat: no-repeat; background-position: center center; background-size: cover; top: 0; left: 0; } .page_tt.quotes::after { content: " "; position: absolute; width: 5px; height: 5px; background-image: url(../images/inc/Rquotes.svg); background-repeat: no-repeat; background-position: center center; background-size: cover; top: 0; right: 0; } .highlight { display: inline; box-shadow: inset 0 -33px 0 15px #1010c7; color: #fff; padding: 0.1em 0.2em; border-radius: 0.3em; opacity: .8; } .highlight2 { display: inline; text-decoration: underline; font-weight: 700; color: var(--siteC); } .highlight3 {font-size: 3em; font-weight:700; position: relative;display: inline-block; } .highlight3::before { content: ""; width: 100%; height: .5em; border-radius: 3em; background: var(--siteC); opacity: .2; position: absolute; right: 0px; bottom: 3px; } .num { position: relative; z-index: 2; color: #fff; margin-right: 10px; } .num::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.25em; height: 1.25em; background-color: #1E489E; border-radius: 50%; z-index: -1; padding: .3em; box-sizing: border-box; } .rightC .sum_list{width: 95%;} .rightC .sum_list li{border-bottom: 1px solid #ddd; margin-bottom: .5em;} .rightC .sum_list li .in{padding:.5em 1em; gap: 1.5em;} .rightC .sum_list li .in .titW{width: 20%;} .rightC .sum_list li .in .txtW{width: 75%;} .rightC .sum_list li .in .titW .tit{display:inline-block; background-color:var(--siteC); color:#fff; text-align: center; font-size:1.15em;width: 5em; line-height: 1.75em; border-radius:2em; box-sizing:border-box; font-weight: 700;} .rightC .sum_list li .in .txtW .tt{font-size: 1.05em; font-weight: 700; color: #222; margin-bottom: .3em;} .rightC .sum_list li .in .txtW .tt span{margin-left: .5em; font-size: .95em; font-weight: 700; color: #444 ;} /*flex box*/ .flex_box { } .flex_box.s1 { margin: 0 0 -1em -1em; } .flex_box.s2 { margin: 0 0 -2em -2em; } .flex_box.s3 { } .flex_box.s4 { } .flex_box.s5 { } .flex_box .fst1 > li { flex: 1 1 100%; max-width: 100%; } .flex_box .fst1 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst2 > li { flex: 1 1 48%; max-width: 48%; } /* .flex_box .fst2 > li > .in { margin: 0 0 1em 1em; } */ .flex_box .fst3 > li { flex: 1 1 34.33%; max-width: 33.33%; } .flex_box .fst3 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst4 > li { flex: 1 1 23%; max-width: 23%; } .flex_box .fst4 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst5 > li { flex: 1 1 18%; max-width: 18%; } .flex_box .fst5 > li > .in { margin: 0 0 1em 1em; } .flex_box .fst6 > li { flex: 1 1 16.66%; max-width: 16.66%; } .flex_box .fst6.st2 > li > .in { margin: 0 0 0em 0em; } .flex_box .fst10 > li { flex: 1 1 10%; max-width: 10%; } .flex_box .fst10 > li > .in { margin: 0 0 1em 1em; } /**/ /* sub page */ .work_con { padding-bottom: 3em; } .work_con { padding-bottom: 3em; } .work_con:last-child { padding-bottom: 0; } .work_wrap { gap: 1em; align-items: center; } .work_wrap.st2 { gap: 2em; align-items: center; } .work_wrap .work_left { width: 55%; padding-right: 2em; box-sizing: border-box; } .work_wrap .work_left.w1 { width: 100%; height: 16em; } .work_wrap .work_left.w1.st2 { width: 100%; height: 15em; position: relative; padding: 1em; box-sizing: border-box; line-height: 2; } .work_wrap .work_left.w2 { width: 52%; } .work_wrap .work_left .tit { font-size: 2.25em; font-weight: 700; display: inline-block; margin-bottom: .8em; position: relative; } .work_wrap .work_left .tit.st2 { font-size: 2.25em; font-weight: 700; display: inline-block; margin-bottom: 0em; position: relative; } .work_wrap .work_left .tit::before { content: ''; z-index: -1; position: absolute; bottom: -3px; left: 0; width: 100%; height: 20px; background: #dfeaff; border-radius: 20em; } .work_wrap .work_left .tit.st2::before { content: ''; z-index: -1; position: absolute; bottom: -3px; left: 0; width: 0%; height: 20px; background: #dfeaff; border-radius: 20em; } .work_wrap .work_left .tit2 { font-size: 2.25em; font-weight: 700; display: inline-block; margin-bottom: .8em; position: relative; } .work_wrap .work_left .tit3 { font-size: 2.25em; font-weight: 700; display: inline-block; margin-bottom: .8em; position: relative; } .tit2.quotes { position: relative; } .tit2.quotes::before { content: " "; position: absolute; width: .5em; height: .5em; background-image: url(../images/inc/Lquotes.svg); background-repeat: no-repeat; background-position: center center; background-size: cover; top: -8px; left: -20px; } .tit2.quotes::after { content: " "; position: absolute; width: .5em; height: .5em; background-image: url(../images/inc/Rquotes.svg); background-repeat: no-repeat; background-position: center center; background-size: cover; top: -8px; right: -20px; } .work_wrap .tit3::before { content: ''; z-index: -1; position: absolute; bottom: 9px; left: 0; width: 100%; height: 20px; background: #dfeaff; border-radius: 20em; display: inline-block; } .work_wrap .work_left .sub_tit { font-size: 1.25em; color: #222; line-height: 1.6; margin-bottom: 1em; } .work_wrap .work_left .sub_tit.st2 { font-size: 1.25em; color: #222; line-height: 1.6; margin-bottom: 1em; background-color: #fefefe; padding: 1em; border-radius: .8em; box-shadow: 3px 3px 5px #ddd; } .work_wrap .work_left .sub_tit.st3 { font-size: 1.15em; color: #222; line-height: 1.6; margin-bottom: 1em; background-color: #fefefe; padding: 1em; border-radius: .8em; box-shadow: unset; } .work_wrap .work_left .txt { font-size: 1.125em; color: #777; margin-bottom: 1em; line-height: 1.6; } .work_con .add { color: #222; margin-top: 5em; } .work_con .add.mt2 { margin-top: 2em; } .work_con .add .point_c { color: #ff5a00; display: inline-block; vertical-align: top; } .work_con .add .add_info { display: inline-block; } .work_wrap .work_left .check_list .item .xi { color: #0098ff; min-width: 1.25em; margin-right: .25em; } .work_wrap .work_left .check_list .item .txt { color: #555; } .page_sec { margin-top: 6em; } .page_sec2 { margin-top: 1.5em; } .work_wrap .work_right { width: 45%; height: 330px; } .work_wrap .work_right.w2 { width: 42%; height: 330px; } .work_wrap .work_right.w2.st2 { width: 42%; height: 390px; } .work_wrap .work_right .img_box { overflow: hidden; border-radius: 15px; box-shadow: 0 0 20px rgba(0, 0, 0, .15); height: 100%; } .work_wrap .work_right .img_box > img { height: 100% !important; width: 100%; object-fit: cover; object-position: center; } .work_wrap .work_left.pr_n { padding-right: 0em; padding-left: 2em; } .work_wrap .work_left .sub_tit > .highlight { font-size: .9em; } .txtA { position: absolute; bottom: -57px; left: 50%; transform: translateX(-50%); z-index: 2; width: 80%; height: auto; background-color: #fefefe; border-radius: .8em .8em 0 0; box-shadow: 3px 3px 3px 0 5px #ddd; overflow: hidden; } .txtA.st2 { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); z-index: 2; width: 80%; height: auto; background-color: #fefefe; border-radius: .8em .8em 0 0; box-shadow: 3px 3px 3px 0 5px #ddd; overflow: hidden; } .txtA.st3 { position: absolute; bottom: -85px; left: 50%; transform: translateX(-50%); z-index: 2; width: 80%; height: auto; background-color: #fefefe; border-radius: .8em .8em 0 0; box-shadow: 3px 3px 3px 0 5px #ddd; overflow: hidden; } .txtA .ttW { height: 3.5em; } .con_box { padding: 2em 2.5em; } .con_box .Blist { width: 100%; } .con_box .Blist > li { width: calc((100% - 1.5em) / 4); } .con_box .Blist > li .tit_box { background-color: var(--siteC); border-radius: .8em .8em 0 0; height: 3em; font-size: 1.25em; } .con_box.mt { margin-top: 3em; } .con_box.bg { background-color: #f6f6f6; } .con_box.tline { border: 1px solid #ddd; border-top: 2px solid var(--siteC); word-break: keep-all; border-radius: 1em; background: #f9faff; } .con_box.line { border: 1px solid #ddd; border-radius: .5em; } .con_box .check_wrap { display: flex; align-items: center; gap: 2em; padding: 0 2em; } .con_box .check_wrap .icon { width: 8em; height: 8em; background-repeat: no-repeat; background-position: center center; background-size: contain; padding: 1.5em; border-radius: 50%; border: 2px solid #ddd; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .con_box .check_wrap .icon img { height: 100%; margin-left: 10px } .con_box .check_wrap .cont { } .con_box .check_wrap .cont .tit { margin-bottom: .2em; font-weight: 600; font-size: 1.25em; color: var(--color_dblue); display: block; } .con_box .check_wrap .cont .td { margin-bottom: 1.2em; margin-bottom: 1em; font-size: 1.125em; color: #555; } .con_box .check_wrap .cont .td:last-child { margin-bottom: 0; } .con_box .desc { margin-bottom: 1em; padding-left: 1.5em; } .con_box .desc .page_tt + .page_tt { margin-top: .2em; } /* .con_tit { position:relative; } .con_tit .stroke { font-weight: 800; position: absolute; top: -68px; left: 50%; font-size:5.75em; color: transparent; -webkit-text-stroke: 2px #ddd; } */ .con_box .busi_img + .busi_tit { margin-top: 2em; } .con_box .law_wrap { margin-left: 1.5em; } .con_box .law_wrap .tit { margin-bottom: 0.5em; font-weight: 600; font-size: 1.125em; color: var(--color_dblue) } .con_box .law_wrap .cont_list { list-style-type: circle; } .con_box .law_wrap .cont_list > li + li { margin-top: 1em; } .con_box .law_wrap .cont_list .cont { color: #333; position: relative; } .con_box .law_wrap .cont_list .cont .num { padding-right: 0.5em; } .con_box .law_wrap .t2 { margin-top: 1em; color: var(--color_lblue) } .con_box ul.flex { gap: 2.5em; } .con_box.st2 ul.flex { gap: 1.5em; } .con_box.st2 ul.flex { gap: 1.5em; } .sub_box ul.round_L { gap: .5em !important; } .sub_box ul.round_L.st2 { gap: 0em !important; } .round_L > li { } .round_L > li .in { position: relative; width: 12em; height: 12em; } .round_L > li .in::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; } .round_L > li .in.bg1::before { background-color: #81CFD6; opacity: 0.3; } .round_L > li .in.bg2::before { background-color: #3CB7D1; opacity: 0.4; } .round_L > li .in.bg3::before { background-color: #4D8CBD; opacity: 0.5; } .round_L > li .in.bg4::before { background-color: #4D8CBD; opacity: 0.6; } .round_L > li .in.bg5::before { background-color: #2E679D; opacity: 0.7; } .round_L > li .in.bg6::before { background-color: #214293; opacity: 0.8; } .round_L > li .in .txtW { position: absolute; z-index: 2; gap: .3em; } .round_L > li .in .txtW .txt_w .t1 { font-weight: 700; color: #fff; font-size: 1.1em; text-shadow: 3px 0 5px #111; } .round_L.st3 > li .in { position: relative; width: 15em; height: 15em; } .round_L.st3 > li .in::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; } .round_L.st3 > li .in.bg7::after { background-color: #214293; opacity: 0.3; } .round_L.st3 > li .in.bg8::after { background-color: #214293; opacity: 0.55 } .round_L.st3 > li .in.bg9::after { background-color: #214293; opacity: 0.75 } .round_L.st3 > li .in .ico_w { width: 7em; height: 7em; } .sub_box { display: flex; align-items: center; padding: 2.25rem 2rem; border-radius: 1rem; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .08); } .sub_box .chkwrap { display: flex; flex-direction: column; gap: 0.5em; } .sub_box .chkwrap .chkInner { display: flex; align-items: center; gap: 0.5em; } .sub_box .chkwrap .chkInner .chkRound { width: 1.5em; height: 1.5em; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--siteC); display: flex; align-items: center; justify-content: center; color: #fff; } .sub_box.st1 { flex-direction: column; align-items: flex-start; } .sub_box.st1 .img_box { width: 100%; padding-bottom: 30rem; position: relative; overflow: hidden; } .sub_box.st1 .img_box img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .sub_box.st2 { flex-direction: column; align-items: flex-start; border-radius: 0 0 .8em .8em; padding: 1.25rem .8rem; min-height: 7em; } /**/ .txt_box h6 { font-size: 1.3rem; color: #333; font-weight: 600; margin-bottom: 1.6rem; margin-top: 0; } .txt_box b { font-weight: 800; } .txt_box em b { color: #152d7a; } .txt_box .page_tt.dot1 { display: inline-block; color: #666; } .txt_box .page_tt.dot1:nth-of-type(2) { margin-left: 0.5em; } .txt_box.flex { gap: 0.6em; } p.tt.dot1 { position: relative; padding-left: 0.7em; line-height: 1.4; } p.tt.dot1::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); position: absolute; left: 0; top: 7px; } p.tt.dot4 { padding-left: 2em; color: #555; position: relative; } p.tt.dot4::before { content: ''; width: 5px; height: 1px; background-color: #777; position: absolute; left: 1em; top: 9px; } /**/ /* 연혁 */ .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: var(--siteC); 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 var(--siteC);; 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: var(--siteC);; /* 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 7em; max-width: 100%; } .history_wrap .history > li .list .month .tt { color: #999; font-size: 1.3em; /* 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; } .Himg { border: 1px solid #ddd; border-radius: .8em; padding: .8em; } .Hlist { background: #E4E3F3; padding: 1em 0; width: 80%; border-radius: .8em; overflow: hidden; } .Hlist > li { padding: .5em 2em;; } /*tab*/ .wrap_idx .sub-tab { display: flex; border: 1px solid #ddd; border-radius: 3em; overflow: hidden; } .wrap_idx .sub-tab.pd_w { padding-bottom: 3em; } .wrap_idx .sub-tab > li { position: relative; margin-left: -1px; cursor: pointer; height: 100%; display: flex; height: 3em; align-items: center; justify-content: center; flex: 1; font-size: 1.15em; font-weight: 700; } .wrap_idx .sub-tab > li { flex: 1 25%; border-right: 1px solid #ddd; } .wrap_idx .sub-tab > li:last-child { border-right: unset; } .wrap_idx .sub-tab > li > .tab_btn { padding: 0 1vw; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #444; transition: .3s; } .wrap_idx .sub-tab > li.on > .tab_btn, .wrap_idx .sub-tab > li:hover > .tab_btn { background-color: var(--siteC); color: #fff; } .wrap_idx .sub-tab.st2 > li { position: relative; margin-left: -1px; cursor: pointer; height: 100%; display: flex; height: 2.25em; align-items: center; justify-content: center; flex: 1; font-size: 1.1em; font-weight: 700; } .wrap_idx .sub-tab.st2 > li { flex: 1 25%; border-right: 1px solid #ddd; } .wrap_idx .sub-tab.st2 > li:last-child { border-right: unset; } .wrap_idx .sub-tab.st2 > li > .tab_btn { padding: 0 1vw; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #444; transition: .3s; } .wrap_idx .sub-tab.st2 > li.on > .tab_btn, .wrap_idx .sub-tab.st2 > li:hover > .tab_btn { background-color: var(--siteC); color: #fff; } /*members*/ .listwrap { } .listwrap .mem_list { width: 100%; gap: 2em; } .listwrap .mem_list li { } .listwrap .mem_list li .in { border: 1px solid #ddd; padding: 1em; box-sizing: border-box; border-radius: 1em; width: 100%; position: relative; gap: 2em; } .listwrap .mem_list li .in > .imgwrap { width: 35%; border: 1px solid #ddd; } .listwrap .mem_list li .in > .imgwrap > p.img { width: 100%; height: 12em } .listwrap .mem_list li .in > .imgwrap.st2 > p.img { width: 11em; height: 11em } .listwrap .mem_list li .in > .txtwrap { width: 65%; padding: 1.5em 0; box-sizing: border-box; height: 15em; } .listwrap .mem_list li .in > .txtwrap.st2 { width: 75%; padding: 1.5em; box-sizing: border-box; height: auto; } .listwrap .mem_list li .in > .txtwrap > .titW { margin-bottom: .5em; border-bottom: 1px dashed #ddd; } .listwrap .mem_list li .in > .txtwrap > .titW b { font-size: 1.75em; } .listwrap .mem_list li .in > .txtwrap > .titW span { font-size: 1.15em; color: #333; } /* .listwrap .mem_list li .in > .txtwrap > .btn_wrap { position: absolute; bottom:5px; right: 30px; } */ .listwrap .mem_list li .btn_wrap { position: absolute; right: 13%; opacity: 0; visibility: hidden; transition: .35s; font-weight: 300; bottom: 5%; color: var(--siteC); } .listwrap .mem_list li .btn_wrap .more_btn { font-size: 1em; font-weight: 500; } .listwrap .mem_list li .btn_wrap .xi { font-size: 1em; } .listwrap .mem_list li:hover .btn_wrap { opacity: 1; visibility: visible; right: 3%; } .listwrap { } .listwrap .mem_list2 { width: 100%; gap: 2em; } .listwrap .mem_list2 li { } .listwrap .mem_list2 li .in {box-sizing: border-box; border-radius: 1em; width: 100%; position: relative; gap: 2em; } .listwrap .mem_list2 li .in > .imgwrap.st2 > p.img { width: 11em; height: 11em } .listwrap .mem_list2 li .in > .txtwrap { width: 100%; box-sizing: border-box; } .listwrap .mem_list2 li .in > .txtwrap > .titW {background-color: #2B3B5A; width: 100%; height: 3em; text-align: center;color: #fff; font-size: 1.35em; border-radius: .8em; position: relative; line-height: 3em; font-weight: 700;} .listwrap .mem_list2 li .in > .txtwrap > .titW::before {content: "";position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 95%; height: 2em; border: 1px solid rgba(221, 221, 221, 0.5); border-radius: .8em;} .listwrap .mem_list2 li .in > .txtwrap > .titW b { font-size: 1.75em; } .listwrap .mem_list2 li .in > .txtwrap > .titW span { font-size: 1.15em; color: #333; } /* .listwrap .mem_list li .in > .txtwrap > .btn_wrap { position: absolute; bottom:5px; right: 30px; } */ .conW .con_txt > .t2 { padding: .5em 0; font-size: 1em; margin-left: 15px; color: #111; word-break: keep-all; position: relative; } .conW .con_txt > .t2::before { content: ""; position: absolute; top: 15px; left: -10px; width: 5px; height: 5px; background-color: var(--siteC); border-radius: 50%; } .listwrap .mem_list2 .conW { padding: .5em ; background-color: #fcfdff; margin-top: 1em; border-radius: .8em;height: 11.5em; } .listwrap .mem_list2 .conW .con_txt > .t2 { padding: .5em 0; font-size: 1.05em; margin-left: 15px; color: #222; word-break: keep-all; position: relative; } .listwrap .mem_list2 .conW .con_txt > .t2::before { content: ""; position: absolute; top: 15px; left: -10px; width: 5px; height: 5px; background-color: var(--siteC); border-radius: 50%; } .mem_detailW { width: 100%; } .mem_detailW .imgW { width: 17em;border: 1px solid #ddd; height: 21em; } .mem_detailW .txtW { width: 67%; padding: 1em; box-sizing: border-box; } .mem_detailW .titW { border-bottom: 1px solid #aaa; } .mem_detailW .titW .tit { font-size: 5vmin; } .mem_detailW .titW .tit .tt { font-size: 3vmin; color: #444; } .conW > .t2 { padding: .5em 0; font-size: 1em; margin-left: 15px; color: #111; word-break: keep-all; position: relative; border-bottom: 1px dotted #ddd; } .conW > .t2::before { content: ""; position: absolute; top: 15px; left: -10px; width: 5px; height: 5px; background-color: var(--siteC); border-radius: 50%; } .d_list { width: 100%; height: 25em; overflow-y: auto; } /*service*/ .circle_wrap { position: relative; padding: 2em 0; } .circle_list { gap: 3em; } .circle_list > li { width: 100%; } .circle_list > li .titC { width: 30%; z-index: 2; } .circle_list > li .titC .tit { width: 12em; height: 12em; display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg, #5176be 0%, #2b3b5a 100%); border-radius: 50%; color: #fff; font-size: 1.25em; font-weight: 700; } .circle_list > li .txtC { width: 60%; z-index: 2; } .circle_list > li .bar { position: relative; } .circle_list > li .bar::before { content: ""; position: absolute; width: 13em; height: 2px; background-color: #111; top: 50%; left: 50%; transform: translate(-12em, -50%); } .circle_list > li .bar::after { content: ""; position: absolute; width: 1em; height: 1em; background-color: #fff; border: 2px solid #042d5c; border-radius: 50%; top: 50%; right: 50%; transform: translate(.5em, -50%); z-index: 3; } .circle_list > li .txtC .tlist { width: 100%; padding: 1.25em; box-sizing: border-box; box-shadow: 0 5px 10px #ddd; height: 11em; border-radius: .8em; background-color: #f5f5f5; } /* 지회 및 지부 */ /* center */ .center_box { } .center_box_in { gap: 3em; } .center_left { width: 40%; text-align: center; border: 1px solid #ddd; } .center_right { flex: 1; } .center_right .area-search { padding: 3em 2em; } .center_right .area-search .area-search-tx { padding: 2em 0; border-top: 1px solid #ddd; } .center_right .find-descrip { } .center_tit { font-size: 1.25em; font-weight: 600; margin-bottom: .5em; } .center_tit2 { font-size: 1.125em; font-weight: 500; background: #f4f4f4; padding: .5em 1em; } .center_tit2 .xi { background: var(--siteC2); color: #fff; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; border-radius: 50%; margin-right: .5em; vertical-align: middle; font-size: 1.25em; } .center_tt { padding: 1em; background: #f4f4f4; font-size: 1.05em; } .center_tt .xi { background: var(--siteC2); color: #fff; width: 1.7em; height: 1.7em; line-height: 1.7em; text-align: center; border-radius: 50%; font-size: 1.125em; vertical-align: middle; margin-right: .5em; } .input_list { gap: .5em; background: #f4f4f4; padding: 1.5em; } .label.st1 { padding: 0.5em 1em; border: 1px solid #ddd; background-color: #fff; transition: 0.3s; } .label.st2 { padding: 0.5em 1em; border: 1px solid #ddd; } .label:hover { border-color: #1d40a6; transition: 0.2s; } .label.st2:hover { background-color: #1d40a6; color: #fff; } .answer_box { padding: 1em; } .answer_box .ans_name { margin-right: 2em; } .answer_box .ans_btnbox .ans_btn { margin-right: 1em; border: 1px solid #ddd; padding: 0.5em 1.5em; transition: 0.4s; } .answer_box .ans_btnbox .ans_btn .xi { margin-right: 0.5em; } .answer_box .ans_btnbox .ans_btn:hover { border-color: #1d40a6; transition: 0.2s; } /* Greetings */ .greetingCon { gap: 2em; } .greetingCon > .txtC { width: 60%; } .greetingCon > .txtC .page_txt { border-bottom: 1px dotted #777; padding-bottom: .5em; line-height: 1.7; position: relative; } .greetingCon > .txtC .page_txt::before { content: ""; position: absolute; bottom: -0.1em; left: 0; width: 22%; height: 1.2px; background-color: var(--gradC1); } .greetingCon > .txtC .page_txt .tit { font-size: 1.75em; font-weight: 700; } .greetingCon > .txtC .page_txt .tit2 { font-size: 1.955em; font-weight: 700; } .greetingCon > .txtC .page_txt .tit2 .point { font-weight: 800; } .greetingCon > .txtC .con .tt { padding: .5em 0; font-size: 1.12em; color: #333; } .greetingCon > .imgC { width: 38%; } .ceo p { font-size: 1.25em; } /**/ .due_list { gap: 1.5em !important; } .due_list .inner { width: 100%; border: 1px solid #ddd; border-radius: .8em; padding: 1em; box-sizing: border-box; box-shadow: 0px 5px 10px #ddd; height: 16em; } .due_list .icoC { background: linear-gradient(45deg, #fff 0%, #9FD4FF 100%); border-radius: 50%; width: 7em; height: 7em; padding: .5em; box-sizing: border-box; } .due_list .txtC { width: 100%; font-size: .95em; font-weight: 800; color: #333; } .due_list .txtC .tit { font-size: .95em; font-weight: 800; color: #333; } .due_list .txtC .tt { font-size: .9em; color: #555; } .xi.due_arrow { position: relative; width: 2em; height: 2em; } .xi.due_arrow::before { content: ""; position: absolute; top: 50%; left: 50%; background-image: url(../images/sub/overdue/due_arrow.png); background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; transform: translate(-35%, -52%); } .xi.due_arrow.st2 { position: relative; width: 2em; height: 0em; } .xi.due_arrow.st2::before { content: ""; position: absolute; top: 50%; left: 50%; background-image: url(../images/sub/overdue/due_arrow.png); background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; transform: translate(-35%, -52%); } .outS_list { width: 100%; } .outS_list > li { } .outS_list > li .in { width: 90%; position: relative; background: linear-gradient(to right, #66c7dc 0%, #458de5 100%); padding: 1em; box-sizing: border-box; border-radius: .2em; } .outS_list > li .in::before { content: ""; position: absolute; top: 2.6px; right: -9px; width: 20px; height: 20px; background: #458de5; clip-path: polygon(100% 0, 0 0, 100% 100%); border-radius: 3px; transform: rotate(45deg); } .page_ttbg_bg { background: url(../images/sub/greetings_bg.jpg); padding: 6em 0; background-attachment: fixed; } .company_list { gap: 1em; } .company_list .el { flex: 1 1 32.3%; border: 1px solid #fff; text-align: center; color: #fff; background: rgba(255, 255, 255, .1); padding: 2em 0; } .company_list .el .tit { font-size: 1.5em; font-weight: 800; margin-bottom: 1em; } .company_list .el .tt { font-size: 1.125em; min-height: 3em; } /* */ .row { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .row.r1 { -webkit-line-clamp: 1 ; white-space: nowrap;} .row.r2 { -webkit-line-clamp: 2 } .row.r3 { -webkit-line-clamp: 3 } .row.r4 { -webkit-line-clamp: 4 } .row.r2.fix { line-height:1.25em; height:2.5em } /* mainJoin */ .mainJoin .mainTxt{ overflow:hidden; display:flex; height:3.5em; align-items:center; gap:1em; padding:0 2em 0 0; border-radius:3em; color:#fff; background:rgba(255,255,255,.2); margin:0 auto; max-width:60em; box-sizing:border-box} .mainJoin .mainTxt .titW{ width:3.5em; height:100%; background:var(--siteC2); border-radius:50%; display:flex; align-items:center; justify-content:center} .mainJoin .mainTxt .titW .xi{ font-size:2em; transform:rotate(-10deg)} .mainJoin .mainTxt .textAniW{ flex:1 1 0%; min-width:0; overflow:hidden} .mainJoin .mainTxt .textAni{ animation-duration:28s; font-size:1.313em} .mainJoin .list{ display:flex; /* gap:.25em; */ height: 45vh;} .mainJoin .list > li{ flex:1 1 0%; min-width:0; position:relative} .mainJoin .list > li .in, .mainJoin .list > li .in .imgW{ display:block; width:100%; overflow:hidden; height:100%} .mainJoin .list > li .in .conW{ position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; padding:5%; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; gap:1.5em; color:#fff; transition:.5s; transition-delay:.5s; transform:scale(.8); opacity:0} .mainJoin .list > li .in .conW:before{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:calc(100% - 2em); height:calc(100% - 2em); background:#000; opacity:.3; transition:.3s} .mainJoin .list > li .in .conW > *{ position:relative} .mainJoin .list > li .in .conW .icon{height: 3.5em;} .mainJoin .list > li .in .conW .icon img{width: 100%; height: 100%; object-fit: contain;} .mainJoin .list > li .in .conW .t1{ font-weight:700; font-size:1.75em; } .mainJoin .list > li .in .conW .btn{ display:inline-flex; height:3em; border-radius:3em; background:var(--siteC2); color:#fff; padding:0 2em; align-items:center; gap:1em; margin-top:-3em; opacity:0; transition:.3s} .mainJoin .list > li .in .conW .btn .tt{ font-size:1.063em; font-weight:700} .mainJoin .list > li .in .conW .btn .arrow:before{ content:"\e907"} .mainJoin .list, .mainJoin .list > li .in .imgW{ height:45vh} .mainJoin .list > li .in .imgW .resize{ padding-bottom:0; height:100% } .mainJoin .list > li .in:hover .conW:before{ opacity:.8; width:100%; height:100%; background:var(--siteC)} .mainJoin .list > li .in:hover .conW .btn{ margin-top:0; opacity:1} .mainJoin .list.on > li .in .conW{ transform:scale(1); opacity:1} .mainJoin .list > li{ height:0; overflow:hidden; transition:1s} .mainJoin .list.on > li{ height:100%} .mainJoin .list.on > li:nth-child(1){ transition-delay:.15s} .mainJoin .list.on > li:nth-child(2){ transition-delay:.25s} .mainJoin .list.on > li:nth-child(3){ transition-delay:.35s} .mainJoin .list.on > li:nth-child(4){ transition-delay:.45s} .mainJoin .list.on > li:nth-child(5){ transition-delay:.55s} /* 찾아오시는 길 */ .location_Bg .map_con { margin-bottom: 6em; } .location_Bg .map_con:last-of-type { margin-bottom: 0em; } .map_wrap { width: 100%; } .map_wrap > .root_daum_roughmap { border-radius: 1em 1em 0 0; overflow: hidden; } .map_wrap iframe { width: 100%; } .root_daum_roughmap{width: 100% !important;} .root_daum_roughmap .cont .section_address, .root_daum_roughmap .wrap_controllers { display: none; } .location_info {margin-top: -4px;} .location_info > .con { display: flex; gap: 3em; background: var(--siteC); padding: 3em 4em; border-radius: 0 0 1em 1em; border: 1px solid #ddd; align-items: stretch;} .location_info > .con > .office { width: 12em; border-right: 1px solid #fff; display: flex ; align-items: center;} .location_info > .con > .office > .tt { font-size: 1.515em; font-weight: 800; color: #fff; word-break: keep-all; line-height: 1.5;} .location_info > .con > .address { width: 60%; padding: 1.2em 0;} .location_info > .con > .address .tit { font-size: 23px; font-weight: 500; color: #fff;} .location_info > .con > .address .tit .xi{margin-right: 0.5em; background: #fff; color: var(--siteC); width: 30px; height: 30px; font-size: 20px; line-height: 30px; text-align: center; border-radius: 1em;} .location_info > .con > .address .con_list { color:#fff;} .location_info > .con > .address .con_list li {display:flex; flex-direction:row; gap:.5em; margin:1em 0 ;} .location_info > .con > .address .con_list .tit {font-size:1em; font-weight:600;} .location_info > .con > .address .con_list .txt {font-size:1em; color:#eee;} .location_info > .con > .address > .add_info { display: flex; gap: 2em; margin-top: 1em; flex-wrap: wrap; } .location_info > .con > .address > .add_info > li {} .location_info > .con > .address > .add_info > li > .call_con { display: flex; align-items: center; gap: .5em; } .location_info > .con > .address > .add_info > li:first-child > .call_con{align-items: flex-start;} .location_info > .con > .address > .add_info > li > .call_con > .xi { font-size: 1.06em; color: #fff; line-height: 1.6;} .location_info > .con > .address > .add_info > li > .call_con > .tt { font-size: 1.06em; color: #fff; line-height: 1.6;} .location_info > .con > .address > .call {color:#ffe17d; font-size:1.2em; font-weight:600;} .location_info > .con > .map_view { width: 8em; border: 1px solid #fff; border-radius: 1em; display: flex; align-items: center; justify-content: center; flex-direction: column; transition :.2s; color: #fff;} .location_info > .con > .map_view > .xi { font-size: 2.15em; } .location_info > .con > .map_view > .mapViewT { font-size: 1.063em; font-weight: 500; margin-top: .35em; } .location_info > .con > .map_view:hover { background: #fff; color: var(--siteC);} .locWrap { margin-top: 4em; } .locWrap .locList { } .locWrap .locList > li { } .locWrap .locList > li.w100 { flex: 1 1 100%; max-width: 100%; } .locWrap .locList > li > .in { margin: 0 0 3em 2em; } .locWrap .locList > li > .in > .iconWrap { display: flex; gap: 1em; align-items: center; margin-bottom: 1.5em; border-bottom: 1px solid var(--siteC); } .locWrap .locList > li > .in > .iconWrap > .tt { font-size: 1.315em; font-weight: 600; line-height: 1; } .locWrap .locList > li > .in .icon { position:relative; top: 1px; display: flex; align-items: center; justify-content: center; width: 3.5em; height: 3.5em; color: #fff; background: var(--siteC); } .locWrap .locList > li > .in > .info { padding-left: 4.6em; } .locWrap .locList > li > .in > .info > li { margin-bottom: .5em; } .locWrap .locList > li > .in > .info > li > .con.div { } .locWrap .locList > li > .in > .info > li > .con.div .tt { display: flex; align-items: start; gap: .25rem; } .memo { padding: 1.5rem; background: #f7f7f7; display: flex; align-items: start; gap: .25rem; border-radius: 0.5em; } .memo > .xi { position:relative; top: -.2rem; color: var(--siteC); } .memo > .desc { font-size: .936em; line-height: 1.4; color: #171717; } .locWrap .locList > li > .in > .info > li:last-of-type { margin-bottom: 0; } .locWrap .locList > li > .in > .info .con > .tt { font-size: 1.063em; font-weight: 400; line-height: 1.6; } .locWrap .locList > li > .in > .info .con > .tt > i, .locWrap .locList > li > .in > .info .con > .tt > b { vertical-align: baseline; } .locWrap .locList > li > .in > .info .con > .tt > .round { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; height: 1.84em; line-height: 1.4; font-size: .864em; border-radius: 100px; padding: 0 .75em; margin-right: 5px; } .locWrap .locList > li > .in > .info .con > .tt > .round.blue { background: #0051a3; color: #fff; } .locWrap .locList > li > .in > .info .con .txt_box{background: var(--siteBg); padding: 1em; box-sizing: border-box; margin-top: .5em; border-radius: 0.5em;} .locWrap .locList > li > .in > .info .con .txt-in:first-child{margin-top: 0;} .locWrap .locList > li > .in > .info .con .txt-in { margin-top: 1em; gap: 0.5em .7em; } .locWrap .locList > li > .in > .info .con .txt-in > span { background: #fff; padding: 0.5em 0.5em; border-radius: 5px; align-items: center; flex-wrap: wrap;} .locWrap .locList > li > .in > .info .con .txt-in .xi { font-size: 0.75rem; border-radius: 50%; background: #111; color: #fff; padding: 0.25em .4em; width: fit-content; } .locWrap .locList > li > .in > .info .con .txt-in i:not(.xi) { display: inline-block; padding: .25em .75em; white-space: nowrap; border-radius: 100px; overflow: hidden; background: #eee; font-size: 0.875rem; } .locWrap .locList > li > .in > .info .con .txt-in i.nor { background: #00AFBD; color: #fff; } /* 소속 노무사 소개 */ .memberWrapper{} .memberWrapper .member_list{display: flex; flex-wrap: wrap; gap: 3.5em 2em;} .memberWrapper .member_list li{ width: calc((100% - 6em) / 4);} .memberWrapper .member_list li .img_wrap{overflow: hidden; border-radius: .5em; filter: grayscale(1); transition: 0.1s ease-in-out;} .memberWrapper .member_list li .img_wrap:hover{filter: grayscale(0);} .memberWrapper .member_list li .img_wrap img{width: 100%; height: 100%; display: block; object-fit: contain; } .memberWrapper .member_list li .txt_wrap {margin-top: 1.3em; padding: 0 .5em;} .memberWrapper .member_list li .txt_wrap .t2{font-weight: 700; color: var(--siteC); font-size: 1.125em; margin-bottom: 0.3em;} .memberWrapper .member_list li .txt_wrap .t1{display: flex; gap: .75em; } .memberWrapper .member_list li .txt_wrap .t1 .name{font-size: 1.75em; font-weight: 700; color: #111;} .memberWrapper .member_list li .txt_wrap .t1 .rank{margin-top: 0.5em; font-size: 1.125em; font-weight: 500; color: #555;} /* 소속 노무사 */ .overflow_inner{overflow-y:auto; overscroll-behavior: contain;} .consultantTop{} .consultantTop .consultantCeo{ display: flex; gap: 4rem; } .consultantTop .consultantCeo + .consultantCeo{margin-top: 3em; padding-top: 3em; border-top: 1px dotted #ccc;} .consultantTop .consultantCeo .leftWrap{position: relative; width: 25%;} .consultantTop .consultantCeo .leftWrap .Img{position: relative;} .consultantTop .consultantCeo .leftWrap .imgBox{border-radius: 1em; overflow: hidden; background: #f5f5f5;} .consultantTop .consultantCeo .leftWrap .imgBox img{display: block; width: 100%; height: 100%;} .consultantTop .consultantCeo .leftWrap .txtBox{position: absolute; left: -2rem; bottom: 0; background: var(--siteC); padding: 1.2rem 0; width: 15rem; box-sizing: border-box; border-radius: 0 1em 0 1em; } .consultantTop .consultantCeo .rightWrap{width: 75%; } .consultantTop .consultantCeo .rightWrap .s_tit{font-size: 1.19em; font-weight: 700; margin-bottom: 0.5em; color: var(--siteC);} .consultantTop .consultantCeo .rightWrap .txtBox{ display: flex; gap: 3.5rem; align-items: center;} .consultantTop .consultantCeo .rightWrap .txtBox .name{font-size: 2em; position: relative;font-weight: 700; display: flex; align-items: flex-end; gap: 0.3em;} /* .consultantTop .consultantCeo .rightWrap .txtBox .name::before{position: absolute; content: ''; width: 1px; height: 1.8rem; background: #ddd; right: -1.8rem; top: 50%; transform: translateY(-50%);} */ .consultantTop .consultantCeo .rightWrap .txtBox .name strong{letter-spacing: 6px;} .consultantTop .consultantCeo .rightWrap .txtBox .name .grade{font-size: .6em; margin-bottom: .4rem; font-weight: 500; opacity: 0.7;} .consultantTop .consultantCeo .rightWrap .txtBox .en_name{ font-size: 2em; color: var(--siteC); font-weight: 500;} .consultantTop .consultantCeo .rightWrap .bailiwick{ gap: 2rem; margin-top: .6rem;} .consultantTop .consultantCeo .rightWrap .bailiwick .tt{font-size: 1.125em; box-sizing: border-box; border-radius: 1em; color: #666; display: flex; align-items: center; gap: 0.5em; } .consultantTop .consultantCeo .rightWrap .bailiwick .tt .xi{width: 1.7rem; height: 1.7rem; text-align: center; line-height: 1.7rem; border-radius: .5em; font-size: 1.125rem; color: var(--siteC); background: #f5f5f5;} .consultantTop .consultantCeo .rightWrap .profile_list{display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; margin-top: 2em ;} .consultantTop .consultantCeo .rightWrap .profile_list > li{width: calc((100% - 3rem) / 2);} .consultantTop .consultantCeo .rightWrap .profile_list > li .tit{font-size: 2em; font-weight: 700; margin-bottom: .5em;} .consultantTop .consultantCeo .rightWrap .profile_list .career{ background: #f5f5f5; padding: 1.5rem; border-radius: 1em; height: 10rem; overflow-y: auto; box-sizing: border-box; } .consultantTop .consultantCeo .rightWrap .profile_list .career::-webkit-scrollbar{width: 3px;} .consultantTop .consultantCeo .rightWrap .profile_list .career::-webkit-scrollbar-thumb{background-color: #ddd; border-radius: 10px;} .consultantTop .consultantCeo .rightWrap .profile_list .career > li{color: #666;} .consultantTop .consultantCeo .rightWrap .profile_list .dotList > li{margin-bottom: 0.2rem;} .consultantTop .consultantCeo .rightWrap .profile_list .career.st1{ height: 13rem;} .consultantTop .consultantCeo .rightWrap .logoImg{width: 4.5rem; opacity: 0.25; margin-right: 1.5em;} .consultantBottom{ margin-top: 4.5em;} .consultantBottom .consultantList{padding-top: 2em; display: flex; flex-wrap: wrap; gap: 4rem 1.3rem;} .consultantBottom .consultantList .consultant{width: calc((100% - 3.9rem) / 4);} .consultantBottom .consultantList .consultant .in{display: block;} .consultantBottom .consultantList .consultant .in .img_wrap {background: #f5f5f5;} .consultantBottom .consultantList .consultant .in .img_wrap img{display: block; overflow: hidden; border-radius: 1em;} .consultantBottom .consultantList .consultant .in .txt_wrap{background: #fbf8ee; padding: 2rem; min-height: 6rem;} .consultantBottom .consultantList .consultant .in .txt_wrap .name{font-size: 2.25em; font-weight: 700;} .consultantBottom .consultantList .consultant .in .txt_wrap .name .grade{margin-left: 0.2rem; font-size: 1.125em; font-weight: 500;} .consultantBottom .consultantList .consultant .in .txt_wrap .info{ margin-top: 1em;} .consultantBottom .consultantList .consultant .in .txt_wrap .info .tt span{display: inline;} .consultantBottom .consultantList .consultant .in .txt_wrap .info .tt .t1{ font-weight: 700;} .consultantView .consultantTop .consultantCeo .leftWrap{width: 31%;} .consultantView .viewTab_wrapper{margin-top: 1.5em; padding-top: 1.5em; border-top: 1px dotted #ccc;} .consultantView .viewTab_wrapper .career{padding: 2rem 1rem;} .consultantView .viewTab_wrapper .nocon{height: 18rem;} /* */ .dotList { } .dotList > li { position: relative; padding-left: 1rem; font-size: .94em; margin-bottom: .4rem; line-height: 1.65; } .dotList.s1 > li { font-size: 1.125em; line-height: 1.45; margin-bottom: 0.5rem;} .dotList > li:before { position: absolute; top: 10px; left: 0; width: 6px; height: 1px; background: #444; content: ''; } .dotList.s1 > li:before{top: 13px;} .dotList.dot2 > li:before { position: absolute; left: 0; width: 5px; height: 5px; border-radius: 100px; background: #666; content: ''; } .dotList.dot2.s1 > li:before { top: 11px; } .dotList > li:last-of-type { margin-bottom: 0; } .dotList.c1 > li { color: #666; } /* 공통 탭 메뉴 스타일 */ .con_idx { position:relative } .con_idx > .idx {position: absolute; left: -99999px; top: 0; width: 100%; opacity: 0;} .con_idx > .idx.on { position: relative; left: 0; opacity: 1; } .sub_tab{} .sub_tab .tab_btn{ background: #eee; border-radius: 100rem; padding: 0.5rem; box-sizing: border-box; gap: 0.5em; width: fit-content; margin: 0 auto;} .sub_tab .tab_btn li{cursor: pointer;} .sub_tab .tab_btn li.on .tt{background: var(--siteC); color: #fff;} .sub_tab .tab_btn li .tt{ padding: 1.2rem 4.5rem; background: #fff; color: var(--siteC); font-weight: 700; font-size: 1.09em; border-radius: 100rem;} .page_tab .tab_idx { display:flex; align-items: center; width: 100%; box-sizing: border-box; } .page_tab .tab_idx > li { position: relative; text-align: center; padding: 1rem 2rem; box-sizing: border-box; font-size: 1.125em; font-weight: 600; color: #666; cursor: pointer; flex: 1; transition: .3s; background: #f1f1f1; } .page_tab .tab_idx > li:hover { background:#f9f9fb; } .page_tab .tab_idx > li::before { position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-50%); height: 50%; width: 1px; background: #ccc; } .page_tab .tab_idx > li.on { color: #fff; font-weight: 700; background: #fff; background: var(--siteC); } .page_tab .tab_idx > li.on::before, .page_tab .tab_idx > li:first-child::before { display: none; } /* 인사말 */ .greeting_wrap{ position: relative; display: flex; align-items: flex-start; width: 100%; background: var(--siteC); border-radius: 1em; padding: 4em 4em; box-sizing: border-box; position: relative; gap: 4em;} .greeting_wrap::before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/sub/pattern03.png); background-size: 100%; opacity: 0.08; } .greeting_wrap .sticky_img{ width: 33%; position: sticky; top: 8em; align-self: flex-start;} .greeting_wrap .img_wrap{overflow: hidden; border-radius: 1em; z-index: 10; height: fit-content;} .greeting_wrap .img_wrap img{width: 100%; height: 100%; object-fit: contain; display: block;} .greeting_wrap .txt_bg{ width: 67%; position: relative; z-index: 10;} .greeting_wrap .txt_bg::before{} .greeting_wrap .txt_bg .bgT_wrap{ margin-top: 2.6em; position: relative; z-index: 10;} .greeting_wrap .txt_bg .bgT_wrap .tit{ font-size: 2.25em; color: #fff; font-weight: 400; line-height: 1.4; } .greeting_wrap .txt_bg .bgT_wrap .t1{font-size: 1.19em; color: #fff; font-weight: 500; margin-top: 1em; opacity: 0.65; line-height: 1.5;} .greeting_wrap .txt_wrap{ margin-top: 3em; background: #fff; padding: 2.5em; box-sizing: border-box; border-radius: .5em;} .greeting_wrap .txt_wrap .tt_box{ padding-bottom: 2em; margin-bottom: 2em; border-bottom: 1px solid #ddd;} .greeting_wrap .txt_wrap .tt_box .tit{font-size: 1.5em; font-weight: 600; margin-bottom: .6em; position: relative; } /* .greeting_wrap .txt_wrap .tt_box .tit::before{content: ''; position: absolute; left: 0; top: 12px; width: 5px; height: 5px; background: var(--siteC); border-radius: 100px;} */ .greeting_wrap .txt_wrap .tt_box .recordList li{margin-bottom: 0.2em; font-size: 1em; } .greeting_wrap .txt_wrap .tt_box .recordList li::before{top: 12px; } .greeting_wrap .txt_wrap .tt_box .recordList li + li{} /* 업무영역 */ .valueCircle_wrap{ position: relative; padding-bottom: 9em;} .valueCircle_wrap .tit_bg{ width: 689px; height: 634px; margin:0 auto;} .valueCircle_wrap .tit_bg span{padding-bottom: 1.5em;font-weight: 800;font-size: 2em;color:var(--siteC);text-transform: uppercase;} .valueCircle_wrap .cont_list{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;} .valueCircle_wrap .cont_list > li{max-width: 25vw;position: absolute;} .valueCircle_wrap .cont_list > li:nth-child(odd){ text-align: right; } .valueCircle_wrap .cont_list > li:nth-child(1){ right:50%; top:1em; transform:translateX(-19em)} .valueCircle_wrap .cont_list > li:nth-child(2){ left:50%; top:1em; transform:translateX(19em)} .valueCircle_wrap .cont_list > li:nth-child(3){ right:50%; top:25em; transform:translateX(-23em)} .valueCircle_wrap .cont_list > li:nth-child(4){ left:50%; top:25em; transform:translateX(23em)} .valueCircle_wrap .cont_list > li:nth-child(5){ text-align: center; left: 50%; bottom:-.5em; transform: translateX(-50%);} .valueCircle_wrap .cont_list > li:nth-child(5) .t2{text-align: left;} .valueCircle_wrap .cont_list > li .t1{font-weight: 800;font-size: 1.375em;color:var(--siteC)} .valueCircle_wrap .cont_list > li .t2{margin-top: .5em;font-weight: 600;font-size: 1.125em;color: #555; line-height: 1.75;} .valueCircle_wrap .icon_list{width: 689px;height: 634px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);} .valueCircle_wrap .icon_list > li .icon{width: 3.25em; height: 3.25em; position: absolute;} .valueCircle_wrap .icon_list > li:nth-child(1) .icon{right: 50%; top: 22px; transform: translateX(-95px);} .valueCircle_wrap .icon_list > li:nth-child(2) .icon{left: 50%; top: 22px; transform: translateX(95px);} .valueCircle_wrap .icon_list > li:nth-child(3) .icon{right: 50%;top: 255px;transform: translateX(-161px);} .valueCircle_wrap .icon_list > li:nth-child(4) .icon{left: 50%; top: 255px; transform: translateX(161px);} .valueCircle_wrap .icon_list > li:nth-child(5) .icon{ left: 50%; bottom: 185px; transform: translateX(-50%);} .valueCircle_wrap .cont_list .m_icon{display: none;} /**/ .page_tit { margin:0 0 1.25em 0 } .page_tit.c_white { color: #fff; } .page_tit.m0 { margin-bottom:0; } .page_tit.m1 { margin-bottom:2.25em; } .page_tit.m2 { margin-bottom: 1em; } .page_tit .tt { } .page_tit .tt * { vertical-align:baseline; } .page_tit .tt .info-tt { color: #888; font-size: 0.875rem; margin-top: 5px; } .page_tit .t0 { font-size: 3.215em; font-weight: 800; line-height: 1.2; text-transform: uppercase; } .page_tit .t1 { font-size: 2.515em; font-weight: 800; line-height: 1.2; } .page_tit .t2 { margin:.75em 0; color:#555666; font-size:1.063em; line-height: 1.4; } .page_tit .t2:first-child { margin-top:0; } .page_tit .t3 { font-weight:700; font-size:1.515em; text-transform: uppercase; } .page_tit .t4 { font-weight:700; font-size:2em; line-height: 1.3; } .page_tit .t5 { font-weight:600; font-size:1.188em; text-transform: uppercase; } .page_tit .t6 { font-weight:500; font-size:.938em; } .page_tit .t7 { font-weight:500; font-size:1.063em; } .page_tit .t8 { font-weight:500; font-size:1.188em; color:#666; } .page_tit .t9 { font-size:1.75em; } .page_tit .t10 { font-size:1.88em; } .page_tit:last-child{ margin-bottom:0 !important;} .page_tit.dot1{margin-bottom:.8rem; padding-left: 2.2rem; display: inline-block; font-weight: 600; color:#111; position: relative;} .page_tit.dot1::before{content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%) rotate(136deg); width: 10px; height: 10px; border: 6px solid #dfe5f3; background: var(--siteC); border-radius: 15%; transform-origin: 50% 50%;}