@charset "utf-8";

/* layout */
#wrap {height: 100%;}
#page_what {background-image: url('../img/img_bg.png'); background-repeat: no-repeat; background-position: left top; background-color: #1c1b23; padding: 100px 0 260px 0;}
#contact {background: #2e2e3a; padding: 200px 0;}
#footer {background: #1c1b23; padding: 60px 0;}

/* container */
.container {width: 1440px; height: inherit; margin: 0 auto;}

/* row */
.row {padding: 0 40px;}

/* page_what */
.page_what {overflow: hidden;}
.page_what .CI {float: left; padding-top: 10px;}
.page_what .CI img {}

.page_what .button {float: right;}
.page_what .button .top_btn01 {height: 54px; background: #49494f; color: #ffffff; border-radius: 30px; margin-right: 12px; border: 0px none; padding: 0px 25px;
    font-size: 20px; font-weight: 500; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; text-align: center; cursor: pointer;}
.page_what .button .top_btn01:hover{text-decoration: underline;}
.page_what .button .top_btn02 {height: 54px; background: #49494f; color: #ffffff; border-radius: 30px; border: 0px none; padding: 0px 25px;
    font-size: 20px; font-weight: 500; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; text-align: center; cursor: pointer;}
.page_what .button .top_btn02:hover{text-decoration: underline;}

