header,
footer,
section,
article,
aside,
nav,
hgroup,
details,
menu,
figure,
figcaption {
    display: block;
}

html,
body,
div,
span,
applet,
object,
iframe,
video,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
address {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    list-style: none;
}

span,
a {
    display: inline-block;
}

a {
    text-decoration: none;
    font-style: normal;
}

html,
body {
    font-family: 'Noto Sans KR';
    font-weight: 100;
    margin: 0;
    width: 100%;
    height: 100%;
    line-height: normal;
    -webkit-overflow-scrolling: touch;
}




body {
    color: #000;
    letter-spacing: -1px;
    -webkit-text-size-adjust: none;
    /*아이폰가로 폰트확대 방지*/
    vertical-align: top;
}

img {
    border: 0;
    max-width: 100%;
    vertical-align: top;
}

form {
    display: inline;
}

fieldset {
    border: 0;
}

legend {
    display: none;
}

input,
select,
radio,
div {
    vertical-align: top;
}

input[type=submit],
button {
    cursor: pointer;
}

input[type=radio] {
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

input[type=checkbox] {
    margin: 0;
    vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}


/* guide */

.br320 {
    display: block;
}

.br412,
.br640,
.br1200 {
    display: none;
}

.inner {
    width: 90%;
    margin: 0 auto;
}


/* font */

html {
    font-size: 62.5%;
    /*font-size:10px;*/
}


/* margin,padding */


/*form*/


/* form validator */

p {
    display: block;
}

p.error { 
    font-size: ;
    margin-left: 0;
    color:white;
}

.control-group {
    position: relative;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.control-group.warning>p,
.control-group.warning .help-block,
.control-group.warning .help-inline {
    color:#02b0e8; 
}

.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
    color: #02b0e8; 
    border-color: #02b0e8; 
}

.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
    border-color:#02b0e8; 
}

.control-group.warning .input-prepend .add-on,
.control-group.warning .input-append .add-on {
    color:#02b0e8; 
    background-color: #02b0e8; 
    border-color: #02b0e8; 
}

.control-group.error>p,
.control-group.error .help-block,
.control-group.error .help-inline {
    position: absolute;
    left: 15px;
    bottom: 2px;
    padding: 4px 8px 0 24%;
    font-size: 0.8rem;
    color: #999;
}

.agree.control-group.error>p,
.agree.control-group.error .help-block,
.agree.control-group.error .help-inline {
    position: absolute;
    left: 3px;
    bottom: -1rem;
    padding: 0.4rem 0.8rem 0 0;
}

.control-group.error input,
.control-group.error select,
.control-group.error textarea {
    color:#02b0e8; 
    background-color: white;
}

.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
    border-color:#02b0e8; 
}

.control-group.error .input-prepend .add-on,
.control-group.error .input-append .add-on {
    color: #02b0e8; 
    background-color:#02b0e8; 
    border-color: #02b0e8; 
}

.time .error {
    margin-bottom: 1.8rem;
}

.time p {
    position: absolute;
    left: 0px;
    bottom: -20px;
    font-size: 0.8rem;
}

.area p.error {
    position: absolute;
    left: 28%;
    bottom: 0;
    font-size: 0.8rem;
    color: #999;
}

.gender p.error {
    position: absolute;
    left: 24%;
    bottom: 0;
    font-size: 0.8rem;
    color: #ffe5e6;
}

.agree p.error {
    position: absolute;
    left: 2px;
    top: 10px;
    font-size: 0.8rem;
    color: #ffe5e6;
}


/* browser placeholder */

::-webkit-input-placeholder {
    color: #666;
}

:-moz-placeholder {
    color: #666;
    opacity: 1;
}

::-moz-placeholder {
    color: #999;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #999;
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    /* WebKit browsers */
    color: transparent;
}

input:focus:-moz-placeholder,
textarea:focus:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: transparent;
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: transparent;
}

input:focus:-ms-input-placeholder,
textarea:focus:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: transparent;
}


/* form setting */

