@charset "utf-8";


/* CSS Document */

body {
    background-repeat: repeat;
    font-family: "微軟正黑體", sans-serif;
    position: relative;
    transition: padding-right 0s linear, margin-right 0s linear;
}


/* 這是設定所有放大縮小的物件是使用移動方式變化 */

* {
    -webkit-transition: all 0.05s;
    -moz-transition: all 0.05s;
    -ms-transition: all 0.05s;
    -o-transition: all 0.05s;
    transition: all 0.05s;	
}

.NO {
    display: none;
}



/* wow進場後額外繼續輪播的動畫 */

.myAni {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .myAni.infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .myAni.hinge {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
    }

    .myAni.infinite.pulse {
        /*animation-delay: 2s;*/
        -webkit-animation-name: pulse !important;
        animation-name: pulse !important;
    }



/*表頭表尾 請勿------------------------------------砍*/

.top,
.footer {
    line-height: 0px;
    width: 100%;
}

.top,
.footer {
    z-index: 99;
    position: relative;
}

.width1280 {
    max-width: 1280px;
    min-width: 280px;
    height: auto;
    margin: 0 auto;
}

/* 箭頭測試 */

.scroll{
    position: absolute;
    top: 31%;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
}

.scroll-text .scroll-arrow {
    margin: 6px auto 0 auto;
}

.scroll-arrow {
    width: 57px;
    height: 57px;
    background: url(../images/cd-arrow-bottom.svg);
    background-repeat: no-repeat;
    background-position-x: center;
    display: inline-block;
    clear: both;
    /* margin: 35px auto 0 auto; */
    -webkit-animation: pointDown 0.6s 0.6s ease-in infinite alternate forwards;
    animation: pointDown 0.6s 0.6s ease-in infinite alternate forwards;
}

@-webkit-keyframes pointDown {
    from {
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
}

@keyframes pointDown {
    from {
        -webkit-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
}

.scroll-arrow:hover,
.scroll-arrow:focus {
    outline: none;
}
/* 箭頭測試 end */



/*BANNER*/

.logo{position: absolute;top: 1.4em;left: 16px;width: 50%;height: auto;}

/*PIC通用*/
img.pic-logo{width: 25%;height:auto;margin: 0 auto;}



.banner {
    position: relative;
    overflow: hidden;
}

img.banner001,img.banner002 {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}


.fill {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

img.banner001,img.banner002 {
    -webkit-animation-duration: 1.5s;
    /* Chrome, Safari, Opera */
    animation-duration: 1.5s;
}

img.banner001 ,img.banner002 {
    position: absolute;
}


/*Banner*/
img.banner_big, img.banner_min {
    background-size: 100% 100%;
    animation: shrink 30s infinite alternate;
}

@-webkit-keyframes shrink {
    0% {
        opacity: 1;
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
    }

    1.5625% {
        opacity: 1;
    }

    23.4375% {
        opacity: 1;
    }

    26.5625% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1.15);
        transform: scale(1.15);
    }
}




/*表單區*/

button.close {
    margin-right: -5%;
}

.fill {
    position: relative;
    z-index: 10;
    text-align: center;
    background-color: #f7f7f8;
}


.fill_lable {
    padding: 0.5% 2%;
}

    .fill_lable img {
        width: 100%;
        max-width: 500px;
    }

.fill_form {
    padding: 0.8% 5%;
}

.fill h2 {
    color: #550db3;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    border-bottom: 6px solid #2d0f88;
    padding-bottom: 10px;
    margin: 15px 23%;
    margin-top: 10%;
}

.fill h3 {
    color: #005caf;
    text-align: center;
    font-weight: bold;
    font-size: 40px;
    margin: 1.5% auto;
}

.fill p {
    color: #535353;
    text-align: center;
    font-size: 45px;
    margin-bottom: 2%;
}

.glyphicon {
    font-size: 30px;
    margin-left: 5px;
    color: #ffe329;
}

.fill .share {
    display: block;
    width: 280px;
    margin: 0 auto;
}

    .fill .share ul li {
        float: left;
        list-style: none;
        padding-left: 12px;
    }

.fill #sBut {
    display: block;
    max-width: 400px;
    height: auto;
    min-width: 280px;
    margin: 0 auto;
    width: 100%
}

.go_button {
    display: inline-block;
    text-decoration: none;
    font-size: 26px;
    font-weight: bold;
    margin: 10px 10px;
    line-height: 64px;
    width: 250px;
    color: #ffffff;
    line-height: 36px;
    padding: 8px;
    text-align: center;
    margin: 15px auto;
    border-radius: 50px;
    margin-bottom: 2px;
    width: 70%;
    max-width: 280px;
    background: #f9daf9;
    background: -moz-linear-gradient(top, #f9daf9 0%, #cc4df6 60%, #6a49bc 100%);
    background: -webkit-linear-gradient(top, #f9daf9 0%,#cc4df6 60%,#6a49bc 100%);
    background: linear-gradient(to bottom, #f9daf9 0%,#cc4df6 60%,#6a49bc 100%);
}

.modal  .list {
	margin-top: 59%;
}
.modal  .list02 {
	margin-top: 3%;
}
.modal a {
    color: #fff;
	text-decoration: none;
}

.modal a:hover {
    color: #fff;
	text-decoration: none;
}


.fill .statement {
    color: #535353;
    font-size: 16px;
}

    .fill .statement a {
        color: #626262;
    }

        .fill .statement a:hover {
            color: #64b2f6;
        }

.form-control {
    margin: 3px auto;
    display: block;
    width: 100%;
    height: 50px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background-color: #e6ecff;
    background-image: none;
    border-radius: 8px;
}

.statement a {
    color: #535353;
}


.option {
    font-size: 15px;
    line-height: 40px;
    /* text-align: center; */
}

.padl5 {
    margin-left: 8px;
    margin-right: 8px;
}



.btn-primary {
    color: #ffffff;
    background-color: #ffffff;
    border: none;
    width: 230px;
    margin: 30px;
}

.btn {
    display: inline-block;
    width: 37%;
    margin: 3% 0;
    font-size: 40px;
    font-weight: bold;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #ca299b;
    margin-top: 12%;
    border-radius: 50px;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #00bfff;
    border-bottom: 6px solid #6f22e2;
}

/*  bn-float  Float */
.bn-float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  background-color: #0223c5;
  color: #fff;
  font-size: 24px;
  padding: 10px 30px;
  border-radius: 50px;
  margin: 3%;
}
.bn-float:hover, .bn-float:focus, .bn-float:active {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  background-color:#00b9f6 ;
}

/*  bn-float  Float */
.bn-float02 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  background-color: #ff7800;
  color: #fff;
  font-size: 24px;
  padding: 10px 18%;
  border-radius: 50px;
  margin: 3%;
}
.bn-float02:hover, .bn-float02:focus, .bn-float02:active {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  background-color: #ff3400;
}

img.sale {
        position: absolute;
        margin-top: -80%;
        margin-left: -82%;
    }


/*  ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 大於1921 時,顯示效果↓↓↓↓    */

@media (min-width: 1921px) {

    /*BANNER*/
    img.banner_big {
        width: 100%;
        height: auto;
    }


    img.banner_min {
        display: none;
    }

    img.banner001 {
        display: block;
        top: 5vw;
        left: 37vw;
        z-index: 4;
        width: 28vw;
        height: auto;

    }
    img.banner002 {
        display: block;
        top: 7vw;
        left: 28.5vw;
        z-index: 3;
        height: auto;
        width: 46vw;
    }

   /*modal區*/

    .modal-content {
        width: 600px;
        height: 810px;
        background-color: #ffffff;
        margin: 15% auto;
        padding: 10px 40px;
        text-align: center;
        border-radius: 30px;
        border: 7px solid #0223c5;
        background-image: url(../images/bg01.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }

	.modal .title01{
		position: absolute;
		background-image: url(../images/title-bar.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 87%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -16%;
	}
	
	.modal .title02{
		position: absolute;
		background-image: url(../images/title-bar02.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 87%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -16%;
	}
	
    .modal h2 {
        font-size: 45px;
        font-weight: bold;
        color: #fff;
        padding: 20px 0px 0 51px;
    }
	
    .modal h4 {
        font-size: 45px;
        font-weight: bold;
        color: #fff;
        padding: 31px 0;
    }

    .modal h3 {
        font-size: 52px;
        font-weight: bold;
        line-height: 1.2em;
        color: #000;
        padding: 12% 0;
    }
	
	 .modal p {
        font-size: 26px;
        font-weight: bold;
        line-height: 1.3em;
        color: #616161;
        padding: 7% 0;
    }

    /*表單區*/
    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        background: #2f184e;


        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        padding-bottom: 10%;
    }
	
	.white-bg{
		position: relative;
		z-index: 10;
		text-align: center;
		padding: 40px 115px;
		background-color: #fff;
		border: 25px solid #000;
		box-shadow: 0px 0px 35px #fd00ff, 0px 0px 0px #2700ff inset;
		padding-bottom: 7%;
	}
	


    .fill h1 {
        letter-spacing: 0.5px;
        font-size: 50px;
        font-weight: bold;
        color: #b70eaf;
        position: relative;
        border-bottom: 6px solid #2d0f88;
        padding-bottom: 10px;
        margin: 15px 23%;
    }
	
    h1:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
        top: 0;
        left: 15%;
        z-index: -1;
    }

	  .fill h3 {
		  font-size: 30px;
		  font-weight: bold;
		  color: #696969;
		  margin: 3% 0;
		  padding-bottom: 3%;
	}
	
	
    .focus {
        font-size: 40px;
        font-weight: bold;
         /* FF3.6-15 */
         /* Chrome10-25,Safari5.1-6 */
         /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color: #550db3;
    }

        .focus:after {
            background: none;
            content: attr(data-text2);
            left: 0;
            position: absolute;
            text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
            top: 0;
            left: 42%;
            z-index: -1;
        }

    .fill h1 img {
        position: absolute;
        width: 17%;
        max-width: 110px;
        left: 88%;
        top: 3%;
    }

.coupon{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}
	
.coupon:hover, .coupon:focus, .coupon:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-10px);
  box-shadow: 0px 0px 23px #4100ff, 0px 0px 35px #a000d4 inset;
  border-radius: 17px;
}

    .neon-frame {
        display: block;
        max-width: 1000px;
        padding: 40px 100px;
    }

        .neon-frame > ul > li {
            text-align: left;
            color: #696969;
            font-size: 18px;
            line-height: 30px;
        }
	
}


@media (max-width: 1920px) and (min-width: 1680px) {

    /*BANNER*/
    img.banner_big {
        width: 100%;
        height: auto;
    }


    img.banner_min {
        display: none;
    }

    img.banner001 {
        top: 5vw;
        left: 0;
        right: 0;
        z-index: 4;
        margin: 0 auto;
    }
	img.banner002 {
        top: 5vw;
        left: 0;
        right: 0;
        z-index: 3;
        margin: 0 auto;
    }

	
    /*modal區*/

    .modal-content {
        width: 600px;
        height: 810px;
        background-color: #ffffff;
        margin: 15% auto;
        padding: 10px 40px;
        text-align: center;
        border-radius: 30px;
        border: 7px solid #0223c5;
        background-image: url(../images/bg01.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }

	.modal .title01{
		position: absolute;
		background-image: url(../images/title-bar.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 87%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -16%;
	}
	
	.modal .title02{
		position: absolute;
		background-image: url(../images/title-bar02.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 87%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -16%;
	}
	
    .modal h2 {
        font-size: 45px;
        font-weight: bold;
        color: #fff;
        padding: 20px 0px 0 51px;
    }
	
    .modal h4 {
        font-size: 45px;
        font-weight: bold;
        color: #fff;
        padding: 31px 0;
    }

    .modal h3 {
        font-size: 52px;
        font-weight: bold;
        line-height: 1.2em;
        color: #000;
        padding: 12% 0;
    }
	
	 .modal p {
        font-size: 26px;
        font-weight: bold;
        line-height: 1.3em;
        color: #616161;
        padding: 7% 0;
    }

    /*表單區*/
    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        background: #2f184e;


        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        padding-bottom: 10%;
    }
	
	.white-bg{
		position: relative;
		z-index: 10;
		text-align: center;
		padding: 40px 115px;
		background-color: #fff;
		border: 25px solid #000;
		box-shadow: 0px 0px 35px #fd00ff, 0px 0px 0px #2700ff inset;
		padding-bottom: 7%;
	}
	


    .fill h1 {
        letter-spacing: 0.5px;
        font-size: 50px;
        font-weight: bold;
        color: #b70eaf;
        position: relative;
        border-bottom: 6px solid #2d0f88;
        padding-bottom: 10px;
        margin: 15px 23%;
    }
	
    h1:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
        top: 0;
        left: 15%;
        z-index: -1;
    }

	  .fill h3 {
		  font-size: 30px;
		  font-weight: bold;
		  color: #696969;
		  margin: 3% 0;
		  padding-bottom: 3%;
	}
	
	
    .focus {
        font-size: 40px;
        font-weight: bold;
         /* FF3.6-15 */
         /* Chrome10-25,Safari5.1-6 */
         /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color: #550db3;
    }

        .focus:after {
            background: none;
            content: attr(data-text2);
            left: 0;
            position: absolute;
            text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
            top: 0;
            left: 42%;
            z-index: -1;
        }

    .fill h1 img {
        position: absolute;
        width: 17%;
        max-width: 110px;
        left: 88%;
        top: 3%;
    }

.coupon{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}
	
.coupon:hover, .coupon:focus, .coupon:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-10px);
  box-shadow: 0px 0px 23px #4100ff, 0px 0px 35px #a000d4 inset;
  border-radius: 17px;
}

    .neon-frame {
        display: block;
        max-width: 1000px;
        padding: 40px 100px;
    }

        .neon-frame > ul > li {
            text-align: left;
            color: #696969;
            font-size: 18px;
            line-height: 30px;
        }
}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 1400 < x <1678 時,顯示效果 ↓↓↓↓  */

 @media (max-width: 1679px) and (min-width: 1400px) {


    /*BANNER*/
    img.banner_big {
        width: 100%;
        max-width: 1920px;
        min-width: 730px;
        height: auto;
    }


    img.banner_min {
        display: none;
    }

    img.banner001 {
        top: 6vw;
        left: 0;
        right: 0;
        z-index: 3;
        margin: 0 auto;
    }

    img.banner002 {
        top: 6vw;
        left: 0;
        right: 0;
        z-index: 2;
        margin: 0 auto;
    }
	

    /*表單區*/

    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 40px 10px 50px 10px;
        background: #2f184e;
        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);

        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        padding-bottom: 10%;
		
       } 
	
	.white-bg{
		position: relative;
		z-index: 10;
		text-align: center;
		padding: 40px 115px;
		background-color: #fff;
		border: 25px solid #000;
		box-shadow: 0px 0px 35px #fd00ff, 0px 0px 0px #2700ff inset;
		padding-bottom: 7%;
	}
	


    .fill h1 {
        letter-spacing: 0.5px;
        font-size: 50px;
        font-weight: bold;
        color: #b70eaf;
        position: relative;
        border-bottom: 6px solid #2d0f88;
        padding-bottom: 10px;
        margin: 15px 23%;
    }
	
    h1:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
        top: 0;
        left: 15%;
        z-index: -1;
    }

	  .fill h3 {
		  font-size: 30px;
		  font-weight: bold;
		  color: #696969;
		  margin: 3% 0;
		  padding-bottom: 3%;
	}
	
	
    .focus {
        font-size: 40px;
        font-weight: bold;
         /* FF3.6-15 */
         /* Chrome10-25,Safari5.1-6 */
         /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color: #550db3;
    }

        .focus:after {
            background: none;
            content: attr(data-text2);
            left: 0;
            position: absolute;
            text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
            top: 0;
            left: 42%;
            z-index: -1;
        }

   .neon-frame {
        display: block;
        max-width: 1000px;
        padding: 40px 100px;
    }

        .neon-frame > ul > li {
            text-align: left;
            color: #696969;
            font-size: 18px;
            line-height: 30px;
        } 

	  /*modal區*/

    .modal-content {
        width: 600px;
        height: 810px;
        background-color: #ffffff;
        margin: 15% auto;
        padding: 10px 40px;
        text-align: center;
        border-radius: 30px;
        border: 7px solid #0223c5;
        background-image: url(../images/bg01.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }

	.modal .title01{
		position: absolute;
		background-image: url(../images/title-bar.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 87%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -16%;
	}
	
	.modal .title02{
		position: absolute;
		background-image: url(../images/title-bar02.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 87%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -16%;
	}
	
    .modal h2 {
        font-size: 45px;
        font-weight: bold;
        color: #fff;
        padding: 20px 0px 0 51px;
    }
	
    .modal h4 {
        font-size: 45px;
        font-weight: bold;
        color: #fff;
        padding: 31px 0;
    }

    .modal h3 {
        font-size: 52px;
        font-weight: bold;
        line-height: 1.2em;
        color: #000;
        padding: 12% 0;
    }
	
	 .modal p {
        font-size: 26px;
        font-weight: bold;
        line-height: 1.3em;
        color: #616161;
        padding: 7% 0;
    }
	 
.coupon{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}
	
.coupon:hover, .coupon:focus, .coupon:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-10px);
  box-shadow: 0px 0px 23px #4100ff, 0px 0px 35px #a000d4 inset;
  border-radius: 17px;
}
	 
}



