@charset "utf-8";

/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,figure,article,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td ,header {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;	
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}

a img {
	border: none;
}

.clean { clear:both;}

.clearfix {
  overflow: auto;
}

img { max-width:100%;}

.left { float: left;}
.right { float: right;}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

html { scroll-behavior: smooth; }

body {     background:#fffceb; }
#web-outer {
    font-family:"微軟正黑體","Roboto", sans-serif;
	max-width: 1920px;
	overflow: hidden;
    background:#fffceb;
    margin: 0 auto;
}
/*======================
====Main CSS=====
=======================*/

/*----header------*/

header { }

.mainpic { 
    margin: 0 auto;
    height: 882px;
    background: #ffdf3e url("../images/bg-header.webp") bottom center no-repeat;
    padding-top: 50px;
}

.mainpic-in { 
    margin: 0 auto;
    padding:100px 10px 20px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1350px;
} 

.header-pic { width:40%; margin:0 1%;}
.content { width:56%; margin:0 1%; }

header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    /*width: 100%;*/
}

.flex-second-box { 
    display: flex;
    align-items: flex-end;
    justify-content:space-between;
}
.logo { width:56%; margin:0 1%; }
.pig {  width:38%; margin:0 1%; padding-bottom: 20px; }
.pig-xs { display: none; }


.main-title { 
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 600;
    font-style: normal;
    color:#482b97;
    font-size: 80px;
    /*font-size: clamp(40px, 5vw, 80px);*/
  }
.main-title p { display: inline;} 
.main-title span { 
    font-size: 36px;
    writing-mode: vertical-lr;
    font-weight: 500;
    padding-top: 10px;
  }

.main-title strong { 
    font-size: 120px;
    /*font-size: clamp(80px, 8vw, 120px);*/
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    color:#e60a0f;
    letter-spacing: -10px;
  }
 .main-title em { 
    font-size: 90px;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    color:#e60a0f;
  }  

.date { margin: 50px 0 20px 0;}
.date span { 
    background: #482b97;
    font-size: 36px;
    color:#ffffff;
    font-family: "Roboto", sans-serif;
    border-radius: 35px;
    padding:6px 26px;
}
.date span em { 
    display: none;
    font-size: 26px;
    font-style: normal;
    padding-right: 5px;
}

.offers-outer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    text-align:center;

}
.circle {
    font-size: 34px;
    font-weight: bold;
    color: #ffffff;
    background: #482b97;
    width: 42px;
    height: 42px;
    border-radius: 50% ;
    vertical-align: baseline;
    z-index: 900;
    margin-top: 40px;
    flex-shrink: 0;
}
.offers {
    background:#ffffff ;
    border-radius: 25px;
    margin:20px -6px;
    padding: 20px;
    width: 270px;
    
}
.offers p {
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    background: #7371fc;
    max-width: 94%;
    border-radius: 25px;
    margin: 0 auto;
    padding:12px 6px;
    text-align: center;
 }

.offers h2 { padding-top: 12px;} 
.offers h2 span {
    font-size: 27px;
    font-weight: 500;
    color: #482b97;
    display: block;
    font-family: "Roboto", sans-serif;
    padding-top: 5px;
}
.offers h2 span.small {
    font-size: 17px;
    padding-top: 10px;
}
/*.offers h2.w768 span { display: inline; }*/

.offers h2 span em {
    font-size: 35px;
    font-weight: 800;
    color: #e60a0f;
    font-family: "Roboto", sans-serif;
    font-style: normal;
}
.offers h2 span strong {
    font-size: 62px;
    font-weight: 800;
    color: #e60a0f;    
    font-family: "Roboto", sans-serif;
}

.warning { color:#003e6d; font-size: 16px; font-weight: 600; position:sticky; top:730px;  text-align: right; padding-right: 10px; }
.warning-xs { color:#003e6d; font-size: 16px; font-weight: 600;  display: none;}

/*======================
====nav CSS=====
=======================*/

#main-nav{
    width: 100%;
    z-index: 990;  
    background:#7371fc; 
    margin:0 auto;
}
 
 #block_menu {
     text-align: center;
     font-weight: 600;
     overflow: hidden;
 }
 
 .sticky {
     top:40px;
 }

