@import url('https://fonts.googleapis.com/css2?family=Allura&family=Dancing+Script:wght@400;700&family=Monoton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
 
@font-face {
  font-family: 'GmarketSansLight';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
  font-weight: normal;
  font-style: normal;
 }
 @font-face {
  font-family: 'GmarketSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
 }
 @font-face {
  font-family: 'GmarketSansBold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
 }
 
/* ****************** SETTING ********************** */
*:: -webkit-scrollbar{width: 5px;}
*::-webkit-scrollbar-thumb{background-color:#0c4167; border-radius:0px; transition:all 0.5s;}
*::-webkit-scrollbar-track{background-color:#f2f2f2; background:rgba(255,255,255,0.5); border-radius:0;}

*{margin:0;padding:0;}
html,body {width:100%;height:100%; min-width:320px;}
body{background:#fff; *word-break:keep-all;-ms-word-break:keep-all;  -webkit-text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;-ms-text-size-adjust: 100% !important;}
body,h1,h2,h3,h4,h5,h6,th,td,input,textarea,select,option{color:#272727; font-family:'Noto Sans KR','GmarketSansMedium', 'Noto Sans KR', '³ª´®°íµñ', 'NanumGothic', 'Nanum Gothic', 'µ¸¿ò',dotum,sans-serif;font-size:100%;font-weight:normal}

br{font-family:initial;} 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, svg {display: block;}
table {border-collapse: collapse; border-spacing: 0;}
img,fieldset,iframe{border:0 none}

ul,ol,li{list-style:none}
em,address{font-style:normal}
img,input,select,textarea{vertical-align:middle}
a{color:inherit;text-decoration:none;cursor:pointer}
a:hover{color:inherit; text-decoration:none;   transition: all 0.3s ease;}
button,label{cursor:pointer;}
button{background:0;border:0;outline:0;font-size:inherit;font-weight:inherit;font-family:inherit}
button img{left:-3px;*left:auto}
html:first-child select{height:20px;padding-right:6px}
option{padding-right:6px}
textarea{overflow:auto;*margin:-1px 0;padding-right:1px}
.blind, legend, caption{position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
hr{display:none}
legend{*width:0}
:root legend{margin-top:-1px;font-size:0;line-height:0}
caption{*line-height:0}
sub {font-size:10px;}
.clear:after {clear:both;content:'';display:block;}
#bg{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;z-index:1001;}
div.ie_alert_text {display:none;position: fixed;top: 0;left: 0;width: 100%;height: 50px;background: #ddd;z-index: 10000;text-align: center;padding-top: 10px;font-size: 13px;font-family: 'Noto Sans KR', sans-serif;}
#skip-nav {font-size: 16px;line-height: 40px; position: fixed;z-index: 100000;top: -40px;left: 0;width: 100%;-webkit-transition: .4s;transition: .4s;text-align: center;color: #fff;background: rgba(0,0,0,.6);}
#skip-nav:focus{top:0}
.e_{overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-wrap:break-word;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box}
 /* container */
#wrap,#container {width:100%;position: relative;  overflow:hidden; }
#contents {position:relative;}
#wrap .inner *{-webkit-box-sizing:border-box; box-sizing:border-box;}
#wrap * {box-sizing:border-box;}
.floatBox:after {content:"";display:block;clear:both;}
.floatBox {*zoom:1;}
.fC {text-align:center;}
.fL {float:left;}
.fR {float:right;}


/***** ·¹À̾ƿô *****/
.sub_all {width:100%;margin:0;background:none;border-radius:0;}
.sub_all section {width:100%; max-width:none;margin:0;}
.sub_all img {max-width:100%;}
.sub_all .conwrap { width: calc(100% - 20px);  padding-bottom:50px; margin:0 auto; }
.sub_all .inner {width: calc(96% - 30px); margin:0 auto;}

.sub_all .inner_s {width: calc(96% - 30px);  padding-bottom:50px;  margin:0 auto; max-width:1400px; position: relative; z-index: 2; }
 

section.floatBox.ani.wb_cross.section_box {
    position: relative;
    z-index: -1; /* ¼½¼ÇÀÇ z-index¸¦ ´õ ³·°Ô ¼³Á¤ */
}





/***************************************************** header *********************************************************/
#wrap header {position:fixed;top:0;left:0;width:100%;z-index:1000000; transition:background 0.4s; height:90px;   }
#wrap header .header_wrap {position:relative;display: flex; justify-content: space-between;  align-items:center; width:100%;  margin:0 auto; box-sizing: border-box; }
#wrap header .header_wrap .right_nav {display:flex; position: relative;z-index: 10; }
#wrap header .header_wrap .left_nav {display:flex;align-items:center;}

/* ·Î°í »çÀÌÁî*/
#wrap header h1.logo {position:absolute;top:0px; left:0px;  width:300px; height:90px;  margin-right:-150px; text-align:center;}
#wrap header h1.logo a.main_logo {display:block; width:100%; height:100%; background:url(../../img/logo.png) no-repeat center / contain;  }
#wrap header h1.logo .all_prev {display:none;}

/* ·Î±×ÀÎ/ȸ¿ø°¡ÀÔ ¹öÆ° */
#wrap header .r_btn {position:absolute;top:10px; right:80px;}
#wrap header .r_btn ul li {float:left; padding:10px;}
#wrap header .r_btn ul li a{color:#fff; font-size:13px; font-family:"Montserrat","Noto Sans KR"; opacity:0.7; font-weight:600; }
#wrap header .r_btn ul li a:hover {opacity:1;}

/* »ó´Ü¸Þ´º :: pc Ãâ·Â*/ 
#wrap header #nav { position:absolute; top:22px; left:300px;  text-align:left;  }
#wrap header .gnb>li {padding:15px 40px;  position:relative; display:inline-block; }
#wrap header .gnb>li>a {display:inline-block;;  font-size:18px; color:#fff; opacity:0.8; }

/*»ó´Ü¸Þ´º - ÇÏÀ§¸Þ´º */
#wrap header .gnb>li .depth2_l {background:rgba(0,0,0,0.7); border-radius:0 0 10px 10px; padding:15px 0; width:160px; right:50%; margin:0 -80px 0 0;  border-top:3px solid #ff8135; position:absolute; top:10%; box-shadow:5px 5px 5px 5px rgba(0,0,0,0.1); transition:all 0.4s;  opacity:0;visibility:hidden;z-index: 10; }
#wrap header .gnb>li .depth2_l>li>a {display:block; padding:8px; text-align:center; font-size:13px; font-weight:400; color:#fff; opacity:0.8; letter-spacing:-0.025em; line-height: 1; transition:0.4s;  }
#wrap header .gnb>li:hover a,
#wrap header .gnb>li .depth2_l>li>a:hover {opacity:1; position:relative; }
#wrap header .gnb>li .depth2_l>li>a:after{content:"";position:absolute;bottom:0; left:0; width:0%; height:2px; transition:0.4s; }
#wrap header .gnb>li .depth2_l>li>a:hover:after{content:"";position:absolute;bottom:0; left:0; width:100%; height:2px;}
#wrap header .gnb>li:hover .depth2_l {opacity:1;visibility:visible;  top:94%;}

@media screen and (max-width:1500px){
#wrap header .gnb>li {padding:15px 30px; }
#wrap header .gnb>li>a {font-size:17px;}
}





/* ¿ìÃø ¸Þ´ºº¸±â ¹öÆ°*/
#wrap header .menu {width:24px;  height:24px; position:fixed; top:25px; z-index:100000000000; right:28px; }
#wrap header .menu_btn {position:relative; width:24px;  height:22px;  display: block !IMPORTANT; position:absolute; right:0; top:0;}
#wrap header .menu_btn span {position:absolute;display:block;width:100%;height:2px; background:#fff;}
#wrap header .menu_btn span:nth-child(1) {top:0;left:0;}
#wrap header .menu_btn span:nth-child(2) {top:10px;left:0;}
#wrap header .menu_btn span:nth-child(3) {bottom:0;left:0;}
#wrap header .close_btn {display:none;}




/* ¸Þ´º Àüüº¸±â :: »çÀÌÆ®¸Ê pc¸¸ Ãâ·Â */
.all_menu {position:fixed;top: 0px;left:0;width:100%;height: 101%;z-index:20000000;opacity:0;visibility:hidden; background:url(../../img/menu_bg.png) no-repeat center top;}
.pc_all:before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;}
.pc_all .all_inner {position:absolute;top:9%;left:0%; display:flex; width:100%; height:90%; margin:0 auto;}
.pc_all .all_inner>div .gnb {position: relative; z-index: 1; padding-top:40px; max-width:1200px; margin:0 auto;}
.pc_all .all_inner>div .gnb>li {position:relative; float:left; width:16.5%; margin-right:3.5%;}
.pc_all .all_inner>div .gnb>li:last-child {margin-right:0;}
.pc_all .all_inner>div .gnb>li>a {display: inline-block;font-family'Oswald', "Montserrat","Noto Sans KR";  font-size:20px; font-weight:700; width:100%; padding:12px 0;   text-align:left; letter-spacing:-0.025em; color:#fff;} 
.pc_all .all_inner>div .gnb>li .lnb li a {display: inline-block;font-size:16px;   padding:6px 0; color:#fff; opacity:0.7; }
.pc_all .all_inner>div .gnb>li .lnb {display:block;   width: auto;z-index:1; margin-top:10px; }
.pc_all .all_inner>div .gnb>li:nth-child(1) .lnb {display:block; }
.pc_all .all_inner>div .gnb>li .lnb li {display:block;  }
.pc_all .all_inner>div .gnb>li .lnb li a:hover {color:#fff; opacity:1;}
.pc_all .all_inner .left {position:relative; width:100%; }
.pc_all .all_inner .left:before {content:"";position:absolute;top:0;left:0;width:100%; height:100%;  z-index: -1;}
.pc_all .all_inner .left:after {content:"";position:absolute;top:0;right:0;width: 100%;height: 100%; }
.pc_all .all_inner .left .inner {position: relative;width:90%;  margin:0 auto;}
.pc_all .all_inner .left .logo { padding-bottom:10px; text-align:center; z-index:1;}

/* ¿ìÃø ´Ý±â ¹öÆ° :: pc¹öÀü Å« ¹öÆ°*/
.pc_all .close_btn {position:absolute;top:0;right:0;z-index:100;}
.pc_all .close_btn button {width:90px;height:90px;padding:30px;}
.pc_all .close_btn span {display:block;width:100%;height:2px;background:#fff;}
.pc_all .close_btn span:nth-child(1) {transform: rotate(45deg) translate(0px, 0px);}
.pc_all .close_btn span:nth-child(2) {transform: rotate(-45deg) translate(1px, -1px);}
.all .pc_all {opacity:1;visibility: visible;}
.pc_all .all_inner .left:before {height:0;}
.all .pc_all .all_inner .left:before {height:100%;transition:height 0.5s 0.05s;}
.pc_all .all_inner .right>div:before,
.pc_all .all_inner .right:before {height:0;}
.all .pc_all .all_inner .right>div:nth-child(1):before,
.all .pc_all .all_inner .right:before {height:100%;transition:height 0.5s 0.15s;}
.all .pc_all .all_inner .right>div:nth-child(2):before {height:100%;transition:height 0.5s 0.2s;}
.pc_all .all_inner>div .gnb {opacity:0;transform:translateX(-40px);}
.all .pc_all .all_inner>div .gnb {opacity:1;transform:translateX(0);transition:0.7s;}
.all .pc_all .all_inner .left .gnb {transition-delay:0.4s;}
.all .pc_all .all_inner .right>div:nth-child(1) .gnb {transition-delay:0.6s;}
.pc_all .logo, .all_menu .sns_g {opacity:0;}
.all .pc_all .logo, .all .all_menu .sns_g {opacity:1;transition:opacity 0.5s 0.3s;}
.pc_all .close_btn {opacity:0;}
.all .pc_all .close_btn {opacity:1;transition:opacity 0.5s;}
.pc_all .all_inner .left:after,
.all .pc_all .all_inner .left:after {right:0;transition:right 0.5s 1.2s;}
.mb_all {display:none;}
.mobile_all {display:none;}

/* top¹öÆ° À§·Î */
.top_btn {position:fixed; bottom:20px; right: 14px; font-family: 'Montserrat'; font-size: 18px; font-weight: 600; letter-spacing: 0.04em; color: #7C7C7C; padding-top:14px; writing-mode: vertical-rl; z-index: 10; 
background: url(../../img/top_btn_icon2.png) no-repeat center top; cursor:pointer; display:none;transition: 0.5s; }



@media screen and (max-width:1279px){
.pc_all {display:none !IMPORTANT;}
.mb_all {display:block;}
#wrap header {z-index: 1001;}
#wrap header .header_wrap {padding:10px 0;}
#wrap header .gnb {display:none;}

/* ¿ìÃø ´Ý±â ¹öÆ° :: Å×ºí¸´/¸ð¹ÙÀϹöÀü ÀÛÀº ¹öÆ°*/
#wrap header .close_btn {position: relative;display: none; width:40px;height:40px;transform: rotate(45deg); background:#2B2B2B; margin-top:-6px; margin-left:-5px;  z-index:10000; }
#wrap header .close_btn span {position: absolute; top: 50%;left: 0;display:block;width:100%;height:2px;background:#fff; margin-top: -1px;}
#wrap header .close_btn span:nth-child(2) {transform: rotate(90deg);}
.all #wrap header .menu_btn {display:none;}
.all #wrap header .close_btn {display:block;}
.depth#wrap header h1.logo a.main_logo {display:none;}
.depth#wrap header h1.logo.all_prev {display:block;}

/* ¸ð¹ÙÀϸ޴º*/
.mobile_all {position: fixed;top:0;right: -300px;width: 300px;height:100vh;background: #2B2B2B; display: block;padding-top:83px;transition:0.3s;}
.mobile_all .inner {position: relative;width:100%;height:100%;background: #2B2B2B;overflow: auto;display: flex;flex-direction: column;justify-content: space-between;}
.mobile_all .gnb_l>li {border-bottom: 1px solid rgba(255,255,255,0.2);}
.mobile_all .gnb_l>li .arrow:before {content:"";position: absolute;top: 50%;right:15px;width:20px;height: 11px;margin-top: -6px;background:url(../../img/arrow_3.png) no-repeat center / contain;}
.mobile_all .gnb_l>li>strong {position: relative;display: block;font-family:"Montserrat","Noto Sans KR"; font-size:17px;color:#fff;padding:14px 20px;letter-spacing:-0.025em;}
.mobile_all .gnb_l>li .depth2 {border-top: 1px solid rgba(0,0,0,0.2);background:#0C0C0C;display: none;}
.mobile_all .gnb_l>li .depth2>li {border-bottom: 1px solid rgba(255,255,255,0.2);}
.mobile_all .gnb_l>li .depth2>li:last-child {border-bottom: none;}
.mobile_all .gnb_l>li .depth2>li>a {position: relative;display: block;font-size:12px;color:#fff; opacity:0.9; letter-spacing:-0.025em;padding:10px 25px;}
.mobile_all .gnb_l>li .depth2>li>a.en {font-family:'Montserrat';font-weight:500;}
.mobile_all .gnb_l>li.on strong.arrow:before,
.mobile_all .gnb_l>li .depth2>li.on>a.arrow:before {transform:rotate(180deg);}
.mobile_all.show {right:0;}
.mobile_all .sns {text-align: right;padding: 0 20px 30px 0;margin-top:30px;}
.mobile_all .sns ul li  {display:inline-block; font-size:0; width:30px;height:30px; border-radius:50%;margin-left:6px;}
.mobile_all .sns ul li span {display:inline-block; border-radius:50%;margin-top:6px; width:30px; height:30px; float:left; margin-right:7px;}
.mobile_all .sns ul li:nth-child(1) span {background:#000 url(../../img/sns1.png) no-repeat center / 20px;}
.mobile_all .sns ul li:nth-child(2) span {background:#000 url(../../img/sns2.png) no-repeat center / 20px;}
.mobile_all .sns ul li:nth-child(3) span {background:#000 url(../../img/sns3.png) no-repeat center / 20px;}
}








@media screen and (max-width:767px){
#wrap header .gnb {display:none;}
#wrap header {height:48px;}
#wrap header #nav {top:48px;}
/* ·Î°í»çÀÌÁî*/
#wrap header h1.logo {width:160px; height:48px; margin-right:-80px;}
#wrap header .r_btn {top:1px; right:35px;}
#wrap header .r_btn ul li {padding:1px; display:block; float:none; line-height:100%;}
#wrap header .r_btn ul li a{font-size:10px; line-height:100%; }
#wrap header .menu {width:19px; height:16px; top:12px; right:6px;}
#wrap header .menu_btn {position:relative; width:19px;  height:16px; }
#wrap header .menu_btn span:nth-child(1) {top:0;left:0;}
#wrap header .menu_btn span:nth-child(2) {top:7px;left:0;}
#wrap header .menu_btn span:nth-child(3) {bottom:0;left:0;}
#wrap header .close_btn {width:28px;height:28px; margin-top:-24px; }
.top_btn {font-size:12px; }
#wrap header h1.logo.all_prev {width: 28px;height: 16px;}
.mb_all .mb_all_main,.mb_all .mb_all_sub,.mb_all .mb_all_last {padding: 80px 20px 0;}
.mobile_all {padding-top:51px;}
} 









/********************************************** footer ***********************************************/
#wrap footer {position:relative; width:100%;height:auto;  background:#222222; }
#wrap footer .inner {display:flex;justify-content:space-between; padding:30px 110px 30px 0px;}
#wrap footer .left {display:flex;}

/*·Î°í*/
#wrap footer .logo {margin:10px 10px 0 0; width:230px;}
#wrap footer .logo img {opacity:0.5; width:100%;}

/*ÁÖ¼Ò ¹× ¿¬¶ôó Á¤º¸*/
#wrap footer .info {padding-left:30px;border-left: 1px solid #3a3732; padding-top:10px;}
#wrap footer .info ul li {position:relative;display:inline-block;font-size:13px; color:#fff;opacity:0.6;padding:0 18px 3px 0; }
#wrap footer .info ul li:last-child {padding-right:0;}
#wrap footer .info ul li:before {content:"";position:absolute;top:6px;right:7px;width:1px;height:11px;background:#666666;}
#wrap footer .info ul li:last-child:before {background:none;}
#wrap footer .info .copy {font-size:13px; color:#fff;opacity:0.5;margin-top: 18px;padding-bottom: 8px;}

/*·Î±×ÀΠȸ¿ø°¡ÀÔ ¹öÆ°*/
#wrap footer .right {position:relative;}
#wrap footer .right .r_menu ul li {display:inline-block; position:relative;  padding:0 22px 3px 0;}
#wrap footer .right .r_menu ul li a {position:relative; font-size:12px; color:#fff; opacity:0.6; }
#wrap footer .right .r_menu ul li a:hover { opacity:1;}
#wrap footer .right .r_menu ul li:before {content:"";position:absolute;top:6px;right:9px;width:1px;height:11px;background:#454544;}
#wrap footer .right .r_menu ul li:last-child  { padding:0;}
#wrap footer .right .r_menu ul li:last-child:before  {background:none;}

/*sns ¹öÆ°*/
#wrap footer .right .sns {text-align: right;  position: absolute; right:0; top:35px;}
#wrap footer .right .sns ul li {display:inline-block; font-size:0; width:30px;height:30px; border-radius:50%;margin-left:7px;}
#wrap footer .right .sns ul li span {display:inline-block; border-radius:50%;margin-top:6px; width:30px; height:30px; float:left;}
#wrap footer .right .sns ul li:nth-child(1) span {background:#000 url(../../img/sns1.png) no-repeat center / 16px;}
#wrap footer .right .sns ul li:nth-child(2) span {background:#000 url(../../img/sns2.png) no-repeat center / 16px;}
#wrap footer .right .sns ul li:nth-child(3) span {background:#000 url(../../img/sns3.png) no-repeat center / 16px;}

@media screen and (max-width:1339px){
#wrap footer .inner {padding:25px;}
#wrap footer .logo {display:none;}
#wrap footer .info {padding:0; border:none;}
#wrap footer .info ul li,
#wrap footer .info .copy,
#wrap footer .right .r_menu ul li a {font-size:13px;}
}

@media screen and (max-width:1024px){
#wrap footer .inner {flex-wrap:wrap; padding:20px;}
#wrap footer .info ul li,
#wrap footer .info .copy,
#wrap footer .right .r_menu ul li a {font-size:10px;}
#wrap footer .right {border-top:1px solid #454544; margin-top:10px;}
#wrap footer .right .r_menu ul li { padding-right:13px;}
#wrap footer .right .r_menu ul li:before {right:4px;}
#wrap footer .right,
#wrap footer .left {width:100%; display:block; display:flex;}
#wrap footer .right {padding-top:10px; min-height:90px;}
#wrap footer .right .sns {left:0; text-align:left; top:26px;}
#wrap footer .right .sns ul li{margin-right:7px; margin-left:0;}
#wrap footer .info ul li:before {top:4px;}
#wrap footer .right .r_menu ul li:before {top:9px;}
}

/* ¸ð¼Ç */
.animated1 {-webkit-animation-duration: 1s;animation-duration: 1s; animation-delay: 0.1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated2{-webkit-animation-duration: 1s;animation-duration: 1s; animation-delay: 0.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated3 {-webkit-animation-duration: 1s;animation-duration: 1s; animation-delay: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated4 {-webkit-animation-duration: 1s;animation-duration: 1s; animation-delay: 1.0s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated5 {-webkit-animation-duration: 1s;animation-duration: 1s; animation-delay: 1.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated6 {-webkit-animation-duration: 1s;animation-duration: 1s; animation-delay: 1.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.slideInLeft {-webkit-animation-name: slideInLeft; animation-name: slideInLeft;}
.slideInRight {-webkit-animation-name: slideInRight; animation-name: slideInRight;}
.slideInBottom {-webkit-animation-name: slideInBottom; animation-name: slideInBottom;}
.slideInTop { -webkit-animation-name: slideInTop; animation-name: slideInTop;}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
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: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn;}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-13%, 0, 0);
transform: translate3d(-13%, 0, 0);
visibility: visible;
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(13%, 0, 0);
transform: translate3d(13%, 0, 0);
visibility: visible;
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slideInBottom {
from {
-webkit-transform: translate3d(0, 13%, 0);
transform: translate3d(0, 13%, 0);
visibility: visible;
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes slideInTop {
from {
-webkit-transform: translate3d(0, -13%, 0);
transform: translate3d(0, -13%, 0);
visibility: visible;
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}