@charset "utf-8";

/* 모달창 */
.modal{
  position: fixed;
  width:100%; height:100%;
  background: rgba(0,0,0,.8);
  z-index: 10000;
  font-family: '나눔스퀘어라운드';
}
.modal > ul{
  position: relative;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  width:350px; height:300px;
  background: #fff;
  border:10px solid #239aff;
  border-top: 60px solid #239aff;
  box-sizing: border-box;
  border-radius: 20px;
}
.modal li{
  position: relative;
  top:20px; left:10px;
  font-size:16px;
  line-height:25px;
  color:#444;
}
.modal li:first-child{
  position: absolute;
  top:-40px;
  font-size: 30px;
  font-weight: bold;
  text-indent: 5px;
  color:#fff;
}
.modal li:last-child{
  font-size: 12px;
  top:40px; left:238px;
  width:80px;
  background: #239aff;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  color: #fff;
}
.modal li:last-child:hover{
  background-color: #243A7E;
}









/* 배너 */
.banner{
  background:#243A7E;
  height:120px;
}
.banner > p{
  width:1200px;
  text-align: center;
  margin: 0px auto;
}
.banner .fa-x{
  position:relative;
  top:-10px; left:10px;
  color:#fff;
  font-size: 20px;
  cursor: pointer;
}









