@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC');

@keyframes fadeOut {
	from {  opacity: 0; }
	to { opacity: 1; }
}

html {  width: 100%; height: 100%; }
body { background: #e4d2c9; margin: 0; padding: 0; font-family: 'Noto Sans TC'; font-weight: 400; position: relative; font-size: 22px;  width: 100%; overflow-y: auto; animation-duration: 2s;  animation-name: fadeOut;}
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
input { font-size: 1em; line-height: 1.6em; vertical-align: middle; border: 0; font-family: 'Noto Sans TC', Microsoft JhengHei; }

button { font-family: 'Noto Sans TC', Microsoft JhengHei; border: 0; font-size: 1em;  line-height: 1.6em; cursor: pointer; }
input.check-box {  font-size: 1em; width: 1em; height: 1.6em; vertical-align: middle; display: inline-block; }
select { font-size: 1em; line-height: 1.6em; font-family: 'Noto Sans TC', Microsoft JhengHei; border: 0; }
textarea { font-size: 1em;  line-height: 1.2em; font-family: 'Noto Sans TC', Microsoft JhengHei;  border: 0; }

hr { margin: 0 0 15px 0;  padding: 15px 0 0 0; border: 0; border-bottom: 1px #cacaca solid; }

h1,h2,h3,h4 { margin: 0; padding: 0;  font-weight: normal; }

* {
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}



/*  漸變效果 */
a { color: #33c706; transition: all 0.3s ease; text-decoration: none; }

.clearfix:after,
.paintings-lis ul:after,
.sign-form .lis:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

/* Hides from IE-mac \*/
* html .clearfix,
* html .paintings-lis ul,
* html .sign-form .lis { height: 1%; }

.wallpaper { position: relative;  width: 100%;  height: 100%; height: auto; overflow-x: hidden;  overflow-y: hidden; }
.wallpaper { background-image: url(../images/bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; }
.wallpaper.index { background-image: none; }

.index-bg-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: indexkvbox 2s ease infinite; overflow: hidden; }
.index-kv-box { background-image: url(../images/bg-index.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;  width: 100%; height: 100%; position: relative;}
.index-kv-box:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 66.4%; }
.index-tree {position: absolute; bottom: 29%; left: 29%; width: 42.3%; height: auto; animation: indexkv 3s ease-in-out; }
.index-leaf { position: absolute; top: -5.5%; right: 13.4%; width: 25.2%; height: auto; animation: leaf 4s ease-in-out; transition: all 0.5s ease-out;}

@keyframes indexkvbox {
	0% {  filter: brightness(1) };
    50% {  filter: brightness(2) };
	100% { filter: brightness(1) }
}


@keyframes indexkv {
	0% {  opacity: 0;  width: 20%; left: 40% };
    50% {  opacity: 1; filter: brightness(5) };
	100% { filter: brightness(1);  width: 100%; left: 29%; }
}

@keyframes leaf {
	0% { opacity: 0; right: 0;};
    100% {opacity: 1; right: 13.4%;}
}

@keyframes indexslogan {
	0% { opacity: 0; margin-top: 0 };
	100% { opacity: 1; margin-top: 120px; }
}





.mobile-left { display: none; flex: 1; }
.kv-zone { max-width: 360px; width: 40%; flex: none; background-color: rgba(77, 93, 148, 0.36); position: relative; z-index: 10;}
.kv-zone:before { content: ''; display: block; width: 18px; height: 276px;background-image: url(../images/right-circles.svg); background-position: center; background-repeat: repeat-y; position: absolute; right: -9px; top: calc(50% - 138px); }
.kv-zone:after { content: ''; display: block; width: 2px; height: 100%; background-image: url(../images/right-dash-line.svg); background-position: center; background-repeat: repeat-y; position: absolute; right: -1px; top: 0;}
.kv-text { max-width: 220px; width: 80%; display: block; margin:120px auto 0 auto; }
.kv-text.index-kv-text { animation: indexslogan 3s ease-in-out; } 
.kv.index .kv-zone:before {  background-image: url(../images/right-circles-index.svg); }

.inside-cont { flex: 1; position: relative;  z-index: 5;}

div.logo { position: absolute; left: 35px;  top: 25px;  height: 36px;  z-index: 100; }
div.logo img { height: auto;  width: 80%; max-width: 220px; }
.mobile { display: none;}
br.form-m {  display: none; }
.m-burger { display: none; }

nav { display: none; }
nav ul { margin: 0; padding:0;  list-style: none; position: absolute; width:160px; left: 90px; top: 520px; bottom: 0px;  z-index: 900; }
nav .home { display: none;}
nav .menu-title { top: 10px; position: absolute; left:calc(50% - 490px); z-index: 5; }

nav ul:before,
nav ul:after { content: ''; display: block; width: 1px; height: calc(50% - 100px); margin: 0 auto; background-color: #ffffff;}


nav ul.unit {  top: 20px; left: 380px; right: 160px; width: auto;  bottom: auto;  display: flex;  }
nav ul.unit li { flex: 1; margin: 0 5px;}
nav ul.unit li::before,
nav ul.unit li::after { display: none;} 
nav ul.unit li { display: flex; align-items: flex-end;}
nav ul.unit li a { width: 100%; border: 1px #ffffff solid; font-size: 20px; border-radius: 99em; font-weight: 500; }
nav ul.unit li a:hover { color: #1b1f53;}
nav ul.unit .kv-inside { width: 160px; flex: none; margin-right: 20px;}

    
nav li { flex: 1;  text-align: center; font-size: 18px; margin: 10px; transition: all 0.3s ease; position: relative;}
nav li a { display: block; color: var(--menu01-color); padding: 0.2em 1em; transition: all 0.3s ease; border: 1px var(--menu01-color) solid; border-radius: 99em; overflow: hidden; position: relative;}
nav li:hover a span { position: relative; z-index: 10; }
nav li a:before { content: ''; display: block; width: 0; height: 100%; background-color: #ffffff; transition: all 0.3s ease; position: absolute; top: 0; left: 0; z-index: 1;}
nav li:hover a { color: #233464 !important; }
nav li:hover a:before, nav li.active a:before  { width: 100%; }

nav li:first-child a { color: var(--menu01-color);}


:root { 
    --menu01-color: #ffffff;
    --menu02-color: #ffffff; 
    --menu03-color: #ffffff; 
    --menu04-color: #ffffff; 
}



.kv { position: relative; height: 100%; width: 100%; z-index: 1; overflow: hidden; display: flex; flex-wrap: wrap;  }


.move-left { animation: move-left 3s infinite ease-in-out; }
.move-right { animation: move-right 3s infinite ease-in-out; }
.kv .kv-m { position: absolute; right: 37.5%; bottom: 28%; width: 25%; animation: kv 8s infinite ease-in-out; z-index:100; }
.meteor canvas { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0); background: none; }


.bg-in-side { max-width: 1910px; margin: 0 auto; background: url(../images/content-bg-infinit.jpg); background-repeat: repeat-y; background-position: center; background-size: 100% auto; position: relative; }
.bg-in-side:before { content: ''; display: block; position: absolute; top: 200px; left: 0; width: 100%; height: calc(100% - 220px); background: url(../images/content-bg.jpg) no-repeat top center; background-size: 100% auto; z-index: 1;  }
.main-box {  display: flex; flex-wrap: wrap; justify-content: center; max-width: 1300px; background-color: #ffffff; margin: 0 auto; position: relative; z-index: 5; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
.left-side { width: 400px; flex: none; background: url(../images/left-bg.jpg) repeat-y center; position: relative; }
.left-side .kv-inside { position: absolute; top: -200px; left: 0; z-index: 1; } 
.left-side .menus { position: relative; z-index: 10; }

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


/* head */
.header-bg { background: url(../images/top-bg.jpg) repeat-x top center; height: 200px; position: relative; z-index: 5; }
.header-bg .header-box { max-width: 1300px; margin: 0 auto; position: relative; }
.header-bg .share { position: absolute; right: 50px; top: 30px; display: inline-block; padding: 6px 8px; background-color: #b34136; border-radius: 99em; }
.header-bg .share > div { display: inline-block; }
.header-bg .share a { display: inline-block; width: 35px; height: 35px; vertical-align: middle; }

.header-bg .top-color-line { width: 100%; position: absolute; bottom: 0; left: 0; height: 75px; background-color: #b34136; border-bottom: 7px #e69e16 solid; } /* 活動辦法色條 */
.header-bg .top-color-line.style02 { background-color: #de9d05; border-bottom: 7px #ec4a3d solid;  } /* 線上投稿色條 */
.header-bg .top-color-line.style03 { background-color: #c97849; border-bottom: 7px #fed11e solid;  } /* 畫作欣賞色條 */
.header-bg .top-color-line.style04 { background-color: #948520; border-bottom: 7px #df9e06 solid;  } /* 得獎名單色條 */


.header-bg .share a { width: 48px; height: 48px; display: inline-block;  background-position: center;  background-repeat: no-repeat;  background-size: cover;  transition: all 0.3s ease; }
.header-bg .share a:hover { filter: brightness(1.2); transition: all 0.3s ease;}
.header-bg .share a.icon-fb { background-image: url(../images/icon-fb.svg); margin-right: 5px; }
.header-bg .share a.icon-line { background-image: url(../images/icon-line.svg); }

.social-icon a { width: 48px; height: 48px; display: inline-block;  background-position: center;  background-repeat: no-repeat;  background-size: cover;  transition: all 0.3s ease; }
.social-icon a:hover { filter: brightness(1.2); transition: all 0.3s ease;}
.social-icon a.icon-fb { background-image: url(../images/icon-fb.svg); margin-right: 5px; }
.social-icon a.icon-line { background-image: url(../images/icon-line.svg); }


/* menus */
.menus { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 220px;}
.menus > div { flex: none; width: 160px; margin: 10px;}
.menus > div a { display: block; text-align: center; border: 1px #fff solid; color: #ffffff; position: relative; padding: 10px; font-size: 18px; font-weight: 500; transition: all 0.3s ease; letter-spacing: 1px; }
.menus > div a:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 0; height: 0; border-style: solid; border-width: 18px 18px 0 0; border-color: #fff transparent transparent transparent;  transition: all 0.3s ease;}
.menus > div a:hover { border-color: #f7dc7c;  color: #f7dc7c;}
.menus > div a:hover:before { border-color: #f7dc7c transparent transparent transparent; }

.menus > div.btn1 a:hover { background-color: #de9d05; }
.menus > div.btn2 a:hover { background-color: #ae6032; }
.menus > div.btn3 a:hover { background-color: #bb4336; }
.menus > div.btn4 a:hover { background-color: #b34136; }
.menus > div.btn5 a:hover { background-color: #b34136; }

/* subs */
.right-side .subs { margin-top: -80px;  }
.subs { display: flex; margin-bottom: 20px; }
.subs > div { border-radius: 8px 8px 0 0; border: 1px #ffffff solid;  padding: 12px 0 18px 0; font-size: 20px; font-weight: 500; color: #ffffff; letter-spacing: 2px; width: 150px; flex: none; text-align: center; cursor: pointer; margin-right: 10px; transition: all 0.3s ease; }
.subs > div:last-child { margin-right: 0; }
.subs > div span { display: block; }
.subs > div a { color: #ffffff; }
.subs > div.active,
.subs > div:hover { background-color: #ffffff;  color: #b34136; }
.subs div.active a,
.subs div:hover a {  color: #b34136; }

/* 版體 */
h1.main-title { text-align: center; position: relative;  z-index: 10; color: #000000; font-size: 42px; font-weight: 100; letter-spacing: 0.1em; padding: 0.5em 0; width: 100%; flex: none; }
h1.main-title img { max-width: 442px; height: auto; display: inline-block; width: 50%; }
.main-bg { padding-top: 80px; min-height: 100%; position: relative; background-image: url(../images/main-bg.jpg); background-position: right bottom; background-repeat: no-repeat; background-size: cover;}


.inside-cont:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 80px; z-index: 100; opacity: 0.8;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100 */
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

.content-box { position: relative; max-width: 1000px; margin: 0 auto; padding: 20px 0px 100px 0px; z-index: 100; font-size: 1em; color: #535353; line-height: 1.6em;}
.content-box .note { padding-bottom: 30px; text-align: justify;}
.content-box h3.cont-title {  font-size: 1.4em; color: #048c02; position: relative; margin-bottom: 10px; font-weight: bold; }

.content-box ul { list-style: none; padding: 10px 0 10px 0px;  margin: 0;}
.content-box ul li h4 {  font-size: 24px; color: #333333; margin: 0px 0 5px 0;}
.content-box p { padding-left: 2.2em;  margin: 0; text-align:justify; }
.content-box p.a-part { padding-left: 0;}
.content-box p b { color: #333333; font-weight: normal;}
.content-box p.b-part { padding-left: 6.3em; text-indent: -4em; margin-bottom: 0;}
.content-box p.c-part { padding-left: 8.3em; text-indent: -6em;  margin-bottom: 0;}
.content-box p.d-part { padding-left: 4em; text-indent: -4em; margin-bottom: 0; margin-top: 15px;}
.content-box p.d-part b { padding: 2px 10px; margin-right: 5px; background-color:#c1a22c ; border-radius: 4px; color: #ffffff;}
.content-box p.e-part { padding-left: 4em; text-indent: -4em; margin-bottom: 0; }
.content-box p.f-part {  padding-left: 6.3em;}
.content-box p.g-part { padding-left: 1.4em; }


ul.lis-ch { list-style-type: cjk-ideographic; padding-left: 2em; }
.content-box .sp { font-weight: normal; }

ul.lis-ch a {  color: #24425e; }

ul.lis-ch02 { list-style: none; }
ul.lis-ch02 li { position: relative; padding-bottom: 1em; padding-left: 1em;}
ul.lis-ch02 > li:before { content: ''; display: block; width: 5px; height: 24px; position: absolute; top: 6px; left: 0; background-color: #fc6d00; }


/* awards 中獎名單 */
.awards { position: relative; }
.awards .photos { position: absolute; top: 50px; left: 0; width: 20%; max-width: 268px; height: auto; z-index: 80; }
.winner-content-box { height: calc(100% - 185px); overflow-y: auto; padding:0 15px; }
.wainner { padding: 0px 0 50px 0; max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.wainner .wainner-box {  width: calc(50% - 20px); flex: none; margin: 0 10px;}
.wainner .wainner-box .title { text-align: center; font-size: 28px; font-weight: 900; display: block;  margin: 0 auto 30px auto; color: #333333; }

.winner-form {  border: 1px #dfdfdf solid; background-color: #f7f3f0; }
.winner-form.style02 {  max-width: 480px; margin: 0 auto; border: 1px #dfdfdf solid; }
.winner-form a.links { display: inline-block; width: 24px; height: 24px; background-image: url(../images/eye.png); background-repeat: no-repeat; background-position: center; background-size: cover;}
.winner-form a.links:hover { filter: brightness(1.2); }

.winner-form .th { display: flex; background-color: #958520;  font-size: 0.9em; color: #ffffff;  border-bottom: 4px  #de9d05  solid; }
.wainner .wainner-box.style02 .title { text-align: center; font-size: 28px; font-weight: 900; display: block;  margin: 0 auto 30px auto;  color: #333333;  }
.style02 .winner-form .th {  display: flex;  background-color: #198512; font-size: 0.9em; color: #ffffff; border-bottom: 4px #de9d05  solid; }

.mb-50 { margin-bottom: 50px !important;}


.winner-form .th span { padding: 8px 0; flex: 1; text-align: center; border-right: 1px #dfdfdf solid;}
.winner-form .th span:nth-child(1) { flex: none; width: 150px;}
.winner-form .th span:nth-child(2) { flex: none; width: 150px;}
.winner-form .th span:nth-child(4) { flex: none; width: 150px; border-right: 0;}
.winner-form .tr { display: flex; font-size: 0.9em;  color: #333333; border-bottom: 1px #dfdfdf solid;}

.winner-form .tr span { padding: 8px 0;  flex: 1; text-align: center; border-right: 1px #dfdfdf solid;}
.winner-form .tr span:nth-child(1) {  flex: none; width: 150px;}
.winner-form .tr span:nth-child(2) { flex: none; width: 150px;}
.winner-form .tr span:nth-child(4) { flex: none;  width: 150px; border-right:0;}
.winner-form .tr-lis { font-size: 0.9em; color: #333333; border-bottom: 1px #ffffff solid;}
.winner-form .tr-lis .lis { display: flex;}
.winner-form .tr-lis .lis span { padding: 8px 0; flex: 1; text-align: center; border-left: 1px #dfdfdf solid; border-bottom: 1px #dfdfdf solid; }
.winner-form .tr-lis .lis span:nth-child(1) { flex: none; width: 150px; border-bottom: 0; border-left: 0;}
.winner-form .tr-lis .lis span:nth-child(2) { flex: none; width: 150px;}
.winner-form .tr-lis .lis span:nth-child(4) { flex: none; width: 150px; }

/* paintings 畫作欣賞 */
.paintings { position: relative;  }
.paintings .photos { position: absolute;  top: 50px; right: 0; width: 20%; max-width: 397px; height: auto; z-index: 80; }

.search-box {  background-color: #c97848; border-radius: 10px; padding: 15px 30px; max-width: 1000px; margin: 0px auto 30px auto;  position: relative; z-index: 100; }
.search-box .school { padding: 5px 0 10px 0; border-bottom: 1px rgba(255, 255, 252, 0.3) solid;  display: flex; }
.search-box .name { padding: 10px 0 5px 0; display: flex; }
.search-box label { flex: none; width: 5em;  font-size: 1em; left: 1.4em; color: #fffecc; }
.search-box button.btn-search { flex: none; width: 120px; font-size: 1em; left: 1.4em; color: #252525; background-color: #ffffff; transition: all 0.3s ease;  line-height: 1.8em; border-radius: 5px; margin: 0 3px; }
.search-box button.btn-search:hover { background-color: #886b11;  transition: all 0.3s ease; }
.search-box button.btn-search-all { flex: none; width: 120px; font-size: 1em; left: 1.4em; color: #ffffff;  background-color: #df8d8d; line-height: 1.8em; transition: all 0.3s ease; border-radius: 5px; margin: 0 3px; }
.search-box button.btn-search-all:hover {  background-color: #d3a30c; transition: all 0.3s ease; }
.search-box select { flex: 1; margin: 0 3px; padding: 0 10px; border-radius: 5px; font-size: 1em; left: 1.4em; background-color: #ffffff; }
.search-box input.name-label {  font-size: 1em; left: 1.4em; flex: none; width: 200px; padding: 0 10px; margin: 0 3px; border-radius: 5px; }

.paintings-lis {  position: relative;  max-width: 1020px; margin: 0 auto; padding: 0 0 10px 0; }
.paintings-lis .no-date { width: calc(100% - 20px); border-radius: 10px; margin: 10px;  background-color: rgba(207, 171, 58, 0.75);  text-align: center; font-size: 1.2em; color: #ffffff; padding: 30px 0; }
.paintings-lis ul { list-style: none; margin: 0 -10px; padding: 0; }
.paintings-lis ul li { position: relative; float: left; width: calc(25% - 20px); margin: 10px; border-radius: 8px; padding:10px 10px 15px 10px; overflow: hidden; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }

.paintings-lis ul li .number { font-size: 1.2em; color: #615826; text-align: right;  display: block; }
.paintings-lis .paint_pic { width: 90%; display: block; position: relative; margin: 0 auto 5px auto;  z-index: 11; border: 1px #879221 solid; border-radius: 8px; overflow: hidden; }
.paintings-lis .paint_pic:before { content: ''; display: block;  width: 100%; height: 0; padding-bottom: 100%; }
.paintings-lis ul li .paint_pic:hover { filter: brightness(1.2); transition: all 0.3s ease;  background-color: #e2e2e2; }
.paintings-lis .paint_pic>a { position: absolute; display: block; background: #000; text-align: center; width: 100%; height: 100%; top: 0; left: 0; right: 0;  bottom: 0; overflow: hidden; }
.paintings-lis .paint_pic img {  height: auto; width: 100%;  margin: auto; display: inline-flex; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.paintings-lis ul li .paint_pic:hover a {  filter: brightness(1.2); transition: all 0.3s ease; }
.paintings-lis ul li .s_mane { font-size: 0.8em; color: #3c3c3c; padding: 10px; line-height: 1.6em; }
.paintings-lis ul li .s_mane b {  padding-right: 8px; }
.paintings-lis ul li .s_mane .works { height: 3.2em; overflow: hidden; }
.paintings-lis ul li .s_mane .works b {  float: left; display: block;  width: 2.9em; }
.paintings-lis ul li .s_mane .works span { display: block; margin-left: 2.7em; line-height: 1.4em; padding: 3px 0 0 0; }
.paintings-lis ul li .s_mane .works,
.paintings-lis ul li .s_mane .name { display: block; }

/* sign-up 線上報名 */
.sign-up { position: relative;}
.sign-up-contect-box {  height: calc(100% - 185px); overflow-y: auto; }
.sign-up .photos { position: absolute;  top: 0px; left: 0; width: 20%; max-width: 290px; height: auto; z-index: 80;}
.sign-form { position: relative; border-radius: 15px; padding: 30px; overflow: hidden; }

.sign-form:before { content: ''; display: block; position: absolute; width: 100%; height: 100%;  top: 0;  left: 0;opacity: 0.8;z-index: -1; background-color: #b68001; }

.sign-form .note-info { color: #fff; line-height: 1.6em; margin-bottom: 10px;}
.sign-form .note-info span { font-size: 1.2em; color: #fff;}
.sign-form .list { padding-bottom: 10px; display: flex; color: #ffffff;}
.sign-form .list span.form-title { flex: none; width: 6em; text-align: right; margin-right: 10px;}
.sign-form .list span { font-size: 1em; color: #ffffff; line-height: 1.6em;}
.sign-form .list .form-style01 { flex: none; width: 190px;}
.sign-form .list .form-style02 { flex: none; width: 250px;}
.sign-form .list input,
.sign-form .list select { border-radius: 5px; padding: 0px 8px; color: #333333;  width: calc(100% - 15px); display: inline-block; margin-right: 15px; }
.sign-form .list select { background-color: #ffffff; }
.sign-form .list textarea.form-style01-textarea { border-radius: 5px; margin-right: 15px; padding: 0px 8px; color: #333333; width: 100%; height: 150px; }
.sign-form .form-check-style01 input { width: auto; flex: none; width: 20px; height: 20px; margin-right: 15px; border: 0; }
.sign-form input.form-check-style01 {  flex: none; width: 24px; height: 1.3em; margin-right: 15px; border: 0 #ffffff solid; border-radius: 5px; }
.sign-form ul {  list-style-type: decimal;  color: #fff9c4; }
.sign-form .check-lis { color: #fff9c4; }
.sign-form input.upload { width: 290px; color: #fff9c4; padding: 5px 10px; margin: 2px 0 0 0; }
.sign-form .check-lis input.form-check-style02 {  width: 50px;  float: left;  width: 1.2em;  height: 1.6em; margin: 0px 5px 0 10px; border: 0; }
.sign-form .check-lis .step { width: 4em; display: block; text-indent: 0; float: left; }
.sign-form .check-lis p { margin-left: 2em; padding-left: 0; padding-bottom: 5px; }
.check-lis p.print-p { margin-left: 5.7em; }

.sign-form .font-bold { color: #297c2e; }
.sign-form .high-light { color: #33c706; }

/* information 活動資訊 */
.information { position: relative; }
.information-contect-box {  height: calc(100% - 285px); overflow-y: auto; }
.information .photos { position: absolute; top: 50px; right: 0; width: 20%; max-width: 287px; height: auto; }
.information .info-cont { display: none; }
.info-format {  max-width: 600px; width: 100%; margin: 0 auto; display: block; }
.sign-form .list span.paint-size { font-size: 0.9em; }

.info-sub { position: relative; text-align: center; margin: 10px auto 30px auto; max-width: 1000px;}
.info-sub:before { position: absolute; top: 27px; left: 0; content: ''; display: block; width: calc(50% - 340px); height: 1px; background-color: #7c7c7c; }
.info-sub:after { position: absolute;  top: 27px;  right: 0;  content: '';  display: block;  width: calc(50% - 340px); height: 1px;  background-color: #7c7c7c;}
.info-sub>div { cursor: pointer; display: inline-block; background-color: #5e89a1; font-size: 24px; border-radius: 99em; padding: 0.3em 1.5em; color: #ffffff; margin: 0 5px; position: relative; overflow: hidden; transition: all 0.3s ease; z-index: 5;}
.info-sub>div:hover,
.info-sub>div.active { color: #ffffff; background-color: #1cd2ff;}


.print { text-align: center; padding: 30px 0 0px 0; font-size: 1em; }
.print h3 { color: #42b6ed; font-size: 1.8em; margin-bottom: 10px; text-align: center; }
.paint-number { color: #fff290;  font-size: 1.6em; border-bottom: 1px #f4d702 solid; margin-bottom: 30px; padding-bottom: 20px; }
h4.paint-title { color: #ffe41b; position: relative; font-size: 1.2em; }
h4.paint-title:before { content: ''; display: inline-block; width: 20px; height: 20px; background-image: url(../images/list-dot.png); background-position: center; background-repeat: no-repeat; background-size: cover; margin: 0 10px 4px 0; vertical-align: middle; }

.print-list { font-size: 1em; line-height: 1.6em; color: #ffffff;  padding-bottom: 20px; }
.print-list span { display: inline-block;}
.print-list .form-title { text-align: right;}
.print-list .paint-brief { display: block; float: right; width: calc(100% - 5.9em);}
.print-note { padding: 10px 0px 10px 36px; color: #ffe600; }

.high-light { color: #33c706; }
.font-bold {  font-weight: 700; }
.red { color: #d10000; }
.format-box { text-align: center; padding: 10px 0px 30px 0; }

ul.lis-dot { list-style-type: cjk-ideographic; padding-left: 70px; font-size: 1em;}
ul.lis-dot li { padding-bottom: 10px; }

.btn-box { padding: 50px 0 20px 0; text-align: center; }
.btn-box a { background-position: center; background-repeat: no-repeat; background-size: cover; display: inline-block; transition: all 0.3s ease; filter: brightness(1);}
.btn-box a:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 10%;}
.btn-box a:hover { filter: brightness(1.1);}
a.btn-sign-up { background-image: url(../images/btn-sign-up.png); width: 100%;  max-width: 363px;}
a.btn-sign-up:before { padding-bottom: 20.1%; }
a.btn-send { background-image: url(../images/btn-send.png); width: 100%;  max-width: 215px; margin: 0 10px 0 0; }
a.btn-send:before { padding-bottom: 34%; }
a.btn-reset {  background-image: url(../images/btn-reset.png); width: 100%; max-width: 215px; margin: 0 0 0 10px; }
a.btn-reset:before { padding-bottom: 34%; }
a.btn-save { background-image: url(../images/btn-save.png); width: 100%;  max-width: 215px; margin: 0 0 0 10px; }
a.btn-save:before { padding-bottom: 34%; }
a.btn-print { background-image: url(../images/btn-print.png); width: 100%; max-width: 215px; margin: 0 0 0 10px;}
a.btn-print:before { padding-bottom: 34%;}
a.btn-fb { background-image: url(../images/icon-fb.png); width: 100%; max-width: 65px; margin: 0 0 8px 20px;}
a.btn-fb:before { padding-bottom: 100%;}
a.btn-line { background-image: url(../images/icon-line.png); width: 100%;  max-width: 65px;  margin: 0 0 8px 5px; }
a.btn-line:before {  padding-bottom: 100%; }



/* bookmark */
.bookmark { text-align: center; font-size: 0.8em; padding: 10px 0 100px 0; color: #ffffff; margin: 0px 0 5px 0;}
.bookmark a { background: #c9cbcc; font-size: 18px; font-family: "roboto", Microsoft JhengHei; display: inline-block; line-height: 40px; width: 40px; height: 40px; color: #ffffff;  margin: 5px; border-radius: 99em;  overflow: hidden; }
.bookmark a:hover { background: #af8a16; }
.bookmark select { background: #ffffff; border: 0; padding: 5px; color: #81795A; margin: 0 2px;}
.bookmark a i { width: 100%; height: 100%; display: block; background-color: #009db4; background-position: center; background-size: 100% auto; background-repeat: no-repeat;}
.bookmark a i.arrowA { background-image: url(../images/arrow-1-left.png);}
.bookmark a i.arrowB { background-image: url(../images/arrow-1-right.png);}

.bookmark a.disabled { background: #CCC;}
.bookmark a.active {  background: #af8a16;}
.bookmark .portal { padding-top: 10px; text-align: center;}
.bookmark .portal span {  display: inline-block; font-size: 1em; color: #535353; padding-top: 10px; border-top: 2px #cecece solid; }


/* pop */
.btn-rule,
.btn-privacy { cursor: pointer; }

.pop { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9);  top: 0; right: 0; z-index: 990; display: flex;  -webkit-align-items: center;  align-items: center;  -webkit-justify-content: center; justify-content: center; transition: all 0.5s ease;  opacity: 0; visibility: hidden;}
.pop.active {  opacity: 1;  visibility: visible;  transition: all 0.5s ease; }
.pop-body { background-color: #ffffff; border-radius: 15px;  max-width: 800px;  width: 80%; min-height: 540px; height: 540px;   padding: 20px; overflow: hidden;  position: relative;}
.pop-cont { overflow-y: auto;   height: calc(100% - 88px);  max-height: 710px;}
.pop-cont p { font-size: 18px; line-height: 1.6em;  margin-bottom: 20px;}
.pop-cont ul { list-style-type: cjk-ideographic; color: #333333; padding: 0 0 0 3em; font-size: 18px;}
.pop-cont ul li { margin-bottom: 10px;  line-height: 1.6em;}
.pop .pop-title { font-size: 30px; line-height: 48px; color: tomato; text-align: center; }
.pop .btn-close { display: block; width: 50px; height: 50px; background-image: url(../images/btn-close.png); background-size: cover; position: absolute; top: 20px; right: 20px;}
.pop .btn-close:hover { opacity: 0.8; }

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

.winner-not-yet { font-size: 1.8em; color: #ffffff; text-align: center; padding: 50px 20px;  border-radius: 15px; box-shadow: 0 0 10px #e2e2e2;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffadf2+0,ff60e7+100 */
    background: #ffadf2;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffadf2 0%, #ff60e7 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffadf2 0%, #ff60e7 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffadf2 0%, #ff60e7 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffadf2', endColorstr='#ff60e7', GradientType=0);
    /* IE6-9 */
}


/*top*/
.top { position: fixed; right: -70px;  bottom: 10px;  width: 60px;  height: 60px;  border-radius: 99em;  border: 5px #ffffff solid;  box-shadow: 0 0 10px #9e9e9e; background-color: #b06cd8; color: #ffffff; font-size: 14px;   text-align: center;  z-index: 850; cursor: pointer;  transition: all 0.3s ease; }
.top:hover { background-color: #b32424; transition: all 0.3s ease; }
.top:before {  content: ''; display: block;  width: 12px;  height: 12px; margin: 7px auto 2px auto;  background-image: url(../images/top-arrow.png);  background-repeat: no-repeat;  background-position: center;  background-size: contain; }
.fancybox-title { width:100% }
.fancybox-title-float-wrap { top: 100%}
.fancybox-title-float-wrap .child {  width:100% }
.fancybox-title-float-wrap .child p {  white-space: pre-line; word-break: break-all !important;}


/* scrollbar */
::-webkit-scrollbar-track
{   border-radius: 10px; background-color: transparent; margin:0 5px; background-color: rgba(255 255 255 / 30%); }
::-webkit-scrollbar
{ background-color: transparent; height: 6px; width: 6px; margin: 5px; }
::-webkit-scrollbar-thumb
{ border-radius: 10px; -webkit-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #acadae; }