/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 1400 < x <1678 時,顯示效果 ↓↓↓↓  */

@media (max-width: 1399px) and (min-width: 960px) {

    /*BANNER*/
    img.banner_big {
        width: 100%;
        max-width: 1920px;
        min-width: 730px;
        height: auto;
    }


    img.banner_min {
        display: none;
    }

    img.banner001 {
        display: block;
        top: 1%;
        left: 23%;
        z-index: 3;
        max-width: 1010px;
        height: auto;
        width: 51vw;
    }
	
    img.banner002 {
        display: block;
        top: 14%;
        left: 11.5%;
        z-index: 2;
        max-width: 1010px;
        height: auto;
        width: 76vw;
    }
	
   /*表單區*/

    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 40px 10px 50px 10px;
        background: #2f184e;
        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);

        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        padding-bottom: 10%;
		
       } 
	
	.white-bg{
		position: relative;
		z-index: 10;
		text-align: center;
		padding: 40px 35px;
		background-color: #fff;
		border: 15px solid #000;
		box-shadow: 0px 0px 35px #fd00ff, 0px 0px 0px #2700ff inset;
		padding-bottom: 7%;
	}
	


    .fill h1 {
        letter-spacing: 0.5px;
        font-size: 50px;
        font-weight: bold;
        color: #b70eaf;
        position: relative;
        border-bottom: 6px solid #2d0f88;
        padding-bottom: 10px;
        margin: 15px 23%;
    }
	
    h1:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
        top: 0;
        left: 15%;
        z-index: -1;
    }

	  .fill h3 {
		  font-size: 30px;
		  font-weight: bold;
		  color: #696969;
		  margin: 3% 0;
		  padding-bottom: 3%;
	}
	
	
    .focus {
        font-size: 40px;
        font-weight: bold;
         /* FF3.6-15 */
         /* Chrome10-25,Safari5.1-6 */
         /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color: #550db3;
    }

        .focus:after {
            background: none;
            content: attr(data-text2);
            left: 0;
            position: absolute;
            text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
            top: 0;
            left: 42%;
            z-index: -1;
        }

   .neon-frame {
        display: block;
        max-width: 1000px;
        padding: 40px 100px;
    }

        .neon-frame > ul > li {
            text-align: left;
            color: #696969;
            font-size: 18px;
            line-height: 30px;
        } 

	  /*modal區*/

    .modal-content {
        width: 600px;
        height: 810px;
        background-color: #ffffff;
        margin: 15% auto;
        padding: 10px 40px;
        text-align: center;
        border-radius: 30px;
        border: 7px solid #0223c5;
        background-image: url(../images/bg01.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }

	.modal .title01{
		position: absolute;
		background-image: url(../images/title-bar.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 87%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -16%;
	}
	
	.modal .title02{
		position: absolute;
		background-image: url(../images/title-bar02.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 87%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -16%;
	}
	
    .modal h2 {
        font-size: 45px;
        font-weight: bold;
        color: #fff;
        padding: 20px 0px 0 51px;
    }
	
    .modal h4 {
        font-size: 45px;
        font-weight: bold;
        color: #fff;
        padding: 31px 0;
    }

    .modal h3 {
        font-size: 52px;
        font-weight: bold;
        line-height: 1.2em;
        color: #000;
        padding: 12% 0;
    }
	
	 .modal p {
        font-size: 26px;
        font-weight: bold;
        line-height: 1.3em;
        color: #616161;
        padding: 7% 0;
    }
	

.coupon{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}
	
.coupon:hover, .coupon:focus, .coupon:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-10px);
  box-shadow: 0px 0px 23px #4100ff, 0px 0px 35px #a000d4 inset;
  border-radius: 17px;
}	

}


