@charset "utf-8";


 #logo .ir-logo {width: 265px;height: 32px;background: url(/images/mayor/common/logo.svg) no-repeat 50% 50%;}
 #header:after {display:none;}

#header #animate.action + .r_con .sitebox > button {background:var(--c_gray_60);border:none;}
.sitelink {display:inline-flex;align-items:center;height:100%;}
#header #animate.action + .r_con .sitelink .ir {background:url(/images/common2023/ico_menu.svg) no-repeat 50% 50%;}

#langwrap.clickOpen button {gap:0;font-size:0;}
#langwrap.clickOpen button::after {display:none;}
#langwrap.clickOpen button i {border:none;border-radius:24px;}
#langwrap.clickOpen button i::after {width:24px;height:24px;mask:url(/images/common2023/bg_global_w.svg) no-repeat 50%;background:var(--white);animation:none;}
#langwrap.clickOpen button:hover i::after {background:var(--c_primary);}
#langwrap.clickOpen.on .wrap {top:0;right:30px;left:inherit;}
#header #animate.action + .r_con #langwrap.clickOpen button i::after {background:var(--c_gray_60);}
#header #animate.action + .r_con #langwrap.clickOpen button:hover i::after {background:var(--c_primary);}

#container > .layout:before {content: none;display: none;}
#content {float: none;width: auto;}

#mo_gnb {right:-250px;}

 /* 햄버거메뉴 */
.menu-trigger {position: relative;display: inline-block;width: 26px;height: 22px;}
.menu-trigger,
.menu-trigger span {display: inline-block;transition: all .4s;box-sizing: border-box;}
.menu-trigger span {position: absolute;left: 0;width: 100%;height: 2px;background-color:var(--c_gray_70);border-radius: 4px;}
.menu-trigger span:nth-of-type(1) {top: 0;}
.menu-trigger span:nth-of-type(2) {top: 10px;}
.menu-trigger span:nth-of-type(3) {bottom: 0;}
.menu-trigger:hover span:nth-of-type(1),
.menu-trigger:hover span:nth-of-type(3) {width : 10px;}
.menu-trigger:hover span:nth-of-type(1) {-webkit-transform : translate(-1px, 7px) rotate(-45deg);transform : translate(-1px, 7px) rotate(-45deg);}
.menu-trigger:hover span:nth-of-type(3) {-webkit-transform : translate(-1px, -7px) rotate(45deg);transform : translate(-1px, -7px) rotate(45deg);}

/* 서브비주얼 배경 대응 */
#svisual .local-background-01,
#svisual .bg_visual.local-background-01,
#svisual .visual_img.local-background-01,
#svisual.local-background-01 {background:url(/images/mayor/common/sub_v01.jpg) no-repeat 50% 50%;background-size:cover;}

#svisual .local-background-02,
#svisual .bg_visual.local-background-02,
#svisual .visual_img.local-background-02,
#svisual.local-background-02 {background:url(/images/mayor/common/sub_v02.jpg) no-repeat 50% 50%;background-size:cover;}

#svisual .local-background-03,
#svisual .bg_visual.local-background-03,
#svisual .visual_img.local-background-03,
#svisual.local-background-03 {background:url(/images/mayor/common/sub_v03.jpg) no-repeat 50% 50%;background-size:cover;}

#svisual .local-background-04,
#svisual .bg_visual.local-background-04,
#svisual .visual_img.local-background-04,
#svisual.local-background-04 {background:url(/images/mayor/common/sub_v04.jpg) no-repeat 50% 50%;background-size:cover;}

#svisual .local-background-05,
#svisual .bg_visual.local-background-05,
#svisual .visual_img.local-background-05,
#svisual.local-background-05 {background:url(/images/mayor/common/sub_v05.jpg) no-repeat 50% 50%;background-size:cover;}

#svisual .local-background-em,
#svisual .bg_visual.local-background-em,
#svisual .visual_img.local-background-em,
#svisual.local-background-em {background:url(/images/mayor/common/sub_v01.jpg) no-repeat 50% 50%;background-size:cover;}


