@charset "utf-8";
@import url(../fonts/font.css);

body {
    font-family: 'Pretendard';
    font-size:18px;
    color:#222;
}

#wrapper {
    display: flex;
    justify-content: flex-end;
}
#layout {
    width:calc(100% - 150px);
    max-width:1755px;
}
#mir {
    width:100%;
}
.mircenter {
    width:100%;
    max-width:1400px;
    padding:0 20px;
    margin:0 auto;
}

#aside {
    width: 150px;
    height: 100vh;
    background-color: #fff;
    position: relative;
    z-index: 111;
}
#aside .aside_fixed {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:50px;
    position: fixed;
    left: 0;
    top: 15%;
    width: 150px;
}
#aside .aside_fixed .aside_site_btns {
    display:flex;
    flex-direction:column;
    gap:50px;
}
#aside .aside_fixed .aside_site_btns li a {
    display:block;
}
#aside .aside_fixed .aside_site_btns li p {
    font-size:0.88em;
    font-weight:500;
    letter-spacing:-0.48px;
    line-height:225%;
    text-align:center;
}
#aside .aside_fixed .aside_admin_btns {
    display:flex;
    flex-direction:column;
    gap:10px;
}
#aside .aside_fixed .aside_admin_btns li a {
    display:block;
    padding:7px 15px;
    border:1px solid #E8E8E8;
    background-color:#fff;
    border-radius: 999px;
    font-size:0.88em;
    font-weight:400;
    letter-spacing:-0.48px;
    line-height:normal;
    text-align:center;
}
#aside .aside_fixed .aside_scroll {
    position: relative;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
}
#aside .aside_fixed .aside_scroll .scroll-prompt {
    opacity: 1;
}
#aside .aside_fixed .aside_scroll .scroll-prompt .scroll-prompt-arrow-container {
    animation-name: bounce;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
#aside .aside_fixed .aside_scroll .scroll-prompt .scroll-prompt-arrow {
    animation-name: opacity;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
}
#aside .aside_fixed .aside_scroll .scroll-prompt .scroll-prompt-arrow:nth-child(2) {
    animation-direction: reverse;
    margin-top: -3px;
}
#aside .aside_fixed .aside_scroll .scroll-prompt .scroll-prompt-arrow:last-child {
    animation-direction: reverse;
    margin-top: -4px;
}
#aside .aside_fixed .aside_scroll .scroll-prompt .scroll-prompt-arrow > div {
    width: 10px;
    height: 10px;
    border-right: 2px solid #222;
    border-bottom: 2px solid #222;
    transform: rotate(45deg) translateZ(1px);
}
#aside .aside_fixed .aside_scroll p {
    font-size:0.88em;
    font-weight:400;
    line-height:225%;
    transform:rotate(-90deg);
}


#header {
    width: calc(100% - 150px);
    max-width: 1755px;
    position: relative;
    height: 120px;
}
#header .header {
    display:flex;
    align-items: flex-end;
    width: 100%;
    max-width: 1620px;
    justify-content: space-between;
    position:absolute;
    left:0;
    top:0;
    z-index:10;
}
#header .header #logo {
    background-color:#fff;
    width:400px;
    height:120px;
    text-align:center;
    border-radius: 0px 0px 50px 0px;
    position: relative;
}
#header .header #logo::before {
    content:'';
    width:30px;
    height:30px;
    background-image:url(../img/layout/logo_point.png);
    background-repeat:no-repeat;
    position:absolute;
    left:0;
    bottom:-30px;
}
#header .header #logo::after {
    content:'';
    width:30px;
    height:30px;
    background-image:url(../img/layout/logo_point.png);
    background-repeat:no-repeat;
    position:absolute;
    top:50px;
    right:-29px;
}
#header .header #logo a {
    display:flex;
    align-items:center;
    justify-content:center;
    height: 100%;
}
#gnb .global {

}
#gnb .global .depth1 {
    display:flex;
    align-items:center;
    gap:34px;
    background-color:#fff;
    border-radius:999px;
    padding:10px 20px;
}
#gnb .global .depth1 .dl1 .da1 {
    font-size:1.11rem;
    font-weight:500;
    font-family: "S-Core Dream";
    line-height:normal;
    position: relative;
}
#gnb .global .depth1 .dl1 .da1::after {
    content:'';
    width:4px;
    height:4px;
    background-color:#CACACA;
    position:absolute;
    right:-19px;
    top:50%;
    transform:translateY(-50%);
}
#gnb .global .depth1 .dl1:last-child .da1::after {
    display:none;
}
#gnb .global .gnb_menu_btn {
    width:50px;
    height:50px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    display:none;
}
#gnb_all {
    display:none;
}