/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 768 < x <959 時,顯示效果 ↓↓↓↓  */

@media (max-width: 959px) and (min-width: 768px) {
	
.logo{position: absolute;top: 3.4em;width: 100vw;height: auto;left: 0;right: 0;}

/*PIC通用*/
img.pic-logo{width: 100%;height:auto;margin: 0 auto;text-align: center;padding: 0 17em;}


    /*BANNER*/
    img.banner_big {
        display: none;
    }

    img.banner_min {
        width: 100%;
        max-width: 960px;
        height: auto;
    }

    img.banner001 {
        display: block;
        top: 13%;
        left: 11.5%;
        z-index: 3;
        max-width: 840px;
        height: auto;
        width: 75vw;
    }
	
    img.banner002 {
        display: block;
        top: 28%;
        left: 2%;
        z-index: 2;
        max-width: 840px;
        height: auto;
        width: 94vw;
    }

    /*表單區*/

    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 0px 10px 50px 10px;
        background: #2f184e;
        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        padding-bottom: 10%;
        margin-top: -13%;
       } 
	
	.white-bg{
		position: relative;
		z-index: 10;
		text-align: center;
		padding: 23px 23px;
		background-color: #fff;
		border: 15px solid #000;
		box-shadow: 0px 0px 35px #fd00ff, 0px 0px 0px #2700ff inset;
		padding-bottom: 7%;
	}
	


    .fill h1 {
        letter-spacing: 0.5px;
        font-size: 43px;
        font-weight: bold;
        color: #b70eaf;
        position: relative;
        border-bottom: 6px solid #2d0f88;
        padding-bottom: 10px;
        margin: 15px 10%;
    }
	
    h1:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
        top: 0;
        left: 15%;
        z-index: -1;
    }

	  .fill h3 {
		  font-size: 30px;
		  font-weight: bold;
		  color: #696969;
		  margin: 3% 0;
		  padding-bottom: 3%;
	}
	
	
    .focus {
        font-size: 37px;
        font-weight: bold;
         /* FF3.6-15 */
         /* Chrome10-25,Safari5.1-6 */
         /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color: #550db3;
    }

        .focus:after {
            background: none;
            content: attr(data-text2);
            left: 0;
            position: absolute;
            text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
            top: 0;
            left: 42%;
            z-index: -1;
        }

   .neon-frame {
        display: block;
        max-width: 1000px;
        padding: 30px 23px;
    }

        .neon-frame > ul > li {
            text-align: left;
            color: #696969;
            font-size: 17px;
            line-height: 30px;
        } 

	  /*modal區*/

    .modal-content {
        width: 600px;
        height: 810px;
        background-color: #ffffff;
        margin: 15% auto;
        padding: 10px 40px;
        text-align: center;
        border-radius: 30px;
        border: 7px solid #0223c5;
        background-image: url(../images/bg01.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }

	.modal .title01{
		position: absolute;
		background-image: url(../images/title-bar.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 87%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -16%;
	}
	
	.modal .title02{
		position: absolute;
		background-image: url(../images/title-bar02.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 87%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -16%;
	}
	
    .modal h2 {
        font-size: 45px;
        font-weight: bold;
        color: #fff;
        padding: 20px 0px 0 51px;
    }
	
    .modal h4 {
        font-size: 45px;
        font-weight: bold;
        color: #fff;
        padding: 31px 0;
    }

    .modal h3 {
        font-size: 52px;
        font-weight: bold;
        line-height: 1.2em;
        color: #000;
        padding: 12% 0;
    }
	
	 .modal p {
        font-size: 26px;
        font-weight: bold;
        line-height: 1.3em;
        color: #616161;
        padding: 7% 0;
    }
	

.coupon{
  width: 97%;
}
	
.coupon:hover, .coupon:focus, .coupon:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-10px);
}
	
	
}