.hope,
.name,
.brand,
.model,
.age,
.phone,
.email,
.time,
.money,
.job,
.area,
.memo {
    background: #ffffff;
    border: 1px solid #4d6f4a; 
    width: 100%;
    height: 52px;
    overflow: hidden;
    vertical-align: top;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.hope input:focus,
.name input:focus,
.brand input:focus,
.model input:focus,
.age input:focus,
.phone input:focus,
.email input:focus,
.memo textarea:focus,
.money input:focus {
    background: #f5f5f5;
    outline: none;
}

.memo {
    height: 85px;
}

.hope input,
.name input,
.brand input,
.model input,
.age input,
.phone input,
.email input,
.money input,
.memo textarea {
    outline: none;
    overflow: hidden;
    float: right;
    color: #666;
    font-size: 1.6rem;
    padding: 1.6rem 1.5rem 1.8rem;
    margin-top: -0.2rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.money span {
    float: right;
    font-size: 1.6rem;
    color: #666;
    padding: 1.6rem 2rem 1.6rem 0.5rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.time_select_wrap,
.money_select_wrap,
.job_select_wrap,
.area_select_wrap {
    outline: none;
    overflow: hidden;
    float: right;
    padding: 1.5rem 1.5rem 1.8rem 0;
    margin-top: -0.2rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.time select,
.money_select,
.job_select,
.area_select {
    color: #666;
    font-size: 1.6rem;
    width: 100%;
    background: transparent;
}

div.formLabel {
    font-size: 1.6rem;
    color: #000;
    position: relative;
    vertical-align: top;
    float: left;
    padding: 1.8rem 0 1.6rem 1.2rem;
    margin-top: -0.2rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.gender label {
    display: inline-block;
    font-size: 1.6rem;
    padding: 1.5rem;
}

.gender label span {
    cursor: pointer;
}

.gender label input {
    display: inline-block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 30px;
    border-radius: 50%;
}

.gender label span {
    display: inline-block;
    margin-left: 3%;
}

#user_name {
    background-position: 13px 22px !important
}

#user_name02 {
    background-position: 13px 22px !important
}

#user_name03 {
    background-position: 13px 22px !important
}

#user_age {
    background-position: 13px -30px !important
}

#user_age02 {
    background-position: 13px -30px !important
}

#user_age03 {
    background-position: 13px -30px !important
}

#user_phone {
    background-position: 13px -78px !important
}

#user_phone02 {
    background-position: 13px -78px !important
}

#user_phone03 {
    background-position: 13px -78px !important
}

#user_email {
    background-position: 13px -328px !important
}

#user_comment {
    background-position: 13px -428px !important
}

#user_hope {
    background-position: 13px -378px !important
}

#user_money {
    background-position: 13px -228px !important
}

.time_select_wrap {
    background-position: 13px -178px !important
}

input,
select,
textarea,
button {
    font-family: 'Noto Sans KR';
    font-weight: 100;
    border: 0;
    -webkit-border-radius: 0;
    /*-webkit-appearance:none;*/
}

.form_button {
    position: relative;
    text-align: center;
}

.form_button button {
    outline: none;
    font-family: 'Noto Sans KR';
    font-weight: 300;
    /*-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;*/
}

.agree {
    width: 100%;
    font-size: 1.4rem;
    cursor: pointer;
    color: #fff;
    border-top: px solid #433830;
    margin: 0;
    padding-top: ;
}

.agree a {
    margin: 0 0 0 3px;
    color: #fff;
    padding: 3px 7px;
    background:#738b6f;
    font-size: 1.2rem;
    display: inline-block;
}

.agree a:link {
    color: #fff;
}

.agree a:visited,
.agree a:active {
    color: #fff;
}

.agree a:hover {
    color: #fff;
    text-decoration: none;
}

.agree input {
    width: 16px;
    height: 16px;
    margin-right: 2px;
}


/* footer */

.footerBg {
    width: 100%;
    padding: 7.5rem 0;
}

.footerText {
    font-style: normal;
    font-size: 1.2rem;
    line-height: 1.8rem;
}


@media screen and (min-width:412px) {
    /*galaxy note9*/
    .br412 {
        display: block;
    }
    .br320,
    .br640,
    .br1200 {
        display: none;
    }
    /* form validator */
    .control-group.error>p,
    .control-group.error .help-block,
    .control-group.error .help-inline {
        position: absolute;
        left: 23px;
        bottom: 2px;
        padding: 4px 8px 0 24%;
        font-size: 1.0rem;
    }
    .time .error {
        margin-bottom: 1.0rem;
    }
    .time p {
        position: absolute;
        left: 0px;
        bottom: -20px;
        font-size: 1.0rem;
    }
    .area p.error {
        position: absolute;
        left: 28%;
        bottom: 0;
        font-size: 1.0rem;
    }
    .gender p.error {
        position: absolute;
        left: 24%;
        bottom: 0;
        font-size: 1.0rem;
    }
    .agree p.error {
        position: absolute;
        left: 2px;
        top: 10px;
        font-size: 1.0rem;
    }
    
    
    
}

@media screen and (min-width:600px) {
    .inner {
        width: 41.2rem;
    }
}

