@charset "utf-8";

html,body {font-size:16px;	margin:0; padding:0;}

section,article,header,footer,nav,
div,p,
h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dd,dt,
img,a,
form,input,select,option,fieldset,textarea,button,label,
figure,video {
	margin:0;
	padding:0;
	border:0;
	background-repeat:no-repeat;
	background-position:center;
	background-color:transparent;
	background-size:cover;
	line-height:1;
	text-decoration:none;
	font-family:'pretendard','맑은 고딕',돋움,'Apple SD Gothic Neo',sans-serif;
    font-weight:400;
	color:#222;
	box-sizing:border-box;
	text-size-adjust:none;
	list-style:none;
	word-break: keep-all;
    letter-spacing: 0;
    transition:0.5s;

}
a:link, a:visited,
a:hover, a:focus, a:active {
	text-decoration:none;
}


a {font-size:inherit; font-weight:inherit; color: inherit;}

a, button, input[type=submit] {cursor: pointer}

table {width:100%; border-spacing:0; border-collapse:collapse;}

/*========= input ===========*/
.unit {position: absolute; right:10px; top:50%; transform:translateY(-50%);}
.ip_comm	{display:block; width:100%; height:50px; padding:0 10px; border:0; background-color:#fff; border-radius:4px; border:1px solid #ddd; font-size:16px; box-sizing:border-box; outline:none; color: #444;}
.ip_comm:focus	{background-color: #ffffee;}
.ip_comm.tel	{width:30%;}
.ip_comm.tel+.bar	{}
.set_tel	{overflow:hidden;}
select.ip_comm	{padding-right:0;}
textarea.ip_comm	{height:100px; padding:10px; line-height:1.5;}
.btn_sm	{display:flex; align-items: center; justify-content: center; text-align: center; width:200px; height:70px; background-color:var(--main-color); border-radius:10px; font-size: 20px; font-weight: 600; color:#fff; }

.set_agree {display:flex; align-items: center; justify-content: flex-start;}
.set_agree label,
.set_agree a {margin-left:5px; font-size:14px;}


.row {display:flex; align-items: center; justify-content: space-between}
.col {display:flex; flex-direction: column; align-items: center; justify-content:center;text-align: center;}


.center	{width:100%; max-width:1280px; margin:0 auto;}
@media screen and (max-width:1280px) {
.center	{width:94%; max-width:100%; }

}

.clear::after	{content:""; display:block; clear:both;}
.hidden {position:absolute; left:-100%; top:0%; overflow:hidden; width:0; height:0; font-size:0; text-indent:-9999%; line-height:0;}

.btn_nav {position: relative; display:flex; align-items: center ;justify-content:center; width:24px; cursor: pointer}
.on .btn_nav { z-index: 102;}
.btn_hbg {position: relative; display:flex; flex-direction: column; justify-content: space-between; width:100%; height:15px;}
.btn_hbg div,
.btn_hbg:before,
.btn_hbg:after {content:""; position:relative; display:block; width:100%; height:1px; background-color:#222; transition:all 0.3s}
.sub .btn_hbg div,
.sub .btn_hbg:before,
.sub .btn_hbg:after {background-color:#fff; }
.on .btn_hbg div {background-color:transparent;}
.on .btn_hbg:before,
.on .btn_hbg:after {position: relative; transform-origin: center; background-color: #444; }
.on .btn_hbg:before {top:50%; transform:rotate(45deg);}
.on .btn_hbg:after {top:-50%; transform:rotate(-45deg);}
.on .sub .btn_hbg div,
.on .sub .btn_hbg:before,
.on .sub .btn_hbg:after {background-color:#444; }



:root{

/*    font*/
    --main-color:#0041d6;
    --sub-color:#ff6700;

    --bg-color:#f4f6f9;
    --notice-color:#ffdb8b;
    --more-color:#efbcbe;


    --kakao-y:#ffe600;
    --kakao-b:#3b1e1e;
    --naver-g:#39ab37;
    --fb-b:#445e98;

    --quick1:#0133d8;
    --quick2:#ffe600;
    --quick3:#ed1840;
    --quick4:#2ac4c2;


}




#wrapper {width:100%; background-color: #fff;}


/*========= header ===========*/

#header {position: absolute; left:0; top:0; width:100%; z-index: 99; }
#header .kakao {height:2.5rem; background-color: var(--kakao-y); justify-content: center; font-size: 0.9375rem; font-weight: 600; color:var(--kakao-b)}
#header .kakao figure {margin-right:0.3125rem;}
#header .kakao svg {width:auto; height:1.875rem;}

#header h1 svg {width:10rem; height:auto; filter: brightness(0) invert(1);}
.logo .st0 {fill: #666;}
.logo .st1 {fill: #0d0d0d;}

.sub .logo .st0 {fill: #fff;}
.sub .logo .st1 {fill: #fff;}

#nav {justify-content:flex-end;}
#nav > div {position: relative; z-index: 10;}
#nav .dep1 {position: relative; display:flex; align-items: center; justify-content: center; height:6.25rem; padding:0 2.5rem; font-size:1.125rem; font-weight: 500; color: #fff; z-index: 1;}
    .sub #nav .dep1 {color:#fff;}
#nav > div:hover .dep1 {background-color: #fff; font-weight: 700; color:#222;}

#nav .dep2 {position: absolute; left:0; top:6.25rem; width:100%; padding:0.625rem 0.3125rem; height:auto; display:none; background-color: rgba(255,255,255,0.95); border-top:0.0625rem solid #eee; text-align: center;}
#nav > div:hover .dep1 + .dep2 {display: block;}
#nav .dep2 li {margin:1.25rem 0; }
#nav .dep2 li a:hover  {text-decoration: underline;}


.btn_nav {display: none; z-index: 102;}

    /* move */
    #header.move {position:fixed;   background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(0.3125rem);  backdrop-filter: blur(0.3125rem);}
    #header.move .kakao {height:1.875rem; font-size: 0.875rem; }
    #header.move .kakao svg {height:1.625rem;}

    #header.move h1 svg {width:8.125rem;}

    .move #nav .dep1 {height:4.375rem; font-size:1rem; }

    .move #nav .dep2 {top:4.375rem; }
    .move #nav .dep2 li a {font-size: 0.9375rem;}




/*========= footer ===========*/
#footer {padding:2.8125rem 0; background-color:#222}

#footer a,
#footer li {font-size: 0.875rem; color: #fff;}

#footer nav {display:flex; align-items: center; justify-content: flex-start;}
#footer nav a {margin-right:1.875rem; font-weight: 600;}
#footer .info {margin:1.25rem 0;}
#footer .info li {display:inline-block; margin-right:1.875rem; line-height:1.7; color: #fff;}


#footer .copyright {font-size:0.8125rem; font-weight:600; color: #888; }
#footer .copyright a {font-size:inherit; font-weight:inherit; color:inherit;}




.quick {position: fixed; left:50%; top:50%; transform:translate(43.75rem,-50%); z-index: 100;}
.quick a {display:flex; flex-direction: column; justify-content:space-between; width:4.375rem; height:4.375rem; margin:0.3125rem 0; padding:0.625rem; border-radius:0.3125rem; text-align: center; font-size: 0.75rem; color: #fff;}
    .quick a:nth-child(1) {background-color:var(--main-color);}
    .quick a:nth-child(2) {background-color:var(--kakao-y); color:var(--kakao-b);}
    .quick a:nth-child(3) {background-color:#ff3a3a;}
    .quick a:nth-child(4) {background-color:#222; color: #fff;}
.quick a figure {height:1.875rem;}
.quick a svg {width:auto; height:100%;}
.quick #btn_top figure {color: #fff; font-size: 1.875rem; font-weight: 100;}




    .swiper-button-prev,
    .swiper-button-next {width:0.9375rem; background-size:contain; z-index: 10;}
    .swiper-button-prev {left:1.25rem;}
    .swiper-button-next {right:1.25rem;}








.main_title {margin-bottom:2.5rem; text-align: center; font-size: 1.875rem; font-weight: 700;}
.main > section {padding-top:5rem; padding-bottom:5rem;}




.sub_visual {background-image:url(/images/sub_visual3.jpg); background-size:cover;}
.sub_visual .center {display:flex; flex-direction: column; height:26.25rem; padding-top:8.75rem; align-items:center; text-align:center;}
    .sub_visual05 {background-image:url(/images/sub_visual5.jpg)}
/*
    .sub_visual01 {background-image:url(/images/sub_visual1.jpg)}
    .sub_visual02 {background-image:url(/images/sub_visual2.jpg)}
    .sub_visual03 {background-image:url(/images/sub_visual3.jpg)}
    .sub_visual04 {background-image:url(/images/sub_visual4.jpg)}
    .sub_visual06 {background-image:url(/images/sub_visual6.jpg)}
*/

.sub_visual h3,
.sub_visual p {color: #fff;}
.sub_visual h3 {font-size: 2.125rem; font-weight: 700;}
.sub_visual p {margin:0.75rem 0 0.9375rem 0; font-size:1.125rem; line-height: 1.2em;}

.sub_visual .phone {display:inline-flex; align-items: center; justify-content: flex-start; padding:0.625rem 0.9375rem; border:0.0625rem solid #fff; border-radius:6.25rem; font-size: 1.125rem; color: #fff;}
.sub_visual .phone figure {margin-right:0.625rem;}
.sub_visual .phone svg {width:1.375rem; height:auto;}
.sub_visual .phone .st0 {
        fill: none;
        stroke: #fff;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width:0.125rem;
    }

.sub_menu {justify-content: center; margin-bottom:3.75rem;; padding:1.25rem 0; }
.sub_menu a {margin:0 1.875rem; font-size: 1.125rem;  font-weight: 700; color: #aaa;}
.sub_menu a.on { color: #222;}

#contents.sub {padding-bottom:9.375rem;}

.sub .cont {display:flex; align-items: stretch; justify-content: space-between; margin-top:80px;}
.sub .cont:first-child {margin-top:0}
.sub .cont hgroup {width:350px;}
.sub .cont article {width:calc(100% - 350px);}

.sub_title {font-size: 24px; font-weight: 700; color: #000;}

.p_comm {margin-top: 15px; line-height:1.8}
.p_comm:first-child {margin-top: 0;}

.li_comm li {padding-left:25px; margin-bottom:15px; font-size: 17px; line-height:1.2; background-image:url(/images/check.png); background-size:16px; background-position:left 2px;}
.li_comm li:last-child {margin-bottom:0;}


/* 애니메이션 */

@keyframes up {
  100% {bottom:0; opacity:1}
}
@keyframes down {
  100% {top:0; opacity:1}
}
@keyframes left {
  100% {right:0; opacity:1}
}
@keyframes right {
  100% {left:0; opacity:1}
}
@keyframes rotate {
  100% {
       transform: rotateY(360deg);  opacity:1}
}
@keyframes fade {
  100% {opacity:1}
}
@keyframes zoom {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1); opacity:1}
}

.ani {position: relative; opacity:0;}
.ani.up {bottom:-100px;}
.ani.down {top:-100px;}
.ani.left {right:-100px;}
.ani.right {left:-100px;}
.ani.rotate {}

.active .ani,
.active.ani { animation-duration: 1s; animation-fill-mode:forwards;}
.active .ani.up,
.active.ani.up {animation-name:up}
.active .ani.down,
.active.ani.down {animation-name:down}
.active .ani.left,
.active.ani.left {animation-name:left}
.active .ani.right,
.active.ani.right {animation-name:right}
.active .ani.fade,
.active.ani.fade {animation-name:fade}
.active .ani.rotate,
.active.ani.rotate { animation-duration: 2s;animation-name:rotate}
.active .ani.zoom,
.active.ani.zoom { animation-name:zoom}

.ani:nth-of-type(1) { animation-delay:0.1s;}
.ani:nth-of-type(2) { animation-delay:0.2s;}
.ani:nth-of-type(3) { animation-delay:0.3s;}
.ani:nth-of-type(4) { animation-delay:0.4s;}
.ani:nth-of-type(5) { animation-delay:0.5s;}
.ani:nth-of-type(6) { animation-delay:0.6s;}
.ani:nth-of-type(7) { animation-delay:0.7s;}
.ani:nth-of-type(8) { animation-delay:0.8s;}
.ani:nth-of-type(9) { animation-delay:0.9s;}
.ani:nth-of-type(10) { animation-delay:1.0s;}












/* 모달팝업 */
#modal-content {display:none;width:600px;max-width:90%;height:500px;box-shadow:0 5px 15px rgba(0, 0, 0, 0.5);background-color: #fff;border: 1px solid rgba(0, 0, 0, 0.2);border-radius: 0;outline: 0 none}
#modal-content .modal-header {height:20px;border-bottom:1px solid #e5e5e5;padding:15px}
#modal-content .modal-header h4 {margin:0;font:bold 1.125rem 'Malgun Gothic';color:#5d5d5d}
#modal-content .modal-body {padding:15px}
#modal-content .modal-body .b-iframe {width:570px;max-width:100%;height:430px}
#modal-content .b-close{float:right;font:bold 21px Arial;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20);padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
#modal-content .b-close:hover, #modal-content .b-close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}
p.modal-frame-content{width:550px;max-width:100%;height:400px;padding-right:5px;overflow-x:hidden;overflow-y:auto;font:normal 12px 'Malgun Gothic';color:#555;line-height:1.65em}
/*.popbtn {text-decoration:none;cursor:pointer;margin:0 5px}*/
.b-modal __b-popup1__ {max-width:100%}
#modal-content .modal-header,#modal-content .modal-body{box-sizing:content-box !important}

#modal-content2 {display:none; width:400px; height:560px; background:rgba(54,54,54,0.9); border-radius:4px; border:0px;}
#modal-content2 .modal-header {position:relative; height:28px;}
#modal-content2 .modal-body2 {padding:0;}
#modal-content2 .b-close{position:absolute;top:0;right:16px;font-size:2.5rem;font-weight:900;font-family:Tahoma;color:#fff;opacity:.5;filter:alpha(opacity=50);padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}
#modal-content2 .b-close:hover, #modal-content .b-close:focus{cursor:pointer;opacity:1;filter:alpha(opacity=100)}
#modal-content2 .modal-body2 .b-iframe {width:400px;height:560px;}