#footer {
    margin-top:110px;
    padding-bottom:30px;
    width:100%;
}
#footer .mircenter {
    position: relative;
    width:auto;
}
#footer .footer_top {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
#footer .footer_top .footer_btns {
    display:flex;
    align-items:center;
    gap:64px;
}
#footer .footer_top .footer_btns a {
    font-size:1rem;
    font-weight:600;
    line-height:166%;
    color:#8E8E8E;
    display:block;
    position: relative;
}
#footer .footer_top .footer_btns .privacy {
    color:#222;
}
#footer .footer_top .footer_btns a::after {
    content:'';
    width:4px;
    height: 4px;
    background-color:#CACACA;
    position:absolute;
    right:-34px;
    top:50%;
    transform:translateY(-50%);
}
#footer .footer_top .footer_btns a:last-child::after {
    display:none;
}
#footer .footer_bot {
    margin-top:30px;
    padding-top:30px;
    border-top:1px solid #ccc;
}
#footer .footer_bot .copyrights {
    font-size:0.77rem;
    font-weight:400;
    color:#8E8E8E;
    line-height:157%;
}
#footer .footer_bot .copyrights a {
    color:#8E8E8E;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}
#footer #top_btn {
    width:50px;
    height:50px;
    border-radius:20px;
    border:1px solid #CACACA;
    background-color:#fff;
    display:flex;
    align-items:center;
    flex-direction: column;
    justify-content:center;
    gap:4px;
    text-align:center;
    position: fixed;
    right:30px;
    bottom:80px;
}
#footer #top_btn p {
    font-size:0.77rem;
    font-weight:500;
    color:#8E8E8E;
    font-family: "S-Core Dream";
    line-height:normal;
}

#title {
    width:100%;
    position: relative;
    margin-top:50px;
    margin-bottom:50px;
}
#title .title {
    display:block;
}
#title .khskip {
    display:none;
}
#title .title .loc {
    display:none;
}
#title .title .side_menu {
    display:none;
}
#title .title .desc {
    height: 300px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 50px 30px 50px 50px;
    position: relative;
    overflow:hidden;
    background-repeat:no-repeat;
}
#title .title .desc::before {
    content:'';
    width:100%;
    height:100%;
    background-color:rgba(0, 0, 0, 0.4);
    position:absolute;
    left:0;
    top:0;
}
#title .title .desc .desc_box h2 {
    text-align:center;
    font-size:2.22rem;
    font-weight:600;
    color: #FFF;
    text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.20);
    font-family: "S-Core Dream";
    position: relative;
    z-index:1;
}
#st0 .desc {
    background-image:url(../img/layout/title_bg01.png);
}
#st1 .desc {
    background-image:url(../img/layout/title_bg02.png);
}
#st2 .desc {
    background-image:url(../img/layout/title_bg03.png);
}
#st3 .desc {
    background-image:url(../img/layout/title_bg04.png);
}
#st4 .desc {
    background-image:url(../img/layout/title_bg05.png);
}
#st5 .desc {
    background-image:url(../img/layout/title_bg06.png);
}



