#occasion .header {
    display:block;
    /* padding:15px 0 20px 0; */
    letter-spacing:2px;
}
#occasion .header h1 {line-height:2;}
#occasion img.header-banner {margin-top:-1px;}

h2, h3 {letter-spacing:1px;}

nav {display:block;margin:20px auto;text-align:center;}
nav a {font-weight:bold;letter-spacing:1px;}
nav small {
    /* padding:0 25px; */
    padding:0 3%;
}
/* ul.occasions {display:block;}
ul.occasions li {display:block;float:left;width:320px;height:320px;margin:5px 10px 5px 0;} 

ul.occasions .top {width:320px;height:320px;margin:0 10px 5px 0;display:block;float:left;-moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}
ul.occasions .top:hover {background:rgba(0, 0, 0, 0.35);}
ul.occasions .top h2 {text-align:center;margin:120px auto;font-size:36px;line-height:1.5;color:rgba(255, 255, 255, 0);font-family:Helvetica,Arial,"Microsoft JhengHei",微軟正黑體;}
ul.occasions .top h2 small, ul.occasions .top h2 span a {color:rgba(255, 255, 255, 0);font-size:70%;display:block;}
ul.occasions .top h2 span {display:none;border-top:1px solid #fff;margin:20px 70px;padding-top:20px;}
ul.occasions .top h2 span a {font-size:40%;line-height:1.5;font-weight:bold;}
ul.occasions .top:hover h2 span {display:block;}
ul.occasions .top:hover h2, ul.occasions .top:hover h2 small, ul.occasions .top:hover h2 span a {color:rgba(255, 255, 255, 1);}
ul.occasions .top:hover h2 span a:hover {color:#e88621;}

ul.occasions li.business .top h2 {margin:90px auto;}
ul.occasions li.right {float:right;margin:5px 0;}
ul.occasions li.holiday {background:url(/images/tintint/common/occasion/occasion-xmas.jpg) no-repeat;}
ul.occasions li.wedding {background:url(/images/tintint/common/occasion/occasion-wedding.jpg) no-repeat;}
ul.occasions li.baby {background:url(/images/tintint/common/occasion/occasion-baby.jpg) no-repeat;}
ul.occasions li.birthday {background:url(/images/tintint/common/occasion/occasion-birthday.jpg) no-repeat;}
ul.occasions li.school {background:url(/images/tintint/common/occasion/occasion-school.jpg) no-repeat;}
ul.occasions li.business {background:url(/images/tintint/common/occasion/occasion-business.jpg) no-repeat;} */

/* container */
.occasions .occasions-tag{
    display: block;
    width: 100%;
    /* height: 320px; */
}
.occasions .occasions-tag img{
    width: 100%;
}
.occasions .occasions-tag .top{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
}
.occasions .occasions-tag .top h2{
    text-align: center;
    font-size: 36px;
    line-height: 1.5;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 1);
    font-family: Helvetica,Arial,"Microsoft JhengHei",微軟正黑體;
}
.occasions .occasions-tag .top h2 small, .occasions .occasions-tag .top h2 div a{
    color: rgba(255, 255, 255, 1);
    font-size: 70%;
    display: block;
}
.occasions .occasions-tag .top h2 div a{
    color: rgba(255, 255, 255, 1);
    font-size: 40%;
    line-height: 1.5;
    font-weight: bold;
}
.occasions .occasions-tag .top:hover{
    opacity: 1;
}
.occasions .occasions-tag .top h2 div a:hover{
    color: #e88621;
}
/* container */

