/* =========================================================
   VISUAL
========================================================= */
.visual{position:relative;background:linear-gradient(135deg,#1a3a6e 0%,#2a5298 50%,#06c2c4 100%);overflow:hidden;}
.visual:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:
  radial-gradient(circle at 20% 30%,rgba(255,255,255,0.12) 0,transparent 40%),
  radial-gradient(circle at 80% 70%,rgba(6,194,196,0.25) 0,transparent 45%);}
.visual .wrap{height:552px;}
.visual_tit{position:absolute;top:56px;left:0;width:100%;text-align:center;color:#fff;z-index:2;}
.visual_tit h2{font-size:42px;font-weight:300;letter-spacing:-1px;line-height:1.3;}
.visual_tit h2 strong{display:block;font-weight:700;font-size:48px;margin-top:8px;}
.visual_tit p{margin-top:14px;font-size:17px;opacity:0.9;letter-spacing:1px;}

.visual_link{width:1072px;margin:0 auto;padding-top:220px;text-align:center;position:relative;z-index:2;}
.visual_link ul{display:inline-block;}
.visual_link ul li{float:left;width:200px;height:200px;margin:0 7px;border-radius:50%;}
.visual_link ul li a{display:block;width:100%;height:100%;border-radius:50%;
  transition:box-shadow 0.35s ease-in-out, background-color 0.35s ease-in-out;}
.visual_link ul li a:hover{background-color:rgba(21,21,21,0.3)!important;}
.visual_link ul li a .inner_wrap{display:block;padding:55px 0 70px;text-align:center;}
.visual_link ul li a .inner_wrap .icon{display:block;font-size:38px;margin-bottom:8px;line-height:1;}
.visual_link ul li a .inner_wrap .top{display:block;margin-bottom:5px;color:#fff;font-size:18px;line-height:22px;font-weight:300;}
.visual_link ul li a .inner_wrap .bottom{display:inline-block;padding:0 18px;color:#fff;font-size:20px;line-height:23px;font-weight:600;transition:padding 0.25s;}
.visual_link ul li a:hover .inner_wrap .bottom{padding-right:32px;}
.visual_link ul li a:hover .inner_wrap .bottom:after{content:' →';}

.visual_link ul li.link1 a{background-color:rgba(80,145,255,0.9);box-shadow:inset 0 0 0 212px rgba(80,145,255,0.9);}
.visual_link ul li.link1 a:hover{box-shadow:inset 0 0 0 15px rgba(80,145,255,0.9);}
.visual_link ul li.link2 a{background-color:rgba(5,193,194,0.9);box-shadow:inset 0 0 0 212px rgba(5,193,194,0.9);}
.visual_link ul li.link2 a:hover{box-shadow:inset 0 0 0 15px rgba(5,193,194,0.9);}
.visual_link ul li.link3 a{background-color:rgba(3,164,105,0.9);box-shadow:inset 0 0 0 212px rgba(3,164,105,0.9);}
.visual_link ul li.link3 a:hover{box-shadow:inset 0 0 0 15px rgba(3,164,105,0.9);}
.visual_link ul li.link4 a{background-color:rgba(210,98,106,0.9);box-shadow:inset 0 0 0 212px rgba(210,98,106,0.9);}
.visual_link ul li.link4 a:hover{box-shadow:inset 0 0 0 15px rgba(210,98,106,0.9);}
.visual_link ul li.link5 a{background-color:rgba(21,57,121,0.9);box-shadow:inset 0 0 0 212px rgba(21,57,121,0.9);}
.visual_link ul li.link5 a:hover{box-shadow:inset 0 0 0 15px rgba(21,57,121,0.9);}

/* =========================================================
   NOTICE
========================================================= */
.notice{position:absolute;left:0;bottom:0;width:100%;height:80px;background-color:rgba(21,21,21,0.6);z-index:3;}
.notice .wrap{height:80px;}
.notice h2{float:left;width:150px;padding:20px 0;background:#3b4962;font-size:20px;color:#fff;line-height:40px;text-align:center;font-weight:600;}
.notice .notice_list{float:left;width:920px;border-left:1px solid rgba(255,255,255,0.15);}
.notice .notice_list .notice_slide{padding:20px 50px;line-height:40px;}
.notice .notice_list .notice_slide .item{display:none;}
.notice .notice_list .notice_slide .item.active{display:block;}
.notice .notice_list .notice_slide a{display:block;float:left;overflow:hidden;width:70%;text-overflow:ellipsis;white-space:nowrap;font-size:17px;color:#fff;}
.notice .notice_list .notice_slide a:before{display:inline-block;content:'';width:5px;height:5px;margin:0 12px 4px 0;background:#06c2c4;border-radius:50%;vertical-align:middle;}
.notice .notice_list .notice_slide time{float:right;font-size:15px;color:rgba(255,255,255,0.85);}
.notice .notice_control{position:absolute;right:63px;top:0;width:62px;height:80px;border-left:1px solid rgba(197,197,197,0.2);border-right:1px solid rgba(197,197,197,0.2);}
.notice .notice_control button{display:block;overflow:hidden;width:100%;height:40px;color:#fff;font-size:14px;}
.notice .notice_control button.prev{height:39px;border-bottom:1px solid rgba(197,197,197,0.2);}
.notice .notice_control button:hover{background:rgba(255,255,255,0.08);}
.notice a.more{display:block;position:absolute;right:10px;top:20px;width:40px;height:40px;line-height:40px;text-align:center;color:#fff;font-size:24px;transition:transform 0.5s ease-in-out;}
.notice a.more:hover{transform:rotate(-90deg);}

/* =========================================================
   CONTENT (rowgroup)
========================================================= */
.cont_wrap{padding:60px 0;background:#f7f9fc;}

.rowgroup1{display:block;}
.rowgroup1:after{content:'';display:block;clear:both;}
.rowgroup1 li{position:relative;float:left;width:380px;margin-left:25px;border-radius:6px;overflow:hidden;}
.rowgroup1 li a{display:block;height:250px;color:#fff;text-align:center;position:relative;}
.rowgroup1 li a:before{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(255,255,255,0.1);opacity:0;transition:all 0.35s ease-in-out;}
.rowgroup1 li a:hover:before{opacity:1;}
.rowgroup1 li.link1{margin-left:0;}
.rowgroup1 li.link1 a{background:linear-gradient(135deg,#5091ff 0%,#3a6fd1 100%);}
.rowgroup1 li.link2 a{background:linear-gradient(135deg,#06c2c4 0%,#039ea0 100%);}
.rowgroup1 li.link3 a{background:linear-gradient(135deg,#05a66b 0%,#057a4f 100%);}

.rowgroup1 li a span{display:block;position:relative;}
.rowgroup1 li.link1 a span.text1{padding-top:55px;font-size:18px;line-height:22px;}
.rowgroup1 li.link1 a span.text2{padding-top:15px;font-size:32px;line-height:34px;font-weight:700;}
.rowgroup1 li.link1 a span.text3{display:inline-block;padding:16px 0 2px;border-bottom:1px solid #fff;font-size:15px;line-height:20px;margin-top:18px;transition:padding 0.25s;}
.rowgroup1 li.link1 a:hover span.text3{padding-right:22px;}
.rowgroup1 li.link1 a:hover span.text3:after{content:' →';}

.rowgroup1 li.link2 a .inner_box{width:240px;margin:0 auto;padding-top:40px;border:1px solid rgba(255,255,255,0.4);border-radius:4px;height:170px;margin-top:40px;}
.rowgroup1 li.link2 a .inner_box span.text1{padding-top:10px;font-size:18px;line-height:22px;}
.rowgroup1 li.link2 a .inner_box span.text2{padding-top:10px;font-size:30px;line-height:34px;font-weight:700;}

.rowgroup1 li.link3 a span.text1{padding-top:75px;font-size:32px;line-height:36px;font-weight:700;}
.rowgroup1 li.link3 a span.text2{padding-top:18px;font-size:15px;line-height:22px;opacity:0.9;}

.rowgroup2{margin-top:25px;}
.rowgroup2:after{content:'';display:block;clear:both;}
.rowgroup2 li{float:left;width:582px;margin-left:25px;border-radius:6px;overflow:hidden;}
.rowgroup2 li a{display:block;position:relative;height:250px;color:#fff;text-align:center;}
.rowgroup2 li.link1{margin-left:0;}
.rowgroup2 li.link1 a{padding-left:225px;background:linear-gradient(135deg,#c85f6c 0%,#9d3d49 100%);text-align:left;}
.rowgroup2 li.link2 a{background:linear-gradient(135deg,#153979 0%,#0a2354 100%);}
.rowgroup2 li.link1 a:before{content:'☎';position:absolute;left:65px;top:55px;width:110px;height:110px;line-height:110px;font-size:54px;background:rgba(255,255,255,0.15);border-radius:50%;text-align:center;}
.rowgroup2 li.link1 a span{display:inline-block;}
.rowgroup2 li.link1 a span.text1{padding-top:55px;font-size:20px;line-height:23px;display:block;}
.rowgroup2 li.link1 a span.text2{padding-top:14px;font-size:32px;line-height:36px;font-weight:700;display:block;}
.rowgroup2 li.link1 a span.text3{display:inline-block;width:155px;height:38px;margin-top:20px;padding-left:18px;border:1px solid rgba(255,255,255,0.7);font-size:14px;line-height:36px;border-radius:2px;transition:all 0.3s;}
.rowgroup2 li.link1 a span.text3:after{content:'›';float:right;margin-right:14px;}
.rowgroup2 li.link1 a:hover span.text3{background:rgba(255,255,255,0.15);border-color:#fff;}

.rowgroup2 li.link2 a:before{content:'';display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(21,21,21,0.25);opacity:0;transition:all 0.35s ease-in-out;}
.rowgroup2 li.link2 a:hover:before{opacity:1;}
.rowgroup2 li.link2 a span{display:block;position:relative;}
.rowgroup2 li.link2 a span.icon{display:block;font-size:54px;padding-top:48px;line-height:1;}
.rowgroup2 li.link2 a span.text1{padding:18px 25px 0;font-size:28px;line-height:32px;font-weight:700;}
.rowgroup2 li.link2 a span.text2{padding-top:14px;font-size:15px;line-height:20px;opacity:0.85;}

/* =========================================================
   RESPONSIVE (메인 전용)
========================================================= */
@media screen and (max-width:1200px){
  .visual_link{width:100%;}
  .rowgroup1 li{width:32%;margin-left:2%;}
  .rowgroup2 li{width:49%;margin-left:2%;}
  .notice .notice_list{width:calc(100% - 150px);}
}
@media screen and (max-width:800px){
  .visual .wrap{height:480px;}
  .visual_tit h2{font-size:32px;}
  .visual_tit h2 strong{font-size:36px;}
  .visual_link{padding-top:180px;}
  .visual_link ul li{width:140px;height:140px;margin:0 6px;}
  .visual_link ul li a .inner_wrap{padding:32px 0 45px;}
  .visual_link ul li a .inner_wrap .icon{font-size:26px;}
  .visual_link ul li a .inner_wrap .top{font-size:14px;}
  .visual_link ul li a .inner_wrap .bottom{font-size:16px;}
  .cont_wrap{padding:40px 0;}
  .rowgroup1 li a,.rowgroup2 li a{height:180px;}
  .rowgroup1 li.link1 a span.text2,.rowgroup1 li.link3 a span.text1,
  .rowgroup2 li.link1 a span.text2,.rowgroup2 li.link2 a span.text1{font-size:24px;line-height:28px;}
  .rowgroup1 li.link1 a span.text1{padding-top:35px;}
  .rowgroup1 li.link3 a span.text1{padding-top:55px;}
  .rowgroup1 li.link2 a .inner_box{width:80%;margin-top:30px;height:120px;padding-top:25px;}
  .rowgroup2 li.link1 a{padding-left:38%;}
  .rowgroup2 li.link1 a:before{left:20px;top:50px;width:85px;height:85px;line-height:85px;font-size:38px;}
  .rowgroup2 li.link1 a span.text1{padding-top:35px;font-size:16px;}
  .rowgroup2 li.link2 a span.icon{padding-top:28px;font-size:40px;}
}
@media screen and (max-width:640px){
  .visual .wrap{height:auto;padding-bottom:30px;}
  .visual_tit{position:relative;top:0;padding:40px 0 0;}
  .visual_tit h2{font-size:26px;}
  .visual_tit h2 strong{font-size:30px;}
  .visual_link{padding:30px 0 100px;}
  .visual_link ul li{width:46%;height:0;padding-bottom:46%;margin:0 2% 4%;position:relative;}
  .visual_link ul li a{position:absolute;top:0;left:0;}
  .notice h2{width:30%;font-size:16px;}
  .notice .notice_list{width:70%;padding-right:90px;}
  .notice .notice_list .notice_slide a{width:100%;font-size:14px;}
  .notice .notice_list .notice_slide time{display:none;}
  .rowgroup1 li,.rowgroup2 li{float:none;width:100%;margin:0 0 15px 0!important;}
}
