@import url('/common/css/basic.css'); @import url("/common/font/SBAggro/fonts.css"); ::-webkit-scrollbar {width: 5px; height: 5px;} ::-webkit-scrollbar-track {background-color: #ddd;} ::-webkit-scrollbar-button {display: none;} ::-webkit-scrollbar-thumb {background-color: #aaa;} #wrap { overflow-x: hidden;} #wrap:has(#subContainer) {position: relative;} #wrap:has(#subContainer)::before {content: ""; display: block; width: 59.65rem; height: 27.05rem; background: url('/images/web/impact/main/w_bg1.png') right top / contain no-repeat; position: absolute; right: -16rem; top: 0; z-index: -1;} /* header */ #header {position: relative; margin: 0 auto; height: 7.1rem; z-index: 102;} #header .top_menu { background: #eaedef;} #header .top_menu ul { max-width: 80rem; margin: auto; display: flex;} #header .top_menu ul li a { display: inline-block; width: 7.5rem; line-height: 2.1rem; text-align: center; background: #fff; color: #005aa9; font-size: 0.9rem;} #header .top_menu ul li:nth-child(2) a { background: #005aa9; color: #fff;} #header h1 { font-size: 0;} #header h1 a { display: block; height: 100%; font-size: 0; } #header h1 a.m_logo { display: none;} #header .container .logo_wrap { display: flex;align-items: center; z-index: 11;width: 54rem; height: 100%;} #header .container .logo_wrap .class_name { display: inline-block; font-size: 1.1rem; font-weight: 600; color: #111; position: relative; padding-left: 1rem; margin-left: 1rem; float: left;} #header .container .logo_wrap .class_name::before { content: ''; display: inline-block; width: 1px; height: 1.25rem; background: #7e7e7e; position: absolute; left: 0; top: calc(50% - 0.625rem);} #header .headWrap { height: 5rem; display: flex; align-items: center; position: relative;} #header .container { max-width: 80rem; margin: 0 auto;} .bg { position: fixed; width: 100vw; height: 100vh; top: 7.1rem; left: 0; z-index: 1; background: rgba(0,0,0,0.3); display: none;} /* header - 유틸리티 */ #header .topUtil {position: relative; display: flex; justify-content: flex-end; align-items: center; margin-left: 1rem; right: auto !important; top: auto; transform: none;} #header .topUtil a{display: block;} #header .topUtil a.newTxt{position: relative;} #header .topUtil a.newTxt::after{ content: "5"; position: absolute; display: block; width: 20px; height: 20px; line-height: 20px; top: -7px; right: -7px; background-color: #f94544; color: #fff; box-shadow: 0 0 5px rgba(4, 0, 0, 0.38); border-radius: 50%; text-align: center; font-size: 13px;} #header .topUtil a:not(:first-of-type){margin-left: 40px;} /* 로그인 버튼 */ #header .top_menu { background: #eaedef;} #header .top_menu ul { max-width: 80rem; margin: auto; display: flex;} #header .top_menu ul li a { display: inline-block; width: 7.5rem; line-height: 2.1rem; text-align: center; background: #fff; color: #005aa9; font-size: 0.9rem;} #header .top_menu ul li:nth-child(2) a { background: #005aa9; color: #fff;} .top_menu { position: relative;} .top_menu > div { right: calc(50% - 40rem); position: absolute; top: 50%; transform: translateY(-50%); } .top_menu > div a + a { margin-left: 0.5rem;} .logIn_btn { font-family: 'Montserrat'; font-size: 0.75rem; color: #616568; } .top_menu > div a:nth-child(2) { display: inline-block; vertical-align: middle; width: 30px; height: 30px; text-indent: -10000px; background: url('/images/co/ico_interlock4.png') no-repeat center; } /* 전체메뉴 */ .fullmenu { font-size: 1.5rem; color: #0d254e; } .fullmenuClose {position: absolute;bottom: -1.5rem;left: calc(50% - 1.5rem);width: 3rem;height: 3rem;line-height: 3rem;text-align: center;font-size: 1.5rem;background: #000;border-radius: 50%; color: #fff;transition: all 0.2s;-webkit-transition: all 0.2s; z-index: 999;} .fullmenuClose::before { content: ''; display: block; width: calc(100% + 0.5rem); height: calc(100% + 0.5rem); background: rgba(0,0,0,0.3); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; z-index: -1;} .fullmenuClose:focus, .fullmenuClose:hover { transform: rotate(90deg);} /* web navigation */ /* gnb common */ #nav { width: 100%; z-index: 99; margin-left: auto;} #nav ul, #nav li {height:100%;} #gnb { height: 5rem; z-index: 2;} #gnb li a {position: relative; display: block; font-weight: 400;} #gnb li.dep > a:after {position: absolute; top: 0; right: 1rem; font-family: 'remixicon'; font-size: 1rem; content: "\EA4E"; z-index: 2;} #gnb li.dep.active > a:after {content: "\EA78";} #gnb li a[target='_blank']:after {position: absolute; top: 0; right: 1rem; font-family: 'xeicon'; font-size: 1rem; content: "\e980"; z-index: 2;} #gnb li a span {position: relative; z-index: 2;} #gnb .depth01 {margin: 0 auto; width: 100%; max-width: 54rem; z-index: 1;} #gnb .depth01 > ul {display: flex; width: 100%; text-align: center;} #gnb .depth01 > ul > li {flex: auto; line-height: 1.6; vertical-align: top;} #gnb .depth01 > ul > li > a {display: flex; justify-content: center; align-items: center; width: 100%; height: 5rem; font-size: 1.1rem; font-weight: 700; position: relative; color: #111;} #gnb .depth01 > ul > li > a::before {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0.25rem; background: #0D79C7; content: "";} #gnb .depth01 > ul > li.on > a {color: #111;} #gnb .depth01 > ul > li.on > a::before { width: 100%;} #gnb .depth01 > ul > li.on > a::after { opacity: 1;} #gnb .depth02 { width: 100%; height: auto; text-align: left;} #gnb .depth02 > ul > li > a { line-height: 3rem; padding: 0 1rem; font-size: 0.8rem; color: #222;} #gnb .depth02 > ul > li:not(:last-child) > a{border-bottom: 1px solid #e0e0e0;} #gnb .depth02 > ul > li > a[target='_blank'], #gnb .depth02 > ul > li.dep > a {padding-right: 2rem;} #gnb .depth03 {position: relative; display: none;} #gnb .depth03 > ul > li > a {font-size: 0.85rem; padding-left: 0.5rem; color: #444; line-height: 1.7rem; font-weight: 600;} #gnb .depth03 > ul > li > a:before {position: absolute; top: 0.85rem; left: 0; width: 4px; height: 4px; background: #BABABA; content: "";} #gnb .depth03 > ul > li > a:hover, #gnb .depth03 > ul > li > a:focus {font-weight: 600; color: #fff;} #gnb .depth03 > ul > li.dep > a:after {display: none;} #gnb .depth03 > ul > li > a[target='_blank'] {padding-right: 1rem;} #gnb .depth03 li a[target='_blank']:after { right: 0;} #gnb .depth04 {display: none;} #gnb .titBox {display: none;} #gnb:before, #nav a, #gnb li > a:before, #gnb li > a:after, #gnb li > a > span:before {transition: all 0.1s; -webkit-transition: all 0.1s;} /* active */ #gnb .active > .depth03 {display: block;} #gnb .active > .depth04 {display: block;} #gnb .depth02 > ul > li.active > a, #gnb .depth02 > ul > li > a:hover, #gnb .depth02 > ul > li > a:focus {font-weight: 700; color: #111;} /* gnb : oneDown */ #nav.oneDown .depth01 {position: relative;} #nav.oneDown .depth01 > ul {display: flex;} #nav.oneDown .depth01 > ul > li {position: relative; } #nav.oneDown .depth01 > ul > li > a {display: flex; justify-content: center; align-items: center; width: 100%; height: 5rem;} #nav.oneDown .depth01 > ul > li.on > a {font-weight: 700; color: #111;} #nav.oneDown .depth02 {position: absolute; top: 5rem; left: 0; background: #fff; border: 1px solid #e0e0e0; border-top: none; opacity: 0; visibility: hidden; transition-delay: 0s;} #nav.oneDown .depth02 > ul > li.dep > a:before {right: 0; top: 0.35rem;} #nav.oneDown .depth03 { padding: 0 1rem; background: #111;} #nav.oneDown .depth03 > ul {padding: 0.5rem 0;} /** oneDown : active **/ #nav.oneDown .depth01 > ul > li.on > .depth02 {opacity: 1; visibility: visible; display: block;} #nav.oneDown .depth02 > ul > li > a:hover, #nav.oneDown .depth02 > ul > li > a:focus{background-color: #f6f6f6;} /* gnb : fullDown */ #nav.fullDown #gnb:after {position: absolute; left: 0; top: 3rem; width: 100%; height: calc(100% - 3rem); background: #f9f9f9; opacity: 0; box-shadow: 0 5px 10px rgba(0,0,0,0.1); content: ""; z-index: 0;}/* 2뎁스 메뉴 전체영역 열림용 */ #nav.fullDown .depth01 {position: relative;} #nav.fullDown .depth01 > ul {display: table;} #nav.fullDown .depth01 > ul > li {position: relative; display: table-cell;} #nav.fullDown .depth01 > ul > li:before {position: absolute; top: 4rem; left: 0; width: 100%; height: calc(100% - 5rem); border-right: 1px solid #e0e2e6; opacity: 0; content: "";} #nav.fullDown .depth01 > ul > li:first-of-type:before {border-left: 1px solid #e0e2e6;} #nav.fullDown .depth01 > ul > li > a {display: flex; justify-content: center; align-items: center; width: 100%; height: 5rem;} #nav.fullDown .depth01 > ul > li.on > a {font-weight: 700; color: #000;} #nav.fullDown .depth02 {opacity: 0; visibility: hidden;} #nav.fullDown .depth02 > ul > li.dep > a:before {right: 0; top: 0.35rem;} #nav.fullDown .depth03 > ul {padding: 0.5rem 0; border-top: 2px solid #000; border-bottom: 1px solid #c5c9d6;} /** fullDown:active **/ #nav.fullDown #gnb.active {height: auto;} #nav.fullDown #gnb.active:after {opacity: 1;}/* 2뎁스 메뉴 전체영역 열림용 */ #nav.fullDown .active .depth01 {display: block; height: auto;} #nav.fullDown .active .depth02 {opacity: 1; visibility: visible; transition-delay: 0.15s;} #nav.fullDown .active .depth01 > ul > li.on {background: #fff;} #nav.fullDown .active .depth01 > ul > li:before {opacity: 1;} /* gnb : oneFull */ #nav.oneFull .depth02 {position: absolute;left: 0;top: 5rem; display: none; padding: 0;min-height: 16.5rem;background: #fff; width: 100vw;left: calc(50% - 50vw);overflow: hidden; border-radius: 0 0 3.3rem 3.3rem; box-shadow: 0 5px 10px rgba(0,0,0,0.1); border-top: 1px solid #DBDBDB;} #nav.oneFull .depth02 .titBox {position: absolute; top: 0; left: calc(50% - 35rem); display: block; padding: 2.5rem 1.5rem 2rem 0; width: 13rem; height: 100%;} #nav.oneFull .depth02 .titBox::before { content: ''; display: block; width: 500%; background: linear-gradient(to right, #257DE4, #2B95EE); height: calc(100% + 5rem); position: absolute; right: 0; top: 0; border-top-right-radius: 2.4rem;} #nav.oneFull .depth02 .titBox > * {position: relative;} #nav.oneFull .depth02 .titBox p {color: #fff ; font-family: 'SBAggro'; word-break: keep-all;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;font-weight: 400;overflow: hidden;position: relative;} #nav.oneFull .depth02 .titBox p span.tit{position: relative; z-index: 1;} #nav.oneFull .depth02 .titBox p span.line {position: absolute; width: 1px; height: 100%; background-color: #484848; top: 0;} #nav.oneFull .depth02 .titBox p span.line::after{content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: #fff; position: absolute; left: -3px;} #nav.oneFull .depth02 .titBox p span.lineL { left: 2.4rem;} #nav.oneFull .depth02 .titBox p span.lineL::after{ animation: oneFullCircleAni 5s infinite alternate linear;} #nav.oneFull .depth02 .titBox p span.lineR { right: 2.4rem;} #nav.oneFull .depth02 .titBox p span.lineR::after{ animation: oneFullCircleAni 4s 1.5s alternate-reverse infinite linear;} @keyframes oneFullCircleAni { 0%{transform: translateY(0); opacity: 0.5;} 100%{transform: translateY(11.5rem); opacity: 1;} } #nav.oneFull .depth02 > ul {margin: 0 auto; padding: 2.5rem 0.5rem 0.5rem 20.5rem; width: 100%; max-width: 80rem; height: 100%; font-size: 0; line-height: 0;} #nav.oneFull .depth02 > ul > li {display: inline-block; margin: 0.5rem 0; padding: 0 0.5rem; width: 25%; vertical-align: top; font-size: 1rem; line-height: 1.6;} #nav.oneFull .depth02 > ul > li > a {padding: 0 2rem 0 0.75rem; line-height: 3rem; color: #333; background: #fff; border: 1px solid #D9D9D9; z-index: 1; border-radius: 0.4rem; font-size: 0.9rem;} #nav.oneFull .depth03 {padding: 0.5rem;} #nav.oneFull .depth03 > ul > li > a:after {font-size: 0.8rem;} #nav.oneFull .depth04 > ul > li > a { font-size: 0.75rem; padding-left: 0.7rem;} /** oneFull:active **/ #nav.oneFull .depth02 > ul > li:not(.active) > a:focus, #nav.oneFull .depth02 > ul > li:not(.active) > a:hover, #nav.oneFull .depth02 > ul > li.dep.active > a { background: rgba(39, 141, 251, 0.04);color: #0F5AA6; border: 1px solid rgba(31, 132, 240, 0.3);} #nav.oneFull .depth01 > ul > li.on > .depth02 {display:block;} #nav.oneFull .depth03 > ul > li > a:hover, #nav.oneFull .depth03 > ul > li > a:focus {font-weight: 600; color: #0F5AA6;} #nav.oneFull .depth03 > ul > li > a:hover::before, #nav.oneFull .depth03 > ul > li > a:focus::before {background-color: #0F5AA6; } @keyframes oneFullDepth02_BgTextAni { 0% {background-position-x: 0;} 100% { background-position-x: -400%;} } /* 전체메뉴 */ .popFullmenu {position: fixed; top: 0; left: 0; display: none; width: 100%; min-height: auto; z-index: 999; background:#fff url(/images/web/impact/layout/bg4.png) no-repeat bottom center;} .popFullmenu .inner { overflow: hidden; background:url(/images/web/impact/layout/bg3.png) no-repeat right top;} .popFullmenu .fullmenu_wrap {position: relative; margin: 0 auto; width: 100%; max-width: 80rem; height: 100%;} .popFullmenu .f_logo_wrap { display: flex; height: 5rem; align-items: center;} #header .popFullmenu .f_logo_wrap h1 .logo{ display: block;} #header .popFullmenu .f_logo_wrap h1 .w_logo{ display: none;} .popFullmenu .f_logo_wrap .class_name { display: inline-block; font-size: 1.1rem; font-weight: 600; color: #111; position: relative; padding-left: 1rem; margin-left: 1rem; float: left;} .popFullmenu .f_logo_wrap .class_name::before { content: ''; display: inline-block; width: 1px; height: 1.25rem; background: #7e7e7e; position: absolute; left: 0; top: calc(50% - 0.625rem);} .popFullmenu h2 {position: relative; height: 4.5rem; line-height: 4.5rem; font-size: 1.25rem; color: #fff; border-bottom: 1px solid #000;} .popFullmenu .popUntil {display: none;} .popFullmenu .fullmenu_group { height: calc(100% - 4.5rem); } .popFullmenu .titBox {display: none;} .popFullmenu .depth01 > ul { display: flex;height: 100%; position: relative;} .popFullmenu .depth01 > ul:before { content: ''; display: block; width: 100vw; height: 1px; background: #D9D9D9; position: absolute; top: calc(4rem - 3px); left: calc(50% - 50vw);} .popFullmenu .depth01 > ul > li { flex: 1; height: 100%; position: relative;} .popFullmenu .depth01 > ul > li + li::before { content: ''; display: block; width: 1px; height: 100vh; background: #D9D9D9; position: absolute; top: calc(4rem - 2px); left: -2px; z-index: 100;} .popFullmenu .depth02 > ul > li.dep > a, .popFullmenu .depth02 > ul > li > a[target='_blank'] {padding-right: 1.5rem;} .popFullmenu .depth03 > ul > li.dep > a, .popFullmenu .depth03 > ul > li > a[target='_blank'] {padding-right: 1rem;} .popFullmenu .depth04 > ul > li > a[target='_blank'] {padding-right: 0.5rem;} .popFullmenu .depth01 {height: 100%; } .popFullmenu .depth01 > ul > li { width: 100%; line-height: 1.6; vertical-align: top; font-size: 0.8rem;} .popFullmenu .depth01 > ul > li > a {font-size: 1.2rem;color: #000;font-weight: 700; width: 100%;display: block;text-align: center; padding-bottom: 2rem; position: relative;z-index: 99;} .popFullmenu .depth01 > ul > li > a::before { display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #0F5AA6; content: ''; position: absolute; left: calc(50% - 0.25rem); bottom: -0.25rem; opacity: 0;} .popFullmenu .depth02 { padding: 2.5rem 1.1rem 3rem;} .popFullmenu .depth02 > ul > li + li { margin-top: 1rem;} .popFullmenu .depth02 > ul > li > a {position: relative; display: block; color: #222; z-index: 1; font-size: 1rem;} .popFullmenu .depth02 > ul > li > a:after {position: absolute; top: 0; right: 0.5rem; font-family: 'xeicon'; font-size: 1rem;} .popFullmenu .depth02 > ul > li.dep > a:after {content: '\e942';} .popFullmenu .depth02 > ul > li > a[target="_blank"]:after {content:"\e980";} .popFullmenu .depth02 > ul > li > a span { position: relative;} .popFullmenu .depth02 > ul > li > a span::before { content: ''; display: block; width: 0; height: 2px; background: #1976D9; position: absolute; bottom: -5px; left: 0; transition: all 0.2s;} .popFullmenu .depth03 {position: relative; display: none; padding: 0.5rem 0.75rem;background: #F7F7F7;border-radius: 0 0 0.25rem 0.25rem;margin-top: 0.3rem;border-top: 2px solid #1976D9;} .popFullmenu .depth03 > ul > li > a {position: relative; display: block; padding: 0.25rem 0 0.25rem 0.5rem; font-size: 0.75rem; color: #555;} .popFullmenu .depth03 > ul > li > a:before {position: absolute; top: 0.75rem; left: 0; width: 3px; height: 3px; background: #606060; content: "";} .popFullmenu .depth03 > ul > li > a:after {position: absolute; top: 0; right: -0.25rem; font-family: 'xeicon'; font-size: 1rem;} .popFullmenu .depth03 > ul > li.dep > a:after {content: '\e914';} .popFullmenu .depth04 {display: none; padding: 0.5rem; background: #fff; border: 1px solid #e3e3e3; border-radius: 0.25rem;} .popFullmenu .depth04 > ul > li > a {position: relative; display: block; padding: 0.15rem 0 0.15rem 0.5rem; font-size: 0.7rem; color: #666;} .popFullmenu .depth04 > ul > li > a:before {position: absolute; top: 0.65rem; left: 0; width: 0.25rem; height: 2px; background: #a0a0a0; content: "";} .popFullmenu .depth04 > ul > li > a[target="_blank"]:after {position: absolute; top: 0; right: -0.25rem; font-family: 'xeicon'; font-size: 0.8rem; content: '\e980';} /* active */ .popFullmenu .depth01 a, .popFullmenu .depth01 a::before {transition: 0.2s;} .popFullmenu .active > .depth03, .popFullmenu .active > .depth04 {display: block;} .popFullmenu .depth01 > ul > li.active > a {color: #0f5aa6;} .popFullmenu .depth01 > ul > li.active > a::before {opacity: 1;} .popFullmenu .depth02 > ul > li.active > a, .popFullmenu .depth02 > ul > li > a:hover, .popFullmenu .depth02 > ul > li > a:focus {font-weight: 700; color: #1976D9;} .popFullmenu .depth02 > ul > li.active > a span::before, .popFullmenu .depth02 > ul > li > a:hover span::before, .popFullmenu .depth02 > ul > li > a:focus span::before { width: 100%;} .popFullmenu .depth02 > ul > li:not(.active) > a:focus, .popFullmenu .depth02 > ul > li:not(.active) > a:hover {color: #1976D9; } .popFullmenu .depth02 > ul > li.dep.active > a {color: #1976D9; } .popFullmenu .depth02 > ul > li.dep.active > a:after {content: '\e945';} .popFullmenu .depth03 > ul > li.dep.active > a, .popFullmenu .depth03 > ul > li > a:focus, .popFullmenu .depth03 > ul > li > a:hover {font-weight: 600; color: #000;} .popFullmenu .depth03 > ul > li.dep.active > a:after {content: '\e91b';} .popFullmenu .depth04 > ul > li > a:focus, .popFullmenu .depth04 > ul > li > a:hover {font-weight: 600; color: #000;} /* 검색버튼 */ .searchOpen { font-size: 1.5rem; color: #0d254e; margin-right: 1rem; } .searchOpen em { display: none; } /* 검색창 */ .box_search { display: none; position: absolute; top: 7.1rem; left: calc(50% - 50vw); width: 100vw; background: #fff; padding: 4.3rem 0; z-index: 100; box-shadow: 10px 20px 20px rgba(0, 0, 0, 0.07); } .box_search .inner { max-width: 37rem; margin: auto; padding: 0 1rem; } .box_search .inner h3 { font-size: 1.6rem; letter-spacing: 2px; color: #000; font-weight: 700; text-align: center;} .box_search .inner #searchForm {display: flex;align-items: center;width: 100%;height: 4rem;background: #fff;border: 5px solid #CBE1F8;border-radius: 2rem;padding: 0 0.5rem 0 1.5rem;overflow: hidden; margin-top: 1rem;} .box_search .inner #searchForm #total_search { width: 100%; height: 100%; border: none; flex: 1; color: #bebebe; } .box_search .inner #searchForm .srch_btn {font-size: 1.3rem;width: 2.75rem;height: 2.75rem;background: #1976D9;color: #fff;border-radius: 50%;} .btnSearchClose {position: absolute;bottom: -1.5rem;left: calc(50% - 1.5rem);width: 3rem;height: 3rem;line-height: 3rem;text-align: center;font-size: 1.5rem;background: #000;border-radius: 50%; color: #fff;transition: all 0.2s;-webkit-transition: all 0.2s; z-index: 999;} .btnSearchClose::before { content: ''; display: block; width: calc(100% + 0.5rem); height: calc(100% + 0.5rem); background: rgba(0,0,0,0.3); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; z-index: -1;} /* footer */ #footer { background: #101C34; padding: 2.3rem 0 2.8rem; position: relative;} #footer .container { max-width: 80rem !important; margin: auto; position: relative;} #footer .ft_wrap { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid #424757; padding-bottom: 1.3rem; margin-bottom: 1.5rem; align-items: center; } #footer h1 { font-size: 0;} #footer h1 a { display: inline-block; height: 100%; font-size: 0; } #footer .logo_wrap { display: flex; align-items: center;} #footer .class_name { display: inline-block; font-size: 0.95rem; font-weight: 600; color: #111; position: relative; padding-left: 0.5rem; margin-left: 0.5rem; float: left; color: #fff;} #footer .class_name::before { content: ''; display: inline-block; width: 1px; height: 1rem; background: #ddd; position: absolute; left: 0; top: calc(50% - 0.5rem);} /* footer - 사이트링크 */ #footer .siteLink .wrap { font-size: 0; position: absolute;display: inline-block;min-width: 12.5rem;right: 0;top: 4.5rem;} #footer .siteLink .wrap + .wrap { margin-left: 0.9rem; } #footer .siteLink .wrap button {position: relative;width: 100%;font-size: 0.8rem;color: #fff;border: 1px solid #fff;padding: 0.75rem 2rem 0.75rem 1rem;text-align: left;} #footer .siteLink .wrap button i {position: absolute;top: calc(50% - 0.5rem);right: 1rem;font-size: 1rem;} #footer .siteLink .wrap .lst { display: none; width: 100%; position: absolute; bottom: 100%; background: rgba(0, 0, 0, 0.9); padding: 1rem; z-index: 10; } #footer .siteLink .wrap .lst li + li { margin-top: 0.5rem; } #footer .siteLink .wrap .lst li a { display: block; font-size: 0.8rem; color: #fff; } /* footer - 사이트링크 : active */ #footer .siteLink .wrap .lst li a:hover, #footer .siteLink .wrap .lst li a:focus { text-decoration: underline; } #footer .adr { font-size: 0.85rem; color: #fff; font-weight: 500;} #footer .adr p span { padding-left: 1rem;} /* footer - copyright, 바로가기 링크 */ #footer .ftLink { display: flex; justify-content: space-between; overflow: hidden; } #footer .copyright { color: #fff; opacity: 0.5; font-size: 0.85rem; font-weight: 300; margin-top: 0.5rem;} #footer .ftLink ul { font-size: 0; } #footer .ftLink ul li { position: relative; display: inline-block; padding: 0 0.7rem; } #footer .ftLink ul li + li::before { position: absolute; top: calc(50% - 1.5px); left: 0; width: 3px; height: 3px; background: #a9aaad; border-radius: 50%; content: ""; } #footer .ftLink ul li a { color: #a9aaad; font-size: 0.8rem; } #footer .ftLink ul li a strong { color: #fff; } /* btn_top */ .btn_top { width: 4rem; height: 4rem; border-radius: 50%; background: #4132d4; line-height: 4rem; text-align: center; color: #fff; font-size: 1.5rem; display: block; margin-top: 0 !important; position: absolute; top: -2rem; left: calc(50% + 42rem); transition: all 0.2s;;} .btn_top:hover, .btn_top:focus { transform: translateY(-5px);} /* subCntBody */ .subCntBody .container { position: relative; max-width: 80rem; width: 100%; margin: auto; margin-top: 4.1rem; } .subCntBody .coming { background-color: #fafcfe; border: 1px solid #c9ccd6; border-radius: 1.5rem; overflow: hidden; font-size: 0; } .subCntBody .coming img { position: relative; left: 50%; transform: translateX(-50%);} /* sns */ .snsBox { position: absolute; right: 0; top: 1.7rem; display: flex; gap: 0.5rem;} .snsBox > button {width: 2rem; height: 2rem; border-radius: 0.75rem; background: #fff; box-shadow: 0 4px 4px #00000014; display: flex; justify-content: center; align-items: center;} .snsBox .btnPrint i, .snsBox .btnShare i{ font-size: 1.15rem; color: #000;} .snsBox .sns_more { position: absolute; left: 0; top: 0; display: none; border-radius: 1rem; background: #3516A5; color: #fff; padding: 0.5rem 0.3rem; z-index: 3; } .snsBox .sns_more .sns_close { position: relative; margin: 0 auto 0.3rem; padding-bottom: 0.3rem;} .snsBox .sns_more .sns_close::before { content: ''; display: block; width: 1rem; height: 1px; background: rgba(255,255,255,0.3); position: absolute; bottom: 0; left: calc(50% - 0.5rem);} .snsBox .sns_more > button[type="button"] { display: block; text-align: center; line-height: 2em; font-size: 0.8rem;} #snb { position: relative; z-index: 1; } /* Location */ .snb_wrap .subLocation {position: absolute;top: -3.6rem;right: 0; z-index: 4; display: flex;align-items: center;} .snb_wrap .subLocation::before { content: ''; display: block; width: 100vw; left: calc(-100vw - 1rem); top: 50%; height: 1px; background: #D9D9D9; position: absolute;} .snb_wrap .subLocation::after { content: ''; display: block; width: 100vw; right: calc(-100vw - 1rem); top: 50%; height: 1px; background: #D9D9D9; position: absolute;} .snb_wrap .subLocation > li { position: relative; display: inline-block; } .snb_wrap .subLocation > li + li { padding-left: 2.9rem; } .snb_wrap .subLocation > li + li::before { position: absolute; top: calc(50% - 0.5rem); left: 1rem; font-family: 'remixicon'; font-size: 0.9rem; color: #999; content: "\ea6e"; } .snb_wrap .subLocation > li > a { display: block; color: #444; font-size: 0.85rem; font-weight: 500;} .snb_wrap .subLocation > li.home > a { font-size: 1rem; color: #005aa9; display: block; width: 1.75rem; height: 1.75rem; border-radius: 50%; text-align: center; line-height: 1.75rem; background: #fff; color: #444; font-size: 1rem; border: 1px solid #ccc;} .snb_wrap .subLocation > li:last-child > a { background: #3516A5; display: block; line-height: 2.2rem; min-width: 10.75rem; color: #fff; border-radius: 2rem; padding: 0 1rem; position: relative; z-index: 3;} .snb_wrap .subLocation > li:last-child > a::before { content: "\e942"; font-family: 'xeicon'; font-size: 0.9rem; color: #fff; position: absolute; top: 0; right: 1rem;} .snb_wrap .subLocation > li:last-child > ul { display: none; background: #3516A5; border-radius: 0 0 1.5rem 1.5rem; padding: 1.5rem 1rem 1rem 1rem; position: absolute; top: 1rem; right: 0; width: calc(100% - 2.9rem); font-size: 0.8rem;} .snb_wrap .subLocation > li:last-child > ul li + li { margin-top: 0.5rem;} .snb_wrap .subLocation > li:last-child > ul a {display: block; padding: 0.25em 0; color: rgba(255,255,255,0.75);} /* Location : actv */ .snb_wrap .subLocation > li:last-child > ul a {transition: 0.3s;} .snb_wrap .subLocation > li:last-child > ul a:hover, .snb_wrap .subLocation > li:last-child > ul a:focus {color: #fff; text-decoration: underline;} #subContent .subHeader h2 { font-size: 1.6rem; color: #000; font-weight: 700; padding-right: 5.5rem; margin-bottom: 2.25rem; } .typeTop #subContent .subHeader h2 { padding-right: 0;} @media (max-width: 1860px) { /* btn_top */ .btn_top { left: unset; right: 1rem; } } @media (max-width: 1820px) { /* 검색창 */ .box_search { top: calc(6.1rem + 1px); } /* footer */ #footer .container { max-width: 100% !important; padding: 0 1rem; } #footer .siteLink .wrap { right: 1rem;} } @media (max-width: 1640px) { /* 로그인 버튼 */ .top_menu > div { right: 1rem; } } @media (max-width: 1640px) { /* header */ .popFullmenu .f_logo_wrap { padding: 0 1rem;} #header .container { padding: 0 1rem;} .subCntBody .container { padding: 0 1rem; } /* 좌측메뉴 */ #subContent { padding: 3rem 0 3rem 3rem ; width: calc(100% - 16rem);} .snb_wrap { margin-left: 0 ;} .snsBox { right: 0;} } @media screen and (max-width: 1440px) { #header .container .logo_wrap { width: 32rem; } #gnb .depth01 > ul > li > a { font-size: 1rem;} /* gnb */ /* gnb : oneFull */ #nav.oneFull .depth02 .titBox {left: 0; padding: 1.5rem 1rem;} #nav.oneFull .depth02 > ul { padding: 1.5rem 0.5rem 0.5rem 14rem; } /* 검색버튼 */ .searchOpen { margin: 0 0.8rem; } /* 검색창 */ .box_search { padding: 3rem 0; } } @media screen and (min-width: 1241px) { /* 좌측메뉴 */ .subCntBody .container::after { display: block; clear: both; content: ""; } .snb_wrap { width: 13.75rem; float: left; } .snb_wrap h2 { position: relative; width: 100%; height: 5.85rem; font-family: 'SBAggro'; display: flex; align-items: center; justify-content: center; padding: 0 1rem; background:#3516A5 url(/images/web/impact/layout/snb_bg.png) no-repeat center / cover; color: #fff; font-size: 1.4rem; border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 4px 4px #00000040;} #snb .snb_wrap .depth01 { position: relative; z-index: 1; background: #fff; border: 1px solid #D9D9D9; box-shadow: 0 0 0.75rem #0000002B; border-top: 0; border-radius: 0 0 1.5rem 1.5rem; padding: 1rem 1.1rem 2.1rem;} #snb .snb_wrap .depth01 > li > a {position: relative;font-size: 0.9rem;color: #717171;display: block;padding: 0.8rem 0.8rem 0.8rem 0;font-weight: 500; border-bottom: 1px solid #D9D9D9;} #snb .snb_wrap .depth01 > li.dep > a::before { position: absolute; top: calc(50% - 0.45rem); right: 0; font-family: "xeicon"; font-size: 0.85rem; content: "\e93e"; } #snb .snb_wrap .depth01 > li > a[target="_blank"] { padding: 0.8rem 0.8rem 0.8rem 0; } #snb .snb_wrap .depth01 > li > a[target="_blank"]::after { position: absolute; top: calc(50% - 0.5rem); right: 0; content: "\e980"; font-family: 'xeicon'; font-size: 0.9rem; color: #717171;font-weight: bold;} #snb .snb_wrap .depth02 { opacity: 0; display: none; } #snb .snb_wrap .depth02 > li + li { margin-top: 0.5rem; } #snb .snb_wrap .depth02 > li > a {position: relative;display: block;font-size: 0.8rem;color: #717171; padding-left: 0.5rem;} #snb .snb_wrap .depth02 > li > a::before { content: ''; display: block; width: 3px; height: 3px; border-radius: 50%; background: #717171; position: absolute; left: 0; top: calc(50% - 1.5px); } #snb .snb_wrap .depth02 > li > a[target="_blank"]::after {position: absolute;top: calc(50% - 0.5rem);right: 0;content: "\e980";font-family: 'xeicon';font-size: 0.9rem;color: #717171;} #snb .snb_wrap .depth03 { opacity: 0; display: none; background: #f8f9fb; padding: 0.75rem 1rem; border-top: 1px solid #d0d7e5; border-bottom: 1px solid #d0d7e5;} #snb .snb_wrap .depth03 > li + li { margin-top: 0.5rem; } #snb .snb_wrap .depth03 > li > a { position: relative; display: block; font-size: 0.75rem; color: #444; padding-left: 0.6rem; transition: all 0.15s;} #snb .snb_wrap .depth03 > li > a::before { position: absolute; top: calc(50% - 0.125rem); left: 0; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: #a9b0c0; content: ""; transition: all 0.15s;} #snb .snb_wrap .depth03 > li > a[target="_blank"]::after { position: absolute; top: calc(50% - 0.4rem); right: 0; width: 0.65rem; height: 0.65rem; content: "\e980"; font-family: 'xeicon'; font-size: 0.75rem; color: #555;font-weight: bold;} /* 좌측메뉴 - active */ #snb .snb_wrap .depth01 > li > a:hover, #snb .snb_wrap .depth01 > li > a:focus, #snb .snb_wrap .depth01 > li.active > a { font-weight: 600; border-color: #3516A5; color: #3516A5;} #snb .snb_wrap .depth01 > li.dep.active > a::before { color: #3516A5; content: "\e944"; font-weight: 400; } #snb .snb_wrap .depth01 > li > a[target="_blank"]:hover::after, #snb .snb_wrap .depth01 > li > a[target="_blank"]:hover::after { color: #3516A5;} /* #snb .snb_wrap .depth02 > li.active { border: none; } */ #snb .snb_wrap .depth02 > li > a:hover, #snb .snb_wrap .depth02 > li > a:focus, #snb .snb_wrap .depth02 > li.active > a, #snb .snb_wrap .depth02 > li.dep.active > a { color: #444; font-weight: 600; } #snb .snb_wrap .depth02 > li > a:hover span, #snb .snb_wrap .depth02 > li > a:focus span { text-decoration: underline; } #snb .snb_wrap .depth02 > li > a:hover::before, #snb .snb_wrap .depth02 > li > a:focus::before {background: #3516A5;} #snb .snb_wrap .depth01 > li.active .depth02 {opacity: 1;display: block;height: auto;padding: 0.7rem 1rem;background: #FAF6FF;border-radius: 0 0 0.3rem 0.3rem;} #snb .snb_wrap .depth02 > li.active .depth03 { opacity: 1; display: block; height: auto; } #snb .snb_wrap .depth03 > li > a:hover, #snb .snb_wrap .depth03 > li > a:focus { color: #003876; font-weight: 600; } #snb .snb_wrap .depth03 > li > a:hover::before, #snb .snb_wrap .depth03 > li > a:focus::before { background: #005aa9;} #subContent { width: calc(100% - 17rem); float: right; padding: 1.9rem 0 4rem;} } @media screen and (max-width: 1240px) { #wrap:has(#subContainer)::before {width: 38.85rem; max-width: calc(100vw + 2px); height: 17.85rem; right: 0;} /* 상단(로고 및 메뉴) */ #header {width: 100%; height: 5.6rem; } #header:before {display: none;} #header .container {height: 3.5rem;} #header .topUtil { margin-left: auto; margin-right: 0; } /* 웹네비게이션 */ /* gnb common */ #nav {display: none;} /* 검색창 */ .box_search {top: 5.6rem; padding: 1.5rem 0 3rem;} /* btn_top */ .btn_top { width: 3.2rem; height: 3.2rem; line-height: 3.2rem; top: -1.6rem; right: unset; left: calc(50% - 1.6rem); } /* 전체메뉴 */ .fullmenuClose {position: absolute;top: 0;right: 0;width: 3rem;height: 3.3rem;line-height: 3.3rem;text-align: center;font-size: 1.2rem;color: #fff;left: auto;background: transparent;} .fullmenuClose::before { display: none} .popFullmenu { height: 100vh; background-image: none;} .popFullmenu::before {content: url(/images/web/impact/layout/bg2.png); position: absolute; bottom: 0; right: 0;z-index: 2;} .popFullmenu .inner { height: 100%; background-image: none;} .popFullmenu h2 {padding: 0 1rem; height: 5rem; line-height: 5rem; background: #383f59; border-bottom: none;} .popFullmenu .f_logo_wrap { height: 3.2rem; background: #101C34; padding: 0 1rem;} .popFullmenu .f_logo_wrap .class_name {color: #fff;font-size: 0.9rem;padding-left: 0.5rem;margin-left: 0.5rem;padding-right: 1rem;} #header .popFullmenu .f_logo_wrap h1 .logo{ display: none;} #header .popFullmenu .f_logo_wrap h1 .w_logo{ display: block;} #header .popFullmenu .f_logo_wrap h1 .w_logo .mbl {display: none;} .popFullmenu .popUntil li {display: inline-block;} .popFullmenu .popUntil li a {display: inline-block; padding: 0.25rem 0.75rem; line-height: 1.4; font-size: 0.85rem;} .popFullmenu .popUntil .user {display: flex; align-items: center;} .popFullmenu .popUntil .user > li.name {flex: 1; padding: 0 0.75rem; font-weight: 600; color: #00508f;} .popFullmenu .popUntil .user > li + li > a {border-left: 1px solid #fff;} .popFullmenu .popUntil .user > li > a {padding: 0.75rem; color: #fff; background: #00508f;} .popFullmenu .popUntil .util > li > a {position: relative;} .popFullmenu .popUntil .util > li + li > a:before{position: absolute; top: calc(50% - 2px); left: 0; width: 4px; height: 4px; border-radius: 50%; background: #aaa; content: "";} .popFullmenu .fullmenu_group {position: relative; padding: 0; width: 100%; height: 100%;} .popFullmenu .depth01 {max-height: 100%;} .popFullmenu .depth01:before {position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: #3516A5; content: "";} .popFullmenu .depth01 a {display: block; color: #000;} .popFullmenu .depth01 > ul {position: relative; width: 100%; display: block;} .popFullmenu .depth01 > ul:before { display: none;} .popFullmenu .depth01 > ul > li {display: block; padding-bottom: 0; height: auto;} .popFullmenu .depth01 > ul > li + li {padding-top: 0; border-top: none; position: static;} .popFullmenu .depth01 > ul > li + li::before { display: none;} .popFullmenu .depth01 > ul > li > a {position: relative; display: flex; align-items: center; padding: 0 1rem; width: 40%; min-height: 3.3rem; font-size: 0.85rem; font-weight: 400; background: #3516A5; color: #fff; text-align: left;} .popFullmenu .depth01 > ul > li > a:before {position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background: rgba(255,255,255,0.2);content: "";} .popFullmenu .depth02 {display: none; position: absolute; top: 0; left: 40%; padding: 0 1rem; width: 60%;} .popFullmenu .depth02 > ul {display: block;} .popFullmenu .depth02 > ul > li {padding: 0; width: 100%; border-right: none;} .popFullmenu .depth02 > ul > li + li { margin-top: 0;} .popFullmenu .depth02 > ul > li > a {padding:0.95rem 0; font-size: 0.85rem; border: none; border-bottom: 1px solid #ddd; border-radius: 0;} .popFullmenu .depth02 > ul > li > a span::before { display: none;} .popFullmenu .depth02 > ul > li > a:after { top: 0.75rem;} .popFullmenu .depth03 { margin-top: 0;} .popFullmenu .depth03 > ul > li > a:before {top: 0.7rem; width: 4px; height: 4px; border-radius: 0;} .popFullmenu .depth03 > ul > li > a:after {top: 0.35rem; right: 0.5rem;} .popFullmenu .depth04 {background: #f6f6f6;} .popFullmenu .depth04 > ul > li > a:before {top: 0.6rem;} .popFullmenu .depth04 > ul > li > a[target="_blank"]:after {right: 0;} .popFullmenu li.active > .depth02, .popFullmenu li.active > .depth03, .popFullmenu li.active > .depth04 {display: block;} .popFullmenu .depth01 > ul > li.active > a {font-weight: 700; background: #fff; color: #1976D9;} .popFullmenu .depth01 > ul > li.active > a:before {display: none;} .popFullmenu .depth02 > ul > li:not(.active) > a:focus, .popFullmenu .depth02 > ul > li:not(.active) > a:hover {color: #1976D9; border-color: #ddd;} .popFullmenu .depth02 > ul > li.dep.active > a {font-weight: 600; color: #1976D9; background: #fff; border: none; box-shadow: none;} .popFullmenu .depth03 > ul > li.active > a {border: none;} .popFullmenu .depth03 > ul > li.dep.active > a, .popFullmenu .depth03 > ul > li > a:focus, .popFullmenu .depth03 > ul > li > a:hover {font-weight: 600; color: #1976D9;} .popFullmenu .depth03 > ul > li.dep.active > a:before, .popFullmenu .depth03 > ul > li > a:focus:before, .popFullmenu .depth03 > ul > li > a:hover:before {background: #1976D9;} .popFullmenu .depth03 > ul > li.dep.active > a span, .popFullmenu .depth03 > ul > li > a:focus span, .popFullmenu .depth03 > ul > li > a:hover span { text-decoration: underline;} /* footer - 주소 */ #footer .ft_wrap { align-items: flex-start; flex-direction: column; margin-bottom: 0.75rem; padding-bottom: 0.75rem;} #footer .ftInfo { margin-bottom: 1rem; } #footer .ftLink { flex-wrap: wrap; margin-left: -0.7rem; margin-top: 1.25rem;} #footer .copyright { width: 100%; margin-bottom: 1rem; } /* footer - 사이트링크 */ #footer .siteLink .wrap {top: -0.25rem; min-width: 9rem; } #footer .siteLink .wrap button { padding: 0.55rem 2rem 0.55rem 1rem;} #subContainer {margin-top: 0.25rem;} /* 서브 공통 메뉴 */ .subCntBody .container { margin-top: 0; } #snb .snb_wrap { position: relative; width: 100%; height: auto; } #snb .snb_wrap h2 { position: relative; display: block; padding: 0.7rem 3.4rem 0.7rem 1rem; text-align: left; font-size: 0.85rem; background: #3516A5; border-radius: 0.5rem; color: #fff; font-weight: 700; z-index: 2;} #snb .snb_wrap h2::after { position: absolute; top: calc(50% - 0.6rem); right: 1rem; width: 1.25rem; height: 1.25rem; line-height: 1.2rem; border: 1px solid #fff; color: #fff; border-radius: 50%; text-align: center; font-family: "xeicon"; font-size: 0.85rem; content: "\e942"; } #snb .snb_wrap .inner, #snb .snb_wrap >h2 { display: none;} #snb .snb_wrap .depth01 { display: none; position: absolute; left: 0; width: 100%; margin: 0; border-radius: 0; padding: 0.5rem 0.75rem; background: #fff; z-index: 1; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); padding-top: 1rem; margin-top: -1rem; border-radius: 0 0 0.5rem 0.5rem;} #snb .snb_wrap .depth01 > li { border-bottom: 1px solid #ddd; } #snb .snb_wrap .depth01 > li:last-child { border-bottom: none; } #snb .snb_wrap .depth01 > li > a { position: relative; width: 100%; display: block; font-size: 0.75rem; color: #333; font-weight: 400; padding: 0.5rem 0 0.5rem 0.5rem; } #snb .snb_wrap .depth01 > li.dep > a { padding: 0.5rem 2rem 0.5rem 0.5rem; } #snb .snb_wrap .depth01 > li.dep > a::before { position: absolute; top: calc(50% - 0.6rem); right: 0.3rem; width: 1.25rem; height: 1.25rem; line-height: 1.2rem; border: 1px solid #aaa; color: #aaa; border-radius: 50%; text-align: center; font-family: "xeicon"; font-size: 0.85rem; content: "\e942"; } #snb .snb_wrap .depth02 { opacity: 0; display: none; border-top: 1px solid #3516A5; padding: 0.3rem 0.5rem 0.7rem 0.5rem; } #snb .snb_wrap .depth02 > li { position: relative; padding: 0 0.6rem; } #snb .snb_wrap .depth02 > li::after { position: absolute; top: 0.65rem; left: 0; width: 0.25rem; height: 0.25rem; background: #cdd3d8; border-radius: 50%; content: ""; } #snb .snb_wrap .depth02 > li > a { position: relative; display: block; font-size: 0.7rem; color: #555; padding: 0.25rem 0; } #snb .snb_wrap .depth02 > li.dep > a { padding: 0.25rem 1rem 0.25rem 0; } #snb .snb_wrap .depth02 > li.dep > a::before { position: absolute; top: calc(50% - 0.4rem); right: 0; color: #bbb; border-radius: 50%; text-align: center; font-family: "xeicon"; font-size: 0.85rem; content: "\e942"; } #snb .snb_wrap .depth03 { opacity: 0; display: none; background: #f5f5f5; border-radius: 0.4rem; padding: 0.8rem; } #snb .snb_wrap .depth03 > li + li { margin-top: 0.5rem; } #snb .snb_wrap .depth03 > li > a { display: block; position: relative; font-size: 0.65rem; padding-left: 0.55rem;} #snb .snb_wrap .depth03 > li > a::after { position: absolute; top: calc(50% - 0.05rem); left: 0; width: 5px; height: 1px; background: #777; content: ""; } /* 서브 공통 메뉴 - active */ #snb .snb_wrap.on h2::after { content: "\e945"; background: #fff; color: #3516A5; } #snb .snb_wrap .depth01 > li > a:hover, #snb .snb_wrap .depth01 > li > a:focus, #snb .snb_wrap .depth01 > li.active > a { color: #3516A5; font-weight: 700; } #snb .snb_wrap .depth01 > li.dep.active > a::before { background: #3516A5; border-color: #3516A5; color: #fff; content: "\e945"; font-weight: 400; } #snb .snb_wrap .depth01 > li.active { border-color: #3516A5; } #snb .snb_wrap .depth02 > li.active { border: none; } #snb .snb_wrap .depth02 > li.dep.active::after { background: #3516A5;} #snb .snb_wrap .depth02 > li.dep.active > a::before { color: #3516A5; content: "\e945";} #snb .snb_wrap .depth01 > li.active .depth02 { opacity: 1; display: block; height: auto; } #snb .snb_wrap .depth02 > li.active .depth03 { opacity: 1; display: block; height: auto; margin-bottom: 0.5rem; } #snb .snb_wrap .depth03 > li > a:hover, #snb .snb_wrap .depth03 > li > a:focus { color: #444; font-weight: 600; } /* Location */ .snb_wrap .subLocation { top: 0; position: relative;} .snb_wrap .subLocation > li {font-size: 0.85rem;} .snb_wrap .subLocation > li + li {padding-left: 1.73em;} .snb_wrap .subLocation > li + li::before {content: ""; width: 1.73em; height: 100%; background: url('/images/web/impact/sub/subLocation_arrow.png') center no-repeat; font-size: inherit; left: 0; top: 0;} .snb_wrap .subLocation > li > a {font-size: inherit;} /* Location - home */ .snb_wrap .subLocation > li.home > a { width: auto; height: auto; border-radius: 0; line-height: unset; font-size: 0.9rem; border: 0;} /* Location - last-child */ .snb_wrap .subLocation > li:last-child { padding-right: 0.7rem;} .snb_wrap .subLocation > li:last-child > a {background: transparent;line-height: initial;min-width: auto;color: #555;border-radius: 0;padding: 0;} .snb_wrap .subLocation > li:last-child > a::before { display: none;} .snb_wrap .subLocation > li:last-child > ul {display: none !important;} .snb_wrap .subLocation::after {flex: 1; height: 1px; position: static;} .snsBox { position: absolute; right: 0; top: 2rem; } .snsBox .btnPrint { display: none; } .snsBox .btnShare::before { display: none;} .snsBox .sns_more {left: unset; top: 2.5rem;} .snsBox .sns_more::before { display: none; } .snsBox .sns_more > button[type="button"] span { display: none; } #subContent { width: 100%; padding: 0.75rem 0 3rem; } #subContent .subHeader h2 { font-size: 1.3rem; padding-top: 0.375rem; padding-bottom: 0; padding-right: 1.5rem !important; margin-bottom: 1.2rem; } } @media (max-width: 768px) { /* header */ #header {height: 3.5rem;} #header h1 { height: 1.8rem; } #header h1 .logo {width: 31px; height: 35px; overflow: hidden; } #header .container {height: 100%;} #header .container .logo_wrap .class_name {padding-left: 1.125em; color: #000; margin-left: 0;} #header .container .logo_wrap .class_name::before {content: ""; height: 1em; background-color: #dedede; left: 0.5625em; top: 0.2em;} /* 로그인 버튼 */ #header .top_menu > ul {display: none;} .top_menu > div {right: 6.5rem; top: 1.35rem; transform: none;z-index:1;} /* 전체메뉴 */ #header .popFullmenu .f_logo_wrap h1 .w_logo .tbl {display: none;} #header .popFullmenu .f_logo_wrap h1 .w_logo .mbl {display: inline-block;} /* 검색창 */ .box_search {top: 3.5rem;} .box_search .inner h3 { display: none;} .box_search .inner #searchForm { margin-top: 0;height: 3.4rem;} .box_search .inner #searchForm .srch_btn {font-size: 1.1rem;width: 2.25rem;height: 2.25rem; } #subContent .subHeader h2 {padding-bottom: 0;} } @media (max-width: 650px) { /* header */ #header .container .logo_wrap {width: calc(100% - 9rem);} /* footer - sns */ #footer .ftSns { position: relative; top: auto; right: auto; text-align: center; width: 100%; order: 3; margin-bottom: 1rem; } } @media (max-width: 480px) { /* header */ #header h1 { height: 1.8rem; } #header .topUtil a:not(:first-of-type) { margin-left: 18px; } #header .topUtil a.newTxt::after { width: 17px; height: 17px; line-height: 17px; font-size: 10px; } /* footer */ #footer .siteLink .wrap { display: none;} #footer .ft_wrap { align-content: center;} #footer .logo_wrap { width: 100%;justify-content: center;} #footer .ftLink { margin-left: 0; width: 100%; margin-top: 1rem;} #footer .ftLink ul { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%;} #footer .ftLink ul li { padding: 0; width: 49.5%;} #footer .ftLink ul li + li::before { display: none;} #footer .ftLink ul li:nth-child(1) { width: 100%; margin-bottom: 1%;} #footer .ftLink ul li a { padding: 0.4rem 0.7rem; text-align: center; border: 1px solid #343E52; border-radius: 0.2rem; display: block;} #footer .adr { text-align: center;} #footer .adr p span { display: block; padding-left: 0;} } @media (max-width: 320px){ /* header */ #header .container .logo_wrap {width: calc(100% - 8rem);} #header .container .logo_wrap .class_name {font-size: 1rem;} .top_menu > div {right: 5rem;} /* 검색버튼 */ .searchOpen {font-size: 1.25rem; margin: 0 0.25em;} /* 전체메뉴 */ .fullmenu {font-size: 1.25rem;} #footer .ftLink ul li { width: 100%; margin-bottom: 1%;} #footer .logo_wrap { flex-direction: column;} #footer .class_name { padding-left: 0; margin-left: 0; margin-top: 0.4rem; padding-top: 0.4rem;} #footer .class_name::before { width: 1rem; height: 1px; left: calc(50% - 0.5rem); top: 0;} }