/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 768 < x <481 時,顯示效果 ↓↓↓↓  */

@media (max-width: 767px) and (min-width: 481px) {
	
.logo{position: absolute;top: 4.5em;width: 100vw;height: auto;left: 0;right: 0;}

/*PIC通用*/
img.pic-logo{width: 100%;height:auto;margin: 0 auto;text-align: center;padding: 0 10em;}


    /*BANNER*/
    img.banner_big {
        display: none;
    }

    img.banner_min {
        width: 100%;
        max-width: 960px;
        height: auto;
    }

    img.banner001 {
        display: block;
        top: 13%;
        left: 7.5%;
        z-index: 3;
        max-width: 840px;
        height: auto;
        width: 81vw;
    }
	
    img.banner002 {
        display: block;
        top: 32%;
        left: 1.5%;
        z-index: 2;
        max-width: 840px;
        height: auto;
        width: 93vw;
    }
	
  /*表單區*/

    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 0px 10px 50px 10px;
        background: #2f184e;
        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        padding-bottom: 10%;
       } 
	
	.white-bg{
		position: relative;
		z-index: 10;
		text-align: center;
		padding: 23px 15px;
		background-color: #fff;
		border: 15px solid #000;
		box-shadow: 0px 0px 35px #fd00ff, 0px 0px 0px #2700ff inset;
		padding-bottom: 7%;
	}
	


    .fill h1 {
        letter-spacing: 0.5px;
        font-size: 38px;
        font-weight: bold;
        color: #b70eaf;
        position: relative;
        border-bottom: 6px solid #2d0f88;
        padding-bottom: 10px;
        margin: 0px 0%;
    }
	
    h1:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
        top: 0;
        left: 15%;
        z-index: -1;
    }

	  .fill h3 {
		  font-size: 30px;
		  font-weight: bold;
		  color: #696969;
		  margin: 3% 0;
		  padding-bottom: 3%;
	}
	
	
    .focus {
        font-size: 31px;
        
         /* FF3.6-15 */
         /* Chrome10-25,Safari5.1-6 */
         /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color: #550db3;
    }

        .focus:after {
            background: none;
            content: attr(data-text2);
            left: 0;
            position: absolute;
            text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
            top: 0;
            left: 42%;
            z-index: -1;
        }

   .neon-frame {
        display: block;
        max-width: 1000px;
        padding: 30px 23px;
    }

        .neon-frame > ul > li {
            text-align: left;
            color: #696969;
            font-size: 17px;
            line-height: 30px;
        } 

	  /*modal區*/

    .modal-content {
        width: 28em;
        height: 43em;
        margin: 15% auto;
        padding: 10px 40px;
        text-align: center;
        border-radius: 25px;
        border: 7px solid #0223c5;
        background-image: url(../images/bg01.png);
        background-size: 100%;
    }

	.modal .title01{
		position: absolute;
		background-image: url(../images/title-bar.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 87%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -16%;
	}
	
	.modal .title02{
		position: absolute;
		background-image: url(../images/title-bar02.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		width: 81%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -16%;
	}
	
    .modal h2 {
        font-size: 45px;
        font-weight: bold;
        color: #fff;
        padding: 20px 0px 0 51px;
    }
	
    .modal h4 {
        font-size: 36px;
        font-weight: bold;
        color: #fff;
        padding: 10px 0;
    }

    .modal h3 {
        font-size: 37px;
        font-weight: bold;
        line-height: 1.2em;
        color: #000;
        padding: 12% 0;
    }
	
	 .modal p {
        font-size: 23px;
        font-weight: bold;
        line-height: 1.3em;
        color: #616161;
        padding: 7% 0;
    }
	

.coupon{
  width: 96%;
}
	
.coupon:hover, .coupon:focus, .coupon:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-10px);
}
		