@media all and (min-width: 768px) {
    #svisual .local-background-01 {
        background:url(/images/mayor/common/sub_v01.jpg) no-repeat;
        background-size: cover;
        background-position: 45% 50%
    }

    #svisual .local-background-02 {
        background: url(/images/mayor/common/sub_v02.jpg) no-repeat;
        background-size: cover;
        background-position: 65% 50%
    }

    #svisual .local-background-03 {
        background: url(/images/mayor/common/sub_v03.jpg) no-repeat;
        background-size: cover;
        background-position: 55% 50%
    }

    #svisual .local-background-04 {
        background: url(/images/mayor/common/sub_v04.jpg) no-repeat;
        background-size: cover;
        background-position: 40% 50%
    }

    #svisual .local-background-05 {
        background: url(/images/mayor/common/sub_v05.jpg) no-repeat;
        background-size: cover;
        background-position: 40% 50%
    }

    #svisual .local-background-em {
        background: url(/images/mayor/common/sub_v01.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }
}

@media all and (min-width: 1024px) {
    #svisual .local-background-01 {
        background:url(/images/mayor/common/sub_v01.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }

    #svisual .local-background-02 {
        background: url(/images/mayor/common/sub_v02.jpg) no-repeat;
        background-size: cover;
        background-position: 65% 50%
    }

    #svisual .local-background-03 {
        background: url(/images/mayor/common/sub_v03.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }

    #svisual .local-background-04 {
        background: url(/images/mayor/common/sub_v04.jpg) no-repeat;
        background-size: cover;
        background-position: 45% 50%
    }

    #svisual .local-background-05 {
        background: url(/images/mayor/common/sub_v05.jpg) no-repeat;
        background-size: cover;
        background-position: 45% 50%
    }

    #svisual .local-background-em {
        background: url(/images/mayor/common/sub_v01.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }
}

@media all and (min-width: 1200px) {
    #svisual .local-background-01 {
        background:url(/images/mayor/common/sub_v01.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }

    #svisual .local-background-02 {
        background: url(/images/mayor/common/sub_v02.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }

    #svisual .local-background-03 {
        background: url(/images/mayor/common/sub_v03.jpg) no-repeat;
        background-size: cover;
        background-position: 60% 50%
    }

    #svisual .local-background-04 {
        background: url(/images/mayor/common/sub_v04.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }

    #svisual .local-background-05 {
        background: url(/images/mayor/common/sub_v05.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }

    #svisual .local-background-em {
        background: url(/images/mayor/common/sub_v01.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }
}

@media all and (min-width: 1400px) {
    #svisual .local-background-01 {
        background:url(/images/mayor/common/sub_v01.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }

    #svisual .local-background-02 {
        background: url(/images/mayor/common/sub_v02.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }

    #svisual .local-background-03 {
        background: url(/images/mayor/common/sub_v03.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }

    #svisual .local-background-04 {
        background: url(/images/mayor/common/sub_v04.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }

    #svisual .local-background-05 {
        background: url(/images/mayor/common/sub_v05.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }

    #svisual .local-background-em {
        background: url(/images/samsun/common/sub_v01.jpg) no-repeat;
        background-size: cover;
        background-position: 50% 50%
    }
}

@keyframes zoomBg {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.04);
  }
}


