/* footerStyle.css */

#ft{background: #333; color: #888;} 
#ft a, #ft_copy{color: #888;}
#ft_wr{width: 1200px; padding: 50px 20px; overflow: hidden;}
#ft_sns{width: 65%;}
#ft_sns ul{float: right; overflow: hidden;}
#ft_sns ul li{float: left; width: 40px; height: 40px; text-indent: -9999px; overflow: hidden; margin-left: 15px;}
#ft_sns ul li a{width: 100%; height: 100%; background: url(../../img/common/ft_sns1.png); background-size: 100% auto; }
#ft_sns ul li.ft_sns2 a{background-image: url(../../img/common/ft_sns2.png);}
#ft_sns ul li.ft_sns3 a{background-image: url(../../img/common/ft_sns3.png);}
#ft_sns ul li.ft_sns4 a{background-image: url(../../img/common/ft_sns4.png);}
#ft_contact{width: 40%; text-align: right; margin-top: 10px;}
#ft_contact strong{font-size: 36px; font-weight: 600; line-height: 50px;}
#ft_link{width: 50%; height: 20px; margin-top: -40px; margin-bottom: 30px;}
#ft_link > a{float: left; height: 100%; line-height: 20px; font-size: 14px;}
#ft_link > a::after{content: ""; display: block; width: 1px; height: 15px; background: #888; margin-left: 10px; float: right; margin-right: 10px; margin-top: 3px;}
#ft_link > a.ft_link3::after{display: none;}
#ft_company{width: 60%; margin-bottom: 30px;}
#ft_company ul{overflow: hidden;}
#ft_company li{float: left; line-height: 20px; font-size: 14px;}
#ft_company li::after{content: ""; display: block; width: 1px; height: 15px; background: #888; margin-left: 10px; float: right; margin-right: 10px; margin-top: 3px;}
#ft_company li.ft_company3::after, #ft_company li.ft_company6::after{display: none;}
#ft_company li.ft_company6 a{display: inline-block;}
#ft_copy{width: 70%; font-size: 14px; margin-top: -25px;}
@media screen and (min-width:1200px){
    #ft_sns{float: right;}
    #ft_sns ul{float: right;}
    #ft_sns ul li{float: left;}
    #ft_contact{float: right;}
    #ft_link{float: left;}
    #ft_company{float: left;}
    #ft_copy{float: left;}
}
@media screen and (max-width:1199px){
    #ft{width: 100%;}
    #ft_wr{width: 100%; padding: 40px 0;} 
    #ft_sns,
    #ft_contact,
    #ft_link,
    #ft_company,
    #ft_copy{overflow: hidden; width: 100%;}  
    #ft_sns ul{float: none; width: 264px; margin: 0 auto;}
    #ft_sns ul li{margin: 0; width: 25%;}
    #ft_sns ul li a{background-size: 40px auto; background-position: center; background-repeat: no-repeat;}
    #ft_contact{margin-top: 20px; text-align: center; padding-bottom: 40px; border-bottom: 1px solid #888;}
    #ft_link{text-align: center; width: 313px; margin: 20px auto 0;}
    #ft_company{ text-align: center; margin: 30px auto;}
    #ft_copy{margin-top: 0; text-align: center;}
    #ft_company{width: 100%;}
    #ft_company li{float: none; display: inline-block;}  
    #ft_company li.ft_company2::after, #ft_company li.ft_company3::after{display: none;} 
    #ft_copy span{display: block;}
    #ft_company li.ft_company3{display: block;}
    #ft_contact strong{font-size: 36px; line-height: 50px;}
    #ft_contact p{font-size:14px;}
}
@media screen and (max-width:480px){
    #ft_company{padding: 0 20px;}
    #ft_company li::after{display: none;} 
    #ft_company li.ft_company6{display: block;}
    #ft_company li.ft_company1::after, #ft_company li.ft_company4::after{display: block;}
    #ft_link{width: 274px; width:294px !ie; }
    #ft_link > a{font-size: 12px;}
    #ft_company li{font-size: 12px;}
    #ft_copy{font-size:12px;}
    #ft_contact{margin-bottom: 30px; padding: 0 20px 30px;}
    #ft_contact strong{font-size: 30px; line-height: 40px;}
    #ft_contact p{font-size:12px; line-height: 1.5;}
}
@media screen and (max-width: 430px){
    #ft_company li.ft_company4{display: block;}
    #ft_company li.ft_company4::after{display: none;}
}