.page_what .title {padding-top: 180px;}
.page_what .title h1 {text-align: center; font-size: 100px; font-weight: 500; font-family: 'Do Hyeon', sans-serif; color: #ffffff;}
.page_what .title h1 br {display: none;}
.page_what .title h1 img {vertical-align: middle;}
.page_what .title p {padding-top: 60px; text-align: center; font-size: 30px; line-height: 38px; font-weight: 300; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; color: #ffffff; opacity: 0.8;}

.page_what .what_contents {padding-top: 195px; overflow: hidden; margin: 0px 20px;}
.page_what .what_contents .text_left {width: 45%; float: left;}
.page_what .what_contents .text_left h2 {font-size: 44px; font-weight: 600; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; background: radial-gradient(#68f0de, #5ff9f7, #39e3f7); 
    color: transparent; -webkit-background-clip: text;}
.page_what .what_contents .text_left p {padding-top: 10px; font-size: 20px; line-height: 28px; font-weight: 300; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; color: #ffffff; opacity: 0.8;}
.page_what .what_contents .text_left ul {padding-top: 50px;}
.page_what .what_contents .text_left ul li {font-size: 24px; line-height: 38px; font-weight: 400; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; color: #ffffff;}

.page_what .what_contents .text_right {width: 45%; float: right;}
.page_what .what_contents .text_right h2 {font-size: 44px; font-weight: 600; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; background: radial-gradient(#68f0de, #5ff9f7, #39e3f7); 
    color: transparent; -webkit-background-clip: text;}
.page_what .what_contents .text_right p {padding-top: 10px; font-size: 20px; line-height: 28px; font-weight: 300; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; color: #ffffff; opacity: 0.8;}
.page_what .what_contents .text_right ul {padding-top: 50px;}
.page_what .what_contents .text_right ul li {font-size: 24px; line-height: 38px; font-weight: 400; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; color: #ffffff;}

.page_what .what_contents02 {padding-top: 170px; overflow: hidden; margin: 0px 20px;}
.page_what .what_contents02 .text_left {width: 45%; float: left;}
.page_what .what_contents02 .text_left h2 {font-size: 44px; font-weight: 600; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; background: radial-gradient(#68f0de, #5ff9f7, #39e3f7); 
    color: transparent; -webkit-background-clip: text;}
.page_what .what_contents02 .text_left p {padding-top: 10px; font-size: 20px; line-height: 28px; font-weight: 300; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; color: #ffffff; opacity: 0.8;}
.page_what .what_contents02 .text_left ul {padding-top: 50px;}
.page_what .what_contents02 .text_left ul li {font-size: 24px; line-height: 38px; font-weight: 400; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; color: #ffffff;}

.page_what .what_contents02 .text_right {width: 45%; float: right;}
.page_what .what_contents02 .text_right h2 {font-size: 44px; font-weight: 600; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; background: radial-gradient(#68f0de, #5ff9f7, #39e3f7); 
    color: transparent; -webkit-background-clip: text;}
.page_what .what_contents02 .text_right p {padding-top: 10px; font-size: 20px; line-height: 28px; font-weight: 300; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; color: #ffffff; opacity: 0.8;}
.page_what .what_contents02 .text_right ul {padding-top: 50px;}
.page_what .what_contents02 .text_right ul li {font-size: 24px; line-height: 38px; font-weight: 400; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; color: #ffffff;}

/* contact */
.contact {overflow: hidden;}
.contact .cont_img {float: left; padding-left: 40px; padding-top: 15px;}
.contact .cont_list {float: left; padding-left: 80px;}
.contact .cont_list .cont_list_tit {float: left; text-align: right; padding-right: 30px;}
.contact .cont_list .cont_list_tit li {font-size: 20px; font-weight: 500; line-height: 58px; letter-spacing: -1px; color: #989898;}
.contact .cont_list .cont_list_text {float: left;}
.contact .cont_list .cont_list_text li {font-size: 19px; font-weight: 300; line-height: 58px; letter-spacing: -1px; color: #ffffff;}
.contact .cont_list .cont_list_text li a {color: #ffffff;}
.contact .cont_list .cont_list_text li a:hover {text-decoration: underline; color: #dfe3fe;}

/* footer */
.footer {}

.footer .button {display: none;}
.footer .button .top_btn01 {height: 54px; background: linear-gradient(to right, #81e8ea, #57c5c7, #499ce3); color: #1c1b23; border-radius: 30px; margin-right: 20px; border: 0px none; padding: 0px 25px;
    font-size: 20px; font-weight: 500; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; text-align: center; cursor: pointer;}
.footer .top_btn02 {height: 54px; background: linear-gradient(to right, #81e8ea, #57c5c7, #499ce3); color: #1c1b23; border-radius: 30px; border: 0px none; padding: 0px 25px;
    font-size: 20px; font-weight: 500; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; letter-spacing: -1px; text-align: center; cursor: pointer;}

.footer .copy {font-size: 20px; font-weight: 400; letter-spacing: -1px; text-align: center; color: #ffffff;}


/* media query */
@media(max-width: 1460px){
    /* container */
    .container {width: 1200px;}

    /* page_what */
    .page_what .title h1 {font-size: 80px;}
    .page_what .title p {padding-top: 40px; font-size: 28px; line-height: 36px;}
    
    .page_what .what_contents .text_left p br {display: none;}
    .page_what .what_contents .text_right p br {display: none;}
    .page_what .what_contents02 .text_left p br {display: none;}
    .page_what .what_contents02 .text_right p br {display: none;}
    
    /* contact */
    #map_canvas {float: none; margin: 0 auto; width: 707px;}
    .contact .cont_img {float: none; width: 100%; padding-left: 0; padding-top: 60px; text-align: center;}
    .contact .cont_list {float: none; width: 100%; padding-left: 0; padding-top: 20px;}
    .contact .cont_list .cont_list_tit {width: 28%; text-align: right; padding-right: 40px;}

}

@media(max-width: 1280px){
    /* container */
    .container {width:95%;}

    /* page_what */
    .page_what .title h1 {font-size: 72px;}
    .page_what .title h1 img {width: 35%;}
    .page_what .title p {font-size: 26px; line-height: 34px;}
    
    .page_what .what_contents {margin: 0px 40px;}
    .page_what .what_contents .text_left h2 {font-size: 32px;}
    .page_what .what_contents .text_left ul li {font-size: 20px; line-height: 34px;}
    
    .page_what .what_contents .text_right h2 {font-size: 32px;}
    .page_what .what_contents .text_right ul li {font-size: 20px; line-height: 34px;}
    
    .page_what .what_contents02 {margin: 0px 40px;}
    .page_what .what_contents02 .text_left h2 {font-size: 32px;}
    .page_what .what_contents02 .text_left ul li {font-size: 20px; line-height: 34px;}
    
    .page_what .what_contents02 .text_right h2 {font-size: 32px;}
    .page_what .what_contents02 .text_right ul li {font-size: 20px; line-height: 34px;}
    
    /* contact */
    #contact {padding: 180px 0;}
    #map_canvas {float: none; margin: 0 auto; width: 707px;}
    .contact .cont_img {float: none; width: 100%; padding-left: 0; padding-top: 60px; text-align: center;}
    .contact .cont_list {float: none; width: 100%; padding-left: 0; padding-top: 20px;}
    .contact .cont_list .cont_list_tit {width: 28%; text-align: right; padding-right: 40px;}
    
}

@media(max-width: 1024px){
    /* container */
    .container {width:95%;}
    
    /* page_what */
    .page_what .title h1 {font-size: 70px;}
    .page_what .title h1 img {width: 35%;}
    .page_what .title p {font-size: 24px; line-height: 32px;}
    
}

@media(max-width: 960px){
    /* layout */
    #page_what {padding: 80px 0 140px 0;}
    #page_how {padding: 140px 0;}
 
    /* page_what */
    .page_what .button .top_btn01 {height: 44px; margin-right: 10px; padding: 0px 20px; font-size: 18px; font-weight: 400;}
    .page_what .button .top_btn02 {height: 44px; margin-right: 10px; padding: 0px 20px; font-size: 18px; font-weight: 400;}
    
    .page_what .title {padding-top: 150px;}
    .page_what .title h1 {text-align: center; line-height: 80px;}
    .page_what .title h1 br {display: block;}
    .page_what .title h1 img {width: 60%;}
    .page_what .title p {font-size: 22px; line-height: 30px; padding: 30px 20px 0px 20px;}
    
    .page_what .what_contents {padding-top: 130px;}
    .page_what .what_contents .text_left h2 {font-size: 28px;}
    .page_what .what_contents .text_left p {font-size: 16px; line-height: 26px;}
    .page_what .what_contents .text_left ul {padding-top: 40px;}
    .page_what .what_contents .text_left ul li {font-size: 17px; line-height: 32px;}
    
    .page_what .what_contents .text_right h2 {font-size: 28px;}
    .page_what .what_contents .text_right p {font-size: 16px; line-height: 26px;}
    .page_what .what_contents .text_right ul {padding-top: 40px;}
    .page_what .what_contents .text_right ul li {font-size: 17px; line-height: 32px;}
    
    .page_what .what_contents02 {padding-top: 130px;}
    .page_what .what_contents02 .text_left h2 {font-size: 28px;}
    .page_what .what_contents02 .text_left p {font-size: 16px; line-height: 26px;}
    .page_what .what_contents02 .text_left ul {padding-top: 40px;}
    .page_what .what_contents02 .text_left ul li {font-size: 17px; line-height: 32px;}
    
    .page_what .what_contents02 .text_right h2 {font-size: 28px;}
    .page_what .what_contents02 .text_right p {font-size: 16px; line-height: 26px;}
    .page_what .what_contents02 .text_right ul {padding-top: 40px;}
    .page_what .what_contents02 .text_right ul li {font-size: 17px; line-height: 32px;}
       
     /* contact */
     #contact {padding: 120px 0;}
     .contact .cont_list .cont_list_tit {width: 20%; text-align: right; padding-right: 40px;}
    
    /* footer */
    .footer .copy {font-size: 16px; font-weight: 300;}
   
}

@media(max-width: 768px){
    /* layout */
    #page_what {padding: 60px 0 80px 0;}
    #page_how {padding: 80px 0;}
    
    /* page_what */
    .page_what .CI img {width: 90%;}
    
    .page_what .button .top_btn01 {height: 40px; margin-right: 5px; padding: 0px 20px; font-size: 18px; font-weight: 400;}
    .page_what .button .top_btn02 {height: 40px; margin-right: 0px; padding: 0px 20px; font-size: 18px; font-weight: 400;}
    
    .page_what .title p br {display: none;}
    
    .page_what .what_contents {padding-top: 80px; margin: 0px 40px;}
    .page_what .what_contents .text_left {width: 100%; float: none;}
    .page_what .what_contents .text_left ul {padding-top: 30px;}
    
    .page_what .what_contents .text_right {width: 100%; float: none; padding-top: 80px;}
    .page_what .what_contents .text_right ul {padding-top: 30px;}

    .page_what .what_contents02 {padding-top: 80px; margin: 0px 40px;}
    .page_what .what_contents02 .text_left {width: 100%; float: none;}
    .page_what .what_contents .text_left ul {padding-top: 30px;}
    
    .page_what .what_contents02 .text_right {width: 100%; float: none; padding-top: 80px;}
    .page_what .what_contents .text_right ul {padding-top: 30px;}
    
    /* contact */
    #contact {padding: 60px 0;}
    .contact .cont_img {padding-top: 30px;}
    .contact .cont_img img {width: 540px;}
    .contact .cont_list {padding-top: 10px;}
    .contact .cont_list .cont_list_tit {width: 22%; padding-right: 20px;}
    .contact .cont_list .cont_list_tit li {font-size: 18px;}
    .contact .cont_list .cont_list_text {width: 70%;}
    .contact .cont_list .cont_list_text li {font-size: 18px;}
    
}

@media(max-width: 600px){
    /* layout */
    #page_what {width: 100%; background-image: url('../img/img_bg02.png'); background-size: auto;}
    #footer {padding: 40px 0;}

    /* page_what */
    .page_what .CI {float: none; position: absolute; left: 20px; margin-right: 20px; padding-top: 0px;}
    .page_what .CI img {width: 70%;}
   
    .page_what .button {display: none;}
    
    .page_what .title {padding-top: 120px;}
    .page_what .title h1 {text-align: center; font-size: 52px; line-height: 60px;}
    .page_what .title h1 br {display: block;}
    .page_what .title h1 img {width: 45%;}
    .page_what .title p {padding: 15px 20px 0px 20px; font-size: 16px; line-height: 24px;}
    
    .page_what .what_contents {padding-top: 90px; margin: 0px 35px;}
    .page_what .what_contents .text_left {width: 100%; float: none;}
    .page_what .what_contents .text_left h2 {font-size: 26px;}
    .page_what .what_contents .text_left p {padding-top: 5px; font-size: 14px; line-height: 22px;}
    .page_what .what_contents .text_left ul {padding-top: 5px;}
    .page_what .what_contents .text_left ul li {font-size: 16px; line-height: 26px;}
    
    .page_what .what_contents .text_right {width: 100%; float: none; padding-top: 40px;}
    .page_what .what_contents .text_right h2 {font-size: 26px;}
    .page_what .what_contents .text_right p {padding-top: 5px; font-size: 14px; line-height: 22px;}
    .page_what .what_contents .text_right p br {display: block;}
    .page_what .what_contents .text_right ul {padding-top: 5px;}
    .page_what .what_contents .text_right ul li {font-size: 16px; line-height: 26px;}

    .page_what .what_contents02 {padding-top: 40px; margin: 0px 35px;}
    .page_what .what_contents02 .text_left {width: 100%; float: none;}
    .page_what .what_contents02 .text_left h2 {font-size: 26px;}
    .page_what .what_contents02 .text_left p {padding-top: 5px; font-size: 14px; line-height: 22px;}
    .page_what .what_contents02 .text_left p br {display: block;}
    .page_what .what_contents02 .text_left ul {padding-top: 5px;}
    .page_what .what_contents02 .text_left ul li {font-size: 16px; line-height: 26px;}
    
    .page_what .what_contents02 .text_right {width: 100%; float: none; padding-top: 40px;}
    .page_what .what_contents02 .text_right h2 {font-size: 26px;}
    .page_what .what_contents02 .text_right p {padding-top: 5px; font-size: 14px; line-height: 22px;}
    .page_what .what_contents02 .text_right p br {display: block;}
    .page_what .what_contents02 .text_right ul {padding-top: 5px;}
    .page_what .what_contents02 .text_right ul li {font-size: 16px; line-height: 26px;}
    
    /* contact */
    .contact .cont_img {padding-top: 30px;}
    .contact .cont_img img {width: 420px;}
    .contact .cont_list {padding-top: 10px; padding-left: 30px;}
    .contact .cont_list .cont_list_tit {width: 20%; padding-right: 20px; display: none;}
    .contact .cont_list .cont_list_tit li {font-size: 16px; line-height: 44px; font-weight: 300; letter-spacing: 0;}
    .contact .cont_list .cont_list_text {width: 100%;}
    .contact .cont_list .cont_list_text li {font-size: 16px; line-height: 44px; font-weight: 300; letter-spacing: 0;}
    
    /* footer */
    .footer .button {display: block; text-align: center; padding-bottom: 20px;}
    .footer .button .top_btn01 {height: 30px; background: #2e2e3a; color: #ffffff; margin-right: 5px; padding: 3px 15px 2px 15px; font-size: 14px; margin-right: 5px;}
    .footer .button .top_btn01 a {color: #ffffff;}
    .footer .button .top_btn02 {height: 30px; background: #2e2e3a; color: #ffffff; margin-right: 5px; padding: 3px 15px 2px 15px; font-size: 14px; margin-right: 0px;}
    .footer .button .top_btn02 a {color: #ffffff;}
}

@media(max-width: 460px){
    /* layout */
    #page_what {width: 100%; padding: 60px 0 80px 0;}
    #page_how {padding: 80px 0;}
    #footer {padding: 30px 0;}
    
    
    /* page_what */
    .page_what .CI {margin-right: 0px;}
   
    .page_what .button .top_btn01 {height: 24px; padding: 4px 10px 2px 10px; font-size: 12px;}
    .page_what .button .top_btn02 {height: 24px; padding: 4px 10px 2px 10px; font-size: 12px;}
    
    .page_what .title {padding-top: 100px;}
    
    .page_what .what_contents {padding-top: 60px; margin: 0px 20px;}
    .page_what .what_contents .text_left h2 {font-size: 24px;}
    .page_what .what_contents .text_left p br {display: none;}
    .page_what .what_contents .text_left ul li {font-size: 14px; line-height: 24px;}
    
    .page_what .what_contents .text_right h2 {font-size: 24px;}
    .page_what .what_contents .text_right p br {display: none;}
    .page_what .what_contents .text_right ul li {font-size: 14px; line-height: 24px;}

    .page_what .what_contents02 {padding-top: 40px; margin: 0px 20px;}
    .page_what .what_contents02 .text_left h2 {font-size: 24px;}
    .page_what .what_contents02 .text_left p br {display: none;}
    .page_what .what_contents02 .text_left ul li {font-size: 14px; line-height: 24px;}
    
    .page_what .what_contents02 .text_right h2 {font-size: 24px;}
    .page_what .what_contents02 .text_right p br {display: none;}
    .page_what .what_contents02 .text_right ul li {font-size: 14px; line-height: 24px;}
    
    /* contact */
    .contact .cont_img img {width: 380px;}
    
}

@media(max-width: 420px){
    /* contact */
    .contact .cont_img img {width: 320px;}
    .contact .cont_list {padding-left: 20px;}
    }