*, body {font-family: 'Arial','Roboto',sans-serif; color:#363636; font-size: 14px;}
.wrap {max-width: 1400px; margin:0 auto; padding:0 25px;}
.mobile {display: none;}

h1 {font-size: 3em;}
h2 {font-size: 2.5em; font-weight: bold;}
h3 {font-size: 1.5em;}
p {font-size: 1.2em; color: #828282; line-height: 1.5em; letter-spacing: 0.2px;}

.btn {padding:15px 40px; background: #3EB284; color: #fff; border-radius: 5px; font-size: 1.2em; letter-spacing: 1px; display: inline-block; cursor: pointer;}
.btn:hover {background: #339a71; transition: all .5s;}

label {color: #fff; margin-left: 10px;}
input {width: 300px; height: 45px; border-radius: 5px; border: 0px; margin-top: 2px; text-indent: 10px;}
input[type="submit"] {background: #288460; cursor: pointer; color: #fff; font-size: 1.2em;}
input[type="submit"]:hover {background: #24694e; transition: all .5s;}
select {width: 302px; height: 48px; margin-top: 3px; background: #fff; border: 1px solid #d9d9d9;}
textarea {border: 1px solid #d9d9d9; margin-top: 3px; width: 300px; height: 316px; border-radius: 5px; text-indent: 2px;}

/*********************** HEADER / FOOTER ***********************/
header {width: 100%; height: 70px; line-height: 90px; background: rgba(255, 255, 255, 0); border-bottom: 1px solid #DBDBDB; z-index: 99999;}
header .wrap {vertical-align: middle;}
.logo img {width: 126px;}
.gnb {float: right;}
.gnb::after {clear: both;}
.gnb a {display: inline-block; font-size: 16px; margin: 0 20px; height: 24px; overflow: hidden;}
.gnb a:last-child {margin-right: 0px;}
.gnb a.active {position: relative;}
.gnb a.active::before {content: 'dd'; width: 100%; height: 3px; background: #36A076; position: absolute; top: 22px;}
.gnb a span {display: inline-block; position:relative; transition: transform 500ms; -webkit-transition: -webkit-transform 500ms; -moz-transition: transform 500ms; color: #36A076;}
.gnb a span:after {content: attr(data-hover); position: absolute; top: -30px; left: 0; transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);}
.gnb a:hover span, .gnb a:focus span {transform: translateY(-30px); -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px);}
.gnb .login {margin-right: 0px; border-radius: 50px; border: 2px solid #44af5c; background: rgba(255, 255, 255, 0.5); padding: 8px 25px; color: #44af5c; display: inline;}

footer {height: 180px; background: #F7F7F7;}
footer .wrap {height: 90px; border-top: 1px solid #e1e1e1; line-height: 90px;}
footer .wrap a {color: #8B8B8B;}
footer .wrap:first-child {border-top: none;}
footer .wrap span, footer .wrap a {color: #8B8B8B;}
footer .wrap span .line {width: 1.2px; height: 13px; background: #cdcdcd; margin: 0 5px; display: inline-block;}
footer .wrap:last-child {display: flex; justify-content: space-between;}
footer .wrap:last-child div a {text-decoration: underline;}
footer .wrap:last-child div a:first-child {margin-right: 86px;}

/*********************** INDEX ***********************/
.index_1 {height: 800px; background: linear-gradient(#ffffff,#fafafa);}
.index_1 .bg {background-image: url(/images/earlysms/main_bg.png), url(/images/earlysms/line.png); background-position:right top, right top; background-repeat: no-repeat; height: 100%; width: 100%;}
.index_1 h1 {padding-top: 100px; max-width: 560px; line-height: 1.5em; font-weight: bold; position: relative;}
.index_1 h1::after {content: ''; background: url(/images/earlysms/double_dot.png) no-repeat center center; background-size: 50px; width: 100%; height: 100px; position: absolute; top:50px; left: 320px;}
.index_1 .btn {margin-top: 50px}

.index_2 {height: 700px; margin: 80px 0;}
.index_2 .bg {background-image: url(/images/earlysms/ring_l.png),url(/images/earlysms/ring_r.png),url(/images/earlysms/line_dot.png); background-repeat: no-repeat; background-position:left top, right bottom, center center; background-size: 80px, 60px, 80%; height: 100%;}
.index_2 .box_1 {margin-left: 80px;}
.index_2 .box_1 h2 {padding: 25px 0;}
.index_2 .box_1 p {max-width: 560px;}
.index_2 .box_2 {float: right; padding-right: 80px}  
.index_2 .box_2::after {clear: both;}
.index_2 .box_2 span {margin-top: 200px; width: 286px; display: inline-block; text-align: center;}    
.index_2 .box_2 span img {width: 56px;}
.index_2 .box_2 span h3 {padding: 20px 0 10px 0px;}    
.index_2 .box_2 .line {width: 2px; height: 180px; background: #F5F5F5; margin:0px 20px;}
    
.index_3 {height: 700px; background: linear-gradient(to left,#4CAA73,#51D9A3);}   
.index_3 .bg {background: url(/images/earlysms/line_w.png) no-repeat right; height: 100%;}
.index_3 h2 {text-align: center; color: #fff; padding-top: 60px; font-weight: lighter;} 
.index_3 .wrap {display: flex; justify-content: center;}
.card {background: rgb(197, 237, 185); width: 310px; height: 450px; border-radius: 5px; box-shadow: 0px 15px 50px rgba(51, 154, 113, 0.8); position: relative; top: 60px; margin-right: 5%;}
.card:last-of-type {margin-right: 0px;}
.card h3 {margin: 15px 0; text-align: center; font-weight: bold; margin-top: 126px;}
.card p {text-align: center; font-size: 16px; line-height: 22px;}
.card_inner {width: 100%; height: 450px; background: #fff; border-radius: 5px; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 0 15px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);}
.card .card_small {width: 100px; border-radius: 5px; background: linear-gradient(45deg,#74E085,#50C999); text-align: center; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.15); position: absolute; top: 16px; left: -10px; height: 90px; line-height: 126px;}
.card .card_small img {display: inline-block;}

.index_4 {height: 200px;}
.index_4 .wrap {text-align: center;}
.index_4 .wrap h3 {padding:50px 0 30px 0;}

/*********************** FEATURE ***********************/
.feature_1 {padding-top: 80px;}
.feature_1 .wrap {display: flex; justify-content: space-between;}
.feature_1 .txt_box {width: 560px; margin-right: 50px; padding-top: 56px;}
.feature_1 .txt_box h2 {margin-bottom: 25px;}
.feature_1 .txt_box h3 {line-height: 1.8em; color: #6a6a6a;}
.feature_1 .img_box {text-align: center;}
.feature_1 .img_box img:first-of-type {display: block; width: 400px; margin-bottom: 20px;}
.feature_1 .img_box a {font-size: 1.5em; color: #358C6A; display: inline-block; position: relative; margin-left: -25px;}
.feature_1 .img_box a::after {content: ''; background: url(/images/earlysms/goto.png) no-repeat center center; width: 22px; height: 22px; background-size: contain; position: absolute; left: 180px }

.feature_2 .title_box {display: flex; align-items: center; margin-top: 120px;}
.feature_2 .title_box img {display: block; width: 46px; height: 46px; margin-right: 20px}
.feature_2 .icon_wrap {display: flex; margin-top: 56px;}
.feature_2 .icon_box {text-align: center; border-right: 1px solid #eaeaea; padding: 25px; width: 33.33%!important;}
.feature_2 .icon_box:last-of-type {border-right: none;}
.feature_2 .icon_box img {display: inline-block; width: 70px;}
.feature_2 .icon_box h3 {margin: 16px 0;}
.feature_2 .icon_wrap:last-of-type {margin-bottom: 80px;}

.feature_3 .bg {background: linear-gradient(to left,#4CAA73,#51D9A3); height: 100%;}
.feature_3  h3 {color: #fff;}
.feature_3 .btn {background: #24694e;}
.feature_3 .btn:hover {background: #186245;}

/*********************** PRICING ***********************/
.pricing_1 {height: 100%; background: linear-gradient(to left,#fff,#51D9A3);}
.pricing_1 .bg {background-image: url(/images/earlysms/ring_l_2.png), url(/images/earlysms/ring_r_2.png); background-position: left 400px, right top; background-repeat: no-repeat; background-size: 100px, 80px; width: 100%; height: 100%;}
.pricing_1 h3 {color: #fff; text-align: center; display: inline-block; width: 100%; margin: 0 auto; margin-top: 90px; font-size: 2em;}
.pricing_1 p {font-size: 1.2em;}
.pricing_1 a {color: #fff; text-align: center; display: inline-block; color: #fff;}
.pricing_1 .card_wrap {display: flex; justify-content: center; margin-top: 30px;margin-bottom: 100px;}
.pricing_1 .card {width: 220px; height: 320px;}
.pricing_1 .card_inner {height: 320px;}
.pricing_1 .card_inner .plan {position: absolute; z-index: 99; top: 26px; right: 20px; font-size: 1.5em;}
.pricing_1 .card_inner h1 {color: #308966; text-align: center;}
.pricing_1 .card .card_small {width: 136px; height: 110px;}
.pricing_1 .card .card_small p {position: absolute; top: 10px; z-index: 99; color: #fff; width: 100px; left: 50%; transform: translate(-50%);}
.pricing_1 .card .card_small p:last-of-type {top: 72px; font-size:2em;  width: 100%}
.pricing_1 .card h1 {margin-top: 150px; font-weight: bold; font-size: 4.2em!important; margin: 150px 0 10px 0;}
.pricing_1 .card .btn {display: block; margin-top: 15px;}

.pricing_1 .graph_box .btn {background: #288460; display: block; margin: 0 auto; width: 160px; margin-top: 25px;}
.pricing_1 .graph_box .btn:hover {background: #24694e;}


.graph_box {margin-top: 150px; border-top: 1px solid rgba(255, 255, 255, 0.5); padding-bottom: 50px;}
.graph_box h3 {color: #fff; text-align: center; display: block;}
.graph_box .toggle_box {text-align: center; margin-top: 30px;}
.toggle-button-wrapper * {display: inline-block; vertical-align: middle; color:#fff; font-size: 1.3em;}
[role="switch"] {color: #fff; cursor: pointer; display: inline-block; height: 26px; margin: 0 5px; overflow: visible; padding: 5px; position: relative; width: 70px; background: #fff; border-radius: 50px;}
.toggle-button-switch {background: #33916c; border-radius: 50%; display: inline-block; height: 25px; right: 5px; line-height: 25px; position: absolute; top: 5px; width: 25px; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);}
[role="switch"][aria-checked="true"] .toggle-button-switch {left: 5px;}

.range-holder{margin: 0 auto; padding-top: 30px; width: 600px; margin: 0px auto 100px auto;}
.dragdealer {position: relative; height: 15px; border-radius: 10px; background:#2f8d67;}
.dragdealer .handle {position: absolute; top: 0; left: 0;}
.stripe{height: 15px; border-radius: 10px; background: #71eda0;}
.square{position: absolute; top: 0; left: 0; margin-top: -13px; margin-left: -10px; cursor: pointer; width: 35px; height: 35px; background: #33916c; border-radius: 50%; color: #FFF; box-shadow: 0px 10px 10px rgba(4, 29, 64, 0.3);}
.menu-line{width: 15px; height:15px; border-radius: 50%; margin: 10px auto; background: #FFF; display: block;}
#plan-holder{font-weight: bold;}	
.innerbox{height:10px; border-radius: 0; position: absolute; left:50%; transform: translateX(-50%); cursor: pointer; top: 36px;}
.info-price{color: #fff; font-size: 3em; letter-spacing: -1px; line-height: 10px; text-align: center; display: block; width:100%; height:100%; margin-top: 15px; margin-left: 5px;}
.innerbox p {font-size: 1em; color: #fff; text-align: center; margin-top: 16px; margin-left: 5px;}

.result { text-align: center; font-size: 5em; font-weight: bold; letter-spacing: 0.5px; color: #fff; padding-top: 26px;}
.button_box button {width:360px;}

/*********************** TRIAL ***********************/
.trial_1 {height: 600px;}
.input_box {margin-top: 26px;}
input[type="submit"] {margin-top: 68px;}

/*********************** CONTACT ***********************/
.contact_1 {height: 620px;}
.contact_1 .bg {display: flex; height: 100%;}
.contact_1 .contact_wrap:first-child {width: 30%; background: linear-gradient(45deg,#51D9A3,#4CAA73); min-width: 200px; max-width: 300px;}
.contact_1 .contact_wrap h2 {color: #fff; font-weight: lighter; padding: 50px 25px 0 0; text-align: right;}
.contact_1 .contact_wrap img {display: block; width: 120px; margin-top: 250px;}
.contact_1 .contact_wrap:last-child {width: 70%; margin-top: 50px; position: relative;}
.contact_1 form {margin-top: 0px; padding-left: 25px;}
.contact_1 .form_box {display: flex;}
.contact_1 label {color: #363636;}
.contact_1 input {border: 1px solid #d9d9d9; margin-right: 50px;}
.contact_1 input[type="submit"] {margin-left: 180px; background: #3EB284;}
.contact_1 input[type="submit"]:hover {background: #339a71!important;}

/*********************** TEMRS ***********************/
.terms_1 {height: 100%;}
.terms_1 .terms_wrap div {min-width: 580px; padding-bottom: 80px;}
.terms_1 .terms_wrap p {display: block; padding-left: 50px;}

/*********************** POPUP ***********************/
.popup_wrap {width: 100%; height: 100%; background:rgba(0, 0, 0, 0.6); position: fixed; z-index: 99999; display: none;}
.popup {width: 350px; height: 200px; background: #fff; border-radius: 5px; position: absolute; top:50%; left: 50%; transform: translateX(-50%); text-align: center; padding: 30px;}
.popup img {display: inline-block; width: 75px; text-align: center;}
.popup h3 {vertical-align: middle; margin-top: 26px;}
.popup .btn {margin-top: 25px; background: #707070;}
.popup .btn:hover {background: #585858;}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 768px) {
body {overflow-x: hidden;}    
.mobile {display: block;}    
.wrap {max-width: 100%; width: 100%; padding: 0px;}   
h1 {font-size: 2.3em;}
h2 {font-size: 1.8em;}
h3 {font-size: 1.5em;}
p {font-size: 1.2em;}    
    
header {width: 100%; height: 70px; line-height: 90px; border-bottom: 0px;}
header .wrap {vertical-align: middle;}
.logo img {width: 126px; padding-left: 10px;}
    .gnb {display: none;}
    .gnb_m_btn {width: 30px; height: 30px; background: transparent; position: relative; top: 30px; right: 10px; float: right; cursor: pointer;}
    .gnb_m_btn span {width: 30px; height: 2px; background: #36A076; position: absolute;}
    .gnb_m_btn::after, .gnb_m_btn::before {content: ''; width: 30px; height: 2px; background: #36A076; position: absolute;}
    .gnb_m_btn::after {top: 10px;}
    .gnb_m_btn::before {top: 20px;}
    .gnb_m_inner {position: absolute; width: 98%; background: #909090; display: block; z-index: 9999; left: 50%; transform: translateX(-50%); display: none;}
    .gnb_m_inner a {display: block; height: 46px; line-height: 46px; text-indent: 10px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.2); letter-spacing: .2px;}
    .gnb_m_inner a:last-child {border-bottom: 0px;}
    .gnb_m_inner a:hover {background: #7e7d7d; transition: all 0.3s;}
    .gnb_m_inner a:active {font-weight: bold;}
    
.gnb {float: right;}
.gnb::after {clear: both;}
.gnb a {display: inline-block; font-size: 16px; margin: 0 20px; height: 24px; overflow: hidden;}
.gnb a:last-child {margin-right: 0px;}
.gnb a.active {position: relative;}
.gnb a.active::before {content: 'dd'; width: 100%; height: 3px; background: #36A076; position: absolute; top: 22px;}
.gnb a span {display: inline-block; position:relative; transition: transform 500ms; -webkit-transition: -webkit-transform 500ms; -moz-transition: transform 500ms; color: #36A076;}
.gnb a span:after {content: attr(data-hover); position: absolute; top: -30px; left: 0; transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0);}
.gnb a:hover span, .gnb a:focus span {transform: translateY(-30px); -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px);}
    
footer {height: 100%;}
footer .wrap {height: 100%; line-height: 100%; padding: 20px 0;}
footer .wrap a {color: #8B8B8B;}
footer .wrap:first-child {border-top: none;}
footer .wrap:first-child span {margin: 0 auto;}
footer .wrap span, footer .wrap a {font-size: 1.2em;}
footer .wrap span{display: block; margin-right: 0px!important; text-align: center; margin-bottom: 10px;}
footer .wrap .logo {display: block; width: 100%; text-align: center;}
footer .wrap .gnb {display: none;}    
footer .wrap:last-child {display: flex; justify-content: space-between; flex-flow: column;}
footer .wrap:last-child div:first-of-type {margin-bottom: 25px;}
footer .wrap:last-child div:last-of-type {display: flex; justify-content: space-between; padding:0 10px;}

/* INDEX */    
.index_1 {height: 600px;}
.index_1 .bg {background-image: url(/images/earlysms/main_bg_m.png), url(/images/earlysms/line.png); background-position:right bottom, right bottom; background-repeat: no-repeat; background-size: 350px, 100%; height: 100%; width: 100%;}
.index_1 h1 {padding-top: 26px; padding-left: 10px;}
.index_1 h1::after {display: none;}
.index_1 .btn {margin-top: 26px; margin-left: 10px;}    

.index_2 {height: 100%;}
.index_2 .bg {background-image: url(/images/earlysms/ring_l.png),url(/images/earlysms/ring_r.png),url(/images/earlysms/line_dot.png); background-repeat: no-repeat; background-position:left top, right bottom, center 65px; background-size: 36px, 36px, 100%; height: 100%;}
.index_2 .box_1 {text-align: center; margin-left: 0px;}
.index_2 .box_1 h3 {font-size: 1.2em;}
.index_2 .box_1 p {margin: 0 auto;}
.index_2 .box_2 {float: none; padding-right: 0px; display: block; text-align: center;}  
.index_2 .box_2 span {margin-top: 80px; width: 360px; display: inline-block; text-align: center;}      
.index_2 .box_2 .line {display: none;}      
.index_4 .wrap h3 {line-height: 26px; line-height: 1.5em; padding: 36px 0 20px 0;}      

/* FEATURE */
.feature_1 {padding-top: 25px;}
.feature_1 .wrap {flex-flow: column; flex-direction: column-reverse;}
.feature_1 .txt_box {width: 100%; text-align: center; max-width:450px; margin:0 auto;}
.feature_1 .txt_box h2 {margin-bottom: 25px;}
.feature_1 .txt_box h3 {line-height: 1.6em;}
.feature_1 .img_box {text-align: center; margin-top: 36px;}
.feature_1 .img_box img:first-of-type {width: 100%; max-width: 360px; display: block; margin: 0 auto; margin-bottom: 26px;}

.feature_2 .title_box {margin-top: 80px; flex-flow: column;}
.feature_2 .title_box img {margin-bottom: 15px; margin-right: 0px;}
.feature_2 .icon_wrap {flex-flow: column; max-width: 450px; margin: 0 auto; margin-top: 50px;}
.feature_2 .icon_box {border-right: 0px; padding: 0px; width: 100%!important; margin-bottom: 56px;}
.feature_2 .icon_box img {display: inline-block; width: 70px;}
.feature_2 .icon_box p {letter-spacing: 0px;}
    
/* CONTACT */
.contact_1 {height: 100%;}
.contact_1 form {padding-left: 0px;}
.contact_1 .form_box {display: block;}
.contact_1 .bg {flex-flow: column;}
.contact_1 .contact_wrap:first-child {width: 100%; height: 86px; line-height: 86px; max-width: 100%;}
.contact_1 .contact_wrap h2 {padding: 0px; text-align: center;}
.contact_1 .contact_wrap img {display: none;}
.contact_1 .contact_wrap:last-child {width: 100%;}
.contact_1 input {margin-right:0px!important;}
.contact_1 input[type="submit"] {margin-left: 0px; margin: 36px 0 80px 0;}  
.range-holder{width: 300px;}
    
/* TEMRS */
.terms_1 .terms_wrap div {min-width: 100%;}
.terms_1 .terms_wrap p {padding-left: 0px; padding: 0 10px;}
}

/* POPUP */
.popup {width: 280px; height: 180px; top:20%;}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 930px) {
/* INDEX */
.index_1 .bg {background-image: url(/images/earlysms/main_bg_m.png), url(/images/earlysms/line.png); background-position:right bottom; background-repeat: no-repeat; height: 100%; width: 100%; background-size: contain;}
    
.index_3 {height: 100%;} 
.index_3 h2 {padding: 65px 0;} 
.index_3 .wrap {flex-flow: column;}
.index_3 .card {position: relative; top: 0px; margin-right: 0px; left: 50%; transform: translateX(-50%); margin-bottom: 50px; height: 420px;}
.index_3 .card:last-of-type {margin-right: 0px;}
.index_3 .card_inner {width: 100%; height: 420px;}      
    
/* FEATURE */
.pricing_1 {height: 100%;}
.pricing_1 .bg {background-position: left bottom, right top, right bottom;}
.pricing_1 .card_wrap {flex-flow: column; margin-top: 0px; margin-bottom: 50px;}
.pricing_1 .card {margin: 0 auto; margin-bottom: 50px;} 

/* TRIAL */
.trial_1 {height: 550px!important;}    
    
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {
/* INDEX */
.index_2 .bg {background-image: url(/images/earlysms/ring_l.png),url(/images/earlysms/ring_r.png),url(/images/earlysms/line_dot.png); background-repeat: no-repeat; background-position:left top, right 680px, center 260px; background-size: 36px, 36px, 100%; height: 100%;}
.index_2 .box_2 span:last-of-type {margin-top: 56px;}
}