/* ################## tnc Popup ################## */
.termconditionpopup { display: none; z-index:8; position: fixed; top: 0; left: 0; width: 100%; height: 100%;background: #00000073; background: rgba(0,0,0,0.7); }
.termconditionpopup section { display: block; z-index:9; position: fixed; left:50%; top:50%; height:auto; max-height: 96%; width:95%; max-width:560px; transform: translate(-50%, -50%); background: #fff; margin: 0; padding:0; box-sizing: border-box; border:none; border-radius:5px; overflow: hidden; }
.termconditionpopup aside { z-index: 2;  position: fixed; right:1px; top:1px; margin: 0; padding:4px 7px; line-height: 1; font-size:24px; text-align: center; background: #000; color: #fff; cursor: pointer; border-radius: 50%; }
.termconditionpopup aside:hover { color: #242424; background:#fff; }
.termconditionpopup h2 { width: 100%; float: left; border: none; padding:9px 35px 9px 9px;margin: 0; border-radius: 0; text-align:left; box-sizing: border-box; background:#f15a23 ; color: #fff; line-height: 1; font-size:18px; font-family:'DinPro-Bold'; /*text-transform: uppercase;*/  }
.termconditionpopup p { width: 100%; float: left; margin:0; padding: 1rem; box-sizing: border-box; text-align: left;color: #616161;line-height: 1.2;font-size: 16px;font-family: 'DINPro-Regular';text-transform: none; }



/* ################## thanks Popup ################## */
.thankspopupbg { display: none; z-index:8; position: fixed; top: 0; left: 0; width: 100%; height: 100%;background: #00000073; background: rgba(0,0,0,0.7); }
.thankspopupbg section { display: block; z-index:9; position: fixed; left:50%; top:50%; height:auto; max-height: 95%; width:95%; max-width: 450px; transform: translate(-50%, -50%); background: #fff; margin: 0; padding:2rem; box-sizing: border-box; border:none; border-radius:5px; overflow: hidden; }
.thankyoucontainer { display: none;  width: 100%; float: left; padding:0;margin: 0;  }
.thankyoucontainer p { width: 100%; float: left; border: none; padding:0;margin:0.5rem 0 0 0;  text-align:center; box-sizing: border-box; color: #242424; line-height:1.2; font-size:16px; font-family:'DINPro-Regular'; text-transform: none;  }
.thankyoucontainer aside { width: 100%; float: left; margin:1rem 0 0 0; padding:0; text-align:center;  }
.thankyoucontainer aside .thankBtn { display:inline-block; background: #fc4d0c; margin:0; padding: 8px 25px; text-align:center; font-family: DINPro-Medium; line-height:1.2; font-size: 16px; color: #fff; cursor: pointer; border:none; border-radius: 25px; text-transform: uppercase;}
.thankyoucontainer aside .thankBtn:hover { background: #242424; color: #fff; }
 


/* ################### banner ################### */
.mainbanner {position:relative;width:100%;float:left;padding:0;margin:0; border-bottom:solid 9px #000;}
.banner_web{ display:block; width:100%;float:left;padding:0;margin:0;border: 0;}
.banner_ipad{ display:none; width:100%;float:left;padding:0;margin:0;border: 0;}
.banner_mob{ display:none; width:100%;float:left;padding:0;margin:0;border: 0;}
.bannercontainer{z-index:2;position: absolute;top:50%; left:50%; transform: translate(-50%,-50%); margin: 0 auto; width:95%; max-width:1000px; display:flex; justify-content:space-between; align-items:center; }
.banner_text { width:46%; padding:0; margin:0;  display:flex; justify-content:center; align-items:center; }
.banner_text .banner_text_web { display:block; width:100%; max-width: 100%; padding:0;margin:0;border: 0;}
.banner_text .banner_text_mob { display:none; width:100%; max-width: 100%; padding:0;margin:0;border: 0;}
.banner_img { width:54%;padding:0;margin:0; display:flex; justify-content:center; align-items:center; }
.banner_img img { display:inline-block; width:100%; max-width: 100%; padding:0;margin:0 auto;border: 0;}





 /* ################### maincontainer ################### */
.maincontainer { background: #fff; float: left;width: 100%; padding:0; margin:3rem 0 3rem 0; text-align:center; }
.containerwarp { display: flow-root;  float: none; width: 95%; max-width:1170px; margin: 0 auto; padding:0; box-sizing: border-box; }
.containerwarp h2 {width: 100%;float: left;margin:0; text-align: center; color: #000; line-height:1.2; font-size:36px; font-weight: 700; font-family: DinPro-Bold; text-transform: uppercase; }
.containerwarp p {width: 100%;float: left;margin:1rem 0 0 0; text-align: center; color: #000; line-height:1.2; font-size: 20px; font-weight: 500; font-family: DINPro-Regular; }
.containerwarp ul {width: 100%;float: left; margin:0.5rem 0; display: flex; justify-content:center; flex-wrap: wrap; align-items: center;  }
.containerwarp ul li { list-style: none; margin:1rem;   }
.containerwarp ul li aside { position:relative; padding:1rem; text-align: center; color:#000;  border:solid 1px #e0e0e0; border-radius:10px; box-sizing: border-box; }
.containerwarp ul li aside img {  display:inline-block; width:100%; max-width:160px; padding:0;margin:0 auto;border: 0; }
.containerwarp h6 {width: 100%;float: left; padding:0 2rem 2rem 0; box-sizing: border-box; text-align: right; font-family:'DINPro-Regular'; line-height:1; font-size: 14px; color: #000; font-weight: normal; font-style: italic;  }
.containerwarp h3 {width: 100%;float: left;margin:0; text-align: center;   }
.containerwarp h3 .SubscribeButton {  display:inline-block; background: #fc4d0c; margin:0; padding:12px 25px; text-align:center; font-family:'DINPro-Regular'; line-height:1; font-size: 20px; color: #fff; font-weight: normal; cursor: pointer; border:none; border-radius: 25px; text-transform: uppercase; transition: all 0.5s ease-out;  }
.containerwarp h3 .SubscribeButton:hover { background: #242424; color: #fff; transition: all 0.5s ease-in;  }
.containerwarp h4 {width: 100%;float: left;margin:0.7rem 0 1.5rem 0; text-align: center;   }
.containerwarp h4 .subscribeLaterBtn { display: inline-block; font-family:'DINPro-Regular'; line-height:1; font-size: 20px; color: #0d58ac; font-weight: normal; cursor: pointer;   text-transform: none; transition: all 0.5s ease-out;  }
.containerwarp h4 .subscribeLaterBtn:hover {  color: #242424; text-decoration: underline; transition: all 0.5s ease-in;  }
.containerwarp h5 {width: 100%;float: left;margin:0; text-align: center;   }
.containerwarp h5 input[type="checkbox"] { display: none; }
.containerwarp h5 label { position: relative; cursor: pointer; padding:0 2px 0 25px; box-sizing: border-box; color: #303030;font-weight: normal; line-height: 1;font-size: 20px;font-family: 'DINPro-Regular'; }
.containerwarp h5 b { display: inline-block; text-align: left;color: #fc4d0c;font-weight: normal; line-height: 1;font-size: 20px; text-transform: none; font-family: 'DINPro-Regular'; cursor: pointer; text-decoration: none; transition: all 0.5s ease-out;  }
.containerwarp h5 b:hover { color: #303030; transition: all 0.5s ease-in; }
.containerwarp h5 label:before, 
.containerwarp h5 input[type="checkbox"]:checked + label:before{ content: "";z-index:1;position: absolute;top:5px;left: 0; height: 16px; width: 16px; padding: 0; margin: 0;  background: #fff; border-radius: 3px;  border:1px solid #000; box-shadow: 0 0 0 2px #fff inset; }
.containerwarp h5 label:after{ opacity:0; }
.containerwarp h5 input[type="checkbox"]:checked + label:after{ opacity:1; content: ""; z-index:2; position: absolute; top:4px; left:2px; height:7px; width: 16px; border-left: solid 3px #00a651; border-bottom: solid 3px #00a651; transform: rotate(-45deg); background:none !important; }
.containerwarp h5 .tncErrMsg { display: none; width: 100%;float: left;margin:0.5rem 0 0 0; text-align: center;  font-size: 12px; text-transform: none; font-family: 'DINPro-Regular'; cursor: pointer; color: #f30; }


 

 


@media only screen and (max-width:1300px)
{
/* ################### banner ################### */
.mainbanner { border-bottom-width:7px;}
.banner_text .banner_text_web { max-width:80%; }
.banner_img img { max-width: 80%; }

}

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

/* ################### banner ################### */
.banner_text .banner_text_web { max-width:70%; }
.banner_img img { max-width: 70%; }


 /* ################### maincontainer ################### */
.containerwarp h2 { font-size:30px; }

}

@media only screen and (max-width:1023px)
{
/* ################### banner ################### */
.mainbanner { border-bottom-width: 6px;}
.banner_web{ display:none; }
.banner_ipad{ display:block;  }
.banner_mob{ display:none; }
.banner_text .banner_text_web { max-width:90%; }
.banner_img img { max-width: 90%;}



}

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

}


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

}


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

/* ################### banner ################### */
.mainbanner { border-bottom-width: 5px;}
.banner_web{ display:none; }
.banner_ipad{ display:none;  }
.banner_mob{ display:block; }
.bannercontainer{ justify-content:center; flex-wrap: wrap; }
.banner_text { width:100%;   }
.banner_text .banner_text_web { display:none; }
.banner_text .banner_text_mob { display:block; max-width: 240px; }
.banner_img { width:100%; margin:1.5rem 0 0 0; }
.banner_img img { max-width: 320px; }



 /* ################### maincontainer ################### */
.containerwarp {  width: 92%;  }
.containerwarp h2 { font-size:24px; }
.containerwarp p { font-size: 18px;  }
.containerwarp ul li { margin:0.5rem;   }
.containerwarp ul li aside { padding:0.5rem;  }
.containerwarp ul li aside img { max-width:130px;  }
.containerwarp h6 { padding:0 0 2rem 0; text-align: center;  }
.containerwarp h3 span {  padding:10px 25px;  font-size: 18px;   }
.containerwarp h4 span { font-size: 18px;  }
.containerwarp h5 label { font-size: 18px; }
.containerwarp h5 b { font-size: 18px; }





}


@media only screen and (max-width:359px)
{
/* ################### banner ################### */
.mainbanner { border-bottom-width: 3px;}
.banner_text .banner_text_mob { display:block; max-width: 200px; }
.banner_img img { max-width: 280px; }



 /* ################### maincontainer ################### */
.containerwarp ul li aside img { max-width:110px;  }


}



@media only screen and (min-width:481px) and (max-width:980px) and (orientation : landscape) 
{
/* ################## tnc Popup ################## */
.termconditionpopup p { font-size: 14px;  }

}