*{color:#082638;}
.mobile {display: none}
.mobile_none {display: block;}

body{font-family: 'Roboto', sans-serif; font-size: 14pt;}
h1 {font-size: 1.2em; font-weight:bold; }
h2{font-size: 2.5em; font-weight: bold; text-align: center; line-height: 130%;}
h3 {font-size: 1.5em; font-weight: bold; text-align: center; line-height: 130%; font-weight: 400;}
h3 {font-size: 1.5em; font-weight: bold; text-align: center; line-height: 130%; font-weight: 400;}
p {line-height: 150%;}
strong {font-weight: 700; }

white_box ,.button, .info_btn {border:none; box-shadow: 0 5px 10px 0 rgba(46, 137, 66, 0.51); border-radius: 50px; font-size: 1.2em; text-align: center; cursor: pointer; background: #35a04d; letter-spacing: 1px; }
.button:hover, .info_btn:hover{box-shadow: 0 30px 30px -20px #2e8942; transition: all 0.2s;}

.main_box, .sub_box{border-radius: 3px; display: block; border:1px solid #c1c6c7; font-size: 1em; border:1px solid #e8e8e8; color:#35a04d; font-weight: 300;}
.sub_box {color:#7e7e7e;}
.main_box:focus{border:2px solid #35a04d;}

input {display: block; padding-left:20px;}

.info_btn {border-radius: 50px; width:400px; height:60px; color:#fff; font-size:1.5em;  letter-spacing: 0.08em;}

::placeholder {font-family: 'Roboto', sans-serif; color:#7e7e7e;}

/*--------------------[ HEADER ]------------------*/
.top_nav {background:#fff; padding:5px 20px;}
.top_nav_wrap {display: flex; justify-content: space-between; align-items: center; min-width:1024px; max-width: 1920px;  margin:0 auto;}
.top_nav_wrap img {width:130px;}
.top_nav p {color:#384e5a; font-size: 0.8em; font-weight: 300;}

header{width:100%; position: fixed; z-index: 5000; background-color: #f3f9f5;  background-image: url(/images/earlysms/main/line-01.png), url(/images/earlysms/main/main_pic.png); background-repeat: no-repeat; background-size: 500px; background-position: left top, right top; height:80px;}
.header_wrap {padding:10px 20px; min-width:1024px; max-width: 1920px; margin:0 auto;}
.header_wrap nav {display: flex; justify-content: space-between; align-items: center; padding-top:4px; z-index: 5000}
.header_wrap nav ul {display: flex;}
.header_wrap nav ul li {margin-right:40px;}
.header_wrap nav ul li:last-child{margin-right:0px;}
.header_wrap .login {margin-right:0px; border-radius: 50px; border:2px solid #44af5c; background: rgba(255, 255, 255, 0.5); padding:8px 25px;}
.header_wrap nav ul li a {color:#082638; line-height: 53px; z-index: 99999;}
.header_wrap nav ul li a:hover {color:#35a04d; transition: color 0.5s;}

.header_shadow {box-shadow:0 5px 50px 0 rgba(46, 137, 66, 0.2); background: #fff; margin-top:-41px;  -webkit-transition: margin-top 0.3s; transition: margin-top 0.3s;}
.header_shadow_m {box-shadow:0 5px 50px 0 rgba(46, 137, 66, 0.2); background: #fff; -webkit-transition: margin-top 0.3s; transition: margin-top 0.3s;}

/*--------------------[ FOOTER ]------------------*/
footer {background: #fff; height:100%; padding:0px 30px 60px 60px; position: relative; font-size: 0.9em;}
footer li, footer p, footer a {line-height: 180%; color:#646464; font-weight: 400;}
footer .line {width:100%; height:1px; background: #646464; display: inline-block; position: absolute; bottom:50px; }
.footer_wrap {padding-top:50px; min-width:1024px; max-width: 1920px; margin:0 auto;}
.footer_wrap h1 {margin-bottom: 30px; color: #646464;}
.footer_content {display: flex; justify-content: space-between; border-bottom: 1px solid #646464; padding-bottom: 30px;} 
.footer_content ul:nth-child(2) li, .footer_content ul:nth-child(3) li{line-height: 210%;}
.footer_content .footer_sns a {width:30px; height:30px; border-radius: 50px; background: #8e8e8e; display: inline-block; margin-right:15px; text-align: center; margin-top:15px;}
.footer_content .footer_sns i {color:#f0f0f0;}
.copyright {display: flex; justify-content: space-between; margin-top:20px; }
.copyright a {margin-right:15px;}
.copyright a:last-child {margin-right:0px;}
.copyright span {height:1em; width:1.5px; background: #646464; display: inline-block; vertical-align: middle; margin-right:15px;}

.button0 {
    border: none;
    box-shadow: 0 30px 80px -20px rgb(5, 17, 59);
    border-radius: 50px;
    font-size: 1.2em;
    text-align: center;
    cursor: pointer;
    padding: 14px 6px;
    background: -webkit-linear-gradient(45deg,#d3d3d3,#fff);
    background: -o-linear-gradient(45deg,#d3d3d3,#fff);
    background: -moz-linear-gradient(45deg,#d3d3d3,#fff);
    background: linear-gradient(45deg,#d3d3d3,#fff);
    align-items: flex-start;
    text-align: center;
    color: buttontext;
    background-color: buttonface;
    box-sizing: border-box;
    border-width: 2px;
    border-style: outset;
    border-color: buttonface;
    border-image: initial;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    margin: 0em;
    font: 13.3333px Arial;
    vertical-align:middle;
}
div .button0:hover{box-shadow: 0 30px 60px -20px rgb(5, 17, 59);}
.button1{width:250px; height:60px; margin-top: 40px; margin-right:10px; color: #125fa3; padding: 16px 6px; font-size:19.2px;}

/* popup common */
.modal{display:none; position:fixed; top:0; left:0; z-index:50; width:100%; height:100%; background:url(/images/earlysms/bg_tran_black80.png) repeat;}
.layer_popup{position:fixed; top:-1000em; left:-1000em; z-index:100; background:#fff;}
.layer_popup .popup_header{height:50px; padding:0 40px; background:#222933;}
.layer_popup .popup_header h2{line-height:46px; color:#fff; font-size:26px; font-family:roboto_bo,arial,sans-serif; margin-top:0px;}
.layer_popup .popup_content{padding:32px 40px 0 40px;}
.layer_popup .popup_close{position:absolute; top:5px; right:5px; z-index:10;}
.layer_popup .popup_close a{display:block; width:17px; height:17px; text-indent:-1000em; overflow:hidden; background:url(/images/earlysms/popup_close.gif) no-repeat; background-position:0 0;}
.layer_popup .popup_close a:hover{background-position:0 100%;}
.layer_popup .search_top{padding-bottom:20px;}
.layer_popup table.type1 tbody td > p{padding:3px 0;}
.layer_popup .center_btns{padding:30px 0 0 0;}

/* modal 99 */
.modal99{display: none; background: #000; position: fixed; left: 0; top: 0; z-index: 899999; width: 100%; height: 100%; opacity: .50; }
.modal100{display: none; background: #000; position: fixed; left: 0; top: 0; z-index: 999999; width: 100%; height: 100%; opacity: .50; }
.layer_popup99{display: none; z-index:900000; background:#fff; margin: 0; background: white; position:fixed; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); max-height:95%; max-width:95%; overflow:auto; }
.layer_popup99 .popup_header99{height:40px; padding:0 20px; background:#222933; border-bottom:4px solid #2789e9;}
.layer_popup99 .popup_header99 h2{line-height:46px; color:#fff; font-size:20px; font-family:roboto_bo,arial,sans-serif;}
.layer_popup99 .popup_content99{padding:7px 20px 7px 20px;}
.layer_popup99 .popup_close99{position:absolute; top:14px; right:14px; z-index:899998; margin:0;}
.layer_popup99 .popup_close99 a{display:block; width:17px; height:17px; text-indent:-1000em; overflow:hidden; background:url(/images/earlysms/popup_close.gif) no-repeat; background-position:0 0;}
.layer_popup99 .popup_close99 a:hover{background-position:0 100%;}

/*--------------------[ MEDIA QUERY ]------------------*/
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
    .mobile {display: block!important;}
    .mobile_none {display:none!important;}
    .title h2 {font-size: 28px!important; line-height: 120%!important;} 
    body { background-size: 280px; background-position:top left,top right,right 2200px; overflow-x: hidden;}
    
    /*HEADER*/    
    header {z-index: 10000; height: 80px; background-size: 280px;}
    header h1 {padding-left: 10px; line-height: 80px;}
    .mobile-menu {width: 100%; height: 100%; background: #35a04d; position: fixed; display: none; z-index: 9999;}
    .main-menu {padding:5px;}
    .main-menu a {display: block; width:100%; height:80px; line-height: 80px; border-bottom: 1px solid rgba(255,255,255,0.5); color:#fff; font-size: 1.2em; text-align: center;}
    .open-button {width: 30px; height: 30px; transform: rotate(0deg); transition: .5s ease-in-out; position: absolute; cursor: pointer; border-bottom: 0; top: 30px; right: 10px; z-index: 99999; border-bottom: 0;}
    .open-button span {display: block; position: absolute; height: 3px; width: 100%; background: #000; border-radius: 2px; opacity: 1; left: 0;transform: rotate(0deg); transition: .25s ease-in-out;}
    .open-button span:nth-child(1) {top: 0px; transform-origin: left center;}
    .open-button span:nth-child(2) {top: 10px; transform-origin: left center;}
    .open-button span:nth-child(3) {top: 20px; transform-origin: left center;}
    .open-button.open span:nth-child(1) {transform: rotate(45deg); top: -3px; left: 8px;}
    .open-button.open span:nth-child(2) {width: 0%; opacity: 0;}
    .open-button.open span:nth-child(3) {transform: rotate(-45deg); top: 19px; left: 8px;}
    .header_m {top: 0;}
    
    /*[ FOOTER ]*/
    footer {padding:30px 0;}
    footer li, footer p, footer a {line-height: 150%;}
    footer .select_box {margin:0 auto;}
    select {-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; outline: 0; box-shadow: none; border: 0 !important; background: #44af5c; background-image: none; }
    .select {position: relative; display: block; width: 320px; height: 60px; line-height: 60px; background: #fff;overflow: hidden; border-radius: 5px; margin: 0 auto;}
    select {width: 100%; height: 100%; margin: 0; padding: 0 0 0 15px; color: #fff; cursor: pointer; font-size: 1.5em; }
    select::-ms-expand {display: none; }
    .select::after {content: '\25BC'; position: absolute; top: 0; right: 0; bottom: 0; padding: 0 20px; background: #35a04d; pointer-events: none; border-radius: 0 5px 5px 0; color:#fff;}
    .select:hover::after {color: #fff;}
    .select::after {-webkit-transition: .25s all ease; -o-transition: .25s all ease; transition: .25s all ease;}
    
    footer .info {text-align: center; margin-top:15px;}
    footer .info .footer_line {height:1px; width:90%; background: #b5b5b5; margin:10px auto;}
    .footer_sns {display: flex; justify-content:space-around; width:50%; margin:0 auto; margin-top:18px;}
    .footer_sns i {font-size: 1.5em; color:#fff;}  
    .footer_sns a {background:#35a04d; width:40px; height:40px; border-radius: 50px; text-align: center; line-height: 50px; display: block;}
}

@media only screen and (min-device-width : 667px) and (max-device-height : 414px) { 
    footer {height: 250px;}
}