@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sunflower:wght@300;500;700&display=swap');
@import url('reset.css');

/*html,body {overflow: hidden;}*/
/* skipToContent */
#skipToContent a {position:absolute; top:0; left:0; z-index:9999; width:100%; height:1px; margin-top:-1px; display:block; background-color:#3875c1; font-size:14px; font-weight:bold; color:#fff; line-height:1; text-align:center; overflow:hidden}
#skipToContent a:focus, #skipToContent a:active {margin-top:0; height:auto; padding:10px 0px}

/* common */
.img-responsive {display:block; width:100%; max-width:100%; height:auto}
.mobile{display:none}
a {text-decoration:none}
#wrap{width:100%;max-width:1920px;margin:0 auto;}
.none{display:none}
/* header */
header {width:97%; max-width:1820px; margin:0 auto;padding-top:2%; overflow:hidden;}

/*로고*/
.logo a{float:left; font-size:11px; font-weight:500; color:#b7b6b6; letter-spacing:0.15em}

/*메뉴*/
.vol{position:absolute; top:5%; right:10%;font-size:16px;color:#363636;text-align:right;font-weight:600;z-index:9999;font-family:'Open Sans', sans-serif;border-radius:10px; border:1px solid #363636; padding:10px 20px}
.btn_side{position:fixed; top:5.5%; right:2%;z-index:99999;font-family: 'Sunflower', sans-serif;font-size:18px; }
.menu_bar {display: inline-block; cursor: pointer;vertical-align:middle; margin-left:5px}
/*.bar1, .bar2, .bar3 {
  width: 29px;
  height: 2px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
  color:#363636;
}
*/
/*메뉴 펼침*/
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 100px;
  overflow:scroll
}

.sidenav a {
  padding: 17px 8px 17px 55px;
  text-decoration: none;
  font-size: 24px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #78cbef;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/*main title*/
.main_title{position:absolute; top:25%; right:10%;font-family:'Open Sans', sans-serif;font-size:54px; font-weight:700; color:#405072; letter-spacing:-0.03em; text-align:right; /*animation-name: example; animation-duration: 2s;*/}
.main_title span{font-family:'Noto Sans KR', sans-serif;font-size:24px; font-weight:500; }
.main_visual{background:#fff}
.main_visual img{padding-top:5%; width:100%;}


/*텍스트 움직임*/

@keyframes example {
 from   {top:15%; right:10%;opacity:0}
  to {top:25%; right:10%;opacity:1}
}


/*스토리*/
.story{position:relative;width:100%;background: #4a3e6a url(../img/main/story_bg.jpg) repeat-y 0 0;margin-top:-1px;padding:3% 0 5% 0} 
.story .main_icon{display:block;font-size:24px; font-weight:700; color:#78cbef;text-align:center; padding:0 0 10px 0}
.story .main_icon img{width:3%}
.story h3.main_icon_txt{color:#78cbef; font-size:24px; font-weight:700; text-align:center;}
.story h4{font-size:60px; font-weight:700; color:#fff;text-align:center; line-height:150%;margin:2% 0;letter-spacing:-0.01em}
.story p{font-size:22px; font-weight:500; color:#fff;text-align:center;line-height:150%}

/*트렌드*/
.trend{position:relative;overflow:hidden;width:76%;background: #f1eded;padding:6% 12%;} 
.trend .left {float:left;margin-right:12%;width:48%; }
.trend .right {float:left;width:40%;}
.trend .main_icon{display:block;font-size:24px; font-weight:700; color:#78cbef;text-align:left; padding:0 0 10px 0}
.trend .main_icon img{width:9%}
.trend h3.main_icon_txt{ color:#43b2e2; font-size:24px; font-weight:700; text-align:left;}
.trend h4{font-size:60px; font-weight:700; color:#333333;text-align:left; line-height:150%;margin:4% 0 6% 0;letter-spacing:-0.01em}
.trend p{font-size:22px; font-weight:500; color:#707070;text-align:left;line-height:150%;}
.trend .bg_img{position:absolute; bottom:-7px; right:0}

/*피플*/
.people{position:relative;overflow:hidden;width:76%;background:#fff;padding:6% 12% 6% 12%;} 
.people .left {position:relative;float:left;margin-right:12%;z-index:9999}
.people .right {position:absolute; bottom:0; right:0;z-index:9;}
.people .main_icon{display:block;font-size:24px; font-weight:700; color:#78cbef;text-align:left; padding:0 0 10px 0}
.people .main_icon img{width:8%}
.people h3.main_icon_txt{ color:#43b2e2; font-size:24px; font-weight:700; text-align:left;}
.people h4{font-size:60px; font-weight:700; color:#333333;text-align:left; line-height:150%;margin:4% 0 3% 0;letter-spacing:-0.01em}
.people h5{font-size:24px; font-weight:500; color:#363636;text-align:left; line-height:150%;margin:0 0 6% 0}
.people p{font-size:22px; font-weight:500; color:#707070;text-align:left;line-height:150%;}

/*cardnews*/
.cardnews{position:relative;overflow:hidden;width:76%;background: #4a3e6a;padding:1% 12% 6% 12%;margin-top:-1px;} 
.cardnews .left {float:left;margin-right:10%;width:48%;}
.cardnews .right {float:left;margin-top:5%;width:42%;}
.cardnews .main_icon{display:block;font-size:24px; font-weight:700; color:#78cbef;text-align:left; padding:0 0 10px 0}
.cardnews .main_icon img{width:9%}
.cardnews h3.main_icon_txt{color:#78cbef; font-size:24px; font-weight:700; text-align:left;}
.cardnews h4{font-size:60px; font-weight:700; color:#fff;text-align:left; line-height:150%;margin:4% 0 6% 0;letter-spacing:-0.03em}
.cardnews h4 span{color:#78cbef;letter-spacing:-0.03em}
.cardnews p{font-size:22px; font-weight:500; color:#fff;text-align:left;line-height:150%;}
.cardnews .bg_img{position:absolute; bottom:-7px; right:0}

/*이벤트*/
.event{width:100%;position:relative;background: #fff url(../img/main/event01_bg.jpg) no-repeat 0 0;padding:9% 0 5% 0; background-size:100%}
.event h4{font-size:72px; font-weight:400; color:#1a1a1a;text-align:center; line-height:130%;padding:0 0 2% 0;letter-spacing:-0.01em}
.event h4 span{ font-weight:700; color:#3bbde1;}
.event p{font-size:22px; font-weight:500; color:#464646;text-align:center;line-height:150%}

/*버튼*/
.button {width:5%;display:block;border-radius: 10px; background-color: #78cbef; border: none; color: #4b4264; text-align: center; font-size: 16px;font-weight:500; padding: 10px 2%; /*width: 160px;*/ transition: all 0.5s; cursor: pointer; margin:3% auto 0 auto}
.button a{color:#4b4264;text-decoration:none; display:block;}
.button span {cursor: pointer; display: inline-block; position: relative; transition: 0.5s;color:#4b4264;}
.button span:after {content: '→'; position: absolute; opacity:0; top: 0; right: -25px; transition: 0.5s;}
.button:hover span {padding-right: 20px;}
.button:hover span:after {opacity: 1; right: -5px;}

/*완쪽 정렬 버튼*/
.button02{width:17%;display:block;border-radius: 10px; background-color: #78cbef; border: none; color: #4b4264; text-align: center; font-size: 16px;font-weight:500; padding: 10px 6%; /*width: 160px;*/ transition: all 0.5s; cursor: pointer;margin:15% 0}
.button02 a{color:#4b4264;text-decoration:none}
.button02 span {cursor: pointer; display: inline-block; position: relative; transition: 0.5s;color:#4b4264;}
.button02 span:after {content: '→'; position: absolute; opacity:0; top: 0; right: -25px; transition: 0.5s;}
.button02:hover span {padding-right: 20px;}
.button02:hover span:after {opacity: 1; right: -5px;}

.button03{width:17%;display:block;border-radius: 10px; background-color: #78cbef; border: none; color: #4b4264; text-align: center; font-size: 16px;font-weight:500; padding: 10px 2%; /*width: 160px;*/ transition: all 0.5s; cursor: pointer;margin:15% 0}
.button03 a{color:#4b4264;text-decoration:none}
.button03 span {cursor: pointer; display: inline-block; position: relative; transition: 0.5s;color:#4b4264;}
.button03 span:after {content: '→'; position: absolute; opacity:0; top: 0; right: -25px; transition: 0.5s;}
.button03:hover span {padding-right: 20px;}
.button03:hover span:after {opacity: 1; right: -5px;}

/*일반콘텐츠*/
.con_box{overflow:hidden;width:78%;position:relative; padding:6% 11% 4% 11%;background:#fff}
.con_box .con01{display:block; float:left; width:31%; margin-right:3.5%;padding-bottom:4%}
.con_box .con01 p{background:#000}
.con_box .con01 a img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.con_box .con01 a:hover img {opacity:0.8}
.con_box h3.con_stitle{color:#43b2e2; font-size:20px; font-weight:700; text-align:left;margin:35px 0 25px 0;}
.con_box h4{color:#333333; font-size:30px; font-weight:700; text-align:left;line-height:130%;letter-spacing:-0.01em;margin: 20px 0}
.con_box h5{color:#636363; font-size:18px; font-weight:500; text-align:left;line-height:150%;}
.con_box .con02{display:block; float:left; width:65%; margin:0 0 10% 0;}
.con_box .con03{display:block; float:left; width:30.9%; margin-right:0;}
.con_box .bg_img02 {position:absolute; top:30%; right:2%;}
.con_box .bg_img02 img{width:85%}
.con_box .con02 p{background:#000}
.con_box .con02 a img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.con_box .con02 a:hover img {opacity:0.8}
.con_box .con03 p{background:#000}
.con_box .con03 a img {opacity:1; -webkit-transition:opacity 0.35s; transition:opacity 0.35s;}
.con_box .con03 a:hover img {opacity:0.8}

/*news*/
.news {position:relative;overflow:hidden;width:100%;background: #f1eded;}  
.news h3 {color:#43b2e2; font-size:24px; font-weight:700; text-align:center;padding:6% 0}
.news_list{width:80%;padding:0 12% 0 10%;}
.news .news_list ul{position:relative;display:block;overflow:hidden; width:90%;margin:0 auto;}
.news .news_list ul li{display:block; float:left; width:42%;background:url(../img/main/bullet01.png) no-repeat 0 50%; padding: 2% 0 2% 20px; border-bottom:1px solid #bababa;font-size:18px;color:#464646; font-weight:500; margin:0 3%;line-height:150%;}
.news .news_list ul li.top_border{border-top:1px solid #bababa;}
.news .news_list ul li.top_border02{border-top:1px solid #bababa;}
.news .news_list ul li a{color:#464646;}
.news .new_bot {clear:both;width:100%;margin-top:-4%;}

/*footer*/
footer{position:relative;clear:both;width:100%; background: #4a3e6a url(../img/main/story_bg.jpg) repeat-y 0 0;padding:2% 0 4% 0}
footer ul {width:15%;display:block;overflow:hidden; text-align:center;margin:0 auto;}
footer ul li{display:block; float:left;font-size:18px;color:#fff; font-weight:700;margin: 0 10%}
footer ul li a {color:#fff}
footer .add {color:#fff; text-align:center;margin:3% auto 0 auto;line-height:200%;font-size:12px;}
footer .footer_txt{width:100%;margin-top:2%;}
footer .footer_txt p{width:40%; margin:0 auto;border-bottom:1px solid #8e85a9;color:#c0b8d7; text-align:center; font-size:14px;line-height:200%;padding-bottom:2%}
footer .footer_txt p a{color:#c0b8d7;}
/*첫호 footer*/
footer .footer_01{position:relative;clear:both;width:100%;text-align:center;font-size:18px;color:#fff; font-weight:700;margin:2% 0 0 0}
footer .footer_01 a{color:#fff}

/*top*/
.top_btn{display:block;position:fixed; bottom:6%; right:1%;opacity:1;color:#111111;font-size:14px;}

@media screen and (max-width:1680px) {
	.main_title{right:7%; top:21%}
	.story .main_icon img{width:3%}
	.main_visual img{padding-top:8%}
	.story h3.main_icon_txt, .trend h3.main_icon_txt, .cardnews h3.main_icon_txt, .people h3.main_icon_txt{font-size:22px;}
	.story h4, .trend h4, .people h4{font-size:56px;}
	.story p, .trend p, .people p, .cardnews p{font-size:20px;}
	.trend{width:80%;padding:6% 10%}
	.cardnews h4{font-size:54px;}
	.event h4{font-size:68px;}
	.news .news_list ul li{font-size:16px;}
	footer ul {width:18%;}
	.button{width:8%;}
	.button02, .button03{width:20%;}
	footer .footer_txt p{width:50%;}
}
@media screen and (max-width:1440px) {
	.vol{padding:8px 15px;}
	.main_title{font-size:48px;top:22%}
	.main_title span{font-size:20px;}
	.story h4, .trend h4, .people h4{font-size:48px;}
	.story p, .trend p, .people p, .cardnews p{font-size:18px;}
	.cardnews h4{font-size:45px;}
	.event h4{font-size:58px;}
	.cardnews p{font-size:18px;}
	.con_box h3.con_stitle{font-size:18px;}
	.con_box h4{font-size:24px;}
	.con_box h5{font-size:16px;}
	.news_list{width:90%;padding:0 6% 0 6%;}
	footer ul {width:20%;}
	footer ul li{font-size:16px; font-weight:500;}
}

/*노트북*/
@media screen and (max-width:1366px) {
	.main_title{top:20%}
	.story h3.main_icon_txt, .trend h3.main_icon_txt, .cardnews h3.main_icon_txt, .people h3.main_icon_txt{font-size:18px;}
	.story h4, .trend h4, .people h4{font-size:42px;}
	.story p, .trend p, .people p, .cardnews p{font-size:18px;}
	.cardnews h4{font-size:45px;}
	.people h5{font-size:22px;}
	.trend, .cardnews{width:83%;padding:6% 8.5%}
	.news .news_list ul li{font-size:14px}
}

@media screen and (max-width:1280px) {
	.vol{top:3%}
	.btn_side{top:4%;font-size:14px;}
	.main_title{font-size:42px;top:18%}
	.main_title span{font-size:18px;}
	.event h4{font-size:52px;}
	.event p{font-size:18px;}
	.news .news_list ul li{width:44%;margin:0 1%}
	footer .footer_txt p{width:70%;}
}
/*아이패드 미니-가로*/
@media screen and (max-width:1024px) {
	.vol{font-size:14px; padding:8px 15px;right:14%;top:3%;}
	.btn_side{top:3.5%;font-size:14px;}
	.none_mobile{display:none;}
	.logo a{font-size:9px;padding: 12px 12px}
	.logo img{width:82%}
	.main_title{font-size:38px;top:15%}
	.main_title span{font-size:18px;}
	.story h4, .trend h4, .people h4{font-size:38px;}
	.cardnews h4{font-size:40px;}
	.people h5{font-size:18px;}
	.story p, .trend p, .cardnews p{font-size:16px;}
	.trend .left{margin-right:7%}
	.trend .right{width:45%}
	.bg_img{width:30%}
	.people p{font-size:16px; width:70%}
	.cardnews .left {margin-right:7%;}
	.cardnews .right{width:45%;}
	.event h4{font-size:42px;}
	.con_box h3.con_stitle{font-size:16px;}
	.con_box h4{font-size:20px;}
	.con_box h5{font-size:14px;}
	.con_box .bg_img02{width:10%;}
	.con_box .con02{margin-bottom:13%}
	.news_list{width:95%;padding:0 2% 0 3%;}
	.news .news_list ul li{font-size:12px;}
	footer ul li{font-size:14px;}
	footer .add {font-size:11px;}
}
@media screen and (max-width:960px) {
	.cardnews h4{font-size:38px;}
	footer ul{width:25%;}
	.button, .button02, .button03{font-size:14px;}
	footer .footer_txt p{font-size:12px}
}

/*아이패드 미니-세로, 아이폰 XS-가로*/
@media screen and (max-width:768px) {
	.vol{right:10%}
	.main_title{font-size:45px;top:19%;text-align:center;right:10%;}
	.main_title span{font-size:22px;}
	.main_visual img{padding-top:40%}
	.story h4, .trend h4, .people h4{font-size:32px;}
	.story h3.main_icon_txt, .trend h3.main_icon_txt, .cardnews h3.main_icon_txt, .people h3.main_icon_txt{font-size:16px;}
	.story p, .people p, .trend p{font-size:14px;}
	.trend .left{margin-right:4%}
	.trend .right{width:48%}
	.trend{width:94%;padding:6% 3%}
	.cardnews h4{font-size:32px;}
	.cardnews{width:94%;padding:2% 3% 5% 3%}
	.event h4{font-size:48px;}
	.event p{font-size:20px;}
	.con_box{width:85%;padding:6% 7% 4% 7%}
	.con_box h3.con_stitle{font-size:14px;font-weight:500;}
	.con_box h4{font-size:18px;margin: 5px 0;font-weight:500;}
	.con_box h5{font-size:12px;}
	.brmobile{display:none}
	.news h3{font-size:18px;}
	.news .news_list ul li{width:90%;font-size:14px;}
	.news .news_list ul li.top_border02{border-top:0}
	.event{width:100%;position:relative;background: #fff url(../img/main/event01_bg_m.jpg) no-repeat 0 0;padding:15% 0 20% 0; background-size:100%}
	.none_mobile{display:none}     
	.mobile{display:block}
	.button{width:15%}
	.button02{width:30%}
	footer ul{width:28%;}
	.story{margin-top:-2px;padding:15% 0 10% 0}
	footer .footer_txt p{width:80%;}
}

@media screen and (max-width:570px) {
	.main_title{font-size:32px;right:10%; top:15%;}
	.story .main_icon img{width:4%}
	.story h4, .trend h4, .people h4{font-size:28px;}
	.button, .button02, .button03{width:30%; font-size:14px;}
	.trend{width:80%;padding:10% 10%}
	.trend .left, .trend .right{width:100%}
	.trend .main_icon{margin-top:5%; padding:0 0 3px 0}
	.bg_img{width:40%}
	.people .main_icon{width:100%;padding:0 0 3px 0}
	.people {width:84%;padding:6% 8% 6% 8%;}
	.people .left{margin-right:0}
	.cardnews{width:80%;padding:5% 10% 10% 10%}
	.cardnews h4{font-size:32px;}
	.cardnews .left, .cardnews .right{width:100%}
	.con_box .con01, .con_box .con02, .con_box .con03{width:100%}
	footer ul{width:40%;}
	footer img{width:30%}
	footer .add{font-size:10px}
	.con_box h3.con_stitle{font-size:14px;font-weight:500;margin:15px 0 15px 0;}
	.con_box h4{font-size:18px;margin: 0 0 5px 0;font-weight:500;}
	.con_box h5{font-size:12px;}
	.story p, .people p, .trend p{font-size:12px;}
	.bg_img02{display:none}
	.story{margin-top:-2px}
	
}

/*아이폰XS, 아이폰6+, */
@media screen and (max-width:425px) {
	.logo a{font-size:11px;letter-spacing:-0.04em}
	.logo img{width:70%}
	.vol{font-size:11px; padding:5px 15px;right:12%;top:2.5%;border-radius:6px;}
	.btn_side{top:3%;font-size:12px;}
	.btn_side img{width:80%}
	.main_title{font-size:24px;right:10%;}
	.main_title span{font-size:14px;}
	.story h4, .trend h4, .people h4, .cardnews h4{font-size:20px;}
	.story h3.main_icon_txt, .trend h3.main_icon_txt, .cardnews h3.main_icon_txt, .people h3.main_icon_txt{font-size:14px; font-weight:500;}
	.story p, .people p, .trend p{font-size:12px;}
	.event h4{font-size:34px;}
	.event p{font-size:14px}
	.con_box img{margin-top:5%;}
	.con_box .con02{margin-bottom:2%}
	.con_box .con03{padding-bottom:8%}
	.news h3{padding:10% 0}
	.news .news_list ul li{ padding: 2% 0 2% 10px;font-size:12px;}
	footer ul{width:50%;}
	.top_btn{right:3px}
	.top_btn img{width:70%;right:1%}
	.main_visual img{padding-top:30%}
	.mobile425{display:none}
}

/*아이폰XS*/
@media screen and (max-width:387px) {
	.logo a{font-size:10px;letter-spacing:-0.1em;}
	.btn_side{top:3%;font-size:12px;}
	.btn_side img{width:80%}
	.sidenav a {padding: 15px 8px 15px 55px; text-decoration: none; font-size: 18px;}
	.sidenav {padding-top: 60px;}
	.main_title{right:6%}
	footer ul{width:60%;}
}

@media screen and (max-width:320px) {
}