button.close {
    margin-right: -10%;
}
	
}



/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 480 < x <300 時,顯示效果 ↓↓↓↓  */

@media (max-width: 480px) and (min-width: 321px) {

.logo{position: absolute;top: 1em;width: 100vw;height: auto;left: 0;right: 0;}

/*PIC通用*/
img.pic-logo{width: 100%;height:auto;margin: 0 auto;text-align: center;padding: 0 6em;}


    /*BANNER*/
    img.banner_big {
        display: none;
    }

    img.banner_min {
        width: 100%;
        max-width: 960px;
        height: auto;
    }

    img.banner001 {
        display: block;
        top: 13%;
        left: 8.5%;
        z-index: 3;
        max-width: 840px;
        height: auto;
        width: 81vw;
    }
	
    img.banner002 {
        display: block;
        top: 32%;
        left: 3.5%;
        z-index: 2;
        max-width: 840px;
        height: auto;
        width: 93vw;
    }
	
  /*表單區*/

    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 0px 10px 50px 10px;
        background: #2f184e;
        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        padding-bottom: 27%;
        margin-top: -7%;
       } 
	
	.white-bg{
		position: relative;
		z-index: 10;
		text-align: center;
		padding: 23px 10px;
		background-color: #fff;
		border: 10px solid #000;
		box-shadow: 0px 0px 35px #fd00ff, 0px 0px 0px #2700ff inset;
		padding-bottom: 7%;
	}
	
