@charset "utf-8"; /* CSS Document */ .box0 { padding:0 4vw } .box1 { width:1400px; margin:0 auto; max-width:94% } .box2 { width:1200px; margin:0 auto; max-width:94% } .gnb li.m_hide { display:none } body:not(.pop) { display:flex; flex-direction:column; min-height:100vh; min-height:calc(var(--vh, 1vh) * 100) } #header { position:fixed; left:0; top:0; width:100%; z-index:1000; color:#fff; transition: transform 1s } #header:hover { color: #111; } #header .top_wrap { position:relative } #header .top_wrap .wrapH, #header .top_wrap .gnb_wrap .dp1 { height:5.5em } .headerT { padding-top:6em } #header .top_wrap .wrapIn { display:flex; align-items:center; justify-content:space-between; gap:0 4vw } #header .top_wrap .wrapIn > * { position:relative; z-index:2 } #header .top_wrap .logo > a { display:block; height:3em; overflow:hidden; filter:brightness(0) invert(1) } #header:hover .top_wrap .logo > a { filter: none; } #header .top_wrap .logo > a .in { display:block; height:100% } #header .top_wrap .logo > a img { height:100%; display:block } #header .top_wrap .gnb_wrap { } #header .top_wrap .gnb_wrap .gnb { justify-content:center; padding-left: 40em; } #header .top_wrap .gnb_wrap .gnb > li { width:12em; position:relative } #header .top_wrap .gnb_wrap .gnb > li .dp1 .in { position:relative } #header .top_wrap .gnb_wrap .gnb > li .dp1 .in:after { content:""; position:absolute; left:100%; bottom:100%; width:.375em; height:.375em; border-radius:50%; background:#fff; opacity:0; transition:.2s; z-index: 9; } .scroll #header .top_wrap .gnb_wrap .gnb > li .dp1 .in:after, #header:hover .top_wrap .gnb_wrap .gnb > li .dp1 .in:after { background: var(--siteC); transition: .2s; } #header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .in:after, #header .top_wrap .gnb_wrap .gnb > li.on .dp1 .in:after { opacity:1 } #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt { font-weight:600; font-size:1.313em } #header .top_wrap .etc_wrap { display:flex; align-items:center; gap:0 4vw } #header .top_wrap .etc_wrap .etcBtn { display:flex; align-items:center; justify-content:center; width:2em; height:2em } #header:hover .top_wrap .etc_wrap .etcBtn { filter: brightness(0) invert(0); } #header .top_wrap .etc_wrap .etcBtn .ico { font-size:2em } #header .top_wrap .etc_wrap .link { display:flex; align-items:center; gap:0 2em } #header .top_wrap .etc_wrap .link > li > a { display:flex; align-items:center; gap:0 .5em; opacity:.7 } #header .top_wrap .etc_wrap .link > li > a .ico { font-size:1.25em } #header .top_wrap .etc_wrap .link > li > a .tt { font-weight:500; text-transform:uppercase } #header .top_wrap .gnb_wrap { position:absolute; left:0; top:0; width:100%; z-index:1; height:auto } #header .top_wrap .gnb_wrap .gnb > li { position:relative } #header .top_wrap .gnb_wrap .gnb > li .dp1 { padding: 0 1em; } #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > .layer, #header .top_wrap .gnb_wrap .gnb > li .dp1.layer { display: none; } #header .top_wrap .gnb_wrap .gnb > li .dp1 .va { position:relative; text-transform:uppercase } #header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after { content:""; position:absolute; left:100%; bottom:100%; width:.375em; height:.375em; transform:translate(50%, 0); border-radius:50%; background:#fff; transition:.3s; opacity:0 } #header .top_wrap .gnb_wrap .gnb > li:hover .dp1 .va:after, #header .top_wrap .gnb_wrap .gnb > li.on .dp1 .va:after { opacity:1 } #header .top_wrap .gnb_wrap .gnb > li .dp1 .tt { font-weight:600; font-size:1.25em } #header .top_wrap .gnb_wrap .gnb > li .dp2 { display:none; flex-direction:column; padding:0em 0 2.5em 0; } #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a { padding:.5em } #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .in { position:relative } #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a .in:after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:#111; } #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover .in:after { width:100%; transition:.65s } #header .top_wrap .gnb_wrap .gnb > li .dp3, #header .top_wrap .gnb_wrap .gnb > li .mLink { display:none } #header .top_wrap .gnb_wrap .gnb > li .dp2 > li > a:hover .va:after { width:100%; transition:.5s } #header .top_wrap .gnb_wrap .gnb > li .dp3, #header .top_wrap .gnb_wrap .gnb > li .mLink { display:none } #header .gnb_wrap:before { } #header:hover .gnb_wrap:before { content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,1); backdrop-filter:blur(1em); } #header .gnb_wrap .gnb > li { /*min-width:12em; transition:min-width .5s*/ } .load #header .gnb_wrap:not(:hover) .gnb > li { min-width:0 } #header .gnb_wrap:hover .gnb > li .dp2 { display:block; text-align: center; } #header .gnb_wrap:hover .gnb > li:hover, #header .gnb_wrap:hover .gnb > li:hover .dp1 { background:#f9f9f9; } #header .all_wrap { color:#000; } #header .all_wrap .all { width:4.5em; } #header .all_wrap .all_btn { position:relative; display:block; width:2.5em; height:1.125em; margin-left:auto; } #header .all_wrap .all_btn .ham, #header .all_wrap .all_btn .ham:before, #header .all_wrap .all_btn .ham:after { display:block; width:100%; height:2px; background: #fff; transition:.2s, background 0s; } #header .all_wrap .all_btn .ham:before, #header .all_wrap .all_btn .ham:after { content:""; position:absolute; left:0; } #header .all_wrap .all_btn .ham:before { top:calc(20% - 1px); width:100%; } #header .all_wrap .all_btn .ham:after { top:calc(85% - 2px); width:100%; } #header .all_wrap .all_btn:hover .ham:before { width:100%; } #header .all_wrap .all_btn:hover .ham:after { width:100%; } #header .all_wrap .all_layer { position:fixed; top:0; left:0; width:100%; height:100vh; opacity:0; visibility:hidden; } #header .all_wrap .all_layer .all_close { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); opacity:0; backdrop-filter:blur(.75em); } #header .all_wrap .all_layer .all_inner { position:absolute; top:0; right:0; width:32em; max-width:100%; height:100%; background:#fff; box-shadow:-1em 0 1em rgba(0,0,0,.1); transform:translateX(100%); transition:.4s; } #header .all_wrap .all_layer .all_inner > .wrap_in { gap:2em; padding:3em 3em; } #header .all_wrap .all_layer .all_inner > .mark { position: absolute; bottom: 0; right: 0; width: 16em; opacity: .15; } #header .all_wrap .all_layer .all_inner > .mark > img { width: 26.5em; } #header .all_wrap .all_layer .wrap_top a { transition:.2s; } #header .all_wrap .all_layer .wrap_top .all_logo { } #header .all_wrap .all_layer .wrap_top .all_logo .in { display:block; width:20em; } #header .all_wrap .all_layer .wrap_top .all_logo .in img { width: 14em; } #header .all_wrap .all_layer .wrap_top .all_mem { gap:.25em; padding:1em 0; } #header .all_wrap .all_layer .wrap_top .all_mem > li { flex: 1; } #header .all_wrap .all_layer .wrap_top .all_mem > li .in .icon { position: absolute; left: .5em; } #header .all_wrap .all_layer .wrap_top .all_mem > li .in { position:relative; height:2.25em; padding:0 1em; border:1px solid var(--siteC2); background:var(--siteC2); color: #fff; border-radius:.25em; line-height:normal; align-items: center; justify-content: center; } #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 { } #header .all_wrap .all_layer .wrap_top .all_mem > li .in:hover .icon { color: #fff; } #header .all_wrap .all_layer .wrap_middle { } #header .all_wrap .all_layer .wrap_middle .gnb { flex-wrap:wrap; } #header .all_wrap .all_layer .wrap_middle .gnb > li { flex:1 1 100%; } #header .all_wrap .all_layer .wrap_middle .gnb > li.m_mypage { display:block; } #header .all_wrap .all_layer .wrap_middle .gnb ul.flex { display:block; } #header .all_wrap .all_layer .wrap_middle .gnb a { position:relative; justify-content:flex-start; text-align:left !important; font-weight:500; transition:.2s; } #header .all_wrap .all_layer .wrap_middle .gnb li > a.layer { display: none; } #header .all_wrap .all_layer .wrap_middle .gnb li.more > a.layer { display: block; } #header .all_wrap .all_layer .wrap_middle .gnb li.more { } #header .all_wrap .all_layer .wrap_middle .gnb li.more > a.link { display:none; } #header .all_wrap .all_layer .wrap_middle .gnb li.more > a.layer { display:flex !important; padding-right:2.5em; display: block; align-items: center; } #header .all_wrap .all_layer .wrap_middle .gnb li.more > a .arrow { position:absolute; right:1em; top:50%; transform:translateY(-50%); font-size:1em; } #header .all_wrap .all_layer .wrap_middle .gnb li.more > a .arrow:before { content:"\e943"; font-size:1.250em; font-weight: 600; display:block; transition:.2s; } #header .all_wrap .all_layer .wrap_middle .gnb li.more > ul { display:none; } #header .all_wrap .all_layer .wrap_middle .gnb li.more.on > a .arrow:before { transform:rotate(-180deg); } #header .all_wrap .all_layer .wrap_middle .gnb li.more.on > ul { display:block; } #header .all_wrap .all_layer .wrap_middle .gnb ul { padding:1em 1em; } #header .all_wrap .all_layer .wrap_middle .gnb ul li > a { padding:.875em .5em; } #header .all_wrap .all_layer .wrap_middle .gnb ul li.more .arrow { right:.5em; } #header .all_wrap .all_layer .wrap_middle .gnb > li { } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 { height:4em; padding:0 1.5em; border:solid #ddd; border-width:1px 0; margin-bottom:-1px; } #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt { font-size:1.188em; font-weight: 600; } #header .all_wrap .all_layer .wrap_middle .gnb > li.act .dp1, #header .all_wrap .all_layer .wrap_middle .gnb > li.on .dp1 { background-color: var(--siteC); color:#fff; } #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a { padding-left:1.5em; } #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a:before { content:""; position:absolute; left:.75em; top:50%; width:.313em; height:.313em; background:var(--siteC); border-radius:50%; transform:translateY(-50%); } #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a .tt { font-size:1.063em; } #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li > a:hover { background: #f1f1f1; transition: .1s; } #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.act > a { background:var(--crGray) } #header .all_wrap .all_layer .wrap_middle .gnb .dp2 > li.on > a { color:var(--siteC); font-weight:600; } #header .all_wrap .all_layer .wrap_middle .gnb .dp3 { background:var(--crGray2); } #header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li > a { color:#444; } #header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li + li > a { border-top:1px dashed #ddd; } #header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li.act > a .tt, #header .all_wrap .all_layer .wrap_middle .gnb .dp3 > li.on > a .tt { text-decoration:underline; } .allGnbOn { overflow-y:hidden } .allGnbOn body { overflow-y:scroll } .allGnbOn #header .all_wrap .all_btn { z-index:999; position:fixed; top:1em; right:2vw; width:2.5em; height:3em; filter: brightness(0) invert(0) !important; } .allGnbOn #header .all_wrap .all_btn .ham { background:transparent !important; transition:0s; } .allGnbOn #header .all_wrap .all_btn .ham:before, .allGnbOn #header .all_wrap .all_btn .ham:after { width:100% !important; top:50% !important; height:2px; } .allGnbOn #header .all_wrap .all_btn .ham:before { transform:rotate(45deg); } .allGnbOn #header .all_wrap .all_btn .ham:after { transform:rotate(-45deg); } .allGnbOn #header .all_wrap .all_layer { z-index:99; opacity:1; visibility:visible; } .allGnbOn #header .all_wrap .all_layer .all_close { opacity:1; transition:.4s; } .allGnbOn #header .all_wrap .all_layer .all_inner { transform:translateX(0); transition:.4s; } .scroll.up #header { background:#fff; box-shadow:0 0 2em rgba(0,0,0,.1); color:#111 } .scroll.up #header .top_wrap .wrapH, .scroll.up #header .top_wrap .gnb_wrap .dp1 { height:4.5em } .scroll.up #header .top_wrap .etc_wrap .etcBtn { filter: brightness(0) invert(0); } .scroll.up .headerT { padding-top:4em } .scroll.up #header .top_wrap .logo > a { filter:none } .scroll.up #header .top_wrap .gnb_wrap .gnb > li.on .dp1 { color:var(--siteC) } .scroll.up #header .top_wrap .gnb_wrap .gnb > li .dp1 .va:after { background:var(--siteC) } .scroll:not(.up) #header { transform:translateY(-100%) } #footer { z-index:1; color:#fff; background:#111; padding:4em 0 5em 0 } #footer .goTop { position:fixed; right:0; bottom:0; width:3.5em; line-height:3.5em; text-align:center; background:var(--siteC); color:#fff; box-shadow:0 0 1em rgba(0,0,0,.1); opacity:0; transform:translateY(100%); transition:.5s } #footer .goTop .xi { font-size:1.5em; transition:.3s } #footer .goTop:hover .xi { transform:translateY(-.25em) } .scroll #footer .goTop { opacity:1; transform:translateY(0) } #footer .logo_wrap { display:flex; align-items:center; justify-content:space-between } #footer .logo { filter:brightness(0) invert(1) } #footer .logo img { height:3em } #footer .info_wrap { display:flex; justify-content:space-between; align-items:flex-start; margin-top:3em } #footer .info { overflow:hidden; flex:1 1 0%; min-width:0 } #footer .info > li { float:left; margin-right:2em; margin-bottom:.25em; opacity:.8; position:relative } #footer .info > li:before { content:""; position:absolute; left:-1em; height:70%; top:50%; transform:translateY(-50%); width:1px; background:#fff; opacity:.2 } #footer .info > li.point { font-weight:600 } #footer .info > li.br { clear:left } #footer .copyright { font-size:.813em; opacity:.6; text-transform:uppercase; margin-top:1em } #footer .site_wrap { margin-left:auto; background:#333; width:14em; font-size:.875em; position:relative } #footer .site_wrap .siteBtn { display:flex; align-items:center; padding:1em; font-weight:500; transition:.3s } #footer .site_wrap .siteBtn .arrow { margin-left:auto; transition:.3s } #footer .site_wrap .list { position:absolute; left:0; bottom:100%; width:100%; background:inherit; visibility:hidden; opacity:0; transform:translateY(1em); transition:.3s } #footer .site_wrap .list > li > a { display:block; padding:1em; padding-right:3em; border-bottom:1px solid rgba(255,255,255,.1); position:relative; transition:.3s } #footer .site_wrap .list > li > a:after { content:"\e980"; font-family:xeicon; position:absolute; right:1em; top:50%; transform:translateY(-50%); opacity:0; transition:.3s } #footer .site_wrap .list > li > a:hover { background:rgba(255,255,255,.1) } #footer .site_wrap .list > li > a:hover:after { opacity:1 } #footer .site_wrap .siteBtn:hover, #footer .site_wrap.on .siteBtn { background:rgba(0,0,0,.2) } #footer .site_wrap.on .siteBtn .arrow { transform:rotate(180deg) } #footer .site_wrap.on .list { visibility:visible; opacity:1; transform:translateY(0) } .sns_st { display:flex; gap:.5em } .sns_st > li > a { display:flex; align-items:center; justify-content:center; width:2.5em; height:2.5em; color:#fff; border-radius:50%; transition:.3s } .sns_st > li > a:hover { background:#fff; color:#111 } /**********공통**********/ #contents .doc { padding: 4em 0 10em 0; } #contents .doc.pt0 { padding: 0em 0 10em 0; } #contents .doc.pb0 { padding: 4em 0 0em 0; } .Rlate { position:relative; } /*gary before*/ .begray { position: relative; } .begray:before { position: absolute; width: 100%; bottom: 0; top: 4.5em; background: #f9f9f9; content: ''; } /*gra line*/ .sub_line { width: 100%; height: 2px; background: linear-gradient(to right, #7fc31c, #00844a); } /*page_dot 공통*/ .page_dot_list { padding: 0 1.25em; margin-top: 1.25em; } .page_dot_list > li { position:relative; margin-bottom: .5em; } .page_dot_list > li > .txt { font-size: 1em; } .page_dot_list > li:before { position: absolute; left: -13px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); content: ''; } .page_dot_list > li:last-of-type { margin-bottom: 0em; } .page_dot_list.s1 { margin-top: 0em; } .page_dot_list.s1 > li:before { width: none; height: none; background: none; top: unset; left: -15px; content: '-'; } /*page_line 공통*/ .page_line_list { margin-top: 1.25em; } .page_line_list > li { position:relative; padding: .65em 1.25em; border-bottom: 1px solid #e5e5e5; } .page_line_list > li > .txt { font-size: 1em; } .page_line_list > li:before { position: absolute; left: -13px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--siteC); content: ''; } /*sub areaD*/ .page_con { position:relative; padding: 4em 0; } .page_con.bg1 { background: #f9f9f9; } /*버튼*/ .button-gradient { color: #fff; background-image: linear-gradient(48deg, #90fa3e, #21996c, #21996c, #63ff93); background-size: 300% 100%; background-position: 0%; border-color: transparent; transition: background ease .3s; } .button-gradient:hover { background-position: 15%; } .btn-round { border-radius: 50px; } .sub_btn .btn { padding-top: 18px; padding-bottom: 18px; width: 200px; text-align: center; font-size: 20px; font-weight: 700; } .sub_btn .btn > .xi { margin-left: .3em; } .sub_btn .btn.s1 { font-size: 16px; padding-bottom: 16px; padding-top: 16px; font-weight: 600; background: var(--siteC); color: #fff; } /*sub 타이틀 점*/ .dot-tit { position:relative; padding-left: 1em; font-size: 1.85em; font-weight: 800; color: #111; margin-bottom: 1.15em; } .dot-tit:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; width: 7px; height: 7px; border-radius: 50%; border: 4px solid var(--siteC); } /*sub 펼쳐짐 효과*/ .sub-wide { overflow: hidden; position: relative; clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1) .15s; } .sub-wide.on { clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); visibility: visible; opacity: 1; transition: clip-path 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0s; } /*구분 de*/ .sub_diviC { gap: 6em; transform: translateY(2em); transition: 1s; opacity: 0; } .sub_diviC.listShow.on { transform: translateY(0em); transition: 1s; opacity: 1; } .sub_diviC .dvT { flex: 1 1 20%; } .sub_diviC .dvT .tit { } .sub_diviC .dvIF { flex: 1 1 80%; } .sub_diviC .dvIF .tt { font-size: 1.1em; line-height: 1.6; 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 .fst2>li { flex: 1 1 50%; max-width: 50%; } .flex_box .fst2>li>.in { margin: 0 0 1em 1em; } .flex_box .fst3>li { flex: 1 1 33.33%; max-width: 33.33%; } .flex_box .fst3>li>.in { margin: 0 0 1em 1em; } .flex_box .fst4>li { flex: 1 1 25%; max-width: 25%; } .flex_box .fst4>li>.in { margin: 0 0 1em 1em; } /*sub 탑 공통*/ #contents { } #contents .sub_top_wrap { box-sizing:border-box; display:flex; flex-direction:column } #contents .sub_top_wrap .visual_wrap { height:45vh; position:relative; overflow:hidden; transition:.5s } html:not(.scroll) #contents .sub_top_wrap .visual_wrap { padding:0 } #contents .sub_top_wrap .visual_wrap .wrapIn { position:relative; height:100% } #contents .sub_top_wrap .visual_wrap .bg { position:absolute; left:0; top:0; width:100%; height:100%; background-color:#000; transform: scale(1.1); transition:.3s; } #contents .sub_top_wrap .visual_wrap .bg:before { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0, .25); content: ''; } #contents .sub_top_wrap .visual_wrap .con_wrap { height:100%; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; box-sizing:border-box } #contents .sub_top_wrap .visual_wrap .con_wrap .t1 { font-size: 3.65em; font-weight: 700; } #contents .sub_top_wrap .visual_wrap .slogan { position:relative; flex:1 1 0%; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2em 0 } #contents .sub_top_wrap .visual_wrap .slogan .t1 { font-weight:700; font-size:3em; text-transform:uppercase; letter-spacing:-.025em; padding-left:.025em; line-height:1 } #contents .sub_top_wrap .visual_wrap .slogan .sub-slogan { font-size: 1.45em; font-weight: 500; padding: 0 4vw; } .load #contents .sub_top_wrap .visual_wrap .bg { animation: 2.5s subVisual cubic-bezier(0.39, 0.58, 0.57, 1) forwards; } @keyframes subVisual { to { transform: scale(1); } } #contents .sub_top_wrap .tit_wrap { } #contents .sub_top_wrap .tit_wrap .wrapIn { display:flex; justify-content:space-between; align-items:center; height:7em; border-bottom:1px solid #eee } #contents .sub_top_wrap .tit_wrap .tit .t1 { font-size:2.415em; font-weight:800 } #contents .sub_top_wrap .nav { display:flex; align-items:center; } #contents .sub_top_wrap .nav > li { text-transform:uppercase } #contents .sub_top_wrap .nav > li:not(.home):before { content:"\e940"; font-family:xeicon; margin:0 .5em } #contents .sub_top_wrap .nav > li.home { color:var(--siteC) } #contents .sub_top_wrap .nav > li.home > a { width:1.5em; height:1.5em; border-radius:50%; background:var(--siteC); color:#fff; display:flex; align-items:center; justify-content:center } #contents .sub_top_wrap .nav > li.home > a .xi { font-size:1em } #contents .sub_top_wrap .sub_tab { position: absolute; bottom: 0; width:100%; background: rgba(0,0,0, .2); backdrop-filter: blur(2px); box-shadow: 6px 0 18px rgba(0,0,0,.05); } #contents .sub_top_wrap .sub_tab .gnb > li { width:100% } #contents .sub_top_wrap .sub_tab .gnb .dp2 { justify-content:center } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li { position: relative; flex: 1; max-width: 20%; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on:after { position: absolute; top: 0; width: 100%; height: 3px; background: #fff; content: ''; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li:last-of-type:before { display: none; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li:before { position: absolute; right: 0; width: 1px; height: 20px; background: rgba(255,255,255, .35); content: ''; top: 50%; transform: translateY(-50%); } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li > a { display:flex; align-items:center; letter-spacing: .03em; justify-content:center; font-size: 1.25em; font-weight: 500; color: #fff; opacity: .65; height:3.65em; padding:0 .5em; transition: .15s; position:relative } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li > a:hover { opacity: 1; transition: .15s; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li > a .va { font-weight:600; font-size:1.125em; opacity:.7; position:relative; z-index:1 } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on > a { color:#fff; opacity: 1; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on > a:after { content:""; position:absolute; left:0; bottom:0; width:100%; height:100%; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li:hover > a .va, #contents .sub_top_wrap .sub_tab .gnb .dp2 > li.on > a .va { opacity:1; } #contents .sub_top_wrap .sub_tab .gnb .dp2 > li > .layer { display: none; } .dp1on .gnb .dp2 { display:none!important } .dp2on .gnb > li, .dp2on .gnb > li .dp1, .dp2on .gnb > li .dp3 { display:none!important } .dp2on .gnb > li.on { display:block!important } .dp3on .gnb > li, .dp3on .gnb > li .dp1, .dp3on .gnb > li .dp2 > li, .dp3on .gnb > li .dp2 > li > a { display:none!important } .dp3on .gnb > li.on, .dp3on .gnb > li .dp2 > li.on { display:block!important } /**/ .vod_wrap { position:relative } .vod_wrap .vod { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover } .vod_wrap .layer { position:absolute; left:0; top:0; width:100%; height:100% } .visualSlide .el { position: relative; overflow:hidden; height:100vh; background:#fff } .visualSlide .el .bg { position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.2) } .visualSlide .el .vod_wrap { position:relative; height:100% } .visualSlide .el.swiper-slide-active .vod_wrap:after, .visualSlide .el.swiper-slide-duplicate-active .vod_wrap:after { transition:2s; opacity:.2 } .visualSlide .el.swiper-slide-active .bg, .visualSlide .el.swiper-slide-duplicate-active .bg { transition:7s; transform:scale(1) rotate(.001deg) } .visualSlide .el:nth-child(3n - 2) .bg { height:110%; transform:scale(1) } .visualSlide .el.swiper-slide-active:nth-child(3n - 2) .bg, .visualSlide .el.swiper-slide-duplicate-active:nth-child(3n - 2) .bg { transform:translateY(-9.0909%) rotate(.001deg) } .visualSlide .el:nth-child(3n - 1) .bg { width:110%; transform:scale(1) } .visualSlide .el.swiper-slide-active:nth-child(3n - 1) .bg, .visualSlide .el.swiper-slide-duplicate-active:nth-child(3n - 1) .bg { transform:translateX(-9.0909%) rotate(.001deg) } .visualSlideSlogan_wrap { position:absolute; left:0; width:100%; bottom:0; box-sizing:border-box; z-index:10; color:#fff } .visualSlideSlogan_wrap .wrapIn { display:flex; flex-direction:column; height:100% } .visualSlide_wrap .slogan { margin-bottom:auto; transform:translateY(-80%); box-sizing:border-box; padding:0 5vw } .visualSlide_wrap .slogan .t1 { font-size:1.875em; font-weight:500 } .visualSlide_wrap .slogan .t2 { font-size:5.25em; font-weight:900; letter-spacing:-.063em; word-spacing:.125em; margin:.125em 0 .375em 0; line-height:1.2 } .visualSlide_wrap .slogan .t3 { font-size:1.375em; line-height:1.6 } .visualSlide_wrap .slogan .ani { overflow:hidden } .visualSlide_wrap .slogan .ani > i { transform:translateY(200%); } .load .visualSlide_wrap .slogan .ani > i { transform:translateY(0); transition:1s } .load .visualSlide_wrap .slogan .ani.d1 > i { transition-delay:.5s } .load .visualSlide_wrap .slogan .ani.d2 > i { transition-delay:1s } .load .visualSlide_wrap .slogan .ani.d3 > i { transition-delay:1.5s } .visualSlide_control { margin-top:2em; display:flex; align-items:flex-end; width:100% } .visualSlide_control .control { margin:0 0 1em auto } .visualSlide_control .paging { width:5em; text-align:center; } .visualSlide_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 } .main_box { padding:5em 0; overflow:hidden } .main_box.bg1 { background:#f5f5f5 } .main_tit { margin-bottom:2em; display:flex; flex-direction:column; align-items:flex-start; gap:1em } .main_tit.g1 { gap:2em } .main_tit.hc { align-items:center; text-align:center } .main_tit.vc { justify-content:center } .main_tit .tit1 { font-size:7.25vw; font-weight:900; letter-spacing:-.063em; word-spacing:.125em } .main_tit .tit1.s1 { font-size:5.5em } .main_tit .tit1.s2 { font-size:3em } .main_tit .tt1 { font-size:1.25em; line-height:1.8; font-weight:500 } .main_tit .vodW { position:relative } .main_tit .vodW .vod_wrap { position:absolute; left:0; top:0; width:100%; height:100%; mix-blend-mode:lighten } .main_tit .vodW .twrap { background:#fff } .main_tit .c1 { opacity:.1 } .main_more { padding:.75em 1.5em; border:1px solid #111; display:inline-flex; align-items:center; gap:1em } .main_more:after { content:"+" } .main_more .t1 { font-size:1.063em } .main_more.white { border-color:#fff; color:#fff } .mainFlex { display:flex; gap:4em; align-items:flex-start; position:relative; box-sizing:border-box } .mainFlex .wrapTit { width:30%; position:sticky; left:0; top:0; padding:5em 0; box-sizing:border-box } .mainFlex .wrapCon { flex:1 1 0%; min-width:0 } .main_dep { display:flex; justify-content:center; gap:2em } .main_dep > li { width:12em } .main_dep > li .in { box-sizing:border-box; box-shadow:0 0 2em rgba(0,0,0,.1); border-radius:50% } .main_dep > li .in .re { display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; padding:1em; gap:1em; text-align:center } .main_dep > li .in .re .ico { height:40% } .main_dep > li .in .re .ico img { height:100% } .main_dep > li .in .re .t1 { font-weight:500; color:var(--siteC); font-size:1.063em } .main_mission { display:flex; flex-wrap:wrap; overflow:hidden; border-radius:2em; margin-top:-1em } .main_mission > li { width:33.33% } .main_mission > li .in { position:relative } .main_mission > li .in:before { content:""; position:absolute; left:-1px; top:-1px; width:100%; height:100%; border:1px solid rgba(255,255,255,.1); border-right:none; border-bottom:none } .main_mission > li .in .con_wrap { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; padding:2em; gap:1em; text-align:center; color:#fff } .main_mission > li .in .con_wrap .t1 { font-weight:700; font-size:1.5em } .mainNewsSlide_wrap { overflow:hidden } .mainNewsSlide { overflow:visible !important } .mainNewsSlide .el .wrap_in { border-radius:1em; overflow:hidden; background:#fff; cursor: pointer; } .mainNewsSlide .el .wrap_in .con_wrap { box-sizing:border-box; padding:2em; display:flex; flex-direction:column; gap:.75em 0 } .mainNewsSlide .el .wrap_in .con_wrap .cate { font-weight:700; text-transform:uppercase; font-size:.938em } .mainNewsSlide .el .wrap_in .con_wrap .tit { font-size:1.125em; font-weight:700 } .mainNewsSlide .el .wrap_in .con_wrap .tt { opacity:.8 } .mainNewsSlide .el .wrap_in .con_wrap .date { color:#777; font-size:.875em } .main_member { display:flex; flex-wrap:wrap; gap:2em } .main_member > li { width:calc(50% - 1em) } .main_member > li .wrap_in { border-radius:1em; overflow:hidden; border:1px solid #ddd; display:flex; } .main_member > li .wrap_in .img_wrap { width:14em; height: 10em; box-sizing:border-box; border-right:1px dashed #ddd; padding:1.5em } .main_member > li .wrap_in .img_wrap > img { width: 100%; height: 100%; object-fit: contain; } .main_member > li .wrap_in .img_wrap .resize { padding-bottom:50% } .main_member > li .wrap_in .con_wrap { flex:1 1 0%; min-width:0; padding:1.5em; height: 7.5em; padding-bottom:1em; display:flex; flex-direction:column; gap:.5em } .main_member > li .wrap_in .con_wrap .t1 { font-weight:700; font-size:1.375em } .main_member > li .wrap_in .con_wrap .t2 { color:#666; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .main_member > li .wrap_in .con_wrap .btn { position: absolute; bottom: 1em; right: 2em; display:flex; justify-content:flex-end; gap:.5em; margin-top:auto } .main_member > li .wrap_in .con_wrap .btn > li .st { width:2em; height:2em; border-radius:50%; border:1px solid #ddd; display:flex; align-items:center; justify-content:center; color:#aaa } .main_member > li .wrap_in .con_wrap .btn > li .st .ico { font-size:1em } .main_member > li .wrap_in .con_wrap .btn > li .st.site .ico:before { content:"\eb8f" } .main_member > li .wrap_in .con_wrap .btn > li .st:hover { background:var(--siteC); color:#fff; border-color:transparent } .partner_wrap .main_member { gap: 1.5em; } .main_link { display:flex } .main_link > li { width:50% } .main_link > li .in { position:relative } .main_link > li .in .img_wrap .resize { padding-bottom:30%; transition:1s } .main_link > li .in .con_wrap { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; padding:2em; gap:1em; text-align:center; color:#fff } .main_link > li .in .con_wrap .t1 { font-weight:800; font-size:1.75em } .main_link > li .in .con_wrap .more { padding:.5em 1.5em; border:1px solid rgba(255,255,255,.5); font-weight:500; border-radius:.5em; transition:.3s } .main_link > li .in:hover .img_wrap .resize { transform:scale(1.1) } .main_link > li .in:hover .con_wrap .more { background:var(--siteC); color:#FFF; border-color:transparent } /***********sub***********/ /*문의하기*/ .table_form_wrap { } .table_form_wrap .form_tit { padding:1em 0 } .table_form_wrap .form_tit .t1 { font-weight:700; font-size:1.375em } .table_form_wrap .form_tit .t2 { font-weight:700; font-size:1.625em } .table_form_wrap .form_tit .t3 { font-weight:500; font-size:1.125em } .table_form > li { border-bottom:1px solid #ddd; padding: 1.15em 0 } .table_form > li:first-child { border-top:1px solid #111 } .table_form > li.bd0 { border-bottom:none !important } .table_form > li.bd1 { border-top:none !important } .table_form > li.p1 { padding:1.5em 0; } .table_form .wrap_in { display:flex; align-items:center } .table_form .wrap_in .ti_wrap, .table_form .wrap_in .con_wrap { min-height:3em; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; } .table_form .wrap_in .tit_wrap { width:12em; gap:.5em 0; padding:0 1.25em; } .table_form .wrap_in .ti_wrap { width:12em; gap:.5em 0; padding:0 1.25em; } .table_form .wrap_in .tit1 { font-size:1.125em; font-weight:600; } .table_form .wrap_in .tit2 { font-size:1.063em; font-weight:600; } .table_form .wrap_in .tit3 { font-size:1.000em; font-weight:500; line-height:1.2; } .table_form .wrap_in .con_wrap { flex:1 1 0%; min-width:0; gap:.25em; font-size:1.063em; } .table_form .wrap_in .con_wrap.wide > * { flex:1 1 0%; min-width:0 } .table_form .wrap_in .con_wrap .inp_tt { flex:0 0 auto; font-size:.938em; color:#666; } .table_form .wrap_in .con_wrap .line { padding-top:.75em; margin-top:.75em; border-top:1px solid #ddd } .table_form .wrap_in .con_wrap .w1 { flex:0 0 auto; width:3em } .table_form .wrap_in .con_wrap .w2 { flex:0 0 auto; width:9em } .table_form .wrap_in .con_wrap .w50 { flex:0 0 auto; width:50% } .table_form .wrap_in .con_wrap .w100 { flex:0 0 auto; width:100% } .table_form .wrap_in .con_wrap .w_auto { flex:0 0 auto } .table_form .wrap_in .con_wrap .max1 { max-width:27em } .table_form .wrap_in .con_wrap .max2 { max-width:8.375em } .table_form .wrap_in .con_wrap .max3 { max-width:23.5em } .table_form .wrap_in .con_wrap .min1 { min-width:23.5em } .table_form .wrap_in.col { flex-direction:column } .table_form .wrap_in.col > * { flex:0 0 auto; width:100% } .table_form .wrap_in.col .tit_wrap { padding:0 0; } .filebox label { padding: 10px 20px; color: #fff; background-color: #999; cursor: pointer; margin-left: 10px; display: flex; align-items: center; justify-content: center; width: 7.25em; min-width: 6.25em; } .filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; } .qna_wrap { text-align: center; padding: 3.5em 0; margin-bottom: 2.5em; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .contact_wrap .form_wrap { flex: 1 1 100%; } .qna_wrap .symbol { margin-bottom: .5em; } .qna_wrap .symbol > img { width: 3em; } .agree_box { transition:.2s; } .agree_box:hover, .agree_box:focus { border-color:#000; } .agree_box .agree_wrap { overflow-y:scroll !important; } .agree_box .agree_wrap.st2 { height:16em; border: 1px solid #ddd; background: #fff; margin-top: 1em; padding: 2em 2.5em; border-radius: 0.5em; overflow: hidden; box-sizing: border-box; } .agree_box .tit { font-size:1.188em; font-weight:500; color:#111; margin-bottom:1em; margin-top:2em } .agree_box .tit:first-child { margin-top:0 } .agree_box .con { font-size:.875em; color:#666; line-height:1.6 } .agree_box .con.hSt { overflow-y:scroll; height:10em; } .agree_box .con > * { padding-top:.5em; } .agree_box .check { padding: 1em 2em; text-align: right; background: #fff; } .agree_box .check .sub_tt { font-size: 1.05em; font-weight: 600; } .agree_box .label_st .xi { border: 1px solid var(--siteC); } .agree_box_pop { border-radius: .5em; border: 1px solid #ddd; padding: 1.5em 2em; color: #555; line-height: 1.8; font-size: 1.05em; } .inquiry_tit { position:relative; display: inline-block; font-size: 2.15em; font-weight: 700; color: #111; margin-bottom: 1.1em; } /* .inquiry_tit:after { position: absolute; width: 7px; height: 7px; right: -16px; top: 65%; border-radius: 50%; background: var(--siteC); content: ''; } */ /*스폰서*/ .sponser_wrap .spon_topbg { position: relative; background: url(../images/sub/support_bg.jpg) no-repeat center / cover; height: 550px; margin: 0 auto; border-radius: 0 0 0 3em; overflow: hidden; } .sponser_wrap .spon_topbg:before { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .15); content: ''; } .sponser_wrap .spon_topbg .spon_tbox { position: absolute; top: 50%; left: 63%; transform: translate(-20%, -50%); width: 35em; } .sponser_wrap .spon_topbg .spon_tbox .tit { font-size: 2.55em; font-weight: 800; color: #fff; margin-bottom: .8em; } .sponser_wrap .spon_topbg .spon_tbox .txt { color: #fff; font-size: 1.15em; line-height: 1.8; } .sp_ibox li { } .sp_ibox li > .in { } .sp_ibox li > .in .spB { position:relative; padding: 6em 2em; max-height: 22em; text-align: center; box-sizing: border-box; border: 1px solid #e5e5e5; border-radius: 0 0 0 3em; } .sp_ibox li > .in .spB:before { position: absolute; top:0; left: 0; width: 100%; height: 2px; background: var(--crGrad1); content: ''; } .sp_ibox li > .in .spB > img { width: 4em; } .sp_ibox li > .in .spB .tit { margin: 1em 0; font-size: 1.25em; font-weight: 800; color: #111; } .sp_ibox li > .in .spB .txt { font-size: 1.1em; line-height: 1.6; color: #666; } .sp_Wbox li { flex:1; } .sp_Wbox li .inLabel { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; gap:1em; padding:2em 2em; cursor:pointer; } .sp_Wbox li .inLabel > * { box-sizing:border-box; width:100%; margin:0 0; } .sp_Wbox li .inLabel .bg { position:absolute; top:0; left:0; width:100%; height:100%; background:#fff; /*border:2px solid transparent; */ box-shadow:0 2px 1em rgba(0,0,0,.1); border-radius:1em; transition:.2s; } .sp_Wbox li .inLabel .bg ~ * { position:relative; } .sp_Wbox li .inLabel .in_icon > .icon { width:8em; height:8em; background:var(--siteC2); border-radius:50%; } .sp_Wbox li .inLabel .in_icon > .icon img { width:3.5em; } .sp_Wbox li .inLabel input { position:absolute; width:0; height:0; overflow:hidden; opacity:0; } .sp_Wbox li .inLabel input ~ .bg { border: 2px solid var(--siteC); } .sp_Wbox li .inLabel:hover input ~ .bg { background:var(--crGrad1); } .sp_Wbox li .inLabel:hover .tit { color: #fff; } .sp_Wbox li .inLabel:hover .sub_btn .btn { background: #fff; color: var(--siteC); font-weight: 600; } .sp_Wbox .inLabel .tit { font-size: 1.25em; font-weight: 800; color: #111; padding-bottom: 1em; } /*미션*/ .mission_wrap { } .mission_wrap .ms_bg { position:relative; border-radius: 0 0 0 3em; overflow: hidden; } .mission_wrap .ms_bg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .45); content: ''; } .mission_wrap .ms_bg .twrap { position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; } .mission_wrap .ms_bg .twrap .tit { font-size: 3.15em; font-weight: 900; text-align: center; } .mission_wrap .ms_con { padding: 0 3em; margin-top: 3em; } .ms_con .ms_list { display:flex; justify-content:space-between; gap: 3em; } .ms_con .ms_list > li { width:50%; position:relative; } .ms_con .ms_list > li strong { color: #eee; position: relative; font-size: 4em; width: 100%; text-align: right; font-weight: 700; padding-bottom: 45px; } .ms_con .ms_list > li h4 { font-size: 1.35em; font-weight: 600; color: var(--siteC); margin-bottom: .65em; font-weight: 800; } .ms_con .ms_list > li h3 { font-size:2.25em; color:#111; font-weight: 800; border-bottom:1px solid #e5e5e5; padding-bottom:20px; line-height:1.3; } .ms_con .ms_list > li p { font-size: 1.25em; line-height: 1.6; color: #444; } .ms_con .ms_list > li .page_dot_list { background: #f9f9f9; padding: 2em 2.5em; } .ms_con .ms_list > li .page_dot_list > li .txt { font-size: 1.15em; font-weight: 400; color: #444; } .ms_con .ms_list > li > .img_con { width: 100%; height: 15em; border-radius: 5px; overflow: hidden; } .ms_con .ms_list > li > .img_con > img { width: 100%; height: 100%; object-fit: cover; } /*분과 소개*/ .divi_list { } .divi_list li { } .divi_list li > .in { margin: 0 0 2em 2em !important; } .divi_list li > .in > .img_con { position:relative; width: 100%; height: 32.5em; border-radius: 1em; overflow: hidden; } .divi_list li > .in > .img_con:before { position: absolute; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 00%, rgba(0,0,0,0.58) 80%); width: 100%; height: 100%; content: ''; } .divi_list li > .in > .img_con > .tit { position: absolute; top: 40px; left: 40px; font-size: 1.55em; color: #fff; font-weight: 800; } .divi_list li > .in > .img_con > .txt { position: absolute; bottom: 40px; left: 40px; font-size: 1.25em; color: #fff; font-weight: 800; } .divi_list li > .in > .img_con > img { width: 100%; height: 100%; object-fit: cover; } /*운영위원*/ .mem_wrap { } .mem_wrap .mem_list { } .mem_list li { } .mem_list>li>.in { position: relative; overflow: hidden; padding: 3.25em 3em; margin: 0 0 2em 2em !important; box-sizing: border-box; border: 1px solid #e6e6e6; border-radius: 5px; } .mem_list>li>.in .mark_img { position: absolute; top: 0; right: 0; width: 16.5em; opacity: .035; } .mem_list>li>.in .pro_con { width: 9em; height: 10em; border: 1px solid #e8e8e8; margin-bottom: 1.8em; } .mem_list>li>.in .pro_con>img { width: 100%; height: 100%; object-fit: cover; } .mem_list>li>.in .dt_name { align-items: center; font-size: 1.65em; font-weight: 800; color: #111; margin-bottom: .65em; } .mem_list>li>.in .dt_name .posit { font-size: .7em; color: #666; margin-left: .5em; } .mem_list>li>.in .fro_list { margin-top: 1.75em; } .mem_list>li>.in .fro_list .fro_con { margin-bottom: 1.5em; gap: .5em; } .mem_list>li>.in .fro_list .fro_con:last-of-type { margin-bottom: 0em; } .mem_list>li>.in .fro_list .fro_con .lab { display: block; color: #888; font-weight: 400; font-size: 1em; min-width: 8em; } .mem_list>li>.in .fro_list .fro_con .data { } .mem_list>li>.in .fro_list .fro_con .data>li { margin-bottom: .5em; } .mem_list>li>.in .fro_list .fro_con .data>li:last-of-type { margin-bottom: 0em; } .mem_list>li>.in .fro_list .fro_con .data>li>span { line-height: 1.35; font-weight: 400; font-size: 1em; color: #222; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } /*ci소개*/ .Tci_con { position: relative; top: -7em; } .Tci_con .logoB { background: #fff; height: 20em; border: 1px solid var(--lineC2); text-align: center; } .Tci_con .logoB>img { width: 23.5em; } .ci_list { } .ci_list>li { } .ci_list>li>.in { margin: 0 0 2em 2em !important; } .ci_list>li>.in .lbox { border: 1px solid var(--lineC2); height: 17.5em; background: #fff; } .ci_list>li:nth-child(2)>.in .lbox { background: var(--siteC); } .ci_list>li:nth-child(2)>.in .lbox>img { filter: brightness(0) invert(1); } .ci_list>li>.in .lbox>img { width: 17.5em; } .ci_list>li>.in .tit { text-align: center; font-size: 1.2em; font-weight: 500; color: #333; margin-top: 2em; } .cs_list { padding-bottom: 4.5em; } .cs_list > li { } .cs_list > li > .in { margin: 0 0 2em 2em !important; } .cs_list > li > .in .cbox { position:relative; padding: 2.5em; color: #fff; box-sizing: border-box; height: 11.5em; background: #fff; border: 1px solid var(--lineC2); height:11.5em; } .cs_list > li:nth-child(1) > .in .cbox { background: var(--siteC); } .cs_list > li:nth-child(2) > .in .cbox { background: #000; } .cs_list > li > .in .cbox .ctit { font-size: 1.35em; font-weight: 800; text-transform: uppercase; } .cs_list > li > .in .cbox .ctxt { position: absolute; bottom: 1.35em; gap: 2em; } .cs_list > li > .in .cbox .ctxt .st { font-weight: 800; } /*조직도*/ .organ_wrap { } .organ_wrap .organ_tit { } .organ_wrap .organ_tit .tit { font-size: 2.65em; color: #111; font-weight: 800; } .organ_wrap .organ_tit .txt { margin-top: 1.7em; font-size: 1em; font-weight: 400; color: #111; } .organ_wrap .organ_img { position:relative; text-align: center; padding: 5em 3em; border: 1px solid var(--lineC2); border-radius: 5px; } .organ_wrap .mark { width: 3em; margin-bottom: .5em; } /*오시는길*/ .root_daum_roughmap .wrap_controllers { display: none; } .location_wrap .map_wrap { } .location_wrap .map_wrap .map_info { padding: 0em 0 2em 0; margin-bottom: 2em; border-bottom: 1px solid #111; } .location_wrap .map_wrap .map_info .map_tit { align-items: center; } .location_wrap .map_wrap .map_info .map_tit .tit { font-size: 1.85em; font-weight: 800; } .location_wrap .map_wrap .map_info .icon { display: flex; align-items: center; font-size: 2.15em; color: var(--siteC); margin-right: .15em; } .location_wrap .map_wrap .map { border-radius: 1em; overflow: hidden; } .location_wrap .contact_list { margin-top: 1em; gap: 4em; } .location_wrap .contact_list > li { position:relative; } .location_wrap .contact_list > li:before { position: absolute; top: 50%; right: -2rem; transform: translateY(-50%); width: 1px; height: 1.6rem; background-color: #888; content: ""; } .location_wrap .contact_list > li:last-of-type:before { content: none; } .location_wrap .contact_list > li > p { font-size: 1.325em; } .location_wrap .contact_list > li > p > span { color: #666; font-weight: 400; } /*회원 혜택*/ .pageCon_num { counter-reset:number 0; } .pageCon_num > .innerNum .addNum:before { content:counter(number); counter-increment:number 1; } .procedureStep_list { position: relative; width: 100%; } .procedureStep_list>.list { margin: 0 0 -2em -1.5em; text-align: center; justify-content: end; } .procedureStep_list>.list>li { flex: 1; } .procedureStep_list>.list>li .wrap_in { position: relative; flex: 1; margin: 0 0 2em 1.5em; padding: 1em 1em; background: #fff; border-radius: 1em; z-index: 2; } .procedureStep_list>.list>li .wrap_in:before { position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; height: 100%; border: 3px solid #ddd; content: ''; border-radius: 1em; } .procedureStep_list>.list>li .wrap_in .info { text-align: center; } .procedureStep_list>.list>li .wrap_in .info .date { font-size: 1.35em; font-weight: 700; color: var(--siteC); } .procedureStep_list>.list>li .wrap_in .info .txt { padding-top: .75em; font-size: 1.1em; font-weight: 400; color: #666; } .procedureStep_list>.list>li .wrap_in .num { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 50%; width: 2em; height: 2em; background: #888; border-radius: 50%; color: #fff; transform: translate(-50%, -50%); } .procedureStep_list>.list>li .wrap_in .icon { margin: 1.625em 0; } .procedureStep_list>.list>li .wrap_in .icon img { width: 3.5em; } .procedureStep_list>.list>li .wrap_in .txt { } .procedureStep_list>.list>li .wrap_in .btn { padding-top: .875em; } .procedureStep_list>.list>li .wrap_in .btn .input_st { width: 100%; font-size: .875em; padding: .375em .5em; } .procedureStep_list>.list>li .wrap_in .tt { } .procedureStep_list>.list>li .wrap_in .t1 { font-size: .938em; font-weight: 600; color: #fff; } .procedureStep_list>.list>li .wrap_in .t2 { font-size: 1.063em; } .procedureStep_list>.list>li.point .wrap_in:before { border-width: 2px; border-color: var(--siteC); opacity: 1; transition: all .4s; } .procedureStep_list>.list>li.point .wrap_in .num { background: var(--siteC); transition: all .4s; } .pageCon_num>li .wrap_in .line { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); width: 3em; height: .35em; background: #ddd; } .pageCon_num>li .wrap_in .line:before { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--siteC); } /* .pageCon_num>li:nth-child(3n) .wrap_in .line { height: 3em; width: .5em; left: 50%; top: 100%; transform: translate(-50%, 0) } .pageCon_num>li:nth-child(3n) .wrap_in .line:before { width: 100%; height: 0; } */ .pageCon_num>li:nth-child(4) .wrap_in .line, .pageCon_num>li:nth-child(5) .wrap_in .line { left: auto; right: 100%; transform: rotate(180deg); } .pageCon_num>li.before .wrap_in .line:before { width: 100%; height: 100%; transition: all .5s ease-in-out; } .procedureStep_list.sec5>.list>li { flex: 1 1 25%; max-width: 25%; } .procedureStep_list.sec5>.list>li:nth-child(-n + 4) { order: -5; } .procedureStep_list.sec5>.list>li:nth-child(4) { order: 3; } .procedureStep_list.sec5>.list>li:nth-child(5) { order: 2; } .procedureStep_list.sec5>.list>li:nth-child(6) { order: 1; } .procedureStep_list .posLine { position: absolute; right: 0; width: .375em; height: .375em; background: #ddd; } .procedureStep_list .posLine:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--siteC); } .procedureStep_list .posLine:nth-child(2n + 1) { width: calc(100% - 1px); } .procedureStep_list .posLine:nth-child(2n) { height: 100%; } .procedureStep_list .posLine[data-line='1'] { top: calc(25% - .75em); } .procedureStep_list .posLine[data-line='2'] { right: 0; left: auto; } .procedureStep_list .posLine[data-line='3'] { top: calc(75%); } .procedureStep_list.sec5 .posLine[data-line='2'] { right: calc(16.8% - .75em); } .list_layout .layCon { width: 100%; } /*회원 혜택*/ .benefit_wrap .container { display: grid; grid-template-areas: "item1 item2 item4" "item3 item3 item4"; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; gap: 1.5em; width: 100%; height: 65vh; } .benefit_wrap .beneB { position: relative; overflow: hidden; border-radius: 1em; } .benefit_wrap .beneB > .img_con { position: relative; width: 100%; height: 100%; } .benefit_wrap .beneB > .img_con:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); content: ''; } .benefit_wrap .beneB > .img_con > img { width: 100%; height: 100%; object-fit: cover; } .benefit_wrap .beneB .tBox { position: absolute; bottom: 1em; right: 1em; font-weight: 700; color: #fff; font-size: 1.45em; } .item1 { grid-area: item1; } .item2 { grid-area: item2; } .item3 { grid-area: item3; } .item4 { grid-area: item4; }