/* 푸터영역 */
#footer{z-index:101;position:relative;padding:60px 0;background:var(--c_gray_10)}
#footer *{font-family:var(--f_gmarket);}
#footer .layout{position:relative;display:flex;justify-content:space-between;}
#footer .layout:after{display:none}
#footer .finfo{position:relative;}
#footer .footer_logo{display:inline-block;position:absolute;left:0;top:0;width:146px;height:93px;background:url(/images/kor/common/flogo.png) no-repeat;}
#footer .footer_menu {margin-top:10px;}
#footer .footer_menu ul{display:flex;align-items:center;flex-wrap:wrap;border-bottom:none;margin:0;}
#footer .footer_menu li{position:relative;margin-left:18px;padding-left:18px;line-height:1}
#footer .footer_menu li:before{content:"";display:block;position:absolute;top:50%;left:0;margin-top:-7.5px;width:1px;height:15px;background-color:#DEDEDE;}
#footer .footer_menu li:first-child{margin-left:0;padding-left:0}
#footer .footer_menu li:first-child:before{display:none}
#footer .footer_menu li a:first-child{padding-right:0;}
#footer .footer_menu li a{display:inline-block;height:30px;line-height:30px;color:#525252;font-size:15px;font-family:var(--f_gmarket);}
#footer .footer_menu li a:hover{text-decoration:underline;}
#footer .footer_menu li.privacy a{color:#2581d0;font-weight:normal}
#footer address,
#footer .copy{color:#525252;font-size:15px;line-height:1.8;margin-top:10px;}
#footer address div{display:inline-block;font-size:15px;}
#footer address div span{margin-right:10px;}
#footer .rcon{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:20px;margin-right:80px;}
#footer .rcon .floating{position:fixed;bottom:34px;right:50px;z-index:99}
#footer .rcon .floating *{transition:all 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000)}
#footer .rcon .floating a{display:block;position:relative;width:58px;height:58px;border-radius:20px;font-size:0;box-shadow:0px 2px 6px 0px rgba(0,0,0,0.35);background:#6B7B8E url(/images/kor2/common/ico_arr_top.svg) no-repeat 50% 50%;}
#footer .rcon .floating .btn_top{margin-top:-60px;opacity:0;transform:scale(0,0)}
#footer .rcon .floating .btn_top.show{margin-top:20px;opacity:1;transform:scale(1,1)}
#footer .rcon .etc{display:flex;align-items:center;gap:20px;}
#footer .rcon .etc .call{display:inline-block;width:143px;height:54px;font-size:13px;font-family:var(--f_gmarket);}
#footer .rcon .etc .call span{display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--f_gmarket);}
#footer .rcon .etc .call span::after{content:"";display:block;width:24px;height:24px;background:url(/images/kor2/common/ico_call.png) no-repeat;}
#footer .rcon .etc .call b{display:block;font-family:var(--f_gmarket);color:#014099;font-size:25px;font-weight:800}

.main #footer {background:#FFF}
.main #footer .layout {max-width: 1700px;}


/* 접근성 마크*/
#footer .mark a {display:block;width:110px;height:78px;}
#footer .mark a img {width:100%;}

#footer .logo {display:block; content:''; background:url(/images/common2023/logo_kor.svg) no-repeat;width: 159px;height: 42px; margin:20px 0;}