.block-title {display:block;padding-top:40px;text-align:center;}
.block-title h2 {display:inline-block;margin:0 auto;color:#999;background:url(/images/tintint/common/occasion/gift-icon.png) no-repeat top left;padding-left:40px;line-height:24px;}

/* ul.holidays {display:block;}
ul.holidays li {display:block;float:left;width:238px;height:268px;margin:5px 9px 15px 0;background-position:top;}
ul.holidays li.right {float:right;margin:5px 0;}
ul.holidays li h5 {margin-top:238px;line-height:2;font-size:13px;text-align:center;color:#999;font-weight:bold;letter-spacing:1.5px;}
ul.holidays li.fathersday {background:url(/images/tintint/common/occasion/holiday-fathersday.jpg) no-repeat;}
ul.holidays li.valentinesday {background:url(/images/tintint/common/occasion/holiday-valentinesday.jpg) no-repeat;}
ul.holidays li.teachersday {background:url(/images/tintint/common/occasion/holiday-teachersday.jpg) no-repeat;}
ul.holidays li.xmas {background:url(/images/tintint/common/occasion/holiday-xmas.jpg) no-repeat;}
ul.holidays li.cnnewyear {background:url(/images/tintint/common/occasion/holiday-cnnewyear.jpg) no-repeat;}
ul.holidays li.whiteday {background:url(/images/tintint/common/occasion/holiday-whiteday.jpg) no-repeat;}
ul.holidays li.mothersday {background:url(/images/tintint/common/occasion/holiday-mothersday.jpg) no-repeat;}
ul.holidays li.gift {background:url(/images/tintint/common/occasion/holiday-gift.gif) no-repeat;}

ul.holidays .top {width:238px;height:238px;margin:0 9px 0 0;display:block;float:left;-moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;}
ul.holidays .top:hover {background:rgba(0, 0, 0, 0.35);}
ul.holidays .top h2, ul.holidays .top h3 {font-size:24px;text-align:center;margin:0 auto;line-height:1.5;color:rgba(255, 255, 255, 0);font-family:Helvetica,Arial,"Microsoft JhengHei",微軟正黑體;}
ul.holidays li.gift .top h3 {margin:80px auto;}
ul.holidays .top h2 {font-size:30px;margin:50px auto 0 auto;}
ul.holidays .top h3 small {color:rgba(255, 255, 255, 0);font-size:70%;display:block;}
ul.holidays .top:hover h2, ul.holidays .top:hover h3, ul.holidays .top:hover h3 small {color:rgba(255, 255, 255, 1);}
ul.holidays strong {font-weight:normal;} */

.holidays .holidays-tag{
    display: block;
    width: 100%;
    /* height: 320px; */
}
.holidays .holidays-tag img{
    width: 100%;
}
.holidays .holidays-tag .top{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 1);
    opacity: 0;
} 
.holidays .holidays-tag .top:hover{
    opacity: 1;
}
.holidays .holidays-tag .top h2, .holidays .holidays-tag .top h3 {
    font-size: 24px;
    text-align: center;
    line-height: 1.5;
    font-family: Helvetica,Arial,"Microsoft JhengHei",微軟正黑體;
}
.holidays .holidays-tag .top h2{
    font-size: 30px;
    margin-bottom: 0;
}
.holidays .holidays-tag .top h3 small {
    font-size: 70%;
    display: block;
    font-weight: normal;
}
.holidays .holidays-tag h5 {
    margin-top: 5px;
    line-height: 2;
    font-size: 13px;
    text-align: center;
    color: #999;
    font-weight: bold;
    letter-spacing: 1.5px;
}

@media (max-width: 768px){
    .occasions .occasions-tag .top{
        opacity: 1;
        height: auto;
        top: calc(50% - 30px);
        padding: 5px 0;
    }
    .occasions .occasions-tag.business .top{
        top: calc(50% - 45px);
    }
    .holidays .holidays-tag .top{
        opacity: 1;
        height: auto;
        top: calc(50% - 55px);
    }
    .occasions .occasions-tag .top h2{
        font-size: 30px;
        font-weight: normal;
    }
    .holidays .holidays-tag.gift .top{
        display: none;
    }
    .holidays .holidays-tag .top h2, .holidays .holidays-tag .top h3 {
        font-size: 18px;
        font-weight: normal;
    }
}
@media (max-width: 540px){
    .occasions .occasions-tag .top {
        font-weight: normal;
    }
    .occasions .occasions-tag .top h2{
        font-size: 20px;
        font-weight: normal;
    }
    .holidays .holidays-tag .top {
        font-weight: normal;
    }
    .holidays .holidays-tag .top h2, .holidays .holidays-tag .top h3 {
        font-size: 12px;
        font-weight: normal;
    }
    .holidays .holidays-tag .top h2{
        font-size: 20px;
        margin-bottom: 0;
    }
    .holidays .holidays-tag h5 {
        font-size: 12px;
    }
    .holidays .holidays-tag .top{
        top: calc(50% - 35px);
    }
    .occasions .occasions-tag .top h2 div a{
        font-size: 60%;
    }
}