#wrap { overflow: hidden; }
#wrap.fixed { position: fixed; }

/* slick slide common */
.slick-slider { -webkit-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-slide { display: none; height: 100%; min-height: 1px; vertical-align: middle; }
.slick-list { height: 100%; overflow: hidden; }
.slick-list.dragging { cursor: pointer; }
.slick-initialized .slick-slide { display: inline-block; }
.slick-arrow.slick-hidden { display: none; }
.slick-current { opacity: 1; display: block; }
.slick-track { height: 100%; position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; z-index: 0 !important;}
.slider .control {z-index: 1 !important;}
/* slick arrow show */
.arwShow .slick-arrow.slick-hidden { display: inline-block; }

.container { width: 80rem; max-width: 100%; margin: 0 auto; }

#header { position: fixed; width: 100%; backdrop-filter: blur(3px); border-bottom: 1px solid rgba(255, 255, 255, 0.35); z-index: 10; transition: 0.3s; }
#header .container { width: 100%; height: 100%; padding: 0 4rem; display: flex; justify-content: space-between; }

#header .logo { display: flex; align-items: center; height: 5rem; }
#header .logo a { display: flex; align-items: center; height: 5rem; padding-left: 12.5rem; background-image: url('/images/web/sangdam/layout/w_logo.png'); background-repeat: no-repeat; background-position: left center; font-size: 1.5rem; font-weight: 700; color: #fff; }
#header .logo a   { white-space: nowrap; transition: 0.3s; }

.hdBk #header { background: #fff; }
.hdBk #header .logo a { background-image: url('/images/web/sangdam/layout/logo.png'); }
#header.on { background: #fff; }
#header.on::before { position: absolute; top: 5rem; left: 0; width: 100%; height: 1px; background: #ccc; content: ""; }
#header.on .logo a { background-image: url('/images/web/sangdam/layout/logo.png'); }
/* #header.on .logo a span { display: none; font-size: 0; opacity: 0; overflow: hidden; } */

/* gnb */
#gnb a { display: block; transition: 0.3s; }
#gnb .depth01 > ul { display: flex; }
#gnb .depth01 > ul > li { position: relative; }
#gnb .depth01 > ul > li > a { display: flex; justify-content: center; align-items: center; height: 5rem; padding: 0 1rem; color: #fff; font-size: 1.1rem; font-weight: 600; text-align: center; }
#gnb .depth02 { display: none; padding: 1.2rem 0 1.7rem; width: 100%; }
#header.on .depth02 { display: block; }
#gnb .depth02 > ul > li + li { margin-top: 0.5rem; }
#gnb .depth02 > ul > li > a { text-align: center; font-size: 0.85rem; color: #555; }
#gnb .depth01 > ul > li.on > a { color: #0098D8 !important; font-weight: 700; }
#gnb .depth02 > ul > li > a:hover,
#gnb .depth02 > ul > li > a:focus { color: #000; font-weight: 700; }

.hdBk #gnb .depth01 > ul > li > a { color: #111; }
#header.on #gnb .depth01 > ul > li > a { color: #111; padding: 0 2rem; }

.header_util ul { height: 5rem; display: flex; align-items: center; gap: 1.2rem; }
.header_util ul li a { font-size: 0.8rem; font-weight: 600; color: #fff; }

.hdBk .header_util ul li a { color: #A3A3A3; }
#header.on .header_util ul li a { color: #A3A3A3; }

#fullmenuOpen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem; width: 1.65rem; }
#fullmenuOpen em { width: 100%; height: 3px; background: #fff; }

.hdBk #fullmenuOpen em { background: #000; }
#header.on #fullmenuOpen em { background: #000; }

.popFullmenu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 99; }
.popFullmenu .fullmenu_group a { display: block; transition: 0.3s; }


/* 상단버튼 */
.moveTopWrap {position: fixed;bottom: 2rem;right: 1.3rem;display: flex;flex-direction: column;align-items: center;gap: 0.8rem;z-index: 5;}
.moveTopWrap .moveTop { display: none; justify-content: center; align-items: center; width: 3.5rem; height: 3.5rem; background: #fff; border-radius: 50%; box-shadow:0px 0px 1.5rem rgba(0,0,0,.2); font-size: 1.5rem; color: #666; }
.moveTopWrap .moveTop i { transition: 0.3s; }
.moveTopWrap .moveTop:hover i,
.moveTopWrap .moveTop:focus i { animation: bounce infinite 0.8s; }
#wrap.hdBk .moveTopWrap .moveTop { display: flex; }

@media (max-width:720px){
    .moveTopWrap .moveTop { width: 3.2rem; height: 3.2rem; }
}


/* footer */
#footer { background: #1C243D; }
#footer .ft_lnk { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
#footer .f_link ul { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; height: 100%; }
#footer .f_link ul li a { height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; }
#footer .f_link ul li.point a { color: #4CCAFF; font-weight: 600; }
#footer .quick_link { position: relative; }
#footer .quick_link button { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; padding: 0.8rem 1rem; width: 13rem; }
#footer .quick_link button i { transition: 0.3s; } 
#footer .quick_link button.active i { transform: rotate(180deg); } 
#footer .quick_link .lst { display: none; position: absolute; bottom: 100%; left: 0; width: 100%; background: #fff; border: 1px solid #ddd; padding: 1rem; height: 9rem; }
#footer .quick_link .lst ul { overflow-y: auto; height: 100%; }
#footer .quick_link .lst ul li + li { margin-top: 0.5rem; }
#footer .ft_wrap { display: flex; gap: 2rem; padding: 1.65rem 0 3rem; }
#footer .ft_wrap .f_info { color: #fff; opacity: 0.95; font-weight: 300; word-break: keep-all; line-height: 1.2rem; }
#footer .ft_wrap .f_info ul li + li { margin-top: 0.2rem; }
#footer .ft_wrap .f_info .copyright { opacity: 0.7; margin-top: 0.9rem; }


/* 서브 */
.subTitle { position: relative; height: 21rem; overflow: hidden; }
.subTitle .S_visual { height: 100%; }
.subTitle .S_visual img { width: 100%; height: 100%; object-fit: cover; } 
.subTitle .dep01 { position: absolute; bottom: 6.8rem; left: 0; width: 100%; text-align: center; color: #fff; padding: 0 1rem; font-size: 3rem; font-weight: 700; }

#lnb nav > .select { display: none; }
#lnb nav { width: 70rem; margin: 0 auto; }
#lnb nav .dep02 > li > a:hover,
#lnb nav .dep02 > li > a:focus { color: #0098D8; font-weight: 700; }

.subHeader { display: flex; justify-content: space-between; align-items: center; width: 80rem; margin: 4rem auto 0; gap: 1.5rem; }
.subHeader #pageTitle { font-size: 2.5rem; color: #000; font-weight: 700; line-height: normal; }

.subHeader .subLocation { display: flex; justify-content: end; flex: 1; gap: 1.4rem; }
.subHeader .subLocation li { position: relative; color: #666; }
.subHeader .subLocation li + li::before { position: absolute; top: 50%; left: -0.75rem; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #cdcdcd; content: ""; }
.subHeader .subLocation li:last-child { font-weight: 700; }

.subHeader .snsBox { position: relative; display: flex; gap: 5px; }
.subHeader .snsBox button { display: flex; justify-content: center; align-items: center; width: 1.6rem; height: 1.6rem; border-radius: 0.5rem; color: #333; background: #F3F3F3; }
.subHeader .snsBox .snsMore { display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; background: #E9F8FF; border-radius: 1rem; flex-direction: column; gap: 0.2rem; width: 1.6rem; padding: 0.5rem 0; z-index: 1; }
.subHeader .snsBox .snsMore a { display: flex; width: 100%; justify-content: center; align-items: center; color: #000; }
.subHeader .snsBox.active .snsMore { display: flex; }



.subContent { min-height: 30rem; width: 80rem; margin: 0 auto; margin: 2rem auto 3rem; }

@media (max-width:1880px) {
    #header .container { padding: 0 2rem; }
}

@media (max-width:1780px) {
    #header .container { padding: 0 1rem; }
    
    #header.on #gnb .depth01 > ul > li > a { padding: 0 1.5rem; }
}

@media (max-width:1640px) {
    .container { width: 100%; padding: 0 1rem; }

    #header .logo a { background-size: 9rem; padding-left: 9.5rem; font-size: 1.1rem; }

    .popFullmenu .fullmenu_wrap { max-width: 100%; padding: 0 1rem; }
    .popFullmenu .fullmenuClose { right: 1rem; }

    .subTitle .dep01 { font-size: 2rem; }

    .subHeader { width: 100%; padding: 0 1rem; }

    .subContent { width: 100%; padding: 0 1rem; }
}

@media (max-width:1500px) {

    #header.on #gnb .depth01 > ul > li > a { padding: 0 1.2rem; }
}

@media (max-width:1440px) {
    #header .logo,
    #header .logo a { height: 4rem; }

    .header_util ul { height: 4rem; }

    #nav { display: none; }

    #lnb nav { width: 100%; }
}

@media (max-width:1280px) {
    .popFullmenu .fullmenu_group .depth01 > ul { gap: 1.5rem; }
    .popFullmenu .fullmenu_group .depth01 > ul > li { width: calc((100% - 4.5rem) / 4); }
}

@media (min-width:1241px) {
    #lnb { border-bottom: 1px solid #ddd; }
    #lnb nav .dep02 { display: flex; }
    #lnb nav .dep02 > li { position: relative; flex: 1; padding: 0 1rem; }
    #lnb nav .dep02 > li + li::before { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 1.25rem; background: #ddd; content: ""; }
    #lnb nav .dep02 > li > a { position: relative; display: flex; justify-content: center; align-items: center; height: 4rem; font-size: 1.1rem; color: #555; transition: 0.3s; }
    #lnb nav .dep02 > li > a > span { position: relative; }
    #lnb nav .dep02 > li.active > a { color: #0098D8; font-weight: 700; }
    #lnb nav .dep02 > li.active > a::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: #0098D8; content: ""; }
    #lnb nav .dep02 > li.active > a > span::before { position: absolute; top: -3px; right: -1.5rem; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #0098D8; content: ""; }
}

@media (max-width:1240px) {

    .subTitle { height: 16rem; }
    .subTitle .dep01 { font-size: 1.7rem; }
    
    .subCntBody { display: flex; flex-wrap: wrap; padding: 0 1rem; }

    #lnb { position: relative; width: 100%; order: 2; }
    #lnb nav > .select { position: relative; display: block; border-radius: 2rem; border: 1px solid #ddd; padding: 0.7rem 2rem 0.7rem 0.7rem; color: #111; font-size: 1rem; font-weight: 700; }
    #lnb nav > .select::before { position: absolute; top: 50%; transform: translateY(-50%); right: 0.7rem; font-family: 'Remixicon'; font-size: 1.1rem; font-weight: 500; content: "\ea4e"; }
    #lnb nav > .select.on::before { content: "\ea78"; }
    #lnb nav .dep02 { position: absolute; top: calc(100% + 0.5rem); width: 100%; border: 1px solid #ddd; border-radius: 1rem; background: #fff; padding: 0.7rem; display: none; z-index: 1; }
    #lnb nav .dep02 > li + li { margin-top: 0.5rem; }
    #lnb nav .dep02 > li > a { font-size: 0.9rem; }
    #lnb nav .dep02 > li > a > span { position: relative; }
    #lnb nav .dep02 > li.active > a { color: #0098D8; font-weight: 700; }
    #lnb nav .dep02 > li.active > a > span::before { position: absolute; top: -3px; right: -0.8rem; width: 0.3rem; height: 0.3rem; border-radius: 50%; background: #0098D8; content: ""; }

    .subHeader { position: relative; display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 0.7rem auto 0.9rem; padding: 0; order: 1; }

    .subHeader #pageTitle { width: 100%; font-size: 1.3rem; order: 2; }

    .subHeader .subLocation { width: 100%; order: 1; justify-content: start; }

    .subHeader .snsBox { position: absolute; bottom: 0; right: 0; }
    .subHeader .snsBox button.btnPrint { display: none; }
}

@media (min-width:961px) {
    .popFullmenu { padding: 2.7rem 0; }
    .popFullmenu .fullmenu_wrap { position: relative; max-width: 80rem; margin: 0 auto; }
    .popFullmenu .fullmenu_wrap .logo a { display: inline-block; line-height: 0; }
    .popFullmenu .fullmenu_wrap h2 { margin: 3.2rem 0 5rem; text-align: center; font-size: 2.5rem; font-weight: 700; color: #000; line-height: normal; }
    .popFullmenu .fullmenu_group { height: calc(100vh - 18.2rem); overflow-y: auto; }
    .popFullmenu .fullmenu_group .depth01 > ul { display: flex; flex-wrap: wrap; gap: 2.6rem; }
    .popFullmenu .fullmenu_group .depth01 > ul > li { width: calc((100% - 7.8rem) / 4); min-height: 330px; }
    .popFullmenu .fullmenu_group .depth01 > ul > li > a { text-align: center; background: #0098D8; color: #fff; font-size: 1.2rem; font-weight: 600; padding: 0.7rem; }
    .popFullmenu .fullmenu_group .depth02 { height: calc(100% - 2.8rem); border: 1px solid #ddd; border-top: none; padding: 1.2rem 1.5rem; }
    .popFullmenu .fullmenu_group .depth02 > ul > li + li { margin-top: 0.8rem; }
    .popFullmenu .fullmenu_group .depth02 > ul > li > a { font-size: 1rem; }
    .popFullmenu .fullmenuClose { position: absolute; top: 0; right: 0; font-size: 2rem; font-weight: 500; color: #000; }
    .popFullmenu .fullmenu_group .depth02 > ul > li > a:hover,
    .popFullmenu .fullmenu_group .depth02 > ul > li > a:focus { color: #000; font-weight: 700; }
}

@media (max-width:960px) {
    .popFullmenu .fullmenu_wrap h2 { display: none; }
    .popFullmenu .fullmenu_wrap { padding: 0; }
    .popFullmenu .fullmenu_wrap .logo { display: flex; align-items: center; height: 4rem; padding: 0 1rem; border-bottom: 1px solid #D8DBDF; }
    .popFullmenu .fullmenu_wrap .logo a img { height: 1.125rem; }
    .popFullmenu .fullmenu_group { position: relative; height: calc(100vh - 4rem); background: #F4FCFF; }
    .popFullmenu .fullmenu_group::before { position: absolute; top: 0; left: 7rem; width: 1px; height: 100%; background: #ddd; content: ""; z-index: 1; }
    .popFullmenu .fullmenu_group a { display: block; }
    .popFullmenu .fullmenu_group .depth01 > ul > li { display: flex; }
    .popFullmenu .fullmenu_group .depth01 > ul > li > a { flex: none; width: 7rem; font-size: 0.9rem; padding: 0.6rem 0.75rem; }
    .popFullmenu .fullmenu_group .depth01 > ul > li.active > a { background: #0098D8; color: #fff; font-weight: 600; }
    .popFullmenu .fullmenu_group .depth02 { position: absolute; top: 0; left: 7rem; width: calc(100% - 7rem); height: calc (100vh - 4rem); display: none; background: #fff; }
    .popFullmenu .fullmenu_group .depth01 > ul > li.active .depth02 { display: block; }
    .popFullmenu .fullmenu_group .depth02 > ul > li > a { position: relative; font-size: 0.85rem; padding: 0.6rem 2rem 0.6rem 0.75rem; border-bottom: 1px solid #ddd; }
    .popFullmenu .fullmenu_group .depth02 > ul > li > a::before { position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); font-family: 'Remixicon'; font-size: 1rem; font-weight: 500; color: #888; content: "\ea6e"; }
    .popFullmenu .fullmenuClose { position: absolute; top: 1.1rem; right: 0.7rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #1C243D; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; font-weight: 500; }
    .popFullmenu .fullmenu_group .depth02 > ul > li > a:hover,
    .popFullmenu .fullmenu_group .depth02 > ul > li > a:focus { color: #000; font-weight: 700; }
}

@media (max-width:768px) {
    #header .logo,
    #header .logo a { height: 3.5rem; }
    #header .logo a { background-size: 7rem; padding-left: 7.5rem; font-size: 0.9rem; font-weight: 600; }

    .header_util ul { height: 3.5rem; }

    #fullmenuOpen em { height: 2px; }

    .popFullmenu .fullmenu_wrap .logo { height: 3.5rem; }
    .popFullmenu .fullmenu_wrap .logo a img { height: 0.9rem; }
    .popFullmenu .fullmenu_group { height: calc(100vh - 3.5rem); }
    .popFullmenu .fullmenu_group .depth02 { height: calc(100vh - 3.5rem); }
    .popFullmenu .fullmenuClose { top: 0.8rem; }

    #footer .ft_lnk { flex-direction: column; }
    #footer .f_link ul { gap: 0.5rem 1.5rem; }

    #footer .quick_link button { width: 100%; }

    #footer .ft_wrap { flex-direction: column; gap: 1rem; }

    .subTitle { height: 13rem; }
    .subTitle .dep01 { bottom: 4.8rem; font-size: 1.5rem; }
}

@media (max-width:380px) {
    #header .logo a span { display: none; }
}