@charset "utf-8";

/* 메인 레이아웃 시작 */
body {padding-left:205px;}
#top_layout {position: fixed; left:0; top:0; width: 205px;height: 100%; border-right:1px solid #e2e2e2; }
#top_layout .top_wrap {}
#top_layout .top_wrap .logo_wrap {position:relative;top: 0;width: 100%;padding: 50px 0;}
#top_layout .top_wrap .logo_wrap a {width:126px;height: 119px;margin: 0 auto;}
#top_layout .top_wrap .logo_wrap a span {background:url(/clean/img/common/logo.png)no-repeat;}
#top_layout .top_wrap .utile_wrap {position:relative;height: 45px;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;}
#top_layout .top_wrap .utile_wrap li.pc { width: 100%;}
#top_layout .top_wrap .utile_wrap li.pc a {line-height: 43px;background: none;color: #000;font-size: 15px;}
#top_layout .top_wrap .utile_wrap li.pc a i {margin-right:10px;}
#gnb_layout {position: relative;top: 0;height:calc(100% - 247px) !important;}
#gnb {height:100%;border: none;}
#gnb_layout .layout {padding:60px 0 0;}
#gnb_layout .depth1_ul>li {display:block;float:none;height: 50px;margin:0 0 30px;padding:0;}
#gnb_layout .depth1_ul>li>a {padding:0;font-size: 17px;font-weight: 500;}
#gnb_layout .depth1_ul>li>a:before,
#gnb_layout .depth1_ul>li>a:after {display:none;}
#gnb_layout .depth1_ul>li>a span {line-height:50px;}
#gnb_layout .depth1_ul>li>a span em {display:inline-block; width:50px; height:50px; margin-right:15px;border-radius:50%; background-color:#ebebeb; background-image:url(/clean/img/common/gnb_icon.png); vertical-align:middle;transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;}
#gnb_layout .depth1_ul>li.n1>a span em {background-position:0 0 ;}
#gnb_layout .depth1_ul>li.n2>a span em {background-position:0 -50px ;}
#gnb_layout .depth1_ul>li.n3>a span em {background-position:0 -100px ;}
#gnb_layout .depth1_ul>li.n4>a span em {background-position:0 -150px ;}
#gnb_layout .depth1_ul>li.n5>a span em {background-position:0 -200px ;}
#gnb_layout .depth1_ul>li.n6>a span em {background-position:0 -250px ;}
#gnb_layout .depth1_ul>li>a:hover span em,
#gnb_layout .depth1_ul>li>a:focus span em {background-color: #ffde28;}

#gnb_layout .depth1_ul > li .item,
#gnb_layout .depth1_ul>li>a.current span:before,
#top_layout.on + .gnb_bg {display: none !important;}

@media screen and (max-width:1484px){
    .layout {max-width:100%;padding: 0 20px;}
    .top_link:before {left:auto;right: 0;width: 110px;margin:0;}
}
@media screen and (max-width:1279px){
    body {padding-left:0;}
    #top_layout {position: relative; width: 100%;height: 75px;}
    #top_layout .top_wrap {max-width:100%; padding:0 20px;}
    #top_layout .top_wrap .logo_wrap {position: absolute;left:20px;top: 26.5px;width: auto;padding: 0;}
    #top_layout .top_wrap .logo_wrap a {display:block;width: 299px;height:35px;margin: 0;}
    #top_layout .top_wrap .logo_wrap a span {background:url(/clean/img/common/logo_sub.png)no-repeat;background-size: 100%;}
    #top_layout .top_wrap .utile_wrap {position: absolute;right: 20px;height: 75px;border: none;}
}
@media screen and (max-width:767px){
    .layout {max-width:100%;padding: 0 15px;}

    #top_layout .top_wrap .utile_wrap {right:15px;}
    #top_layout .top_wrap .logo_wrap {left:15px;}
}
@media screen and (max-width:580px){
    .top_link .top_list1 { display: none;}
    #top_layout .top_wrap .logo_wrap {top: 30px;}
    #top_layout .top_wrap .logo_wrap a {display:block;width: 230px;height: 27px;}
    #top_layout .top_wrap .logo_wrap a span {}    
}