/*********************************************************/

/* ÇÃ·ÎÆÃ Äü¸Þ´º(»ó´ã°ü·Ã) */
/* theme ³»ÀÇ tail.php ÇÏ´Ü¿¡ ÇÔ¼öÀÖÀ½ / ¿µÄ«Æ®´Â shop/shop.tail.php ÇÏ´Ü¿¡ ÀÖÀ½

/*********************************************************/
.fixed_quick {
    position: fixed;
    z-index: 99999;
    bottom: 10px; /* À§Ä¡ */
    right: 20px; /* À§Ä¡ */
}

.quick {
    border-radius: 50%;
    text-align: center;
    height: 50px; /* Å©±â */
    width: 50px; /* Å©±â */
    box-sizing: border-box;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05); /* ±×¸²ÀÚ */
    cursor: pointer;
    transition: all 350ms cubic-bezier(0.50, 1, 0.07, 1);
    border:0.1px solid rgba(0,0,0,0.1); /* Å×µÎ¸®¶óÀÎ */
}
.quick svg {transition: all 350ms cubic-bezier(0.50, 1, 0.07, 1);}
.quick:hover {box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.01); border:0.1px solid rgba(0,0,0,0.5);}
.quick:hover svg {fill: #000;} /* ¸¶¿ì½º¿À¹ö½Ã svg ¾ÆÀÌÄÜÀÇ fill º¯°æ */

/* Äü¸Þ´º °³º° ½ºÅ¸ÀÏ */
.quick1 {background-color: #F7E600; display: none;}
.quick1 svg {margin-top: 13px;}

.quick2 {background-color: #fff; margin-top: 8px; display: none;}
.quick2 svg {margin-top: 13px;}

.quick3 {background-color: #fff; margin-top: 8px; display: none;}
.quick3 svg {margin-top: 13px;}

.quick4 {background-color: #fff; margin-top: 8px;}
.quick4 svg {margin-top: 13px;}
/*********************************************************/

/* ¸ÇÀ§·Î°¡±â ¹öÆ°(PC¹öÀü¿¡¸¸»ç¿ë)*/
#up_btn {position:fixed;display:none;bottom:45%;right:20px;border:0px solid #e5e7ea;border-top:1px solid #e5e7ea;width:30px;height:30px;background:#2F2F2F;font-size:1.2em;color:#EAEAEA; border-radius:50%;z-index:9999;
opacity:0.8;filter:"alpha(opacity=80)";-ms-filter:"alpha(opacity=80)";
-webkit-box-shadow:inset 0 3px 0px rgba(0, 0, 0, .125);
-moz-box-shadow:inset 0 3px 0px rgba(0, 0, 0, .125);
box-shadow:inset 0 3px 0px rgba(0, 0, 0, .125)
}
#up_btn i {}
#up_btn:hover {border-color:#10C557;background:#10C557;color:#fff;opacity:0.5;filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)";}
/* ¸Ç¾Æ·¡·Î°¡±â ¹öÆ°(PC¹öÀü¿¡¸¸»ç¿ë)*/
#down_btn {position:fixed;bottom:40%;right:20px;border:1px solid #a3a3a3;width:30px;height:30px;background:#fff;font-size:1.2em;color:#888; border-radius:50%;z-index:9999;
opacity:0.8;filter:"alpha(opacity=80)";-ms-filter:"alpha(opacity=80)";
-webkit-box-shadow:inset 0 0px 3px rgba(0, 0, 0, .125);
-moz-box-shadow:inset 0 0px 3px rgba(0, 0, 0, .125);
box-shadow:inset 0 0px 3px rgba(0, 0, 0, .125)
}
#down_btn:hover {border-color:#10C557;background:#10C557;color:#fff;opacity:0.5;filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)";}

@media screen and (max-width: 600px){
    #up_btn {display:none;}
	#up_btn:after {display:none;}
	#down_btn {display:none;}
	#down_btn:after {display:none;}
}
/*********************************************************/