@charset "utf-8";

.clockWrap {width: 100%; font-family: "samsungSSBd"; background: url(../images/gb_gra-c1e1b31f6387acf47718f9e2b7c34eb3.png) center no-repeat; background-size: cover;}
.clockInner {width: 100%; margin: 0 auto; text-align: center; position: relative; padding:5% 0;}
.clockInner h1 {font: normal 32px "samsungSSBd"; color:#fff; margin:0 auto 10px ;}
.clockInner .clockLabel {width: 780px; margin: 10px auto; position: relative; overflow:hidden;}
.clockInner .clockLabel span {font-size: 16px; color:#fff; text-align:center; float:left; margin-left:20px; position:static;}
.clockInner .clockLabel span:first-child {margin-left:0;}
.clockBox {height:180px; position:relative;}
.clockLabel .day {width:180px;}
.clockLabel .hour {width:180px;}
.clockLabel .min {width:180px;}
.clockLabel .sec {width: 180px;}
.clockTxt {margin: 20px auto; color:#fff; line-height:1.8em; padding-bottom:0;}
.clockTxt span { width: 40px; height: 1px; display: block; background: #fff; margin: 15px auto;}
.clockTxt .openDate {font-size:24px; font-family: "samsungSSBd";}
.clockTxt .clockSumm {font-size:16px; line-height: 1.2em; font-family: "samsungSSBd";}
.flip-clock-wrapper ul {height:120px;}
.flip-clock-wrapper ul li {line-height: 120px;}
.flip-clock-dot {width: 8px;height: 8px; background: #fff;}
.flip-clock-dot.top {left:50%; top:50%; margin-top: 10px; margin-left: -4px;}
.flip-clock-dot.bottom {left:50%;  top:50%; margin-top: -10px; margin-left: -4px;}
.btnPopupClose {color: #fff;border: 1px solid #fff;width: 340px;margin: 0 auto;display: block;line-height: 48px;font-family: "samsungSSBd";text-align: center;border-radius: 40px; text-decoration: none;}
.btnPopupClose:hover {color: #333;border: 1px solid #fff; background: #fff;width: 340px;margin: 0 auto;display: block;line-height: 48px;font-family: "samsungSSBd";text-align: center;border-radius: 40px; text-decoration: none;}

@media screen and (max-width: 1340px) {
    .clockInner {width:100%; margin: 0 auto; text-align: center;}
    .clockInner h1 {font: normal 30px "samsungSSBd"; color:#00; margin:0 auto 10px ;}
    .flip-clock-wrapper ul {  width: 80px; height: 120px; font-size: 90px;  line-height:140px; margin: 2px;}
    .flip-clock-wrapper ul li  {line-height:120px;}
    .flip-clock-wrapper ul li a div {font-size: 90px;}
    .flip-clock-wrapper ul li a div div.inn {font-size: 90px;}
    .flip-clock-divider {height: 120px;}
    .clockInner .clockLabel {width: 732px; margin: 10px auto; position: relative;}
    .clockInner .clockLabel span {font-size: 16px; color:#fff; text-align:center; float:left; margin-left:20px; }
    .clockInner .clockLabel span:first-child {margin-left:0;}
    .clockBox {height:180px; }
    .clockLabel .day {width:168px;}
    .clockLabel .hour {width:168px;}
    .clockLabel .min {width:168px;}
    .clockLabel .sec {width: 168px;}
    .clockTxt {margin: 10px auto; color:#fff; line-height:1.2em;}
    .clockTxt span { width: 40px; height: 1px; display: block; background: #fff; margin: 10px auto;}
    .clockTxt .openDate {font-size:20px ;}
    .clockTxt .clockSumm {font-size:14px;}
}

@media screen and (max-width: 1200px) {
    .clockInner {width:100%; margin: 0 auto; text-align: center;}
    .clockInner h1 {font: normal 30px "samsungSSBd"; color:#00; margin:0 auto 10px ;}
    .flip-clock-wrapper ul {  width: 60px; height: 100px; font-size: 70px;  line-height:100px; margin: 2px;}
    .flip-clock-wrapper ul li  {line-height:100px;}
    .flip-clock-wrapper ul li a div {font-size: 70px;}
    .flip-clock-wrapper ul li a div div.inn {font-size: 70px;}
    .flip-clock-divider {height: 100px;}
    .clockInner .clockLabel {width: 572px; margin: 10px auto; position: relative;}
    .clockInner .clockLabel span {font-size: 16px; color:#fff; text-align:center; float:left; margin-left:20px; }
    .clockInner .clockLabel span:first-child {margin-left:0;}
    .clockBox {height:160px; }
    .clockLabel .day {width:128px;}
    .clockLabel .hour {width:128px;}
    .clockLabel .min {width:128px;}
    .clockLabel .sec {width: 128px;}
    .clockTxt {margin: 10px auto; color:#fff; line-height:1.2em;}
    .clockTxt span { width: 40px; height: 1px; display: block; background: #fff; margin: 10px auto;}
    .clockTxt .openDate {font-size:20px ;}
    .clockTxt .clockSumm {font-size:14px;}
}

@media screen and (max-width: 1064px) {
    .clockInner {width:100%; margin: 0 auto; text-align: center;}
    .clockInner h1 {font: normal 24px "samsungSSBd"; color:#00; margin:0 auto 10px ;}
    .flip-clock-wrapper ul {  width: 50px; height: 80px; font-size: 60px;  line-height:80px; margin: 2px;}
    .flip-clock-wrapper ul li  {line-height:80px;}
    .flip-clock-wrapper ul li a div {font-size: 60px;}
    .flip-clock-wrapper ul li a div div.inn {font-size: 60px;}
    .flip-clock-divider {height: 80px;}
    .clockInner .clockLabel {width: 468px; margin: 0px auto; position: relative;}
    .clockInner .clockLabel span {font-size: 14px; color:#fff; text-align:center; float:left; margin-left:12px; }
    .clockInner .clockLabel span:first-child {margin-left:0;}
    .clockBox {height:120px; }
    .clockLabel .day {width:108px;}
    .clockLabel .hour {width:108px;}
    .clockLabel .min {width:108px;}
    .clockLabel .sec {width: 108px;}
    .clockTxt {margin: 10px auto; color:#fff; line-height:1.2em;}
    .clockTxt span { width: 40px; height: 1px; display: block; background: #fff; margin: 5px auto;}
    .clockTxt .openDate {font-size:18px ;}
    .clockTxt .clockSumm {font-size:12px;}
}

@media screen and (max-width: 768px) {
    .clockInner h1 {font: normal 34px "samsungSSBd"; color:#fff;  margin:0 auto 20px; line-height:1.2em;}
    .clockInner {width:356px; margin: 0 auto; text-align: center;}
    .flip-clock-wrapper ul {  width: 80px; height: 120px; font-size: 90px;  line-height:140px; margin: 2px; margin-bottom:60px;}
    .flip-clock-wrapper ul li  {line-height:120px;}
    .flip-clock-wrapper ul li a div {font-size: 90px;}
    .flip-clock-wrapper ul li a div div.inn {font-size: 90px;}
    .flip-clock-divider {height: 140px;}
    .flip-clock-divider.minutes {display: none;}
    .clockInner .clockLabel {width: 356px; height:400px; margin: 0 auto; position: absolute; top:0;}
    .clockInner .clockLabel span {font-size: 16px; color:#fff; text-align:center; float:left; margin-left:0; position: absolute;}
    .clockInner .clockLabel span:first-child {margin-left:0;}
    .clockBox {height:320px; }
    .clockLabel .day {width:168px; top:130px; left:0;}
    .clockLabel .hour {width:168px; top:130px; right:0; left:auto}
    .clockLabel .min {width:168px;  top:300px; left:0;}
    .clockLabel .sec {width: 168px; top:300px; right:0;}
    .clockTxt {margin: 20px auto 0; color:#fff; line-height:1.8em;}
    .clockTxt span { width: 40px; height: 1px; display: block; background: #fff; margin: 10px auto;}
    .clockTxt .openDate {font-size:24px ;}
    .clockTxt .clockSumm {font-size:18px; width: 280px;display: inline-block;}
}

@media screen and (max-width: 400px) {
    .clockInner {width: 225px;padding-top: 10px;}
    .clockInner h1 {font: normal 24px "samsungSSBd"; margin:30px auto 30px;  line-height:1.2em;}
    .flip-clock-wrapper{width: 208px;}
    .flip-clock-wrapper ul {width: 45px; height: 80px; font-size:60px; line-height: 80px; margin-bottom:0;}
    .flip-clock-wrapper ul li {line-height: 80px;}
    .flip-clock-wrapper ul li a div div.inn {font-size:60px;}
    .flip-clock-divider {width: 12px;height: 80px; }
    .clockBox {height:240px; }
    .clockInner .clockLabel {width: 208px; height:284px; margin: 0 auto;  position: absolute; top:0; left:8px;}
    .clockInner .clockLabel span {font-size: 14px; color:#fff; text-align:center; float:left; margin-left:0; position: absolute;}
    .clockInner .clockLabel span:first-child {margin-left:0;}
    .clockLabel .day {width:98px; top:85px; left:0;}
    .clockLabel .hour {width:98px; top:85px; right:0;}
    .clockLabel .min {width:98px;  top:192px; left:0;}
    .clockLabel .sec {width: 98px; top:192px; right:0;}
    .clockTxt {width: 232px; margin: 0 auto 40px; color:#fff; line-height:1.2em;}
    .clockTxt .openDate {font-size:16px;}
    .clockTxt .clockSumm {font-size:11px;width: 225px;}
    .flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {display: none;}
    .flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {display: none;}
    .flip-clock-wrapper ul.play li.flip-clock-before .down .shadow  {display: none;}
    .btnPopupClose {color: #fff;border: 1px solid #fff;width: 240px;margin: 0 auto;display: block;line-height: 32px;font-family: "samsungSSBd";text-align: center;border-radius: 40px; text-decoration: none; font-size:12px;}
    .btnPopupClose:hover {color: #333;border: 1px solid #fff; background: #fff;width: 240px;margin: 0 auto;display: block;line-height: 32px;font-family: "samsungSSBd";text-align: center;border-radius: 40px; text-decoration: none;}
}