.nav {  margin:0 auto;  }
.nav li {  
    display:inline-block; font-weight: 500; font-size: 18px; letter-spacing: 1px;
    color:#ffffff; margin: 10px 4px; 
}
.nav li a { display:block; width:100%; height:100%; text-align: center; padding:8px 10px; text-decoration: none; color:#d2f2fe; }
.nav li a:hover,.nav li a.active { color:#ffffff; background: #482b97; border-radius: 20px; }


/*======================
====main CSS=====
=======================*/ 

.first { padding-top:90px; margin-top: -90px;}

.coupon-outer { padding:100px 20px 100px 20px;   }

.subtitle {
    background: url("../images/bg-subtitle.webp") top center no-repeat;
    height: 120px;
    font-size: 50px;
    font-weight: 900;
    color: #482b97;
    text-align: center;
    line-height: 88px;
    max-width: 434px;
    margin:0 auto;
}
.subtitle img {  
    display: block;
    margin-top: -130px;
}
.coupon-info { 
    max-width: 1024px;
    font-weight: 500;
    font-size: 20px;
    color:#222222;
    margin: 0 auto; 
    line-height: 2em;
    padding-top: 10px;
}

/*.coupon-info::before { 
    content: "◆";
    font-size: 18px;
    color:#222222;
    padding-right:4px;
}*/
.coupon-info { 
  /*  padding-left: 18px;
    text-indent: -18px;*/
}

.coupon-info span { 
    color:#ed4300;
    font-weight: 600;
}
.coupon-info em { 
    color:#e86301;
    border: 1px solid #e86301;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    padding:4px 3px;
    margin-right: 10px;
}
.coupon-info a { color:#2c6ce2; }
.coupon-info a:hover { color:#35bce6; }

.coupon-info a.bookmark { 
    color:#3f3f3f; background: #ecd5b6; border-radius: 15px; margin-left: 6px;
    text-decoration: none; font-size: 16px; font-weight: 600; padding:0 12px;  display: inline-block;
}
.coupon-info a.bookmark:hover { background: #f8e8d2; }

.subtitle02 {
    background: url("../images/bg-subtitle02.webp") center center no-repeat;
    height: 54px;
    font-size: 32px;
    font-weight: 600;
    color: #282828;
    text-align: center;
    line-height: 54px;
    margin-top: 100px;
    margin-bottom:40px;
}
.subtitle02 span { 
    font-size: 30px;
    padding-left: 20px;
}

.subtitle03 {
    background: url("../images/bg-subtitle03.webp") center center no-repeat;
    height: 54px;
    font-size: 32px;
    font-weight: 600;
    color: #282828;
    text-align: center;
    line-height: 54px;
    margin-top: 60px;
    margin-bottom:40px;
}
.subtitle03 span { 
    font-size: 30px;
    padding-left: 38px;
}

.subtitle04 {
    background: url("../images/bg-subtitle04.webp") center center no-repeat;
    height: 142px;
    font-size: 50px;
    font-weight: 800;
    color: #003e6d;
    text-align: center;
    line-height: 98px;
}
.subtitle04 span { 
    font-size: 25px;
    color: #ffecdd;
    font-weight: 600;
    display: block;
    line-height: 36px;
}
.subtitle05 {
    background: url("../images/bg-subtitle05.webp") center center no-repeat;
    height: 58px;
    font-size: 32px;
    font-weight: 600;
    color: #282828;
    text-align: center;
    line-height: 58px;
    margin-bottom: 30px;
}

.step-outer {
    margin: 0 auto;
    max-width: 1024px;
    display: flex; flex-wrap:wrap; justify-content: center;
    padding-top: 40px;
}

.step-outer2 {
    margin: 0 auto;
    max-width: 1300px;
    display: flex; flex-wrap:wrap; justify-content: center;
    padding-top: 40px;
}

.step { 
    margin:0 1%; flex:0 0 31%; align-items: stretch; align-content: stretch; margin-bottom: 80px;  
    display: flex; flex-direction: column;  
    border: 2px solid #e60911;  background: #ffffff;  border-radius: 20px;
}
.step2 { 
    margin:0 1%; flex:0 0 23%; align-items: stretch; align-content: stretch; margin-bottom: 80px; 
    display: flex; flex-direction: column;  
    border: 2px solid #e60911;  background: #ffffff;  border-radius: 20px;
}

.number {  
    margin:0 auto;background: #e60911; 
    text-align: center; width: 80px; height: 40px;
    border-radius: 80px 80px 0 0; margin-top: -40px;
 }

 .number p { font-size: 26px; font-family: "Roboto", sans-serif; font-weight: 700; color:#ffffff; line-height: 40px; }


.flex-pic {  padding:10px 0 6px 0; flex:1; background: #ffffff; }

.step h4,.step2 h4 { 
    margin:0 8px; padding:16px 0;
    color:#454443; font-size: 28px; font-weight: 600;
    border-bottom: 1px solid #f38280; text-align: center;
}

.step h5,.step2 h5 { 
    background: #e60911; padding:8px 8px; 
    color:#ffffff; font-size: 17px; font-weight: 600;
    border-radius:0 0 18px 18px; line-height: 1.6em;
    text-align: center;
}

.step h5 span { 
    display: block; text-align: left;
    padding-left:16px; text-indent: -8px;
}

.step h5 em { 
    color:#fff830; font-size: 14px; font-weight: 600;
    line-height: 1.6em; font-style: normal; display: block;
}

/*======================
==== Slider CSS=====
=======================*/
.recommend-outer { 
    background: #ffdf3e;
    padding:100px 0 40px 0 ;
}

/*輪播區塊*/
.block-center {
	width: 100%;
	max-width:1300px;
	margin: auto;
	clear: both;
	position: relative;
    padding:0 15px;
}

.slick-dots {
    position: absolute;
    bottom: 35px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    width: 100%;
}

.slick-dots li {
	display: inline-block;
	margin: 0 5px;
}

.slick-dots .slick-active button {
	background: #fa9777;
}

.slick-dots button {
    background: #fff0d4;
    border: none;
    border-radius: 50px;
    display: inline-block;
	text-indent: -9999px;
	line-height: 0px;
	height: 10px;
	width: 10px;
}

.slick-dots button:hover {
	cursor: pointer;
    background: #fa9777;
}

ul.slick-dots {
    text-align: center;
    margin-top: 0.5rem;
}

/*商品區*/

.pic-slide{
	padding: 1rem 0 5rem;
}
a.product {
	margin: 0.5rem;
	transition: all 0.3s ease-in;
}
a.product:hover {
	transform: translateY(4px);
}
.product_pic {
	text-align: center;
    overflow: hidden;
}
a.product:hover .product_pic>img{opacity: 0.9;}

.ad {
    width: 100%;
    margin: 1rem auto;
	position: relative;
	overflow: hidden;
}


/*----*/

.notice-outer { margin:0 auto; max-width: 1024px; padding:50px 10px 100px 10px; }
h3.notice-title { 
    font-size: 19px;
    font-weight: 600;
 }
.notice-in { padding:10px 0 30px 0; }

.notice-in li::before {
    content: "◆";
    margin-right: 6px;
    font-size: 16px;
    color:#1c1b1b;
    display: inline-block;     
}
.notice-in li { 
    color:#1c1b1b;
    font-size: 16px;
    font-weight: 500;
    text-indent: -9px;
    padding-left: 22px;
    line-height: 1.8em;
 }

/*------media query----------*/

@media only screen and ( max-width:1320px) 
{ 
    .mainpic { height: auto; padding-top: 20px; }

}
@media only screen and ( max-width:1250px) 
{ 
.header-pic { width:36%; }
.content { width:60%;  }
.main-title { font-size: 75px; }
.main-title span { font-size: 32px; }
.main-title strong { font-size: 115px; }
.main-title em { font-size: 85px; }  
}

@media only screen and ( max-width:1100px) 
{ 

.main-title { font-size: 70px; }
.main-title span { font-size: 30px; }
.main-title strong { font-size: 110px; }
.main-title em { font-size: 80px; }  
.date span { font-size: 30px; }

}

@media only screen and ( max-width:1024px) 
{ 
    .main-title { font-size: 65px; }
    .main-title span { font-size: 25px; }
    .main-title strong { font-size: 105px; }
    .main-title em { font-size: 75px; }  
    .date span { font-size: 26px; }
    .date { margin: 40px 0 20px 0;}
    .mainpic { background: #ffdf3e url("../images/bg-header-md2.webp") left top no-repeat;  }    
}

@media only screen and ( max-width:950px) 
{ 
    .header-pic { width:30%; }
    .content { width:66%;  }
        
        
   /*.offers p { padding:8px 4px; }
   .offers p span { display: block;  }*/
}

@media only screen and ( max-width:850px) 
{ 
    .main-title { font-size: 60px; }
    .main-title span { font-size: 24px; }
    .main-title strong { font-size: 90px; }
    .main-title em { font-size: 60px; }  

    .circle { margin-top: 0px;}
    .offers { padding: 10px 6px;  width: 240px; }
    .offers h2 span { font-size: 20px; }  
    .offers h2 span em { font-size: 30px; }
    .offers h2 span strong { font-size: 46px; }
    
    .step { flex:0 0 48%; ;}
    .step2 { flex:0 0 48%; ;}
}

/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
    .first { padding-top:0px; margin-top: 0px;}
    #main-nav { display: none;}
    .mainpic { background: #ffdf3e url("../images/bg-header-md.webp") right bottom no-repeat;  }    
    .mainpic-in { flex-direction: column; padding:40px 10px 40px 10px;  }
    .header-pic { display: none; }
    .content { width:98%; margin:0 1%; }
    .main-title { font-size: 75px; }
    .main-title span { font-size: 30px; }
    .main-title strong { font-size: 105px; }
    .main-title em { font-size: 65px; }  
    .date span { font-size: 22px; padding:14px 20px 10px 20px; }
    .date { margin: 40px 0 20px 0;}
    .date span em { display: inline-block;}


}
@media only screen and (max-width:650px) 
{   
    .main-title { font-size: 65px; }
    .main-title span { font-size: 25px; }
    .main-title strong { font-size: 105px; }
    .main-title em { font-size: 75px; }  
    .date span em { font-size: 22px; }
    .date span { font-size: 18px; }
}

@media only screen and (max-width:600px) 
{   
    .main-title { font-size: 60px; }
    .main-title span { font-size: 24px; }
    .main-title strong { font-size: 90px; }
    .main-title em { font-size: 60px; }  
    .subtitle02,.subtitle03 { background:none; background: #f8ce17; font-size: 28px; }
    .subtitle02 span,.subtitle03 span { background:#ffdfa3; margin-left: 6px; padding-left: 8px; padding-right:8px;  font-size:26px;  }
    .date span em { font-size: 20px; }
    .date span { font-size: 17px; }

}

@media only screen and (max-width:550px) 
{   
    .main-title { font-size: 56px; }
    .main-title span { font-size: 24px; }
    .main-title strong { font-size: 80px; }
    .main-title em { font-size: 60px; }  
    .date span em { font-size: 20px; }
    .date span { font-size: 16px; }
}

/*---手機版-----*/

@media only screen and (max-width:500px) 
{
    .main-title p { display: block; padding-top: 20px; } 
    .main-title { font-size: 75px; text-align: center; }
    .main-title span { font-size: 32px; padding-right: 6px; }
    .main-title strong { font-size: 115px; }
    .main-title em { font-size: 85px; }  

    .date span em { font-size: 25px; }
    .date span { font-size: 20px; }

    .flex-second-box { flex-direction: column; text-align: center;}
    .logo { width:98%; }
    .pig {  width:98%;  order:1; display: none;}
    .logo img { width:75%; }
   
    .pig-xs img { width:85%; }
    .pig-xs { display: block; padding-top: 20px;}

    .step-outer,.step-outer2 { margin-top: 80px;} 
    .step { flex:0 0 98% ;}
    .step2 { flex:0 0 98% ;}
    .subtitle02 span,.subtitle03 span { display: block; margin-left: 0px; }

}

@media only screen and (max-width:480px) 
{
    
}