/* ********************************** */
@media(max-width:1600px) {}
@media(max-width:1440px) {
    body {
        font-size:17px;
    }
    #header {
        width:100%;
    }
    #header .header {
        max-width:calc(100% - 50px)
    }
    #header .header #logo {
        width:320px;
        height:100px;
        border-radius: 0px 0px 30px 0px;
    }
    #header .header #logo::after {
        top:40px;
    }
    #header .header #logo a img {
        height:50px;
    }
    #gnb .global .depth1 .dl1 .da1 {
        font-size:1rem;
    }

    #title {
        margin-top:40px;
    }


}
@media(max-width:1200px) {
  
    #header .header #logo {
        width: 240px;
    }

    #gnb .global .depth1 .dl1 .da1 {
        font-size:0.97rem;
    }
    #footer .footer_top .footer_btns a {
        font-size:0.97rem;
    }
    #title .title .desc {
        height:240px;
    }
}
@media(max-width:1024px) {
    #aside {
        display:none;
    }
    #layout {
        width:100%;
    }
    
    #header .header {
        width:100%;
        max-width:100%;
        padding:0 20px;
        margin:auto;
        position:unset;
        align-items:center;
    }
    #header .header #logo {
        width:auto;
    }

    #gnb .global .depth1 {
        display:none;
    }
    #gnb .global .gnb_menu_btn {
        display:block;
    }

   #gnb_all {
        position: absolute;
        z-index: 999;
        width: 100%;
        max-width: 300px;
        background-color: #fff;
        right: 0;
        top: 100px;
        border-radius: 0px 0px 0px 30px;
        box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.20);
        padding:30px;
    }
    #gnb_all .gnb_al_ul {
        display:flex;
        flex-direction:column;
        gap:30px;
    }
    #gnb_all .gnb_al_ul .gnb_al_li {}
    #gnb_all .gnb_al_ul .gnb_al_li:nth-child(5),
    #gnb_all .gnb_al_ul .gnb_al_li:nth-child(6) {
        display:none;
    }
    #gnb_all .gnb_al_ul .gnb_al_li .gnb_al_a {
        font-size:1rem;
        font-weight:500;
        line-height:normal;
        display: block;
        text-align:right;
        font-family: "S-Core Dream";
    }
    #gnb_all .gnb_al_ul .all_menu_site {
        display:flex;
        align-items:stretch;
        justify-content:space-between;
    }
    #gnb_all .gnb_al_ul .all_menu_site a {
        display:flex;
        flex-direction: column;
        gap:10px;
    }
    #gnb_all .gnb_al_ul .all_menu_site a p {
        font-size:0.77rem;
        font-weight:500;
        line-height:normal;
        letter-spacing:-0.42px;
        text-align:center;
    }
    #gnb_all .gnb_al_ul .all_menu_member {
        display:flex;
        flex-direction:column;
        gap:20px;
    }
    #gnb_all .gnb_al_ul .all_menu_member a {
        display:block;
        border-radius: 999px;
        border: 1px solid #E8E8E8;
        background-color:#fff;
        padding:7px 15px;
        text-align:center;
        font-size:0.77rem;
        font-weight:400;
        letter-spacing:-0.42px;
    }

    #title {
        margin-top:0;
    }
}
@media(max-width:991px) {
    body {
        font-size:16px;
    }
    
    #header .header #logo {
        height:80px;
    }
    #header .header #logo a img {
        height:44px;
    }

    #gnb #gnb_all {
        top:80px;
    }



    #footer .footer_top .footer_btns {
        gap:44px;
    }
    #footer .footer_top .footer_btns a::after {
        right:-24px;
    }

    #title .title .desc {
        height:180px;
    }

    #title .title .desc .desc_box h2 {
        font-size:2rem;
    }
}
@media(max-width:768px) {
    #footer {
        margin-top:60px;
    }
    #footer .footer_top {
        flex-direction:column;
        align-items: flex-start;
        gap:20px;
    }
    #footer #top_btn {
        bottom:120px;
    }
    #footer .footer_top .footer_logo img {
        height:50px;
    }

 
}
@media(max-width:640px) {

   
    #footer .footer_top .footer_btns {
        gap:18px;
    }
    #footer .footer_top .footer_btns a {
        font-size:0.77rem;
    }
    #footer .footer_top .footer_btns a::after {
        right:-13px;
    }
    #footer .footer_bot .copyrights {
        width:75%;
    }
    #footer #top_btn {
        bottom:50px;
    }


    #title {
        margin-bottom:30px;
    }
    #title .title .desc .desc_box h2 {
        font-size:1.88rem;
    }
}
@media(max-width:320px) {}



@keyframes opacity {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 0.1;
	}

	20% {
		opacity: 0.2;
	}

	30% {
		opacity: 0.3;
	}

	40% {
		opacity: 0.4;
	}

	50% {
		opacity: 0.5;
	}

	60% {
		opacity: 0.6;
	}

	70% {
		opacity: 0.7;
	}

	80% {
		opacity: 0.8;
	}

	90% {
		opacity: 0.9;
	}

	100% {
		opacity: 1;
	}
}

@keyframes bounce {
	0% {
		transform: translateY(0);
	}

	10% {
		transform: translateY(3px);
	}

	20% {
		transform: translateY(6px);
	}

	30% {
		transform: translateY(9px);
	}

	40% {
		transform: translateY(12px);
	}

	50% {
		transform: translateY(15px);
	}

	60% {
		transform: translateY(18px);
	}

	70% {
		transform: translateY(21px);
	}

	80% {
		transform: translateY(24px);
	}

	90% {
		transform: translateY(27px);
	}

	100% {
		transform: translateY(30px);
	}
}