@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");

body { width:100%; height:100%; position:relative; background:#e5e5e5; }

.herder { display:block; width:100%; height:auto; background:rgb(56,56,56,0.5); position:absolute; top:0; z-index:998; }
.main { width:100%; height:100%; position:relative; overflow:hidden; }
.footer { width:100%; height:auto; background:#333; z-index:997; }
.inner { width:1280px; margin:0 auto; position:relative; }
.pc_view { display:block; }
.m_view { display:none; }

/* herder */
.top { display:flex; height:150px; align-items:center; justify-content:center; }

/* main */
.sect01 { display:flex; align-items:center; justify-content:flex-end; margin:80px 0; }
.box_red { position:absolute; left:0; z-index:10; width:450px; height:600px; background:#e33e41; padding:50px; box-sizing:border-box; display:flex; align-items:flex-end; }
.box_wh { position:relative; width:890px; background:#fff; padding:80px 80px 80px 140px; box-sizing:border-box; }
h2 { font-size:40px; font-weight:bold; margin-bottom:50px; }
h3 { font-size:34px; font-weight:bold; margin-bottom:50px; display:inline-block; }
h3::after { content:''; display:block; height:3px; background:#e33e41; }
.box_wh > p { font-size:26px; line-height:42px; margin-bottom:50px; word-break: keep-all; }
.w50 { width:49%; }
.sect02 { text-align:center; margin:80px 0; padding-top:40px; background:url('../images/logo_grey.png') no-repeat center top; }
.box_media { width:100%; position:relative; background:#fff; padding:60px 60px 10px 60px; box-sizing:border-box; margin-bottom:30px; }
.box_media ul { display:flex; flex-wrap:wrap; }
.box_media ul li { width:50%; text-align:left; display:flex; align-items:flex-start; margin-bottom:50px; word-break:keep-all; border-bottom:2px solid #fff; padding-bottom:20px; }
.box_media ul li:nth-child(1):hover { color:#e33e41; border-bottom:2px solid #e33e41; }
.box_media ul li:nth-child(2):hover { color:#e33e41; border-bottom:2px solid #e33e41; }
.box_media ul li img { flex:0 0 118px; }
.box_media ul li p { font-size:22px; padding:0 50px; box-sizing:border-box; }
.box_group { display:flex; justify-content:space-between; }
.box_edu { width:49%; position:relative; background:#fff; padding:60px; box-sizing:border-box; }
.box_edu ul { display:flex; flex-wrap:wrap; }
.box_edu ul li { text-align:left; display:flex; align-items:flex-start; word-break:keep-all; border-bottom:2px solid #fff; padding-bottom:20px; }
.box_edu ul li:nth-child(1):hover { color:#e33e41; border-bottom:2px solid #e33e41; }
.box_edu ul li img { flex:0 0 118px; }
.box_edu ul li p { font-size:22px; padding:0 50px; box-sizing:border-box; }
.box_it { width:49%; position:relative; background:#fff; padding:60px; box-sizing:border-box; }
.box_it ul { display:flex; flex-wrap:wrap; }
.box_it ul li { text-align:left; display:flex; align-items:flex-start; word-break:keep-all; }
.box_it ul li img { flex:0 0 118px; }
.box_it ul li p { font-size:22px; padding:0 50px; box-sizing:border-box; }
.sect03 { text-align:center; margin:80px 0; }
.mmap { position:relative; width:100%; height:600px; border:1px solid #f5f5f5; box-sizing:border-box; margin-bottom:120px; }
.map_logo { position:absolute; bottom:0; right:0; z-index:998; }

/* footer */
.bottom { display:flex; height:auto; justify-content:space-between; align-items:flex-start; padding:50px 0; }
.logo_footer { flex:0 0 135px; }
.copyright { flex:0 0 70%; color:#fff; font-size:20px; font-weight:400; }
.family { position:relative; width:200px; color:#fff; border:1px solid #767676; box-sizing:border-box; z-index:999; }
.family .site { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; height:34px; padding-left:10px; cursor:pointer; }
.family .icon { position:relative; display:inline-block; width:26px; height:34px; overflow:hidden; }
.family .icon:before { content:''; position:absolute; top:50%; left:50%; width:8px; height:8px; -webkit-transform:translate(-50%, -50%) rotate(45deg); transform:translate(-50%, 50%) rotate(45deg); margin-top:-5px; border-top:1px solid #e33e41; border-left:1px solid #e33e41; }
.family .icon.rotate:before { transform:translate(-50%, -50%) rotate(-135deg); -webkit-transform:translate(-50%, -50%) rotate(-135deg); margin-top:-4px; }
.family ul { position:absolute; left:-1px; bottom:35px; width:200px; padding:5px 20px; background:#333; border:1px solid #767676; box-sizing:border-box; border-bottom:0; display:none; }
.family ul li a { display:block; position:relative; padding:5px 0; font-size:16px; color:#fff; }
.family ul li a:hover{ color:#e33e41; }
.family ul.opacity { display:block; }


/* PC (해상도 1024px)*/ 
@media all and (min-width:1024px) and (max-width:1280px) {
  .inner { width:auto; margin:0 20px; }
  .box_red { width:35%; }
  .box_wh { width:70%; }
} 

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) {
  .inner { width:auto; margin:0 20px; }
  .sect01 { margin:40px 0; flex-direction:column; }
  .box_red { position:relative; width:100%; height:200px; padding:20px; }
  .box_wh { width:100%; padding:40px; }
  .box_wh > p { font-size:20px; line-height:32px; margin-bottom:20px; }
} 

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
  .inner { width:auto; margin:0 20px; }
  .pc_view { display:none; }
  .m_view { display:block; }

  .top { height:50px; }
  .top > img { width:40%; }

  .sect01 { margin:40px 0; flex-direction:column; }
  .box_red { position:relative; width:100%; height:200px; padding:20px; }
  .box_wh { width:100%; padding:40px; }
  .box_wh > p { font-size:20px; line-height:32px; margin-bottom:20px; }

  .sect02 { margin:40px 0; background:url('../images/logo_grey.png') no-repeat center top / 100%; }
  .box_media { padding:20px; }
  h2 { font-size:30px; margin-bottom:20px; }
  h3 { font-size:26px; margin-bottom:20px; }
  .box_media ul { flex-direction:column; }
  .box_media ul li { width:100%; }
  .box_media ul li img { width:25%; flex:unset; }
  .box_media ul li p { font-size:18px; padding:0 20px; }

  .box_group { display:block; }
  .box_edu { width:100%; padding:20px; margin-bottom:30px; }
  .box_edu ul li img { width:25%; flex:unset; }
  .box_edu ul li p { font-size:18px; padding:0 20px; }

  .mmap { height:400px; margin-bottom:60px; }
  .bottom { height:100%; padding:20px 0; flex-wrap:wrap; justify-content: space-between; }
  .logo_footer { flex:unset; width:30%; }
  .family { width:60%; }
  .copyright { flex:unset; font-size:18px; margin-top:20px; }
}

@media all and (max-width:630px) {
  .box_red > img { width:30%; }
}