@charset "utf-8";

/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// 웹폰트  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playball&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");


/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////	reset css  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
html {-webkit-tap-highlight-color:transparent !important;-webkit-text-size-adjust: none;-webkit-appearance:none;  }
#wrapper { width:100%;  height:100vh; background:#fff; overflow:hidden !important; -webkit-overflow-scrolling: touch; }
body{ -ms-overflow-style:none; } 
::-webkit-scrollbar { display: none; }

* { box-sizing:border-box; }
html, body { height:100%; width:100%; max-width:100vw !important; }
html { font-size:10px; letter-spacing:0px; font-family: "Pretendard Variable", 'Pretendard', 'GmarketSans','Raleway','Apple SD Gothic Neo','맑은 고딕','Malgun Gothic','돋움','sans-serif'; color:#171818; }
body{min-width:320px; word-break: keep-all; overflow-x:hidden !important; margin:0 auto; font-size:1.6rem; line-height:1.1; font-weight:300; }
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,a,button,select
{margin:0;padding:0;box-sizing:border-box; word-break:keep-all;}
body,input,textarea,select,button,table,label
{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none; text-size-adjust:none; font-weight:300; 
font-family: "Pretendard Variable",'Pretendard','GmarketSans','Raleway','Apple SD Gothic Neo','맑은 고딕','Malgun Gothic','돋움','sans-serif';}

a {color:#070708;text-decoration:none;}
a:link {color:#070708;text-decoration:none;}
a:visited {color:#070708;text-decoration:none;}
a:active {color:#070708;text-decoration:none;}
a:hover {color:#070708;text-decoration:none;}
a:focus {outline:none;}
span, a, em, button {display:inline-block;}
img,fieldset,iframe{border:0;}
img {max-width:100%; vertical-align:middle; }
ul, li{list-style:none;}
em,address{font-style:normal;}
input,select,button{vertical-align:middle;}
input[type="checkbox"]{padding:1px;}
caption,legend,.blind{overflow:hidden;position:absolute;top:0;left:-9999px;width:0;height:0;font-size:0;line-height:0;text-align:left;}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=button]
{width:100%;height:3.8rem;padding:0 10px;border:1px solid #ccc;color:#333;vertical-align:middle;-webkit-appearance:none; }
input[type=password],input[type=email]{ime-mode:disabled;}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
select:focus,
textarea:focus{border:1px solid #999;}
input[type=file]{width:99.5%;height:38px;border:1px solid #ccc;background:#fff;}
select{height:38px;padding-left:5px;border:1px solid #ccc;font-size:1.5rem;color:#333;vertical-align:middle;}
textarea{width:100%;padding:10px;border:1px solid #ccc;font-size:1.5rem;color:#333;resize:none;}
table{width:100%;border-collapse:collapse;border-spacing:0;}
table th {font-weight:normal;}
hr{display:none;}
label {cursor:pointer;}
button[type='button'],button[type='submit'] {cursor:pointer;}
button:focus,
input:focus  { outline: 0; }
body.off { position:fixed; width:100%; height:100vh; overflow:hidden; }
body.on { position:inherit; height:auto; overflow:visible; }

/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////	공통  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
:root { --purple:#4d2bf6; --red:#f12403; --blue: #2ffcd8; }

.hidden { position:absolute; font-size:0; line-height:0; left:-10000px; padding:0 !important; margin:0; height:0;}
.f-left {float:left !important;}
.f-right {float:right !important;}
.dis-block {display:block !important;}
.dis-none {display:none !important;}
.text-c {text-align:center !important;}
.text-l {text-align:left !important;}
.text-r {text-align:right !important;}
.vt-t {vertical-align:top !important;}
.vt-m {vertical-align:middle !important;}
.vt-b {vertical-align:bottom !important;}
.bg-none {background:none !important;}
.border-none {border:none !important;}
.clearfix:after {content:"";display:block;clear:both;}

/* ios */
a[x-apple-data-detectors] {
  color:inherit !important;
  text-decoration:none !important;
  font-size:inherit !important;
  font-family:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
  white-space:nowrap;
}
.mt0 { margin-top:0rem !important; }
.mt5 { margin-top:0.5rem !important; }
.mt10 { margin-top:1rem !important; }
.mt20 { margin-top:2rem !important; }
.mt30 { margin-top:3rem !important; }
.mt40 { margin-top:4rem !important; }
.mt50 { margin-top:5rem !important; }
.mt60 { margin-top:6rem !important; }
.mt70 { margin-top:7rem !important; }
.mt80 { margin-top:8rem !important; }
.mt90 { margin-top:9rem !important; }
.mt100 { margin-top:10rem !important; }

.not_scroll{  position:fixed; overflow:hidden; width:100%; height:100%; }

/* 말줄임 */
.line1-text-eps { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; display:block; }
.line2-text-eps { display:block; line-height:1.5em; max-height:3em; display:-webkit-box; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; }
.line3-text-eps { display:block; line-height:1.5em; max-height:4.5em; display:-webkit-box; -webkit-line-clamp:3; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; }
.line4-text-eps { display:block; line-height:1.5em; max-height:6em; display:-webkit-box; -webkit-line-clamp:4; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; }

/* 폰트 */
.bold { font-weight:700 !important; }
.semiBold { font-weight:500 !important; }
.red { color:var(--red) !important; }
.en { font-family:'Frank Ruhl Libre', 'serif' !important; }
.en01 { font-family:'Poppins','Raleway','sans-serif' !important; }
.en02 { font-family:'Playball', cursive; !important; }

/* 리스트 */
ul.list_bullet { }
ul.list_bullet li { background:url(../images/common/list_bullet_3x3.png)0.1rem 0.5rem no-repeat; padding-left:0.8rem; line-height:1; }
ul.list_bullet li + li { margin-top:1rem; }

/* check, radio 타입 */
.check_type { position:relative; cursor:pointer; }
.check_type input[type="checkbox"],
.check_type input[type="radio"] { display:none; }
.check_type input + label { font-size:1.5rem; display:flex; align-items:center; line-height:1; position:relative; }
.check_type input + label:before { width:12px; height:12px; content:''; margin-right:5px; border:2px solid #ccc; background:#fff; }
.check_type input + label:after { position:absolute; width:5px; height:8px; border:2px solid #fff; content:''; transform:rotate(45deg); border-width:0 2px 2px 0; left:5px; bottom:6px; opacity:0; }
.check_type input:checked + label:before { border-color:#333; background:#333; }
.check_type input:checked + label:after { opacity:1; }

/* /////////////// Skip Navigation ////////////////////// */
.skip_navi {position:absolute;left:0;top:0;width:100%;text-align:center;z-index:999999;}
.skip_navi li a {position:absolute;top:0; left:0; margin-top:-100px; display:block;}
.skip_navi li a:focus,
.skip_navi li a:hover,
.skip_navi li a:active {width:100%; height:40px; margin:0; font-size:1.2em; line-height:40px;color:#fff;text-align:center; background-color:#23314a; }

/* 레이어팝업 */
.layerPop { position:fixed; top:0; left:0; width:100%; height:100vh; z-index:5000; background:rgba(0, 0, 0, 0.9); display:none; color:#fff; font-size:1.6rem; font-weight:300; line-height:1.3; }
.layerPopBox { width:100%; padding:100px; max-width:1000px; margin:0 auto; overflow-y:auto; position:relative; }
.layerPop .closeBtn { color:#fff; font-size:4.0rem; cursor:pointer; position:absolute; top:5rem; right:2.0rem; font-weight:100; }


/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) { 

}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) { 
	html { font-size:9.5px; }	
	/* 레이어팝업 */
	.layerPop .closeBtn  { top:2.0rem; }
	.layerPopBox { padding:50px; }	
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) { 
	html { font-size:9px; }		
	
	/* 작은해상도 가로스크롤 */
	.overflow-wrap { position:relative; }
	.overflow-x { overflow-x :auto; position:relative; }	
	.overflow-wrap:before { position:absolute; width:30px; height:100%; top:0; bottom:0; right:0; content:''; background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.3)); z-index:2;}	
	.100vh { height:calc(var(--var, 1vh) * 100); }
}

@media all and (max-width: 540px) {  
 	.check_type input + label { font-size:1.4rem; }
	
	/* 레이어팝업 */
	.layerPopBox { padding:30px; }
 }

/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// layout  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/

/* header */
.headerWrap { z-index:100; position:fixed; left:0; top:0; width:100%; transition:all .5s; height:10rem; mix-blend-mode:normal; }
.headerWrap .inner { width:100%; max-width:1840px; margin:0 auto; position:relative; height:10rem; }
.headerWrap h1.logo { position:absolute; left:20px; top:50%; transform:translateY(-50%); }
.headerWrap h1.logo a { display:block; background:url(../images/common/logo_white.png) no-repeat;  background-size:contain; /*width:17.8rem; height:4.2rem;*/ transform:translateX(-150px); opacity:0; 
	width:26rem; height:4.2rem;}
.headerWrap.no-scroll { top:0; z-index:9999; }
.headerWrap.sub { }
.headerWrap.sub h1.logo a { }
.headerWrap.scroll {  position:fixed; top:-1rem; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.headerWrap.sub_03h.scroll,
.headerWrap.sub_06h.scroll { /*-webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px);*/ }
.headerWrap.sub_03h h1.logo a,
.headerWrap.sub_06h h1.logo a,
.headerWrap.scroll h1.logo a,
.headerWrap.normal h1.logo a { display:block; background:url(../images/common/logo_black.png) no-repeat; background-size:contain; }
.headerWrap.sub_03h.scroll h1.logo a,
.headerWrap.sub_06h.scroll h1.logo a { display:block; background:url(../images/common/logo_white.png) no-repeat; background-size:contain; }
.navBtnWrap { z-index:200; position:absolute; top:50%; right:20px; transform:translateY(-50%); transition:all 0.3s; border:0; background:transparent; }
.navBtnWrap * { /*transition:all 0.3s;*/ }
.navBtnWrap .navBtn { cursor:pointer; z-index:101; position:relative; background:#fff; border-radius:50%; width:52px; height:52px; padding:1.6rem 0; display:flex; flex-direction:column; opacity:0; justify-content:space-around; transform:translateX(150px); }
.navBtnWrap .line { height:2px; background:#000; width:28px; transition:all ease-in-out 0.3s; margin:0 auto;}
.navBtnWrap .navBtn .line:nth-child(2) { width:14px; }
.navBtnWrap.active .navBtn { background:#000; }
.navBtnWrap:hover .navBtn .line { width:14px; }
.navBtnWrap:hover .navBtn .line:nth-child(2) { width:28px; }
.navBtnWrap.active .navBtn .line { background:#fff;}
.navBtnWrap.active .navBtn .line { width:28px; }
.navBtnWrap.active .navBtn .line:nth-child(2) { width:0; opacity:0; }
.navBtnWrap.active .navBtn .line:nth-child(1) { -webkit-transform:translate(49%, -50%) rotate(45deg); transform:translate(49%, -50%) rotate(45deg); transition-delay:0.0s; position:absolute;}
.navBtnWrap.active .navBtn .line:nth-child(3) { -webkit-transform:translate(49%, -50%) rotate(-45deg); transform:translate(49%, -50%) rotate(-45deg); transition-delay:0.03s; position:absolute;} 

.siteMap { position:fixed; height:100%; width:100%; right:0; top:0; overflow-y:auto;transition:all cubic-bezier(.77,-0.03,.16,1.05) 0.5s 0s; transform:translateX(100%); background:#fff; 
visibility:hidden; display:flex; transition-delay:0.4s; z-index:90;  }
.siteMap.active { transform:translateX(0); transition:all cubic-bezier(.77,-0.03,.16,1.05) 0.5s 0s; visibility:visible; } 
/*.siteMap:before { width:0px; height:0px; display:block; content:''; background:#fff; position:absolute; right:25px; top:50px; border-radius:50%; transform: translate(50%, -50%)}
.siteMap.active:before  { width:250vw; height:400vh; transition:all cubic-bezier(.77,-0.03,.16,1.05) 0.5s 0s; visibility:visible; }*/
.siteMap .left { width:50%; /*min-width:700px;*/ flex-shrink:0; display:flex; align-items:center; justify-content:center;  }
.siteMap .left .nav { padding:10rem; }
.siteMap .right { flex-grow:1; border-left:1px solid #000; display:flex; flex-direction:column; }
.siteMap .right > div { height:50%; display:flex; padding:7%;  }
.siteMap .right .companyInfo { border-bottom:1px solid #000; align-items:end; }
.siteMap .right .box h2 { font-size:2.3rem; font-weight:900; margin-bottom:3rem; }
.siteMap .right .box .info p { line-height:2; color:#070708; font-weight:300; }
.siteMap .right .box .info .underline { position:relative; }
.siteMap .right .box .info .underline:before { position:absolute; bottom:2px; left:0; right:0; width:100%; height:2px; background:var(--blue); content:''; z-index:-1; }
.siteMap .nav li { overflow-y:hidden; display:block; padding-right:50px; }
.siteMap .nav li div { transition-property:transform; transition-duration:0.4s; transform:translateY(110%); }
.siteMap.active .nav li div { transform:translateY(0); transition-delay:0.6s; opacity:1; }
.siteMap.active .nav li:nth-child(1) div { transition-delay:0.5s;}
.siteMap.active .nav li:nth-child(2) div { transition-delay:0.6s;}
.siteMap.active .nav li:nth-child(3) div { transition-delay:0.7s;}
.siteMap.active .nav li:nth-child(4) div { transition-delay:0.8s;}
.siteMap.active .nav li:nth-child(5) div { transition-delay:0.9s;}
.siteMap.active .nav li:nth-child(6) div { transition-delay:1.0s;}
.siteMap .nav li a { font-size:6.5rem; font-weight:900; height:10rem; line-height:10rem; letter-spacing:0.05em; text-transform:uppercase; color:#000; display:block; transition:all 0.3s; opacity:1;
 position:relative; }
.siteMap .nav li.off a { opacity:0.3; transition-delay:0s; padding-left:0; }
.siteMap .nav li:hover a { transform:translateX(50px); }
.siteMap .nav li a:before { transition:all 0.3s; content:''; width:0; height:6px; position:absolute; top:50%; left:-50px; background:#000; margin-top:-3px; }
.siteMap .nav li:hover a:before { width:50px; transition:all 0.3s; }
.siteMap .box { transition:all 0.5s; transform:translateX(50%); opacity:0; }
.siteMap.active .box  { transform:translateX(0); opacity:1;}
.siteMap .companyInfo .box  { transition-delay:0.2s; }
.siteMap .contactInfo .box  { transition-delay:0.2s; }
.siteMap.active .companyInfo .box  { transition-delay:1.0s; }
.siteMap.active .contactInfo .box  { transition-delay:1.1s; }
.headerWrap.sub .navBtnWrap .navBtn { /*background:#000;*/ }
.headerWrap.sub .navBtnWrap .navBtn .line { /*background:#fff;*/ }
.headerWrap.scroll .navBtnWrap .navBtn,
.headerWrap.sub_03h .navBtnWrap .navBtn { background:#000; }
.headerWrap.scroll .navBtnWrap .navBtn .line,
.headerWrap.sub_03h .navBtnWrap .navBtn .line{ background:#fff; }

.snsLink { display:flex; gap:0.8rem; margin-top:1.0rem; }
.snsLink .linkIcon { background: url(../images/common/snsIcon_80x80.png)no-repeat; background-size:300%; width:30px; height:30px; background-color:#333; border-radius:50%; }
.snsLink .linkIcon.snsInsta {  background-position:50% 0%; }
.snsLink .linkIcon.snsFace {  background-position:0% 0%; }

.quickMenu { position:absolute; z-index:200; width:52px; right:20px; color:#fff; top:13rem; transform:translateX(100px); opacity:0;  }
.quickMenu .quickBtn { width:40px; height:40px; margin:0 auto; border-radius:50%; }	
.quickMenu .quickBtn + .quickBtn { margin-top:10px; }
.quickMenu .quickBtn a { display:block; position:relative; transition:all 0.3s; }
.quickMenu .quickBtn a .icon { position:relative; width:40px; height:40px; border-radius:50%; background: url(../images/common/quickIcon_80x80.png)no-repeat; background-size:400%; z-index:2; 
transition:all 0.3s; }
.quickMenu .quickBtn a.quick02 { cursor:default; }
.headerWrap .quickMenu .quickBtn a.quick04 .icon,
.headerWrap .quickMenu .quickBtn a.quick05 .icon { background: url(../images/common/snsIcon_80x80.png)no-repeat; background-size:300%;}

.headerWrap.black h1.logo a { background:url(../images/common/logo_black.png) no-repeat; background-size:contain; }
.headerWrap.black .quickMenu .quickBtn a.quick01 .icon  { background-position:0 100%;}
.headerWrap.black .quickMenu .quickBtn a.quick02 .icon  { background-position:33.3333% 100%;}
.headerWrap.black .quickMenu .quickBtn a.quick03 .icon  { background-position:66.6666% 100%;}
.headerWrap.black .quickMenu .quickBtn a.quick04 .icon  { background-position:0% 100%;}
.headerWrap.black .quickMenu .quickBtn a.quick05 .icon  { background-position:50% 100%;}

.headerWrap .quickMenu .quickBtn a .icon { background-color:transparent; }
.headerWrap .quickMenu .quickBtn a.quick01 .icon  { background-position:0 0;}
.headerWrap .quickMenu .quickBtn a.quick02 .icon  { background-position:33.3333% 0;}
.headerWrap .quickMenu .quickBtn a.quick03 .icon  { background-position:66.6666% 0;}
.headerWrap .quickMenu .quickBtn a.quick04 .icon  { background-position:0% 0;}
.headerWrap .quickMenu .quickBtn a.quick05 .icon  { background-position:50% 0;}

.headerWrap .quickMenu.hover .quickBtn a .icon { background-color:#fff; }
.headerWrap .quickMenu.hover .quickBtn a.quick01 .icon  { background-position:0 100%;}
.headerWrap .quickMenu.hover .quickBtn a.quick02 .icon  { background-position:33.3333% 100%;}
.headerWrap .quickMenu.hover .quickBtn a.quick03 .icon  { background-position:66.6666% 100%;}
.headerWrap .quickMenu.hover .quickBtn a.quick04 .icon  { background-position:0% 100%;}
.headerWrap .quickMenu.hover .quickBtn a.quick05 .icon  { background-position:50% 100%;}
.headerWrap .quickMenu .quickBtn a:hover .icon { background-color:#fff; }
.headerWrap .quickMenu .quickBtn a.quick01:hover .icon  { background-position:0 100%;}
.headerWrap .quickMenu .quickBtn a.quick02:hover .icon  { background-position:33.3333% 100%;}
.headerWrap .quickMenu .quickBtn a.quick03:hover .icon  { background-position:66.6666% 100%;}
.headerWrap .quickMenu .quickBtn a.quick04:hover .icon  { background-position:0% 100%;}
.headerWrap .quickMenu .quickBtn a.quick05:hover .icon  { background-position:50% 100%;}

.headerWrap .quickMenu.active .quickBtn a .icon {background-color:#fff; }
.headerWrap .quickMenu.active .quickBtn a.quick01 .icon  { background-position:0 100% ;}
.headerWrap .quickMenu.active .quickBtn a.quick02 .icon  { background-position:33.3333% 100%;}
.headerWrap .quickMenu.active .quickBtn a.quick03 .icon  { background-position:66.6666% 100%;}
.headerWrap .quickMenu.active .quickBtn a.quick04 .icon  { background-position:0% 100%;}
.headerWrap .quickMenu.active .quickBtn a.quick05 .icon  { background-position:50% 100%;}
.headerWrap .quickMenu.active .quickBtn a.quick01:hover .icon  { background-position:0 0;}
.headerWrap .quickMenu.active .quickBtn a.quick02:hover .icon  { background-position:33.3333% 0 ;}
.headerWrap .quickMenu.active .quickBtn a.quick03:hover .icon  { background-position:66.6666% 0;}
.headerWrap .quickMenu.active .quickBtn a.quick04:hover .icon  { background-position:0% 0;}
.headerWrap .quickMenu.active .quickBtn a.quick05:hover .icon  { background-position:50% 0;}
.headerWrap .quickMenu.active .quickBtn a:hover .icon { background-color:#000; }

.headerWrap.scroll .quickMenu .quickBtn a .icon { background-color:#fff; } 
.headerWrap.scroll .quickMenu .quickBtn a.quick01 .icon  { background-position:0 100%;}
.headerWrap.scroll .quickMenu .quickBtn a.quick02 .icon  { background-position:33.3333% 100%;}
.headerWrap.scroll .quickMenu .quickBtn a.quick03 .icon  { background-position:66.6666% 100%; }
.headerWrap.scroll .quickMenu .quickBtn a.quick04 .icon  { background-position:0% 100%;}
.headerWrap.scroll .quickMenu .quickBtn a.quick05 .icon  { background-position:50% 100%;}
.headerWrap.scroll .quickMenu .quickBtn a:hover .icon { background-color:#000; } 
.headerWrap.scroll .quickMenu .quickBtn a.quick01:hover .icon  { background-position:0 0%;}
.headerWrap.scroll .quickMenu .quickBtn a.quick02:hover .icon  { background-position:33.3333% 0;}
.headerWrap.scroll .quickMenu .quickBtn a.quick03:hover .icon  { background-position:66.6666% 0; }
.headerWrap.scroll .quickMenu .quickBtn a.quick04:hover .icon  { background-position:0% 0;}
.headerWrap.scroll .quickMenu .quickBtn a.quick05:hover .icon  { background-position:50% 0;}

.headerWrap.sub_03h .quickMenu .quickBtn a .icon { background-color:#fff; } 
.headerWrap.sub_03h .quickMenu .quickBtn a.quick01 .icon  { background-position:0 100%;}
.headerWrap.sub_03h .quickMenu .quickBtn a.quick02 .icon  { background-position:33.3333% 100%;}
.headerWrap.sub_03h .quickMenu .quickBtn a.quick03 .icon  { background-position:66.6666% 100%; }
.headerWrap.sub_03h .quickMenu .quickBtn a.quick04 .icon  { background-position:0% 100%;}
.headerWrap.sub_03h .quickMenu .quickBtn a.quick05 .icon  { background-position:50% 100%;}
.headerWrap.sub_03h .quickMenu .quickBtn a:hover .icon { background-color:#000; } 
.headerWrap.sub_03h .quickMenu .quickBtn a.quick01:hover .icon  { background-position:0 0%;}
.headerWrap.sub_03h .quickMenu .quickBtn a.quick02:hover .icon  { background-position:33.3333% 0;}
.headerWrap.sub_03h .quickMenu .quickBtn a.quick03:hover .icon  { background-position:66.6666% 0; }
.headerWrap.sub_03h .quickMenu .quickBtn a.quick04:hover .icon  { background-position:0% 0;}
.headerWrap.sub_03h .quickMenu .quickBtn a.quick05:hover .icon  { background-position:50% 0;}

.quickMenu .quickBtn a .text { visibility:hidden; text-align:center; position:absolute; top:0; left:0; width:0; height:40px; line-height:40px; color:#fff; transform:translateX(0%); opacity:0;
 transition:all 0.3s ease; overflow:hidden; }
.quickMenu .quickBtn a .text:before { width:0; height:40px; background:url(../images/common/quickIcon_bg.png)right center no-repeat; background-size:100% 40px; content:''; display:block; position:absolute; top:0; left:0; 
transition:all 0.3s ease; z-index:-1;} 
.quickMenu .quickBtn a .text span { overflow:hidden; opacity:0; white-space:nowrap; transition:all 0.3s; transition-delay:0s; }

.quickMenu.hover .quickBtn a .text { visibility:visible; width:195px;  transform:translateX(-100%);  opacity:1; font-size:1.5rem;  transition:all 0.3s ease; font-weight:500; }
.quickMenu.hover .quickBtn a .text:before{ width:100%; transition:all 0.3s ease; }
.quickMenu.hover .quickBtn a .text span { opacity:1;  transition:all 0.3s; transition-delay:0.3s;}

.quickMenu.active .quickBtn a .text { visibility:hidden; text-align:center; position:absolute; top:0; left:0; width:0; height:40px; line-height:40px; color:#fff; transform:translateX(0%); opacity:0;
 transition:all 0.3s ease; overflow:hidden; }
.quickMenu.active .quickBtn a .text:before { width:0; height:40px; background:url(../images/common/quickIcon_bg.png)right center no-repeat; background-size:100% 40px; content:''; display:block; position:absolute; top:0; left:0; 
transition:all 0.3s ease; z-index:-1;} 
.quickMenu.active .quickBtn a .text span { overflow:hidden; opacity:0; white-space:nowrap; transition:all 0.3s; transition-delay:0s; }

.quickMenu .quickBtn a:hover .text { visibility:visible; width:195px;  transform:translateX(-100%);  opacity:1; font-size:1.5rem;  transition:all 0.3s ease; font-weight:500; }
.quickMenu .quickBtn a:hover .text:before{ width:100%; transition:all 0.3s ease; }
.quickMenu .quickBtn a:hover .text span { opacity:1;  transition:all 0.3s; transition-delay:0.3s;}

.inquiryBtnWrap { position:fixed; right:1rem; bottom:6rem; z-index:200; cursor:pointer; transition:all 0.8s;}
.inquiryBtnWrap a.inquiryBtn { width:20rem; height:20rem; display:block; position:relative; /*transition:all 0.3s;*/ transform:translateX(50px); opacity:0; }
.inquiryBtnWrap a.inquiryBtn .circle { width:100%; height:100%; border-radius:50%; background:rgba(255,255,255,0.85); position:relative; }
.inquiryBtnWrap a.inquiryBtn .circle:after { /*width:3rem; height:3rem; border-radius:50%; content:''; display:block; position:absolute; top:-0.3rem; left:2rem; background:var(--blue); opacity:0.2; */ }
.inquiryBtnWrap a.inquiryBtn .circle.cc1 { /*animation:rotate1 14s infinite; animation-timing-function:linear;*/ transition:all 0.8s; border:2px solid #000; }
.inquiryBtnWrap a.inquiryBtn .circle.cc2 { position:absolute; top:-15px; left:15px; background:transparent; animation:rotate2 3s infinite; animation-timing-function:linear; }
/*.inquiryBtnWrap a.inquiryBtn .circle.cc2:after { width:2rem; height:2rem; top:0.5rem; left:3em; background:var(--purple); opacity:0.7; content:''; display:block; border-radius:50%;}*/
.inquiryBtnWrap a.inquiryBtn .circle.cc2:after { width:3rem; height:3rem; border-radius:50%; content:''; display:block; position:absolute; top:-0.3rem; left:2rem; background:var(--blue); opacity:0.2; }
.inquiryBtnWrap a.inquiryBtn .txt { color:#000; font-size:2.4rem; font-weight:600; position:absolute; width:100%; transition:all 0.2s; top:50%; left:0; transform:translateY(-50%); text-align:center; }
.inquiryBtnWrap a.inquiryBtn .arwWrap { position:absolute; top:50%; left:0; width:100%; opacity:0; }
.inquiryBtnWrap a.inquiryBtn .arw { width:40px; height:16px; position:relative; margin:20px auto 0; }
.inquiryBtnWrap a.inquiryBtn .arw:before { position:absolute; top:50%; left:0; content:''; display:block; width:100%; height:2px; background:rgba(255,255,255,0.85); margin-top:-2px; }
.inquiryBtnWrap a.inquiryBtn .arw:after { width:14px; height:14px; content:''; border-right:2px solid rgba(255,255,255,0.85); transform:rotate(-45deg); position:absolute; right:1px; top:0; }
.inquiryBtnWrap a.inquiryBtn:hover .circle.cc2 { animation-duration:1.2s; }
.inquiryBtnWrap a.inquiryBtn:hover .circle.cc1 { background:rgba(0,0,0,1); transition:all 0.3s; }
.inquiryBtnWrap a.inquiryBtn:hover .txt { color:#fff; transform:translateY(-130%); }
.inquiryBtnWrap a.inquiryBtn .arwWrap {}
.inquiryBtnWrap a.inquiryBtn:hover .arwWrap { animation-name:arw; animation-duration:0.3s; opacity:1; }
.headerWrap.scroll .inquiryBtnWrap a.inquiryBtn .circle.cc1,
.navBtnWrap.active ~ .inquiryBtnWrap a.inquiryBtn .circle.cc1 { border:2px solid #000; transition:all 0.2s; } 

/*오른쪽 하단 채팅 버튼 추가*/
.inquiryBtnWrap a.inquiryBtn.new { width:15rem; height:15rem; margin-bottom:0.2rem; }
.inquiryBtnWrap a.inquiryBtn.new .circle.cc1 {  }
.inquiryBtnWrap a.inquiryBtn.new .circle.cc2 { animation:rotate2 15s infinite; }
.chatBtnWrap { width:15rem; height:15rem; border-radius:50%; background:linear-gradient(45deg, #3f19f9 0%, #1ac3ce 100%); color:#fff; text-align:center; display:flex; align-items:center;
	transform:translateX(50px); opacity:0;}
.chatBtnWrap .chatBtn { width:100%;  }
.chatBtnWrap .chatBtn .tit { font-size:2.4rem; font-weight:600; color:#fff !important; }
.chatBtnWrap .chatBtn:hover .tit { color:#fff !important; }
.chatBtnWrap .chatBtn .text { font-size:1.4rem; color:rgba(255,255,255,0.5); margin-top:0.3rem;  }
.chatBtnWrap .chatBtn .iconImg { width:45px; height:35px; background:url(/images/common/chatIcon_bg.png)no-repeat; background-size:100%; margin:0 auto;padding-bottom:6px; display:flex;
gap:5px; justify-content:center; align-items:center; margin-bottom:7px; }
.chatBtnWrap .chatBtn .iconImg .dot { width:5px; height:5px; border-radius:50%; background:#4960f0; display:block; content:'';  opacity:0;}
.chatBtnWrap .chatBtn .iconImg .dot:nth-child(1) { animation:dot1 1s infinite; }
.chatBtnWrap .chatBtn .iconImg .dot:nth-child(2) { animation:dot2 1s infinite; }
.chatBtnWrap .chatBtn .iconImg .dot:nth-child(3) { animation:dot3 1s infinite; }
.chatBtnWrap.yellow { background:#fee500;  }
.chatBtnWrap.yellow .chatBtn .iconImg .dot { background:#fee500; }
.chatBtnWrap.yellow  .chatBtn .tit { color:#191919 !important; }

/* 탑으로 이동 버튼 추가 + 오른쪽 퀵머튼 애니메이션 추가*/

/* .inquiryBtnWrap.scroll { transition:right 0.5s; right:-15rem;   } */
.inquiryBtnWrap.scroll { transition:bottom 0.5s; bottom:8rem;   }

/* 20240415 퀵메뉴 수정 */
.bottomFixedBtns { position:fixed; bottom:0px; right:0; display:flex; gap:0; justify-content:space-between; transform:translateY(100%); transition:all 0.6s; transition-delay: 0.2s; 
	height:66px; }
.bottomFixedBtns.active { bottom:0px; transition:all 0.6s; transform:translateY(0%); transition-delay: 0.2s; Z-index:1010; }
.bottomFixedBtns .online,
.bottomFixedBtns .chat, 	
.bottomFixedBtns .contactN { color:#fff; width:25vw; display:flex; align-items:center; justify-content:center; gap:10px; font-size:1.8rem; font-weight:500;  }
.bottomFixedBtns .contactN { background:#1ac3ce ; background:linear-gradient(100deg,#2ffcd8  0%, #1ac3ce 100%);  border-radius:60px 0 0 0; width:25vw; }
.bottomFixedBtns .online { background:linear-gradient(100deg,#1ac3ce  -100%, #010101 30%); }
.bottomFixedBtns .contactN a { color:#fff; font-size:2.0rem; font-weight:500; display:flex; gap:3px; cursor:default;  }
.bottomFixedBtns .contactN .pc { display:block;}
.bottomFixedBtns .contactN .mobile { display:none;}
.bottomFixedBtns .chat { background:linear-gradient(100deg,#010101  2%, #3f19f9 100%); color:#fff;  background:linear-gradient(45deg, #3f19f9 0%, #1ac3ce 100%);  }
.bottomFixedBtns .chat .iconImg { width:30px; aspect-ratio:45/35; background:url(/images/common/chatIcon_bg.png)no-repeat; background-size:100%; padding-bottom:6px; display:flex;
	gap:3px; justify-content:center; align-items:center;}
.bottomFixedBtns .chat .iconImg .dot { width:3px; height:3px; border-radius:50%; background:#3f19f9; display:block; content:'';  opacity:0;}
.bottomFixedBtns .chat .iconImg .dot:nth-child(1) { animation:dot1 1s infinite; }
.bottomFixedBtns .chat .iconImg .dot:nth-child(2) { animation:dot2 1s infinite; }
.bottomFixedBtns .chat .iconImg .dot:nth-child(3) { animation:dot3 1s infinite; }
.bottomFixedBtns .moveTop { width:16rem; line-height:60px; background:#010101; color:#fff; text-align:center; border:2px solid #010101; cursor:pointer; font-size:14px; font-weight:500; }
.moveTop.mobile { display:none;  }

/* 퀵메뉴 서브페이지 */
.bottomFixedBtns.sub { height:auto; right:20px; bottom:60px; width:110px; flex-wrap:wrap; transform:translate(130px, 0);  }
.bottomFixedBtns.sub.active { bottom:60px; transition:all 0.6s; transform:translate(0, 0);  }
.bottomFixedBtns.sub .online,
.bottomFixedBtns.sub .chat, 	
.bottomFixedBtns.sub .contactN,
.bottomFixedBtns.sub .moveTop  { width:100%; height:100px; flex-direction:column; font-size:15px; }
.bottomFixedBtns.sub .contactN, .bottomFixedBtns.sub .contactN a  { font-size:14px; }
.bottomFixedBtns.sub .moveTop { height:56px; line-height:56px; background:#fff; color:#010101; }
.bottomFixedBtns.sub .online { background:linear-gradient(100deg,#3f19f9   -100%, #010101 50%); }
.bottomFixedBtns.sub .online .icon { width:26px; aspect-ratio: 70/68; background:url(/images/online_icon.png)no-repeat center; background-size:100%; margin:0 auto; }
.bottomFixedBtns.sub .contactN { border-radius:0; text-align:center; background:linear-gradient(120deg,#010101  70%, #1ac3ce 200%); }
.bottomFixedBtns.sub .contactN .icon { width:26px; aspect-ratio: 70/68; background:url(/images/tel_icon.png)no-repeat center; background-size:100%; margin:0 auto; }

.headerWrap.mix { mix-blend-mode:difference; }
.headerWrap.normal { mix-blend-mode:normal !important; mix-blend-mode:normal; -webkit-backdrop-filter:blur(0px); backdrop-filter:blur(0px); }

@keyframes dot1{
    0% {opacity:0;}
    100% {opacity:1;}
} 
@keyframes dot2{
    0% {opacity:0;}
	25% {opacity:0;}
    100% {opacity:1;}
} 
@keyframes dot3{
    0% {opacity:0;}
	50% {opacity:0;}
    100% {opacity:1;}
} 



@keyframes rotate1{
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}  
@keyframes rotate2{
    0% {transform:rotate(0deg);}
    100% {transform:rotate(-360deg);}
}
@keyframes arw{
	0% {opacity:0; }
	30% {opacity:0; transform:translateX(-50px); }
    100% {opacity:1; transform:translateX(0px); }
}


/* footer */
.footer { background:#171818; text-align:center; padding:30px 20px; color:#fff; font-size:1.3rem;letter-spacing:0; position:relative; z-index:50; }
.footer.sub_footer { padding:5.0rem 20px;  }
.sub_footer .contactInfoWrap { margin:0 auto 5.0rem auto; width:100%; max-width:1000px; display:flex; justify-content:space-between;  }
.sub_footer .contactInfoWrap .contactInfo { text-align:left; }
.sub_footer .contactInfoWrap .contactInfo:nth-child(2) { margin-left:3.0rem; }
.sub_footer .contactInfoWrap .contactInfo h3 { font-size:2.2rem; font-weight:700; color:#fff; }
.sub_footer .contactInfoWrap .contactInfo h3:after { content:''; display:block; width:3.0rem; height:2px; background:rgbA(255,255,255,0.3); margin:1.5rem 0; }
.sub_footer .contactInfoWrap .contactInfo .infoText { font-size:1.5rem; line-height:3.0rem; color:rgba(255,255,255,0.7); font-weight:300; }
.sub_footer .contactInfoWrap .contactInfo .infoText a { color:rgba(255,255,255,1); }
.sub_footer .contactInfoWrap .contactInfo .infoText .underline { position:relative; }
.sub_footer .contactInfoWrap .contactInfo .infoText .underline:before { position:absolute; bottom:2px; left:0; right:0; width:100%; height:2px; background:var(--blue); content:''; z-index:-1; }
.sub_footer .copyright { padding-top:2.0rem; border-top:1px solid rgba(255,255,255,0.15); }

.inquirySubBtn { position:fixed; bottom:0; right:0; z-index:100;/* transform:rotate(90deg); transform-origin:right top; */ cursor:pointer; }
.inquirySubBtn .inquiryBtn { height:10rem; line-height:10rem; width:auto; position:relative; padding:0 5.0rem; border-radius:10px 0 0 0; }
.inquirySubBtn .inquiryBtn .bg { position:absolute; right:0; top:0; width:0; height:100%; background:#010101; transition:all 0.3s; }
.inquirySubBtn .inquiryBtn .txt { position:relative; font-size:1.8rem; font-weight:600; display:flex; align-items:center; color:#010101;  }
.inquirySubBtn .inquiryBtn .txt:before { width:15rem; height:2px; background:#010101; display:block; content:'';  margin-right:10px; transition:all 0.3s; }
.inquirySubBtn .inquiryBtn:hover .bg { width:100%; }
.inquirySubBtn .inquiryBtn:hover .txt { color:#fff; }
.inquirySubBtn .inquiryBtn:hover .txt:before { background:#fff; }
.inquirySubBtn .inquiryBtn:hover .txt:before {  }



/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) { 	
	.inquiryBtnWrap { right:1.8rem; bottom:1.8rem; }
	
	.inquiryBtnWrap a.inquiryBtn { width:16rem; height:16rem; }
	.inquiryBtnWrap a.inquiryBtn .txt { font-size:2.0rem; letter-spacing:-0.09em; }
	.inquiryBtnWrap a.inquiryBtn .circle:after {  width:3rem; height:3rem; top:0.3rem; left:1.8rem;}
	.inquiryBtnWrap a.inquiryBtn .circle.cc2 { top:-7px; left:7px; }
	.inquiryBtnWrap a.inquiryBtn .circle.cc2:after { width:1.8rem; height:1.8rem; top:0.3rem; left:1.8rem; } 
	
	.siteMap .nav li a { font-size:5.0rem; height:8rem; line-height:8rem;  }

	/*오른쪽 하단 채팅 버튼 추가*/	
	.inquiryBtnWrap a.inquiryBtn.new .txt { font-size:2.2rem; }
	.chatBtnWrap .chatBtn .tit { font-size:2.2rem;  }
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) { 
	.siteMap { flex-wrap:wrap; }	
	.siteMap .left { justify-content:left;  width:100%; padding:10rem 7% 7% 7%; }
	.siteMap .right { width:100%; border-left:0; border-top:1px solid #000; }
	.siteMap .right > div { height:auto; }	
	.siteMap .left .nav { padding:0; }

	/* 퀵메뉴 서브페이지 */
	.bottomFixedBtns.sub { height:60px; right:0; left:0; bottom:0; width:100%; flex-wrap:nowrap; transform:translate(0, 100%); flex-direction:row; display:flex;  }
	.bottomFixedBtns.sub.active { bottom:0; left:0; right:0; transition:all 0.6s; transform:translate(0, 0);  }
	.bottomFixedBtns.sub .online,
	.bottomFixedBtns.sub .chat, 	
	.bottomFixedBtns.sub .contactN { width:calc(100%/3 - 80px/3); height:60px; gap:5px; font-size:14px; }
	.bottomFixedBtns.sub .moveTop  { width:80px; height:60px; } 
	.bottomFixedBtns.sub .online .icon, 
	.bottomFixedBtns.sub .contactN .icon { width:20px; }	
	.bottomFixedBtns.sub .chat .iconImg { width:26px; }
}


/* ================================== Mobile css ================================== */

@media all and (max-width: 767px) {
	.headerWrap.sub .quickMenu { /*display:none;*/ }
	.navBtnWrap.active ~ .quickMenu { /*display:block !important;*/ }
	
	.siteMap .nav li a { font-size:4.5rem; height:7rem; line-height:7rem;  }

	.quickMenu.hover .quickBtn a .text {width:150px; }
	.quickMenu .quickBtn a:hover .text { width:150px; }
	
	.inquiryBtnWrap a.inquiryBtn { width:15rem; height:15rem; }
	.inquiryBtnWrap a.inquiryBtn .txt { font-size:2.0rem; letter-spacing:-0.09em; w }
	.inquiryBtnWrap a.inquiryBtn .circle:after {  width:3rem; height:3rem; top:0.3rem; left:1.8rem;}
	.inquiryBtnWrap a.inquiryBtn .circle.cc2 { top:-7px; left:7px; }
	.inquiryBtnWrap a.inquiryBtn .circle.cc2:after { width:1.8rem; height:1.8rem; top:0.3rem; left:1.8rem; } 

	/* 20240415 퀵메뉴 수정 */
	.bottomFixedBtns { display:none; }
	.moveTop.mobile { display:block; position:fixed; bottom:180px; right:2.8rem; opacity:0; transition:all 0.5s; width:8rem; line-height:40px; height:40px; text-align:center; font-size:14px; font-weight:500; background:rgb(0,0,0,0.5);
		 color:#fff; border:0; border-radius:10px;  }
	.moveTop.mobile.show { opacity:1; bottom:205px; transition:all 0.5s; }

	.bottomFixedBtns.sub { display:flex; }

}

@media all and (max-width: 540px) {
	/* header */
	.headerWrap { height:7rem;  }
	.headerWrap .inner { height:7rem; }
	.headerWrap h1.logo a { /*width:15.0rem; height:3.6rem;*/ width:22rem; height:3.4rem; }
	.navBtnWrap .navBtn { width:42px; height:42px; padding:1.2rem 0; }
	.navBtnWrap .line {width:22px; }
	.navBtnWrap .navBtn .line:nth-child(2) { width:11px; }
	.navBtnWrap.active .navBtn .line { width:22px; }

	.siteMap .nav li a { font-size:3.1rem; height:5rem; line-height:5rem; }
	.siteMap .left { padding:80px 5% 30px; }
	.siteMap .right > div { padding:30px 5%; }
	.siteMap .right { padding-bottom:80px  }
	.siteMap .right .box h2 { margin-bottom:1.5rem; font-size:1.8rem; }
	.siteMap .right .box .info p { line-height:1.5; }
	.siteMap .left .nav { padding:0; }
	
	.quickMenu { width:42px; top:9rem; }
	.quickMenu .quickBtn + .quickBtn { margin-top:3px; }	
	
	.inquiryBtnWrap a.inquiryBtn {}
	.inquiryBtnWrap a.inquiryBtn .txt { font-size:1.5rem; }
	.inquiryBtnWrap a.inquiryBtn .circle:after {  width:3rem; height:3rem; top:0.3rem; left:1.8rem;}
	.inquiryBtnWrap a.inquiryBtn .circle.cc1 { border:1px solid #000;}
	.inquiryBtnWrap a.inquiryBtn .circle.cc2 { top:-10px; left:10px; }
	.inquiryBtnWrap a.inquiryBtn .circle.cc2:after { width:1.8rem; height:1.8rem; top:0.3rem; left:1.8rem; top:-1rem; left:0; } 	
	.headerWrap.scroll .inquiryBtnWrap a.inquiryBtn .circle.cc1,
	.navBtnWrap.active ~ .inquiryBtnWrap a.inquiryBtn .circle.cc1 { border:1px solid #000;} 

	/* footer */
	.sub_footer .contactInfoWrap { flex-direction:column; }
	.sub_footer .contactInfoWrap .contactInfo { text-align:left; }
	.sub_footer .contactInfoWrap .contactInfo:nth-child(2) { margin-left:0rem; margin-top:3rem; }
	.sub_footer .contactInfoWrap .contactInfo h3 { font-size:1.8rem; }
	.sub_footer .contactInfoWrap .contactInfo h3:after { width:3.0rem; height:1px; margin:1rem 0; }
	.sub_footer .contactInfoWrap .contactInfo .infoText { font-size:1.5rem; line-height:2.2rem; }

	/*오른쪽 하단 채팅 버튼 추가*/
	.inquiryBtnWrap a.inquiryBtn.new {  width:10rem; height:10rem; margin-bottom:0.5rem; }	
	.inquiryBtnWrap a.inquiryBtn.new .txt { font-size:1.6rem; }
	.inquiryBtnWrap a.inquiryBtn.new .circle.cc2 { display:none; }
	.chatBtnWrap { width:10rem; height:10rem;} 
	.chatBtnWrap .chatBtn .tit { font-size:1.6rem;} 
	.chatBtnWrap .chatBtn .iconImg { width:30px; height:23px; gap:3px; padding-bottom:3px; }
	.chatBtnWrap .chatBtn .iconImg .dot { width:3px; height:3px; }
	.chatBtnWrap .chatBtn .text { display:none; }

	/* 퀵메뉴 서브페이지 */
	.bottomFixedBtns.sub {   }
	.bottomFixedBtns.sub.active {   }
	.bottomFixedBtns.sub .online,
	.bottomFixedBtns.sub .chat, 	
	.bottomFixedBtns.sub .contactN { width:calc(100%/3 - 60px/3); font-size:12px; }
	.bottomFixedBtns.sub .moveTop  { width:60px; font-size:12px;  } 
	.bottomFixedBtns.sub .online .icon, 
	.bottomFixedBtns.sub .contactN .icon { width:20px; }	
	.bottomFixedBtns.sub .contactN a { font-size:12px; }
	.bottomFixedBtns.sub .chat .iconImg { width:26px; }
	
}
@charset "UTF-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * Version - 3.7.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2019 Daniel Eden
 */

@-webkit-keyframes bounce {

    0%,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

@keyframes bounce {

    0%,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom
}

@-webkit-keyframes flash {

    0%,
    50%,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

@keyframes flash {

    0%,
    50%,
    to {
        opacity: 1
    }

    25%,
    75% {
        opacity: 0
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }

    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }

    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

@-webkit-keyframes shake {

    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes shake {

    0%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake
}

@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.headShake {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }

    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.swing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    10%,
    20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg)
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg)
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes jello {

    0%,
    11.1%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

@keyframes jello {

    0%,
    11.1%,
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }

    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

.jello {
    -webkit-animation-name: jello;
    animation-name: jello;
    -webkit-transform-origin: center;
    transform-origin: center
}

@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.heartBeat {
    -webkit-animation-name: heartBeat;
    animation-name: heartBeat;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out
}

@-webkit-keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.bounceIn {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInDown {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInDown {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInRight {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }

    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInUp {

    0%,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 3000px, 0);
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    50%,
    55% {
        opacity: 1;
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }
}

.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        -webkit-transform: translate3d(0, 20px, 0);
        transform: translate3d(0, 20px, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeftSmall {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInLeftSmall {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-200px, 0, 0);
        transform: translate3d(-200px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInLeftSmall {
    -webkit-animation-name: fadeInLeftSmall;
    animation-name: fadeInLeftSmall;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpSmall {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 30%, 0);
        transform: translate3d(0, 30%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUpSmall {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 30%, 0);
        transform: translate3d(0, 30%, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInUpSmall {
    -webkit-animation-name: fadeInUpSmall;
    animation-name: fadeInUpSmall;
}

@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 2000px, 0);
        transform: translate3d(0, 2000px, 0)
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(-2000px, 0, 0);
        transform: translate3d(-2000px, 0, 0)
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0)
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(0, -2000px, 0);
        transform: translate3d(0, -2000px, 0)
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
        transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    40% {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    50% {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    80% {
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
        transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    to {
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    -webkit-animation-name: flip;
    animation-name: flip
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-20deg);
        transform: perspective(400px) rotateY(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(-20deg);
        transform: perspective(400px) rotateY(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }

    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg)
    }

    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.flipOutX {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotateY(-15deg);
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }

    30% {
        -webkit-transform: perspective(400px) rotateY(-15deg);
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1
    }

    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

.flipOutY {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }

    60% {
        -webkit-transform: skewX(20deg);
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg)
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedOut {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

@keyframes lightSpeedOut {
    0% {
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate(-200deg);
        transform: rotate(-200deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft
}

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes rotateInDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight
}

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft
}

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

@keyframes rotateInUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        opacity: 0
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight
}

@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0
    }
}

@keyframes rotateOut {
    0% {
        -webkit-transform-origin: center;
        transform-origin: center;
        opacity: 1
    }

    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        opacity: 0
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut
}

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        opacity: 0
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft
}

@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0
    }
}

@keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight
}

@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0
    }
}

@keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        opacity: 0
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft
}

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

@keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        opacity: 0
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,
    60% {
        -webkit-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,
    80% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

@keyframes hinge {
    0% {
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    20%,
    60% {
        -webkit-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    40%,
    80% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        opacity: 1
    }

    to {
        -webkit-transform: translate3d(0, 700px, 0);
        transform: translate3d(0, 700px, 0);
        opacity: 0
    }
}

.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-name: hinge;
    animation-name: hinge
}

@-webkit-keyframes jackInTheBox {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) rotate(30deg);
        transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes jackInTheBox {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) rotate(30deg);
        transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox
}

@-webkit-keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
        transform: translate3d(-100%, 0, 0) rotate(-120deg)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
        transform: translate3d(-100%, 0, 0) rotate(-120deg)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}

@-webkit-keyframes rollOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
        transform: translate3d(100%, 0, 0) rotate(120deg)
    }
}

@keyframes rollOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
        transform: translate3d(100%, 0, 0) rotate(120deg)
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown
}

@-webkit-keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft
}

@-webkit-keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInRight {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight
}

@-webkit-keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut
}

@-webkit-keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown
}

@-webkit-keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center
    }
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        transform-origin: left center
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft
}

@-webkit-keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center
    }
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        transform-origin: right center
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight
}

@-webkit-keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp
}

@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes slideOutDown {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown
}

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes slideOutLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0)
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0)
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes slideOutUp {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s
}

.animated.fast {
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

.animated.faster {
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

.animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s
}

@media (prefers-reduced-motion:reduce),
(print) {
    .animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-transition-duration: 1ms !important;
        transition-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important
    }
}.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: transparent;
  border-radius: 0px;
  border-bottom: solid 2px #171818;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 500;
  height: 5.0rem;
  line-height: 5.0rem;
  outline: none;
  padding-left: 1.4rem;
  padding-right: 3.0rem;
  position: relative;
  text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
  width: auto; }
  .nice-select:hover {
    /*border-color: #dbdbdb;*/ }
  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color:var(--red); }
	
  .nice-select:after {
    border-bottom: 2px solid #171818;
    border-right: 2px solid #171818;
    content: '';
    display: block;
    margin-top: -6px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
        -ms-transform-origin: 66% 66%;
            transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 8px;	
    height: 8px; }
  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
            transform: rotate(-135deg); }	
 
  
  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; }
    .nice-select.disabled:after {
      border-color: #cccccc; }
  .nice-select.wide {
    width: 100%; }
    .nice-select.wide .list {
      left: 0 !important;
      right: 0 !important; }
  .nice-select.right {
    float: right; }
    .nice-select.right .list {
      left: auto;
      right: 0; }
  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; }
    .nice-select.small:after {
      height: 4px;
      width: 4px; }
    .nice-select.small .option {
      line-height: 34px;
      min-height: 34px; }
	  
	.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
        -ms-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0); }
				  
  .nice-select .list {
    background-color: #fff;
    border-radius: 0px;
    /*box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);*/
	border:1px solid var(--red);
	border-width:2px 1px 2px 1px;
    box-sizing: border-box;
    margin-top: 0px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
        -ms-transform: scale(0.75) translateY(-21px);
            transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; }
  
  .nice-select .list:hover .option:not(:hover) {
      background-color: transparent !important; }
  
  .nice-select .option {
    cursor: pointer;
    font-weight: 500;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s; }
  
  .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
      /*background-color: #f6f6f6;*/ color:var(--red); }
  
  .nice-select .option.selected {
      /*font-weight: bold;*/ }
  
  .nice-select .option.disabled {
      background-color: transparent;
      color: #999;
      cursor: default; }

.no-csspointerevents .nice-select .list {
  display: none; }

.no-csspointerevents .nice-select.open .list {
  display: block; }
@charset "utf-8";
section { position:relative; z-index:1; overflow:hidden; }
.wrapper { width:100%; height:100vh; overflow: auto;}

/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////  공통   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.moreBtn {  position:relative;  }
.moreBtn span { font-size:2.0rem; font-weight:500; z-index:3; position:relative; height:5.0rem; line-height:5.0rem; color:#333; transition:all 0.3s; float:left; }
.moreBtn:hover span { color:#fff; transition:all 0.3s; }
.moreBtn .arw { background:url(../images/common/btn_arrow_bk.png)right center no-repeat; transition:all 0.3s; display:inline-block; width:30px; margin-left:5px; transition-delay:0.2s; transform:translateX(0); }
.moreBtn:hover .arw { background:url(../images/common/btn_arrow.png)right center no-repeat; transform:translateX(15px); transition:all 0.3s; transition-delay:0.3s; }
.moreBtn:before,
.moreBtn:after { width:5.0rem; height:5.0rem; border-radius:2.5rem; content:''; left:-20px; top:50%; transform:translateY(-50%); display:block; position:absolute; }
.moreBtn:before { background:var(--blue); z-index:1;  transition:all 0.4s ease-in-out;}
.moreBtn:after { background:rgba(0,0,0,0.9); z-index:2; visibility:hidden; transition:all 0.3s ease-in-out; opacity:0; }
.moreBtn:hover:before  { width:calc(100% + 50px); transition:all 0.4s ease-in-out; }
.moreBtn:hover:after {  visibility:visible; width:calc(100% + 43px); transition:all 0.3s ease-in-out; transition-delay:0.15s; opacity:1; }
.moreBtn.white span { color:#fff; }
.moreBtn.white .arw  { background:url(../images/common/btn_arrow.png)right center no-repeat; }
.moreBtn.white:before { background:var(--purple); }
.moreBtn.white:after { background:rgba(255,255,255,0.9);}
.moreBtn.white:hover span { color:#000; }
.moreBtn.white:hover .arw { background:url(../images/common/btn_arrow_bk.png)right center no-repeat; }
.moreBtn.purple:before { background:var(--purple); opacity:0.7; }
.moreBtn.purple:hover:before { background:var(--purple); opacity:1; }

/* ================================== Mobile css ================================== */
@media all and (max-width: 540px) {
	.moreBtn span { font-size:1.7rem; font-weight:700; }
}


/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// 인트로   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.enterMovie { position:fixed; top:0; left:0; width:100%; height:100vh; z-index:10000; display:flex; align-items:center; justify-content:center; }
.enterMovie .emBg01 { position:fixed; top:0; left:0; width:100%; height:100vh; background:#000; z-index:-1; opacity:1; }
.enterMovie .logoTextWrap { z-index:2; position:relative; width:100%; text-align:center; }
.enterMovie .logoTextWrap .logoText { display:flex; justify-content:center; }
.enterMovie .logoTextWrap .logoText .logoT { letter-spacing:0; display:inline-block; transition:all 0.5s; display:flex; justify-content:center; }
.enterMovie .logoTextWrap .logoText .logoT span { color:#fff; font-weight:700;  opacity:0; transform:translateY(10vh); z-index:2; transition:all 0.2s; font-size:3.5rem; padding:0 1rem; display:inline-block; }
.enterMovie .logoTextWrap .logoText .logoT span.on { opacity:1; transform:translateY(0);  }
.enterMovie .logoTextWrap .logoText .logoT span:nth-child(1) { transition-delay: 0.1s; }
.enterMovie .logoTextWrap .logoText .logoT span:nth-child(2) { transition-delay: 0.2s; }
.enterMovie .logoTextWrap .logoText .logoT span:nth-child(3) { transition-delay: 0.3s; }
.enterMovie .logoTextWrap .logoText .logoT span:nth-child(4) { transition-delay: 0.4s; }
.enterMovie .logoTextWrap .logoText .logoT span:nth-child(5) { transition-delay: 0.5s; }
.enterMovie .logoTextWrap .logoText .logoT span:nth-child(6) { transition-delay: 0.6s; }
.enterMovie .logoTextWrap .logoText .logoT.off { letter-spacing:4vw; opacity:0; transition-delay:0.2s; }
.enterMovie .cline { position:absolute; top:50%; left:0; width:100%; height:1px; background:#fff; transform:scaleX(0); opacity:0.5; z-index:2; }
.enterMovie.off { display:none;  }

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 540px) {
	.enterMovie .logoTextWrap .logoText .logoT span { font-size:2.5rem; padding:0 0.5rem; }
}

/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// 메인비주얼   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.visualWrap { position:relative; width:100%; height:100vh; padding:15vh 7vw; margin:auto; border-radius:0; overflow:hidden; background:#fff; padding:0; box-sizing:border-box; }
.visualWrap .mark { left:7vw; top:60vh; z-index:2; animation:30s infinite updown; position:absolute; opacity:0.5; } 
.visualWrap .mark img { max-width:100%; filter:blur(10px); -webkit-filter:blur(10px); opacity:0; transform:translateX(150px); }
.visualWrap .mainText { position:absolute; top:50%; z-index:3; left:10vw; width:100%; /*text-align:center;*/  transform:translateY(-50%); }
.visualWrap .mainText .mt { font-size:7.0rem; line-height:7.0rem; font-weight:700; position:relative; color:#fff; margin-top:0.5rem; letter-spacing:0.05em; display:inline-block; width:100%; padding:0 0.5rem; opacity:0; overflow:hidden; text-transform: uppercase; }
.visualWrap .mainText .mt span.en { opacity:1; position:relative; display:inline-block; }
.visualWrap .mainText .mt span.en .line { position:absolute; bottom:10px; left:0; width:0; height:2px; display:inline-block; background:#fff; z-index:-1; background:linear-gradient(to right, #3f19f9 0%, #1ac3ce 100%); }
.visualWrap .mainText .kr { font-size:2.5rem; line-height:3.2rem; height:3.2rem; font-weight:200; margin-top:20px; opacity:0; }
.visualWrap .mainText .kr span strong { font-weight:600; }
.visualWrap .mainText .kr span { color:#fff; /*background: linear-gradient(to right, #907bf7 0%, #54f1fb 80%);  -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/  }
.visualWrap .mainText .kr p { position:relative; display:inline-block; }
.visualWrap .mainText .kr p .bg { position:absolute; bottom:0; left:0; width:0; height:100%; display:inline-block; background:#fff; z-index:-1; background:linear-gradient(to right, #3f19f9 0%, #1ac3ce 100%); }
.visualWrap .mainText .kr.large { display:block; }
.visualWrap .mainText .kr.mid { display:none; }
.visualWrap .object { opacity:0.05; }

.visualWrap .mainText .tx01 { filter:blur(0px); -webkit-filter: blur(0px); transform:translateX(100px); }
.visualWrap .mainText .tx02 { filter:blur(0px); -webkit-filter: blur(0px); transform:translateX(-100px); }
.visualWrap .mainText .tx03 { filter:blur(0px); -webkit-filter: blur(0px); transform:translateY(100px); }

.visualWrap .visualImgWrap { position:relative; width:100%; overflow:hidden; border-radius:3rem; border-radius:0rem; height:100%;
background:linear-gradient(to right, #42b3c0 0%, #012b8e 20%, #000 50%, #012b8e 80%, #42b3c0 100%);
background-size:400% 400%;
box-shadow: inset 0px 0px 300px rgba(0,0,0,1), inset -100px -100px 200px rgba(122,3,184,0.4);
/*animation:gradient 10s ease forwards infinite, shadow 3s linear infinite;*/ }
.visualWrap .visualImgWrap .visualObj { }
.visualWrap .visualImgWrap .visualObj img { position:absolute; top:0; right:0; opacity:0; width:1300px;  }
.visualWrap .visualImgWrap:after { display:block; content:''; position:absolute; top:0; left:0; width:100%; height:100%;  background:rgba(0,0,0,0.5);}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 00% 50%;
    }
}
@keyframes shadow {
    50% {
        box-shadow: inset 0px 0px 300px rgba(156,99,200,0.8), 
		inset -100px -100px 200px rgba(11,184,3,0.5);			
    }
}


@keyframes updown {
  0% {
    transform:translateY(0);
	scale:1;
  }
  30% {
    transform:translateY(-7vmin);
	scale:1.05;
  }
  60% {
    transform:translateY(1vmin);
	scale:1;			
  }
  80% {
    transform:translateY(-4vmin);
	scale:1.03;
  }
  100% {
    transform:translateY(0);			
	scale:1;
  }
}

/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) {
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
}

/*세로*/
@media all and (max-width: 820px) {
	.visualWrap .mark { filter:blur(5px); -webkit-filter: blur(5px); }
	.visualWrap .mainText { left:50%; transform:translateX(-50%); top:36%; }
	.visualWrap .mainText .kr p { padding:0 5px; margin-top:10px; }
	.visualWrap .mainText .kr.large { display:none; }
	.visualWrap .mainText .kr.mid { display:block;  }
	.visualWrap .mainText .mt { font-size:6.0rem; line-height:6.0rem; text-align:center;}
	.visualWrap .mainText .kr { font-size:2.0rem; line-height:3.0rem; height:3.0rem; text-align:center; }
}


/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {	
	.visualWrap .visualImgWrap .visualObj { display:none; }
	.visualWrap .mark { display:none; }
}

@media all and (max-width: 540px) {		
	.visualWrap .mainText .kr.mid { display:none;  }	
	.visualWrap .mainText { top:40%; }
	.visualWrap .mainText .mt { font-size:4.0rem; line-height:4.0rem; margin-top:0; }	
	.visualWrap .mainText .kr { font-size:1.7rem; line-height:2.5rem; height:2.5rem; margin-top:10px; }
	.visualWrap .mainText .kr.mid p { margin-top:5px; }
	
}

/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// 철학   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.philosophy { width:100%; display:flex; justify-content:center; height:100vh; align-items:center; text-align:center; background:#fff; overflow:hidden; }

.philosophy .pTextDiv { z-index:2; position:relative; width:100%; max-width:1600px; margin:0 auto; height:auto; display:flex; justify-content:space-between; align-items:center; padding:0 70px; mix-blend-mode:difference; }
.philosophy .pTextDiv .pTextWrapEn { position:relative; font-weight:700; overflow:visible; }
.philosophy .pTextDiv .pTextWrapEn .pten { width:100%; position:relative; }
.philosophy .pTextDiv .pTextWrapEn .pten .backText {font-size:16rem; line-height:16rem; height:16rem; letter-spacing:0.02em; color:#fff; overflow:hidden; display:flex; transform:translateX(150px);}
.philosophy .pTextDiv .pTextWrapEn .pten .backText span { transform:translateY(110%) rotate(25deg); }
.philosophy .pTextDiv .pTextWrapEn .pten .textSvg { width:100%; display:block; height:18rem; stroke-dasharray:1500; stroke-dashoffset:1500; /*stroke:#acf62b;*/ stroke:#fff; stroke-width:1px; position:relative; z-index:2;  fill:transparent; mix-blend-mode:normal;  }
.philosophy .pTextDiv .pTextWrapEn .pten .textSvg text { font-size:16rem; line-height:16rem; height:16rem; letter-spacing:0.02em;}
.philosophy .pTextDiv .pTextWrapEn .pten.pe01 { transform: translateX(120px); }
.philosophy .pTextDiv .pTextWrapEn .pten.pe02 {  }
.philosophy .pTextDiv .pTextWrapEn .pten.pe03 { transform: translateX(80px); }
.philosophy .pTextDiv .pTextWrap {  }
.philosophy .pTextDiv .pTextWrap .pText { color:#fff; position:relative; z-index:1; text-align:left; font-size:3.0rem; line-height:4.0rem; height:3.5rem; overflow:hidden; }
.philosophy .pTextDiv .pTextWrap .pText strong { font-weight:600; position:relative; display:inline-block; }
.philosophy .pTextDiv .pTextWrap .pText + .pText { margin-top:15px; }
.philosophy .pTextDiv .pTextWrap .pText p { transform: translateY(105%); }
.philosophy .pTextDiv .pTextWrap .pText .line { display:block; width:0; height:100%; background:#fff; position:absolute; top:0; left:0; z-index:-1; background:linear-gradient(to right, #acf62b, #fb5454);}

.philosophy .phi_bg { position:absolute; z-index:-1; width:100%; height:100%; opacity:0;  left:0; top:0; background:#fff;  }
.philosophy .phi_bg_0 {  position:absolute; z-index:-3; width:100%; height:100%; opacity:1;  transform:translateY(100%); left:0; top:0; background:#4d2bf6;  }
.philosophy .phi_bg_00 {  position:absolute; z-index:-1; width:100%; height:100%; opacity:1;  transform:translateY(100%); left:0; top:0; background:#010101; }
.philosophy .phi_bg_1 { position:absolute; top:0; left:100%; width:100%; height:100vh; background:#010101; z-index:0; clip-path: ellipse(100% 100% at 100% 50%)   }
.philosophy .phi_bg_0 .bgTop { position:absolute; top:0; left:0; width:0; width:100%; height:0; background:#4d2bf6; transform: translateY(-50% ); clip-path: ellipse(90% 50% at 30% 50%); }
.philosophy .phi_bg_00 .bgTop { position:absolute; top:0; left:0; width:0; width:100%; height:0; background:#010101; transform: translateY(-50% ); clip-path: ellipse(70% 50% at 65% 50%); }

.flowTxtWrap { position:absolute; top:100%; left:0; z-index:4; width:100%; mix-blend-mode:difference;}
.flowTxtWrap .flowTxt { position:relative; width:100%; max-width:100%; overflow-x:hidden; height:0; padding-bottom:18.75%; }
.flowTxtWrap .flowTxt .track {position:absolute; will-change:transform; animation:marquee 30s linear infinite; white-space:nowrap; width:200%;  }
.flowTxtWrap .flowTxt .track img { display:inline-block; margin:0; width:50%; }

.philosophy .mark { left:7vw; z-index:2; animation:30s infinite updown; position:absolute; top:0 !important; opacity:1; mix-blend-mode:difference;} 
.philosophy .mark img { max-width:100%; filter:blur(0px); -webkit-filter: blur(0px); /*opacity:0;*/ transform:translateY(-100%); }

.bgText { position:absolute; width:100%; top:50%; left:50%; transform:translate(-50%, -50%); mix-blend-mode:difference; z-index:2; overflow:hidden; }
.bgText .textSvgWarp { width:70%; }
.bgText .textSvgWarp:nth-child(1) { margin-left:20%; width:45%; }
.bgText .textSvgWarp:nth-child(2) { width:54.5%; }
.bgText .textSvgWarp:nth-child(3) { margin-left:10%; width:60.5%;  }
.bgText .textSvgWarp .textSvg { stroke-dasharray:1500; stroke-dashoffset:1320; /*stroke:#4d2bf6;*/ stroke:#fff; stroke-width:1px; fill:transparent; opacity:0.18; }

.philosophy .vText { position:absolute; width:100%; height:100%; text-align:center; display:flex; align-items:center; justify-content:center; top:0; left:100%; z-index:2; }
.philosophy .vText .en { color:#fff; font-size:10rem; line-height:1; letter-spacing:0; font-weight:400; }
.philosophy .vText .en .en02 { font-size:13rem; font-weight:400; padding:2rem 0; }
.philosophy .vText .en .en02 br { display:none; }
.philosophy .vText .en > span { display:block; transform:translateX(50vw); }
.philosophy .vText .kr { font-size:2.8rem; font-weight:200; line-height:4.4rem; height:4rem;  position:relative; opacity:0; display:inline-block; padding:0 1.5rem; margin:3rem auto; color:#fff; }
.philosophy .vText .kr strong { font-weight:700; }
.philosophy .vText .kr .bg { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:0; height:100%; display:inline-block; background:#fff; z-index:-1; 
	background:linear-gradient(to right, #3f19f9 0%, #1ac3ce 100%);  }
.philosophy .vText .kr.pc { display:inline-block; }
.philosophy .vText .kr.mobile { display:none; }

.philosophy .vText .dots { display:flex; justify-content:center;}
.philosophy .vText .dots .dot { display:inline-block; width:30px; height:30px; background:rgba(255,255,255,1); margin:15px; }
.philosophy .vText .dots .dot.d01 { animation:d01 0.6s ease alternate infinite; }
.philosophy .vText .dots .dot.d03 { animation:d03 0.4s ease alternate infinite;  }
.philosophy .vText .dots .dot.d02 { animation:d02 0.6s ease alternate infinite;  }

@keyframes d01 {
	0% { clip-path:polygon(50% 0%, 0% 100%, 100% 100%); background:var(--blue); }
	50% { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background:var(--purple); }
	100% { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); background:#fff;  }
}
@keyframes d03 {
	0% {  clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); background:#fff; }
	50% { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); background:var(--blue); }
	100% { clip-path: circle(50% at 50% 50%);  background:var(--purple); }
}
@keyframes d02 {
	0% { clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%); background:var(--purple); }
	50% { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); background:#fff; }
	100% {clip-path:polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); background:var(--blue); }
}
@keyframes stroke {
	0% { stroke-dashoffset: 1500;}
	100% {stroke-dashoffset: 0; }
}
@keyframes wave{
	0%{transform: translate(-90px , 0%)}
	100%{transform: translate(85px , 0%)}
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) {
	.philosophy .pTextDiv { padding:0; }
	.philosophy .pTextDiv .pTextWrap { width:450px; flex-shrink:0;  }
	.philosophy .pTextDiv .pTextWrap .pText { font-size:2.9rem; }
	.philosophy .pTextDiv .pTextWrapEn .pten .backText { font-size:13rem; line-height:13rem; height:13rem; }	
	.philosophy .vText .en { font-size:9rem;  }
	.philosophy .vText .en .en02 { font-size:11rem; padding:1.5rem 0; }
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 820px) {
	.philosophy { display:block; height:auto; overflow-y:visible; }
	
	.philosophy .phi_bg,
	.philosophy .phi_bg_0,
	.philosophy .phi_bg_00 { display:none; }
	
	.philosophy .pTextDiv { flex-wrap:wrap; padding:20vh 30px; }
	.philosophy .pTextDiv .pTextWrapEn { width:100%; }
	.philosophy .pTextDiv .pTextWrap { width:100%; }
	.philosophy .pTextDiv .pTextWrapEn .pten .backText { transform:translateX(0px); justify-content:center; font-size:10rem; line-height:10rem; height:10rem; }
	.philosophy .pTextDiv .pTextWrapEn .pten .backText span { transform:translateY(110%) rotate(0deg); }
	.philosophy .pTextDiv .pTextWrapEn .pten.pe01 { transform:translateX(0px); }
	.philosophy .pTextDiv .pTextWrapEn .pten.pe02 {  transform:translateX(0px); }
	.philosophy .pTextDiv .pTextWrapEn .pten.pe03 { transform:translateX(0px); }	
	.philosophy .pTextDiv .pTextWrap { margin-top:10vh; }
	.philosophy .pTextDiv .pTextWrap .pText { text-align:center; }
	
	.bgText {display:none; }
	
	.philosophy .vText { top:0; left:0; z-index:2; position:relative; background:#010101; height:auto; padding:15vh 30px 25vh; }
	.philosophy .vText .en { font-size:8rem; line-height:1.2; height:auto; display:block; }
	.philosophy .vText .en > span { transform: translate(0, 0); opacity:0; }	
	.philosophy .vText .en .en01 { transform:translateX(-20vw );  }
	.philosophy .vText .en .en02 { transform:translateX(15vw ); }
	.philosophy .vText .en .en03 { transform:translateX( -35vw); }	
	.philosophy .vText .en .en02 { font-size:9rem; padding:0; }
	.philosophy .vText .en .en02 br { /*display:inline;*/ }	
	.philosophy .vText .kr .bg {opacity:1; width:0; }	
	.philosophy .phi_bg_1 { display:none; }
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {	
	.philosophy .pTextBox { margin-top:20vh; }
	.philosophy .pTextBox .pTextWrapEn {  height:15vw; margin-bottom:10vw; }
	.philosophy .pTextBox .pTextWrapEn .pten { font-size:14.5vw;  }
	.philosophy .pTextBox .pTextWrap { font-size:4vw; line-height:7vw; }
}

@media all and (max-width: 540px) {	
	.philosophy .pTextDiv .pTextWrapEn .pten .backText {font-size:16vw; line-height:16vw; height:16vw; }	
	.philosophy .pTextDiv .pTextWrap .pText { font-size:1.8rem; line-height:3.0rem; height:2.6rem; overflow:hidden; font-weight:400; }
	.philosophy .pTextDiv .pTextWrap .pText + .pText { margin-top:10px; }
	.philosophy .vText .en { font-size:4.6rem; }
	.philosophy .vText .en .en02 { font-size:6.0rem; }
	.philosophy .vText .kr { height:auto; line-height:2.6rem; }
	.philosophy .vText .kr > span { font-size:1.8rem; line-height:2.6rem; height:2.3rem; position:relative; padding:0 1.5rem; }
	.philosophy .vText .dots .dot { width:20px; height:20px; margin:10px; }
	.philosophy .vText .kr.pc { display:none; }
	.philosophy .vText .kr.mobile { display:inline-block; }
}


/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// 포트폴리오   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.portfolio { padding:0; background:#fff; height:auto; overflow:hidden; position:relative; }

.portfolio .pfTit { width:100%; text-align:center;  background-color:#fff; top:0; left:0;  height:100vh; position:relative; }
.portfolio .title { font-size:8vw; font-weight:700; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.portfolio .title .tit { display:flex; justify-content:center; color:#000; }
.portfolio .title .tWrap { overflow:hidden; z-index:3; line-height:1.2; letter-spacing:0.01em; margin:0; padding:0; }
.portfolio .title .tWrap span { text-transform:uppercase; transform:translateY(110%) rotate(30deg); }

.portfolio .titBg { position:absolute;  width:100%; height:100%; opacity:1; left:0; top:0; }
.portfolio .bg_0 {  z-index:-3; background:#2ffcd8; transform:translateY(100%); }
.portfolio .bg_00  {  z-index:-2; background:#101010; transform:translateY(100%); }
.portfolio .bg_1 { z-index:-1; background:#101010; opacity:0;  }
.portfolio .titBg .bgBtm { position:absolute; top:0; left:0; width:0; width:100%; height:0; transform: translateY(-50% ); }
.portfolio .bg_0 .bgBtm { background:#2ffcd8; clip-path: ellipse(80% 50% at 60% 50%); }
.portfolio .bg_00 .bgBtm  { background:#101010; clip-path: ellipse(85% 50% at 35% 50%); }

.portfolio .mark { left:7vw; z-index:2; animation:30s infinite updown; position:absolute; top:0; opacity:0.2; mix-blend-mode:difference; } 
.portfolio .mark img { max-width:100%; /*filter:blur(5px); -webkit-filter: blur(5px);*/ transform:translateY(-100%); }

.portfolio .lineWrap { z-index:2; }
.portfolio .lineWrap .line { position:absolute; width:1px; height:0; background:rgba(255,255,255,0.1); top:0; opacity:1; }
.portfolio .lineWrap .line.line1 { left:20%; }
.portfolio .lineWrap .line.line2 { left:40%; }
.portfolio .lineWrap .line.line3 { left:60%; }
.portfolio .lineWrap .line.line4 { left:80%; }

.portfolio .pfListWrap { width:100%; z-index:2; position:absolute; top:100vh; }
.portfolio .pfListWrap .pfList { display:flex; justify-content:space-between; flex-wrap:wrap; height:auto; position:relative; width:100%; max-width:1400px; padding:0 5%; margin:0 auto; }
.portfolio .pfListWrap .pfList li { width:42%; position:relative;  margin-top:30rem; }
.portfolio .pfListWrap .pfList li:nth-child(1),
.portfolio .pfListWrap .pfList li:nth-child(2) { margin-top:0; }
.portfolio .pfListWrap .pfList li:nth-child(2n) { transform:translateY(30%);  }
.portfolio .pfListWrap .pfList li:nth-child(2n+1) { transform:translateY(-30%);  }
.portfolio .pfListWrap .pfList .pfItem  {width:100%; position:relative; display:block; height:0; padding-bottom:100%; }
.portfolio .pfListWrap .pfList .pfItem .thumb,
.portfolio .pfListWrap .pfList .pfItem .shadow { display:block; width:100%; height:100%; transition:all 0.5s; overflow:hidden; position:absolute;  clip-path:inset(0 0 50% 0);  opacity:0;  }
.portfolio .pfListWrap .pfList .pfItem .thumb { opacity:0; top:0; left:0; }
.portfolio .pfListWrap .pfList .pfItem .shadow { background:var(--purple); top:15px; left:15px; }
.portfolio .pfListWrap .pfList .pfItem.active .thumb,
.portfolio .pfListWrap .pfList .pfItem.active .shadow { transition:all 0.4s none;  clip-path:inset(0 0 0 0); opacity:1;  }
.portfolio .pfListWrap .pfList .pfItem.active .shadow { transition-duration:0.5s; }
.portfolio .pfListWrap .pfList .pfItem.active .thumb { transition-duration:0.7s; opacity:1; }
.portfolio .pfListWrap .pfList .pfItem .thumb .thumbImg { width:100%; height:100%;  }
.portfolio .pfListWrap .pfList .pfItem .thumb .thumbImg img { object-fit:cover; object-position:50% 50%; width:100%; height:100%; max-width:none; }

.portfolio .pfListWrap .pfList .pfItem .pfText { position:absolute; left:5%; bottom:20px; width:90%; color:#fff; z-index:2; }
.portfolio .pfListWrap .pfList .pfItem .pfText > span { display:block; }
.portfolio .pfListWrap .pfList li:nth-child(2n) .pfItem .pfText { text-align:right; }
.portfolio .pfListWrap .pfList .pfItem .pfText .tit { font-size:3.0rem; font-weight:600; transform:translateX(100px); opacity:0; transition:all 0.5s; }
.portfolio .pfListWrap .pfList .pfItem .pfText .desc { font-size:1.8rem; margin-top:1.0rem; opacity:1; transform:translateX(120px); opacity:0; transition:all 0.5s; }
.portfolio .pfListWrap .pfList li:nth-child(2n) .pfItem .pfText .tit { transform:translateX(-100px);  }
.portfolio .pfListWrap .pfList li:nth-child(2n) .pfItem .pfText .desc { transform:translateX(-120px);  }
.portfolio .pfListWrap .pfList .pfItem.active .pfText .tit { transition:all 0.8s;  transition-delay:0.7s; transform:translateX(0px) !important; opacity:1; }
.portfolio .pfListWrap .pfList .pfItem.active .pfText .desc { transition:all 0.6s; transition-delay:1.0s; transform:translateX(0px) !important; opacity:1; }

.portfolio .moreBtnWrap { position:absolute; width:100%; text-align:center; bottom:-5vh; padding-top:5rem; opacity:0; }


/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) {
	.portfolio .pfListWrap .pfList .pfItem .pfText .tit { font-size:2.2rem;  }
	.portfolio .pfListWrap .pfList .pfItem .pfText .desc { font-size:1.6rem; margin-top:0.5rem; }
}
/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
	.portfolio .pfListWrap .pfList li { margin-top:20rem; }
}

@media all and (max-width: 820px) {	
	.portfolio .title .tWrap span { transform:translateY(110%) ; }
	.portfolio .mark { display:none; }	
	.portfolio .lineWrap .line { display:none; }
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.portfolio {  }
	.portfolio .pfTit { height:calc((var(--vh, 1vh) * 100)); }
	.portfolio .title { font-size:10vw; } 		
	
	.portfolio .pfListWrap .pfList li { width:90%; max-width:45rem; margin:5rem auto; }
	.portfolio .pfListWrap .pfList li:nth-child(1),
	.portfolio .pfListWrap .pfList li:nth-child(2) { margin:5rem auto; }
	.portfolio .pfListWrap .pfList li:nth-child(2n) { transform:translateY(0); }
	.portfolio .pfListWrap .pfList li:nth-child(2n + 1) { transform:translateY(0); }
	.portfolio .pfListWrap .pfList li .pfItem { margin-left:-8px; }
	.portfolio .pfListWrap .pfList .pfItem .thumb,
	.portfolio .pfListWrap .pfList .pfItem .shadow { clip-path:inset(0 0 0 0); }
}

@media all and (max-width: 540px) {		
	.portfolio .pfListWrap .pfList .pfItem .pfText .tit { font-size:2.0rem;  transform:translateX(50px); }
	.portfolio .pfListWrap .pfList .pfItem .pfText .desc { font-size:1.4rem; transform:translateX(70px);  }
	.portfolio .pfListWrap .pfList li:nth-child(2n) .pfItem .pfText .tit { transform:translateX(50px);  }
	.portfolio .pfListWrap .pfList li:nth-child(2n) .pfItem .pfText .desc { transform:translateX(70px);  }
	.portfolio .pfListWrap .pfList .pfItem.active .pfText .tit { transition:all 0.5s;  transition-delay:0.3s;  }
	.portfolio .pfListWrap .pfList .pfItem.active .pfText .desc { transition:all 0.3s; transition-delay:0.5s;  }
	.portfolio .pfListWrap .pfList li:nth-child(2n) .pfItem .pfText { text-align:left;}
}


/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// 고객사   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.partners { padding:0; background:var(--purple); height:auto; overflow:hidden; position:relative; background:#fff;}

.partners .ptTit { height:100vh; width:100%; text-align:center; top:0; left:0; z-index:1; }
.partners .title { font-size:8vw; font-weight:700; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.partners .title .tit { display:flex; justify-content:center; color:#000; width:100%; height:9vw; overflow:hidden; }
.partners .title .tWrap { overflow:hidden; z-index:1; height:9vw; line-height:9vw; letter-spacing:0.01em; margin:0; padding:0; }
.partners .title .tWrap span { text-transform:uppercase; transform:translateY(110%) skewY(30deg); }

.partners .ptText { position:absolute; width:100%; height:100%; text-align:center; display:flex; align-items:center; justify-content:center; top:0; left:0; z-index:3; }
.partners .ptText .eng { color:#000; font-size:12rem; line-height:1; letter-spacing:0; font-weight:500; text-transform: uppercase; }
.partners .ptText .eng > span { display:block; opacity:0; line-height:14rem; text-align:left; }
.partners .ptText .eng .eng01 { transform:translateX(-200px);  margin-left:10rem; }
.partners .ptText .eng .eng02 { transform:translateX(50%); margin-left:25rem;  }
.partners .ptText .eng .eng03 { font-weight:700; /*transform:translateY(200px);*/  }
.partners .ptText .kr { line-height:4.2rem; padding:0 1.5rem; margin:3rem auto; position:relative; display:inline-block; }
.partners .ptText .kr .text{ font-size:2.5rem; font-weight:200;  opacity:1; color:#fff; position:relative; opacity:0; }
.partners .ptText .kr .text strong { font-weight:700; }
.partners .ptText .kr .bg { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:0; height:100%; display:inline-block; background:#010101; opacity:1; }

.partners .ptText .dots { display:flex; justify-content:center;}
.partners .ptText .dots .dot { display:inline-block; width:30px; height:30px; background:rgba(255,255,255,1); margin:15px; }
.partners .ptText .dots .dot.d01 { animation:d01 0.6s ease alternate infinite; }
.partners .ptText .dots .dot.d03 { animation:d03 0.4s ease alternate infinite;  }
.partners .ptText .dots .dot.d02 { animation:d02 0.6s ease alternate infinite;  }

.partners .titBg { position:absolute;  width:100%; height:100%; opacity:1; left:0; top:0; }
.partners .bg_0 {  z-index:-3; transform:translateY(100%); background:var(--purple); }
.partners .bg_00  {  z-index:-2; transform:translateY(100%); background:#171818; }
.partners .bg_1 { z-index:-1; background:#fff; opacity:0;  }
.partners .bg_2 { z-index:-1; background:#171818; opacity:0;  }
.partners .titBg .bgBtm { position:absolute; top:0; left:0; width:0; width:100%; height:0; transform: translateY(-50% ); }
.partners .bg_0 .bgBtm { background:#010101; clip-path: ellipse(80% 50% at 60% 50%); background:var(--purple);  }
.partners .bg_00 .bgBtm  { background:#fff; clip-path: ellipse(85% 50% at 35% 50%); background:#171818; }

.partners .mark { left:7vw; z-index:2; animation:30s infinite updown; position:absolute; top:0; opacity:0.35; mix-blend-mode:difference; } 
.partners .mark img { max-width:100%; /*filter:blur(5px); -webkit-filter: blur(5px);*/ transform:translateY(-100%); }
.partners .partnersListWrap { width:100%; height:100vh; position:absolute; z-index:2; top:0; left:0;  }
.partners .partnersListWrap .partnersListAll { position:absolute; top:50%; left:100%; transform:translateY(-50%);  }
.partners .partnersListWrap .partnersListAll ul { display:flex; flex-flow:column wrap; height:80vh; max-height:520px; align-content:space-between; margin-top:10rem; width:calc(292 * 12px); }
.partners .partnersListWrap .partnersListAll ul li { position:relative; height:25%; text-align:center; flex-wrap:wrap; align-items:center; display:flex; justify-content:center; flex-shrink:0; flex-grow:0; }
.partners .partnersListWrap .partnersListAll ul li img { background:rgba(255,255,255,1); border-radius:10px 0 10px 0; padding:1rem; overflow:hidden; margin:auto 25px;  }

.ptSvgWrap { position:absolute; left:0; bottom:0; width:100%; mix-blend-mode:difference; z-index:2; overflow:hidden; }
.ptSvgWrap .ptSvg.ptS01 { width:31%; }
.ptSvgWrap .ptSvg.ptS02 { width:60%; }
.ptSvgWrap .ptSvg .svgTit { stroke-dasharray:1500; stroke-dashoffset:1400; stroke:#fff; stroke-width:1px; fill:rgba(255,255,255,0.05); opacity:0.2; /*animation:textSvg 2.2s ease-in-out alternate infinite;*/ }
.ptSvgWrap .ptSvg .svgTit.ps01 { }
.ptSvgWrap .ptSvg .svgTit.ps01 { /*animation-delay: 0.1s;*/ }
@keyframes textSvg {
	0% { stroke-dashoffset: 1500; stroke-dashoffset:1350; }
    100% { stroke-dashoffset: 0; }
}
.partners .moreBtnWrap {position:absolute; width:100%; text-align:center; bottom:-5vh; opacity:0; }

/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) {
	.partners .ptText .eng { font-size:11rem; }
	.partners .ptText .eng > span { line-height:12.5rem; }
	
}
/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
	.partners .ptText .eng { font-size:10rem; }
	.partners .ptText .eng > span { line-height:11.5rem; }
}

@media all and (max-width: 820px) {	
	.partnersSec01,	
	.partnersSec02 { position:relative; height:auto; min-height:100vh; }
	.partners .bg_0 { display:none; }
	.partners .bg_00  { transform:translateY(0); opacity:0; background:#ECECEC;  }
	.partners .bg_1 { display:none;  }
	.partners .bg_2 { opacity:1;  }	
	.partners .partnersListWrap {  }
	.partners .partnersListWrap .partnersListAll { width:100%; position:relative; top:100%; left:0;  transform:translateY(0);  }
	.partners .partnersListWrap .partnersListAll .partnerUl { width:100%; position:relative; height:auto; max-height:none; flex-flow:row wrap; margin-bottom:0; margin-top:0rem;  }
	.partners .partnersListWrap .partnersListAll .partnerUl li { width:33.3333%; height:auto;  }
	.partners .partnersListWrap .partnersListAll .partnerUl li img { padding:0.5rem; margin:5px; }
	
	.partners .ptText .eng {font-size:8rem; color:#fff; }
	.partners .ptText .eng > span { line-height:9.5rem;  text-align:center; }
	.partners .ptText .eng .eng01 { transform:translateX(-200px); margin-left:0; }
	.partners .ptText .eng .eng02 { transform:translateX(50%); margin-left:0; }
	.partners .ptText .eng .eng03 { transform:translateX(-200px);  }
	.partners .ptText .kr .bg { background:linear-gradient(to right, #3f19f9 0%, #1ac3ce 100%); }	
	.partners .moreBtnWrap { bottom:10vh;  }
	
	.partners .ptText {  }
	.partners .ptText > div { transform:translateY(-10vh); }
	
	.ptSvgWrap .ptSvg .svgTit {stroke:#333; stroke-width:1px; fill:#fff; opacity:0.1; animation:textSvg 2.2s ease-in-out alternate infinite; }

}

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.partners .title { font-size:10vw; } 
	.partners .ptText .eng {font-size:6rem; }
	.partners .ptText .eng > span { line-height:8rem; }
	.partners .ptText .kr { line-height:3.6rem;}
	.partners .ptText .kr .text{ font-size:2.0rem; }
}
@media all and (max-width: 540px) {
	.partners .partnersListWrap .partnersListAll .partnerUl { padding:0 3rem; }
	.partners .partnersListWrap .partnersListAll .partnerUl li { width:50%; }	
	.partners .ptText .eng {font-size:5rem; }
	.partners .ptText .eng > span { line-height:7rem; }
	.partners .ptText .kr { line-height:3rem;}
	.partners .ptText .kr .text{ font-size:1.7rem; }
}


/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////  문의   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.contact { background:#fff; padding:150px 50px; position:relative; }  
.contact .inquiry { width:100%; max-width:1200px; margin:0 auto; }
.contact .tit_text { display:flex; align-items:center; margin-top:30px;}
.contact .tit_text .text { flex-grow:1; align-items:center; margin-left:2.5rem; }
.contact .tit_text .text a + a { margin-left:80px; }
.contact .tit_text .line { width:11.1111%;  }
.contact .tit_text .line:before { width:90%; height:1px; content:''; background:#000; display:block; }
.contact .contactInfoWrap { margin:120px auto 0; width:100%; max-width:1200px; display:flex; justify-content:right;  }
.contact .contactInfo { opaicty:0; margin-top:50px; }
.contact .contactInfo + .contactInfo { margin-left:6rem; }
.contact .contactInfo h3 { font-size:2.6rem; font-weight:900; color:#000; }
.contact .contactInfo h3:after { content:''; display:block; width:3.0rem; height:2px; background:#ccc; margin:1.5rem 0; }
.contact .contactInfo .infoText { font-size:1.6rem; line-height:3.0rem; color:#333; font-weight:300; }
.contact .contactInfo .infoText .underline { position:relative; }
.contact .contactInfo .infoText .underline:before { position:absolute; bottom:2px; left:0; right:0; width:100%; height:2px; background:var(--blue); content:''; z-index:-1; }

.contact .inquiry .inqTit { font-size:2.5vw; display:flex; justify-content:flex-start; }
.contact .inquiry .inqTit .tWrap { overflow:hidden; z-index:1; line-height:3vw; height:3vw; letter-spacing:0.01em; margin:0; padding:0; opacity:0; }
.contact .inquiry .inqTit .blank { width:10px; }
.contact .inquiry .inqTit .tWrap.tW01 { transform:translateX(150px); }
.contact .inquiry .inqTit .tWrap.tW02 { transform:translateX(120px); }
.contact .inquiry .inqTit .tWrap.tW03 { transform:translateX(100px); }

.contact .inquiry .btn01 { opacity:0; transform:translateX(100px); }
.contact .inquiry .btn02 { opacity:0; transform:translateX(120px); }
.contact .contactInfoWrap .cInfo01 { opacity:0; transform:translateX(-100px); }
.contact .contactInfoWrap .cInfo02 { opacity:0; transform:translateX(-120px); }

.contact .flowTxtWrap { position:absolute; top:100%; left:0; z-index:4; width:100%; mix-blend-mode:normal; opacity:1; transform:translateY(-90%); opacity:0.5; }
.contact .flowTxtWrap .flowTxt { position:relative; width:100%; max-width:100%; overflow-x:hidden; /*height:360px;*/ height:0; padding-bottom:18.75%; }
.contact .flowTxtWrap .flowTxt .track {position:absolute; will-change:transform; animation:marquee 30s linear infinite; white-space:nowrap; width:200%;  }
.contact .flowTxtWrap .flowTxt .track img { display:inline-block; margin:0; width:50%; }

/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) {	
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 820px) {	
	.contact .inquiry .inqTit { font-size:2.5rem; font-weight:500; }
	.contact .inquiry .inqTit .tWrap { opacity:1; line-height:4rem; height:4rem; }
	.contact .inquiry .inqTit .blank { width:7px; }
	.contact .tit_text { margin-top:20px; }
	.contact .contactInfoWrap { display:flex; flex-wrap:wrap; justify-content:space-between; }
	.contact .contactInfo { width:48%; }
	.contact .contactInfo + .contactInfo { margin-left:0; }
	.contact .contactInfo:nth-child(2) { margin-top:20px; }
	.contact .contactInfo:nth-child(3) { margin-top:4rem; margin-left:52%; }		
	.contact .inquiry .inqTit .tWrap.tW01 { transform:translateX(0px); }
	.contact .inquiry .inqTit .tWrap.tW02 { transform:translateX(0px); }
	.contact .inquiry .inqTit .tWrap.tW03 { transform:translateX(0px); }
	.contact .inquiry .btn01 { opacity:1; transform:translate(0, 0); }
	.contact .inquiry .btn02 { opacity:1; transform:translate(0, 0); }
	.contact .contactInfoWrap .cInfo01 { opacity:1; transform:translate(0, 0); }
	.contact .contactInfoWrap .cInfo02 { opacity:1; transform:translate(0, 0); }
	
}


/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.contact { padding:100px 30px; /*min-height:100vh;*/ }
	.contact .contactInfo { width:100%;  }
	.contact .contactInfo:nth-child(2) { margin-top:4rem; }
	.contact .contactInfo:nth-child(3) { margin-top:4rem; margin-left:0%; }	
	.contact .inquiry .inqTit { font-size:5vw; }
}
@media all and (max-width: 540px) {
	.contact { padding:50px 20px; }
	.contact .tit_text .text { display:flex; flex-wrap:wrap;  }
	.contact .tit_text .text a { width:100%; }
	.contact .tit_text .text a + a { margin-left:0; margin-top:1rem; }
	.contact .contactInfoWrap { margin-top:0rem; }
	.contact .contactInfo h3 { font-size:1.8rem; }
	.contact .contactInfo h3:after { margin:1rem 0; }
	.contact .contactInfo .infoText { font-size:1.5rem; line-height:2.4rem; }	
}



/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// 20241122 인스타그램추가  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.instaWrap { background:#f9f9f9; padding:150px 50px; position:relative; }  
.instaWrap .inner { width:100%; max-width:1240px; margin:0 auto; }
.instaWrap .instaList ul { display:flex; flex-wrap:wrap; gap:4px; }
.instaWrap .instaList ul li { width:calc(20% - 16px/5); }
.instaWrap .instaList ul li a { display:block;}
.instaWrap .instaList ul li a img { width:100%; }

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
	.instaWrap .instaList ul { gap:3px; }
	.instaWrap .instaList ul li { width:calc(33.3333% - 6px/3); }
	.instaWrap .instaList ul li:nth-child(10) { display:none; }
}


/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.instaWrap { padding:100px 30px; }	
}

@media all and (max-width: 540px) {
	.instaWrap { padding:50px 20px; }
	.instaWrap .instaList ul { gap:2px; }
	.instaWrap .instaList ul li { width:calc(50% - 1px ); }
	.instaWrap .instaList ul li:nth-child(10) { display:block; }
}
@charset "utf-8";

/*컨텐츠 공통*/
#sub { width:100%; max-width:100vw; overflow-x: hidden;}
#pageContent { margin:0 auto; padding-top:10rem; position:relative; z-index:2; color:#101010; opacity:0;}
.pageHeader { width:100%; padding:20vh 20px 10rem; opacity:1; transform:translate(0,0); position:relative; overflow:hidden; min-height:70vh; }
.pageHeader .pageHeaderBg { display:block; position:absolute; top:0; left:0; width:100%; height:100%; 	
	/*box-shadow: inset 0px 0px 300px rgba(0,0,0,1), inset -100px -100px 200px rgba(122,3,184,0.4);*/ clip-path:ellipse(115% 150% at 40% -50%); z-index:-1;
	/*animation:gradient 12s ease forwards infinite, shadow 5s linear infinite;*/ animation:gradient 12s ease forwards infinite; will-change:clip-path; transform:translateZ(0); }

.sub_01 .pageHeader .pageHeaderBg { background:linear-gradient(to right, #0F2027 0%, #000C40 20%, #000 50%, #012b8e 80%, #42b3c0 100%); background-size:400% 400%; }
.sub_02 .pageHeader .pageHeaderBg { background:linear-gradient(to right, #1d3b39 0%, #2e7968 20%, #6d2d78 50%, #4e1b46 80%, #361b4e 100%); background-size:400% 400%; }
.sub_03 .pageHeader .pageHeaderBg { background:#fff; }
.sub_04 .pageHeader .pageHeaderBg { background:linear-gradient(to right, #44A08D 0%, #0e646c 20%, #093028 50%, #237A57 80%, #DCE35B 100%); background-size:400% 400%; }
.sub_05 .pageHeader .pageHeaderBg { background:linear-gradient(to right, #2e1437 0%, #000 20%, #ffa17f 50%, #948e99 80%, #084926 100%); background-size:400% 400%; }

.pageHeader .innerBox { width:100%; max-width:1200px; color:#171818; margin:0 auto; letter-spacing:0; }
.pageHeader .pageTit { font-size:2.5rem; text-transform:uppercase; font-weight:900; position:relative; color:#fff; /*transform:translateX(-12vw); opacity:0;*/ }
.pageHeader .pageTit .line { width:18rem; height:1px; background:rgba(255,255,255,1); display:block; position:absolute; top:50%; left:0; transform:translateX(-105%); }
.pageHeader .pageTits { font-size:6.5rem; text-transform:uppercase; margin-top:1.5rem; font-weight:700; color:#fff; font-size:3.5vw; } 
.pageHeader .mark { right:0; bottom:-5rem;  filter:blur(10px); -webkit-filter: blur(10px); z-index:0; opacity:0.5; animation:30s infinite updown; position:absolute; width:70%; } 
.pageHeader .mark img { max-width:100%; }
.pageHeader .pageTits { display:flex; flex-wrap:wrap; }
.pageHeader .pageTits > span { /*transform:translateX(-8vw); opacity:0;*/ margin-right:1.8rem; }
.pageHeader .pageTits > span:last-child { margin-right:0; }
.pageHeader .pageTits span.cursorP { dispaly:inline; opacity:1; transform:translateX(0); animation: twinkle 0.3s 0s linear infinite; }
.sub_03 .pageHeader .pageTit,
.sub_03 .pageHeader .pageTits { color:#000; }
.sub_03 .pageHeader .pageTit .line { background:rgba(0,0,0,1); }

@keyframes twinkle {
	24% { opacity:1; }
	25% { opacity:0; }
	75% { opacity:0; }
	76% { opacity:1; }
}

/* 도형 애니메이션 */
.object {position:absolute; pointer-events:none; }
.object.cc { border-radius:50%; }
.object.dia { clip-path: polygon(50% 1%, 99% 50%, 50% 99%, 1% 50%); }
.object.penta { clip-path:polygon(50% 2%, 97% 38%, 81% 98%, 19% 98%, 3% 38%); }
.object.frame { clip-path:polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); }
.object.chevron { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }
.object.chevronL { clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); }
.object.close {clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); }



.obj-01 { width:15vw; height:15vw; top:0; left:30%; opacity:0; mix-blend-mode:screen;
    box-shadow:inset 0 0 10vw #4d2bf6, inset 10vw 0 15vw #fff, inset -10vw 0 15vw #0ff, inset 10vw 0 20vw #cf90ff;
    /*animation: drift1 15s 0s linear infinite alternate, pulsate2 1s linear infinite; */
	animation: drift1 15s 0s linear infinite alternate;
}
.obj-02 { width:8vw; height:8vw; top:70%; left:0%; opacity:0; mix-blend-mode:screen;
    box-shadow:inset 0 0 6vw #fff, inset 5vw 0px 8vw transparent, inset -5vw 5vw 8vw rgba(47, 252, 216, 0.5), inset 5vw 0 3vw rgba(124, 255, 231, 0.6),
        inset -8vw 5vw 4vw rgba(174, 97, 228, 0.8);
    /* animation: drift2 10s 0s linear infinite alternate,  pulsate1 5s linear infinite; */
	animation: drift2 10s 0s linear infinite alternate;	
}
.obj-03 { width:25vw; height:25vw; right:-2%; bottom:-5%; opacity:0; mix-blend-mode:screen;
    box-shadow: inset 0 0 5vw rgba(97, 228, 150, 1),  inset 20vw 0 5vw #fed224,  inset -20vw 0 25vw rgba(255,255,255,0.7), inset 12vw 0 25vw #2a93eb, inset -12vw 0 20vw #e3fb1b;
    /* animation: drift4 45s 0s linear infinite alternate, pulsate3 8s linear infinite; */
	animation: drift4 45s 0s linear infinite alternate;	
}
.obj-04 { width:28vw; height:28vw; left:0%; top:8%; opacity:0; mix-blend-mode:screen;
    box-shadow: inset 0 0 90px #fff, inset 90px 0px 250px #c7e2ff, inset -90px 0 250px #2568ff, inset 90px 0 520px #00ff81, inset -90px 420px 520px #dff;
    /* animation: drift3 50s 0s linear infinite alternate, pulsate4 6s linear infinite; */
	animation: drift3 50s 0s linear infinite alternate;
}
.obj-05 { width:19vw; height:19vw; bottom:-2%; right:10%; opacity:0; mix-blend-mode:screen;
    box-shadow:inset 0 0 10vw #4d2bf6, inset 10vw 0 15vw #fff, inset -10vw 0 15vw #0ff, inset 10vw 0 20vw #cf90ff;
    /* animation: drift2 15s 0s linear infinite alternate, pulsate4 5s linear infinite;  */
	animation: drift2 15s 0s linear infinite alternate; 
}


.sub_05 .obj-01 { top:50%; left:50%; }
.sub_05 .obj-02 { top:50%; left:80%; }
.sub_05 .obj-03 { top:5%; right:5%; }
.sub_05 .obj-04 { top:-20%; right:-5%;}

@keyframes drift1 {
	30% { transform: translate3d(0%, -40%, 0) rotate(0deg); }
    60% { transform: translate3d(100%, 50%, 0) rotate(90deg); }
    100% { transform: translate3d(0, 200%, 0) rotate(30deg); }
}
@keyframes drift2 {
	20% { transform: translate3d(50%, 5%, 0) rotate(0deg);}
    40% { transform: translate3d(0%, -25%, 0) rotate(-20deg);}
	60% { transform: translate3d(100%, -75%, 0) rotate(70deg);}
    80% { transform: translate3d(200%, 200%, 0) rotate(50deg); }
	100% { transform: translate3d(000%, 150%, 0) rotate(0deg); }
}
@keyframes drift3 {
    50% { transform: translate3d(50%, 50%, 0) rotate(60deg); }
    100% { transform: translate3d(100%, 0, 0) rotate(0deg); }
}
@keyframes drift4 {
    50% { transform: translate3d(-100%, -50%, 0) rotate(270deg); }
    100% { transform: translate3d(50%, 0, 0) rotate(0deg); }
}

@keyframes pulsate1 {
    50% { box-shadow:inset 0 0 5vw #ffe11b, inset 10vw 0 5vw transparent, inset -10vw 0 5vw #0ff, inset 10vw 0 5vw #cf90ff; }
}
@keyframes pulsate2 {
    50% { box-shadow:inset 0 0 5vw #4d2bf6, inset 10vw 0 5vw transparent, inset -10vw 0 5vw #0ff, inset 10vw 0 5vw #cf90ff; }
}
@keyframes pulsate3 {
    50% { box-shadow: inset 0 0 10vw #fff, inset 10vw 0px 20vw #c7e2ff, inset -10px 0 20vw #2568ff, inset 9vw 0 25vw #00ff81, inset -10vw 25vw 10vw #dff; }
}
@keyframes pulsate4 {
    50% {box-shadow:inset 0 0 6vw #fff, inset 5vw 0px 8vw transparent, inset -5vw 5vw 8vw rgba(47, 252, 216, 0.5), inset 5vw 0 3vw rgba(124, 255, 231, 0.6),
        inset -8vw 5vw 4vw rgba(174, 97, 228, 0.8);
    }
}



/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
	.pageHeader { height:auto; min-height:40vh; }
	.pageHeader .pageTits { }
	.pageHeader .pageTits > span { /*transform:translateX(-5vw);*/ margin-right:1.2rem; }
}

@media all and (max-width: 960px) {
	.pageHeader { padding:15rem 60px 8rem 20px; }	
	.pageHeader:after { clip-path:ellipse(150% 150% at 40% -50%); }
	.pageHeader .pageTit .line { display:none; }		
}
/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) { 
	#pageContent { padding-top:6rem; }	 
	.pageHeader .pageTit { font-size:2.0rem; font-weight:900; }
	.pageHeader .pageTits { font-size:4.0rem; margin-top:1.5rem; font-weight:700; /*transform:translateX(-10vw); opacity:0;*/ } 	
	.pageHeader .pageTits > span { /*transform:translateX(0); opacity:1;*/ margin-right:1.5rem; }
	.pageHeader .pageTits > span:last-child { margin-right:0; }
}

@media all and (max-width: 539px) { 
	.pageHeader { padding:10rem 50px 6rem 20px; }
	.pageHeader:after { clip-path:ellipse(200% 150% at 40% -50%); }
	.pageHeader .pageTit { font-size:1.7rem; }
	.pageHeader .pageTits { font-size:2.8rem; margin-top:1rem; font-weight:500; } 
	.pageHeader .pageTits > span { margin-right:1.0rem; }
	
	.obj-01 { width:20vw; height:20vw; }
	.obj-02 { width:11vw; height:11vw; }
	.obj-03 { width:35vw; height:35vw;}
	.obj-04 { width:40vw; height:40vw;}
}


/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// Inquiry   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.inquiryWrap { width:100%; max-width:1200px; }
.contactAddress { display:flex; justify-content:right; width:100%; max-width:1100px; margin:20rem auto 0; }
.contactAddress .contactInfo + .contactInfo { margin-left:8rem; }
.contactAddress .contactInfo h3 { font-size:2rem; font-weight:900; margin-bottom:3rem; color:rgba(255,255,255,1); }
.contactAddress .contactInfo .infoText p { line-height:2; color:rgba(255,255,255,1); }
.contactAddress .contactInfo .infoText a { line-height:2; color:rgba(255,255,255,1); }
.contactAddress .contactInfo .infoText .underline { position:relative; }
.contactAddress .contactInfo .infoText .underline:before { position:absolute; bottom:0; left:0; right:0; width:100%; height:2px; background:#e1f6a7; content:''; z-index:-1; }
.inquiryFormWrap { background:#fff; padding:5rem; margin:0 0 10rem; }
.inquiryFormWrap .inquiryForm { display:flex; flex-wrap:wrap; justify-content:space-between; }
.inquiryFormWrap .inquiryForm .formItem { width:47.5%; margin-top:4rem; position:relative; }
.inquiryFormWrap .inquiryForm .formItem .input ~ label { position:absolute; left:-10000px; }
.inquiryFormWrap .inquiryForm .formItem .input { color:#000; font-size:1.6rem; line-height:5rem; height:5rem; padding:0 1.4rem; }
.inquiryFormWrap .inquiryForm .formItem .input::placeholder { color:#333; font-size:1.6rem; font-weight:500; }
.inquiryFormWrap .inquiryForm .formItem.required:before { width:0.8rem; height:0.8rem; border-radius:50%; background:var(--red); content:''; display:block; position:absolute; top:50%; left:0px; 
transform:translateY(-50%); }
.inquiryFormWrap .inquiryForm .formItem .input.textbox { border:2px solid #171818; height:120px; line-height:1.3; padding:1.4rem; background:transparent; outline-color:var(--red); transition:all 0.3s; }
.inquiryFormWrap .inquiryForm .formItem:nth-child(1),
.inquiryFormWrap .inquiryForm .formItem:nth-child(2) { margin-top:0; }
.inquiryFormWrap .inquiryForm .formItem.w100 { width:100%; }
.inquiryFormWrap .inquiryForm .formItem.captcha { display:flex; align-items:center; padding-left:1.4rem; }
.inquiryFormWrap .inquiryForm .formItem.captcha .chptchaImg { height:5.0rem; width:auto; margin-right:10px; }
.inquiryFormWrap .inquiryForm .formItem.captcha label { }
.inquiryFormWrap .inquiryForm .formItem.captcha .inputLine { flex-grow:1; }
.inquiryFormWrap .inquiryForm .formItem.agreeTerm {  display:flex; align-items:center; line-height:1; }
.inquiryFormWrap .inquiryForm .formItem.agreeTerm .viewTerm { color:#777; margin-left:10px; cursor:pointer; }
.inquiryFormWrap .inquiryForm .formItem .mailto { font-size:1.6rem; line-height:1.3;}
.inquiryFormWrap .inquiryForm .formItem .mailto a { color:var(--red); text-decoration:underline;}
.formItem .inputLine { position:relative;}
.formItem .inputLine .input_border { border-bottom:2px solid #171818; border-width:0 0 2px 0; background:transparent; position:relative; }
.formItem .inputLine:after { height:2px; content:''; background:var(--red); position:absolute; bottom:0; left:0; width:0; transition: width 0.3s linear; transition-delay:0.2s; }
.formItem .inputLine.on:after { width:100%; }
.inquiryFormWrap .cfmBtnWrap { text-align:center; margin-top:8rem; }
.okBtn { line-height:6.0rem; height:6.0rem; background:#000; font-size:2.0rem; font-weight:700; width:28rem; text-align:center; position:relative; border:0; overflow:hidden; border-radius:3.0rem; }
.okBtn span {position:relative; z-index:3; color:#fff; transition:all 0.4s ease; }
.okBtn span:hover { color:#fff; }
.okBtn:before { width:0; height:100%; position:absolute; top:0; left:0; background:var(--blue); content:''; transition:all 0.2s ease; z-index:1; border-radius:3.0rem;}
.okBtn:hover:before { width:100%; }
.okBtn:after { width:0; height:100%; position:absolute; top:0; left:0; background:var(--purple); content:''; transition:width 0.5s ease; z-index:2;  border-radius:3.0rem;}
.okBtn:hover:after { width:100%; }

.inquiryFormWrap .inquiryForm .selectDiv { z-index:10; }
.inquiryFormWrap .inquiryForm .textDiv { z-index:5; }

.sub_04 .locationDiv { background:#f9f9f9; padding:8rem 0; margin-top:0; }
.sub_04 .locationDiv .secInner { width:100%; max-width:1260px; padding:0 30px; margin:0 auto; }

/* 개인정보수집방침 레이어 */
.layerPop .popTit { font-size:2.5rem; text-align:center; margin-bottom:5rem; }
.layerPop .tit_1 { font-size:1.8rem; margin-bottom:1rem; font-weight:700; }

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
}

@media all and (max-width: 960px) {	
	.contactAddress { margin:10rem auto 0; }
}


/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) { 
	.contactAddress .contactInfo { }
	.contactAddress .contactInfo + .contactInfo { margin-left:3rem; }
}

@media all and (max-width: 539px) { 
	.inquiryFormWrap { padding:3rem; }
	.contactAddress { flex-wrap:wrap; }
	.contactAddress .contactInfo { width:100%; }
	.contactAddress .contactInfo + .contactInfo { margin-left:0rem; margin-top:3rem; }
	.contactAddress .contactInfo h3 { margin-bottom:1.5rem; font-weight:700; font-size:1.8rem; }
	.contactAddress .contactInfo .infoText p { font-size:1.3rem; }
	.contactAddress .contactInfo .infoText a { font-size:1.3rem; }
	.inquiryFormWrap .inquiryForm .formItem { width:100%; margin-top:2.5rem; }
	.inquiryFormWrap .inquiryForm .formItem:nth-child(2) { margin-top:2.5rem; }
	.inquiryFormWrap .inquiryForm .formItem .input { line-height:4rem; height:4rem; font-size:1.4rem; }
	.inquiryFormWrap .inquiryForm .formItem .input::placeholder { font-size:1.4rem; }
	.inquiryFormWrap .inquiryForm .formItem .input.textbox { height:100px; }
	.inquiryFormWrap .inquiryForm .formItem.captcha .chptchaImg { height:4.0rem; margin-right:5px; }
	.inquiryFormWrap .inquiryForm .formItem .mailto { font-size:1.4rem; } 
	.inquiryFormWrap .cfmBtnWrap { margin-top:4rem; }
	.okBtn { line-height:4.6rem; height:4.6rem; border-radius:2.3rem; font-size:1.6rem; width:24rem; }

	.sub_04 .locationDiv { padding:5rem 0; }
	.sub_04 .locationDiv .secInner { padding:0 20px; }

}


/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// career   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.careerTopText { text-align:right; max-width:1100px; margin:12rem auto 0;  }
.careerTopText .careerTextBox { position:relative; width:26rem; display:inline-block; }
.careerTopText .careerTextBox p { font-size:5rem; position:relative; line-height:8.5rem; height:8rem; border:1px solid #fff; text-align:center; color:#fff; }
.careerTopText > p { font-size:1.6rem; font-weight:400; color:#fff; margin-top:2.5rem; }
.careerTopText .careerTextBox:before,
.careerTopText .careerTextBox:after,
.careerTopText .careerTextBox p:before,
.careerTopText .careerTextBox p:after { display:block; content:''; position:absolute; width:10px; height:10px; background:transparent; border:1px solid #fff; z-index:2; }
.careerTopText .careerTextBox:before { left:1px; top:1px; transform:translate(-50%, -50%); }
.careerTopText .careerTextBox:after { right:1px; top:1px; transform:translate(50%, -50%); }
.careerTopText .careerTextBox p:before { left:0px; bottom:0; transform:translate(-50%, 50%); }
.careerTopText .careerTextBox p:after { right:0; bottom:0; transform:translate(50%, 50%); }
.inquiryForm.careerForm .formItem:nth-child(1) { margin-top:0; }
.inquiryForm.careerForm .formItem:nth-child(2), 
.inquiryForm.careerForm .formItem:nth-child(3) { margin-top:4rem; }
.inquiryForm.careerForm .formItem .partSelect { display:flex; justify-content:center; }
.inquiryForm.careerForm .formItem .partSelect > * { margin:0 10px; }
.partSelect .select {}
.partSelect .select input[type="radio"] { position:absolute; width:0; height:0; left:-10000px; }
.partSelect .select label { width:140px; height:44px; line-height:44px; border:2px solid #171818; border-radius:22px; background:transparent; font-size:1.8rem; color:#171818; font-weight:500;
text-align:center; display:inline-block; transition:all 0.3s; }
.partSelect .select input:checked + label { background:#171818; color:#fff; }
.filebox { position:relative; }
.filebox input[type="file"] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.filebox label { padding-left:1.4rem; border:2px solid #171818; line-height:6.0rem; height:6.0rem; width:100%; display:block; font-size:1.6rem; background:url(../images/common/file_upload.png)right center no-repeat; }


/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
	.careerTopText .careerTextBox { width:20rem; }
	.careerTopText .careerTextBox p { font-size:3.5rem; line-height:6.4rem; height:6rem; }
	.careerTopText > p { font-size:1.5rem; margin-top:2rem; }
}

@media all and (max-width: 960px) {	
	.careerTopText { margin:10rem auto 0; }
	.careerTopText .careerTextBox { width:18rem; }
	.careerTopText .careerTextBox p { font-size:3rem; line-height:6rem; height:5.6rem; }
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) { 
	.inquiryForm.careerForm .formItem .partSelect > * { margin:0 2px; }
	.partSelect .select label { width:110px; height:40px; line-height:40px; border-radius:20px; font-size:1.6rem; }
}

@media all and (max-width: 539px) { 
	.careerTopText .careerTextBox { width:18rem; }
	.careerTopText .careerTextBox p { font-size:2.0rem; line-height:4.4rem; height:4.0rem; }
	.careerTopText > p { font-size:1.4rem; margin-top:1.5rem; }	
	.inquiryForm.careerForm .formItem .partSelect > * { margin:0 1px; }
	.partSelect .select label { width:auto; height:36px; line-height:32px; border-radius:18px; font-size:1.5rem; font-weight:700; letter-spacing:-0.06em; padding:0 5px;}
	.filebox label { line-height:5.0rem; height:5.0rem; } 
	.inquiryFormWrap .inquiryForm.careerForm .formItem { margin-top:2.5rem; }
	.inquiryFormWrap .inquiryForm .formItem.agreeTerm { flex-wrap:wrap; }
	.inquiryFormWrap .inquiryForm .formItem.agreeTerm > span { width:100%; }
	.inquiryFormWrap .inquiryForm .formItem.agreeTerm .viewTerm { margin-left:20px; margin-top:10px; }
}


/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// about   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
#pageContent.aboutWrap { padding-top:0 !important; }
.aboutTit { width:100%; max-width:1200px; margin:20rem auto 0;  color:#fff; }
.aboutTit .abText01 { font-size:5.0rem; line-height:6.0rem; font-weight:100; }
.aboutTit .abText01 strong { font-weight:700; }
.aboutTit .abText01 > span { background: linear-gradient(to right, #4d2bf6 0%, #54f1fb 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;} 
.aboutTit .abText02 { font-size:1.7rem; line-height:1.6;  margin-top:2.0rem; }

.aboutWrap .sec { width:100%; }
.aboutWrap .sec .secInner { width:100%; max-width:1260px; padding:0 30px; margin:0 auto; }
.divTitWrap { color:#101010; }
.divTitWrap .divTit01 { font-size:2.5rem; font-weight:700; position:relative; }
.divTitWrap .divTit02 { font-size:5.0rem; font-weight:200; margin-top:2.0rem; line-height:1.3; }
.divTitWrap .divTit02 strong { font-size:5.2rem; font-weight:700; }
.divTitWrap .divTit01:before { width:15rem; height:1px; content:''; display:block; background:#101010; position:absolute; left:-16rem; top:13px; z-index:2;  }
.divTitWrap .divTit03 { font-size:1.8rem; font-weight:300; margin-top:2.5rem; line-height:1.5;  }

.sec01 { padding-bottom:6rem; padding-top:10rem;}
.sec01 .aboutListWrap { display:flex; justify-content:space-between; align-items:center; position:relative; width:100%; overflow:hidden; }
.sec01 .aboutListWrap .aboutText { flex-grow:1; }
.sec01 .aboutListWrap .aboutImg {  }
.sec01 .aboutListWrap .aboutText .aboutList { margin-top:6.0rem; }
.sec01 .aboutListWrap .aboutText .aboutList dt { font-size:3.2rem; font-weight:700; position:relative; }
.sec01 .aboutListWrap .aboutText .aboutList dd { font-size:1.8rem; line-height:1.6; margin-top:2.0rem;  }
.sec01 .aboutListWrap .aboutText .aboutList dt > span { display:inline-block; position:relative; padding:7px 0; line-height:1; }
.sec01 .aboutListWrap .aboutText .aboutList dt .txt { position:relative; z-index:1; color:#fff; mix-blend-mode:difference; }
.sec01 .aboutListWrap .aboutText .aboutList dt .bg { position:absolute; left:0; bottom:0; height:100%; }
.sec01 .aboutListWrap .aboutText .aboutList dt .bg.wh { background:#fff; z-index:-2; width:100%; }
.sec01 .aboutListWrap .aboutText .aboutList dt .bg.bk { background:#000; z-index:-1; width:0; transition:width 0.5s; }
.sec01 .aboutListWrap .aboutImg { padding:3rem; }
.sec01 .aboutListWrap .aboutImg .aboutImgBox { width:213px; height:307px; position:relative; }
.sec01 .aboutListWrap .aboutImg .aboutImgBox .imgBox { opacity:1; overflow:hidden; width:100%; height:0; position:absolute; top:0; left:0; }

.sec02 { margin-top:6rem; padding-bottom:0rem }
.sec02 { display:flex; justify-content:flex-start; }
.sec02 .sec02ImgWrap {  background: url("../images/sub/about_sec02_bg.jpg")right center no-repeat; background-size:cover; width:50%; transform:translateX(-100px); opacity:0; }
.sec02 .sec02TextWrap { padding:10rem 0; padding-left:10rem; max-width:760px; flex-grow:1; transform:translateX(100px); opacity:0;  }
.sec02 .sec02TextWrap .sec02Text { margin-top:10rem; font-size:1.8rem; line-height:1.6; }
.sec02 .sec02TextWrap .sec02Text p { margin-top:3.0rem; }
.sec02 .sec02TextWrap .sec02Text p strong { font-weight:700; }

.sec03 { padding-top:6rem; }
.sec03 .divTitWrap { margin-bottom:6rem; transform:translateY(100px); opacity:1; }
.sec03 .divTitWrap .locationInfo { margin-top:3rem; }
.sec03 .divTitWrap .locationInfo p { margin-top:10px; }
.sec03 .mapDiv { position:relative; filter:grayscale(80%); transform:translateY(100px); opacity:1; margin-bottom:6rem; transition:filter 0.5s; }
.sec03 .mapDiv:hover {filter:grayscale(10%);  }
.sec03 .mapDiv .root_daum_roughmap { width:100%; }
.sec03 .mapDiv .root_daum_roughmap .wrap_map { height:50rem; }

/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) { 
	.aboutTit { margin:10rem auto 0; }
	.aboutTit .abText01 { font-size:4.5rem; line-height:5.1rem; }
	.aboutTit .abText02 { font-size:1.7rem; line-height:1.6;  margin-top:2.0rem; }
	
	.divTitWrap .divTit01 { font-size:2.4rem; }
	.divTitWrap .divTit02 { font-size:4.7rem; margin-top:2.0rem; line-height:1.3; }
	.divTitWrap .divTit02 strong { font-size:4.7rem; }
	.divTitWrap .divTit03 { font-size:1.8rem; margin-top:2.5rem; line-height:1.5;  }
	
	.sec01 .aboutListWrap .aboutText .aboutList { margin-top:4.5rem; }
	.sec01 .aboutListWrap .aboutText .aboutList dt { font-size:3.0rem;}
	.sec01 .aboutListWrap .aboutText .aboutList dd { font-size:1.7rem; margin-top:1.8rem;  }
	.sec01 .aboutListWrap .aboutText .aboutList dt > span { padding:5px 0; }
	
	.sec02 .sec02TextWrap { padding:8rem 30px 8rem 8rem; }
	.sec02 .sec02TextWrap .sec02Text { margin-top:8rem; font-size:1.7rem; }
	
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
	.aboutTit { margin:8rem auto 0; }
	.aboutTit .abText01 { font-size:3.7rem; line-height:4.5rem; }
	.aboutTit .abText02 { font-size:1.6rem; line-height:1.5;  margin-top:1.5rem; }
	
	.divTitWrap .divTit01 { font-size:2.2rem; }
	.divTitWrap .divTit02 { font-size:4.0rem; margin-top:1.5rem; line-height:1.3; }
	.divTitWrap .divTit02 strong { font-size:4.0rem; }
	.divTitWrap .divTit03 { font-size:1.7rem; margin-top:2.0rem; line-height:1.5;  }
	
	.sec01 .aboutListWrap .aboutText .aboutList { margin-top:4.0rem; }
	.sec01 .aboutListWrap .aboutText .aboutList dt { font-size:2.7rem; font-weight:500;}
	.sec01 .aboutListWrap .aboutText .aboutList dd { font-size:1.6rem; margin-top:1.5rem; }
	.sec01 .aboutListWrap .aboutText .aboutList dt > span { padding:3px 0; }
	.sec01 .aboutListWrap .aboutImg { padding:0; padding-left:20px;}
	.sec01 .aboutListWrap .aboutImg .aboutImgBox { width:160px; height:231px; }
	
	.sec02 .sec02TextWrap { padding:6rem 20px 6rem 6rem; }
	.sec02 .sec02TextWrap .sec02Text { margin-top:6rem; font-size:1.6rem; }	
}

@media all and (max-width: 960px) {	
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) { 
	.divTitWrap .divTit01 { font-size:1.9rem; }
	.divTitWrap .divTit02 { font-size:3.6rem; margin-top:1.5rem; line-height:1.3; }
	.divTitWrap .divTit02 strong { font-size:3.6rem; }
	.divTitWrap .divTit02 .br { display:none; }
	
	.sec01 .aboutListWrap .aboutText .aboutList.ab01 { padding-right:150px; }
	.sec01 .aboutListWrap .aboutImg { position:absolute; padding:0; right:0; top:30px; }
	.sec01 .aboutListWrap .aboutImg .aboutImgBox { width:140px; height:202px; }	
	
	.sec02 { margin-top:3rem; flex-wrap:wrap; padding-bottom:0rem; }
	.sec02 .sec02ImgWrap { display:none; }
	.sec02 .sec02TextWrap { opacity:1;  width:100%; padding:0; transform:translateX(0); }
	.sec02 .sec02TextWrap .divTitWrap { background:url("../images/sub/about_sec02_bg.jpg")center no-repeat; background-size:cover; color:#fff; padding:5rem 30px; position:relative; opacity:1;
	transform:translateY(100px); opacity:0; }
	.sec02 .sec02TextWrap .divTitWrap:before { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); content:''; display:block;  }
	.sec02 .sec02TextWrap .divTitWrap .divTit01,
	.sec02 .sec02TextWrap .divTitWrap .divTit02 { position:relative; }
	.sec02 .sec02TextWrap .divTitWrap .divTit01:before { background:#fff; }
	.sec02 .sec02TextWrap .sec02Text { padding:0 30px 5.0rem; transform:translateY(100px); opacity:0; }
	.sec02 .sec02TextWrap .sec02Text p { margin-top:2rem; }	
}

@media all and (max-width: 539px) { 
	.aboutWrap .sec .secInner { padding:0 20px; }
	
	.divTitWrap .divTit01 { font-size:1.8rem; }
	.divTitWrap .divTit02 { font-size:2.6rem; margin-top:1.0rem; line-height:1.3; }
	.divTitWrap .divTit02 strong { font-size:2.6rem; }
	.divTitWrap .divTit03 { font-size:1.6rem; margin-top:1.5rem; line-height:1.5;  }
	
	.aboutTit { margin:5rem auto 0; }
	.aboutTit .abText01 { font-size:3.0rem; line-height:4.0rem; }
	.aboutTit .abText02 { font-size:1.5rem; line-height:1.5;  margin-top:1.0rem; }
	.aboutTit .abText01 .br { display:none; }
	.aboutTit .abText01 span { display:inline; }
	
	.sec01 { padding-bottom:3rem; padding-top:6rem;}
	.aboutListWrap { flex-wrap:wrap; }	
	.sec01 .aboutListWrap .aboutText { order:2; }
	.sec01 .aboutListWrap .aboutText .aboutList.ab01 { padding-right:0; }
	.sec01 .aboutListWrap .aboutText .aboutList { margin-top:3rem; }
	.sec01 .aboutListWrap .aboutText .aboutList dt { font-size:1.8rem; }
	.sec01 .aboutListWrap .aboutText .aboutList dd { font-size:1.5rem; margin-top:1.0rem; }
	.sec01 .aboutListWrap .aboutImg { position:relative; order:1; top:0; width:100%; }
	.sec01 .aboutListWrap .aboutImg .aboutImgBox { margin:2rem auto; width:120px; height:173px; }
	
	.sec02 .sec02TextWrap .divTitWrap { padding:5rem 20px; }
	.sec02 .sec02TextWrap .sec02Text { padding:0 20px 5.0rem; margin-top:3rem; }
	
	.sec03 { width:100%; margin-top:3rem; }
	.sec03 .divTitWrap { margin-bottom:3rem; }
	.sec03 .mapDiv .root_daum_roughmap .wrap_map { height:30rem; }
}


/* -----------------------------------------------------------------------------------------------
///////////////////////////////////////////// service   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
#pageContent.serviceWrap { padding-top:0 !important; }
.serviceTit { width:100%; max-width:1200px; margin:20rem auto 0;  color:#fff; }
.serviceTit .srText01 { font-size:5.0rem; line-height:6.0rem; font-weight:100; }
.serviceTit .srText01 strong { font-weight:700; }
.serviceTit .srText01 > span { background:linear-gradient(to right, #6de5fb 0%, #824dfb 70%);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;} 
.serviceTit .srText02 { font-size:1.7rem; line-height:1.6;  margin-top:2.0rem; }

.serviceWrap .sec { width:100%; }
.serviceWrap .sec .secInner { width:100%; max-width:1260px; padding:0 30px; margin:0 auto; }
.serviceWrap .divTitWrap { color:#101010; }

.serviceWrap .sec01 .divTitWrap,
.serviceWrap .sec02 .divTitWrap {  }
.sec01 .serviceListWrap { display:flex; justify-content:space-between; flex-wrap:wrap; }
.sec01 .serviceListWrap .serviceList { width:45%; margin-top:8.0rem; }
.sec01 .serviceListWrap .serviceList dt { font-size:3.2rem; font-weight:700; position:relative; text-transform:uppercase; }
.sec01 .serviceListWrap .serviceList dd { font-size:1.8rem; line-height:1.6; margin-top:2.0rem; }
.sec01 .serviceListWrap .serviceList dt > span { display:inline-block; position:relative; padding:7px 0; line-height:1; }
.sec01 .serviceListWrap .serviceList dt .txt { position:relative; z-index:1; color:#fff; mix-blend-mode:difference; }
.sec01 .serviceListWrap .serviceList dt .bg { position:absolute; left:0; bottom:0; height:100%; }
.sec01 .serviceListWrap .serviceList dt .bg.wh { background:#fff; z-index:-2; width:100%; }
.sec01 .serviceListWrap .serviceList dt .bg.bk { background:#000; z-index:-1; width:0; transition:width 0.5s; }
.sec01 .serviceListWrap .serviceList .serviceTx01 { margin-top:2.0rem; font-weight:500; }
.sec01 .serviceListWrap .serviceList .serviceTx02 { color:#666; margin-top:1.5rem; font-size:1.5rem;  }
.btn.linkBtn { background:var(--purple); color:#fff; height:4.0rem; line-height:4.0rem; border-radius:2.0rem; padding:0 2.5rem; font-size:1.6rem; }
.btn.linkBtn.blue { background:#01ad8f;  }
.btn.linkBtn.black { background:#212121;  }
.btn.linkBtn img { margin-left:5px; }

.serviceWrap .sec02 { background:#f1f1f1; padding:10rem 0; min-height:100vh; width:100%; overflow:hidden; }
.serviceWrap .sec02 .partnersList { margin-top:5rem; position:relative; margin-bottom:5rem; width:100%; }
.serviceWrap .sec02 .partnersList .partnerUl { display:flex; width:auto; flex-flow:column wrap; height:calc(100vh - 300px); max-height:520px; align-content:space-between; transform:translateX(0); position:absolute; 
width:calc(292 * 12px); left:0; }
.serviceWrap .sec02 .partnersList .partnerUl li {position:relative; height:25%; text-align:center; flex-wrap:wrap; align-items:center; display:flex; justify-content:center; flex-shrink:0; flex-grow:0; }
.serviceWrap .sec02 .partnersList .partnerUl li img { background:rgba(255,255,255,1); border-radius:10px 0 10px 0; padding:1rem; overflow:hidden; margin:auto 25px; }


/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) { 
	.serviceTit { margin:10rem auto 0; }
	.serviceTit .srText01 { font-size:4.5rem; line-height:5.1rem; }
	.serviceTit .srText02 { font-size:1.7rem; line-height:1.6;  margin-top:2.0rem; }	
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
	.serviceTit { margin:8rem auto 0; }
	.serviceTit .srText01 { font-size:3.7rem; line-height:4.5rem; }
	.serviceTit .srText02 { font-size:1.6rem; line-height:1.5;  margin-top:1.5rem; }	
	
	.sec01 .serviceListWrap .serviceList { width:47.5%; margin-top:7.0rem; }
	.sec01 .serviceListWrap .serviceList dt { font-size:3.1rem; }
	.sec01 .serviceListWrap .serviceList dd { font-size:1.7rem; margin-top:2.0rem; }
	
	.serviceWrap .sec02 .partnersList .partnerUl { width:calc(250 * 12px); }
	.serviceWrap .sec02 .partnersList .partnerUl li { width:250px; }
	.serviceWrap .sec02 .partnersList .partnerUl li img { padding:0.5rem; margin:auto 10px; }
}

@media all and (max-width: 960px) {	
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.divTitWrap .divTit03 .br { display:none; }

	.sec01 .serviceListWrap .serviceList { width:100%; margin-top:6.0rem; }
	.sec01 .serviceListWrap .serviceList dt { font-size:3.0rem; }
	.sec01 .serviceListWrap .serviceList dd { font-size:1.6rem; margin-top:2.0rem; }
	
	.serviceWrap .sec02 .partnersList .partnerUl { width:100%; position:relative; height:auto; max-height:none; flex-flow:row wrap; margin-bottom:0; }
	.serviceWrap .sec02 .partnersList .partnerUl li { width:33.3333%; height:auto; }
	.serviceWrap .sec02 .partnersList .partnerUl li img { padding:0.5rem; margin:5px; }		
}

@media all and (max-width: 539px) {
	.serviceWrap .sec .secInner { padding:0 20px; }
	
	.serviceTit { margin:5rem auto 0; }
	.serviceTit .srText01 { font-size:3.0rem; line-height:4.0rem; }
	.serviceTit .srText02 { font-size:1.5rem; line-height:1.5;  margin-top:1.0rem; }
	.serviceTit .srText01 .br { display:none; }
	.serviceTit .srText01 span { display:inline; }
	
	.sec01 .serviceListWrap .serviceList { margin-top:5.0rem; }
	.sec01 .serviceListWrap .serviceList dt { font-size:2.5rem; }
	.sec01 .serviceListWrap .serviceList dd { font-size:1.5rem; margin-top:1.5rem; }
}



/* -------------------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// works (게시판) - BOARD SKIN(s_portfolio)으로 CSS 옮김   //////////////////////////////////////
----------------------------------------------------------------------------------------------------------------------------*/
/*
.sub_03 { background:#171818; position:relative; overflow:hidden; }
.sub_03 .object { opacity:0.05 !important; position:fixed; }
.worksWrap { position:relative; }
.worksWrap .projects { padding-bottom:8rem; position:relative; }

.worksWrap .pfListWrap { width:100%; z-index:2;  }
.worksWrap .pfListWrap .pfList { display:flex; justify-content:space-between; flex-wrap:wrap; height:auto; position:relative; width:100%; max-width:1400px; padding:0 5%; margin:0 auto; }
.worksWrap .pfListWrap .pfList li { width:45%; position:relative;  margin-top:30rem; }
.worksWrap .pfListWrap .pfList li:nth-child(1),
.worksWrap .pfListWrap .pfList li:nth-child(2) { margin-top:0; }
.worksWrap .pfListWrap .pfList li:nth-child(2n) { transform:translateY(30%); }
.worksWrap .pfListWrap .pfList li:nth-child(2n + 1) { transform:translateY(-30%); }
.worksWrap .pfListWrap .pfList .pfItem  { width:100%; position:relative; display:block; height:0; padding-bottom:100%; }
.worksWrap .pfListWrap .pfList .pfItem .thumb,
.worksWrap .pfListWrap .pfList .pfItem .shadow { display:block; width:100%; height:100%; transition:all 0.5s; overflow:hidden; position:absolute; clip-path:inset(0 0 100% 0); }
.worksWrap .pfListWrap .pfList .pfItem .thumb { opacity:0; top:0; left:0; }
.worksWrap .pfListWrap .pfList .pfItem .shadow { background:var(--purple); top:15px; left:15px; }
.worksWrap .pfListWrap .pfList .pfItem.active .thumb,
.worksWrap .pfListWrap .pfList .pfItem.active .shadow { transition:all 0.4s none; clip-path:inset(0 0 0 0);  }
.worksWrap .pfListWrap .pfList .pfItem.active .shadow { transition-duration:0.8s; }
.worksWrap .pfListWrap .pfList .pfItem.active .thumb { transition-duration:0.9s; opacity:1; }
.worksWrap .pfListWrap .pfList .pfItem .thumb .thumbImg { width:100%; height:100%; }
.worksWrap .pfListWrap .pfList .pfItem .thumb .thumbImg img { object-fit:cover; object-position:50% 50%; width:100%; height:100%; max-width:none; }
.worksWrap .pfListWrap .pfList .pfItem .pfText { position:absolute; left:5%; bottom:20px; width:90%; color:#fff; z-index:2; }
.worksWrap .pfListWrap .pfList .pfItem .pfText a { color:#fff; }
.worksWrap .pfListWrap .pfList .pfItem .pfText > span { display:block; }
.worksWrap .pfListWrap .pfList li:nth-child(2n) .pfItem .pfText { text-align:right; }
.worksWrap .pfListWrap .pfList .pfItem .pfText .tit { font-size:2.8rem; font-weight:600; transform:translateX(100px); opacity:0; transition:all 0.5s; }
.worksWrap .pfListWrap .pfList .pfItem .pfText .desc { font-size:1.7rem; margin-top:0.5rem; opacity:1; transform:translateX(120px); opacity:0; transition:all 0.5s; }
.worksWrap .pfListWrap .pfList li:nth-child(2n) .pfItem .pfText .tit { transform:translateX(-100px);  }
.worksWrap .pfListWrap .pfList li:nth-child(2n) .pfItem .pfText .desc { transform:translateX(-120px);  }
.worksWrap .pfListWrap .pfList .pfItem.active .pfText .tit { transition:all 0.6s;  transition-delay:0.5s; transform:translateX(0px) !important; opacity:1; }
.worksWrap .pfListWrap .pfList .pfItem.active .pfText .desc { transition:all 0.4s; transition-delay:0.8s; transform:translateX(0px) !important; opacity:1; }
.worksWrap .moreBtnWrap { padding:2rem 0; text-align:center; opacity:0; transform:translateY(80px); }
*/

/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) {
	/*
	.worksWrap .pfListWrap .pfList .pfItem .pfText .tit { font-size:2.2rem;  }
	.worksWrap .pfListWrap .pfList .pfItem .pfText .desc { font-size:1.6rem; margin-top:0.5rem; }
	*/
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {	
	/*
	.worksWrap .pfListWrap .pfList li { margin-top:20rem; }
	*/
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {	
	/*
	.worksWrap .projects { padding-bottom:5rem; }
	.worksWrap .pfListWrap .pfList li { width:90%; max-width:45rem; margin:5rem auto; }
	.worksWrap .pfListWrap .pfList li:nth-child(1),
	.worksWrap .pfListWrap .pfList li:nth-child(2) { margin:5rem auto; }
	.worksWrap .pfListWrap .pfList li:nth-child(2n) { transform:translateY(0); }
	.worksWrap .pfListWrap .pfList li:nth-child(2n + 1) { transform:translateY(0); }
	.worksWrap .pfListWrap .pfList li .pfItem { margin-left:-8px; }
	*/
}

@media all and (max-width: 540px) {		
/*
	.worksWrap .pfListWrap .pfList .pfItem .pfText .tit { font-size:1.8rem;  transform:translateX(50%); }
	.worksWrap .pfListWrap .pfList .pfItem .pfText .desc { font-size:1.4rem; transform:translateX(60%);  }
	.worksWrap .pfListWrap .pfList li:nth-child(2n) .pfItem .pfText .tit { transform:translateX(-50%);  }
	.worksWrap .pfListWrap .pfList li:nth-child(2n) .pfItem .pfText .desc { transform:translateX(-60%);  }
	*/
}


/* 채널톡 위치 수정 */