@media screen and (min-width:640px) {
    .br640 {
        display: block;
    }
    .br320,
    .br412,
    .br1200 {
        display: none;
    }
    /*footer*/
    .footer {
        font-style: normal;
        font-size: 1.4rem;
        line-height: 1.4rem;
    }
}


@media screen and (min-width:1200px) {
    .br1200 {
        display: block;
    }
    .br320,
    .br412,
    .br640 {
        display: none;
    }
    .inner {
        width: 120rem;
    }
}


/*font family*/

.cafe24ddh {
    font-family: 'Cafe24Dangdanghae';
}

.notosans100 {
    font-family: 'Noto Sans KR';
    font-weight: 100;
}

.notosans300 {
    font-family: 'Noto Sans KR';
    font-weight: 300;
}


/*font color*/

.color-red {
    color: #fa6969;
}

.color-yellow {
    color: #fcf7a2;
}

.color-white {
    color: #fff;
}


/*border color*/

.border-yellow {
    border: 3px solid #fcf7a2;
}


/*=========================start css=============================*/


/*preloader*/

.spinner-wrapper {
    position: fixed;
    z-index: 99999999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #8e2828;
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3.75rem;
    height: 1.25rem;
    margin: -0.625rem 0 0 -1.875rem;
    text-align: center;
}

.spinner > div {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    background-color: #fff;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
    }
}

@keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1.0);
        -ms-transform: scale(1.0);
        transform: scale(1.0);
    }
}


/*-------------------------320px basic coding start----------------------------------*/


