@charset "utf-8";
 /*

    SideQuickMenuArea

*/
#sideQuickMenuArea{
    position: fixed;
    top: 50%;
    right: 25px;
    width: 56px;
    height: auto;
    transition: .3s;
    z-index: 50000;
    transform: translateY(-50%);
}
#sideQuickMenuArea > ul{
    display: flex;
    flex-direction: column;
    position:relative;
	background: rgba(0,0,0,0.5);
	width: 80px;
	
}
#sideQuickMenuArea > ul > li{

    position: relative;
    width: inherit;
    z-index: 5;
}

#sideQuickMenuArea > ul > li:first-child{
 
}
#sideQuickMenuArea > ul > li#quickMainEmbedToggleTrigger{
    cursor: pointer;
}
#sideQuickMenuArea > ul > li#quickMainEmbedToggleTriggerOn {position:absolute;top:132px;left:0;visibility: hidden;cursor:pointer}
#sideQuickMenuArea > ul > li.triggerHide,
#sideQuickMenuArea > ul > li.toggle{
    display: none;
}
#sideQuickMenuArea > ul > li.toggle.triggerShow,
#sideQuickMenuArea > ul > li.toggle.togleOn{
    display: flex;
    -webkit-animation: sideQuickMenuArea-togleOn-active 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000).1s both;
            animation: sideQuickMenuArea-togleOn-active 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000).1s both;
}
}
@-webkit-keyframes sideQuickMenuArea-togleOn-active {
  0% {
      transform: translateY(-10px);
  }  
  100% {
      transform: translateY(0);
  }
}
@keyframes sideQuickMenuArea-togleOn-active {
  0% {
      transform: translateY(-10px);
  }  
  100% {
      transform: translateY(0);
  }
}
#sideQuickMenuArea > ul > li.color01{
    background-color: #f07100;
}
#sideQuickMenuArea > ul > li.color02{
    background-color: #f0a900;
}
#sideQuickMenuArea > ul > li.color03{
    background-color: #8b882d;
}
#sideQuickMenuArea > ul > li.color04{
    background-color: #006e7d;
}
#sideQuickMenuArea > ul > li.top{
    background-color: #5c5c5c;
}
#sideQuickMenuArea > ul > li.top h3{
    font-size: 14px;
    font-weight: 400;
    color: white;
}
#sideQuickMenuArea > ul > li img.ico{
    position: relative;
    transition: 0.6s;
    z-index: 20;
}

#sideQuickMenuArea > ul > li.on img.ico,
#sideQuickMenuArea > ul > li:hover img.ico{
    -webkit-animation: sideQuickMenuArea-active-ico 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000).1s both;
            animation: sideQuickMenuArea-active-ico 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000).1s both;
}
@-webkit-keyframes sideQuickMenuArea-active-ico {
  0% {
    transform: scale(0.5);
  }  
  100% {
      transform: scale(1);
  }
}
@keyframes sideQuickMenuArea-active-ico {
  0% {
    transform: scale(0.5);
  }  
  100% {
      transform: scale(1);
  }
}




/* 

    QuickMainEmbed 

*/
#ft_wrap{
    width: 100%;
    height: 80px;
    background-color: black;
    animation: quickTimeset3 .7s 5s linear forwards;
}
@-webkit-keyframes quickTimeset3 {
    100% {height: 0}
}
@keyframes quickTimeset3 {
   100% {height: 0}
}
.quickMainEmbedControl{
    display: block;
    position: fixed;
    left: 80px;
    bottom: -280px;
    z-index: 1000000;
    animation: balloonAni .5s 1 ease forwards , balloonAni2 1s .5s infinite ease alternate;
    animation: quickTimeset .7s 5s linear forwards;
    transition: .7s;
}
.quickMainEmbedControl img{
    cursor: pointer;
}
.quickMainEmbedControl img#open{
    display: none;
}
.quickMainEmbedControl img#colose{
    display: block;
}