/* 패밀리사이트 */
.familywrap{display:flex;}
.family_site {position:relative;width:34%;border:1px solid var(--c_gray_30);border-left:0;}
.family_site > button{display:block;width:100%;height:60px;line-height:60px;padding:0 35px;font-size:15px;text-align:left;color:rgba(0,0,0,.7);background:#fff;}
.family_site > button span{display:block;position:absolute;right:30px;top:26px;width:7px;height:7px;margin:-2px 0 0 10px;border:solid rgba(0,0,0,.7);border-width:0 2px 2px 0;transform:rotate(45deg);}
.family_site:first-child{border-left:1px solid var(--c_gray_30);border-radius:10px 0 0  10px;}
.family_site:first-child button{border-radius:10px 0 0  10px;}
.family_site:first-child.on,
.family_site:first-child.on button{border-radius:0;}
.family_site > div {display:none;position:absolute;left:0;bottom:0;width:100%;}
.family_site.on > div {display:block;}
.family_site > div .inner {overflow-y:auto;max-height:300px;padding:30px 0;background:#394049;}
.family_site > div ul li a {display:block;position:relative;padding:8px 35px 8px 45px;background:#394049;color:rgba(255,255,255,.7);}
.family_site > div ul li a:before {content:'';display:block;position:absolute;left:35px;top:19px;width:2px;height:2px;border-radius:50%;background:#d1d2d4;}
.family_site > div ul li a:focus {outline:none;text-decoration:underline;}
.family_site > div .clickClose{display:block;position:relative;width:100%;height:60px;line-height:60px;padding:0 35px;border-top:1px solid #616161;font-size:15px;text-align:left;color:rgba(255,255,255,.7);background:#394049;}
.family_site > div .clickClose:before,
.family_site > div .clickClose:after {display:none;}
.family_site > div .clickClose span {display:block;position:absolute;right:30px;top:30px;width:7px;height:7px;margin:-2px 0 0 10px;border:solid rgba(255,255,255,.7);border-width:0 2px 2px 0;transform:rotate(225deg);}

@media(max-width:1280px){
    .familywrap .sitebox, .family_site {width:50%;}
    .family_site:nth-of-type(3){border-left:1px solid var(--c_gray_30)}
    .family_site:nth-of-type(3),
    .family_site:nth-of-type(4){border-top:0;}
    .family_site.sitebox{border:0;}
    #footer .fwrap{flex-direction:column;align-items:center;padding:0;text-align:center;}
    #footer .rcon {margin:0;}
    #footer .rcon .btn_top{position:absolute;right:0;bottom:4px;}
    #footer .rcon .etc {margin-top:20px;}
    .family_site:first-child,
    .family_site:first-child button{border-radius:0;}
    #footer .logo {margin:20px aut;}
     #footer .floating {right:2%;}
    #footer .floating a {width:46px;height:46px;border-radius:16px;}
}   
@media(max-width:799px){
	.familywrap {flex-wrap:wrap;}
	.familywrap .sitebox, .family_site {width:100%;}
	.family_site {border-left:1px solid var(--c_gray_30);}
    #footer address, #footer .copy{font-size:14px;line-height:1.4}
    #footer{padding:20px 0;}
    #footer .footer_menu{width:100%}
    #footer .footer_menu ul{justify-content:center;}
    #footer .rcon .etc .call {display:flex;flex-direction:column; align-items: flex-start;font-size:18px;width:100%;height:auto;font-weight:bold;color:#252f3e;background:none;}
    #footer .rcon .etc .call span{font-size:13px;align-items:baseline}
    #footer .rcon .etc .call b{font-size:20px;}
    #footer .rcon .btn_top{width:48px;height:48px;}
    .family_site > button,
    .family_site > div .clickClose{padding:0 16px;}
    .family_site > button span,
    .family_site > div .clickClose span{right:20px;}
    .family_site > div .inner{padding:20px 0}
    .family_site > div ul li a{padding:8px 16px 8px 16px}
    .family_site > div ul li a:before{display:none;}
    #footer .floating{bottom: 40px;} 
    #footer .floating {right:16px;}
}
@media(max-width:640px){
    #footer .rcon .etc {padding-bottom:50px;}
}
@media(max-width:480px){
    #footer .rcon .floating{right:18px;}
}

/* 패밀리누리집 */
.sitebox{position:relative;width:32%;background:var(--c_primary_m); border-radius: 0 10px 10px 0;}
.sitebox > button{display:block;width:100%;height:62px;line-height:62px;padding:0 35px;font-size:15px;text-align:left;color:#fff;}
.sitebox > button span {display:block;position:absolute;right:30px;top:26px;width:7px;height:7px;margin:-2px 0 0 10px;border:solid rgba(255,255,255,.7);border-width:0 2px 2px 0;transform:rotate(45deg);}
.sitebox .wrap{display:none}
.sitebox.on > button span{transform:rotate(225deg)}
.sitebox.on > .wrap{z-index:110;position:fixed;top:0;bottom:auto;left:0;display:block;width:100%;height:100%; max-height:100%; padding:60px 50px; background-color:rgba(0, 0, 0, 0.5);}
.sitebox .mymenu_contents{position:relative;border-radius:20px;overflow:hidden;background:#fff;}
.sitebox .mymenu_contents .clickClose{position:absolute;right:20px;top:20px;width:62px;height:62px;background:transparent;}
.sitebox .mymenu_contents .ti{padding:30px 60px;color:#fff;background:var(--c_primary_m)}
.sitebox .mymenu_contents .ti h2{display:flex;align-items:center;gap:8px;margin:0;font-size:24px;font-weight:600;color:#fff;}
.sitebox .mymenu_contents .ti h2::before{content:"";display:block;width:32px;height:32px;background:url(/images/kor2/main/ico_mymenu_w.svg) no-repeat}
.sitebox .mymenu_contents .ti p{color:#fff;}
.sitebox .mymenu_contents .contents{display:flex;flex-direction:column;}
.sitebox .mymenu_contents .contents .siteLink_inner{display:flex;justify-content:center;padding:60px 20px 60px;}
.sitebox .mymenu_contents .contents .siteLink_inner li{width:160px;text-align:center;}
.sitebox .mymenu_contents .contents .siteLink_inner li a{display:flex;flex-direction:column;}
.sitebox .mymenu_contents .contents .siteLink_inner li a i{display:block;width:80px;height:80px;margin:0 auto 10px;border-radius:24px;background:#fff;box-shadow: 17px 30px 50px 0px rgba(140, 140, 140, 0.20);}
.sitebox .mymenu_contents .contents .siteLink_inner li a i::after{content:"";display:block;width:60px;height:60px;margin:10px auto;background-position:50% 50%;background-repeat:no-repeat}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico1 a i::after{background-image:url(/images/kor2/common/ico_family01.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico2 a i::after{background-image:url(/images/kor2/common/ico_family02.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico3 a i::after{background-image:url(/images/kor2/common/ico_family03.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico4 a i::after{background-image:url(/images/kor2/common/ico_family04.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico5 a i::after{background-image:url(/images/kor2/common/ico_family05.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico6 a i::after{background-image:url(/images/kor2/common/ico_family06.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico7 a i::after{background-image:url(/images/kor2/common/ico_family07.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico8 a i::after{background-image:url(/images/kor2/common/ico_family08.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico9 a i::after{background-image:url(/images/kor2/common/ico_family09.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico10 a i::after{background-image:url(/images/kor2/common/ico_family10.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico11 a i::after{background-image:url(/images/kor2/common/ico_family11.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico12 a i::after{background-image:url(/images/kor2/common/ico_family12.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico13 a i::after{background-image:url(/images/kor2/common/ico_family13.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico14 a i::after{background-image:url(/images/kor2/common/ico_family14.svg);}
.sitebox .mymenu_contents .contents .siteLink_inner li.ico15 a i::after{background-image:url(/images/kor2/common/ico_family15.svg);}


.sitebox .mymenu_contents .contents .conbox{padding:60px 140px;background:var(--c_gray_5)}
.sitebox .mymenu_contents .contents .conbox .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;max-height:180px;overflow-y:auto;}

@media(max-width:1200px){
	.sitebox .mymenu_contents .contents .siteLink_inner{flex-wrap:wrap;justify-content:flex-start}
	.sitebox .mymenu_contents .contents .siteLink_inner li{width:33.3%;}
	.sitebox .mymenu_contents .contents .conbox .wrap{gap:40px;justify-content:flex-start;}
    .sitebox > button{padding:0 16px;}
    .sitebox .mymenu_contents .contents .conbox{padding:30px;}
}
@media(max-width:640px){
	.sitebox.on > .wrap{padding:30px;}
	.sitebox.on > .wrap .ti{padding:20px;}
	.sitebox.on > .wrap .ti h2{font-size:18px;}
	.sitebox.on > .wrap .ti p{display:none;}
	.sitebox.on > .wrap .contents{flex-direction:column;}
	.sitebox.on > .wrap .contents .inner{width:100%;max-height:180px;padding:20px;}
	.sitebox .mymenu_contents .contents .conbox .wrap{flex-direction:column;gap:0;flex-wrap:nowrap;}
	.sitebox .mymenu_contents .contents .conbox .wrap .list_2st{margin:0;}
	.sitebox .mymenu_contents .contents .siteLink_inner{gap:4px;width:100%;height:180px;overflow:auto;flex-wrap:wrap;padding:30px 20px;padding-top:20px;margin:0;}
	.sitebox .mymenu_contents .contents .siteLink_inner li{width:100%;text-align:left;}
	.sitebox .mymenu_contents .contents .siteLink_inner li a{flex-direction:row;align-items:center;gap:4px;}
	.sitebox .mymenu_contents .contents .siteLink_inner li a::before{width:32px;height:32px;margin:0;background-size:51%;}
	.sitebox .mymenu_contents .contents .siteLink_inner li a i{width:40px;height:40px;margin:0 10px 10px 0;}
	.sitebox .mymenu_contents .contents .siteLink_inner li a i:after{width:16px;height:25px;margin:8px auto;background-size:100% auto}
	.sitebox .mymenu_contents .contents .conbox{padding:20px;}
	.sitebox .mymenu_contents .clickClose{top:10px;right:10px;}
}


/* animation */
.sitebox .mymenu_contents .contents .siteLink_inner li a:hover i,
.sitebox .mymenu_contents .contents .siteLink_inner li a:foucs i{box-shadow:-2px -2px 1px -1px rgba(140, 140, 140, 0.60);}
.sitebox .mymenu_contents .contents .siteLink_inner li a:hover i::after,
.sitebox .mymenu_contents .contents .siteLink_inner li a:foucs i::after{animation:ico-vertical 1s ease-in-out 1;}


@keyframes ico-vertical {
  16.65% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }

  33.3% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}