/* 탑 헤더 */
.t_header{
  height:40px;
  border-bottom: 1px solid #ccc;
}
.gnb01,
.gnb02{
  position: relative;
  width:1200px; height:45px;
  margin: 0px auto;
}
.gnb01 > ul,
.gnb02 > ul{
  position: absolute;
  right:0px;
  display: flex;
}
.gnb01 li,
.gnb02 li{
  position: relative;
  top:5px;
  width:100px;
  background-color:#fff;
  text-align: center;
}
.gnb01 li > a,
.gnb02 li > a{
  line-height: 30px;
  color:#777;
  transition: 0.2s;
  display: block;
  font-size: 12px;
}
.gnb01 li > a:hover{color:#ff567d;}
.sub01,
.sub02{
  position: absolute;
  top:25px; left:-10px;
}
.sub01 > li,
.sub02 > li{
  width:120px;
  z-index: 100;
}
.sub01 > li > a,
.sub02 > li > a{
  line-height: 40px;
  box-sizing: border-box;
}
.sub01 > li > a:hover,
.sub02 > li > a:hover{
  background:#ff567d;
  color:#fff;
}









/* 바텀 헤더 */
/* 로고 */
.b_header{height:90px;}
.gnb02{
  position: relative;
  width:1200px; height:90px;
  margin: 0px auto;
}
.gnb02 > h1{
  position: absolute;
  top:27px;
}
.gnb02 > h1 > a{display:block;}
.gnb02 > h1 img{height:36px;}









/* 네비게이션 */
.gnb02 > ul{
  position: absolute;
  right:0px;
  text-align: center;
  display: flex;
  z-index: 10;
}
.gnb02 > ul > li{
  top:22px;
  width:180px;
}
.gnb02 > ul > li > a{
  font-size: 20px;
  line-height: 46px;
  color:#333;
  transition: 0.1s;
}
.gnb02 > ul > li > a:hover{
  font-weight: bold;
  border-bottom:3px solid #ff567d;
}
.sub02{
  left:0px; top:45px;
}
.sub02 > li{
  background: #fff;
  width:180px;
}
.sub02 > li > a{
  font-size: 17px;
  line-height: 50px;
  color:#333;
}









/* 어사이드01 */
.aside01{
  position: fixed;
  width:170px;
  font-family: '말랑말랑';
  font-size: 26px;
  font-weight: bold;
  letter-spacing:1px;
  text-align: right;
  z-index: 1000;
  margin-left:-170px;
}
.free, .pay{
  position: relative;
  background-color:gold;
  height:180px;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  text-align: center;
}
.pay{background:#60f18d;}
.aside01 li{
  position: absolute;
  top:35%; left:40%;
  transform: translate(-50%,-50%);
  width:152px; height:63px;
}
.aside01 a{
  margin-top:75px;
  margin-left:23px;
  background:#239aff;
  color: #fff;
  font-size: 24px;
  line-height: 40px;
  width:110px; height:45px;
  display: block;
  border-radius:22px;
}
.aside01 > img{
  position: absolute;
  top:-138px; left:0px;
  height:150px;
}









/* 어사이드02 */
.aside02{
  position: fixed;
  bottom:30px; right:80px;
  z-index: 1000;
  opacity: 0;
}
.aside02 img{height:80px;}









/* 인트로 */
.intro{
  width:100%; height:720px;
  background: #FFE15C;
  font-family: '나눔스퀘어라운드';
  color:#fff;
}
.intro_txt{
  position: relative;
  width:1200px;
  margin: 0px auto;
  text-align: center;
}
.intro_txt > li:first-child{
  position: relative;
  top:40px;
  font-size: 28px;
}
.intro_txt > li:nth-child(2){
  position: relative;
  top:90px;
  font-size: 60px;
  font-weight: bold;
  font-family: '말랑말랑';
}
.intro_txt > li:nth-child(3){
  position: relative;
  top:105px;
  color:#396cdc;
  font-size: 150px;
  font-weight:bold;
}
.intro_img{
  width:100%;
  justify-content:center;
}
.intro_img > li{
  position: relative;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  width:1200px; height:720px;
  display: flex;
}
.intro_img img{position: absolute;}
.intro_img > li > img:first-child{
  bottom:-80px; left:-264px;
}
.intro_img > li > img:nth-child(2){
  bottom:-100px; left:-62px;
}
.intro_img > li > img:nth-child(3){
  bottom:-118px; left:300px;
  width:600px;
  opacity:0;
}
.intro_img > li > img:nth-child(4){
  bottom:-110px; right:7px;
}
.intro_img > li > img:nth-child(5){
  top:110px; right:-90px;
  height:450px;
  animation:slideup 2s linear;
  animation-iteration-count: infinite;
}
.intro_img > li > img:last-child{
  top:100px; left:-20px;
  animation:sliderow 2s linear;
  animation-iteration-count: infinite;
}
@keyframes slideup{
  0%{top: 110px;}
  25%{top: 105px;}
  50%{top: 110px;}
  75%{top: 115px;}
  100%{top: 110px;}
}
@keyframes sliderow{
  0%{left: -20px;}
  25%{left: -15px;}
  50%{left: -20px;}
  75%{left: -25px;}
  100%{left: -20px;}
}









/* 맞춤검색 */
.search{
  width:100%; height:120px;
  background: #fff;
  border-bottom: 2px solid #ededed;
}
.search > ul{
  position: relative;
  top:20px;
  width:1200px; height:80px;
  display: flex;
  margin:0px auto;
  font-size:24px;
  font-weight: bold;
  font-family: '나눔스퀘어라운드';
}
.search li{
  position: absolute;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  width:701px;
}
.search li > span{color: #ff567d;}
.search_txt{
  position: relative;
  bottom:2.5px;
  width:290px; height:50px;
  border: 3px solid #ff567d;
  box-sizing: border-box;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  text-align: center;
}
.search_btn{
  position: relative;
  top:3px; left:-6.5px;
  width:50px; height:50px;
  cursor: pointer;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border: none;
  background:#ff567d;
}
.search .fa-search{
  font-size:28px;
  font-weight: bold;
  color: #fff;
}









/* 홈스쿨링 */
.home{
  width:100%; height:670px;
  background: #fff;
  padding: 100px 0;
}
.home_title,
.age_title,
.con_title,
.outtro > ul{
  width:1200px;
  margin: 0px auto;
  font-family: '나눔스퀘어라운드';
}
.home_title > li:first-child,
.age_title > li:first-child,
.con_title > li:first-child{
  font-size:30px;
  font-weight: bold;
  float: left;
}
.home_title > li:nth-child(2){
  position: relative;
  top:0px; left:15px;
  line-height:40px;
  color:#777;
}
.home_img{
  width:1200px;
  margin: 0px auto;
  padding: 30px 0 15px 0;
  display: flex;
  justify-content: space-between;
}
.home_img > li{width:210px;}
.home_img a{display: block;}
.home_img img{
  border-radius:30px;
  width:210px;
  padding:10px 0;
}
.home_img a > h3{
  height:50px;
  text-align: center;
  line-height:25px;
  font-size: 24px;
  font-family: '나눔스퀘어라운드';
}
.home_img a > h3 > span{
  font-size:16px;
  color:#72ad43;
}
.home_img > li:nth-child(2) span{color: #ff567d;}
.home_img > li:nth-child(3) span{color: #ad70c0;}
.home_img > li:nth-child(4) span{color: #f38842;}
.home_img > li:nth-child(5) span{color: #049e78;}
.home_img > li p:nth-child(3){
  width:200px; height:45px;
  margin-left: 5px;
  padding:20px 0;
  line-height:20px;
}
.home_img > li p:nth-child(4){
  width:210px; height:60px;
  line-height: 60px;
  background: #72ad43;
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  font-family: '나눔스퀘어라운드';
  border-radius:30px;
  transition: 0.3s;
}
.home_img > li p:nth-child(4):hover{background:#1b6b0c;}
.home_img > li .fa-angle-right{color:#fff;}
.home_img > li:nth-child(2) p:nth-child(4){background: #ff567d;}
.home_img > li:nth-child(2) p:nth-child(4):hover{
  background: #d73044;
}
.home_img > li:nth-child(3) p:nth-child(4){background: #ad70c0;}
.home_img > li:nth-child(3) p:nth-child(4):hover{
  background: #6a288a
}
.home_img > li:nth-child(4) p:nth-child(4){background: #f38842;}
.home_img > li:nth-child(4) p:nth-child(4):hover{
  background: #eb5405;
}
.home_img > li:nth-child(5) p:nth-child(4){background: #049e78;}
.home_img > li:nth-child(5) p:nth-child(4):hover{
  background: #2bb7b4;
}










/* 연령별 추천 교재 */
.age{
  position: relative;
  width:100%; height:613px;
  background: #FFE4E4;
  box-shadow: 0px -100px 100px rgba(255, 228, 228,.99);
  padding-bottom: 180px;
}
.age > p:first-child > img,
.con > p:first-child > img{
  position: absolute;
  top:10px; left:10%;
  width:180px;
  animation:slideup2 2s linear;
  animation-iteration-count: infinite;
}
@keyframes slideup2{
  0%{top: 10px;}
  25%{top: 15px;}
  50%{top: 25px;}
  75%{top: 20px;}
  100%{top: 10px;}
}
.age > p:nth-child(2) > img,
.con > p:nth-child(2) > img{
  position: absolute;
  bottom:-30px; right:2%;
  animation:slideup3 2s linear;
  animation-iteration-count: infinite;
  z-index: 10;
}
@keyframes slideup3{
  0%{bottom: -30px;}
  25%{bottom: -35px;}
  50%{bottom: -45px;}
  75%{bottom: -40px;}
  100%{bottom: -30px;}
}
.age_title,
.con_title{text-align: center;}

.age_title > li,
.con_title > li{
  width:100%;
  line-height:130px;
}
.age01{
  width:1000px;
  display: flex;
  margin: 0px auto;
  justify-content: space-around;
  font-family: '나눔스퀘어라운드';
  padding-bottom: 30px;
}
.age01 > li{
  width:260px; height:130px;
  background: #fff;
  box-sizing: border-box;
  border-radius: 20px;
  transition: 0.3s;
  cursor: pointer;
}
.age01 > li > a{
  position: relative;
  top:50%; left:50%;
  transform: translate(-50%,-50%);
  width:180px;
  display: block;
}
.age01 > li > a > img{
  float: left;
  width:60px;
}
.age01 > li > a > p{
  position: relative;
  text-align: right;
}
.age01 > li > a > p:nth-child(2){
  font-size: 25px;
  font-weight: bold;
}
.baby:hover{border: 5px solid #6dd0f6}
.infant:hover{border: 5px solid #f3858e}
.step1:hover{border: 5px solid #75caba}
.step2:hover{border: 5px solid #fcaf17}
.step3:hover{border: 5px solid #8ac865}
.step4:hover{border: 5px solid #5e9fd6}
.step5:hover{border: 5px solid #8d55a3}
.step6:hover{border: 5px solid #ea5153}
.step7:hover{border: 5px solid #ff7a48}









/* 슬라이드 */
.slide{
  position: relative;
  width:100%; height:400px;
  margin:0px auto;
  overflow: hidden;
}
.slide > ul{display: flex;}
.slide > ul > li{
  position: relative;
  text-align: center;
  width:100%; height:400px;
}









/* 컨텐츠 바로가기 */
.con{
  position: relative;
  width:100%; height:380px;
  background: rgb(225, 255, 202);
  box-shadow: 0px 100px 100px rgba(225, 255, 202,.99);
  padding:70px 0;
}
.con > p:first-child > img{
  top:-15px;
  width:140px;
}
.con > p:nth-child(2) > img{
  right:8%;
  width:190px;
}
.con_img{
  z-index: 1000;
  width:1150px; height:250px;
  margin: 0px auto;
  display: flex;
  justify-content: space-around;
  font-size: 20px;
  text-align: center;
  font-family: '나눔스퀘어라운드';
  font-weight: bold;
  padding-top:30px;
}
.con_img > li{
  background-color: #fff;
  position: relative;
  top:-30px; 
  width:250px; height:200px;
  border:7px solid #ccc;
  box-sizing: border-box;
  border-radius:30px;
  transition: 0.3s;
}
.con_img > li > a{
  display: block;
  line-height: 30px;
  margin-top: 15px;
}
.con_img > li:hover{
  border:7px solid #239aff;
}
.fa-arrow-right{color: #239aff;}








/* 아웃트로 */
.outtro{
  position: relative;
  width:100%; height:500px;
  padding-top: 100px;
  overflow: hidden;
}
.outtro > ul > li:first-child{
  position: relative;
  top:25px;
  width:1200px; height:450px;
  text-align: center;
}
.ground{
  position: absolute;
  left:0px;
  width:100%; height:50px;
  background: #FFE15C;
  border-top-left-radius:50%;
  border-top-right-radius:50%;
}
.outtro > ul > li > img{
  position: absolute;
  top:150%; left:50%;
  transform: translate(-50%,-50%);
  z-index: 10;
}
.whale{margin: -70px 0 0 -170px;}
.dog{
  width:300px;
  margin:90px 0 0 -120px;
}
.cactus{
  margin-top:50px;
  margin-left:130px;
  height:400px;
}










/* 탑푸터 */
footer{
  background:#333;
  color:#d8d8d8;
}
footer a{color:#d8d8d8;}
.t_footer > ul{
  width:1200px; height: 50px;
  border-bottom: 1px solid #777;
  margin:0px auto;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.tf_txt{margin-left: 20px;}
.tf_txt > a{line-height: 50px;}
.tf_txt > a:nth-child(3){color: #fcaf17;}
.tf_img{
  margin-right: 20px;
  width:210px;
  justify-content: space-around;
  display: flex;
}
.tf_img > a{
  display: block;
  line-height:50px;
  height:38px;
  margin-top:10px;
}
.tf_img img{width:30px}









/* 바텀푸터 */
.b_footer{
  position: relative;
  height:160px;
}
.b_footer > ul{
  width:1200px; height:150px;
  margin: 0px auto;
  justify-content: space-between;
  display: flex;
}
.f_logo{
  width:300px; height:125px;
  margin-top:10px;
  text-align: center;
  border-right: 1px solid #464646;
}
.f_logo > a{
  display: block;
  margin-top:34px;
}
.f_txt{
  width:600px; height:130px;
  line-height:20px;
  font-size: 12px;
  margin-top: 10px;
  border-right: 1px solid #464646;
}
.address{
  display: block;
  margin-top: 20px;
}
.family{
  position: relative;
  top:10px; left:-20px;
  border:2px solid #777;
  width:200px; height:30px;
  text-indent: 5px;
  line-height: 30px;
  font-size: 12px;
  box-sizing: border-box;
  cursor: pointer;
}
.family > .fa-angle-down{
  position: absolute;
  top:7px; right:7px;
  font-size: 15px;
}
.family_sub{
  text-indent: 30px;
  scroll-behavior: auto;
  width:200px;
  margin: -3.5px 0 0 -2px;
  border: 2px solid #777;
  box-sizing: border-box;
}
.family_sub > li{
  width:200px; height:30px;
  line-height:30px;
  margin: 0 0 0 -2px;
}
.family_sub > li:first-child,
.family_sub > li:nth-child(2){
  border-bottom: 2px solid #777;
  box-sizing: border-box;
}
.family_sub > li > a{
  display: block;
  line-height: 30px;
  height: 30px;
  transition: 0.1s;
}
.family_sub > li > a:hover{
  background: #FFE15C;
  color: #333;
}









/* 마크업검사 */
.markup{
  position: relative;
  top:24px; left:220px;
}