@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

html,body{  
	font-size:16px;
	font-weight:500;
	font-family:'Noto Sans TC','Arial', sans-serif;
	
	color:#000; 
	background:#fff;
	
 	width:100%; height:100%; margin:0;
	
	text-size-adjust:none;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale; 
}
body.flat{ background:#fff;  }

img{ border:none; padding:0; margin:0;  }
a{ font-size:inherit; color:inherit; /*text-decoration:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0);  }
body, html, div, select, input, textarea, img, span{ font-family:'Noto Sans TC','Arial', sans-serif; -webkit-tap-highlight-color:rgba(0,0,0,0); }

h1,h2,h3,h4{ font-weight:inherit; font-size:inherit; line-height:inherit; margin:0; padding:0; display:inherit; }
p{ margin:0 0 1em 0; line-height:1.6;  }

input{ background-color:transparent; border:none; color:#000; font-size:inherit; width:100%}
input:focus, textarea:focus{ outline:none;    }
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
    background:#fff; -webkit-box-shadow:inset 0 0 0px 9999px #fff; box-shadow:inset 0 0 0px 9999px #fff; color:#000; -webkit-text-fill-color:#000 !important;
}

ul, li{  padding:0; margin-left:0.8em; list-style-type:disc; }
ol, ol li{ margin-left:0; padding-left:0; }
ol{ margin-left:0em; margin-top:0; }
ol li{ margin-bottom:0em; list-style-position:inside;  }
ul li{ margin-bottom:0.5em; list-style-position:inside;  }
ul li:last-child{ margin-bottom:0em }

.agreement-container ul li{ list-style-position: outside}

button{ padding:0; margin:0; border:none; font-family:inherit; font-size:inherit; font-weight:inherit; color:inherit; line-height:1; cursor:pointer; background:transparent }


.clear{ clear:both; }
.bg-contain{ background-repeat:no-repeat; background-size:contain; background-position:center;  }
.bg-child{ width:50%; height:50%; top:25%; left:25%; position:absolute; }
.bg-ani-linear{  animation-iteration-count:infinite; animation-timing-function:linear; }
.bg-black{ background:#000;} 

.desktop-only{display:none }
.mobile-only{  }

/* text style */
.txt-black{ color:#000; }
.txt-white{ color:#fff; }
.txt-grey{ color:#565656; }
.txt-drakgreen{ color:#023A29; }
.txt-lightgrey{ color: #B0B0B0; }
.txt-red{ color:#ed1b2e; }
.txt-green{ color:#004d30; }

.txt-bold{ font-weight:800; }
.txt-semibold{ font-weight:600; }

.txt-giant{ font-size:3.5em; }
.txt-title{ font-size:2.5em; }
.txt-bigger{ font-size:2em; }
.txt-big{ font-size:1.5em; }
.txt-hl{ font-size:1.25em; }
.txt-regular{ font-size:1em;}
.txt-small{ font-size:0.9em; }
.txt-mini{ font-size:0.8em; }

.oneline{ line-height:1}

.txt-inter{ font-family: 'Inter', 'Noto Sans TC', sans-serif; }
/* text style */


/* header */
.head-banner-container{ position:relative; background:#fff; padding:1.25em 0; width:100%; }
.head-banner-container-inner{ display:flex; justify-content:center; align-items:center; height:3em }

.sep-container{ height:100%; width:1px; margin:0 .8em 0em 1.2em; background:#000 }
.logo-container { position:relative; background-image:url("../img/new-balance-logo.svg"); background-position:left center; background-size:contain; background-repeat:no-repeat; width:4em; height:80%;  }
.logo-container:nth-child(1){ background-position:right center; background-image:url("../img/7-eleven-logo.svg");}
/* header */
 

/* landing */
.landing-container{ width:100%; position:relative; height:calc(100% - 3em - 2.5em); min-height:900px;  }

.notice-container{ position:relative; height:calc(25% + 0em); transform:translateY(5em); display:flex; align-items:center; justify-content:center}
.notice-container > .inner-container { text-align:center; }
.notice-container > .inner-container > div:nth-child(1){ width:15em; text-align:center; margin:0 auto }

.kv-container{ width:100%; height:calc(75% - 5em); position:relative; overflow:hidden; border-bottom-left-radius:10em; border-bottom-right-radius:10em  }
.kv-bg-container, .kv-bg-radial-container{  width:100%; position:absolute; height:100%; top:0; left:0;  ;  }
.kv-bg-radial-container{ background:radial-gradient(circle, #006445 0%, #2c7e4a 40%, #00472f, #00472f); }
.kv-bg-container{ background-image:url("../img/pattern.png"); background-position:center top; background-size:1000px auto; background-repeat:repeat }

.hexagon-container { position:absolute; width:100%; max-width:1200px;/*1:8*/  height:auto; left:50%; bottom:0; transform:translate(-50%,100%); text-align:center; opacity:0; } 
.hexagon-container > img{ width:100%}
.hexagon-container > div{ position:absolute; width:100%; top:0;;  animation:ani-flash .2s .81s infinite alternate }


.kv-main-container{ position:absolute; width:100%; max-width:1000px; height:calc(100% - 3em - 2em);  left:50%; top:1.5em; transform:translate(-50%,-0%); }
.kv-main-container > div{ position:absolute;  }
.kv-main-container > div > div{ position:absolute; background-position:center; background-size:contain; background-repeat:no-repeat; left:0; width:100%; top:0; height:100% }

.kv-main-container > div:nth-child(1) { width:100%; padding-bottom:45.3%;  left:50%; top:33%; transform:translate(-50%,-5%);  }
.kv-main-container > div:nth-child(1) > div{ background-image:url("../img/kv-bottom.png");   }

.kv-main-container > div:nth-child(2) { width:52%; padding-bottom:41.6%;  left:50%; top:33%; transform:translate(-50%,-50%);  }
.kv-main-container > div:nth-child(2) > div{ background-image:url("../img/kv-top.png");  }

.kv-main-container > div:nth-child(3) { width:37%; height:101%; left:71%; bottom:-2em; transform-origin:bottom 42%; }
.kv-main-container > div:nth-child(3) > div{ background-image:url("../img/kv-stand.png"); background-position:left bottom;  opacity:0 }
 
.kv-main-container > div:nth-child(4) { width:31%; padding-bottom:21%; right:76%; bottom:68%; transform-origin:bottom right; }
.kv-main-container > div:nth-child(4) > div{ background-image:url("../img/kv-tagline.png"); background-position:right bottom;   }

.kv-main-container > div:nth-child(5) { width:38%; padding-bottom:22.1%; right:31%; top:33%;  transform:rotate(20deg) translateY(65%); transform-origin:25% bottom;}
.kv-main-container > div:nth-child(5) > div{ background-image:url("../img/kv-shoe.png"); background-position:center bottom; transform-origin:bottom center; }

.kv-main-container > div > div{ transform:scale(0); } 
.kv-main-container > div:nth-child(2) > div{ transform:translateY(-50%) scale(0); }   
.kv-main-container > div:nth-child(3) > div{ transform:translateY(-10%); }    

.landing-container.active .kv-main-container > div:nth-child(1) > div{ transform-origin:top center; transform:scale(1); transition:transform 500ms  cubic-bezier(.2,0.7,.4,1) }
.landing-container.active .kv-main-container > div:nth-child(2) > div{ transform:scale(1); transition:transform 500ms 200ms cubic-bezier(0,.8,.4,1) }
.landing-container.active .kv-main-container > div:nth-child(2) > div{ animation:ani-kv-main 1.5s .71s infinite alternate linear} 

.landing-container.active .hexagon-container {  transform:translate(-50%,50%); opacity:1; transition:transform 400ms 400ms cubic-bezier(0,.7,.7,1), opacity 300ms 400ms }

.landing-container.active .kv-main-container > div:nth-child(3) { animation:ani-kv-flag 2s .71s infinite alternate }
.landing-container.active .kv-main-container > div:nth-child(3) > div{ opacity:1; transform:scale(1); transition:transform 200ms 500ms cubic-bezier(0,1,.55,1), opacity 100ms 500ms }

.landing-container.active .kv-main-container > div:nth-child(5){  transform:translateY(65%); transition:transform 400ms 450ms cubic-bezier(0,.61,.47,1);  animation:ani-kv-shoe .6s .91s infinite alternate }
.landing-container.active .kv-main-container > div:nth-child(5) > div{   transform:scale(1); transition:transform 300ms 450ms cubic-bezier(0,.61,.47,1) }


.landing-container.active .kv-main-container > div:nth-child(4) > div{ transform-origin:bottom right; transform:scale(1); transition:transform 300ms 600ms cubic-bezier(0,.61,.47,1.25) }
.landing-container.active .kv-main-container > div:nth-child(4){ animation:ani-kv-tagline .5s .91s infinite alternate}

@keyframes ani-kv-flag{
	0%{ transform:rotate(0)}
	100%{ transform:rotate(.5deg) }
}
@keyframes ani-kv-tagline{
	0%{ transform:scale(1) }
	100%{ transform:scale(0.97) }
}
@keyframes ani-kv-main{
	0%{ transform:scale(1) }
	100%{ transform:scale(0.99) }
}
@keyframes ani-flash{
	0%{ opacity:1 }
	100%{ opacity:.9 }
}
@keyframes ani-kv-shoe{
	0%{ transform:rotate(0deg) translateY(65%); }
	100%{transform:rotate(4deg) translateY(65%);  }
}


.notice-container > .inner-container > div{ opacity: 0; transform:translateY(2em)}
.landing-container.active .notice-container > .inner-container > div{ opacity:1; transform:translateY(0em); transition:transform 400ms  cubic-bezier(0,.7,.6,1), opacity 200ms linear}

.landing-container.active .notice-container > .inner-container > div:nth-child(1){ transition-delay:600ms}
.landing-container.active .notice-container > .inner-container > div:nth-child(2){ transition-delay:700ms}
.landing-container.active .notice-container > .inner-container > div:nth-child(3){ transition-delay:800ms}


.landing-container.subpage{ height:530px; min-height:0; }
.landing-container.subpage .kv-container{ height:calc(100% - 0em); }

.landing-container.subpage .kv-main-container{ max-width:800px; top:calc(1.5em + 10px); }
.landing-container.subpage .kv-main-container > div:nth-child(3) { width:37%; height:101%; left:71%; bottom:0em; transform:translateY(15%)}
.landing-container.subpage.active .kv-main-container > div:nth-child(3) { animation:none!important }

/*
.landing-container{ width:100%; position:relative; height:calc(100% - 3em - 2.5em); min-height:900px;  }

.notice-container{ position:relative; height:calc(25% + 0em); transform:translateY(5em); display:flex; align-items:center; justify-content:center}
.notice-container > .inner-container { text-align:center; }
.notice-container > .inner-container > div:nth-child(1){ width:15em; text-align:center; margin:0 auto }

*/


/* landing */


.scroll-ele{ opacity:0; transform:translateY(2rem); transition:transform 400ms, opacity 300ms}
.scroll-ele.active{ opacity:1; transform:translateY(0rem)}


/* intro */
.side-apply-now-container{ position:absolute; left:calc(50% + 19em); top:50%; width:8em;   }
.side-apply-now-container .dynamic-hexegon-container{ margin:0 auto; transform:translateY(-1em)}
.side-apply-now-container  .dynamic-hexegon-container img{ width:auto; height:1.25em!important}

.intro-columns-container .side-apply-now-container, .intro-columns-container .new-button-container{ display:none}

.intro-container{ text-align:center; margin-bottom:2em; position:relative}
.intro-banner-container{ background-color:#e71f2f; width:100%; padding:2em 0; background-image:url("../img/run-pattern.svg"); background-size:auto calc(100% - 4em); background-position:center; position:relative; text-align:center; background-repeat:repeat-x;  margin-bottom:2em; border-top:3px solid #000; border-bottom:3px solid #000}
.intro-banner-container > div > img{  height:4.5em; width:auto; text-align:center}
.intro-banner-container > div{ background-color:#e71f2f; display:inline-block;}

.intro-columns-container{ display:flex; align-items:center;justify-content:space-between; position:relative; margin-top:5em}

.intro-columns-container > div{ width:50%; }

.intro-column-container{ display:flex; align-items:center; width:100%; position:relative;}
.intro-column-container-inner{ width:90%; margin:auto; text-align:center; position:relative}


.intro-column-container:nth-child(1) .intro-column-container-inner > div, .intro-column-container:nth-child(1) .intro-column-container-inner > button{ position:relative}
.intro-column-container:nth-child(1) .intro-column-container-inner > div:nth-child(1){ background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%); mix-blend-mode:overlay; position:absolute; width:90%; padding-bottom:90%; top:5%; left:5%;}

.fee-container{ background:#fff; line-height:1; display:inline-block; border-radius:1000px; padding:.5em 1em; position:absolute; border:2px solid #004d30; top:60%; }
.fee-container > img{ width:auto; height:1.5em; }

.runner-set-container{ margin-bottom:1em  }
.runner-set-container > img{ width:90%; height:auto; }

.runner-set-info-container > img{ width:auto; height:1.5em!important; }



.intro-column-container:nth-child(2){ background:#f36d25; border:1em solid #fff; border-radius:1000px; border-right:none; border-top-right-radius:0; border-bottom-right-radius:0; height:calc(100% - 5em); }
.intro-column-container:nth-child(2) .intro-column-container-inner { width:70%; text-align:left; margin:3em auto}

 
.runner-set-detail-container > img{ width:auto; height:2em; }
.intro-column-container:nth-child(2) ol{ margin-top:1em; margin-left:1em}
.intro-column-container:nth-child(2) .intro-column-container-inner  > div:last-child{text-align:right}

.intro-column-container button{ position:absolute; left:0; top:0;  transform:translateY(-100%) }
.intro-column-container button > a > img{ width:auto; height:3em}


.regions-container{ display:flex; justify-content:center; margin-top:2em }
.regions-container > button:nth-child(2){ margin:0 2em}
.regions-container > button > div{ background-repeat:no-repeat; background-size:auto 200%; background-image:url("../img/region.svg"); }
.regions-container > button{ width:14em; padding:.75em 1em; border:2px solid #000; border-radius:100px; text-align:center; background-color:#545454 }

.regions-container > button > div{ height:3em; width:90%; margin:auto}

.regions-container > button:nth-child(1) > div{ background-position:left top}
.regions-container > button:nth-child(2) > div{ background-position:center top}
.regions-container > button:nth-child(3) > div{ background-position:right top}

.regions-container > button:nth-child(1).hover, .regions-container > button:nth-child(1).active{ background-color:#0064bf }
.regions-container > button:nth-child(2).hover, .regions-container > button:nth-child(2).active{ background-color:#f36d25 }
.regions-container > button:nth-child(3).hover, .regions-container > button:nth-child(3).active{ background-color:#006d2c }

.regions-container > button:nth-child(1).hover > div, .regions-container > button:nth-child(1).active > div{  background-position:left bottom}
.regions-container > button:nth-child(2).hover > div, .regions-container > button:nth-child(2).active > div{ background-position:center bottom}
.regions-container > button:nth-child(3).hover > div, .regions-container > button:nth-child(3).active > div{ background-position:right bottom}

.districts-container{ margin:1.5em auto 0 auto; width:100%; max-width:66em;  position: relative; overflow:hidden;  } 
.district-container{ position:absolute; width:100%;   }
.district-container-inner{ position:relative;  width:100%; display:flex; flex-wrap:wrap; justify-content:center; }
.district-ele{ width:calc(50% - 2em);  margin:3em 1em 0 1em; position:relative;  }

.district-ele-inner{ display:flex; margin-top:1em; align-items:center; justify-content:center;}
.district-ele-inner > div{ width:50%;}
.district-ele-inner > div:nth-child(1){ width:calc(50% - 1em); margin-right:1em ;  }
.district-ele-inner > div:nth-child(1) > div{ width:calc(100%); padding-bottom:100%; margin:1em auto; background-image:url(../img/districts.png); background-size:auto 200%; }
.district-ele-inner > div:nth-child(2){ text-align:left;  width:calc(60%)!important }
.district-pill{padding:.4em .75em; line-height:1; margin-bottom:.2em; color:#fff; background-color:#004d30; border-radius:4em; display:inline-block; transform:translateX(-.75em)}
.district-ele-inner > div:nth-child(2) > div:nth-child(2){   margin-bottom:.2em;   }
.district-ele-inner > div:nth-child(2) > div:nth-child(3){  padding-bottom:.1em; border-bottom:2px solid #004d30; display:inline-block}



.district-ele:nth-child(2),  .district-ele:nth-child(5), .district-ele:nth-child(8){ /*margin-left:3em; margin-right:3em*/}
.district-container:nth-child(2) .district-ele:nth-child(5){ /*margin-left:3em; margin-right:0;*/ }

.district-ele > div:nth-child(1){ text-align:center}
.district-ele > div:nth-child(2){ text-align:center; margin-top:.25em }
.district-ele > div:nth-child(2) > button{ border-bottom:2px solid #004d30; padding-bottom:.1em  }
/*
.district-ele > div:nth-child(3){ width:60%; padding-bottom:60%; margin:1em auto; background-image:url(../img/districts.png); background-size:auto 200%; }
*/
.district-ele > div:nth-child(3) > div:nth-child(1){ width:60%; padding-bottom:60%; margin:1em auto; background-image:url(../img/districts.png); background-size:auto 200%; }


.district-ele > div:nth-child(3) > div:nth-child(1){ transform:scale(0); transition:transform 400ms }
.district-ele.active > div:nth-child(3) > div:nth-child(1){ transform:scale(1) }
.district-ele > div:nth-child(3) > div:nth-child(2){ transform:translateY(2em); transition:transform 300ms 100ms }
.district-ele.active > div:nth-child(3) > div:nth-child(2){ transform:translateY(0em);}

 
.district-container:nth-child(1) .district-ele{  } 


.district-container:nth-child(1) .district-ele:nth-child(1) .district-ele-inner > div:nth-child(1) > div{ background-position:55.5% 0; } 
.district-container:nth-child(1) .district-ele:nth-child(2) .district-ele-inner > div:nth-child(1) > div{ background-position:66.6% 0; }
.district-container:nth-child(1) .district-ele:nth-child(3) .district-ele-inner > div:nth-child(1) > div{ background-position:77.7% 0; } 
.district-container:nth-child(1) .district-ele:nth-child(4) .district-ele-inner > div:nth-child(1) > div{ background-position:88.8% 0; } 

.district-container:nth-child(2) .district-ele:nth-child(2) .district-ele-inner > div:nth-child(1) > div{ background-position:11.1% 0; }
.district-container:nth-child(2) .district-ele:nth-child(4) .district-ele-inner > div:nth-child(1) > div{ background-position:22.2% 0; }
.district-container:nth-child(2) .district-ele:nth-child(3) .district-ele-inner > div:nth-child(1) > div{ background-position:33.3% 0; }
.district-container:nth-child(2) .district-ele:nth-child(5) .district-ele-inner > div:nth-child(1) > div{ background-position:44.4% 0; }

.district-container:nth-child(3) .district-ele:nth-child(1) .district-ele-inner > div:nth-child(1) > div{ background-position:0% 100%; }
.district-container:nth-child(3) .district-ele:nth-child(2) .district-ele-inner > div:nth-child(1) > div{ background-position:11.1% 100%; }
.district-container:nth-child(3) .district-ele:nth-child(3) .district-ele-inner > div:nth-child(1) > div{ background-position:22.2% 100%; }
.district-container:nth-child(3) .district-ele:nth-child(4) .district-ele-inner > div:nth-child(1) > div{ background-position:33.3% 100%; }
.district-container:nth-child(3) .district-ele:nth-child(5) .district-ele-inner > div:nth-child(1) > div{ background-position:44.4% 100%; }
.district-container:nth-child(3) .district-ele:nth-child(6) .district-ele-inner > div:nth-child(1) > div{ background-position:55.5% 100%; }
.district-container:nth-child(3) .district-ele:nth-child(7) .district-ele-inner > div:nth-child(1) > div{ background-position:66.6% 100%; }
.district-container:nth-child(3) .district-ele:nth-child(8) .district-ele-inner > div:nth-child(1) > div{ background-position:77.7% 100%; } 
.district-container:nth-child(3) .district-ele:nth-child(9) .district-ele-inner > div:nth-child(1) > div{ background-position:88.8% 100%; } 


.apply-now-container .district-ele-inner{ display:block; margin:auto;   }
.apply-now-container .district-ele-inner > div:nth-child(1) {   margin:auto; }
.district-apply-container{ display:flex; margin:auto; justify-content:center}
.district-ele-inner  > div:nth-child(2){ margin:auto;   width:100%; }
.district-selection-container button{ width:2.5em; height:2.5em; border:2px solid #004d30; padding-bottom:.1em; margin-right:2em   }
 
.district-selection-container button.active{  background-image:url(../img/tick-b.svg); background-size:90% auto; background-position:center; background-repeat:no-repeat; }


.section-container.three-kinds{ padding-bottom:0; margin:4em 0 ;}
.three-kinds > div:nth-child(2){ text-align:center}
.three-kinds-container{ display:flex; justify-content:space-between; margin:3em auto 0 auto; position:relative}
.three-kinds-ele{ width:33.33%; position:relative}

.three-kinds-ele > div{ position:relative; background-repeat:no-repeat;  }
.three-kinds-ele > div:nth-child(2){ width:45%; padding-bottom:45%; background-image:url("../img/three-kinds.png"); background-size:300% auto;  }
.three-kinds-ele > div:nth-child(1){ width:55%; padding-bottom:5em; background-image:url("../img/three-kinds-title.svg"); background-size:auto 300%; float:right;   transform:translateY(-1em)}
.three-kinds-ele > div:nth-child(3){  text-align:left; width:calc(50% - 2em); position:absolute; top:calc(50% + .5em); left:calc(50% + 1em);  }

.three-kinds-ele:nth-child(2) > div:nth-child(2){  background-position:50% 0%    }
.three-kinds-ele:nth-child(2) > div:nth-child(1){ background-position:0% 50% }
.three-kinds-ele:nth-child(3) > div:nth-child(2){  background-position:100% 0%    }
.three-kinds-ele:nth-child(3) > div:nth-child(1){ background-position:0% 100% }


.three-kinds-ele > div:nth-child(2){ transform:scale(0); transition:transform 400ms}
.three-kinds-ele.active > div:nth-child(2){ transform:scale(1)}
.three-kinds-ele > div:nth-child(1){ transform:translateX(2em) translateY(-1em); opacity:0; transition:transform 300ms}
.three-kinds-ele.active > div:nth-child(1){ transform:translateY(-1em); opacity:1;}
.three-kinds-ele > div:nth-child(3){ opacity:0;  transform:translateY(1em);  transition:transform 300ms, opacity 200ms } 
.three-kinds-ele.active > div:nth-child(3){ transform:translateY(0em); opacity:1;}

.three-kinds-bottom{ width:100%; left:0; background:#fff; bottom:0; height:199px; position:absolute}


.section-container.footer{ margin-top:10em; background:#006445; border-radius:0; border-top-left-radius:20em;  border-top-right-radius:20em; padding-bottom:20em; overflow:visible; padding-top:0 }
.section-container.footer .hexagon-container { transform:translate(-50%,-50%); opacity:1!important; position:relative} 

.section-container.footer.static{ margin-top:0; padding-top:2em; padding-bottom:5em; }
.section-container.footer.static .hexagon-container { transform:translate(-50%,-0%);  } 

.section-container.footer.static > .inner-container{ display:none;}
.section-container.footer.static > .inner-container.active{ display:block;}

/* intro */



/* common */
.max-container { max-width:1400px; margin:auto;}

.inner-container{ position:relative; margin:auto; width:90%; max-width:1200px; }
.inner-container.autoH{ height:100%}

.hi{ min-width:10em; margin:auto; text-align:center; }

.dynamic-hexegon-container{ margin:1em auto .5em auto;  background:#373b3e; height:auto; padding:.7em 2em .75em 2em; min-width:14em; max-width:calc(100% - 4em);   display:inline-block; clip-path:polygon(.6em 0em, calc(100% - .6em) 0%, 100% .6em, 100% calc(100% - .6em), calc(100% - .6em) 100%, .6em 100%, 0% calc(100% - .6em), 0% .6em, .6em 0em ); position:relative;}
.dynamic-hexegon-container > div:nth-child(2){ position:relative; }
.dynamic-hexegon-container > div:nth-child(1){ position:absolute; background:#0a7751; width:100%; height:100%; top:0; left:0; clip-path:polygon(calc(.6em + 1px) 4px, calc(100% - .6em - 1px) 4px, calc(100% - 4px) calc(.6em + 1px), calc(100% - 4px) calc(100% - .6em - 1px), calc(100% - .6em - 1px) calc(100% - 4px), calc(.6em + 1px) calc(100% - 4px), 4px calc(100% - .6em - 1px), 4px calc(.6em + 1px)); }


.dynamic-hexegon-container.orange  > div:nth-child(1){ background:#f36d25}
.dynamic-hexegon-container.autosize{ width:auto; min-width:7em; padding:.75em .5em .75em .5em; text-align:center; }
.dynamic-hexegon-container.largesize { padding:1.2em 1.5em; background:#000;}

.dynamic-hexegon-container.largesize  > div:nth-child(2){ background-image:url("../img/buttons.svg"); background-size:auto 1100%; background-position:0% 10%; background-repeat:no-repeat; height:2.5em; width:15em; }
.dynamic-hexegon-container.largesize > div:nth-child(1){ clip-path:polygon(calc(1em + 1px) 4px, calc(100% - 1em - 1px) 4px, calc(100% - 4px) calc(1em + 1px), calc(100% - 4px) calc(100% - 1em - 1px), calc(100% - 1em - 1px) calc(100% - 4px), calc(1em + 1px) calc(100% - 4px), 4px calc(100% - 1em - 1px), 4px calc(1em + 1px)); }
.dynamic-hexegon-container.largesize{ clip-path:polygon(1em 0em, calc(100% - 1em) 0%, 100% 1em, 100% calc(100% - 1em), calc(100% - 1em) 100%, 1em 100%, 0% calc(100% - 1em), 0% 1em, 1em 0em ); }

.dynamic-hexegon-container.smallsize > div:nth-child(1){ clip-path:polygon(calc(.6em + 1px) 2px, calc(100% - .6em - 1px) 2px, calc(100% - 2px) calc(.6em + 1px), calc(100% - 2px) calc(100% - .6em - 1px), calc(100% - .6em - 1px) calc(100% - 2px), calc(.6em + 1px) calc(100% - 2px), 2px calc(100% - .6em - 1px), 2px calc(.6em + 1px)); }


.section-container{ position:relative; width:100%;   overflow:hidden; border-radius:10em; padding:4em 0 }
.section-container.norounds{ border-radius:0}

.round-angle-button{ border:2px solid #000; border-radius:1000px; background:#fff; padding:1em 3em;  }
.round-angle-button img:nth-child(2){ display:none}

.round-angle-container{ background:#fff;  margin:1em auto 0 auto; border-radius:1000px;}
.round-angle-container-inner{ padding:2em; display:flex; align-items: center; }
.round-angle-container-inner > div:nth-child(1){ width:45%; padding-bottom:45%; border-radius:1000px; background-size:cover;  }
.round-angle-container-inner > div:nth-child(2){ width:50%; margin-left:5%; }
.round-angle-container-inner > div:nth-child(2) p{ line-height:1.5; }

.round-angle-container .txt-giant:nth-child(1) { transform:translateX(-.6em); }
.round-angle-container .txt-giant:nth-child(2) { margin-bottom:.25em; transform:translateX(.5em); }

.new-button-container{ position:absolute; width:10em; bottom:0; right:0; }


div.box {   
  border-bottom-right-radius:1000px; position:relative;
}   
.box img {
  float: right; background:#000; width:10em; height:7.5em; opacity:0;
  clip-path:polygon(100% 0%, 100% 100%, 0% 100%);
  shape-outside:polygon(100% 0%, 100% 100%, 0% 100%);
}

.title-container { text-align:center}
.title-container > img{ width:auto; height:3em;}



.tnc-container{ position:relative;  width:100%; margin-bottom:1.5em;   line-height:1; }
.tnc-container-inner{display:flex; align-items:center; justify-content:center;  }
.checkbox-container{ cursor:pointer; border:2px solid #fff; width:1.5em; height:1.5em; margin-right:1em; margin-top:1px; position:relative;}
.checkbox-container.active > div{ background-image:url(../img/tick.svg); background-size:contain; background-position:center; background-repeat:no-repeat; position:absolute; width:90%; height:90%; top:5%; left:5%;}
.tnc-container.error div{ color:#ff0000!important; }
.tnc-container.error .checkbox-container{ border-color:#ff0000; }


.overlay-container{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.1); width:100%; height:100%; z-index:1; display:none;  overflow:auto}
.overlay-container.active{ display:block}
.overlay-container-inner{ width:90%; height:calc(100% - 8em); min-height:800px; padding:4em 0; position:relative; display:flex; align-items:center; justify-content:center;  margin: auto}
.overlay-box{ background:rgba(0,0,0,0.8); width:calc(100% - 10em); max-width:calc(900px - 10em); border-radius:6em; padding:5em; position:relative;  }
.overlay-box-inner{  text-align:center; width:100%; padding-bottom:75%; border-radius:3em; position:relative; overflow:hidden}

.overlay-container.runner-route .overlay-box-inner{  padding-bottom:100%; }
.overlay-container.shoes-size-chart .overlay-box-inner{  padding-bottom:99.5%; }
.overlay-container.shirt-size-chart .overlay-box-inner{  padding-bottom:77.1%; }
.overlay-container.shirt-style-male .overlay-box-inner{  padding-bottom:70%; }

.overlay-box-label-container{ position:absolute; width:90%; left:5%; bottom:2em; background-repeat:no-repeat; height:2em}

.overlay-container.runner-gift  .overlay-box-label-container{ position:absolute; width:90%; left:5%; bottom:1.5em; background-image:url(../img/runner-gift-labels.svg); background-size:auto 2200%; background-position:center 0%;}
.overlay-container.runner-route  .overlay-box-label-container{ position:absolute; width:90%; left:5%; bottom:1.5em; background-image:url(../img/runner-route-labels.svg); background-size:auto 1900%; background-position:center 0%;}
.overlay-container.shirt-size-chart  .overlay-box-label-container, .overlay-container.shoes-size-chart  .overlay-box-label-container{ position:absolute; width:90%; left:5%; bottom:1.5em; background-image:url(../img/popup-labels.svg); background-size:auto 1000%; background-position:center 0%;}

.overlay-container.shirt-style-male .overlay-box-label-container, .overlay-container.shirt-style-female  .overlay-box-label-container{ position:absolute; width:90%; left:5%; bottom:1.5em; background-image:url(../img/popup-labels.svg); background-size:auto 1000%; background-position:center 11.1%;}




/*
.overlay-box button{ background:#f21730; border:.5em solid #ff8198; padding:.75em 2em; margin-top:1em; border-radius:.5em }
.overlay-box button.hover{ background:#fff; color:#f21730 }
*/

.overlay-container.alert .overlay-box{ width:90%; max-width:480px;  padding:3em 4em; border-radius:4em;  }
.overlay-container.alert .overlay-box-inner{  text-align:center; width:100%; padding:3em 0%; border-radius:3em; overflow:auto; background:#fff}
.overlay-container.alert .overlay-box-inner > div:nth-child(1){ margin-bottom:1em}

.overlay-container.alert button{ border:4px solid #000; line-height:1; padding:.75em 2.5em; border-radius:1em}
.overlay-container.alert button.hover{ background:#f36d25; color:#fff }
/* common */
 

/*slideshow*/
.slideshow-container{   position:relative}
.slideshow-container .slideshow-ele{ position:absolute; width:100%; height:100%; transform:translateX(-100%); animation-duration:.6s; animation-delay:0s; animation-timing-function:cubic-bezier(.05,.58,.27,1);  animation-fill-mode:forwards;  animation-iteration-count:1; background-position:center; background-repeat:no-repeat; }
.slideshow-container-inner{ position:absolute; width:100%; height:100%; overflow:visible}
.slideshow-container .slideshow-ele.active{  transform:translateX(0%); opacity:1}
.slideshow-container .slideshow-ele.sw-center-to-left{  animation-name:ani-slideshow-center-to-left;  } 
.slideshow-container .slideshow-ele.sw-right-to-center{ animation-name:ani-slideshow-right-to-center;  } 
.slideshow-container .slideshow-ele.sw-center-to-right{ animation-name:ani-slideshow-center-to-right;  } 
.slideshow-container .slideshow-ele.sw-left-to-center{  animation-name:ani-slideshow-left-to-center;  } 

.slideshow-container.fixH{  width:100%; height:100%; background:white; position:absolute}
.slideshow-container.fixH .slideshow-ele{  background-size:contain; }

.overlay-container.shirt-style-male  .slideshow-ele{ background-size: auto 105%; background-position:-7% center; }
.overlay-container.shirt-style-male  .slideshow-ele:nth-child(2){  background-position:29.5% center; }
.overlay-container.shirt-style-female  .slideshow-ele:nth-child(1){ background-size: auto 105%;  background-position:68% center; }
.overlay-container.shirt-style-female  .slideshow-ele:nth-child(2){ background-size: auto 105%;   background-position:104% center; }


@keyframes ani-slideshow-center-to-left{
0%   { transform:translateX(0) }
100% { transform:translateX(-100%)  }
}
@keyframes ani-slideshow-right-to-center{
0%   { transform:translateX(100%) }
100% { transform:translateX(0%)  }
}
@keyframes ani-slideshow-center-to-right{
0%   { transform:translateX(0) }
100% { transform:translateX(100%)  }
}
@keyframes ani-slideshow-left-to-center{
0%   { transform:translateX(-100%) }
100% { transform:translateX(0%)  }
}

.slideshow-arrow, .overlay-box-close{ position:absolute; width:3em; height:3em;  top:calc(50% - 1.5em); background-image:url(../img/arrows.svg); background-size:300% auto;}
.slideshow-arrow.prev{ left:1em}
.slideshow-arrow.next{ right:1em; background-position:50% 50% }
.overlay-box-close{ right:2.5em; background-position:100% 50%; top:2.5em; width:2.5em; height:2.5em; }



.slideshow-nav{display:flex; justify-content:center; width:100%; height:6px; margin:auto; position:absolute; bottom:0em; left:50%; transform:translate(-50%, 100%)}
.slideshow-nav > button{position: relative; width:3em; height:100%; background-color:rgba(255,255,255,0.2); margin:0 0.5em}
.slideshow-nav > button.active{ opacity:0.5}
/*slideshow*/


/*
@keyframes ani-char{
	0%{   transform:translateX(0)}
	
	3%{   transform:translateX(-20%)}
	25%{   transform:translateX(-20%)}
	
	28%{   transform:translateX(-40%)}
	50%{   transform:translateX(-40%)}
	
	53%{   transform:translateX(-60%)}
	75%{   transform:translateX(-60%)}
	
	78%{   transform:translateX(-80%)}
	100%{   transform:translateX(-80%) }
}
*/

.steps-container{ width:100%; margin:2em auto}
.steps-container-inner{ display:flex; justify-content:center}
.steps-container-inner button{ padding:1em 1em; width:auto; background-color:#545454; border:2px solid #000; margin:0 1em; border-radius:100em;   }
.steps-container-inner button.active{ background-color:#f36d25;   }

.steps-container-inner button > div{ height:1.5em; width:6.75em; margin:auto; background-image:url("../img/steps.svg"); background-size:auto 500%; background-repeat:no-repeat;  }


.steps-container-inner button:nth-child(1) > div{ background-position:right 0%;   }
.steps-container-inner button:nth-child(2) > div{ background-position:right 25%;   }
.steps-container-inner button:nth-child(3) > div{ background-position:right 50%;   }
.steps-container-inner button:nth-child(4) > div{ background-position:right 75%;   }
.steps-container-inner button:nth-child(5) > div{ background-position:right 100%;   }

.steps-container-inner button.active:nth-child(1) > div{ background-position:left 0%;   }
.steps-container-inner button.active:nth-child(2) > div{ background-position:left 25%;   }
.steps-container-inner button.active:nth-child(3) > div{ background-position:left 50%;   }
.steps-container-inner button.active:nth-child(4) > div{ background-position:left 75%;   }
.steps-container-inner button.active:nth-child(5) > div{ background-position:left 100%;   }


.agreement-container{ width:100%; position:relative; padding-bottom:4em; display:none}
.agreement-container.active{ display:block}
.agreement-container > .inner-container { max-width:1000px; }
.agreement-container > .inner-container > .inner-container{ width:95%; }
.section-headline-container{ text-align:center; position:relative}
.section-headline-container  > div{ background:#fff; position:relative; display:inline-block; padding:0 1em; }
.section-headline-container:before{ content:''; position:absolute; width:100%; height:2px; left:0; top:calc(50% - 1px); background:#004d30}

.hexagon-buttons-container{ display:flex; justify-content:center  }
.hexagon-buttons-container .dynamic-hexegon-container{ margin:0 1em!important;}

.dynamic-hexegon-container.largesize  > div:nth-child(2){ filter:drop-shadow(2px 2px 0px #000); }
.dynamic-hexegon-container.largesize.button-top  > div:nth-child(2){ background-position:8% 0%;  width:12.5em;  }
.dynamic-hexegon-container.largesize.button-next  > div:nth-child(2){ background-position:17% 10%;  width:8.5em;  }
.dynamic-hexegon-container.largesize.button-back  > div:nth-child(2){ background-position:21% 20%;  width:6em;  }
.dynamic-hexegon-container.largesize.button-go  > div:nth-child(2){ background-position:21% 30%;  width:6em;  }
.dynamic-hexegon-container.largesize.button-adjust  > div:nth-child(2){ background-position:21% 40%;  width:6em;  }
.dynamic-hexegon-container.largesize.button-submit  > div:nth-child(2){ background-position:0% 50%;  width:15em;  }
.dynamic-hexegon-container.largesize.button-confirm  > div:nth-child(2){ background-position:8% 60%;  width:12.5em;  }

.apply-now-container{ display:none; }
.apply-now-container.active{ display:block}

.apply-now-container.active .district-ele{ cursor:pointer }
.apply-now-container.active .district-ele.full{ pointer-events:none }

.district-selection-container{ display:flex; }
/*
.district-selection-container > button:nth-child(1){ border:2px solid #000; width:2em; height:2em; margin-right:1em }
.district-selection-container > button.active{  background-image:url(../img/tick-b.svg); background-size:90% auto; background-position:center; background-repeat:no-repeat; }
*/
.district-ele.full .district-selection-container > button{ background:#999}
.district-ele.full:after{ content:""; background-image:url(../img/tag-full.svg);  height:50%; position:absolute; top:20%; right:10%; background-repeat:no-repeat; background-position:right center; width:40%;}


.apply-form{ display:none;}
.apply-form.active{ display:block}
.apply-form form{ margin-top:2em}
.form-field-ele{ display:flex; align-items:center; justify-content:space-between; margin:1em auto} 

.form-field-input-container{ width:calc(100% - 14em); max-width:500px; display:flex; justify-content:flex-end; position:relative; flex-shrink: 0 }
.form-field-input{ border:2px solid transparent; border-radius:5px; width:calc(90% - 0px); position:relative;  }
.form-field-input-inner{ border:2px solid #000; padding:.5em .5em; margin:2px;  line-height:1; }
.form-field-input-error{ position:absolute; font-size:0.65rem; top:calc(100% - .25em); right:4px; text-align:right;  color:red }

.form-field-input.error{  border:2px solid red; }
.form-field-input.error.radio{  border:2px solid transparent; }


.form-field-input.radio button{  border:2px solid transparent; padding:2px; }
.form-field-input.error.radio button{  border:2px solid red; padding:2px; }


.form-field-input.short{ width:4em; margin-right:.5em; }
.form-field-input.medium.dropdown{ width:7em; }
.form-field-input.long{ width:17em; }
.form-field-input.full{ width:calc(100% - 4px); }
.form-field-input.short input{ text-align:center}

.payment-form .form-field-input-container{ width:calc(100% - 5em) }
.form-field-input.whole{ width:100%}

.form-field-input.radio{ margin:.5em 0; display:flex; align-items:center; justify-content:flex-end }
.form-field-input.radio button{ margin-left:3em; display:flex; align-items:center;}
.form-field-input.radio button > div:nth-child(1){ border:2px solid #000; width:1em; height:1em; margin-right:.75em; position:relative;}
.form-field-input.radio button.active > div:nth-child(1){ background-image:url(../img/tick-b.svg); background-size:contain; background-position:center; background-repeat:no-repeat; }


.form-field-input.dropdown{ width:5em}
.form-field-input.dropdown input{ text-align:center }
.form-field-input.dropdown > button{ position:absolute; width:100%; height:100%; left:0; top:0; }
.form-field-input.dropdown > button > div{position:absolute; left:10%; height:40%; top:30%; width:.8em; background-image:url(../img/dropdown.svg);   background-repeat:no-repeat; background-position:left center; }

.dropdown-container{ position:absolute; width:calc(100% - 8px); top:calc(100% - 2px); left:2px;  background:#fff; z-index: 1; border:2px solid #000; border-top:none;  display:none; overflow:auto; max-height:12em;   }
.dropdown-container > button{ text-align:center ; width:100%; padding:.5em 0; border-bottom:2px solid #000}
.dropdown-container > button:hover{ background:#f36d25 }
.dropdown-container > button:last-child{ border-bottom:none}

.subheader-container{ margin:3em auto 0 auto;}
.size-header-container{ margin:6em auto 1em auto; width:100%; display:flex; justify-content:space-between; align-items:baseline}
.size-header-container button{ border-bottom:1px solid #000; padding-bottom:.25em; }
.size-header-container.inactive, .shirt-remarks-container.inactive{ display:none}

.shirt-sample-container.error{ border:2px solid red}
.shirt-sample-container{ border:2px solid transparent; display:none; margin:0 auto 5em auto; width:90%; max-width:480px;}
.shirt-sample-container.active{ display:flex; }
.shirt-sample-container > div{ width:50%; position:relative; padding-bottom:50%;  }
.shirt-sample-container > div > button:nth-child(1){ width:100%; height:100%; position:absolute; background-image:url("../img/shirt.jpg"); background-size:400% auto; background-repeat:no-repeat; }
.shirt-sample-container > div > button:nth-child(2){ margin:0em auto 0 auto;   border:2px solid #000; width:1.5em; height:1.5em; position:absolute; top:calc(100% + .5em); left:50%; transform:translateX(-50%)}
.shirt-sample-container > div.full{ pointer-events:none; }
.shirt-sample-container > div.full:after{ content:''; position:absolute; background-image:url("../img/out-of-stock.svg"); background-size: contain; background-position:center; width:80%; height:50%; top:25%; left:10%; background-repeat:no-repeat;}
.shirt-sample-container > div.full > button:nth-child(2){ background-color:#8e8e8e; } 
.shirt-sample-container > div > button.active:nth-child(2){ background-image:url("../img/tick-b.svg"); background-repeat:no-repeat}

.shirt-sample-container.male > div:nth-child(1) > button:nth-child(1){ background-position:0% center; }
.shirt-sample-container.male > div:nth-child(2) > button:nth-child(1){ background-position:33% center; }
.shirt-sample-container.female > div:nth-child(1) > button:nth-child(1){ background-position:66% center; }
.shirt-sample-container.female > div:nth-child(2) > button:nth-child(1){ background-position:100% center; }


.shirt-sizes-container.error{ border:2px solid red; }
.shirt-sizes-container{ border:2px solid transparent; margin:2em auto .5em auto; width:90%; max-width:480px; display:none; justify-content:center; padding:4px 0}
.shirt-sizes-container.active{ display:flex; }
.shirt-sizes-container > button{ margin:0 1.5em; text-align:center; }
.shirt-sizes-container > button > div:nth-child(2){ border:2px solid #000; width:1.25em; height:1.25em; border-radius:100px; margin:.3em auto 0 auto}
.shirt-sizes-container > button.full{ pointer-events:none; }
.shirt-sizes-container > button.full > div:nth-child(2){ background-color:#8e8e8e; } 
.shirt-sizes-container > button.active > div:nth-child(2){ background-image:url("../img/tick-b.svg"); background-position:center bottom; background-size:80% auto; background-repeat:no-repeat}


.shirt-remarks-container{ margin:0em auto 2em auto; width:90%; max-width:480px; display:block; text-align:center}



.shoes-sample-container{ display:flex; margin:0 auto; width:90%; justify-content:center; } 
.shoes-sample-container > div{ width:calc(50% - 1em);  }
.shoes-sample-container > div > div:nth-child(1){ border:2px solid #000; border-radius:2em;  width:100%; padding-bottom:70%; background-image:url("../img/shoes.jpg"); background-size:200% auto; background-repeat:no-repeat;}
.shoes-sample-container > div:nth-child(2) > div:nth-child(1){   background-position:right center;}
.shoes-sample-container > div > button{ display:flex; align-items:center}
.shoes-sample-container > div > button > div:nth-child(1){ margin:1em auto 0 1em;  border:2px solid #000; width:2em; height:2em;    }
.shoes-sample-container > div > button.active > div:nth-child(1){ background-image:url("../img/tick-b.svg"); background-repeat:no-repeat}
.shoes-sample-container > div > button > div:nth-child(2){ margin:.5em auto 0 .75em;     }

.shoes-sample-container > div > button > div:nth-child(1){ background-color:#8b8b8b}

.shoes-sample-container > div.active > button > div:nth-child(1){ background-color:transparent!important}
/*.shoes-sample-container > div.active > div:nth-child(1){ opacity:1; }*/


.shoes-sample-container > div{ width:calc(100% - 4px); max-width:480px;   }
	.shoes-sample-container > div{ display:none}
	.shoes-sample-container > div.active { display:block}


.size-header-container.shoes-size{ margin-top:3em; display:none }
.size-header-container.shoes-size.active{ display:flex;}


.shoe-chart-container{ border-left:2px solid #000; border-top:2px solid #000; display:none; margin:0 auto 2em auto; width:100%; justify-content:flex-start; flex-wrap:wrap;  }
.shoe-chart-container.active{ display:flex; }
.shoe-chart-container > button{ line-height:1; padding:.5em 0; width:calc(20% - 0px); border-right:2px solid #000; border-bottom:2px solid #000; }
.shoe-chart-container > button.full{ pointer-events:none; background:#c6c6c6; color:#939393 }
.shoe-chart-container > button.hover, .shoe-chart-container > button.active{ background:#f36d25; color:#fff}


.shoe-chart-container.error, .shoe-chart-container.error > button{ border-color:red}

.form-field-ele, .size-header-container, .subheader-container, .shoes-sample-container, .shoe-chart-container{ max-width:800px}


.confirm-form{ display:none;}
.confirm-form.active{ display:block}

.confirm-info-container{ margin:2em auto; width:90%; max-width:800px; }
.confirm-info-ele{ margin:2em auto 3em auto; width:100%; display:flex; align-items:center; justify-content:space-between }
.confirm-info-ele > div:nth-child(1){ width:60%; }
.confirm-info-ele > div:nth-child(2){ width:40%; }

.spread-ele{ display:flex; justify-content:space-between; }

.payment-step-container {margin:4em auto 6em auto; width:90%; max-width:700px }
.payment-step-container > div {margin-bottom: 2em}

.pay-step-ele{display: flex; align-items: center}
.pay-step-icon > img{ width:auto; height:7em; }
.pay-step-no > img{ width:auto; height:5em;margin: 1em 0em;}
.pay-step-cnt{text-align: left;margin: auto 1em;line-height: 1.2}


.payment-form{ display:none;}
.payment-form.active{ display:block}



.invoice-upload-container{ border:2px solid transparent; border-radius:2em; position:relative; width:100%; max-width:800px; margin:1em auto 3em auto; padding:4px}
.invoice-upload-container.error{ border:2px solid red; } 
.invoice-upload-container > div{ width:calc(100% - 4px); padding-bottom:50%; position:relative; border:2px dashed #000; border-radius:1.5em; }

.inner-container .thankyou{ text-align: center;margin:0em auto 2em auto; max-width:800px}
.inner-container .thankyou-doll > img {width:70%;}
.apply-no{margin: 1em auto}
.inner-container .thankyou-word > img {width:80%;margin-bottom: 2em}

#input-image{ width:100%; opacity:0; cursor:pointer;  height:100%; position:absolute; top:0; left:0;  }
.canvas-upload-container{ position:absolute; width:1600px; height:1600px; left:-1000vw; pointer-events:none }

@media only screen and (min-width:0px)  and (max-width:1023px) {
	.txt-giant{ font-size:3em; }
	.txt-title{ font-size:2em; }
	.txt-bigger{ font-size:1.66em; }
	.txt-big{ font-size:1.25em; }
	.txt-hl{ font-size:1.1em; }
	.txt-regular{ font-size:1em;}
	.txt-small{ font-size:1em; }
	.txt-mini{ font-size:0.9em; }
	
	.landing-container{ height:auto; min-height:0;  }
	.kv-container{ height:75vw; border-bottom-left-radius:5em; border-bottom-right-radius:5em  }
	.kv-main-container > div:nth-child(4) { width:30%; padding-bottom:21%; right:72.5%; bottom:70%;   } 
	
	
	.landing-container.subpage{ height:62vw;   }  
	.landing-container.subpage .kv-main-container > div:nth-child(3) { transform:translateY(28%)} 
	
	
	
	.notice-container{  transform:translateY(5em); margin-bottom:5.5em}
	.notice-container > .inner-container > div:nth-child(1){ width:100%;  }
	.notice-container > .inner-container ul, .notice-container > .inner-container li{ margin-left:0; padding-left:0;   }
	
	.title-container > img, .notice-container > .inner-container > div:nth-child(1) img{ height:3em; width:auto}
	
	.dynamic-hexegon-container{ margin:1em auto 0em auto;  min-width:0;  }
	
	.three-kinds-ele > div:nth-child(1){  padding-bottom:4em;  } 
}
@media only screen and (min-width:0px)  and (max-width:767px) { 
	.head-banner-container{ padding:1em 0;  }
	
	.title-container > img, .notice-container > .inner-container > div:nth-child(1) img{ height:2.5em; width:auto}
	 
	
	div.box { border-bottom-right-radius:0px;  } 	  
	.box img {display:none; }
	
	.round-angle-button img:nth-child(1){ display:none}
	.round-angle-button img:nth-child(2){ display:inline}
	.round-angle-button{ padding:1em }
	
	.intro-column-container-inner{ position:relative; }
	.side-apply-now-container{  top:auto!important; bottom:-2em!important; left:auto!important; right:-3em!important; } 
	
	.inner-container .side-apply-now-container, .inner-container .new-button-container{ display:none}
	.intro-columns-container .side-apply-now-container, .intro-columns-container .new-button-container{ display:block}
	
	
	.new-button-container{ position:absolute!important; right:0!important;  width:7em; bottom:-1em}
	
	.intro-banner-container{  padding:1.2em 0;  background-size:auto calc(100% - 2.5em);  }
	.intro-banner-container > div > img{  height:2.25em; padding:0 .5em }
	
	.intro-columns-container{ display:block;  }
	.intro-columns-container > div{ width:100%; }
	.intro-column-container:nth-child(1){  max-width:480px; margin:0 auto 2em auto}
	
	 
	

	.intro-column-container:nth-child(2){ width:calc(90% - 1em); margin:auto; border:.5em solid #fff!important; border-radius:100em; height:auto; display:flex; align-items:center}
	
	 
	.intro-column-container:nth-child(2) .intro-column-container-inner { width:calc(70% - 2em); text-align:left; margin:1.5em 2em 1em 0em;  }
	.intro-column-container:nth-child(2) .intro-column-container-inner  > div:last-child{text-align:left; transform:translateX(8em)}
	
	.intro-column-container:nth-child(2) button{ position:relative; left:auto; top:auto; transform:translateY(0%);  margin:1em auto 1em 1em; text-align:center; width:calc(30% - 1em); max-width:12em;  }
	
	.intro-column-container:nth-child(2) button img{  width:auto; height:auto; transform:scale(0.8)}
	 
	.fee-container{ position:absolute!important; top:100%; left:50%; transform:translate(-50%,-50%); padding:.5em 0em; width:80%;  }
	.fee-container > img{ margin:auto; width:100%!important; height:auto!important; display:block!important}
	
	.runner-set-detail-container > img{  height:1.5em; } 
	.intro-column-container-inner ol{ margin-top:0.3em!important }
	
	.round-angle-container-inner > div:nth-child(1){ padding-bottom:35%; width:35%;  margin:auto; }
	.round-angle-container-inner > div:nth-child(2){ width:calc(65% - 3.5em); margin-left:1.5em;  margin-right:2em;}
	
	
	.round-angle-container-inner{ padding:1em;  }
	.round-angle-container-inner > div:nth-child(1){ width:42%; padding-bottom:42%;  }
	.round-angle-container-inner > div:nth-child(2){ width:calc(58% - 1em); margin-left:1em; }
	.round-angle-container-inner > div:nth-child(2) p{ line-height:1.3; font-size:0.9em; margin:0; padding:0  } 
	.round-angle-container .txt-giant:nth-child(1) { font-size:2.5em; transform:translateX(-0.25em); display:inline-block; line-height:1;}
	.round-angle-container .txt-giant:nth-child(2) { font-size:2.5em; margin-bottom:0.4em; transform:translateX(1em);  line-height:1; }
	
	
	.section-container{  border-radius:5em; padding:2em 0 }
	
	.regions-container{ display:flex; justify-content:center; margin-top:1.5em }
	.regions-container > button:nth-child(2){ margin:0 1em}
	.regions-container > button{ width:10em; padding:.5em .5em; border-radius:100px;  }

	
	.regions-container > button > div{ height:1.7em; width:90%;  } 
	.regions-container > button:nth-child(1) > div{ width:6em; }
	.regions-container > button:nth-child(2) > div{ width:5.9em; }
	.regions-container > button:nth-child(3) > div{ width:5.9em; }
	
	.districts-container{ margin-top:1em}
	.district-ele{ width:calc(50% - 0em);  margin:2em auto 0 auto!important;  }  
	.district-ele > div:nth-child(3){  width:100%; max-width:300px; margin:0 auto; justify-content:center; align-items:center; display:flex; }
	.district-ele > div:nth-child(3) > div:nth-child(1){ width:40%; padding-bottom:40%; margin-top:1em; }  
	.district-ele > div:nth-child(3) > div:nth-child(2){ width:60%;}  
	
	.district-selection-container{ align-items:center}
	
	.three-kinds-container{ justify-content:center; flex-wrap:wrap;  margin:3em auto 0 auto; padding-bottom:2em; max-width:480px; display:block}
	
	.three-kinds-ele div{ color:#fff!important} 
	.three-kinds-ele{ width:100%; max-width:300px; margin:auto}
	.three-kinds-ele > div:nth-child(1){ width:55%; padding-bottom:3em; }
	.three-kinds-ele > div:nth-child(2){ width:45%; padding-bottom:45%  }
	.three-kinds-ele > div:nth-child(3){ top:calc(3em + 0em); left:calc(50% + .5em); width:calc(50% - .5em) }
 	.three-kinds-bottom{ display:none}
	
	.three-kinds-ele:nth-child(1){ margin-right:auto; margin-left:auto; margin-top:6em!important }
	.three-kinds-ele:nth-child(2), .three-kinds-ele:nth-child(3){ margin-top:4em}
	.three-kinds-ele:nth-child(3){ margin-bottom:4em}
	
	.section-container.footer{ margin-top:4em; border-top-left-radius:5em;  border-top-right-radius:5em; padding-bottom:5em; }
	
	.steps-container-inner button{ margin:0 .5em; }
	.steps-container-inner button > div{ height:1.1em; width:4.9em; }
	
	.overlay-container.alert .overlay-box{  padding:2em 2em; border-radius:3em;  }
	.overlay-container.alert .overlay-box-inner{   border-radius:2em; } 
	
	
	.confirm-info-ele{ align-items:flex-start;   }
	.confirm-info-ele > div:nth-child(1){ width:50%; }
	.confirm-info-ele > div:nth-child(2){ width:50%; }
	
	.district-ele-inner > div{ width:calc(50% + 1em); }
	.district-ele-inner > div:nth-child(1){ width:calc(50% - 1em); margin-right:1em  }
	
	.specia-m br{ display:none}
}

@media only screen and (min-width:0px) and (max-width:479px) {
	html,body{  font-size:13px; }
	
	.specia-m{ font-size:0.8em}
	.specia-m br{ display:none}
	ol.specia-m{ word-wrap:normal; white-space:nowrap  }
	 
	.round-angle-container-inner{ padding:.7em; display:flex; align-items: center; }
	.round-angle-container-inner > div:nth-child(1){ width:42%; padding-bottom:42%;  }
	.round-angle-container-inner > div:nth-child(2){ width:calc(58% - .75em); margin-left:.75em; }
	.round-angle-container-inner > div:nth-child(2) p{ line-height:1.1; font-size:0.8em; margin:0; padding:0  } 
	.round-angle-container .txt-giant:nth-child(1) { font-size:1.5em; transform:translateX(-0.5em); display:inline-block; line-height:1;}
	.round-angle-container .txt-giant:nth-child(2) { font-size:1.5em; margin-bottom:0.25em; transform:translateX(1em);  line-height:1; }
	/*
	.round-angle-container{  border-radius:5em;}
	.round-angle-container-inner{ padding:2em 1em; display:block; align-items: center; }
	.round-angle-container-inner > div:nth-child(1){ width:60%; padding-bottom:60%; margin:auto}
	.round-angle-container-inner > div:nth-child(2){ width:90%; margin:1em auto 1em auto; }
	.round-angle-container .txt-giant:nth-child(1) { text-align:center;}
	.round-angle-container .txt-giant:nth-child(2) { margin-bottom:.5em; text-align:center; }
	
	
	.intro-column-container:nth-child(1){ margin-bottom:1em}

	.intro-column-container:nth-child(2){ width:calc(90% - 1em); margin:auto; border:.5em solid #fff!important; border-radius:5em; height:auto; display:block}
	.intro-column-container:nth-child(2) .intro-column-container-inner { width:85%; text-align:left; margin:1.5em auto 2em auto}

	.runner-set-detail-container > img{  height:1.75em; }
	.intro-column-container:nth-child(2) ol{ margin-top:.5em; margin-left:1em} 
	.intro-column-container:nth-child(2) { text-align:center}
	.intro-column-container:nth-child(2) button{  margin:2em auto 0 auto; text-align:center; width:10em}
	.intro-column-container:nth-child(2) button > img{ width:100%; height:auto!important;}
 
	
	.intro-column-container:nth-child(2) .intro-column-container-inner  > div:last-child{text-align:right; transform:translateX(0em)}
	
	*/
	.side-apply-now-container{   bottom:-3em!important; right:-1em!important; } 
	/* 
	.intro-column-container:nth-child(2) .intro-column-container-inner  > div:last-child{text-align:right; transform:translateX(0em)}
	
	 
	.intro-column-container:nth-child(2){  border-radius:100em; height:auto; display:flex; align-items:center}
	.intro-column-container:nth-child(2) .intro-column-container-inner { width:calc(100% - 2.5em - 6.5em);  margin:1.5em 2em 1em .5em; }
  
	.intro-column-container:nth-child(2) .intro-column-container-inner  > div:last-child{text-align:left; transform:translateX(1em)}
	
	.intro-column-container:nth-child(2) button{  margin:1em auto 1em .5em;  width:6em;}
	.intro-column-container:nth-child(2) button img{  width:auto; height:auto; transform:scale(1)}
	
	.runner-set-detail-container > img{  height:1.5em; }
	.intro-column-container:nth-child(2) ol{ margin-top:.25em; margin-left:1em; margin-bottom:.5em} 
	*/
	.districts-container{ margin-top:1em}
	.district-ele{ width:calc(100% - 0em);  margin:2em auto 0 auto!important;  }  
	.district-ele > div:nth-child(3){  width:100%; max-width:300px; margin:0 auto; justify-content:center; align-items:center; display:flex; }
	.district-ele > div:nth-child(3) > div:nth-child(1){ width:40%; padding-bottom:40%; margin-top:1em; }  
	.district-ele > div:nth-child(3) > div:nth-child(2){ width:calc(60% - 1em); margin-left:1em}  
	
	.district-selection-container{ align-items:center}
	.overlay-container-inner{ height:calc(100% - 6em); min-height:140vw; padding:3em 0; width:90%; margin:auto}
	.overlay-box{ width:calc(100% - 6em);  border-radius:4em; padding:4em 3em;  }
	.overlay-box-inner{   border-radius:2em;  }
 
	.overlay-box-label-container{ width:80%!important; left:10%!important; bottom:2em;  height:1.25em}

	
	.overlay-container.alert .overlay-box{  padding:2em 2em; border-radius:3em;  }
	.overlay-container.alert .overlay-box-inner{   border-radius:2em; } 

	
	
	
	.slideshow-arrow, .overlay-box-close{  width:2em; height:2em;  top:calc(50% - 1em);  }
	.slideshow-arrow.prev{ left:.5em}
	.slideshow-arrow.next{ right:.5em; }
	.overlay-box-close{ right:2em;   top:1.5em; width:2em; height:2em; }
 
	.steps-container{  margin:1em auto} 
	.steps-container-inner button{ margin:0 .3em; padding:.5em; width:calc(20% )  }
	.steps-container-inner button > div{ height:0; padding-bottom:22.2%; width:100%; }
	
	
	.hexagon-buttons-container .dynamic-hexegon-container:nth-child(1){ margin-left:0!important;}
	.hexagon-buttons-container .dynamic-hexegon-container:nth-child(2){ margin-right:0!important;}
	.dynamic-hexegon-container.largesize { padding:1em 1.2em;  }
	.dynamic-hexegon-container.largesize  > div:nth-child(2){  height:2em;  }
	.dynamic-hexegon-container.largesize.button-top  > div:nth-child(2){   width:10em; }
	.dynamic-hexegon-container.largesize.button-next  > div:nth-child(2){  width:6.8em;  }
	.dynamic-hexegon-container.largesize.button-back  > div:nth-child(2){ background-position:19% 20%;  width:6em;  }
	.dynamic-hexegon-container.largesize.button-go  > div:nth-child(2){ background-position:19% 30%;  width:6em;  }
	.dynamic-hexegon-container.largesize.button-adjust  > div:nth-child(2){ background-position:19% 40%;  width:6em;  }
	.dynamic-hexegon-container.largesize.button-submit  > div:nth-child(2){ background-position:0% 50%;  width:12em;  }
	.dynamic-hexegon-container.largesize.button-confirm  > div:nth-child(2){ width:10em;  }
	
	.inner-container:nth-child(3) .hexagon-buttons-container{ flex-wrap:wrap  }
	.inner-container:nth-child(3) .hexagon-buttons-container > button:nth-child(3){ margin-top:1.5em!important}
	
	 
	.payment-form .form-field-ele{ display:flex;  margin:1em auto} 
	
	
	.form-field-ele{ display:block;  margin:1em auto} 
	.form-field-ele > div:nth-child(1){ margin-left:4px; }
	.form-field-input-container{ width:calc(100% - 0em); justify-content:flex-start; transform:translateX(0px)}
	.form-field-input{  width:calc(100% - 0px);  }
	
	.form-field-input.short{ width:5em; margin-right:.5em; }
	.form-field-input.medium{ width:calc(100% - 10em - 1em - 8px)!important; }
	.form-field-input.long{ width:calc(100% - 5em - .5em - 4px); }
	.form-field-input.full{ width:calc(100% - 4px); } 
	
	
	.form-field-input.radio{  justify-content:flex-start}
	.form-field-input.radio button{ margin-right:3em; margin-left:2px;} 
	
	 
	.shirt-sizes-container > button{ margin:0 1em; text-align:center; }
	
	.shoes-sample-container > div{ width:calc(100% - 2px);  }
	.shoes-sample-container > div{ display:none}
	.shoes-sample-container > div.active { display:block}
	
	.confirm-info-ele:nth-child(even) .spread-ele{ display:block;  } 
	.confirm-info-ele:nth-child(even) .spread-ele span{ display:block;   } 
	.confirm-info-ele:nth-child(even) .spread-ele span:nth-child(1){ margin-right:1em; margin-bottom:0em    } 
	
	.form-field-ele.special-field{ display:block; margin-top:2em; text-align:center}
	 .special-field br{ display:none}
	
	.pay-step-icon > img{  height:5em; }
    .pay-step-no > img{  height:3em}
    .payment-step-container{font-size:10px;  width:100%; }
	.payment-step-container .txt-bold{ font-weight:600!important}
	.pay-step-cnt br{  display:none }
	
	.invoice-upload-container .bg-child{ width:90%; left:5%}
}

@media only screen and (min-width:480px) and (max-width:767px) {
	html,body{  font-size:13px; }
	
}

@media only screen and (min-width:768px)  and (max-width:1023px) {
	html,body{  font-size:13px; }
	
	.section-container.footer{ border-top-left-radius:12em;  border-top-right-radius:12em;  }
}

@media only screen and (min-width:1024px) and (max-width:1279px) {
	html,body{  font-size:13px; }
	
	.landing-container.subpage{ height:400px;   } 
	.landing-container.subpage .kv-main-container{ max-width:600px }
	.landing-container.subpage .kv-main-container > div:nth-child(3) { transform:translateY(15%)} 
}

@media only screen and (min-width:1280px) and (max-width:1599px) {
	html,body{  font-size:15px; }
}
@media only screen and (min-width:1600px) {
	html,body{  font-size:16px; }
}


@media only screen and (min-width:700px) {
	.funny-break br{ display:none}
	.funny-break br:nth-child(2){ display:block}
}