.quickMainEmbedControl .quickOpen01 {
    position:absolute;
    left:0;
    bottom:0;
}
.quickMainEmbedControl .quickOpen02 {
    position:absolute;
    left: 140px;
    bottom: 120px;
    width: 132px;
    height: 141px;
    border-radius: 10px;
    background:url('../../img/common/quick/quickOpen02Bg.png') no-repeat center center;
/*    animation:balloonAni2 1.5s .5s infinite ease alternate;*/
}
.quickMainEmbedControl .quickOpen02 #quickControlTextSlider{
    width: inherit;
    height: inherit;
}
.quickMainEmbedControl .quickOpen02 #quickControlTextSlider .swiper-slide{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.quickMainEmbedControl .quickOpen02 #quickControlTextSlider .swiper-slide > p{
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: #222222;
}
.quickMainEmbedControl .quickOpen02 #quickControlTextSlider .swiper-slide > p.again{
    font-size: 14px;
    color: #3d2922;
    margin-top: 10px;
}
.quickMainEmbedControl .quickOpen02 #quickControlTextSlider .swiper-slide > p > b{
    color: #f45161;
}

@-webkit-keyframes quickTimeset {
    0% {bottom:-220px}
    100% {bottom:0}
}
@keyframes quickTimeset {
    0% {bottom:-220px}
    100% {bottom:0}
}
@-webkit-keyframes balloonAni2 {
    0%,100% {transform:translateY(0)}
    50% {transform:translateY(-10px)}
}
@keyframes balloonAni2 {
    0%,100% {transform:translateY(0)}
    50% {transform:translateY(-10px)}
}

