@charset "UTF-8";

*{ font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;}
body, html{ margin: 0; padding: 0;}
@media (max-width:768px){
body, html{ font-size: 14px;}
}


input, select, textarea{ font-weight: bolder; border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
input:focus, select:focus, textarea:focus{ border: none; outline: none;}

.main_bg{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: url(../images/main_bg.jpg); background-size: cover; z-index: -1;}

.kv{ background: url(../images/topbn_bg.jpg) center top; background-size: cover;}
.mv{ position: relative; max-width: 2000px; margin: 0 auto; overflow: hidden;}
.mv img{ position: absolute; max-width: 100%;}
.mv .topbn_header{ position: absolute; top: 0; z-index: 1;}
.mv .topbn_footer{ position: absolute; bottom: -1px; z-index: 2;}
.mv .topbn_light{ position: static;}
.mv .topbn_bg_m{ position: static; display: none;}

.mv .topbn_gear_01{ position: absolute; left: 39.8%; top: 16.35%; width: 72.85%; animation: 100s topbn_gear_01 infinite linear;}
@keyframes topbn_gear_01 {
    0%{ transform:rotate(0deg);}
    100%{ transform:rotate(360deg);}
}

.mv .topbn_gear_02{ left: 27.5%; top: -59%; width: 40%; animation: 70s topbn_gear_02 infinite linear;}
@keyframes topbn_gear_02 {
    0%{ transform:rotate(0deg);}
    100%{ transform:rotate(-360deg);}
}
.mv .topbn_gear_03{ left: -11.15%; top: 0.5%; width: 52.5%; animation: 80s topbn_gear_03 infinite linear;}
@keyframes topbn_gear_03 {
    0%{ transform:rotate(0deg);}
    100%{ transform:rotate(360deg);}
}

.mv .topbn_logo01{ right: 50%; top: 0; width: 10.2%; z-index: 2;}
.mv .topbn_logo02{ left: 50%; top: 0; width: 10.2%; z-index: 2;}

.mv .topbn_pic01{ left: 8.55%; width: 5.8%; z-index: 1; opacity: 0; animation: .5s topbn_pic01 forwards ease-in-out; animation-delay: .2s;}
@keyframes topbn_pic01 {
    0%{ left: 14.55%; opacity: 0;}
    100%{ left: 8.55%; opacity: 1;}
}
.mv .topbn_pic02{ left: 6.6%; top: 5.03%; width: 20.05%; z-index: 1; opacity: 0; animation: .5s topbn_pic02 forwards ease-in-out;}
@keyframes topbn_pic02 {
    0%{ left: 12.6%; opacity: 0;}
    100%{ left: 6.6%; opacity: 1;}
}
.mv .topbn_pic03{ left: 16.7%; top: 11.9%; width: 32.3%; z-index: 1;}
.mv .topbn_pic04{ left: 37.35%; top: 20.25%; width: 20.2%; z-index: 1; opacity: 0; animation: .5s topbn_pic04 forwards ease-in-out;}
@keyframes topbn_pic04 {
    0%{ left: 31.35%; opacity: 0;}
    100%{ left: 37.35%; opacity: 1;}
}
.mv .topbn_pic05{ left: 59.85%; top: 12.88%; width: 14%; transform:rotate(-8deg); animation: 2s topbn_pic05 infinite ease-in-out;}
@keyframes topbn_pic05 {
    0%{ top: 12.88%;}
    50%{ top: 10.88%;}
    100%{ top: 12.88%;}
}
.mv .topbn_pic06{ left: 69.85%; top: 8.88%; width: 14%; transform:rotate(8deg); animation: 2s topbn_pic06 infinite ease-in-out;}
@keyframes topbn_pic06 {
    0%{ top: 8.88%;}
    50%{ top: 10.88%;}
    100%{ top: 8.88%;}
}
.mv .topbn_pic07{ left: 85.4%; top: 65.75%; width: 8.45%;}
.mv .topbn_pic08{ left: 8.6%; top: 39.9%; width: 2.15%; animation: 3s topbn_pic08 infinite ease-in-out;}
@keyframes topbn_pic08 {
    0%{ filter: brightness(1);}
    50%{ filter: brightness(1.5);}
    100%{ filter: brightness(1);}
}
.mv .topbn_pic09{ left: 22.65%; top: 76.07%; width: 3.4%; z-index: 2; animation: 3s topbn_pic09 infinite ease-in-out; animation-delay: .5s;}
@keyframes topbn_pic09 {
    0%{ filter: brightness(1);}
    50%{ filter: brightness(1.5);}
    100%{ filter: brightness(1);}
}
.mv .topbn_pic10{ left: 37.5%; top: 52.76%; width: 25%; z-index: 2;}

.mv .htcLink img{ transition: .5s;}
.mv .htcLink:hover img{ filter: brightness(1.5);}

@media (max-width:768px){
.mv .topbn_light{ position: absolute; max-width: 300%;}
.mv .topbn_bg_m{ display: block;}

.mv .topbn_gear_01{ left: 31.8%; top: 16.35%; width: 90.85%;}
.mv .topbn_gear_02{ left: -34.5%; top: 83%; width: 57%;}
.mv .topbn_gear_03{ left: -11.15%; top: -12.5%; width: 59.5%;}

.mv .topbn_logo01{ top: 5%; width: 25%;}
.mv .topbn_logo02{ top: 5%; width: 25%;}

.mv .topbn_pic01{ left: 77.55%; top: 19%; width: 8.8%; transform: rotateY(180deg);}
@keyframes topbn_pic01 {
    0%{ left: 71.55%; opacity: 0;}
    100%{ left: 77.55%; opacity: 1;}
}
.mv .topbn_pic02{ left: -11.4%; top: 16%; width: 45%;}
@keyframes topbn_pic02 {
    0%{ left: -5.4%; opacity: 0;}
    100%{ left: -11.4%; opacity: 1;}
}
.mv .topbn_pic03{ left: 7.5%; bottom: 0; top: auto; width: 85%;}
.mv .topbn_pic04{ left: 58%; top: 28.25%; width: 45%; opacity: 1; transform: rotate(-30deg);}
@keyframes topbn_pic04 {
    0%{ left: 52%; opacity: 0;}
    100%{ left: 58%; opacity: 1;}
}
.mv .topbn_pic05{ left: 69%; top: 68.88%; transform: rotate(-5deg); z-index: 2;}
@keyframes topbn_pic05 {
    0%{ top: 68.88%;}
    50%{ top: 66.88%;}
    100%{ top: 68.88%;}
}
.mv .topbn_pic06{ left: 79%; top: 68%; transform: rotate(6deg); z-index: 2;}
@keyframes topbn_pic06 {
    0%{ top: 68%;}
    50%{ top: 70%;}
    100%{ top: 68%;}
}
.mv .topbn_pic07{ display: none;}
.mv .topbn_pic08{ left: 68.6%; top: 23.9%; width: 4.5%;}
.mv .topbn_pic09{ left: 10.65%; top: 58.07%; width: 7.4%;}
.mv .topbn_pic10{ left: 5%; bottom: 6%; top: auto; width: 60%;}
}



.apply{ position: relative; height: 1060px; background: #fff;}
.apply .apply_pic01{ position: absolute; left: 120px; top: 60px;}
.apply .apply_pic02{ position: absolute; left: 120px; top: 117px;}
.apply .apply_pic03{ position: absolute; right: 120px; bottom: 117px;}
.apply .apply_pic04{ position: absolute; right: 120px; bottom: 60px;}
.apply .apply_pic05{ position: absolute; left: 30px; top: 50%; transform: translateY(-50%);}
.apply .apply_pic06{ position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}

.apply .apply_main{ display: flex; align-items: center; justify-content: center; position: relative; max-width: 1400px; height: 100%; margin: 0 auto;}
.apply_main .apply_pic07{ position: absolute; z-index: 3;}
.apply_main .apply_pic08{ position: absolute; z-index: 2;}
.apply_main .topbn_gear_04{ position: absolute; width: 65%; opacity: 0.2; animation: 100s topbn_gear_04 infinite linear;}
@keyframes topbn_gear_04 {
    0%{ transform:rotate(0deg);}
    100%{ transform:rotate(-360deg);}
}

.apply .apply_form{ display: flex; flex-wrap: wrap; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 605px; font-weight: bolder; z-index: 4;}
.apply .apply_form .RO1{ width: 300px; text-align: center;}
.apply .apply_form .ROV{ width: 300px; margin: 0 0 0 5px; text-align: center;}
.apply .apply_form .phone{ width: 100%; margin: 5px 0 0 0; text-align: center;}
.apply .apply_form h3{ margin: 0 0 1px; padding: 15px 10px; font-size: 1rem; color: #4e1b7d; border-top: 5px solid #4e1b7d; background: rgba(255,255,255,0.8);}
.apply .apply_form p{ margin: 0 0 1px; padding: 15px 10px; font-size: 1rem; color: #4e1b7d; background: rgba(255,255,255,0.8);}
.apply .apply_form .login_zone{ margin: 0 0 1px; padding: 15px 10px; background: rgba(255,255,255,0.8);}
.apply .apply_form .login_zone a+a{ margin: 0 0 0 15px;}
.apply .apply_form i{ display: block; margin: 0 0 1px; padding: 10px; min-height: 52px; font-size: 0.75rem; color: #fff; font-style: normal; background: #4e1b7d; box-sizing: border-box;}
.apply .apply_form>div>a{ display: block; margin: 0 0 1px; padding: 10px; font-size: 0.875rem; color: #fff; text-decoration: none; background: #4e1b7d;}

.apply select{ width: 100%; margin: 0 0 1px; padding: 15px 10px; font-size: 1rem; background: rgba(255,255,255,0.8); color: #4e1b7d; text-align: center;}
.apply input{ width: 100%; margin: 0 0 1px; padding: 15px 10px; font-size: 1rem; background: rgba(255,255,255,0.8); color: #4e1b7d; text-align: center; box-sizing: border-box;}

.apply .phone div{ display: flex; flex-wrap: wrap;}
.apply .phone select{ width: 30%;}
.apply .phone input[type="text"]{ width: calc(70% - 1px); margin: 0 0 1px 1px;}
.apply .phone input[type="checkbox"]{ display: none;}
.apply .phone label{ display: flex; justify-content: center; align-items: center;margin: 0 0 1px; padding: 15px 10px; font-size: 1rem; color: #4e1b7d; background: rgba(255,255,255,0.8); font-size: 1rem; cursor: pointer;}
.apply .phone label a{ color: #ff2d55; text-decoration: none;}
.apply .phone span{ display: inline-block; width: 8px; height: 8px; margin: 0 5px; background: #fff; border: 2px solid #fff; box-shadow: 0px 0px 0px 1px #4e1b7d;}
.apply .phone input[type="checkbox"]:checked+span{ background: #4e1b7d;}


@media (max-width:1400px){
.apply .apply_pic01,.apply .apply_pic02,.apply .apply_pic03,.apply .apply_pic04{ width: 40%;}
.apply .apply_pic08{ width: 90%;}
}

@media (max-width:768px){
.apply{ height: auto; overflow-x: hidden;}

.apply .apply_pic01,.apply .apply_pic02,.apply .apply_pic03,.apply .apply_pic04{ display: none;}
.apply .apply_pic05{ left: 10px; top: 30%; width: 20px;}
.apply .apply_pic06{ right: 10px; top: 30%; width: 20px;}

.apply_main .apply_pic07{ width: 120%; top: 10%;}
.apply_main .apply_pic08{ top: 5%;}
.apply_main .topbn_gear_04{ width: auto; height: 95%;}

.apply .apply_main{ position: absolute; width: 100%; margin: 0; overflow: hidden;}
.apply .apply_form{ position: relative; left: auto; top: auto; transform: translate(0,0); flex-direction: column; align-items: center; margin: 100% auto 60px; width: 300px; max-width: 95%;}
.apply .apply_form .RO1{ margin: 0 0 30px; width: 100%;}
.apply .apply_form .ROV{ margin: 0 0 30px; width: 100%;}
.apply .apply_form i{ min-height: auto;}
}


.main{ max-width: 2000px; margin: 0 auto;}

.info{ max-width: 1400px; margin: 0 auto; padding: 120px 0; text-align: center;}
.info.info_01{ background: url(../images/main_pic01.png) center bottom no-repeat; background-size: 100%;}
.info.info_02{ background: url(../images/main_pic02.png) center bottom no-repeat; background-size: 100%;}

.info .info_whole{ max-width: 768px; margin: 60px auto; padding: 20px 30px; font-size: 1rem; color: #4e1b7d; border-top: 5px solid #4e1b7d; background: rgba(255,255,255,0.8); box-sizing: border-box; font-size: 1rem; font-weight: bolder;}
.info .info_whole p{ display: flex; align-items: flex-start; text-align: left;}
.info .info_whole b{ display: inline-block; margin: 0 10px 0 0; padding: 5px 0; width: 80px; text-align: center; background: #4e1b7d; font-size: 0.875rem; color: #fff;}
.info .info_whole span{ flex: 1; padding: 5px 0 0 0;}

.info .info_title02{ position: relative;}
.info .info_title02 img{ max-width: 100%;}
.info .info_title02 .main_title03{ position: absolute; top: 0; left: 0;}
@media (max-width:768px){
.info{ padding: 60px 0;}
.info .info_whole{ max-width: 90%; margin: 30px 5%; padding: 10px 15px;}
}


.mission{ position: relative; max-width: 1200px; margin: 0 auto 120px; padding: 10px; border: 1px solid #4e1b7d;}
.mission+.mission{ margin: 120px auto 0;}
.mission>div{ padding: 0 60px; border: 5px solid #6f3a7d; box-shadow: 0 0 0 1px #4e1b7d;}
.mission>div article{ max-width: 768px; margin: -16px auto 0; padding: 30px; border: 1px solid #4e1b7d; background: #834593; color: #fff; font-size: 1rem; font-weight: bolder; line-height: 1.6rem; box-sizing: border-box;}
.mission>div article span{ background:linear-gradient(to bottom, rgba(78,27,125,0) 0%,rgba(78,27,125,0) 30%,rgba(78,27,125,1) 31%,rgba(78,27,125,1) 100%);}

.mission.mission_01:before{ position: absolute; left: 50%; bottom: 100%; transform: translate(-50%,0); display: block; padding: 8px 30px; content: "暑期打卡"; background: #4e1b7d; color: #fff; font-weight: bolder;}

.mission_01 .presents{ display: flex; flex-wrap: wrap; margin: 60px 0 30px;}
.mission_01 .presents ul{ display: flex; margin: 0 0 30px 0; padding: 0; width: 49%; list-style: none; gap: 10px;}
.mission_01 .presents ul:nth-of-type(even){ margin: 0 0 30px 2%;}
.mission_01 .presents ul li:nth-of-type(1){ display: flex; flex-wrap: wrap; align-items: center; flex-direction: column; width: 80px;}
.mission_01 .presents ul li:nth-of-type(2){ display: flex; flex-direction: column; flex: 1; text-align: center;}
.mission_01 .presents ul li:nth-of-type(3){ display: flex; flex-direction: column; flex: 1; text-align: center;}
.mission_01 .presents i{ display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: linear-gradient(to bottom, #fff,#ebebeb); border: 1px solid #4e1b7d; box-shadow: 0 0 0 4px #834593 inset; color: #4e1b7d; font-weight: bolder; font-size: 1rem; font-style: normal; box-sizing: border-box;}
.mission_01 .presents i span{ font-size: 3.6rem;}
.mission_01 .presents b{ flex: 1; width: 1px; margin: 10px 0 0 0; background: #4e1b7d;}
.mission_01 .presents h4{ flex: 1; margin: 0; padding: 10px; background: #4e1b7d; color: #fff; font-size: 1rem; font-weight: bolder; border: 1px solid #4e1b7d;}
.mission_01 .presents p{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; margin: 0; padding: 30px 0; background: linear-gradient(to bottom, #fff,#ebebeb); border: 1px solid #4e1b7d; box-shadow: 0 0 0 4px #834593 inset;}
.mission_01 .presents p img{ border: 1px solid #4e1b7d; width: 100px;}
.mission_01 .presents p span{ padding: 30px 0 0 0; font-weight: bolder; color: #4e1b7d; font-size: 1rem;}
@media (max-width:1400px){
.mission{ max-width: 90%; margin: 0 5% 60px;}
.mission+.mission{ margin: 120px 5% 0;}
}
@media (max-width:1000px){
.mission_01 .presents ul{ width: 100%; margin: 0 0 30px;}
.mission_01 .presents ul:nth-of-type(even){ margin: 0 0 30px;}
}
@media (max-width:768px){
.mission+.mission{ margin: 60px 5% 0;}
.mission>div{ padding: 0 10px;}

.mission_01 .presents{ margin: 30px 0 0;}
.mission_01 .presents ul{ flex-wrap: wrap;}
.mission_01 .presents ul li:nth-of-type(1){ flex-direction: initial; width: 100%;}
.mission_01 .presents b{ width: 100%; height: 1px; margin: 0 0 0 10px;}
}




.mission.mission_02:before{ position: absolute; left: 50%; bottom: 100%; transform: translate(-50%,0); display: block; padding: 8px 30px; content: "暑期打卡加碼抽"; background: #4e1b7d; color: #fff; font-weight: bolder;}

.mission_02 .presents{ display: flex; margin: 60px 0; padding: 0 40px;}
.mission_02 .presents>div{ flex: 1;}
.mission_02 .presents ul{ display: flex; flex-wrap: wrap; height: 100%; gap: 10px; list-style: none;}
.mission_02 .presents li{ display: flex; align-items: center; flex-direction: column; width: calc(50% - 5px); padding: 40px 0 0 0; background: linear-gradient(to bottom, #773f86,#682c78); border: 1px solid #4e1b7d; box-shadow: 0 0 0 4px #834593 inset; box-sizing: border-box;}
.mission_02 .presents p{ width: calc(100% - 8px); margin: auto 0 4px; padding: 10px 5px; background: linear-gradient(to bottom, #fff,#ebebeb); border-bottom: 5px solid #4e1b7d; box-sizing: border-box; text-align: center; color: #4e1b7d; font-size: 1rem; font-weight: bolder;}
.mission_02 .presents img{ margin: 0 0 40px;}

.mission_02 .presents>div:nth-of-type(2){ display: flex; flex-direction: column; align-items: center; height: calc(100% - 2px); margin: 0 0 0 10px; padding: 60px 0 0 0; background: url(../images/gift/gift_bg.jpg) center no-repeat; background-size: cover; border: 1px solid #4e1b7d; box-shadow: 0 0 0 4px #834593 inset;}
.mission_02 .presents>di:nth-of-type(2) p{ margin: auto 0 4px 0;}
.mission_02 .presents>div:nth-of-type(2) img{}
@media (max-width:1112px){
.mission_02 .presents{ padding: 0;}
}
@media (max-width:768px){
.mission_02 .presents{ flex-direction: column; margin: 30px 0;}
.mission_02 .presents>div:nth-of-type(2){ margin: 30px 0 0 0; padding: 20px 0 0;}
.mission_02 .presents li{ padding: 20px 0 0 0;}
.mission_02 .presents img{ margin: 0 0 20px;}
}


.mission.mission_03:before{ position: absolute; left: 50%; bottom: 100%; transform: translate(-50%,0); display: block; padding: 8px 30px; content: "儲值回饋"; background: #4e1b7d; color: #fff; font-weight: bolder;}

.mission_03 .presents>ul{ display: flex; flex-wrap: wrap; margin: 60px 0 0; list-style: none; gap: 12px}
.mission_03 .presents>ul+ul{ margin: 30px 0;}
.mission_03 .presents>ul+ul+ul{ margin: 30px 0 60px;}
.mission_03 .presents>ul li:nth-of-type(1){ display: flex; align-items: center; flex-wrap: wrap; width: 100%;}
.mission_03 .presents>ul li:nth-of-type(2){ display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; width: calc(75% - 6px);}
.mission_03 .presents>ul li:nth-of-type(3){ display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; width: calc(25% - 6px);}

.mission_03 .presents i{ display: flex; align-items: center; justify-content: center; height: 80px; padding: 0 20px; background: linear-gradient(to bottom, #fff,#ebebeb); border: 1px solid #4e1b7d; box-shadow: 0 0 0 4px #834593 inset; color: #4e1b7d; font-weight: bolder; font-size: 2rem; font-style: normal; box-sizing: border-box;}
.mission_03 .presents b{ flex: 1; height: 1px; margin: 0 0 0 10px; background: #4e1b7d;}
.mission_03 .presents h4{ margin: 0; padding: 10px; width: 100%; background: #4e1b7d; color: #fff; font-size: 1rem; font-weight: bolder; border: 1px solid #4e1b7d; box-sizing: border-box; text-align: center;}
.mission_03 .presents p{ flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: calc(100% - 2px); margin: 0; padding: 30px 0; background: linear-gradient(to bottom, #fff,#ebebeb); border: 1px solid #4e1b7d; box-shadow: 0 0 0 4px #834593 inset;}
.mission_03 .presents p img{ border: 1px solid #4e1b7d; width: 100px;}
.mission_03 .presents p img+img{ margin: 0 0 0 5px;}
.mission_03 .presents p span{ width: 100%; padding: 30px 20px 0 20px; font-weight: bolder; color: #4e1b7d; font-size: 1rem; box-sizing: border-box; text-align: center;}
@media (max-width:768px){
.mission_03 .presents>ul{ margin: 30px 0 0;}
.mission_03 .presents>ul+ul+ul{ margin: 30px 0 30px;}

.mission_03 .presents>ul li:nth-of-type(2){ width: 100%;}
.mission_03 .presents>ul li:nth-of-type(3){ width: 100%;}
.mission_03 .presents p img{ margin: 0 0 5px;}
.mission_03 .presents p img+img{ margin: 0 0 5px 5px;}
}


.mission.mission_04:before{ position: absolute; left: 50%; bottom: 100%; transform: translate(-50%,0); display: block; padding: 8px 30px; content: "儲值回饋加碼抽"; background: #4e1b7d; color: #fff; font-weight: bolder;}
.mission_04 .presents{ margin: 60px 0; padding: 0 40px;}
.mission_04 .presents>ul{ display: flex; flex-wrap: wrap; gap: 12px; list-style: none;}
.mission_04 .presents>ul li{ display: flex; align-items: center; flex-direction: column; width: calc(25% - 9px); padding: 40px 0 0 0; background: linear-gradient(to bottom, #773f86,#682c78); border: 1px solid #4e1b7d; box-shadow: 0 0 0 4px #834593 inset; box-sizing: border-box;}
.mission_04 .presents p{ width: calc(100% - 8px); margin: auto 0 4px; padding: 10px 5px; background: linear-gradient(to bottom, #fff,#ebebeb); border-bottom: 5px solid #4e1b7d; box-sizing: border-box; text-align: center; color: #4e1b7d; font-size: 1rem; font-weight: bolder;}
.mission_04 .presents img{ margin: 0 0 40px;}

.mission_04 .presents>div{ display: flex; gap: 12px; margin: 12px 0 0 0;}
.mission_04 .presents>div ul{ display: flex; flex-direction: column; flex: 1; list-style: none; gap: 12px;}
.mission_04 .presents>div ul li{ flex: 1; display: flex; align-items: center; flex-direction: column; padding: 40px 0 0 0; background: linear-gradient(to bottom, #773f86,#682c78); border: 1px solid #4e1b7d; box-shadow: 0 0 0 4px #834593 inset; box-sizing: border-box; background: url(../images/gift/gift_bg.jpg) center no-repeat; background-size: cover;}
.mission_04 .presents>div div{ flex: 1; display: flex; flex-direction: column; align-items: center; padding: 60px 0 0 0; background: url(../images/gift/gift_bg.jpg) center no-repeat; background-size: cover; border: 1px solid #4e1b7d; box-shadow: 0 0 0 4px #834593 inset;}
@media (max-width:1112px){
.mission_04 .presents{ padding: 0;}
}
@media (max-width:768px){
.mission_04 .presents{ margin: 30px 0;}
.mission_04 .presents>ul li{ width: calc(50% - 6px); padding: 20px 0 0 0;}
.mission_04 .presents>div{ flex-direction: column;}
.mission_04 .presents>div ul li{ padding: 20px 0 0 0;}
.mission_04 .presents>div div{ padding: 20px 0 0 0;}
.mission_04 .presents img{ margin: 0 0 20px;}
}


.note{ position: relative; padding: 120px 0 60px; background: #fff; text-align: center;}
.note>div{ position: relative; max-width: 1200px; margin: 60px auto; padding: 10px; border: 1px solid #a6a6a6; box-sizing: border-box;}
.note>div div{ padding: 40px 80px; border: 1px solid #a6a6a6; box-shadow: 0 0 0 4px #dbdbdb inset;}
.note>div div ul li{ position: relative; margin: 0 0 15px; padding: 0 0 0 35px; font-weight: bolder; font-size: 1rem; counter-increment:li; list-style: none; text-align: left; color: #525252;}
.note>div div ul li::before{ position: absolute; left: 0; display: inline-block; content: counter(li); background: #525252; width: 22px; height: 22px; line-height: 21px; text-align: center; font-size: 0.75rem; color: #fff;}
.note>div div ul li span{ background: #ebdbff; padding: 0 5px;}
.note>div div ul li a{ color: #e23434;}

.note .apply_pic01{ position: absolute; left: 120px; top: 60px;}
.note .apply_pic02{ position: absolute; left: 120px; top: 117px;}
.note .apply_pic03{ position: absolute; right: 120px; bottom: 117px;}
.note .apply_pic04{ position: absolute; right: 120px; bottom: 60px;}

.note_title01{ position: relative; z-index: 1;}
@media (max-width:1400px){
.note>div{ max-width: 90%; margin: 60px 5%;}
.note .apply_pic01,.note .apply_pic02,.note .apply_pic03,.note .apply_pic04{ width: 40%;}
}

@media (max-width:1112px){
.note>div div{ padding: 40px 60px;}
}
@media (max-width:768px){
.note>div div{ padding: 30px 20px;}
.note .apply_pic01,.note .apply_pic02,.note .apply_pic03,.note .apply_pic04{ display: none;}
}

footer{ background: #170121;}