/* 메인 레이아웃 끝 */


/* 메인 비주얼 */
.mv_motion{}
.mv_motion span{position:absolute;z-index:1;display:inline-block;}
.mv_motion .cloud1{top:300px;left:50%;margin-left:-880px;width:170px;height:62px;background:url(../img/main/arti_1.png) no-repeat;}
.mv_motion .cloud2{top:109px;left:50%;margin-left: -920px;width: 251px;height: 91px;background:url(../img/main/arti_2.png) no-repeat;animation-name: anim4;animation-duration: 4.5s;animation-iteration-count: infinite;}
.mv_motion .cloud3{top:80px;left: 30%;margin-left:600px;width: 307px;height: 125px;background:url(../img/main/arti_3.png) no-repeat;animation-name: anim3;animation-duration: 6s;animation-iteration-count: infinite;}
.mv_motion .cloud4{top: 179px;left:50%;margin-left: -260px;width: 290px;height: 80px;background:url(../img/main/arti_4.png) no-repeat;animation-name: anim2;animation-duration: 5.5s;animation-iteration-count: infinite;}
.mv_motion .cloud5{top:360px;left:50%;margin-left:770px;width:197px;height:71px;background:url(../img/main/arti_6.png) no-repeat;}
.mv_motion .star1{top: 110px;left:50%;margin-left: 160px;width:30px;height:28px;background:url(../img/main/arti_5.png) no-repeat;}
.mv_motion .star2{top: 290px;left:50%;margin-left: 170px;width:30px;height:28px;background:url(../img/main/arti_5.png) no-repeat;animation-name: anim5;animation-duration: 2s;animation-iteration-count: infinite;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.mv_motion .star3{top: 150px;left:50%;margin-left: 250px;width:30px;height:28px;background:url(../img/main/arti_5.png) no-repeat;animation-name: anim5;animation-duration: 4s;animation-iteration-count: infinite;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.mv_motion .star4{top: 395px;left:50%;margin-left: -10px;width:30px;height:28px;background:url(../img/main/arti_5.png) no-repeat;}
.mv_motion .star5{top: 500px;left:50%;margin-left: -30px;width:30px;height:28px;background:url(../img/main/arti_5.png) no-repeat;animation-name: anim5;animation-duration: 4s;animation-iteration-count: infinite;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.mv_motion .star6{top: 520px;left:50%;margin-left: -210px;width:30px;height:28px;background:url(../img/main/arti_5.png) no-repeat;animation-name: anim5;animation-duration: 3s;animation-iteration-count: infinite;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.mv_motion .star7{top: 175px;left:50%;margin-left: 550px;width:30px;height:28px;background:url(../img/main/arti_5.png) no-repeat;}
.mv_motion .star8{top: 350px;left:50%;margin-left: 620px;width:30px;height:28px;background:url(../img/main/arti_5.png) no-repeat;animation-name: anim5;animation-duration: 3s;animation-iteration-count: infinite;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
/* .mv_motion .earth1{opacity:0;z-index:0;bottom:-280px;right:50%;margin-right:-650px;width:608px;height:318px;background:url(../img/main/arti_7.png) no-repeat;} */
.mv_motion .earth2{opacity:0;z-index:0;bottom:-280px;right:50%;z-index: 1;margin-right: -470px;width:478px;height:341px;background:url(../img/main/arti_8.png) no-repeat;}
.mv_motion .earth2.on{animation-name: anim6;animation-duration: 4.5s;animation-iteration-count: infinite;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}

@keyframes anim1 {
  0% {transform: translateX(0); -webkit-transform: translateX(0);}
  50% {transform: translateX(20px); -webkit-transform: translateX(20px);}
  100% {transform: translateX(0); -webkit-transform: translateX(0);}
}

@keyframes anim2 {
  0% {transform: translateX(0); -webkit-transform: translateX(0);}
  50% {transform: translateX(-40px); -webkit-transform: translateX(-40px);}
  100% {transform: translateX(0); -webkit-transform: translateX(0);}
}

@keyframes anim3 {
  0% {transform: translateX(0); -webkit-transform: translateX(0);}
  50% {transform: translateX(60px); -webkit-transform: translateX(60px);}
  100% {transform: translateX(0); -webkit-transform: translateX(0);}
}

@keyframes anim4 {
  0% {transform: translateY(0); -webkit-transform: translateY(0);}
  50% {transform: translateY(20px); -webkit-transform: translateY(20px);}
  100% {transform: translateY(0); -webkit-transform: translateY(0);}
}

@keyframes anim5 {
  0% {transform: scale(0); -webkit-transform: scale(0);}
  50% {transform: scale(1,1); -webkit-transform: scale(1,1);}
  100% {transform: scale(0); -webkit-transform: scale(0);}
}

@keyframes anim6 {
  0% {transform: translateY(-70px); -webkit-transform: translateY(-70px);}
  50% {transform: translateY(-100px); -webkit-transform: translateY(-100px);}
  100% {transform: translateY(-70px); -webkit-transform: translateY(-70px);}
}


.wrapper{position:relative;width:1200px;margin:0 auto;}

#mvisual{position:relative;width:100%;height:685px;background-color: #e0f5d8;padding-top:155px;overflow:hidden;}
#mvisual:after{position:absolute;bottom:-18px;left:0;z-index:0;content:"";display:inline-block;width:100%;height:0;padding-top: 21%;background:url(../img/main/mvisual_bottom.png) no-repeat;background-size:contain;}
#mvisual .mvisual_txt{position:relative;z-index:1;}
#mvisual .mvisual_txt h2{display:block;width: 640px;height: 114px;background:url(../img/main/mv_title.png) no-repeat;vertical-align:middle;font-size:0;text-indent:-9999px;margin-bottom:15px;}
#mvisual .mvisual_txt p{font-size:18px;font-weight:400;color:#000;margin-bottom:35px;word-break: keep-all;}
#mvisual .mvisual_txt .mv_btn{display:inline-block;margin-bottom:25px;}
#mvisual .mvisual_txt .mv_btn a{float: left;display:inline-block;margin-left:8px;width: 210px;padding:20px 0;text-align:center;color:#000;font-size:18px;font-weight:400;border-radius:5px;box-shadow: 1px 1px 3px #999;background-color: #fff;}
#mvisual .mvisual_txt .mv_btn a:first-child{margin-left:0;}
#mvisual .mvisual_txt .mv_btn a:hover,
#mvisual .mvisual_txt .mv_btn a:focus{background-color: #3d51b0;color:#fff;}
#mvisual .mvisual_txt .mv_btn2{display:block;}
#mvisual .mvisual_txt .mv_btn2 a{display:inline-block;width:100%;height:100%;font-weight: 600;font-size:18px;color: #172a85;text-align:left;letter-spacing: -1px;vertical-align:middle;}
#mvisual .mvisual_txt .mv_btn2 a:before{content: "";display:inline-block;width:58px;height:58px;background: url(../img/main/main-ir.png) 0 -526px no-repeat;vertical-align:middle;margin-right:10px;}
#mvisual .mvisual_txt .mv_btn2 a:after{content: "";display:inline-block;width:7px;height:13px;background: url(../img/main/main-ir.png) -67px -526px no-repeat;vertical-align:middle;margin-left:13px;}

#cont1{position:relative;height:702px;background: #135a42 url(../img/main/cont1_bg_patt.png) repeat;text-align:center;}
#cont1 .wrapper:before{position:absolute;top:-106px;left:2px;content:"";display:inline-block;width:90px;height:106px;background:url(../img/main/cont1_before.png) no-repeat;vertical-align:middle;}
#cont1 .wrapper:after{position:absolute;bottom:-122px;right:-32px;z-index:2;content:"";display:inline-block;width:156px;height:122px;background:url(../img/main/cont1_flow_end.png) no-repeat;vertical-align:middle;}
#cont1 .wrapper{height:100%;background:url(../img/main/cont1_flow.png) center center no-repeat;}
#cont1 .cont_txt{display:block;padding-top:80px;margin:0 auto;text-align: center;}
#cont1 .cont_txt h2{display:block;font-family: 'bm';font-size:38px;color:#fff;margin-bottom:5px;}
#cont1 .cont_txt h2:before{content:"";display:block;width: 49px;height: 45px;background:url(../img/main/main-ir.png) 0 -136px no-repeat;vertical-align:middle;margin:0 auto 10px;}
#cont1 .cont_txt p{font-size:16px;color:#fff;}
#cont1 ul{position:relative;display:inline-block;margin:50px auto 0;}
#cont1 ul li{position:relative;top:150px;float: left; margin-left:115px;font-family:'bm';font-size:21px;color:#fff;}
#cont1 ul li:before{content:"";display:block;width:165px;height:165px;background:url(../img/main/main-ir.png) no-repeat;vertical-align:middle;margin:0 auto 10px;border-radius:50%;box-shadow: 1px 1px 3px rgba(0,0,0,0.3)}
#cont1 ul li:first-child:before{background-position: 0 -226px;}
#cont1 ul li.step2:before{background-position: -170px -226px;}
#cont1 ul li.step3:before{background-position: -340px -226px;}
#cont1 ul li.step4:before{background-position: -510px -226px;}
#cont1 ul li span{display:block;font-family:'nsk_m';font-size:16px;color:#fff;line-height:1.2;}

#cont2{position:relative;background:#fefbdc url(../img/main/cont2_bottom_bg.png) center center no-repeat;background-size:cover;text-align: center;padding-bottom:155px;}
#cont2 .cont_txt{clear:both;display:block;padding-top:73px;margin:0 auto;text-align: center;}
#cont2 .cont_txt h2{display:block;font-family: 'bm';font-size:38px;color:#48381e;}
#cont2 .cont_txt h2:before{content:"";display:block;width: 41px;height: 36px;background:url(../img/main/main-ir.png) -67px -136px no-repeat;vertical-align:middle;margin:0 auto 15px;}
#cont2 .cont_txt p{font-size:16px;color:#48381e;font-weight:400;letter-spacing:-1px;margin-bottom:35px;}
#cont2 .inner{position:relative;float: left;display:inline-block;width:49%;height:335px;margin-left:2%;text-align:left;}
#cont2 .notice{margin-left:0;background-color:#fff;padding:40px 45px;}
#cont2 .notice h3{display:block;font-family: 'bm';font-weight:normal;font-size:24px;color:#333;padding-bottom:20px;border-bottom:1px dashed #ddd;}
#cont2 .notice ul{width:100%;height:100%;overflow:hidden;}
#cont2 .notice ul li{clear:both;position:relative;display:block;text-align:left;margin-bottom:5px;line-height:22px;color:#666;font-size:14px;padding-left:15px;}
#cont2 .notice ul li:before{position:absolute;top:9px;left:0;content:"";display:inline-block;width:9px;height:3px;background-color:#ff7200;}
#cont2 .notice ul li a{display:inline-block;width:75%;color:#333;font-size:15px;text-align:left;white-space:nowrap;word-break: break-all;text-overflow:ellipsis;overflow:hidden;line-height: 22px;}
#cont2 .notice ul li a .date{position:absolute;top:0;right:0;}
#cont2 .notice ul li a:hover,
#cont2 .notice ul li a:focus{text-decoration:underline;}
#cont2 .notice ul li a b{display:inline-block;font-family:'nsk';font-weight:400;}
#cont2 .notice ul li.fir{padding:15px 0 30px 105px;border-bottom:1px dashed #ddd;margin-bottom:15px;}
#cont2 .notice ul li.fir:before{position:absolute;top:10px;left:0;content:"";display:inline-block;width:85px;height:85px;background:url(../img/main/main-ir.png) -112px -136px no-repeat;vertical-align:middle;}
#cont2 .notice ul li.fir a{width:100%;white-space: normal;text-overflow: inherit;}
#cont2 .notice ul li.fir a b{display:block;font-size:18px;margin-bottom:5px;color:#333;white-space:nowrap;word-break:break-all;text-overflow:ellipsis;overflow:hidden;}
#cont2 .notice ul li.fir a .new_txt{display:inline-block;height:41px;font-size:15px;line-height:1.3;overflow:hidden;}
#cont2 .notice ul li.fir a .date{position:absolute;top:auto;bottom:7px;right:0;}
#cont2 .notice .more{position:absolute;top:40px;right:40px;display:inline-block;width:30px;height:30px;background:url(../img/main/main-ir.png) -124px -527px no-repeat;font-size:0;text-indent:-9999px;}

#cont2 .quick_link{background-color:#f9c33c;padding:40px 45px;}
#cont2 .quick_link h3{display:block;font-family: 'bm';font-weight:normal;font-size:24px;color:#333;padding-bottom:60px;}
#cont2 .quick_link ul{position:relative;width:100%;}
#cont2 .quick_link ul li{float: left;width:99px;height: 99px;margin-left:33px;}
#cont2 .quick_link ul li:first-child{margin-left:0;}
#cont2 .quick_link ul li a{display:inline-block;width:100%;height:100%;text-align: center;font-size:18px;font-weight: 600;color:#383838;}
#cont2 .quick_link ul li a .ico{display:block;width:99px;height:99px;background-color:#fff;border-radius:50%;text-align:center;margin:0 auto 10px}
#cont2 .quick_link ul li a .ico:before{content:"";display:inline-block;height:60px;background:url(../img/main/main-ir.png) no-repeat;vertical-align:middle;margin:20px auto;}
#cont2 .quick_link ul li a .ico.ico1:before{width:44px;background-position:0 -396px;}
#cont2 .quick_link ul li a .ico.ico2:before{width:47px;background-position:-69px -396px;}
#cont2 .quick_link ul li a .ico.ico3:before{width:28px;background-position:-124px -396px;}
#cont2 .quick_link ul li a .ico.ico4:before{width:33px;background-position:-207px -396px;}
#cont2 .quick_link .more{position:absolute;top:40px;right:40px;display:inline-block;width:30px;height:30px;background:url(../img/main/main-ir.png) -207px -527px no-repeat;font-size:0;text-indent:-9999px;}


#foot_layout .foot_wrap .utile_wrap li a {color:#999a9e;}

@media(max-width: 1499px){
  #foot_layout .foot_wrap{width:100%;}
  .wrapper{width:100%;padding:0 40px;}
  #cont1{height: 880px;}
  #cont1 .wrapper{background:url(../img/main/cont1_flow_1280.png) center center no-repeat;}
  #cont1 .wrapper:before{left: 50%;margin-left: -500px;}
  #cont1 .wrapper:after{right:auto;left: 50%;margin-left: -532px;}
  #cont1 ul{position:relative; width:605px;margin:20px auto 0;}
  #cont1 ul li{margin-left:275px;margin-bottom:50px;height: 240px;}
  #cont1 ul li:nth-child(1){margin-left:0;}
  #cont1 ul li:nth-child(3){position:absolute;right:0;margin:260px 0 0;}
  #cont1 ul li:nth-child(4){position:absolute;left:0; margin:260px 0 0;}
  #cont2 .quick_link ul li{width:24.2%;margin-left:1%;}
  #cont2 .quick_link ul li a{font-size:16px;}
}

@media(max-width: 1279px){
  .mv_motion{display:none;}
  #mvisual{height:684px;background:url(../img/main/mvisual_bg_768.jpg) 50% 50% no-repeat;background-size:cover;}
  #mvisual:after{display:none;}
  #mvisual .mvisual_txt{text-align: center;}
  #mvisual .mvisual_txt h2{width: 592px;height: 119px;margin:0 auto 15px;background:url(../img/main/mv_title_768.png) no-repeat;background-size:contain;}
  #mvisual .mvisual_txt .mv_btn2,
  #mvisual .mvisual_txt .mv_btn2 a{width:auto;}
  #cont1{height: 834px;}
  #cont1 .wrapper{background:url(../img/main/cont1_flow_768.png) center center no-repeat;}
  #cont1 .wrapper:before {left: 50%;margin-left: -334px;}
  #cont1 .wrapper:after {left: 50%;margin-left: -367px;}
  #cont1 ul {width: 480px;margin: 20px auto 0;}
  #cont1 ul li{margin-left:150px;}
  #cont2 .notice ul li.fir{padding-left: 0;}
  #cont2 .notice ul li.fir:before{display:none;}
  #cont2 .quick_link h3{padding-bottom:20px;}
  #cont2 .quick_link ul li{width:50%;height:115px;margin-left:0;}
  #cont2 .quick_link ul li a .ico{width:74px;height:74px;margin:0 auto 5px;}
  #cont2 .quick_link ul li a .ico:before{height:45px;margin:15px auto;}
  #cont2 .quick_link ul li a .ico.ico1:before{width:33px;background-position:0 -474px;}
  #cont2 .quick_link ul li a .ico.ico2:before{width:35px;background-position:-69px -474px;}
  #cont2 .quick_link ul li a .ico.ico3:before{width:38px;background-position:-124px -474px;}
  #cont2 .quick_link ul li a .ico.ico4:before{width:25px;background-position:-207px -474px;}
}

@media(max-width: 767px){
  .wrapper{padding: 0 20px;}
  #mvisual{height:423px;background:url(../img/main/mvisual_bg_320.jpg) 50% 50% no-repeat;background-size:cover;padding-top:90px;}
  #mvisual .mvisual_txt h2{width: 296px;height:60px;margin:0 auto 10px;}
  #mvisual .mvisual_txt p{max-width:300px;margin:0 auto 15px;line-height:1.3;font-size:14px;}
  #mvisual .mvisual_txt .mv_btn a{width:128px;padding:10px 0;font-size:14px;}
  #mvisual .mvisual_txt .mv_btn2 a{font-size:14px;}
  #cont1{height: 1024px;}
  #cont1 .wrapper{background:url(../img/main/cont1_flow_320.png) center center no-repeat;}
  #cont1 .wrapper:before{top:-50px;width:43px;height:50px;background-size:contain;margin-left: -129px;}
  #cont1 .wrapper:after{bottom:-57px;width:73px;height:57px;background-size: contain; margin-left: -143px;}
  #cont1 .cont_txt{padding-top:45px;}
  #cont1 .cont_txt h2:before{width:34px;height:32px;background-position: 0 -190px;}
  #cont1 .cont_txt h2{font-size:26px;font-weight:normal;}
  #cont1 .cont_txt p{max-width:180px;margin:0 auto;line-height:1.2;}
  #cont2 .cont_txt h2:before{width:33px;height:30px;background-position:-67px -190px;}
  #cont2 .cont_txt h2{font-size:26px;font-weight:normal;}
  #cont1 .cont_txt p{line-height:1.2;}
  #cont1 ul{width:100%;}
  #cont1 ul li{float: none;height:auto;margin-left:0;font-size:18px;margin-bottom:25px;min-height:180px;}
  #cont1 ul li:nth-child(3),
  #cont1 ul li:nth-child(4){position:static; margin:0 0 25px;}
  #cont1 ul li:before{width:123px;height:123px;}
  #cont1 ul li:first-child:before{background-position: -683px -226px;}
  #cont1 ul li:nth-child(2):before{background-position: -811px -226px;}
  #cont1 ul li:nth-child(3):before{background-position: -938px -226px;}
  #cont1 ul li:nth-child(4):before{background-position: -1065px -226px;}

  #cont1 ul li span{font-size:14px;}
  #cont2{padding-bottom:50px;}
  #cont2 .inner{float: none;width:100%;margin-left:0;margin-bottom:20px;padding:25px;}
  #cont2 .notice .more,
  #cont2 .quick_link .more{top:25px;right:25px;}
  #cont2 .notice h3,
  #cont2 .quick_link h3{font-size:18px;}
  #cont2 .notice ul li a{width:60%;}
}