@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");
/*경기바탕 400, 700*/
@font-face {
    font-family: 'Gyeonggi_Batang_Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Batang_Regular.woff') format('woff'); font-weight: 400; font-style: normal;}

@font-face {
    font-family: 'Grandpa_sharing';
    /*src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/naverfont_05@1.0/Grandpa_sharing.woff') format('woff');*/
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/naverfont_05@1.0/Grandpa_sharing.woff') format('woff');
	
	
    font-weight: normal;
    font-style: normal;
}
/*		---font*/

html{overflow:scroll;overflow-x:auto}
html{ width:100%;height:100%;-webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;}
body{ margin:0; padding:0;  }

img{border:none;vertical-align:top}

h1, h2, h3, h4, h5, h6, em{margin:0;padding:0;font-weight:normal; font-style:normal; font-family: 'NSNeoHeavy';}
h2 span{ transform: scaleX(0.98)}
p{margin:0;padding:0; font-family: 'Pretendard Variable',sans-serif,'Noto Sans KR';}
ol, ul, dl, li, dt, dd{display:block;margin:0;padding:0;list-style:none; font-family: 'Pretendard Variable',sans-serif,'Noto Sans KR';}

textarea{margin:0;padding:0;border:none;resize:none;}
input{margin:0;padding:0;border:none;font-family: 'Pretendard Variable',sans-serif,'Noto Sans KR';font-weight:normal;}
input[type=text],input[type=password],input[type=submit],input[type=button]{-webkit-appearance: none;-webkit-border-radius: 0;}
input[type=checkbox]{border:1px solid #666666;border-radius:0;}
input[type=radio]{border:1px solid #666666;}
input:focus,textarea:focus{outline-style:none;}



.wrap{ overflow:hidden; width:100%; margin:0 auto; box-sizing:border-box}

.cont{ width:100%; margin:0 auto; max-width:1420px; padding:0 20px; box-sizing:border-box}
.cont:after{display:block;content:"";clear:both;}
.cont .left{ float:left}
.cont .right{ float:right}
@media only screen and (max-width:900px) {
.cont{ max-width:750px; padding:0 30px}
}

h1{ position:fixed; left:52px; top:38px; z-index:99999; width:156px; height:55px; background: url(images/logo_color.png) left top no-repeat; background-size:100% auto; text-indent:-999999px}
h2{  font-family: 'Gyeonggi_Batang_Regular'; font-size:68px; letter-spacing:-0.03em; line-height:90px; color:#2746d6;}
h2 strong{ color:#0072bc;}
h2 span{ transform: scaleX(0.98); display:inline-block}

h3{  font-family: 'Gyeonggi_Batang_Regular'; font-size:48px; font-weight:700; letter-spacing:-0.05em; line-height:65px; color:#0a273f; text-align:center; word-break:keep-all}
h3 strong{ color:#1c72bc;}
h4{  font-family: 'Gyeonggi_Batang_Regular'; font-size:38px; font-weight:700; letter-spacing:-0.05em; line-height:50px; color:#0a273f; text-align:center; word-break:keep-all}
.sub_txt1 dt{ padding-bottom:40px; font-family: 'Grandpa_sharing'; font-size:70px; line-height:88px; letter-spacing:-0.04em; color:#04437a; word-break:keep-all}
.sub_txt1 dt span{ letter-spacing:-0.12em}
.sub_txt1 dd{ font-family: 'Pretendard Variable',sans-serif,'Noto Sans KR'; font-size:25px; line-height:40px; font-weight:500; letter-spacing:-0.03em; color:#262727; word-break:keep-all}
.sub_txt1 dd strong{ font-weight:700; }
.sub_txt1 dd span{ display:inline-block;  }
strong.txt_c1{ color:#1c72bc}
.txt_p1{ padding:40px 0;}
.btn_pt{ padding-top:40px;}
.txt_bg1{ padding:0 25px 0 16px; background:url(images/txt_bg1.png) left top no-repeat; background-size:100% 100%; margin-left:-16px }
.txt_bg2{ padding:0 20px 0 16px; background:url(images/txt_bg2.png) left top no-repeat; background-size:100% 100%; margin-left:-16px }
.txt_bg3{ padding:0 25px 0 16px; background:url(images/txt_bg3.png) left top no-repeat; background-size:100% 100%; margin-left:-16px }
@media only screen and (max-width:1200px) {
h1{ left:30px; top:25px; }
h3{ font-size:44px; line-height:60px ;}
.sub_txt1 dt{ font-size:60px; line-height:80px; }
}
@media only screen and (max-width:900px) {
h1{ left:20px; top:15px; width:90px; height:32px;}
h2{ font-size:35px; line-height:45px;}
h3{ font-size:26px; line-height:34px;}
h4{ font-size:20px; line-height:28px;}
.sub_txt1 dt{ padding-bottom:22px; font-size:35px; line-height:35px; }
.sub_txt1 dd{ font-size:16px; line-height:22px}
.txt_p1{ padding:22px 0;}
.btn_pt{ padding-top:22px;}
.txt_bg1{ padding:0 18px 0 10px; margin-left:-10px }
.txt_bg2{ padding:0 15px 0 10px; margin-left:-10px }
}
@media only screen and (max-width:650px) {
h3{ font-size:20px; line-height:30px ;}
}
@media only screen and (max-width:500px) {
h2{  font-size:30px; line-height:40px;}
h3{ font-size:18px; line-height:24px;}
h4{ font-size:16px; line-height:22px;}
}
@media only screen and (max-width:400px) {
.sub_txt1 dt{ font-size:30px; line-height:32px; }
}
@media only screen and (max-width:340px) {
.sub_txt1 dt{ letter-spacing:-0.05em}
.sub_txt1 dd{ letter-spacing:-0.05em}
}


.purme_btn{ display:inline-block; height:80px; border-radius:20px; padding:20px 35px 20px 40px;  box-sizing:border-box; background-color:#1c72bc; color:#fff }
.purme_btn span{ display:inline-block; padding-right:52px; font-family: 'Pretendard Variable',sans-serif,'Noto Sans KR'; font-size:28px; line-height:40px; font-weight:600; letter-spacing:-0.04em; background:url(images/purme_btn_arrow.png) right center no-repeat; background-size:25px auto;}
.purme_btn:hover{ background-color:#222}
@media only screen and (max-width:1200px) {
.purme_btn{  height:auto; border-radius:17px; padding:18px 30px 18px 35px;  }
.purme_btn span{ padding-right:32px; font-size:26px; line-height:36px; background-size:22px auto;}
}
@media only screen and (max-width:900px) {
.purme_btn{ border-radius:10px; padding:10px 20px 10px 20px;}
.purme_btn span{ padding-right:25px; font-size:20px; line-height:30px; background-size:15px auto;}
}
@media only screen and (max-width:500px) {
.purme_btn span{ padding-right:20px; font-size:18px; line-height:30px; background-size:13px auto;}
}
/*quick ----------------*/
.quick{ width:176px; position:fixed; bottom:50px; right:30px; z-index:10000; cursor:pointer}
.quick .quick_top{width:100%; height:0; position:relative}
.quick .quick_top .img{ position:absolute; left:0; top:-22px; z-index:10; width:100%; padding-top:91.111%; background:url(images/quick_top.png) center no-repeat; background-size:100% auto}
.quick .btn{ display:block; width:100%; padding:150px 9px 12px 9px; border-radius:20px; background:#1c72bc; box-sizing:border-box; font-size:20px; line-height:28px; color:#fff; font-weight:600; text-align:center}
.quick .btn span{ display:inline-block; padding-right:16px; background:url(images/quick_arrow.png) right center no-repeat; background-size:16px auto}
.quick:hover .btn{ background:#0a273f}
@media only screen and (max-width:900px) {
.quick{ width:100px; bottom:25px; right:15px;}
.quick .quick_top .img{ top:-13px; }
.quick .btn{ padding:85px 5px 6px 5px; border-radius:12px; font-size:13px; line-height:20px; }
.quick .btn span{ padding-right:10px; background-size:9px auto}
}
@media only screen and (max-width:500px) {
.quick{ width:100%; bottom:0px; right:0px;}
.quick .quick_top{width:100%; height:0; position:relative; max-width:400px; margin:0 auto}
.quick .quick_top .img{ width:140px; height:70px; left:11%; padding-top:0; bottom:-56px; top:inherit; background:url(images/quick_mo.png) center no-repeat; background-size:100% 100%; }
.quick .btn{ padding:18px 5px 18px 130px; border-radius:0px; font-size:13px; line-height:20px; }
.quick .btn span{ padding-right:15px; background-size:12px auto}
}
@media only screen and (max-width:380px) {
.quick .quick_top .img{ left:5%;}
}

/*dept1 ----------------*/
.dept1{ width:100%; height:100vh; min-height:800px; background:url(images/visual.jpg) center top no-repeat; background-size:cover}
.dept1 .cont{ padding-top:180px}
.dept1 dl dt{font-family: 'Gyeonggi_Batang_Regular'; font-weight:700; line-height:115px; font-size:90px; color:#0a273f; letter-spacing:-0.05em}
.dept1 dl dt.tit{font-size:95px; letter-spacing:0em}
.dept1 dl dd{ padding:29px 0 35px 0; font-size:27px; line-height:38px; font-weight:400; letter-spacing:-0.02em; color:#262727;}
.dept1_btm{ position:relative; width:100%; max-width:1420px; height:0; margin:0 auto}
.dept1_btm p{ position:absolute; left:20px; bottom:45px; padding-left:12px; z-index:10; background:url(images/icon_1.png) left top no-repeat; font-size:17px; line-height:20px; font-weight:400; letter-spacing:-0.03em; color:#262727; background-size:10px auto}

@media only screen and (max-width:1200px) {
.dept1 dl dt{line-height:100px; font-size:75px; }
.dept1 dl dt.tit{font-size:85px;}
.dept1 dl dd{ padding:25px 0 30px 0; font-size:24px; line-height:34px;}
.dept1_btm p{ bottom:30px; padding-left:12px; font-size:15px; line-height:20px; background-size:8px auto}
}
@media only screen and (max-width:1030px) {
.dept1{ height:760px; min-height:auto; background-position:-880px center; background-size:aauto 100%}
}
@media only screen and (max-width:900px) {
.dept1{ height:550px; background-position:center}
.dept1 .cont{ padding-top:110px; padding-right:0px}
.dept1 dl dt{ line-height:65px; font-size:50px;}
.dept1 dl dt.tit{font-size:55px;}
.dept1 dl dd{ padding:20px 0 25px 0; font-size:18px; line-height:28px}
.dept1_btm{ max-width:750px;}
.dept1_btm p{ left:15px; bottom:25px; padding-left:10px; font-size:13px; line-height:16px;background-size:7px auto}
}
@media only screen and (max-width:680px) {
.dept1{ background:url(images/visual_m.jpg) 200px bottom no-repeat; background-size:80% auto}
.dept1 dl dd{ padding:20px 0 25px 0; font-size:17px; line-height:26px}
}
@media only screen and (max-width:500px) {
.dept1{ height:auto; background-position:center bottom; background-size:105% auto}
.dept1 .cont{ max-width:400px; padding-bottom:82%}
.dept1 dl dd{ padding:20px 0 25px 0; font-size:17px; line-height:26px}
.dept1_btm p{ font-size:12px; bottom:20px}
}

/*dept2 ----------------*/
.dept2{  width:100%; padding:150px 0 150px 0; background:url(images/dept2_bg.jpg) center top no-repeat; background-size:cover; z-index:1}
.dept2 .video{ width:100%; overflow:hidden; max-width:1100px; margin:0 auto; border-radius:18px; box-shadow:8px 8px 20px 0px rgba(0, 0, 0, 0.3);}
.dept2 .video span{ position:relative; display:block; width:100%; padding-top:56.25%; z-index:1000}
.dept2 .video span iframe{ position:absolute; left:0; top:0; width:100%; height:100%;}
@media only screen and (max-width:1100px) {
.dept2 .video{ max-width:840px;}
}
@media only screen and (max-width:900px) {
.dept2{ padding:60px 0 60px 0; }
.dept2 .video{ width:90%; max-width:600px;}
}
@media only screen and (max-width:600px) {
.dept2{ background-position:center top, center 120%; }
}


/*dept3 ----------------*/
.dept3{ width:100%; background-color:#cedde2; }
#slidekit{overflow:hidden;position:relative;width:100%; height:1000px; z-index:10;}
#slidekit > ul{position:relative;}
#slidekit > ul > li{position:absolute;left:0;top:0;width:100%; height:1000px; background-position:center top; background-repeat:no-repeat; background-size:2500px auto; box-sizing:border-box; text-align:center}
#slidekit > ul > li.visual1{ background-image:url(images/dept3_1.jpg)}
#slidekit > ul > li.visual2{ background-image:url(images/dept3_2.jpg)}
.dept3 .cont{ position:relative; height:0}
.dept3 .cont dl{ position:absolute; left:20px; top:170px; z-index:20}
.dept3 .cont .img{ position:absolute; right:20px; top:620px; z-index:20}
.dept3 .cont .img img{ border:10px solid #fff; width:300px; height:auto; margin-left:9px; box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.15); }
@media only screen and (max-width:1200px) {
.dept3 .cont .img img{ border:7px solid #fff; width:250px; }
}
@media only screen and (max-width:1100px) {
#slidekit{ height:900px; }
#slidekit > ul > li{ height:900px; background-size:2000px auto; }
.dept3 .cont .img{ top:550px; }
.dept3 .cont .img img{ border:7px solid #fff; width:200px; }
}
@media only screen and (max-width:980px) {
#slidekit{ height:850px; }
#slidekit > ul > li{ height:850px; }
.dept3 .cont .img img{ border:6px solid #fff; width:170px; }
}
@media only screen and (max-width:900px) {
#slidekit{ height:470px; }
#slidekit > ul > li{ height:470px; background-size:1300px auto; }
.dept3 .cont dl{ top:90px; left:30px; }
.dept3 .cont .img{ top:300px; }
.dept3 .cont .img img{ border:4px solid #fff; width:120px; margin-left:5px }
}
@media only screen and (max-width:620px) {
#slidekit{ height:530px; }
#slidekit > ul > li{ height:530px; background-size:1300px auto; }
.dept3 .cont .img{ top:350px; right:inherit; left:25px }
}
@media only screen and (max-width:500px) {
.dept3 .cont{ max-width:400px}
#slidekit{ height:680px; }
#slidekit > ul > li{ height:670px; background-size:500px auto; }
#slidekit > ul > li.visual1{ background-image:url(images/dept3_1_mo.png)}
#slidekit > ul > li.visual2{ background-image:url(images/dept3_2_mo.png)}
.dept3 .cont dl{ top:265px; left:30px; }
.dept3 .cont .img{ top:520px; }
}

/*dept4 ----------------*/
.dept4{ width:100%; padding:150px 0 100px 0; background:#f3fdff url(images/dept4_bg.jpg) center top no-repeat; background-size:cover }
.dept4 dl{ margin-left:57.049%}
.dept4 dl dd.txt_info{ margin-top:70px; padding-left:9px; line-height:21px; font-size:16px; letter-spacing:-0.05em; color:#2c2b2b; background:url(images/icon_bullet1.png) left 9px no-repeat; background-size:5px auto; color:#2c2b2b;}
.dept4 dl dd.txt_info strong{ display:block; font-size:18px; font-weight:700; line-height:25px; padding-bottom:3px; letter-spacing:-0.02em;  }
@media only screen and (max-width:1350px) {
.dept4 dl{ margin-left:53%}
}
@media only screen and (max-width:900px) {
.dept4{ padding:80px 0 60px 0; }
.dept4 dl{ margin-left:57.049%}
.dept4 dl dd.txt_info{ margin-top:35px; padding-left:6px; line-height:16px; font-size:12px; background-position:left 5px; background-size:3px auto; }
.dept4 dl dd.txt_info strong{font-size:14px; line-height:18px; padding-bottom:3px; }
} 
@media only screen and (max-width:750px) {
.dept4 dl{ margin-left:51%}
}
@media only screen and (max-width:630px) {
.dept4{ padding:60px 0 45% 0; background:#f3fdff url(images/dept4_bg_mo.png) center bottom no-repeat; background-size:100% auto }
.dept4 dl{ margin-left:0%}
}
@media only screen and (max-width:500px) {
.dept4 .cont{ max-width:400px;}
}

/*dept5 ----------------*/
.dept5{ width:100%; padding:150px 0; background:url(images/dept5_bg.jpg) center top no-repeat; background-size:2500px auto }
.dept5 dl dd.m_txt_pc{ display:block}
.dept5 dl dd.m_txt_mo{ display:none}
@media only screen and (max-width:1300px) {
.dept5{background:url(images/dept5_bg2.jpg) center top no-repeat; background-size:auto 105% }
}
@media only screen and (max-width:900px) {
.dept5{ padding:80px 0; }
}
@media only screen and (max-width:630px) {
.dept5{ padding:60px 0; }
}
@media only screen and (max-width:500px) {
.dept5{ padding:60px 0 65% 0; background:#ebecf0 url(images/dept5_bg_mo.jpg) center bottom no-repeat; background-size: 110% auto }
.dept5 .cont{ max-width:400px;}
.dept5 dl dt{ letter-spacing:-0.07em}
}



/*dept6 ----------------*/
.dept6{ width:100%; padding:150px 0 150px 0; background:url(images/dept6_bg.jpg) center top no-repeat; background-size:cover }
.dept6 dl{ margin-left:57.049%}
@media only screen and (max-width:1350px) {
.dept6 dl{ margin-left:53%}
}
@media only screen and (max-width:1160px) {
.dept6{  background:url(images/dept6_bg2.jpg) 35% top no-repeat; background-size:auto 100% }
.dept6 dl dt{ letter-spacing:-0.07em}
}
@media only screen and (max-width:900px) {
.dept6{ padding:80px 0 60px 0; background:url(images/dept6_bg.jpg) center top no-repeat; background-size:cover }
.dept6 dl{ margin-left:57.049%}
} 
@media only screen and (max-width:750px) {
.dept6 dl{ margin-left:51%}
}
@media only screen and (max-width:630px) {
.dept6{ background:url(images/dept6_bg2.jpg) 35% top no-repeat; background-size:auto 100% }
.dept6 dl{ margin-left:51%}
.dept6 dl dt{ letter-spacing:-0.05em}
}
@media only screen and (max-width:500px) {
.dept6{ padding:60px 0 60% 0; background:#eaf0f4 url(images/dept6_bg_mo.jpg) right bottom no-repeat; background-size: 100% auto }
.dept6 .cont{ max-width:400px;}
.dept6 dl{ margin-left:0%}
.dept6 dl dd.txt_btm1 span{ display:block}
}
@media only screen and (max-width:340px) {
.dept6{ background-size: 100% auto }
}

/*dept7 ----------------*/
.dept7{ width:100%; padding:150px 0; background:url(images/dept7_bg.jpg) center top no-repeat; background-size:cover }
@media only screen and (max-width:900px) {
.dept7{ padding:80px 0 80px 0; }
}
@media only screen and (max-width:700px) {
.dept7{ background:url(images/dept7_bg2.jpg) center top no-repeat; background-size:cover }
}
@media only screen and (max-width:500px) {
.dept7{ padding:60px 0 60% 0; background:#c7c7c5 url(images/dept7_bg_mo.jpg) left bottom no-repeat; background-size: 100% auto }
.dept7 .cont{ max-width:400px;}
}

/*dept8 ----------------*/
.dept8{ width:100%; padding:150px 0; background-color:#e4f8ff; text-align:center; word-break:keep-all}
.dept8 .cart_box{ display:inline-block; margin:33px auto 40px auto; height:240px; padding-left:280px; padding-top:25px; background:url(images/dept8_chart.png) left top no-repeat; background-size:auto 100%; font-size:24px; line-height:38px; letter-spacing:-0.03em; color:#262727; box-sizing:border-box; text-align:left; font-family: 'Pretendard Variable',sans-serif,'Noto Sans KR';}
.dept8 .cart_box strong{ color:#1c72bc; font-weight:700}
.dept8 .cart_box span{ display:block}
.dept8 .box{ background-color:#fff; width:100%; border-radius:35px; max-width:1100px; margin:0 auto; padding:60px 0 80px 0; box-sizing:border-box}
.dept8 .box ul{ width:100%; max-width:900px; margin:45px auto 0 auto;}
.dept8 .box ul:after{display:block;content:"";clear:both;}
.dept8 .box ul li{ width:33.333%; float:left}
.dept8 .box ul li span{ display:block; text-align:center; letter-spacing:-0.05em; }
.dept8 .box ul li span > span{ display:inline-block; padding:4px 16px; font-size:24px; line-height:36px; background-color:#1c72bc; color:#fff}
.dept8 .box ul li span > span strong{ display:inline-block; font-weight:700}
.dept8 .box ul li span.icon{ width:80%; padding-top:80%; margin:0 10%; border-radius:100%; background-color:#cceaf4; background-position:center center; background-repeat:no-repeat; background-size:77.083% auto}
.dept8 .box ul li span.icon1{ background-image:url(images/dept8_icon1.png)}
.dept8 .box ul li span.icon2{ background-image:url(images/dept8_icon2.png)}
.dept8 .box ul li span.icon3{ background-image:url(images/dept8_icon3.png)}
.dept8 .box ul li span.txt1{ padding-top:6px; line-height:46px; font-size:24px; color:#262727}
.dept8 .box ul li span.txt2 > .txt_line{ line-height:72px}
.dept8 .txt_info{ padding-top:18px; line-height:24px; font-size:16px; letter-spacing:-0.05em; color:#2c2b2b; color:#2c2b2b;}

@media only screen and (max-width:900px) {
.dept8{ padding:80px 0 60px 0; }
.dept8 .cart_box{ margin:20px auto 25px auto; height:150px; padding-left:170px; padding-top:15px; font-size:16px; line-height:22px; }
.dept8 .box{  border-radius:18px; max-width:600px; padding:30px 0 30px 0; }
.dept8 .box ul{ max-width:480px; margin:20px auto 0 auto;}
.dept8 .box ul li span > span{ padding:4px 8px; font-size:14px; line-height:20px;}
.dept8 .box ul li span.txt1{ padding-top:5px; line-height:24px; font-size:14px; }
.dept8 .box ul li span.txt2 > .txt_line{ line-height:40px}

.dept8 .txt_info{ padding-top:15px; line-height:16px; font-size:12px;}

}

@media only screen and (max-width:500px) {
.dept8{ padding:60px 0 50px 0; }
.dept8 .cont{ max-width:400px;}
.dept8 .cart_box{ margin:15px auto 20px auto; height:120px; padding-left:130px; padding-top:15px; font-size:14px; line-height:18px; letter-spacing:-0.05em }
}
@media only screen and (max-width:380px) {
.dept8 .cont{ max-width:400px;}
.dept8 .cart_box{ margin:10px auto 20px auto; height:auto; padding:120px 0 0 0; background-size:110px auto; background-position:center top; font-size:14px; line-height:18px; text-align:center }
.dept8 .box ul{ max-width:300px;}
.dept8 .box ul li span > span{ padding:4px 6px; font-size:13px; line-height:19px; letter-spacing:-0.06em}
.dept8 .box ul li span.txt1{ line-height:23px; font-size:13px; }
.dept8 .box ul li span.txt2 > .txt_line{ line-height:38px}
}

/*dept9 ----------------*/
.dept9{ width:100%; padding:150px 0 730px 0; background:#fefefe url(images/dept9_bg.jpg) center bottom no-repeat; background-size:2500px auto; word-break:keep-all}
.dept9 h3 span{ display:inline-block}
.dept9 .box{  width:100%; max-width:1100px; margin:40px auto 0 auto; box-sizing:border-box; display:flex}
.dept9 .box:after{display:block;content:"";clear:both;}
.dept9 .box li{ float:left; margin-left:4.545%; width:30.303%; background-color:#d6e6eb; border-radius:35px; padding:50px 0px; box-sizing:border-box; box-shadow: 2px 6px 0px 0px rgba(0, 0, 0, 0.2);}
.dept9 .box li:first-child{ margin-left:0}
.dept9 .box li span{ display:block; text-align:center; letter-spacing:-0.05em; margin:0 auto; text-align:center}
.dept9 .box li span.icon{ width:56%; padding-top:56%; background-color:#1c72bc; border-radius:100%; background-position:center center; background-size:90% auto; background-repeat:no-repeat}
.dept9 .box li span.icon1{ background-image:url(images/dept9_icon1.png)}
.dept9 .box li span.icon2{ background-image:url(images/dept9_icon2.png)}
.dept9 .box li span.icon3{ background-image:url(images/dept9_icon3.png)}
.dept9 .box li span.txt1{ padding-top:19px; line-height:50px; font-size:30px; font-weight:700; letter-spacing:-0.02em; color:#1c72bc}
.dept9 .box li span.txt2{ padding-top:0px; line-height:36px; font-size:24px;letter-spacing:-0.02em; color:#111111}
.dept9 .txt_info{ padding-top:30px; line-height:24px; font-size:16px; letter-spacing:-0.05em; color:#2c2b2b; color:#2c2b2b; text-align:center}

@media only screen and (max-width:900px) {
.dept9{ padding:60px 0 300px 0; background-size:900px }
.dept9 .box{  max-width:600px; margin-top:20px }
.dept9 .box li{ border-radius:18px; padding:25px 0; box-shadow: 1px 4px 0px 0px rgba(0, 0, 0, 0.2);}
.dept9 .box li span.txt1{ padding-top:10px; line-height:30px; font-size:20px}
.dept9 .box li span.txt2{ padding-top:0px; line-height:22px; font-size:16px;}
.dept9 .txt_info{ padding-top:20px; line-height:16px; font-size:12px;}
}
@media only screen and (max-width:600px) {
.dept9 .box li span.txt1{ padding-top:10px; line-height:26px; font-size:18px}
.dept9 .box li span.txt2{ padding-top:0px; line-height:20px; font-size:14px;}
}
@media only screen and (max-width:500px) {
.dept9 .cont{  max-width:400px; }
.dept9 .box li{ padding:20px 0 20px 0}
.dept9 .box li span.icon{ width:70%; padding-top:70%}
.dept9 .box li span.txt1{ padding-top:10px; line-height:22px; font-size:16px}
.dept9 .box li span.txt2{  line-height:18px; font-size:12px;}
}
@media only screen and (max-width:400px) {
.dept9 .box li span.txt2{ padding:5px 10px 0 10px;  line-height:16px; font-size:12px;}
.dept9 .box li span.txt2 span{ display:inline}
}


/*footer*/
.footerWrap{ position:relative; width:100%; background:#363636; font-family: 'Pretendard Variable',sans-serif,'Noto Sans KR';  color:white; font-size:1rem; position:relative; float:left; text-decoration: none;}
#footer{width:70%; height:100%; position:relative; margin:0 auto; padding-top:80px;}
#footer:after{display:block;content:"";clear:both;}
.footerTitleList{width:20%; position:relative; float:left; font-weight: 700;}
.footerTitleList li{margin-bottom:20px;}
.footerTextList{width:40%; position:relative; float:left;}
.footerTextList li{margin-bottom:20px;}
.footerKakao{width:40%; position:relative; float:left;}
.footerKakao li span{display:block; float:right; height:35px;}
.footerKakao li span.kakao{ width:35px; height:35px; background:url(images/f_kakao.png) center no-repeat; background-size:100% auto; text-indent:-999999px}
.footerKakao li span.txt{ padding:0 20px 0 40px; margin-left:3px; line-height:35px; border-radius:21px; background:#fff url(images/f_icon.jpg) 10px center no-repeat; background-size:25px auto; color:#363636;}
.footerIconList{width:100%; height:50px; position:relative;margin-top:50px;  float:left; }
.footerIconList > li{float:left; margin-right:20px; text-align: center;}
.footerIconList > li img{width:100%; height:auto; }
.footerIconList > li a{ display:block; width:100%;}
.footerIconList > li:last-child{float:right; bottom:0; margin-right:0;}
.footerWrap p{ float:left; width:100%; margin:40px auto 0 auto; border-top:1px solid #444; padding:20px 15%; font-size:14px; line-height:20px; text-align:center; color:#CCC; box-sizing:border-box; word-break:keep-all}

@media screen and (max-width:780px){
#footer{width:90%; padding-top:50px}
.footerTitleList,.footerTextList{font-size:0.813rem; line-height:1.2rem; }
.footerKakao li span{height:30px;}
.footerKakao li span.kakao{ width:30px; height:30px; }
.footerKakao li span.txt{ padding:0 10px 0 25px; margin-left:2px; line-height:30px; border-radius:15px; font-size:0.813rem; background-size:18px auto; background-position:6px center}
.footerIconList>li:last-child{float:left;}
.footerWrap p{ padding:10px 10%; font-size:13px; margin-top:20px; line-height:18px;}
}
@media screen and (max-width:640px){
.footerWrap{padding-bottom:00px;}
.footerIconList>li{margin-bottom:50px;}

}
@media screen and (max-width:540px){
.footerTextList{width:80%; }
.footerKakao{width:auto; position:absolute; right:4%; top:50px;}
.footerIconList>li{margin-bottom:20px;}
.footerIconList>li:last-child{clear:both;}
.footerWrap{padding-bottom:00px;}
.footerWrap p{ margin-top:80px; }
}

@media screen and (max-width:500px){
	.footerWrap{padding-bottom:40px;}
}

@media screen and (max-width:480px){
.footerIconList>li{width:10%;}
.footerIconList>li:last-child{width:100px;}
.footerWrap p{ padding:10px 5% 30px 5%}
}

/* animation */
.animated-shake{animation: shakeR 4s infinite alternate;}
@keyframes shakeR {
	0% { transform: rotate(0deg); }
    100% { transform: rotate(5deg); }
}


.animated-show.on { animation: showOn 2s forwards;}
.animated-show.off { animation: showOff 2s forwards;}
@keyframes showOn {
    0% { transform: translateY(-100px); opacity:0; }
    100% { transform: translateY(0); opacity:1; }
}
@keyframes showOff {
    0% { transform: translateY(0); opacity:1; }
    100% { transform: translateY(-100px); opacity:0; }
}