@charset "utf-8";

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');


/* ===================================================== */
/* COMMON : S */
html {background-color: #aaa;}
html::-webkit-scrollbar {width: 7px; background-color: #eee;}
html::-webkit-scrollbar-thumb {background-color: #c5006e;}
body { min-width: 280px; font: 16px/1.5 Pretendard, 'Malgun Gothic','돋움', dotum, sans-serif; letter-spacing: -0.025em; color: #222; overflow-x: hidden;}
h1, h2, h3, h4, h5, h6, dt, figcaption { line-height: 1.2; letter-spacing: normal; } 
.js-open {overflow: hidden !important;}
#wrap {overflow: hidden; background-color: #fff;}
.inner {position: relative; max-width: 1400px; margin: 0 auto;}

/* 텍스트 */
.txt-serif {font-family: 'Noto Serif KR', serif; font-weight: 900;}
.txt-pink {color: #c5006e;}
.txt-blue {color: #2c8db4; font-weight: 800;}

/* 좌우 스크롤 가이드 */
.scroll-x-guide {display: none; position: relative; width: 44px; height: 41px; margin: -10px 0 0 auto; } 
.scroll-x-guide::before { display: block; width: 44px; height: 6px; border-radius: 3px; background-color: #ddd; content: ''; } 
.scroll-x-guide::after { position: absolute; top: 1px; left: 1px; width: 24px; height: 40px; background-image: url(../images/common/scroll-x_pointer.svg); content: ''; animation: scroll-x-guide 3s ease-in-out infinite; } 
@keyframes scroll-x-guide { 50% { transform: translateX(19px); } 
 } 
.scroll-x-wrap {overflow-x: auto; max-width: 100%; }
.scroll-x-wrap img {margin: 0 auto;}
.scroll-x-wrap::-webkit-scrollbar { height: 6px; background-color: #eee; } 
.scroll-x-wrap::-webkit-scrollbar-thumb { background-color: #c5006e; } 
.type-box .scroll-x-guide {margin: 15px 0 -20px auto;}
.type-box .scroll-x-guide::before {background-color: #fff;}
.type-box .scroll-x-guide::after {background-image: url(../images/common/scroll-x_pointer_white.svg);}
.type-box .scroll-x-wrap {padding-bottom: 20px; margin-bottom: -20px;}
.type-box .scroll-x-wrap::-webkit-scrollbar { height: 6px; background-color: #fff; border-radius: 10px;} 
.type-box .scroll-x-wrap::-webkit-scrollbar-thumb {border-radius: 10px; border: 1px solid #fff;}

/* tocplus */
#tocplusWindow {left: auto !important; right: 45px !important; top: auto !important; bottom: 4% !important; position: fixed !important;}
#tocplusWindow > div {border: 0 !important;}
#TpTbw {border-radius: 0 30px 0 0 !important; cursor: auto !important;}
#TpTbw > div:first-child {position: relative !important; width: 50%;}
#TpTbw > div:nth-child(2) {padding-right: 5px !important;}
#TpTbw > div:nth-child(2) a {display: none;}
#TpTbw > div:nth-child(2) [href*="close"] {display: block; background: url(../images/common/tocplus_close.svg) no-repeat center/contain !important; width: 20px; height: 20px; margin-left: auto; margin-top: -20px; position: relative; transform: translate(-7px, -7px);}
#TpTbw > div:nth-child(2) [href*="close"] img {display: none !important;}
#eTkZp {font-size: 25px !important; letter-spacing: normal; font-family: 'Noto Serif KR', serif !important; color: #fff !important;}
#eTkZp {text-decoration: none !important;}
요소[속성*="값"]
/* br */
.br1280 {display: none;}
.br1024 {display: none;}
.br810 {display: none;}
.br768 {display: none;}
.br640 {display: none;}
.br576 {display: none;}
.br480 {display: none;}
.br412 {display: none;}
.br360 {display: none;}
.br320 {display: none;}

@media (max-width: 1495px) { 
	.body-sub #tocplusWindow {right: calc((100% - 1400px) / 2) !important;}
}
@media (max-width: 1440px) { 
	.inner {margin: 0 20px;}
	.body-sub #tocplusWindow {right: 20px !important;}
 }
@media (max-width: 1280px) {
  .br1280 {display: block;}
	#tocplusWindow {bottom: 40px !important; }
	#TpTbw img {width: 120px;}
}
@media (max-width: 1024px) {
  .br1024 {display: block;}
}
@media (max-width: 810px) {
  .br810 {display: block;}
}
@media (max-width: 768px) {
  .br768 {display: block;}
	#tocplusWindow {bottom: calc(6% + 202px) !important; right: 20px !important;}
	.body-sub #tocplusWindow {bottom: 40px !important;}
	#TpTbw img {width: 100px;}
}
@media (max-width: 640px) {
  .br640 {display: block;}
	#tocplusWindow {bottom: calc(6% + 230px) !important;}
	.body-sub #tocplusWindow {bottom: 40px !important;}
}
@media (max-width: 576px) {
  .br576 {display: block;}
}
@media (max-width: 480px) {
  .br480 {display: block;}
}
@media (max-width: 412px) {
  .br412 {display: block;}
}
@media (max-width: 360px) {
  .br360 {display: block;}
}
@media (max-width: 320px) {
  .br320 {display: block;}
}
/* COMMON : E */
/* ===================================================== */


/* ===================================================== */
/* HEADER : S */
.header {position: absolute; top: 0; left: 0; z-index: 1000; width: 100%;}
.header-inner { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100px; transition: all .3s; display: flex; align-items: center; padding: 0 45px;}
.body-main .header-inner {animation: fadeDown 0.8s ease-out both;}
.header-inner::before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); content: ''; transition: all .3s;}
.js-hover .header-inner::before,
.js-fix .header-inner::before { border-color: #eee; background-color: #fff;}
.js-open .header-inner::before { border-color: transparent; background-color: transparent;  transition: all 0s;}

.header-logo { width: 240px; height: 100%; display: flex; align-items: center;}
.header-logo a {position: relative;}
.header-logo img {width: 100%;}
.js-hover #header-logo-white,
.js-fix #header-logo-white,
.js-open #header-logo-white {opacity: 0;}
.header-logo #header-logo { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.js-hover #header-logo,
.js-fix #header-logo,
.js-open #header-logo {opacity: 1;}
.js-open .header-logo {left: 32%; position: absolute;}

/* gnb */
.gnb {flex-grow: 1; margin-left: 10%; transition: margin .3s;}
.gnb-wrap { display: flex; transition: .3s; position: relative; z-index: 5; justify-content: center; margin: 0 auto;}
.depth1 {position: relative; transition: all .3s;}
.depth1 > a { position: relative; padding: 0 27px; font-weight: 700; font-size: 20px; line-height: 100px; text-align: center; transition: all .3s; white-space: nowrap;}
.depth1 > a::before {position: absolute; content: ''; top: 0; left: 0; height: 8px; width: 100%; background-color: #c5006e; opacity: 0; transition: all .3s;}
.depth1 > a span {letter-spacing: 0.025em; color: #fff; white-space: nowrap;}
.depth2 {visibility: hidden; overflow: hidden; opacity: 0; position: absolute; top: 100px; right: 0; z-index: 5; min-width: 100%; height: 0; border-left: 1px solid #eee; text-align: center; transition: all .3s, visibility 0s;}
.depth2-list {padding: 25px 0;}
.depth1:last-child .depth2 {border-right: 1px solid #eee;}
.depth2 a {padding: 7px 0; transition: all .3s;}
.depth2 span {white-space: nowrap;}
.gnb-bg { position: absolute; top: 100px; left: 0; width: 100%; height: 0; background: #fff url(../images/common/gnb_bg.svg) no-repeat right+4% bottom/calc(13% + 20px); transition: all .3s; border-radius: 0 0 30px 30px;}

.js-hover .gnb {margin-left: 0;}
.depth1:hover > a::before {opacity: 1;}
.js-hover .depth1 > a {padding: 0 37px;}
.js-hover .depth1 > a span,  
.js-fix .depth1 > a span {color: #222;}
.header .gnb .depth1:hover > a span {color: #c5006e;}
.js-hover .depth2 { visibility: visible; opacity: 1; height: 340px; } 
.depth1:hover .depth2 {background-color: #c5006e;}
.depth1:hover .depth2 a {color: #fff;}
.depth2-list:hover a {opacity: 0.7;}
.depth2-list a:hover {opacity: 1;}
.js-hover .gnb-bg {height: 340px;}

/* 전체메뉴 */
.util-allmenu { height: 100%; display: flex; align-items: center; z-index: 10; margin-left: auto;}
.util-allmenu-btn { position: relative; width: 24px; height: 24px; margin: auto; } 
.util-allmenu-btn span { position: absolute; top: 50%; right: 0; width: 24px; height: 2px; background-color: #fff; transform: scaleX(0.8) translateY(-50%); transform-origin: right; transition: all .3s; border-radius: 3px;} 
.util-allmenu-btn span:nth-child(1) { top: calc(50% - 8px); } 
.util-allmenu-btn span:nth-child(2) { transform: scaleX(1) translateY(-50%); } 
.util-allmenu-btn span:nth-child(3) { top: calc(50% + 8px); } 
.util-allmenu-btn:hover span { transform: scaleX(1) translateY(-50%); }  
.js-open .util-allmenu-btn span { top: 11px; right: -4px; width: 32px; transform: scaleX(1) rotate(45deg); transform-origin: center; } 
.js-open .util-allmenu-btn span:nth-child(2) { opacity: 0; } 
.js-open .util-allmenu-btn span:nth-child(3) { transform: scaleX(1) rotate(-45deg); }
.js-open .util-allmenu-btn span,
.js-fix .util-allmenu-btn span,
.js-hover .util-allmenu-btn span {background-color: #c5006e;}

.allmenu {left: 0; top: 0; position: fixed; width: 100%; height: 100%; background-color: #fff;  opacity: 0; display: flex; visibility: hidden;}
.allmenu::before {content: ''; width: 25%; height: 100%; background: url(../images/common/allmenu_bg.jpg) no-repeat center/cover;}
.allmenu-right {width: 75%; height: 100%; padding: 100px 0 0 7%;}
.allmenu-wrap { overflow-y: auto; height: 100%; border-top: 1px solid #eee;}
.allmenu-wrap::-webkit-scrollbar {width: 0;}
.allmenu-list {display: flex; padding: 4vh 0; flex-wrap: wrap; position: relative;}
.js-open .allmenu { opacity: 1; visibility: visible;}

.all-depth1 {margin: 4vh 0; width: calc(100% / 3); padding-right: 3%;}
.all-depth1:nth-child(2),
.all-depth1:nth-child(2n + 5) {margin-right: calc(100% / 3);}
.all-depth1:nth-child(3) {position: absolute; right: 0; top: 4vh; padding-bottom: 10vh;}
.all-depth1-btn {display: block; position: relative; width: 100%; margin-bottom: 10px; font-size: 35px; font-weight: 800; text-align: left; cursor: default; transition: all .3s;}
.all-depth2-btn {padding: 6px 0; color: #666; font-weight: 600; font-size: 17px;}
.all-depth2-btn span {background: linear-gradient(to right, #c5006e 0%, #c5006e 100%) no-repeat left bottom/0 1px; transition: all .3s; padding-bottom: 0.15em;}
.all-depth3 {padding-bottom: 1.5em; font-size: 15px; }
.all-depth3-btn {color: #aaa; display: flex; padding: 2px 0; transition: all .3s;}
.all-depth3-btn::before {content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: #444; margin: 9px 5px 0 0; flex-shrink: 0;}

.all-depth1:hover .all-depth1-btn {color: #c5006e;}
.all-depth2 li:hover .all-depth2-btn span {background-size: 100% 1px; color: #c5006e;}
.all-depth3:hover .all-depth3-btn {color: #ccc;}
.all-depth3 .all-depth3-btn:hover {color: #444;}

/* dim */
.gnb-dim {opacity: 0; position: fixed; bottom: 0; left: 0; z-index: 900; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); transition: opacity .3s; pointer-events: none;}
.js-hover .gnb-dim {opacity: 1;}

@media (max-width: 1600px) {
}
@media (max-width: 1495px) {
	.header-inner {padding: 0 calc((100% - 1400px) / 2 );}
}
@media (max-width: 1440px) {
	.header-logo { width: 220px; left: 20px;}
	.header-inner {padding: 0 20px;}
	.depth1 > a { font-size: 19px; padding: 0 22px;}
	.js-hover .depth1 > a { padding: 0 32px;}
	.allmenu-logo {width: 220px;}
}
@media (max-width: 1280px) {
	.header-inner { height: 80px;}
	.header-logo {width: 200px;}
	.js-open .header-logo {left: 25%;}

	.depth1 > a {  line-height: 80px; font-size: 18px; padding: 0 1.5vw;}
	.depth1 > a::before { height: 5px;}
	.depth1 > a span {letter-spacing: normal;}
	.depth2 { top: 80px; }
	.depth2-list {padding: 20px 0;}
	.depth2 a {padding: 6px 0; font-size: 15px;}
	.gnb-bg {top: 80px; border-radius: 0 0 25px 25px; background-image: none;}
	.js-hover .depth1 > a { padding: 0 2.5vw;}
	.js-hover .depth2,
	.js-hover .gnb-bg {height: 300px;}
	.allmenu::before {width: 20%; background-position: 85% center;}
	.allmenu-right {width: 80%; padding: 80px 0 0 5%;}
	.all-depth1-btn {font-size: 30px;}
	.all-depth2-btn {padding: 6px 0;  font-size: 16px;}
	.all-depth3 { font-size: 14px; }
}
@media (max-width: 1024px) {
	.gnb-wrap {display: none;}
	.all-depth1-btn {font-size: 25px;}
	.allmenu::before {width: 10%; background-position: 75% center;}
	.allmenu-right {width: 90%; padding-left: 4%;}
	.js-open .header-logo {left: 14%;}
}
@media (max-width: 768px) {
	.js-open .header-logo {left: calc(120px);}
	.allmenu::before {width: 100px;}
	.allmenu-right {width: calc(100% - 100px); padding: 80px 20px 0;}
	.allmenu-list { padding: 3vh 0 5vh; display: block;}

	.all-depth1 {margin: calc(8px + 1vh) 0; width: 100%; padding-right: 0; border-radius: 15px; background-color: #fff7fc;}
	.all-depth1:nth-child(2),
	.all-depth1:nth-child(2n + 5) {margin-right: 0;}
	.all-depth1:nth-child(3) {top: 0; padding-bottom: 0; position: relative;}
	.all-depth1-btn {display: flex; justify-content: space-between; align-items: center; padding: 1em 20px; margin: 0; font-size: 23px; cursor: pointer;}
	.all-depth1-btn span {flex-grow: 1;}
	.all-depth1-btn::before {position: absolute; bottom: 0; left: 20px; content: ''; width: calc(100% - 40px); background-color: #c5006e; height: 1px; opacity: 0; transition: all 0.3s;}
	.all-depth1-btn::after {display: block; flex-shrink: 0; width: 15px; height: 15px; background-image: url(../images/common/more_ico.svg); content: ''; transition: all .3s;}
	.all-depth1-btn:hover::after {background-image: url(../images/common/more_ico_pink.svg);}
	.all-depth1-btn.on {border-color: transparent; color: #c5006e;}
	.all-depth1-btn.on::before {opacity: 0.15;}
	.all-depth1-btn.on::after {transform: rotate(45deg) scale(1.2); background-image: url(../images/common/more_ico_pink.svg);}

	.all-depth2 {display: none; padding: 20px;}
	.all-depth2-btn {color: #444; font-size: 17px;}
	.all-depth3 {font-size: 15px;}
	.all-depth3-btn {color: #666;}
	.all-depth3:hover .all-depth3-btn {color: #aaa;}
	.all-depth3 .all-depth3-btn:hover {color: #222;}
}
@media (max-width: 576px) {
	.js-open .header-inner::before { border-color: #eee;}
	.js-open .header-logo {left: 20px;}
	.header-inner { height: 68px;}
	.header-logo {width: 150px;}
	.allmenu::before {display: none;}
	.allmenu-right {width: 100%; padding-top: 68px;}
	.allmenu-wrap { border-color: transparent;}
	.all-depth1-btn {font-size: 21px;}
	.all-depth2 {display: none;}
}
@media (max-width: 480px) {
	.all-depth1-btn {font-size: 19px;}
	.all-depth2-btn { font-size: 16px;}
}
/* HEADER : E */
/* ===================================================== */


/* ===================================================== */
/* VISUAL-SIDE : S */
.visual-side {position: absolute; top: calc(100px + 7vh); right: 45px; transform: translateX(10px);}
.body-main .visual-side {animation: fadeDown 0.5s ease-out 0.4s both; }
.visual-sns::before { display: block; opacity: 0.25; width: 1px; height: 10vh; margin: 0 auto 3.5vh; background-color: #fff;content: '';}
.visual-sns li {position: relative;}
.visual-sns li + li {margin-top: 10px;}
.visual-sns a {width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, 0.5) url(../images/common/visual_sns_ico01.svg) no-repeat center; transition: all .3s;}
.visual-sns li:nth-child(2) a {background-image: url(../images/common/visual_sns_ico02.svg);}
.visual-sns li:nth-child(3) a {background-image: url(../images/common/visual_sns_ico03.svg);}
.visual-sns a:hover {background-color: #c5006e;}
@media (max-width: 1495px) {
	.visual-side {right: calc((100% - 1400px) / 2 );}
}
@media (max-width: 1440px) {
	.visual-side {right: 20px;}
}
/* VISUAL-SIDE : S */
/* ===================================================== */


/* ===================================================== */
/* FOOTER : S */
.footer {background-color: #2d2d2d; color: #fff; letter-spacing: normal; position: relative; clear: both;}

.footer-menu {display: flex; justify-content: center; align-items: center; background-color: #333; padding: 20px; flex-wrap: wrap;}
.footer-menu-item {display: flex; align-items: center;}
.footer-menu-item::after { margin-bottom: 2px;  content: ':';}
.footer-menu-item:last-child::after {display: none; content: '';}
.footer-menu-item a {padding: 1em 1.8em; font-weight: 700;}
.footer-menu-item a span {padding-bottom: 0.15em; background: linear-gradient(to right, #fff 0%, #fff 100%) no-repeat left bottom/0 1px; transition: all 0.3s;}
#footer-privacy a {color: #f549aa;}
#footer-privacy a span { background-image: linear-gradient(to right, #f549aa 0%, #f549aa 100%) }
.footer-menu-item a:hover span {background-size: 100% 1px;}

.footer-contact {font-size: 15px; padding: 55px 0 60px;}
.footer-contact .list {display: flex; align-items: center; justify-content: center;}
.footer-contact .item {display: flex; align-items: center; margin-top: 0.6em;}
.footer-contact dd {line-height: 1.2;}
.footer-contact dt {display: flex; align-items: center; flex-shrink: 0;}
.footer-contact dt::after {content: ':'; margin: 0 0.35em;}
.footer-contact .top {color: #888; font-weight: 500; margin-bottom: 1em;}
.footer-contact .top .item {margin-right: 1.5em;}
.footer-contact .top .item:last-child {margin-right: 0;}
.footer-contact .bottom {font-weight: 700; color: #fff;}
.footer-contact .bottom .item {margin-right: 3em;}
.footer-contact .bottom .item:last-child {margin-right: 0;}
.footer-contact .bottom dt::before {content: ''; width: 24px; height: 24px; border-radius: 50%; background: #222 url(../images/common/footer_contact_ico01.svg) no-repeat center; margin-right: 0.6em;}
.footer-contact .bottom .item:nth-child(2) dt::before {background-image: url(../images/common/footer_contact_ico02.svg);}

/* 탑버튼 */
.footer-util {position: absolute; right: 45px; top: -28px; font-size: 55px; }
.top-btn { display: flex; width: 66px; height: 57px; background: url(../images/common/heart.svg) no-repeat center bottom/contain; position: relative; margin-bottom: 35px; transform: translateX(60px);}
.top-btn::before { width: 22px; height: 40px; margin: auto auto -10px; background: url(../images/common/top-btn_ico.svg) no-repeat center top/contain; content: '';}
.top-btn::after {width: 2px; content: ''; height: 50px; background-color: #c5006e; position: absolute; top: calc(100% - 2px); left: calc(50% - 1px);}
.top-btn:hover::before { animation: top-btn 1.5s infinite linear; } 
@keyframes top-btn { 
 33% { transform: translateY(2px); } 
 66% { transform: translateY(-4px); } 
	}
.footer-util .txt-serif {color: #c5006e; line-height: 1.1;text-shadow: 0.03em 0 0 #c5006e; text-align: right;}

/* 카피라이트 */
.footer-copy {border-top: 1px solid #444; text-align: center;  padding: 35px 0;}
.footer-copy p {padding: 0 20px; font-size: 14px; color: #666; font-weight: 500; letter-spacing: 0.1em; line-height: 1.3;}
 
@media (max-width: 1495px) {
	.footer-util { right: calc((100% - 1400px) / 2 ) }
}
@media (max-width: 1440px) {
	.footer-util { right: 20px; }
}
@media (max-width: 1280px) {
	.footer-menu {padding: 18px 20px; font-size: 15px;}
.footer-contact {font-size: 14px; padding: 45px 0 50px;}
.footer-copy {padding: 32px 0;}
.footer-copy p {font-size: 13px;}
.footer-util { font-size: 44px; top: -26px}
.top-btn { width: 60px; height: 52px; margin-bottom: 13px; transform: translateX(43px);}
.top-btn::after { height: 25px;}
}
@media (max-width: 1024px) {
	.footer-menu { justify-content: start; overflow: hidden; margin-left: -1.35em;}
	.footer-menu-item a {padding: 1em 1.5em;}
	.footer-contact .list {flex-wrap: wrap; justify-content: start;}
	.footer-contact .item {flex-shrink: 0;}
	.footer-contact .bottom .item {margin-right: 2em;}
	.footer-util { font-size: 39px;}
	.top-btn { margin-bottom: 18px; transform: translateX(23px);}
	.top-btn::after { height: 28px;}
	.footer-util .txt-serif { text-align: center;}
	.footer-copy {text-align: left; }
}
@media (max-width: 810px) {
	.footer-contact .top .item:first-child {width: 100%;}
}
@media (max-width: 768px) {
	.footer-menu {padding: 22px 20px; margin-left: -0.85em;}
	.footer-menu-item a {font-size: 14px; padding: 0.6em 0.9em; font-weight: 500;}
	.footer-contact {font-size: 13px; padding: 35px 0 40px;}
	.footer-contact .bottom {font-weight: 500;}
	.top-btn { margin-bottom: 12px;}
	.top-btn::after { height: 26px;}
	.footer-copy {padding: 29px 0;}
.footer-copy p {font-size: 12px; font-weight: 400;}
}
@media (max-width: 640px) {
	.footer-util { font-size: 29px; top: -23px;}
	.top-btn { width: 53px; height: 46px; margin-bottom: 26px; transform: translateX(23px);}
	.top-btn::after { height: 35px;}
	.footer-util .txt-serif { text-align: right; text-shadow: none;}
}
@media (max-width: 576px) {
	.footer-menu {margin-left: -1.15em;}
	.footer-menu-item:nth-child(3) {margin-right: calc(100% - 250px);}
	.footer-menu-item a { padding: 0.4em 1.2em;}
	.top-btn { margin-bottom: 52px; transform: translateX(21px);}
	.top-btn::after { height: 61px;}
}
@media (max-width: 360px) {
	.footer-menu {margin-left: -0.9em;}
	.footer-menu-item a { padding: 0.4em 0.9em;}
}
@media (max-width: 320px) {
	.footer-menu {margin-left: -0.4em;}
	.footer-menu-item a { padding: 0.4em; font-weight: 400;}
	.top-btn {overflow: hidden; transform: none;}
	.top-btn::after { display: none;}
	.footer-util .txt-serif {display: none;}
}
/* FOOTER : E */
/* ===================================================== */


/* ===================================================== */
/* ANIMATION : S */
 @keyframes fadeDown { 
	0% { opacity: 0; transform: translateY(-35px); } 
	100% { opacity: 1; transform: translateY(0); } 
	}
 @keyframes fadeUp { 
	0% { opacity: 0; transform: translateY(35px); } 
	100% { opacity: 1; transform: translateY(0); } 
	}
	@keyframes fadeLeft { 
		0% { opacity: 0; transform: translateX(-35px); } 
		100% { opacity: 1; transform: translateX(0); } 
		}
	@keyframes fadeRight { 
		0% { opacity: 0; transform: translateX(35px); } 
		100% { opacity: 1; transform: translateX(0); } 
		}
 @keyframes fadeIn { 
	0% { opacity: 0; } 
	100% { opacity : 1; } 
	}
 /* ANIMATION : E */
 /* ===================================================== */