.quickMainEmbed{
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 80px;
    background: #cc4b93;
    background: -moz-linear-gradient(152deg, #cc4b93 0%, #5c4ae4 100%);
    background: -webkit-linear-gradient(152deg, #cc4b93 0%, #5c4ae4 100%);
    background: linear-gradient(152deg, #cc4b93 0%, #5c4ae4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cc4b93",endColorstr="#5c4ae4",GradientType=1);
    z-index: 10000;
    animation: quickTimeset2 .7s 5s linear forwards;
    transition: 0.8s;
}
@-webkit-keyframes quickTimeset2 {
    0% {bottom:0}
    100% {bottom:-235px}
}
@keyframes quickTimeset2 {
    0% {bottom:0}
    100% {bottom:-235px}
}
.quickMainEmbed .quickCloseWrap {
    position: absolute;
    top: -40px;
    right: 0;
    z-index: 9999;
}
.quickMainEmbed .quickCloseWrap img {cursor:pointer}

.quickMainEmbed > ul.menu{
    display: flex;
    width: 1210px;
    height: inherit;
	padding: 25px 0;
    margin: 0 auto;
}
.quickMainEmbed > ul.menu > li {
    flex: 1 1 125px;
    width: 125px;
    height: 100%;
    border-left: solid #b8b8b8 1px;
}
.quickMainEmbed > ul.menu > li.tel {
    flex: 1 1 auto;
    width: auto;
    height: 100%;
    border-right: solid #b8b8b8 1px;
}
.quickMainEmbed > ul.menu > li > a {
    position: relative; 
    height: inherit;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    /*background-color: #111111;*/
    z-index: 9999;
    overflow: visible;
}
.quickMainEmbed > ul.menu > li > a > img {
    display: block;
    margin-right: 5px;
}
.quickMainEmbed > ul.menu > li.tel > a > img {
    margin-right: 0;
}
.quickMainEmbed > ul.menu > li.tel > a > img.quickTelOn {
    margin-right: 0;
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    opacity:0;
    animation:quickTel 1.5s .1s infinite forwards;
}
@-webkit-keyframes quickTel {
    0%,100% {opacity:0}
    50% {opacity:1}
}
@keyframes quickTel {
    0%,100% {opacity:0}
    50% {opacity:1}
}
/*
.quickMainEmbed > ul.menu > li:hover > a > img{
    display: none;
}
*/
.quickMainEmbed > ul.menu > li > a > h2 {
    display: block;
    width: 65px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    transition: .5s;
}
.quickMainEmbed > ul.menu > li:hover > a > h2 {
    color: #e4ff00
}

.quickMainEmbed2 {
    position: fixed;
    left: 0px;
    bottom: /*-250px;*/0;
    width: 100%;
    height: 80px; 
    /*background-color: #111111;*/
	background:url('../../img/common/quick2/quickMainEmbedBg.png') no-repeat center center;
	background-size:cover;
    z-index: 9999;
/*    animation: quick2Timeset2 .7s 5s linear forwards;*/
    transition: 0.8s;
}
@-webkit-keyframes quick2Timeset2 {
    0% {bottom:0}
    100% {bottom:-250px}
}
@keyframes quick2Timeset2 {
    0% {bottom:0}
    100% {bottom:-250px}
}

.quickMainEmbed2 .quickMainEmbed_wrapper {
    position: relative;
    width: 1210px;
    height:inherit;
    margin: 0 auto;
}
.quickMainEmbed2 .quickMainEmbedDepth1{
    display: flex;
    align-items: center;
    height: inherit;
}
.quickMainEmbed2 .quickMainEmbedDepth1 > div.title {
    position: relative;
    width: 200px;
    margin-right:55px;
}
.quickMainEmbed2 .quickMainEmbedDepth1 > div.title > img {
    position: absolute;
    top: -54px;
    left:0;
    z-index: 9999;
}
.quickMainEmbed2 .quickMainEmbedDepth1 > div.title > img.titleTextOn {animation:title .8s infinite ease;}
@-webkit-keyframes title {
    0%,100% {opacity:0}
    50% {opacity:1}
}
@keyframes title {
    0%,100% {opacity:0}
    50% {opacity:1}
}


.quickMainEmbed2 .quickMainEmbedDepth1 > div.title > div.callInfo{
    display: flex;
    height: 100%;
    justify-content: center;
}
.quickMainEmbed2 .quickMainEmbedDepth1 > div.title > div.callInfo > a{
    color: #fff255;
}
.quickMainEmbed2 .quickMainEmbedDepth1 > div.title > div.callInfo > a >h4{
    font-size: 30px;
}
.quickMainEmbed2 .quickMainEmbedDepth1 > ul.menu{
    display: flex;
    width: 580px;
    height: 30px;
	padding-top: 5px;
}
.quickMainEmbed2 .quickMainEmbedDepth1 > ul.menu > li {
    flex: 0 1 85px;
    height: inherit;
    border-left: solid #b8b8b8 1px;
}
.quickMainEmbed2 .quickMainEmbedDepth1 > ul.menu > li:first-child {border-left:0}
.quickMainEmbed2 .quickMainEmbedDepth1 > ul.menu > li > a {
    position: relative; 
    height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /*background-color: #111111;*/
    z-index: 9999;
    overflow: visible;
}
.quickMainEmbed2 .quickMainEmbedDepth1 > ul.menu > li > a > img {
    display: block;
/*
    width: 32px;
    height: 31px;
*/
}
.quickMainEmbed2 .quickMainEmbedDepth1 > ul.menu > li:hover > a > img{
    display: none;
}
.quickMainEmbed2 .quickMainEmbedDepth1 > ul.menu > li > a > h2 {
    display: none;
    width: 70px;
    color: #e4ff00;
    font-size: 14px;
    font-weight: 400;
}
.quickMainEmbed2 .quickMainEmbedDepth1 > ul.menu > li:hover > a > h2 {
    display: block;
}

.quickMainEmbed2 .quickMainEmbedDepth1 > div.ad{
	position:relative;
    width: 370px;
    height: inherit;
    /*background-color: #9858db;
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);*/
}
.quickMainEmbed2 .quickMainEmbedDepth1 .quickCloseWrap {position: absolute;top: -70px;}

.quickAdImg {position: absolute;right: -170px;bottom: 0;}
.quickAdImg2 {position: absolute;right:0;bottom: 90px;animation: balloonAni3 1.5s infinite ease}
@-webkit-keyframes balloonAni3 {
    0%,100% {transform: translateY(-10px);opacity:1}
    50% {transform: translateY(0px);opacity: 1}
}
@keyframes balloonAni3 {
    0%,100% {transform: translateY(-10px);opacity:1}
    50% {transform: translateY(0px);opacity: 1}
}

#quickSlider {position:absolute;right:5px;bottom:10px;width:368px;height:55px}
#quickSlider .swiper-button-next, #quickSlider .swiper-button-prev {background:none;width:20px;height:20px;margin-top:0;transform: translateY(-50%);}
#quickSlider .swiper-button-next {right:5px}
#quickSlider .swiper-button-prev {left:5px}

#quickSlider .swiper-button-next::after,
#quickSlider .swiper-button-prev::after{
    content: '';
}