@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
html,body,div,span,applet,object,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,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}

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

body{line-height: 1; color: black; background: white;}ol,ul{list-style: none;}

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

caption,th,td{text-align: left; font-weight: normal;}blockquote:before,blockquote:after,q:before,q:after{content: "";}blockquote,q{quotes: """";}

/**/
.title-img {
    max-width: 100%;
}
/* Customization */
header {
    position: fixed;
    width: 100%;
    z-index: 999;
}
main {
    padding-top: 130px;
}
#NAV {
    width: 100vw;
    height: 130px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
}
#NAV .links {
    background-color: #ec3b94;
    display: flex;
    align-items: center;
    width: -webkit-fill-available;
}
#NAV .links .item{
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 2.6px;
    text-align: left;
    color: #fff;
    text-decoration: none;
}
#NAV #Hamburger {
    background: #ec3b94;
    border: none;
    width: 110px;
    display: none;
}
ul.links > li {
    width: 23%;
    border-top: 20px transparent solid;
    border-bottom: 20px transparent solid;
    text-align: center;
    line-height: 90px;
}
ul.links > li:not(:last-child) {
    border-right: 1px #fff solid;
}
ul.links > li.active ,
ul.links > li:hover {
    background-color: #ff66b3;
}
#mobile_menu {
    display: none;
    text-align: center;
    background: #ec3b94;
    position: relative;
    height: calc(100vh - 50px);    
}
#mobile_menu .mobile_links{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#mobile_menu .mobile_links::before{
    content:"";
    background-position-x: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(image/mobile-menu-before.png);
    height: calc( (100% - 280px) / 2 );
}
#mobile_menu .mobile_links::after{
    content:"";
    background-position-x: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(image/mobile-menu-after.png);
    height: calc( (100% - 280px) / 2 );
}
#mobile_menu .mobile_links a {
    text-align: center;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 26px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 3;
    letter-spacing: 2.6px;
    color: #ec3b94;
    text-decoration: none;
}
#mobile_menu .mobile_links {
    background-color: #faedf5;
}
#mobile_menu .mobile_links li:hover {
    background-color: #fff;
}
#HOME-PAGE {
    width: 100%;
    height: 100vh;
}
#HOME-PAGE #__KID {
    position: absolute;
    width: 484.656px;
    height: 260px;
    left: calc(50% - 242.328px);
    top: calc(36vh + 130px - 242px);
}
#HOME-PAGE #CLOUD {
    width: 100%;
    background-image: url(image/__CLOUD.png);
    background-size: auto 100%;
    height: 36vh;
    background-position-x: center;
    margin-bottom: -2vh;
}
#HOME-PAGE #SEA {
    width: 100%;
    background-image: url(image/__FISH.png), url(image/__SEA.png);
    background-size: auto 100% ,auto 100%;
    height: 66vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat, repeat;
    flex-direction: column;
    background-position: center;
}
#HOME-PAGE #__TITILE {
    height: 44vh;
    max-width: calc(100% - 52px);
    object-fit: contain;
}
#HOME-PAGE #__TITILE::before {
    content: "aaa";
}
#Introduction {
    width: 100%;
    background-image: url(image/Rectangle-background.png);
    background-size: auto;
    z-index: -1;
    top: -2vh;
    position: relative;
    text-align: center;
    margin-bottom: -38px;
    padding: 80px 26px;
    box-sizing: border-box;
}
#Introduction .text{
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 28px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: 5.6px;
    text-align: center;
    color: #ee4d8e;
    width: 68%;
    margin: auto;
}

#Details {
    padding: 0 26px 60px 26px;
    background-image: url(image/Details-SEA.png);
    background-size: auto 100%;
    text-align: center;
}
#Details .directions {
    background-color: #fff;
    width: 77%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 58px 20px 0 20px;
    box-sizing: border-box;
    justify-content: center;
}
#Details .col:first-child {
    border-right: 1px #848484 solid;
}
#Details .col {
    width: 40%;
    padding: 0 3.7%;
    margin-bottom: 50.3px;
}
#Details #Toddle {
    border-right: 1px #848484 solid;
}
#Details #directions,
#Details #How,
#Details #Date,
#Details #Deadline,
#Details #Results {
    width: 100%;
    margin-bottom: 50.3px;
}
#Details div h1 ,
#Submit div h1 {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 36px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 7.2px;
    text-align: center;
    color: #ec3b94;
    margin-bottom: 37.7px;
}
#Details div#Children h1 {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 36px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 8px;
    text-align: center;
    color: #00bbc5;
    margin-bottom: 37.7px; /* 6/15 yuro 2px->37.7px */
}
#Details div#Criteria h1 {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 36px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 8px;
    text-align: center;
    color: #367a4b;
    margin-bottom: 2px;
}
#Details div#Awards h1 {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 36px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 8px;
    text-align: center;
    color: #ad228e;
    margin-bottom: 2px;
}
#Details div small {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.08;
    letter-spacing: 4.8px;
    text-align: center;
    color: #ee4d8e;
    word-break: break-all;
}
#Details div#Toddle p {
    margin-bottom: 32px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.69;
    letter-spacing: 6.03px;
    text-align: center;
    color: #ee4d8e;
}
#Details div#Children p {
    margin-bottom: 32px;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.69;
    letter-spacing: 6.03px;
    text-align: center;
    color: #00bbc5;
}
#Details div#Awards div {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.69;
    letter-spacing: 6.03px;
    text-align: center;
    color: #ad228e;
}
#Details div#Awards div small {
    font-size: 16px;
    line-height: normal;
    letter-spacing: 4.15px;
    text-align: left;
    color: #ad228e;
}
#Details div#Awards dl {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.69;
    letter-spacing: 6.03px;
    text-align: center; /* 6/13 yuro left->center */
    color: #ad228e;
}
/*====== 6/13 yuro delete start ======*/
/* #Details div#Awards dt {
    float: left;
    width: 180px;
    clear: left;
    text-align: right;
} */
/* #Details div#Awards dd {
    margin-left: 190px;
} */
/*====== 6/13 yuro delete end ======*/
dd:before, dd:after {
    display: table;
    content: " ";
}
dd:after {
    clear: both;
}
#Details div ol a ,
#Details div ol {
    list-style: decimal;
    text-align: left;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.08;
    letter-spacing: 4.8px;
    color: #ee4d8e;
}
#Details div ol {
    padding-left: 30px;
    margin: auto;
}
/* #Details div li {
    padding-left: 41px;
} */
/*====== 6/13 yuro add start(for ppt p.10) ======*/
#How ol li{
    margin-left: calc(3.7% + 20px);
    margin-right: 3.7%;
}
#Deadline,#Results{
    margin: 0 3.7%;
}
/*====== 6/13 yuro add end ======*/
#Details div#Criteria ol {
    list-style: none;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.69;
    letter-spacing: 6.03px;
    text-align: center;
    color: #367a4b;
    padding: 0;
}
#Details div#Criteria li {
    padding-left: 0;
}
#Details #download-button {
    margin: 44px auto;
}
#Details a#download-toddler{
    display: inline-block;
    height: 55.6px;
    border-radius: 7px;
    background-color: #0ec6d0;
    border-right: transparent;
    border-left: transparent;
    border-top: transparent;
    border-bottom: 2px #03adb6 solid;
    width: 33.33%;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 20px; /* 6/13 yuro 26px->20px */
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 55.6px; /* 6/13 yuro 1.2->55.6px */
    letter-spacing: 5.2px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    vertical-align: bottom;
    text-decoration: none;
}
#Details a#download-children{
    display: inline-block;
    height: 55.6px;
    border-radius: 7px;
    background-color: #ee4d8e;
    border-right: transparent;
    border-left: transparent;
    border-top: transparent;
    border-bottom: 2px #e13279 solid;
    width: 33.33%;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 20px; /* 6/13 yuro 26px->20px */
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 55.6px; /* 6/13 yuro 1.2->55.6px */
    letter-spacing: 5.2px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    vertical-align: bottom;
    text-decoration: none;
}
#Submit {
    width: 100%;
    min-height: 100vh;
    text-align: center;
    padding: 0 26px 50px 26px;
    box-sizing: border-box;
}
#Submit div small ,
#Submit div small a,
#Submit div ol {
    list-style: decimal;
    text-align: left;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.08;
    letter-spacing: 4.8px;
    color: #ee4d8e;
}
#Submit #Requirement {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#Submit #Requirement ol {
    max-width: 33.3%;
    padding-left: 3em;
}
#Winning {
    width: 100%;
    min-height: 100vh;
    text-align: center;
    padding: 0 26px 50px 26px;
    box-sizing: border-box;
}
#Winning .title-img {
    margin-top: 30px;
    margin-bottom: 20.9px;
}
#Winning .text{
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 28px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.79;
    letter-spacing: 5.6px;
    text-align: center;
    color: #ee4d8e;
    margin: auto;
}
#Winning .directions {
    background-color: #fff;
    width: 77%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    /* padding: 58px 20px 0 20px; */
    padding-top: 58px;
    box-sizing: border-box;
    justify-content: center;
}
#Winning .col {
    width: 40%;
    padding: 0 3.7%;
    margin-bottom: 50.3px;
}
#Winning .col h1 {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 36px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 8px;
    text-align: center;
    margin-bottom: 14px;
}
#Winning .col h1:nth-child(2) {
    margin-bottom: 26px;
}
#Winning .col.toddle {
    border-right: 1px #848484 solid;
}
#Winning .col.toddle h1 {
    color: #ec3b94;
}
#Winning .col.child h1 {
    color: #00bbc5;
}
#Winning .col .names {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 22px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 2;
    letter-spacing: 4.4px;
    text-align: center;
    margin-bottom: 23px;
    word-break: break-all;
}
#Winning .col.toddle .names {
    color: #ee4d8e;
}
#Winning .col .names span {
    margin-right: 20px;
    white-space: nowrap;
}
#Winning .col.child .names {
    color: #00bbc5;
}
#TC {
    background-color: #027d45;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 40px;
}
#TC h3, #Declaration h3 {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 4.8px;
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}
#TC ol {
    list-style: decimal;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 16px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 3.2px;
    text-align: left;
    color: #fff;
    max-width: 1280px;
    margin-left: 34px; /* 6/13 yuro add */
}
/* 6/13 yuro add start */
#Declaration{
    background-color: #027d45;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 40px;
    padding-top: 0;
}
#Declaration ul,  #Declaration p{
    list-style: inside;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 16px;
    font-weight: 300;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 3.2px;
    text-align: left;
    color: #fff;
    max-width: 1280px;
}
#Submit div ol a{
    color: #ee4d8e;
}
/* 6/13 yuro add end */

/* RWD */
@media(max-width:960px){
    #NAV {
        height: 50px;
    }
    #NAV .logo img {
        width: -webkit-fill-available;
        max-width: 395px;
        object-fit: contain;
    } 
    #NAV .logo {
        display: flex;
        width: calc(100% - 50px);
        justify-content: center;
    }
    #NAV .links {
        display: none;
    }
    #NAV #Hamburger {
        display: block;
        width: 50px;
        background-image: url(./image/btn_menu.png);
    }
    #Introduction .title-img {
        margin-bottom: 50px;
    }
    #Introduction .text {
        width: unset;
    }
    #Details .directions {
        width: 100%;
    }
    #Details .col {
        width: -webkit-fill-available;
    }
    #Details #Toddle.col:first-child {
        border-right: unset;
    }
    #Winning .text {
        font-size: 14px;
    }
    #Winning .col {
        width: -webkit-fill-available;
    }
    #Winning .col:first-child {
        border-right: unset;
    }
    #Winning .col h1 {
        font-size: 18px;
    }
    #Winning .col .names {
        font-size: 14px;
        letter-spacing: 2.8px;
    }
    a#download-toddler {
        margin-bottom: 50px;
    }
    #Details a#download-toddler ,
    #Details a#download-children {
        width: 100%;
    }
    #Submit #Requirement ol {
        max-width: unset;
    }
}
@media(max-width:1280px){
    #Details div#Awards dt {
        float: unset;
        width: auto;
        clear: left;
        text-align: center;
        font-weight: bolder;
    }
    #Details div#Awards dd {
        margin-left: unset;
        text-align: center;
    }
    /* 6/13 yuro add start */
    #Introduction .text {
        font-size: 14px;
    }
    #Details div#Toddle h1, #Details div#Children h1, #Details div#Criteria h1, #Details div#Awards h1, #Details div#How h1, #Details div#Date h1, #Details div#Deadline h1, #Details div#Results h1, #Submit div#Requirement h1, #TC h3, #Declaration h3{
        font-size: 16px;
        margin-bottom: 37.7px;
    }
    #Details div#Toddle p, #Details div#Children p, #Details div#Criteria ol, #Details div#Awards dl, #Details div#Awards div, #Details div#Awards div small, #Details div#How ol, #Details div#How ol a, #Details div#Date small, #Details div#Deadline small, #Details div#Results small, #Submit div#Requirement ol, #Submit div#Requirement small, #Submit div#Requirement small a, #TC ol, #Declaration p, #Declaration ul{
        font-size: 14px;
    }
    #Details div#How #download-button { 
        padding-right: 30px;
    }
    #Submit {
        min-height: auto;
    }
    /* 6/13 yuro add end */
}

/* 6/13 yuro add start */
@media(max-width:500px){
    #HOME-PAGE #__KID {
    position: absolute;
    width: 100vw;
    height: auto;
    left: calc(50% - 50vw);
    }
    #Submit {
        min-height: auto;
    }
}
/* 6/13 yuro add end */