@charset "utf-8";

@media screen and (max-width: 1580px) {
    .index-leaf { top: 9.5%; }
    .sign-up .photos { top: 0px; }
    .information .photos {  top: 0px; }
    .index-tree {  bottom: 35%; }
}

@media screen and (max-width: 1380px) {
    .index-tree {  bottom: 30%; }
}


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

     
 
    
    .paintings-lis ul li { width: calc(33.3% - 20px); }

     .kv-zone { max-width: 240px; }
     .inside-cont { width: calc(100% - 240px); flex: none;} 

     .left-side { width: 300px;}
     .menus { padding-top: 120px;}
     .menus > div { width: 120px; margin: 5px; }
     .subs > div { width: 120px; }

}

@media screen and (min-width: 1200px) and (max-height:700px ) { 
     /* 手機板選單 */
     .m-burger {  display: block; position: fixed;  right: 15px;  top: 15px; width: 36px; height: 36px; z-index: 990; cursor: pointer;}
     .m-burger:before,
     .m-burger:after { content: '';  display: block; height: 4px; border-radius: 5px; background-color: #ffffff; transition: all 0.3s ease;}
     .m-burger span { color: #ffffff; font-size: 12px; display: block; width: 100%; margin: 4px 0; transition: all 0.3s ease;}
     .m-burger span:before { content: 'MENU'; }
     .m-burger.active span { display: none; }
 
     .m-burger.active:before { transform: rotate(45deg); margin-top: 13px; }
     .m-burger.active:after { transform: rotate(-45deg); margin-top: -4px; }
 
    
     nav { width: 100%; height: 100%; z-index: 900; background-color: rgba(20, 21, 59, 0.95); display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; position: fixed; top: 0; left: auto; right: -100%; transition: all 0.3s ease;}
 
     nav ul { top: 0;  width: 90%; margin: 0 5%;  display: block; background: none; border: 0; position: relative; left: auto; bottom: auto; height: auto;}
     nav ul.unit { flex-wrap: wrap; justify-content: center; position: relative; top: auto; left: auto; right: auto; }
     nav ul:before, nav ul:after { display: none;}
     nav.active { right: 0;  transition: all 0.3s ease; }
     nav ul.unit .kv-inside { margin: 5px 0; }
     nav ul.unit li { width: 100%; flex: none; margin: 5px 0; }
     nav ul li a {width: 100%; border: 1px rgba(255, 255, 255, 0.6) solid; font-size: 20px; border-radius: 5px; font-weight: 500;}
     nav li:before, nav li:after { display: none;}
     nav .social-icon {  position: absolute; top: 80px;  right: calc(50% - 52px); z-index: 100; }
     
     nav .menu-title {  display: none; }

     .kv-zone { max-width: 240px; }
     .inside-cont { width: calc(100% - 240px); flex: none;} 

}

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

    .paintings-lis { max-width: 850px; }

    .info-sub { margin: 30px 10px; }

    .sign-up .photos { top: 0px; width: 15%; }

    .information .photos {
        width: 15%;
    }

    .kv .kv-m { width: 35%; top: 20%; left: 32%;}
    
    .kv .kv-saturn { left: 10%;}
    .right-side { width: calc(100% - 300px); flex: none; }

    .sign-form { padding: 35px; }
    .sign-form .note-info span { display: block; }
    .sign-form .note-info { padding-bottom: 15px;  line-height: 1.6em;  }
    .sign-form .list {  display: block;  padding-bottom: 10px; }
    .sign-form .list span.form-title {  display: block;  margin-bottom: 0px; float: left; width: 5.6em;  margin-right: 0; }
    .sign-form .list span { line-height: 1.4em; }
    .sign-form .list .form-style01,
    .sign-form .list .form-style02,
    .sign-form .list textarea.form-style01-textarea,
    .paint-size {  display: block; margin: 0 0 10px 5.6em; width: calc(100% - 5.6em);  }
    .sign-form .list span.paint-size { margin-left: 6.1em;  width: calc(100% - 6.1em); }
    .sign-form input.upload {  padding: 0; }
    .sign-form .list input,
    .sign-form .list select { display: block;   margin-right: 5px;  width: 100%;  }
    .sign-form ul li {  padding-bottom: 10px;  }
    .sign-form .check-lis p {  padding: 0 0 10px 0; line-height: 1.6em;  margin-left: 40px;  }
    .check-lis p.print-p {  padding: 2px 0 10px 0;  margin-left: 6em; }
    .sign-form input.form-check-style01 {  display: inline-block;  vertical-align: middle;  width: 20px; }
    .symbol {  display: none;  }
    br.form-m { display: none;  }
}


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

    .wallpaper { min-height: auto;}

    nav ul.unit li a {  font-size: 16px; padding: 0.5em;}

    h1.main-title { font-size: 36px;}

    .info-sub>div { font-size: 16px;}
    .info-sub:before,
    .info-sub:after  { width: calc(50% - 200px); top: 19px;}

    .awards .wainner .wainner-box {
        float: none;
        width: 100%;
        margin: 0 0 30px 0;
    }

    .winner-not-yet {
        margin-bottom: 30px;
    }

    a.btn-send,
    a.btn-reset,
    a.btn-save,
    a.btn-print {
        width: 150px;
        margin: 0 4px;
    }

    a.btn-fb,
    a.btn-line {
        width: 51px;
        margin: 0 0 0 5px;
    }


    .search-box {  padding: 10px;  }
    .search-box .school { display: block; }
    .search-box .school,
    .search-box .name { display: block; }
    .search-box label { text-align: center;  padding-bottom: 10px; display: block; width: 100%; }
    .search-box select { display: block;  width: 100%;  margin: 0 0 10px 0;  padding: 5px 10px; }
    .search-box button.btn-search { width: 100%; }
    .search-box input.name-label { width: 100%; margin-bottom: 10px; }
    .search-box .name button.btn-search,
    .search-box .name button.btn-search-all {  width: calc(50% - 5px);  margin: 0 0 0 5px;  float: left; }
    .search-box .name button.btn-search {  margin: 0 5px 0 0;  }


    .winner-form .th span:nth-child(1) { flex: none; width: 100px;}
    .winner-form .th span:nth-child(2) { flex: none; width: 100px;}
    .winner-form .th span:nth-child(4) { flex: none; width: 120px; border-right: 0;}

    .winner-form .tr span:nth-child(1) {  flex: none; width: 100px;}
    .winner-form .tr span:nth-child(2) { flex: none; width: 100px;}
    .winner-form .tr span:nth-child(4) { flex: none;  width: 120px; border-right:0;}

    .winner-form .tr-lis .lis span:nth-child(1) { flex: none; width: 100px; border-bottom: 0; border-left: 0;}
    .winner-form .tr-lis .lis span:nth-child(2) { flex: none; width: 100px;}
    .winner-form .tr-lis .lis span:nth-child(4) { flex: none; width: 120px; }
}

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

    body { font-size: 18px; }

    .content-box { padding: 20px 15px; }


    
    .content-box {
        border-radius: 15px;
    }

    .paintings-lis {
        max-width: 640px;
    }

    .paintings-lis ul li {
        width: calc(50% - 20px);
    }

    

    
    
    .btn-box {  padding: 30px 0 10px 0;  }

    .wainner .wainner-box { width: 100%; margin: 0 0 20px 0;}

    .left-side { width: 270px;} 
    .subs > div { font-size: 18px; width: 100px; padding: 12px 0 22px 0; }
    
    .right-side { flex: 1; padding: 20px; }

}



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

    /* 手機板選單 */
    .m-burger {  display: block; position: fixed;  right: 15px;  top: 15px; width: 36px; height: 36px; z-index: 990; cursor: pointer;  }
    .m-burger:before,
    .m-burger:after { content: '';  display: block; height: 4px; border-radius: 5px; background-color: #ffffff; transition: all 0.3s ease; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
    .m-burger span { color: #ffffff; font-size: 12px; display: block; width: 100%; margin: 4px 0; transition: all 0.3s ease;}
    .m-burger span:before { content: 'MENU'; text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); }
    .m-burger.active span { display: none; }

    .m-burger.active:before { transform: rotate(45deg); margin-top: 13px; }
    .m-burger.active:after { transform: rotate(-45deg); margin-top: -4px; }

    .wrapper:after { opacity: 0; content: ''; display: block; width: 100%; height: 60px; background-color: rgba(51, 51, 51, 0.6); position: fixed; top: 0; left: 0; z-index: 950; transition: all 0.3s ease;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b56c00+1,e89004+100&1+0,0.3+100 */
        background: linear-gradient(to bottom,  rgba(181,108,0,1) 0%,rgba(181,108,0,0.99) 1%,rgba(232,144,4,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     }
     .wrapper.top-bg:after {  opacity: 1; }

    nav { width: 100%; height: 100%; z-index: 900; background-color: rgba(132, 98, 72, 0.95); display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; position: fixed; top: 0; left: auto; right: -100%; transition: all 0.3s ease;}
 
     nav ul { top: 0;  width: 90%; margin: 0 5%;  display: block; background: none; border: 0; position: relative; left: auto; bottom: auto; height: auto;}
     nav ul.unit { flex-wrap: wrap; justify-content: center; position: relative; top: auto; left: auto; right: auto; }
     nav ul:before, nav ul:after { display: none;}
     nav.active { right: 0;  transition: all 0.3s ease; }
     nav ul.unit .kv-inside { margin: 5px 0; }
     nav ul.unit li { width: 100%; flex: none; margin: 5px 0; }
     nav ul li a {width: 100%; border: 1px rgba(255, 255, 255, 0.6) solid; font-size: 20px; border-radius: 5px; font-weight: 500;}
     nav li:before, nav li:after { display: none;}
     nav .social-icon {  position: absolute; top: 80px;  right: calc(50% - 52px); z-index: 100; }
     
     nav .menu-title {  display: none; }

    body {  font-size: 16px; }
    .index-leaf { top: 32.5%; }
    .content-box { padding: 20px 0; }

    .header-bg {  height: 365px; background: url(../images/top-mobile-bg.jpg); background-size: cover;  }
    .header-bg .share { display: none; }
    .left-side .kv-inside { height: 290px; overflow: hidden; top: -365px; }
    .left-side .menus { display: none; }
    .right-side { width: 100%; flex: none; }
    .right-side .subs {  justify-content: center; margin-top: -77px; }

    .subs > div { padding: 12px 0 18px 0; }

    .content-box,
    .search-box { width: 300px; }
    .paintings-lis { width: 285px;  }
    .paintings-lis .no-date {
        margin: 0 0 15px 0;
        width: 100%;
    }
    
    

    .content-box h3.cont-title {
        padding-bottom: 10px;
    }

    .content-box ul {
        padding: 0 0 10px 20px;
    }

    .content-box ul li {
        padding: 0 0 10px 0;
    }

    ul.lis-dot,
    ul.lis-ch {
        padding-left: 36px;
    }

    ul.lis-dot {
        padding-left: 59px;
    }

    ul.lis-ch02 li { padding-left: 0; }
    ul.lis-ch02 li:before { top: 3px; height: 20px; left: -1em;}

    .content-box p.f-part,
    .content-box p {
        padding-left: 0px;
    }

    .content-box p.a-part {
        padding-left: 20px;
    }

    .content-box p b {
        display: block;
    }



    .content-box p.b-part {
        padding-left: 0px;
        text-indent: 0;
        padding-bottom: 10px;
    }

    .content-box p.c-part {
        padding-left: 0;
        text-indent: 0;
        padding-bottom: 10px;
    }

    .content-box p.d-part {
        padding-left: 0;
        text-indent: 0;
    }

    .content-box p.e-part {
        padding-left: 20px;
        text-indent: 0;
    }


    .pc {
        display: none;
    }

    .mobile {
        display: block;
    }

    div.logo {
        left: 15px;
        top: 15px
    }

    .sign-form {
        padding: 30px 15px;
    }


    .sign-form .note-info span {
        text-align: center;
        padding-bottom: 10px;
    }


    .sign-form .list span.form-title {
        padding-bottom: 10px;
        text-align: left;
    }


    .sign-form .list .form-style02,
    .sign-form .list textarea.form-style01-textarea {
        width: 100%;
        margin-left: 0px;
    }

    .sign-form .check-lis .step {
        width: calc(100% - 30px);
        color: #333333;
    }

    .sign-form .check-lis p {
        margin-left: 30px;
    }

    

    .content-box p.d-part {
        padding-left: 0px;
        word-wrap: break-word;
    }

    .content-box p.d-part b {
        max-width: 280px;
        display: block;
        margin: 0 auto 10px auto;
        line-height: 1.6em;
        font-weight: 900;
        text-align: center;
    }

    /* 列印 */

    .print {
        font-size: 14px;
        text-align: left;
        margin: 0 auto;
    }

    .print h3 {
        text-align: center;
        font-weight: bold;
    }

    .paint-number {
        font-size: 24px;
    }

    .print-list,
    .print-note {
        padding-left: 0;
    }

    .print-list span {
        width: 5.1em;
        color: #ffffff;
    }

    .print-list span#fd1,
    .print-list span#fd2,
    .print-list span#fd3,
    .print-list span#fd4,
    .print-list span#fd5,
    .print-list span#fd6,
    .print-list span#fd7,
    .print-list span#fd8,
    .print-list span#fd9,
    .print-list span#fd10 { width: calc(100% - 6.1em);  }

    
    .print-list span#fd11 { width: 100%; }

    .print-list .paint-brief {
        width: 100%;
        clear: both;
        padding-left: 0px;
    }

    .check-lis p.print-p {
        clear: both;
        margin-left: 0;
        word-break: break-all;
        margin-bottom: 10px;
    }

    .sign-form .check-lis input.form-check-style02 {
        margin: 1px 5px 0 0;
    }



   


    



    /* KV */
    .kv .kv-m { width: 50%; left: 25%; top: 25%;}
    .kv .kv-globel { width: 100%; right: -20%;}
    .kv .kv-plan01 { width: 100%; right: -20%; top: 10%;}
    .kv .kv-plan02 { width: 30%; right: 45%; bottom: 5%;}
    .kv .kv-sun { width: 40%; right: 1%; top: 25%;}
    .kv .kv-saturn { bottom: 30%;}

    /* painting */
    .paintings-lis ul { padding-left: 0; margin: 0; }
    .paintings-lis ul li { width: 100%; margin: 0 0 15px 0; }
    .paintings-lis ul li .number { padding: 10px;}


    /* winner */
    .winner-not-yet {
        line-height: 1.8em;
        padding: 30px 10px;
    }

    /* bookmark */
    .bookmark a,
    .bookmark a.arrow {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin: 2px;
    }


    /* btn */
    a.btn-send,
    a.btn-reset,
    a.btn-save,
    a.btn-print {
        width: calc(48% - 10px);
    }


    /* winner */

    .winner-form .th span:nth-child(1),
    .winner-form .th span:nth-child(2),
    .winner-form .th span:nth-child(4) {
        width: 60px;
    }

    .winner-form .tr span:nth-child(1),
    .winner-form .tr span:nth-child(2),
    .winner-form .tr span:nth-child(4) {
        width: 60px;
    }

    .winner-form .tr-lis .lis span:nth-child(1),
    .winner-form .tr-lis .lis span:nth-child(2),
    .winner-form .tr-lis .lis span:nth-child(4) {
        width: 60px;
    }

    .main-bg { padding-top: 100px;}
    .main-bg:before { height: 80px; clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%, 0 50% );}


}

@media screen and (max-width: 580px) {
    .wallpaper { height: auto; background-size: auto 348px; background-position: top center;}
    .wallpaper:before { opacity: 0; content: ''; display: block; width: 100%; height: 60px; background-color: rgba(51, 51, 51, 0.6); position: fixed; top: 0; left: 0; z-index: 950; transition: all 0.3s ease;
       /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2e3f68+0,51638e+100&0.9+0,0.4+100 */
        background: -moz-linear-gradient(top,  rgba(46,63,104,0.9) 0%, rgba(81,99,142,0.4) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(46,63,104,0.9) 0%,rgba(81,99,142,0.4) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(46,63,104,0.9) 0%,rgba(81,99,142,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e62e3f68', endColorstr='#6651638e',GradientType=0 ); /* IE6-9 */
    }
    .wallpaper.top-bg:before {  opacity: 1; }

    .wallpaper.index { width: 100%; background-position: center; background-size: cover; }

    .main-bg { background-attachment: fixed; background-size: 100% auto;}

    .mobile-left { display: block; }
    .kv-zone { width: 52%; display: flex; justify-content: center; align-items: center; }
    .kv-text { max-width: 100px; margin: 80px auto 40px auto; }
    .kv { height: auto; }
    .kv.index { height: 100%; }
    .index-leaf { top: 36.5%; }

    .winner-content-box,
    .sign-up-contect-box,
    .information-contect-box,
    .paintings-box { height: auto; }
    .inside-cont:before { display: none; }
    .inside-cont { width: 100%; flex: none; }
    .main-bg { padding-top: 0; }
}

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


    .right-side { flex: 1; padding: 20px 10px; }
    

    /* painting */
    .paintings-lis .item { width: calc(50% - 20px);  }

    .info-sub>div {
        width: 92px;
    }

    .info-sub:before,
    .info-sub:after {
        width: calc(50% - 155px);
    }

    .info-sub .tab02 {
        margin: 0 3px;
    }

    .pop-body {
        padding: 10px;
        width: 260px;
    }

    .pop-cont {
        height: calc(100% - 48px);
    }

    .pop-cont ul {
        color: #333333;
    }


    .pop .btn-close {
        width: 30px;
        height: 30px;
        top: 5px;
        right: 5px;
    }


    .review-box { display: block; padding-top: 10px; padding-bottom: 50px;}
    .review-box > div { margin: 0;}
    .review-box h3 { font-size: 18px; border-radius: 5px; padding: 6px 16px; background-color: #2b8883; color: #ffffff;}
    .review-box .list { padding: 10px 0 20px 0;}
    .review-box .list span { width: calc(50% - 10px); margin: 5px; font-size: 16px; } 

    .wainner .wainner-box { width: calc(100% - 20px); margin: 10px;}
}

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

    /* painting */
    .paintings-lis .item { width: 100%; }

    div.logo { height: 36px;}
    .main-bg:before { height: 65px;}

    .main-bg { padding-top: 0px;}

    .kv .kv-m { width: 80%; left: 10%; top: 35%;}

    div.logo img { max-width: 178px; }

    .index-leaf { width: 35.2%; top: 40%; right: 7.4%; }

    
}