html {scroll-behavior: smooth;}
body {font-family: 'Noto Sans KR', sans-serif !important; overflow-x: hidden;}
.container {max-width: 1200px; width: 100%; height: auto; margin: 0 auto;}
.container_header {max-width: 1200px; width: 100%; height: auto; margin: 0 auto;}
header {width: 1500px; height: auto; padding: 20px 0; background: #444; margin: 0 auto; border-radius: 30px; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; transition: all 0.3s;}
.header_pc.hon {width: 100%; top: 0; transition: all 0.3s; border-radius: 0;}
.header_mo.hon {position: sticky; width: 100%; top: 0; transition: initial; border-radius: 0; box-sizing: border-box; left: 0; transform: initial;}
.nav_area {display: flex; justify-content:space-between;}
.nav_area .logo p {color: #fff;}
.nav_area nav > ul {display: flex;}
.nav_area nav > ul > li {margin-right: 20px;}
.nav_area nav > ul > li:last-child {margin-right: 0;}
.nav_area nav > ul > li > a {color: #fff;}
.nav_area nav > ul > li:last-child a {padding: 6px 15px; background: #4568ac; border-radius: 30px;}

.visual {/*position: relative;*/ background: url(../img/main_visual.jpg)no-repeat 50% 50%; background-size: cover; width: 100%; height: 100vh; z-index: 1; border-radius: 0 0 80px 80px; box-sizing: border-box;}
.visual {animation-name: slick; animation-duration:2s; animation-duration: leaner; /*animation-iteration-count:3;*/ animation-direction:alternate; animation-fill-mode: forwards;}
@-webkit-keyframes slick {
    0% {
        transform:scale(1.1);
    }
    100% {
        transform:scale(1);
    }
  }

.visual::before {content:''; display: block; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; z-index: -1; border-radius: 0 0 80px 80px;}
.container_visual {display: flex; justify-content: space-between; align-items: center; height: 100%;}
.visual_left i {font-size: 50px; color: #fff;}
/* .visual_left i {display: inline-block; font: normal normal normal 46px/1 FontAwesome; color: #fff;}
.visual_left i::before {content: "\f87b";} */
.visual_left a {font-size: 50px; font-weight: 700; color: #fff; line-height: 44px; letter-spacing: -0.05em;}

.visual_right {width: 50%; background: rgba(0, 0, 0, 0.5); padding: 40px 20px;}
.section3_title {margin-bottom: 30px;}
.section3_title h3 {font-size: 22px; font-weight: 500; color: #fff; line-height: 30px;}
.section3_title p {font-size: 18px; font-weight: 400; opacity: 0.8; color: #fff;}
.visual_right form div {margin-bottom: 20px;}
.visual_right form div p {font-size: 12px; padding: 0 2px; letter-spacing: -0.1em; color: #fff;}
.visual_right form div:nth-child(2) {margin-bottom: 10px;}
.visual_right input {width: 100%; height: 50px; margin: 0; padding: 0 20px; vertical-align: middle; background: #fff; border: 3px solid #fff; font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 400; line-height: 50px; color: #888; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s; box-sizing: border-box;}
.visual_right textarea {width: 100%; height: 100px; margin: 0; padding: 0 20px; vertical-align: middle; background: #fff; border: 3px solid #fff; font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 400; line-height: 50px; color: #888; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s; box-sizing: border-box;}
.visual_right select {width: 100%; height: 50px; margin: 0; padding: 0 20px; vertical-align: middle; background: #fff; border: 3px solid #fff; font-family: 'Raleway', sans-serif; font-size: 15px; font-weight: 400; line-height: 50px; color: #888; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s; box-sizing: border-box;}
.button button {width: 100%; height: 50px; margin: 0; padding: 0 20px; vertical-align: middle; background: #4568ac; border: 0; font-size: 15px; font-weight: 400; line-height: 50px; color: #fff;}

.sub_visual {width: 80%; height: auto; background: #f1f1f1; padding: 30px 0; background: #fff; border-radius: 10px; box-shadow: 0 3px 6px 0 rgb(1 35 69 / 10%); margin: 0 auto; margin-top: -100px; padding: 20px; box-sizing: border-box; position: relative; z-index: 2;}
.sub_visual ul {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: 0 0;}
.sub_visual ul li {width: calc(100% / 3); padding: 0 20px; padding-bottom: 20px;}
.sub_visual ul li:nth-last-of-type(1) {padding-bottom: 0;}
.sub_visual ul li:nth-last-of-type(2) {padding-bottom: 0;}
.sub_visual ul li > div {display: flex; align-items: center;}
.sub_visual ul li > div > .sub_visual_img > i {display: inline-block; width: 60px; height: 60px; line-height: 58px; border-radius: 100%; background: #4568ac; font: normal normal normal 30px/1 FontAwesome; color: #fff; text-align: center; margin-right: 10px;}
.sub_visual ul li > div > .sub_visual_img > i:before {line-height: 58px;}
.sub_visual ul li > div > .sub_text p {word-break: keep-all; line-height: 1.5; font-size: 16px; font-weight: 400; color: #888;}

.title { padding: 100px 0;}
.title h2 {font-size: 46px; font-weight: 700; color: #555; line-height: 44px; letter-spacing: -0.05em; text-align: center;} 
.title h2::after {content:''; display: block; width: 200px; background: #ddd; height: 1px; margin: 30px auto;}
.title p {font-size: 18px; line-height: 34px; color: #888888; text-align: center;}

.go_button {text-align: center; margin: 50px 0;}
.go_button a {display: inline-block; height: 50px; margin: 5px; padding: 0 20px; background: #4568ac; border: 0; font-size: 15px; font-weight: 400; line-height: 50px; color: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}

.moder_chang > ul {display: flex; flex-wrap: wrap;}
.moder_chang > ul > li {width: calc(100% / 6); box-sizing: border-box; border: 1px solid rgb(69, 104, 172, 0); cursor: pointer;}
.moder_chang > ul > li:hover {border: 1px solid rgb(69, 104, 172, 1); transition: all 0.6s;}
.moder_chang > ul > li:hover .moder_img {border: 1px solid rgb(69, 104, 172, 1); transition: all 0.6s;}
.moder_chang > ul > li:hover i {transform: scale(1.1); transition: all 0.6s;}
.moder_chang > ul > li > .moder_img {width: 120px; height: 120px; line-height: 150px; background: #f8f8f8; border: 1px solid #fff; border-radius: 50%; text-align: center; margin: 0 auto; margin-top: 30px; box-sizing: border-box; border: 1px solid rgb(69, 104, 172, 0);}
.moder_chang > ul > li > .moder_img > i {font-size: 58px; color: #4568ac;}
.moder_chang > ul > li > .moder_p p {font-size: 15px; font-weight: 400; color: #888; line-height: 1.5; text-align: center; padding-top: 25px; letter-spacing: -0.04em; padding-bottom: 30px;}
.moder_chang > ul > li .moder_2 {display: none; position: fixed; /*top: 50%;*/ left: 50%; transform: translate(-50%, -50%); width: 720px; height: auto; padding: 25px; box-shadow: 0 5px 15px rgb(0 0 0 / 50%); border-radius: 4px; text-align: left; border: 1px solid rgba(0, 0, 0, .2); background-clip: padding-box; background-color: #fff;}
/* .moder_chang > ul > li.on .moder_2 {top: 50%; transition: all 0.3s;} */
.moder_chang > ul > li .moder_2 li > .moder_title > h3 {font-weight: 700; color: #555; letter-spacing: -0.05em; font-size: 30px; padding-bottom: 15px; word-break: keep-all;}
.moder_chang > ul > li .moder_2 li > .moder_title > h3::after {content: ''; display: block; width: 3px; height: 20px; background: #888888; border-radius: 10px; position: absolute; top: 20px; right: 30px; transform: rotate( 45deg);}
.moder_chang > ul > li .moder_2 li > .moder_title > h3::before {content: ''; display: block; width: 3px; height: 20px; background: #888888; border-radius: 10px; position: absolute; top: 20px; right: 30px; transform: rotate( -45deg);}
.moder_chang > ul > li .moder_2 li > p {font-size: 15px; font-weight: 400; color: #888; line-height: 1.5; word-break: keep-all;}


.section4 {background: #4568ac; padding-bottom: 100px;}
.section4 .title h2 {color: #fff;}
.section4 .title p {color: #fff;}
.section4 .moder_chang > ul > li > .moder_p p {color: #fff;}
.section4  .go_button a {background: #fff; color: #4568ac;}

.section6 .title h2 {color: #fff;}
.section6 .title p {color: #fff;}
.section6 {position: relative; background:url(../img/section6_bg.jpg)no-repeat 50% 50%; width: 100%; height: auto; padding-bottom: 60px; z-index: 1; background-attachment: fixed;}
.section6:before {content:''; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; left: 0; z-index: -1;}
.section6  .go_button a {background: #fff; color: #4568ac;}
.section6_content ul {display: flex; flex-wrap: wrap; margin: 0 -20px;}
.section6_content ul li {width: calc(100% / 2); text-align: center; padding: 0 20px; box-sizing: border-box; padding-bottom: 40px;}
.section6_content ul li .content_img {width: 64px; height: 64px; background: #4568ac; border-radius: 100%; text-align: center; margin: 0 auto;}
.section6_content ul li .content_img i {line-height: 64px; font-size: 30px; font-weight: bold; text-align: center; color: #fff; font-style: normal;}
.section6_content ul li .content_text p:first-child {font-size: 22px; font-weight: 400; color: #fff; line-height: 30px; margin-top: 20px; margin-bottom: 10px;}
.section6_content ul li .content_text p:last-child {font-size: 15px; font-weight: 400; color: #fff; line-height: 30px; text-align: center;}



/* footer {position: relative; background: url(../img/footer_bg.jpg)no-repeat 50% 50%; width: 100%; height: auto; z-index: 1; padding: 30px 0;} */
footer {width: 100%; height: auto; z-index: 1; padding: 30px 0; background: #4568ac;}
/* footer:before {content:''; display: block; width: 100%; height: 100%; background:rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; z-index: -1;} */

.adless_title {margin-bottom: 20px;}
.adless_title p {font-size: 22px; font-weight: 500; color: #fff; line-height: 30px;}
.adless ul li {font-size: 16px; font-weight: 500; color: #fff; line-height: 1.5;}
.adless ul li a {font-size: 16px; font-weight: 500; color: #fff; margin-left: 10px; line-height: 1.5;}
.cp_nav {display: flex; justify-content: space-between; padding-top: 30px; margin-top: 30px; border-top: 1px solid #888888;}
.cp_nav ul:last-child {display: flex;}
.cp_nav ul:last-child li {margin-right: 10px;}
.cp_nav ul:last-child li:last-child {margin-right: 0;}
.cp_nav ul li {color: #fff;}
.cp_nav ul li a {color: #fff;}