.form-control {
    margin: 3px auto;
    display: block;
    width: 100%;
    height: 43px;
    padding: 6px 9px;
    font-size: 16px;
    color: #555;
    border-radius: 5px;
		}

    .fill h1 {
        letter-spacing: 0.5px;
        font-size: 32px;
        font-weight: bold;
        color: #b70eaf;
        position: relative;
        border-bottom: 6px solid #2d0f88;
        padding-bottom: 10px;
        margin: 0px 0%;
    }
	
    h1:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
        top: 0;
        left: 15%;
        z-index: -1;
    }

	  .fill h3 {
		  font-size: 21px;
		  font-weight: bold;
		  color: #696969;
		  margin: 3% 0;
		  padding-bottom: 3%;
	}

    .focus {
        font-size: 22px;
        
         /* FF3.6-15 */
         /* Chrome10-25,Safari5.1-6 */
         /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color: #550db3;
    }

        .focus:after {
            background: none;
            content: attr(data-text2);
            left: 0;
            position: absolute;
            text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
            top: 0;
            left: 42%;
            z-index: -1;
        }

   .neon-frame {
        display: block;
        max-width: 1000px;
        padding: 30px 12px;
    }

        .neon-frame > ul > li {
            text-align: left;
            color: #696969;
            font-size: 16px;
            line-height: 30px;
            margin-left: -15px;
        } 

	  /*modal區*/

    .modal-content {
        width: 23em;
        height: 40em;
        margin: 15% auto;
        padding: 7px 13px;
        text-align: center;
        border-radius: 15px;
        border: 7px solid #0223c5;
        background-image: url(../images/bg01.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }

	.modal .title01{
		position: absolute;
		background-image: url(../images/title-bar.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 88%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -12%;
		margin-left: 8px;
	}
	
	.modal .title02{
		position: absolute;
		background-image: url(../images/title-bar02.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		width: 97%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -12%;
		margin-left: -2.5em;
	}
	
    .modal h2 {
        font-size: 31px;
        font-weight: bold;
        color: #fff;
        padding: 0px 0px 0 41px;
    }
	
    .modal h4 {
        font-size: 36px;
        font-weight: bold;
        color: #fff;
        padding: 10px 0;
    }

    .modal h3 {
        font-size: 31px;
        font-weight: bold;
        line-height: 1.2em;
        color: #000;
        padding: 12% 0;
    }
	
	 .modal p {
        font-size: 19px;
        font-weight: bold;
        line-height: 1.3em;
        color: #616161;
        padding: 7% 0;
    }
	
	
.modal  .list {
	margin-top: 56%;
	width: 100%;
}	
	
.coupon{
  width: 96%;
}
	
.coupon:hover, .coupon:focus, .coupon:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-10px);
}
		
button.close {
    margin-right: -21%;
    margin-top: -39px;
}

.btn {
    font-size: 18px;
    margin-top: 12%;
}
	
/*  bn-float  Float */
.bn-float02 {
  font-size: 22px;
  padding: 10px 18%;
  border-radius: 50px;
  margin: 3%;
}
.bn-float02:hover, .bn-float02:focus, .bn-float02:active {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  background-color: #ff3400;
}

/*  bn-float  Float */
.bn-float {
  background-color: #0223c5;
  color: #fff;
  font-size: 17px;
  padding: 7px 12px;
  border-radius: 50px;
  margin: 3%;
}
.bn-float:hover, .bn-float:focus, .bn-float:active {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}


.bottom-bn {position: fixed;background-color: #efefef;width: 100%;height: 4em;margin: 0 auto;z-index: 999;bottom: 0;}
.bottom-bn h2{font-size: 17px;letter-spacing: 1px;text-align: center;color: #af07c3;}
.bottom-bn a{color: #ffffff;}
.bottom-bn a:hover{color: #ffffff; text-decoration: none;}
	
	
}



/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸小於300 時,顯示效果 ↓↓↓↓  */

@media (max-width: 320px) {
	
.logo{position: absolute;top: 1em;width: 100vw;height: auto;left: 0;right: 0;}	
/*PIC通用*/
img.pic-logo{width: 100%;height:auto;margin: 0 auto;text-align: center;padding: 0 6em;}


    /*BANNER*/
    img.banner_big {
        display: none;
    }

    img.banner_min {
        width: 100%;
        max-width: 960px;
        height: auto;
    }

    img.banner001 {
        display: block;
        top: 13%;
        left: 8.5%;
        z-index: 3;
        max-width: 840px;
        height: auto;
        width: 81vw;
    }
	
    img.banner002 {
        display: block;
        top: 32%;
        left: 3.5%;
        z-index: 2;
        max-width: 840px;
        height: auto;
        width: 93vw;
    }
	
  /*表單區*/

    .fill {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 0px 10px 50px 10px;
        background: #2f184e;
        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: -moz-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -o-linear-gradient(top, #2f184e 0%, #261b41 15%, #2f225c 64%, #261b41 85%, #1b1423 100%);
        background: -webkit-linear-gradient(top, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        background: linear-gradient(to bottom, #2f184e 0%,#261b41 15%,#2f225c 64%,#261b41 85%,#1b1423 100%);
        padding-bottom: 33%;
        margin-top: -7%;
       } 
	
	.white-bg{
		position: relative;
		z-index: 10;
		text-align: center;
		padding: 23px 10px;
		background-color: #fff;
		border: 10px solid #000;
		box-shadow: 0px 0px 35px #fd00ff, 0px 0px 0px #2700ff inset;
		padding-bottom: 7%;
	}
	
	
.form-control {
    margin: 3px auto;
    display: block;
    width: 100%;
    height: 43px;
    padding: 6px 9px;
    font-size: 16px;
    color: #555;
    border-radius: 5px;
}


    .fill h1 {
        letter-spacing: 0.5px;
        font-size: 32px;
        font-weight: bold;
        color: #b70eaf;
        position: relative;
        border-bottom: 6px solid #2d0f88;
        padding-bottom: 10px;
        margin: 0px 0%;
    }
	
    h1:after {
        background: none;
        content: attr(data-text);
        left: 0;
        position: absolute;
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
        top: 0;
        left: 15%;
        z-index: -1;
    }

	  .fill h3 {
		  font-size: 21px;
		  font-weight: bold;
		  color: #696969;
		  margin: 3% 0;
		  padding-bottom: 3%;
	}
	
	
    .focus {
        font-size: 22px;
        
         /* FF3.6-15 */
         /* Chrome10-25,Safari5.1-6 */
         /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color: #550db3;

    }

        .focus:after {
            background: none;
            content: attr(data-text2);
            left: 0;
            position: absolute;
            text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.33);
            top: 0;
            left: 42%;
            z-index: -1;
        }

   .neon-frame {
        display: block;
        max-width: 1000px;
        padding: 30px 12px;
    }

        .neon-frame > ul > li {
            text-align: left;
            color: #696969;
            font-size: 16px;
            line-height: 30px;
            margin-left: -15px;
        } 

	  /*modal區*/
.modal  .list {
	margin-top: 56%;
	width: 100%;
}	
	
    .modal-content {
        width: 21em;
        height: 39em;
        margin: 15% auto;
        padding: 8px 10px;
        text-align: center;
        border-radius: 15px;
        border: 7px solid #0223c5;
        background-image: url(../images/bg01.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }

	.modal .title01{
		position: absolute;
		background-image: url(../images/title-bar.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		max-width: 559px;
		width: 90%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -20%;
	}
	
	.modal .title02{
		position: absolute;
		background-image: url(../images/title-bar02.png);
		background-repeat: no-repeat;
		background-size: 100%;
		margin: 0  auto;
		width: 101%;
		height: auto;
		padding-bottom: 6em;
		margin-top: -24%;
		margin-left: -1em;
	}
	
    .modal h2 {
        font-size: 29px;
        font-weight: bold;
        color: #fff;
        padding: 0px 0px 0 43px;
    }
	
    .modal h4 {
        font-size: 32px;
        font-weight: bold;
        color: #fff;
        padding: 6px 0;
    }

    .modal h3 {
        font-size: 30px;
        font-weight: bold;
        line-height: 1.2em;
        color: #000;
        padding: 6% 0;
    }
	
	 .modal p {
        font-size: 18px;
        font-weight: bold;
        line-height: 1.3em;
        color: #616161;
        padding: 7% 0;
    }
	
.coupon{
  width: 96%;
}
	
.coupon:hover, .coupon:focus, .coupon:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-10px);
}
	
.btn {
    font-size: 14px;
    line-height: 1.42857143;
    margin-top: 12%;
    border-radius: 50px;
}
	
/*  bn-float  Float */
.bn-float02 {
  font-size: 20px;
  padding: 10px 18%;
  border-radius: 50px;
  margin: 3%;
}
.bn-float02:hover, .bn-float02:focus, .bn-float02:active {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  background-color: #ff3400;
}

/*  bn-float  Float */
.bn-float {
  background-color: #0223c5;
  color: #fff;
  font-size: 16px;
  padding: 7px 13px;
  border-radius: 50px;
  margin: 3%;
}
.bn-float:hover, .bn-float:focus, .bn-float:active {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}

.bottom-bn {position: fixed;background-color: #efefef;width: 100%;height: 4em;margin: 0 auto;z-index: 999;bottom: 0;}
.bottom-bn h2{font-size: 16px;letter-spacing: 1px;text-align: center;color: #af07c3;}
.bottom-bn a{color: #ffffff;}
.bottom-bn a:hover{color: #ffffff; text-decoration: none;}

	
}







/*========================================================*/

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



/*↓↓↓↓ *螢幕尺寸【大於於】768時頁面顯示效果 ↓↓↓↓ */

@media (max-width: 768px) {
}



/*↓↓↓↓  螢幕尺寸【大於】481時頁面顯示效果  ↓↓↓↓ */

@media (min-width: 481px) {
}




/*↓↓↓↓  螢幕尺寸【小於】480時頁面顯示效果  ↓↓↓↓ */

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



/*↓↓↓↓ 螢幕尺寸【大於】1024時頁面顯示效果  ↓↓↓↓ */

@media (min-width:1024px) {
}



/*  ↓↓↓↓ 螢幕尺寸【小於】1024時頁面顯示效果    ↓↓↓↓ */

@media (max-width: 1023px) {
}

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