/*---------------------------------------------------------------------------
[LAYOUT GUIDE]
#wrapper > #container > (#regin) > #area > #section > #box > #sector
GNB (Global Navigation Bar) : �ъ씠�� 理쒖긽�� �꾩껜 怨듯넻�ㅻ퉬寃뚯씠��.硫붿씤硫붾돱, ��遺꾨쪟 硫붾돱, �꾩껜 �ъ씠�몄뿉�� �ъ슜�섎뒗 怨듯넻硫붾돱諛�
LNB (Local Navigation Bar) : �꾩옱 �쒕퉬�� �곸뿭(Local)留� �대떦�섎뒗 �ㅻ퉬寃뚯씠��.�쒕툕硫붾돱, 以묐텇瑜� 硫붾돱, 媛� �쒕툕遺꾨쪟 蹂� �ъ슜�섎뒗 硫붾돱諛�
SNB (Side Navigation Bar) : 硫붿씤硫붾돱, �쒕툕硫붾돱瑜� �쒖쇅�� �섎㉧吏� �ъ씠�쒕찓��, 湲고�硫붾돱諛�
FNB (Foot Navigation Bar) : �섎떒硫붾돱, �섎떒濡쒓퀬, 二쇱냼, 移댄뵾�쇱씠�� �곸뿭
font-family: 'NanumBarunGothic'; font-weight: 400; 200 300 400 700
font-family: 'Nanum Barun Gothic'; font-weight: 400; 200 300 400 700
font-family: 'Noto Sans KR'; font-weight: 400; 100 300 400 500 700 900
font-family: 'Raleway'; font-weight: 400; 100 200 300 400 500 600 700 800 900
font-family: 'Roboto'; font-weight: 400; 100 300 400 500 700 900
focus #0096a0
logo_color #004e53
logo_red #ed1c24
logo_black #231f20
logo_gray #58585b (88, 88, 91)
logo_silver #a7a9ab (167, 169, 171)
logo_gold #ac8a1b
https://www.colorhexa.com/00caf5
[Shades and Tints of #004e53]
#000405 #001718 #00292c #003c3f #004e53 #006067 #00737a #00858e #0098a1
#00aab5 #00bdc9 #00cfdc #00e1f0 #05f0ff #18f1ff #2cf2ff #3ff3ff #53f5ff
#67f6ff #7af7ff #8ef8ff #a1f9ff #b5fbff #c9fcff #dcfdff #f0feff
[Tones of #004e53]
#262c2d #232f30 #203233 #1d3536 #1a3839 #163a3d #133d40 #104043 #0d4346
#0a4649 #06484d #034b50 #004e53
[Shades and Tints of #262c2d] (38, 44, 45)
#020202 #0b0d0d #141718 #1d2222 #262c2d #2f3638 #384142 #414b4d #4a5658
#536062 #5c6a6d #657577 #6e7f82 #77898c #829395 #8c9c9e #97a5a7 #a2aeb0
#acb7b9 #b7c1c2 #c2cacb #ccd3d4 #d7dcdd #e2e5e6 #ecefef #f7f8f8
[Shades and Tints of #ed1c24]
#090101 #1b0203 #2e0405 #400507 #520609 #64080b #76090e #880b10 #9b0c12
#ad0e14 #bf0f16 #d11118 #e3121a #ed1c24 #ee2e36 #f04047 #f15359 #f3656a
#f4777c #f6898d #f79b9f #f9adb0 #fac0c2 #fbd2d3 #fde4e5 #fef6f6
---------------------------------------------------------------------------*/
/*--------------------------------------------------
BASIC
--------------------------------------------------*/
.sm-blue {
background: transparent;
height: 70px;
}
.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active {
color: #414b4d;
font-family: 'Noto Sans KR';
font-size: 1.10rem;
font-weight: 500;
line-height: 23px;
text-decoration: none;
letter-spacing: -0.5px;
}
.sm-blue a.current {
/*
background-color: #006892;
color: #fff;
*/
}
.sm-blue a.disabled {
color: #a1d1e8;
}
.sm-blue a .sub-arrow {
position: absolute;
top: 50%;
margin-top: -17px;
left: auto;
right: 4px;
width: 34px;
height: 34px;
overflow: hidden;
font: bold 14px/30px monospace !important;
text-align: center;
text-shadow: none;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 0px;
}
.sm-blue a .sub-arrow::before {
content: '+';
}
.sm-blue a.highlighted .sub-arrow::before {
content: '-';
}
.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
border-radius: 0;
}
.sm-blue > li:last-child > a, .sm-blue > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul {
border-radius: 0;
}
.sm-blue > li:last-child > a.highlighted, .sm-blue > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted {
border-radius: 0;
}
.sm-blue ul {
background-color: #fff;
}
.sm-blue ul ul {
background-color: rgba(102, 102, 102, 0.1);
/*
background-color: rgba(102, 102, 102, 0.1);
*
}
.sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active {
/*
background: transparent;
font-family: 'Raleway';
color: #2b82ac;
font-size: 15px;
text-shadow: none;
border-left: 8px solid transparent;
line-height: 46px;
*/
}
.sm-blue ul a.current {
/*
background-color: #006892;
background-image: linear-gradient(to bottom, #006188, #006f9c);
color: #fff;
*/
}
.sm-blue ul a.disabled {
/*
color: #b3b3b3;
*/
}
.sm-blue ul ul a,
.sm-blue ul ul a:hover,
.sm-blue ul ul a:focus,
.sm-blue ul ul a:active {
border-left: 16px solid transparent;
line-height: 46px;
}
.sm-blue ul ul ul a,
.sm-blue ul ul ul a:hover,
.sm-blue ul ul ul a:focus,
.sm-blue ul ul ul a:active {
border-left: 24px solid transparent;
}
.sm-blue ul ul ul ul a,
.sm-blue ul ul ul ul a:hover,
.sm-blue ul ul ul ul a:focus,
.sm-blue ul ul ul ul a:active {
border-left: 32px solid transparent;
}
.sm-blue ul ul ul ul ul a,
.sm-blue ul ul ul ul ul a:hover,
.sm-blue ul ul ul ul ul a:focus,
.sm-blue ul ul ul ul ul a:active {
border-left: 40px solid transparent;
}
.sm-blue ul li {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.sm-blue ul li:first-child {
border-top: 0;
}
@media (min-width: 861px) {
/* Switch to desktop layout
-----------------------------------------------
These transform the menu tree from
collapsible to desktop (navbar + dropdowns)
-----------------------------------------------*/
/* start... (it's not recommended editing these rules) */
.sm-blue ul {
position: absolute;
width: 12em;
}
.sm-blue > li > ul {
border-top: 1px solid #b7c1c2;
/*
margin-top: 2px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
padding-top: 4px;
*/
}
.sm-blue > li > ul > li {
margin-left: -0px;
}
.sm-blue li {
float: left;
}
.sm-blue.sm-rtl li {
float: right;
}
.sm-blue ul li, .sm-blue.sm-rtl ul li, .sm-blue.sm-vertical li {
float: none;
}
.sm-blue a {
white-space: nowrap;
}
.sm-blue ul a, .sm-blue.sm-vertical a {
white-space: normal;
}
.sm-blue .sm-nowrap > li > a, .sm-blue .sm-nowrap > li > :not(ul) a {
white-space: nowrap;
}
/* ...end */
.sm-blue {
}
.sm-blue > li > a{
}
.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
background: transparent;
line-height: 70px;
color: #2f3638;
}
.sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
color: #0096a0;
font-weight: 400;
background-image: linear-gradient(to bottom, #f7f8f8, #ccd3d4);
/*
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
color: #3092c0;
*/
}
.sm-blue a.current {
color: #0096a0;
}
.sm-blue a.disabled {
/*
color: #a1d1e8;
*/
}
.sm-blue a .sub-arrow {
top: auto;
margin-top: 0;
bottom: 2px;
left: 50%;
margin-left: -5px;
right: auto;
width: 0;
height: 0;
border-width: 5px;
border-style: solid dashed dashed dashed;
border-color: #acb7b9 transparent transparent transparent;
background: transparent;
border-radius: 0;
}
.sm-blue a .sub-arrow::before {
display: none;
}
.sm-blue > li > a:hover .sub-arrow
, .sm-blue > li > a:focus .sub-arrow
, .sm-blue > li > a:active .sub-arrow
, .sm-blue > li > a.highlighted .sub-arrow {
/*
, .sm-blue > li > a.current .sub-arrow {
*/
border-color: #0096a0 transparent transparent transparent;
}
.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
border-radius: 0;
}
.sm-blue > li:last-child > a, .sm-blue > li:last-child > :not(ul) a {
border-radius: 0 !important;
}
.sm-blue > li {
text-align: center;
}
.sm-blue > li:first-child {
border-left: 0;
}
.sm-blue ul {
width: 100%;
background-color: #fff;
border-radius: 0 !important;
/*box-shadow: h-offset v-offset blur spread color type;*/
/*
box-shadow: 0px 0px 3px 0px #0096a0, 0px 0px 0px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 3px 0px #0096a0, 0px 0px 0px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 3px 0px #0096a0, 0px 0px 0px rgba(0, 0, 0, 0.5) inset;
padding-left: 2px;
padding-right: 2px;
*/
}
.sm-blue ul ul {
width: 100%;
border-radius: 0 !important;
background-color: #fff;
}
.sm-blue ul li {
height: 48px;
display: table;
width: 100%;
}
.sm-blue ul li a, .sm-blue ul li a:hover, .sm-blue ul li a:focus, .sm-blue ul li a:active, .sm-blue ul li a.highlighted {
border: 0 !important;
padding: 0 30px 0 20px;
font-family: 'Noto Sans KR';
color: #2f3638;
font-size: 0.92rem;
font-weight: 400;
letter-spacing: -0.5px;
border-radius: 0 !important;
line-height: 1.4;
background-color: #ecefef;
width: 100%;
display: table-cell;text-align: left;vertical-align: middle;
}
.sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
width: 100%;
color: #0096a0;
font-weight: 400;
background-image: linear-gradient(to bottom, #f7f8f8, #ccd3d4);
/*
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
text-shadow: -1px 1px 12px #00eef5, 1px -1px 12px #00eef5;
*/
}
.sm-blue ul a.current {
/*
color: #3092c0;
font-weight: 700;
*/
}
.sm-blue ul a.disabled {
/*
background-color: #fff;
color: #b3b3b3;
*/
}
.sm-blue ul a .sub-arrow {
top: 50%;
margin-top: -5px;
bottom: auto;
left: auto;
margin-left: 0;
right: 8px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent #a2aeb0;
}
.sm-blue ul a:hover .sub-arrow
, .sm-blue ul a:focus .sub-arrow
, .sm-blue ul a:active .sub-arrow
, .sm-blue ul a.highlighted .sub-arrow {
border-color: transparent transparent transparent #0096a0;
}
.sm-blue ul li {
border-left: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.5);
border-top: 1px solid rgba(255, 255, 255, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-moz- background-clip: padding-box;
background-clip: padding-box;
/*
padding: 2px 3px 2px 3px;
*/
}
.sm-blue .scroll-up,
.sm-blue .scroll-down {
position: absolute;
display: none;
visibility: hidden;
overflow: hidden;
background-color: #fff;
height: 20px;
}
.sm-blue .scroll-up-arrow,
.sm-blue .scroll-down-arrow {
position: absolute;
top: -2px;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
overflow: hidden;
border-width: 8px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent #2b82ac transparent;
}
.sm-blue .scroll-down-arrow {
top: 6px;
border-style: solid dashed dashed dashed;
border-color: #2b82ac transparent transparent transparent;
}
.sm-blue.sm-rtl.sm-vertical a .sub-arrow {
right: auto;
left: 10px;
border-style: dashed solid dashed dashed;
border-color: transparent #a1d1e8 transparent transparent;
}
.sm-blue.sm-rtl > li:first-child > a, .sm-blue.sm-rtl > li:first-child > :not(ul) a {
border-radius: 0;
}
.sm-blue.sm-rtl > li:last-child > a, .sm-blue.sm-rtl > li:last-child > :not(ul) a {
border-radius: 0 !important;
}
.sm-blue.sm-rtl > li:first-child {
border-left: 1px solid #2b82ac;
}
.sm-blue.sm-rtl > li:last-child {
border-left: 0;
}
.sm-blue.sm-rtl ul a .sub-arrow {
right: auto;
left: 10px;
border-style: dashed solid dashed dashed;
border-color: transparent #a1d1e8 transparent transparent;
}
.sm-blue.sm-vertical {
}
.sm-blue.sm-vertical a {
padding: 9px 23px;
}
.sm-blue.sm-vertical a .sub-arrow {
top: 50%;
margin-top: -5px;
bottom: auto;
left: auto;
margin-left: 0;
right: 10px;
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent #a1d1e8;
}
.sm-blue.sm-vertical > li:first-child > a, .sm-blue.sm-vertical > li:first-child > :not(ul) a {
border-radius: 0;
}
.sm-blue.sm-vertical > li:last-child > a, .sm-blue.sm-vertical > li:last-child > :not(ul) a {
border-radius: 0 !important;
}
.sm-blue.sm-vertical > li {
border-left: 0 !important;
}
.sm-blue.sm-vertical ul {
border-radius: 0 !important;
}
.sm-blue.sm-vertical ul a {
padding: 9px 23px;
}
}
/*# sourceMappingURL=sm-blue.css.map */
/*--------------------------------------------------
Reference
--------------------------------------------------
//box-sizing
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-box : �뚮몢由щ� 湲곗��쇰줈 �ш린瑜� �뺥빀�덈떎.
content-box : 肄섑뀗�� �곸뿭�� 湲곗��쇰줈 �ш린瑜� �뺥빀�덈떎.
initial : 湲곕낯媛믪쑝濡� �ㅼ젙�⑸땲��.
inherit : 遺�紐� �붿냼�� �띿꽦媛믪쓣 �곸냽諛쏆뒿�덈떎.
//border-collapse: separate;
separate : ��(table)�� �뚮몢由ъ� ��(td)�� �뚮몢由� �ъ씠�� 媛꾧꺽�� �〓땲��.
collapse : ��(table)�� �뚮몢由ъ� ��(td)�� �뚮몢由� �ъ씠�� 媛꾧꺽�� �놁빋�덈떎. 寃뱀튂�� 遺�遺꾩� �� 以꾨줈 �섑��낅땲��.
initial : 湲곕낯媛믪쑝濡� �ㅼ젙�⑸땲��.
inherit : 遺�紐� �붿냼�� �띿꽦媛믪쓣 �곸냽諛쏆뒿�덈떎.
//word-wrap: [鍮꾩븘�쒖븘�몄뼱]諛뺤뒪�� 媛�濡� �곸뿭�� �섏튇 �⑥뼱 �댁뿉�� �꾩쓽�� 遺꾨━ �щ�瑜� 寃곗젙�쒕떎.
break-word : 媛�濡쒖궗�댁쫰�� �섎━癒쇳듃�� 留욎떠�� 媛뺤젣 以꾨컮轅� �댁���.
normal : 湲곕낯媛믪쑝濡� 以꾨컮轅덉쓣 �덊븿.
//word-break: [�꾩떆�꾩뼵��]�⑥뼱�� 遺꾨━瑜� �대뼸寃� �� 寃껋씤吏� 寃곗젙�쒕떎.
break-all : 湲��먮떒�� 以꾨컮轅�(�뱀닔臾몄옄瑜� �쒖쇅�섍퀬 媛뺤젣濡� 以꾨컮轅�)
break-word : �뱀닔臾몄옄瑜� �ы븿�섍퀬 媛뺤젣 以꾨컮轅�
keep-all : �⑥뼱�⑥쐞 以꾨컮轅�(�곷Ц)
nowrap : 以꾨컮轅� �섏� �딆쓬
//white-Space: 怨듬갚臾몄옄瑜� �대뼸寃� �� 寃껋씤吏� �ㅼ젙.(�꾩뼱�곌린�� 以꾨컮轅�, ��쑝濡� �명븳 怨듬갚 遺�遺� �깅벑)
normal : 湲곕낯媛�. �곗냽 怨듬갚怨� 以꾨컮轅� �깆쓣 �듯빀�댁꽌 �쒗쁽
pre : normal怨� 諛섎�. �먮Ц 洹몃�濡� 異쒕젰
pre-wrap : 留덊겕�낆뿉�� 以꾨컮轅� �� 寃껋씠 �곸슜 �섎㈃�� width瑜� �섏뼱媛��� �띿뒪�몃룄 �먮룞�쇰줈 以꾨컮轅덉씠 �쒕떎(pre-line)
nowrap : �ㅽ럹�댁뒪瑜� 留� �뚮윭�� �ㅼ뼱媛��� �곗냽怨듬갚�� �듯빀�섏�留�(normal�� �④낵) 以꾨컮轅덉� �몄젙��(pre�� �④낵)
//text-overflow: 湲� 臾몄옄�댁쓣 �섎씪二쇰뒗 �뺥깭瑜� 吏���
clip : �섎━癒쇳듃�� �뚮몢由ъ뿉 留욎떠�� 湲��먮� �먮Ⅸ��.
ellipsis : �섎씪吏��� �앸�遺꾩뿉 �먮룞�쇰줈 '...'�� �ｌ뼱以���. ie6 �댁긽�먯꽌留� 吏��� 媛���, �뚰룺�� �덈맖
width 媛믪씠 吏��뺣릺�댁빞 �� / �믪씠瑜� �뺥빐二쇨굅�� white-space-nowrap; �띿꽦 �ъ슜�댁빞 ��. / <nobr> �ъ슜
//�몃줈 媛��대뜲 �뺣젹
1. �몃씪�멸뎄議� 媛��대뜲 �뺣젹 : 媛��� 湲곕낯�곸씤 諛⑸쾿�댁�留� �� 諛⑸쾿�� �� 以�(�붿냼)�� 寃쎌슦�먯꽌留� �대떦�� �⑸땲��.
- 遺�紐⑥슂��(�몃씪�멸뎄議�) : text-align: center;line-height: (height媛믨낵 �숈씪�섍쾶);
2. 釉붾줉援ъ“ 媛��대뜲 �뺣젹 : 媛��� 湲곕낯�곸씤 諛⑸쾿�댁�留� �� 諛⑸쾿�� �� 以�(�붿냼)�� 寃쎌슦�먯꽌留� �대떦�� �⑸땲��.
- �붿냼(釉붾줉援ъ“) : margin: 0 auto;width媛� �ㅼ젙;line-height: (height媛믨낵 �숈씪�섍쾶);
3. �붿냼�� �깆쭏�� table濡� 蹂��섏떆耳쒖꽌 媛��대뜲 �뺣젹�� �섎뒗 諛⑸쾿�댁�留� table�먯껜瑜� �덉씠�꾩썐�� 留롮씠 �ъ슜�섏� �딄린 �뚮Ц�� �� �곗� �딅뒗 諛⑸쾿�낅땲��.
- 遺�紐⑥슂�� : display: table;
- �먯떇�붿냼 : display: table-cell;text-align: center;vertical-align: middle;
4. �덈� �붿냼瑜� �댁슜�� 媛��대뜲 �뺣젹諛⑸쾿�대ʼn, �쒖씪 �뷀븯寃� �곗씠吏�留� �⑥젏�� �곸뿭�� �놁뼱吏��� 寃껋씠 �⑥젏�댁뼱�� 諛섏쓳�뺤쓣 �� �� �ъ슜�섍린 遺덊렪�� �먯씠 �덉뒿�덈떎.
- 遺�紐⑥슂�� : position: relative;
- �먯떇�붿냼 : position: absolute;top: 50%;left: 50%;margin-top: -(�먯떇 �붿냼 �믪씠媛믪쓽 諛�);margin-left: -(�먯떇 �붿냼 媛�濡쒓컪�� 諛�);
5. 留뚯빟 �먯떇�붿냼�� 媛�濡쒓컪怨� �몃줈 媛믪쓣 紐⑤Ⅴ怨� �좊룞�곸씤 寃쎌슦�� �덈� �붿냼瑜� �ъ슜�섏뿬 媛��대뜲濡� �ㅻ뒗 �뺣젹諛⑸쾿�낅땲��.
- 遺�紐⑥슂�� : position: relative;
- �먯떇�붿냼 : position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
6. �덈� �붿냼瑜� �댁슜�� 媛��대뜲 �뺣젹 諛⑸쾿�댁�留� �뷀븯寃� �곗씠吏��� �딆뒿�덈떎.
- 遺�紐⑥슂�� : position: relative;
- �먯떇�붿냼 : position: absolute;top: 0;left: 0;top: 0;right: 0;margin: auto;
7. CSS3瑜� �댁슜�� 諛⑸쾿�댁�留� 理쒖떊 釉뚮씪�곗� �댁쇅�먯꽌�� �묐룞�섏� �딅뒗 �⑥젏�� �덉�留� �쒖��� �쒕떎硫� �욎쑝濡� 留롮씠 �곗씪 諛⑸쾿�낅땲��.
- 遺�紐⑥슂�� : height 媛� �ㅼ젙
- �먯떇�붿냼 : display: flex;justify-content: center;align-items: center;
.top_slogan{
float: left;
height: 40px;
}
.top_slogan:after{
display: inline-block;
height: 100%;
content: '';
vertical-align: middle;
}
.top_slogan img{
vertical-align: middle;
}
.wrapper {
height: 100%;
text-align: center;
}
.wrapper:before {
content: "";
display: inline-block;
width: 1px;
height: 100%;
margin-right: 0;
vertical-align: middle;
}
//gradient
background: linear-gradient(180deg, #ccc, #fff); //Standard syntax
background: -webkit-linear-gradient(180deg, #ccc, #fff); //For Safari 5.1 to 6.0
background: -o-linear-gradient(180deg, #ccc, #fff); //For Opera 11.1 to 12.0
background: -moz-linear-gradient(180deg, #ccc, #fff); //For Firefox 3.6 to 15
*/