.header{width: 100%; height: 60px; transition: 0.3s; position: fixed; z-index:999999;display: none;}
.header .inner{width:100%;}
.header .inner .logo{padding-top:2rem; padding-left:5%;width: 50%;}
.header .inner .logo a{cursor:pointer; width:45%;}
.header .inner nav{width: 150px; height: 100%; background:#27956a; position: fixed; right:0px; top:0px; z-index: 999; box-shadow: -5px 0px 5px 0px rgba(0, 0, 0, .5); display:none;}
#gnb{position: absolute; top:100px; right:10%; width:90%;}
#gnb li{margin: 0px 0 1.5rem; text-align:right;font-weight: 400;}
#gnb li:nth-of-type(1)::after{display: none;}
#gnb li:nth-of-type(5){margin-right: 0;}



#gnb li a{display: block;font-size: 1.6rem; line-height:1.2em; transition: 0.3s; cursor:pointer;color:white;}
#gnb li a:hover{color:#ffd800;}
#gnb li a.number, #gnb li a.number:hover{color:#fcf7a2;}
.header .inner .toggle{display:block;position:absolute;top:16px;right:5%;z-index:9999999;font-size:2rem;cursor:pointer;transition:.5s}
.header .inner .toggle i{color: #fff;}













    
    
/*main*/
    
    
    
    
    
.mainBg {width: 100%;background: url('../img/visual.png') 50% bottom no-repeat;text-align: center; background-attachment: fixed;background-position: center top;}

    
    
.mainWrap {width:100%;margin: 0 auto;}
.main{padding: 10rem 0rem 5rem 0rem;}


.mainBg h1{color: white; font-weight: 300;font-size: 3rem;border-bottom: 4px solid #66a18a;width:50%;margin: 0 auto;transform: translateY(-300px);opacity: 0;transition: 1s;} 
/*.mainBg h1::after{content: '';display: block; clear:both;height: 2px; width:10%; background-color:#66a18a;} */
.mainBg h2{font-size:3rem;color: white;margin-bottom: 3rem;line-height:1.2em;transform: translateY(-300px);opacity: 0;transition: 1s;margin-top: 3rem;}
    
.mainBg.on h2{transform: translateY(0px);opacity: 1;}
.mainBg.on h1{transform: translateY(0px);opacity: 1;}
    
    
.mainBg h2 strong{color:#64daff;}
    
    .mainBg h3{text-align: center; font-size:2rem;color: white;}

.mainBg p{color:white;display:inline-block;margin-bottom:3rem;font-size:1.8rem;line-height: 1.2em;padding-top: 0rem;transform: translateY(300px);opacity: 0;transition: 1s;}
.mainBg.on p{transform: translateY(0px);opacity: 1;}
    
    
.main .scroll{text-align: center;display:block;cursor:pointer;
animation: move 1.2s alternate infinite; animation-name: move;}
    
@keyframes move {
    0% {
        transform: translateY(40%)
    }
  
    100% {
        transform:translateY(0%)
    }
}

    
    

/*con01*/
#con01Bg{width: 100%; background-color:#f5f5f5;height: auto; padding:5rem 0rem 5rem 0rem;}
#con01Bg .conWrap{width: 100%;text-align: center;}
#con01Bg #con01{width:100%; margin:  0 auto;}
#con01Bg #con01 article{width: 100%; height: 100%;}

#con01 .step{text-align: center;width:50%;font-size: 3rem;color: #ffd800;font-weight:500; margin: 0 auto; border-bottom: 4px solid #ffd800;}    

#con01 h2{font-size: 3rem;font-weight: 700;margin-top:3rem;margin-bottom: 3rem;}

#con01 p{font-size: 1.8rem; font-weight: 300;margin-top: 3rem;}
    
    
#con01 ul{width: 90%; height: auto; margin: 0 auto; margin-top: 5rem;overflow: hidden;padding: 0rem;}   
#con01 ul li{ width:100%; float: left;padding: 0rem;margin: 0rem;margin-right: 2%;transition: 0.5s;margin-top: 2rem;}   
#con01 ul li:nth-of-type(2){margin-right: 2%;} 
#con01 ul li:nth-of-type(3){margin-right: 2%;} 
#con01 ul li:nth-of-type(4){margin-right: 0%;} 
 
    
#con01 ul li:hover{transform: scale(0.9);box-shadow: 5px 5px 10px #ccc;}    
    
    
#con01 ul li .box{width:100%;margin: 0 auto; height: auto; background-color: white;padding: 10rem 0rem;}
#con01 ul li .box img{width: auto; height: auto;}
#con01 ul li:nth-of-type(2) .box{width:100%;margin: 0 auto; background-color: #ffd800;}
#con01 ul li:nth-of-type(3) .box{width:100%;margin: 0 auto; background-color: white;}
#con01 ul li:nth-of-type(4) .box{width:100%;margin: 0 auto; background-color: #ffd800;}
#con01 ul li .box>h2{text-align:center;color: white;font-size: 2.5rem;margin-bottom: 0rem;}
#con01 ul li:nth-of-type(1) .box h2{color: black;}
#con01 ul li:nth-of-type(3) .box h2{color: black;}
#con01 ul li .box>p{text-align: left;margin-top: auto;color: white;padding: 0rem 2rem;}    

  
    


/*con2*/
#con02Bg{width: 100%;background-image: none;background-color: #27956a;}
#con02Bg .conWrap{width: 100%;}
#con02Bg #con02{width: 100%; margin:0 auto;}
#con02Bg #con02 article{width: 100%; height: 100%;padding-top: 5rem;padding-bottom: 5rem;text-align:center;overflow: hidden;}

#con02Bg .step{border-radius:50px;font-size: 2.5rem;font-weight:500;}    
#con02Bg article h2{font-size: 5rem;color: white;margin-top: 2rem;font-weight: 600;padding: 0rem;margin-bottom: 2rem;}     
#con02Bg article p:nth-of-type(1){margin-top:0rem;font-size: 1.8rem;color: white;line-height: 1.2em;padding: 0rem;margin-bottom: 2rem;}     
#con02Bg article p:nth-of-type(2){font-size:1.8rem;color: white;line-height: 1.2em;padding: 0rem;}     
    
/*
    
    
    #con02Bg.on article h2{transform:translateX(0px);opacity: 1;}
    
*/
    
    


/*con03*/

#con03Bg{width: 100%;background-image: none;background-color: #434657;}
#con03Bg .conWrap{width: 100%;}
#con03Bg #con03{width: 100%; margin:0 auto;}
#con03Bg #con03 article{width: 100%; height: 100%;padding-top: 5rem;padding-bottom: 5rem;text-align: center;}
  
#con03Bg article h2{font-size:5rem;color: white;margin-top:2rem;font-weight: 600;padding: 0rem;margin-bottom: 2rem;}     
#con03Bg article p:nth-of-type(1){margin-top: 0rem;font-size: 1.8rem;color: white;line-height: 1.2em;padding: 0rem;margin-bottom: 2rem;}     
#con03Bg article p:nth-of-type(2){font-size: 1.8rem;color: white;line-height: 1.2em;padding: 0rem;}     
    
    
    
    
 
/*con04*/   
    
#con04Bg {width: 100%;background:white;text-align: center;} 
#con04Bgsection .conWrap {width: 100%;} 
#con04 {width: 100%; margin: 0 auto;padding: 5rem 0rem;} 
#con04section #con04section article {width:100%;}
#con04 .step {text-align: center;width:160px;font-size: 3rem;color: #ffd800;font-weight:500; margin: 0 auto; border-bottom: 4px solid #ffd800;}
#con04 h2 {font-size: 3rem;font-weight: 700;margin-top:3rem;margin-bottom: 3rem;}
#con04 p {font-size:1.8rem; font-weight: 300;margin-top: 3rem;line-height:1.4em;}
    
    
    
    
    
    
    
/*con05*/ 

    
#con05Bg{width: 100%;height: auto; background: #f5f5f5; text-align: center;}
#con05Bg .conWrap{width: 100%;}
#con05Bg #con05{width: 100%;  margin: 0 auto;}
#con05Bg #con05 article{width: 100%; height:100%;padding: 5rem 0rem;margin: 0 auto;}
#con05 .step{text-align: center;width:160px;font-size: 3.4rem;color: #ffd800;font-weight:500; margin: 0 auto; border-bottom: 4px solid #ffd800;}  
#con05 article h2{font-size: 3rem;font-weight: 600;margin-top: 3rem;}    
#con05 article p{margin-top: 4rem;font-size: 1.8rem;font-weight: 400;margin-bottom: 5rem;}  

#con05 ul{overflow: hidden;width: 100%;margin: 0 auto;}    
#con05 ul li{width:320px;height:220px;margin-right: 0%;transition: 0.5s;transform:scale(0.9);padding: 5rem 0rem;border-radius: 50%;margin: 0 auto;}  
#con05 ul li:nth-of-type(3){margin-right: 0%;margin: 0 auto;}    
    
 #con05 .pic{width: 100%;}   
   
#con05 ul li .box p{text-align: center;display: inline-block;color:black;font-size: 2rem;font-weight: 500;}    
#con05 ul li:hover{transform: scale(1);}    
    
#con05 ul li:nth-of-type(1){background-color: white;}   
#con05 ul li:nth-of-type(2){background-color:#ffd800;}   
#con05 ul li:nth-of-type(3){background-color: white;}  
    
#con05 ul li:nth-of-type(3) p{margin-top: 5rem;}   
#con05 ul li:nth-of-type(2) p{margin-top:3rem;}    
    
    
    

    
/*form*/

      #formBg{background-color:#f2c200;height: auto;}
    #formWrap{padding:5rem 0rem;background-color:#f2c200;}
    
    .formBox {
       text-align:left;
        width: 100%;
        margin: 0 auto;
        margin-top: 3rem;
    }
    #formBg h1{font-size: 3rem;text-align: center;  margin-bottom: 5rem;
 color: white; display:block;width: 100%; margin: 0 auto;font-style: 'S-CoreDream-3Light';font-style: normal;font-weight: 600;line-height: 1.2em;}
  
    

div.formLabel{width:28%;}
.asterisk_name{position:absolute; top:4px; right:7%; color:#fa6969; font-size:1.8rem; z-index:1;}
.asterisk_phone{position:absolute; top:4px; right:7%; color:#fa6969; font-size:1.8rem; z-index:1;}
.asterisk_area{position:absolute; top:4px; right:7%; color:#fa6969; font-size:1.8rem; z-index:1;}
.name, .phone, .job, .area, .memo{position:relative; margin-bottom:15px;}
.name input{display:inline-block;width:72%;}
.phone input{display:inline-block; width:72%;}
.job_select_wrap{display:inline-block; width:72%;}
.area_select_wrap{display:inline-block; width:72%;}
.memo textarea{display:inline-block; width:72%; height:85px;}
.form_button{margin-top:3rem;}
.form_button button{background:#fcf7a2; color:#000; font-size:2.4rem; padding:1.5rem 5rem; display:inline-block;}



.form_button button {
    background:#2fb280;
    color:white;
    font-weight: 500;
    font-size: 2.4rem;
    padding: 1.5rem 5rem;
    display: inline-block;
    margin-top: 3rem;
    transition: 0.5s;
    
}
    
    .form_button button:hover{box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}
    
    
/*    footer*/
    
    .footerBg{background-color:#151a1e;}
    .footerBg .inner{width: 100%; margin:0 auto;padding: 0rem 0rem;}
    .footer ul {
        overflow: hidden;
    }
    .footer ul li {
     
        text-align: center;font-size: 1.4rem; line-height: 1.9rem;
        color: white;
        font-size: 1.6rem;
        line-height: 1.4em;
        overflow: hidden;
        text-align: center;
        padding:0rem 2rem;
         font-style:normal;
       
      
    }
    

    .footer ul>li img{ margin-bottom:3rem;}
    

    .footer ul li:first-child p {
        margin-top: 1rem;
        color: #9a9a9a;
        font-size: 1.4rem;
    }
    .footer ul li:last-child {
   text-align: center;
    }
    .footer ul li:last-child a {
        display: block;
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 1rem; 
        color: white;
    }
.footer ul li:nth-of-type(2){text-align: center;margin-top: 3rem;}






/*floatMenu*/

.floatMenu {
    background:#738b6f;
    border-radius: 50px;
    text-align: center;
    width: 40px;
    height: 40px;
    position: fixed;
    z-index: 9999;
}

.top {
    right: 20px;
    bottom: 20px;
}

.blog {
    background-color: #ffc400;
    right: 20px;
    bottom: 70px;
}

.floatMenu i {
    font-size: 2.2rem;
    color: #fff;
    padding-top: 0.8rem;
    cursor: pointer;
}

.active {
    color:#4d6f4a;
    border-bottom: 3px solid #4d6f4a;
}





@media screen and (min-width:375px) {
    

    
    
    
    
}

@media screen and (min-width:412px) {

    
        #formBg h1{font-size: 4rem;}
  
    
   

    #con02Bg{background-image:none;background-color: #27956a;}
    #con03Bg{background-image:none;background-color: #434657;}

    
    
    
    
}


/*-------------------------1200px basic coding start----------------------------------*/


@media screen and (min-width:1200px) {

.header { width: 100%; height: 100px; top: 0px; background: none; transition: 0.3s; position: fixed; z-index: 999;display: none;}
.header .inner {width: auto;padding: 0 8rem;position: relative;}
.header .inner .logo {position: absolute;left: 2%;margin-top:3.25rem;padding: 0;width: auto;}
.header .inner .logo a { display: block; width: auto;}
.header .inner nav {background: none;box-shadow: none;right: 0px;top: 50px;width: 100%;height: auto;display: block;}
#gnb {width: auto;height: auto; overflow: hidden;position: absolute;right: 80px;padding-top: 0rem;top: -10px;color: white;}
#gnb li { margin: 0px 2rem;  text-align: left;  float: left;  color: white;  width: auto;  height: auto; font-size: 1.8rem;}


#gnb li::after{content: '';display: block;clear: both;width: auto; height: 2px;background: #66a18a;opacity: 0;transform: scale(0);transition: 0.4s;margin-top: 5px;}
#gnb li:hover::after{opacity: 1;transform: scale(0.9);}

.header .inner .toggle {display: none;}

#gnb li a:hover {cursor: pointer;color: #66a18a;}
#gnb li a{transition: 0.5s;}
.header .inner .toggle{display: none;}

    
    
/*main*/
    
    
    
    
    
.mainBg {width: 100%;background: url('../img/visual.png') 50% bottom no-repeat;text-align: center;background-attachment: fixed;background-position: top;}

    
    
.mainWrap {width:1200px;margin: 0 auto;}
.main{padding: 21.3rem 0rem 5rem 0rem;}


.mainBg h1{color: white; font-weight: 500;font-size: 4rem;border-bottom: 4px solid #66a18a;width:15%;margin: 0 auto;transform: translateY(-300px);opacity: 0;transition: 1s;} 
/*.mainBg h1::after{content: '';display: block; clear:both;height: 2px; width:10%; background-color:#66a18a;} */
.mainBg h2{font-size:6rem;color: white;margin-bottom: 4rem;line-height:6.5rem;transform: translateY(-300px);opacity: 0;transition: 1s;margin-top: 5rem;}
    
.mainBg.on h2{transform: translateY(0px);opacity: 1;}
.mainBg.on h1{transform: translateY(0px);opacity: 1;}
    
    
.mainBg h2 strong{color:#64daff;}
    
    .mainBg h3{text-align: center; font-size:2rem;color: white;}

.mainBg p{color:white;display:inline-block;margin-bottom:15rem;font-size: 2.6rem;line-height: 1.6em;padding-top: 0rem;transform: translateY(300px);opacity: 0;transition: 1s;font-weight: 400;}
.mainBg p{color:white;display:inline-block;margin-bottom:15rem;font-size: 2.6rem;line-height: 1.6em;padding-top: 0rem;transform: translateY(300px);opacity: 0;transition: 1s;font-weight: 300;}
.mainBg.on p{transform: translateY(0px);opacity: 1;}
    
    
.main .scroll{text-align: center;display:block;cursor:pointer;
animation: move 1.2s alternate infinite; animation-name: move;}
    
@keyframes move {
    0% {
        transform: translateY(40%)
    }
  
    100% {
        transform:translateY(0%)
    }
}

    
    

/*con01*/
#con01Bg{width: 100%; background-color:#f5f5f5;height: auto; padding:15rem 0rem;}
#con01Bg .conWrap{width: 100%;text-align: center;}
#con01Bg #con01{width:1200px; margin:  0 auto;}
#con01Bg #con01 article{width: 100%; height: 100%;}

#con01 .step{text-align: center;width:170px;font-size: 3.4rem;color: #ffd800;font-weight:500; margin: 0 auto; border-bottom: 4px solid #ffd800;}    

#con01 h2{font-size: 6.0rem;font-weight: 700;margin-top:3rem;margin-bottom: 3rem;}

#con01 p{font-size: 2.2rem; font-weight: 300;margin-top: 3rem;}
    
    
#con01 ul{width: 100%; height: auto; margin: 0 auto; margin-top: 5rem;overflow: hidden;padding: 0rem;}   
#con01 ul li{ width:23.5%; float: left;padding: 0rem;margin: 0rem;margin-right: 2%;transition: 0.5s;}   
#con01 ul li:nth-of-type(2){margin-right: 2%;} 
#con01 ul li:nth-of-type(3){margin-right: 2%;} 
#con01 ul li:nth-of-type(4){margin-right: 0%;} 
 
    
#con01 ul li:hover{transform: scale(0.9);box-shadow: 5px 5px 10px #ccc;}    
    
    
#con01 ul li .box{width:100%;margin: 0 auto; height: auto; background-color: white;padding: 12rem 0rem;}
#con01 ul li .box img{width: auto; height: auto;}
#con01 ul li:nth-of-type(2) .box{width:100%;margin: 0 auto; background-color: #ffd800;}
#con01 ul li:nth-of-type(3) .box{width:100%;margin: 0 auto; background-color: white;}
#con01 ul li:nth-of-type(4) .box{width:100%;height: 160px; margin: 0 auto; background-color: #ffd800;padding: 11rem 0rem 13rem;}
#con01 ul li .box>h2{text-align:center;color: white;font-size: 2.5rem;margin-bottom: 0rem;}
#con01 ul li:nth-of-type(1) .box h2{color: black;}
#con01 ul li:nth-of-type(3) .box h2{color: black;}
#con01 ul li:nth-of-type(4) .box h2{margin-top:-0.6rem;}
#con01 ul li .box>p{text-align: left;margin-top: auto;color: white;padding: 0rem 2rem;}    
    
    


/*con2*/
#con02Bg{width: 100%;background-image: url(../img/con02bg.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
#con02Bg .conWrap{width: 100%;}
#con02Bg #con02{width: 1200px; margin:0 auto;}
#con02Bg #con02 article{width: 100%; height: 100%;padding-top: 22rem;padding-bottom: 22rem;text-align:right;overflow: hidden;}
#con02Bg .step{border-radius:50px;font-size: 2.5rem;font-weight:500;}    
#con02Bg article h2{font-size: 12rem;color: white;margin-top: 0rem;font-weight: 600;padding: 0rem;margin-bottom: 0rem;}     
#con02Bg article p:nth-of-type(1){margin-top: 2.3rem;font-size: 2.4rem;color: white;line-height: 1.2em;padding: 0rem;margin-bottom: 0rem;}     
#con02Bg article p:nth-of-type(2){font-size: 2.4rem;color: white;line-height: 1.2em;padding: 0rem;}     
    
/*
    
    
    #con02Bg.on article h2{transform:translateX(0px);opacity: 1;}
    
*/
    
    


/*con03*/

#con03Bg{width: 100%;background-image: url(../img/con03bg.png);background-size: cover;background-position: center;background-repeat: no-repeat;}
#con03Bg .conWrap{width: 100%;}
#con03Bg #con03{width: 1200px; margin:0 auto;}
#con03Bg #con03 article{width: 100%; height: 100%;padding-top: 22rem;padding-bottom: 22rem;text-align: left;}
  
#con03Bg article h2{font-size:12rem;color: white;margin-top: 0rem;font-weight: 600;padding: 0rem;margin-bottom: 0rem;text-align: left;}     
#con03Bg article p:nth-of-type(1){margin-top: 2.3rem;font-size: 2.4rem;color: white;line-height: 1.2em;padding: 0rem;margin-bottom: 0rem;text-align: left;}     
#con03Bg article p:nth-of-type(2){font-size: 2.4rem;color: white;line-height: 1.2em;padding: 0rem;text-align: left;}     
    
    
    
    
 
/*con04*/   
    
#con04Bg {width: 100%;background:white;text-align: center;} 
#con04Bgsection .conWrap {width: 100%;} 
#con04 {width: 1200px; margin: 0 auto;padding: 13rem 0rem;} 
#con04section #con04section article {width:100%;}
#con04 .step {text-align: center;width:160px;font-size: 3.4rem;color: #ffd800;font-weight:500; margin: 0 auto; border-bottom: 4px solid #ffd800;}
#con04 h2 {font-size: 6.0rem;font-weight: 700;margin-top:3rem;margin-bottom: 3rem;}
#con04 p {font-size:3rem; font-weight: 300;margin-top: 3rem;line-height:1.4em;}
    
    
    
    
    
    
    
/*con05*/ 

    
#con05Bg{width: 100%; background: #f5f5f5; text-align: center;}
#con05Bg .conWrap{width: 100%;}
#con05Bg #con05{width: 1200px;  margin: 0 auto;}
#con05Bg #con05 article{width: 100%; height:100%;padding: 13rem 0rem;}
#con05 .step{text-align: center;width:160px;font-size: 3.4rem;color: #ffd800;font-weight:500; margin: 0 auto; border-bottom: 4px solid #ffd800;}  
#con05 article h2{font-size: 6.2rem;font-weight: 600;margin-top: 3rem;}    
#con05 article p{margin-top: 3rem;font-size: 2.4rem;font-weight: 400;margin-bottom: 5rem;}  
    

#con05 ul{overflow: hidden;width: 100%;}    
#con05 ul li{float: left;width:360px;height:260px;margin-right: 5%;transition: 0.5s;transform:scale(0.9);padding: 5rem 0rem;border-radius: 50%;}  
#con05 ul li:nth-of-type(3){margin-right: 0%;}    
    
 #con05 .pic{width: 100%;}   
  
#con05 ul li:hover{transform: scale(0.95);box-shadow:5px 5px 0px #ccc;}    
    
#con05 ul li:nth-of-type(1){background-color: white;}   
#con05 ul li:nth-of-type(2){background-color:#ffd800;}   
#con05 ul li:nth-of-type(3){background-color: white;}  
    
#con05 ul li:nth-of-type(3) p{margin-top: 5rem;}   
#con05 ul li:nth-of-type(2) p{margin-top:3rem;}    
    
    
    
    

    
/*form*/
    #formBg{background-color:#f2c200;width: 100%; height: auto;}
    #formWrap{padding: 15rem 0rem;background-color:#f2c200;}
 
    #formBg h1{font-size: 6rem;text-align: center;  margin-bottom: 5rem;
 color: white;font-style: normal;}
    #formBg h1::after{content: '';display: block; clear: both; width: 230px; height: 4px;background-color: white;margin: 0 auto;margin-top: 30px;}
     
    #formBg h3{font-size: 2rem;line-height: 3rem;}
    
    
    div.formLabel {
        width: 27%;
    
    }.formBox{width:580px; margin:0 auto;}
div.formLabel{width:27%;}
.name, .phone, .job, .area, .memo{margin-bottom:1.5rem;}
.name{width:47%; margin-right:4%;}
.name input{width:72%;}
.phone{width:47%;}
.phone input{width:72%;}
.job{width:47%; margin-right:4%;}
.job_select_wrap{width:72%;}
.area{width:47%;}
.area_select_wrap{width:72%;}
.memo{width:99%;}
.memo textarea{width:72%;}


.form_button button {
    background:#2fb280;
    color:white;
    font-weight: 500;
    font-size: 2.4rem;
    padding: 1.5rem 5rem;
    display: inline-block;
    margin-top: 3rem;
    transition: 0.5s;
    
}
    
    .form_button button:hover{box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);}
    
    
/*    footer*/
    
    .footerBg{background-color:#151a1e;}
    .footerBg .inner{width: 1200px; margin:0 auto;padding: 2rem 0rem;}
    .footer ul {
        overflow: hidden;
    }
    .footer ul li {
        float:left;
        font-style:normal;
        text-align: left;font-size: 1.4rem; line-height: 1.9rem;
        color: white;
        font-size: 1.6rem;
        line-height: 1.6em;
       
      
    }
    
    .footer ul>li img{ margin-bottom:3rem;}
    
    .footer ul li:nth-of-type(2){font-size: 2rem;color: white;float: right;}
    .footer ul li:first-child {
        float: left;
        padding: 0rem 0rem 0rem 2rem;
        
    
        
    }
    .footer ul li:first-child p {
        margin-top: 1rem;
        color: #9a9a9a;
        font-size: 1.4rem;
    }
    .footer ul li:last-child {
   
    }
    .footer ul li:last-child a {
        display: block;
        font-size: 1.8rem;
        text-align: right;
        margin-bottom: 1rem; 
        color: white;
    }
/*    floatMenu*/
    .floatMenu {
        width: 60px;
        height: 60px;
    }
    .top {
        right: 20px;
        bottom: 20px;
    }
    .blog {
        right: 20px;
        bottom: 100px;
    }
    .floatMenu i {
        font-size: 2.8rem;
        padding-top: 1.5rem;
    }
}