@charset "UTF-8";
:root{
  --primary-color: #E41242;
  --header-bottom-line-color: #DEDEDE;
}
.wrap_thumb{position: relative;overflow: hidden}
.wrap_thumb:after{position: absolute;top:0;left: 0;right: 0;bottom:0;border-radius: inherit;border:1px solid #ddd;opacity: .4;pointer-events: none;content:''}
.ico_comm{display: block;overflow: hidden;font-size: 1px;line-height: 0;color:transparent}

.wrapper{display: flex;flex-direction: column;overflow: hidden;min-height: 100vh}
.header{position: relative;z-index: 1000;flex:none}
.header.on:before{opacity: 1;visibility: visible}
.header:before{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: -10;background: rgba(0, 0, 0, 0.6);opacity: 0;visibility: hidden;transition: all 0.3s;content: ''}
.header .inner, .footer .inner{max-width: 1332px;margin:0 auto;padding:0 16px}
.footer{flex:none;position: relative;margin-top: auto}
#content_wrap{flex: none}
#content_wrap .container:after{display: block;clear:both;content:''}

@media
only screen and (min-width: 1200px) {
  div.container{width: auto;max-width: 1332px;padding:0 16px}
  div.content{overflow: hidden;width: auto;padding: 40px 0 40px 55px;float:none}
}

/* HEADER */
.head_etc_info{display: none;position: relative}
.head_etc_info:before,
.head_etc_info:after{position: absolute;top:0;bottom:0;width: 50%;content:''}
.head_etc_info:before{left: 0;background: #e20e47}
.head_etc_info:after{right: 0;background: #ff4219}
.head_etc_info .inner{display: flex;justify-content: space-between;position: relative;z-index: 10;background: rgb(226,14,71);background: linear-gradient(70deg, rgba(226,14,71,1) 0%, rgba(255,66,25,1) 100%)}

.list_snsinfo{display: flex;gap:15px;align-items: center}
.list_snsinfo a{display: flex;gap:8px;align-items: center;position: relative;padding:10px 0;font-weight: 500;font-size: 14px;line-height: 30px;color:#fff}
.list_snsinfo a:before{position: absolute;left: 38px;top:calc(50% + 12px);width: 0;height: 2px;background: currentColor;transition: width .3s;transform: translateY(-50%);content:''}
.list_snsinfo a:hover:before, .list_snsinfo a:focus:before{width: calc(100% - 38px)}
.list_snsinfo a:hover .ico_comm, .list_snsinfo a:focus .ico_comm{background-color: rgba(0,0,0,.23)}
.list_snsinfo .ico_comm{width: 30px;height: 30px;border-radius: 50%;background: rgba(255,255,255,.23) url(/home/www/images/common/ico_sns_insta.png) 0 0 no-repeat;background-size: cover;transition: all .3s}
.list_snsinfo .ico_blog{background-image: url(/home/www/images/common/ico_sns_blog.png)}
.list_snsinfo .ico_youtube{background-image: url(/home/www/images/common/ico_sns_youtube.png)}
.list_snsinfo .ico_facebook{background-image: url(/home/www/images/common/ico_sns_facebook.png)}
.list_snsinfo .ico_story{background-image: url(/home/www/images/common/ico_sns_kakaostory.png)}

.area_interface{display: flex;gap:20px;align-items: center}
.area_interface .tit_zoom{margin-right: 10px;font-size: 13px;line-height: 16px;color:#fff}
.area_interface .set_zoom{display: flex;align-items: center}
.area_interface .set_zoom a{display: flex;width: 30px;height: 30px;color:#fff;border:1px solid #f96259;transition: border .3s}
.area_interface .set_zoom a:hover, .area_interface .set_zoom a:focus{position: relative;border-color: #fff}
.area_interface .set_zoom a + a{margin-left: -1px}
.area_interface .set_zoom .btn_reset{background: #f96259}
.area_interface .set_zoom .btn_reset:hover i{transform: rotate(360deg)}
.area_interface .set_zoom i{margin: auto;font-size: 17px;transition: all .5s}
.area_interface .info_user{display: flex;align-items: center}
.area_interface .info_user a{position: relative;padding:10px 0;font-weight: 700;font-size: 13px;line-height: 16px;color:#fff}
.area_interface .info_user a:after{position: absolute;bottom:8px;left: 0;width: 0;height: 1px;background:#fff;transition: width .3s;content:''}
.area_interface .info_user a:hover:after, .area_interface .info_user a:focus:after{width: 100%}
.area_interface .info_user a + a{margin-left: 24px}
.area_interface .info_user a + a:before{position: absolute;left: -12px;top:50%;width: 1px;height: 12px;background: #fff;transform: translateY(-50%);content:''}
.area_interface .info_user .txt_user{font-weight: 500;font-size: 13px;line-height: 16px;color:#fff;margin-right:10px}

.pc_gnb_area{display: none;background: #fff}
.pc_gnb_area nav{display: flex}
.pc_gnb_area .inner{display: flex;min-height: 105px}
.pc_gnb_area .inner h1{display: flex; margin-right:auto}
.pc_gnb_area .link_logo{display: block;width: 260px;margin: auto;padding:15px 0}
.pc_gnb_area .link_logo.gj{width:104px; margin-left:15px;}
.pc_gnb_area .link_logo img{width: 100%;vertical-align: top}

/* PC GNB */
.list_gnb{display: flex;gap:30px}
.list_gnb > li{display: flex}
.list_gnb .link_gnb{display: flex;gap:10px;align-items: center;position: relative;margin: auto;padding:24px 7px;font-weight: 500;font-size: 22px;line-height: 28px;color:#000;letter-spacing: -0.03em}
.list_gnb .link_gnb[target=_blank]:after{font-family: 'Font Awesome 6 Pro', sans-serif;font-weight: 300;content: '\f08e'}
.list_gnb .link_gnb:focus, .list_gnb .on .link_gnb{color: var(--primary-color)}
.list_gnb .link_gnb:before{position: absolute;bottom: 20px;left: 7px;width:0;height:3px;background:currentColor;transition: all .3s;content:''}
.list_gnb .link_gnb:focus:before, .list_gnb .on .link_gnb:before{width:calc(100% - 14px)}
.list_gnb .link_gnb.open{color: var(--primary-color)}
.panel_gnb{display: none;position: absolute;top: 100%;left: 0;right: 0;z-index: 1000;border-top:1px solid var(--header-bottom-line-color);background-color: #fff}
.panel_gnb .inner{align-items: stretch;min-height: 480px}
.list_gnb li.on .panel_gnb, .list_gnb li:focus .panel_gnb{display: block}
.panel_gnb .tit_panel{flex:none;position: relative;z-index: 0;width: 310px;padding-top: 62px;border-right: 1px solid #ccc}
.panel_gnb .tit_panel:before{position: absolute;top:26px;left: -98px;width: 131px;height: 150px;background:url(/home/www/images/common/img_pen.svg) 0 0 no-repeat;background-size: contain;content:''}
.panel_gnb .tit_panel:after{position: absolute;bottom:0;right:0;width:400px;height:230px;background: url(/home/www/images/common/img_character.svg) 0 0 no-repeat;background-size: cover;content:''}
.panel_gnb .tit_panel .tit_menu{font-size: 40px;line-height: 48px;color:#1A1818;letter-spacing: -0.07em}
.panel_gnb .tit_panel .txt_desc{padding-top: 18px;font-size: 20px;line-height: 26px;color:#1A1818;letter-spacing: -0.06em}
.list_sub_gnb{flex:1;min-width:0;display: grid;align-content: start;overflow: hidden;gap:37px 34px;grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));position: relative;margin:50px 0 50px 50px}
.list_sub_gnb > li{position: relative}
.list_sub_gnb .link_menu{display: flex;align-items: center;position: relative;padding:16px 46px 15px 20px;border:1px solid #ddd;border-radius: 5px;font-weight: 500;font-size: 18px;line-height: 22px;color:#000}
.list_sub_gnb .link_menu + .link_menu{margin-top: 20px}
.list_sub_gnb .link_menu:before{position:absolute;top:50%;right:20px;font-family: 'Font Awesome 6 Pro', sans-serif;font-weight: normal;transform:translateY(-50%);content:'\f107'}
.list_sub_gnb .ico_comm{flex:none;width: 21px;height: 21px;background-image: url(/home/www/images/common/ico_bookmark.png)}
.list_sub_gnb .ico_comm.on{background-image: url(/home/www/images/common/ico_bookmark_on.png)}
.list_sub_gnb .link_menu.sub_none:before{content:''}
.list_sub_gnb .link_menu.sub_none + .ico_comm{position: absolute;top:0;right:0;width: 46px;height:60px;background-size: 21px 21px;background-position: 7px 50%}
.list_sub_gnb li:hover .link_menu:before, .list_sub_gnb .link_menu:focus:before{color: #fff}
.list_sub_gnb li:hover .link_menu, .list_sub_gnb li:focus-within .link_menu, .list_sub_gnb .link_menu:focus{font-weight: 700;color:#fff;border-color: transparent;background-color: var(--primary-color)}
.list_menu_group{padding:10px 0 0 21px}
.list_menu_group li{display: flex;align-items: center;gap:5px}
.list_menu_group .link_txt{display: flex;align-items: flex-start;gap:5px;padding:3px 0;font-size: 18px;line-height: 25px;color:rgba(26, 24, 24, .65)}
.list_menu_group .link_txt:hover, .list_menu_group .link_txt:focus{font-weight: 500;color:var(--primary-color)}
.list_menu_group .link_txt:hover:before, .list_menu_group .link_txt:focus:before{background-color: var(--primary-color)}
.list_menu_group .link_txt[target=_blank]:hover:after, .list_menu_group .link_txt[target=_blank]:focus:after{color:var(--primary-color)}
.list_menu_group .link_txt:before{flex:none;width:5px;height:5px;margin-top:10px;border-radius: 50%;background:currentColor;content:''}
.list_menu_group .link_txt[target=_blank]:after{flex:none;font-family: 'Font Awesome 6 Pro', sans-serif;font-weight: 300;font-size: 20px;color:#565656;content: '\f08e'}
.list_menu_group .link_txt span{display: inline-block;overflow: hidden;position: relative;vertical-align: top}
.list_menu_group .link_txt span:after{position: absolute;bottom: 0;left: 0;width:100%;height:1px;background:var(--primary-color);transform:translateX(-101%);transition: transform .3s;content:''}
.list_menu_group .link_txt:hover span:after, .list_menu_group .link_txt:focus span:after{transform:translateX(0)}
.list_menu_group .ico_comm{align-self: stretch;width:31px;height:auto;margin-right:-10px;background-size: 21px 21px;background-position: 0 50%}

.info_menus{flex:none;display: flex;gap:15px;align-items: center;position: relative;margin-left: 20px}
.info_menus .btn_sitemap{
  --btn-padding-x: 15px;
  --btn-padding-y: 22px;
  --btn-icon-width: 30px;
  --btn-icon-height: 3px;
  --btn-icon-gap: 11px;
  --btn-icon-color: #000;
  display: flex;align-items: center;margin-right:calc(var(--btn-padding-x) * -1);padding:var(--btn-padding-y) var(--btn-padding-x);
}
.info_menus .btn_sitemap .ico_comm{overflow: visible;position: relative;width: var(--btn-icon-width);height: var(--btn-icon-height);background: var(--btn-icon-color);border-radius: calc(var(--btn-icon-height) / 2)}
.info_menus .btn_sitemap .ico_comm:before, .info_menus .btn_sitemap .ico_comm:after{position: absolute;width:var(--btn-icon-width);height:var(--btn-icon-height);border-radius: calc(var(--btn-icon-height) / 2);background:var(--btn-icon-color);content:''}
.info_menus .btn_sitemap .ico_comm:before{top:calc( -1 * var(--btn-icon-gap));left:0}
.info_menus .btn_sitemap .ico_comm:after{top:var(--btn-icon-gap);left:0}

/* m gnb */
.m_gnb_area{padding-top: 67px}
.m_gnb_area .inner{display: flex;position: fixed;top:0;left: 0;right: 0;z-index: 1000;border-bottom: 2px solid var(--header-bottom-line-color);background: #fff}
.m_gnb_area .link_logo{display: block;height: 65px;margin-right: auto;padding:16px 0}
.m_gnb_area .link_logo.gj{margin-right:auto;}
.m_gnb_area .link_logo img{height: 100%}
.m_gnb_area .btn_menu{display: flex;margin-right: -16px;padding:0 16px}
.m_gnb_area .btn_menu i{margin: auto;font-size: 22px;color:#000}

.btn_menu[aria-expanded="true"] + .m_menu{opacity: 1;visibility: visible}
.btn_menu[aria-expanded="true"] + .m_menu .box_menu{transform: translateY(0);opacity: 1;visibility: visible}

.m_menu{position:fixed;top:0;bottom:0;left: 0;right: 0;z-index: 1000;background: rgba(0,0,0,.7);opacity: 0;visibility: hidden;transition: all .3s}
.m_menu .box_menu{display: flex;flex-direction: column;position: fixed;bottom:0;left: 0;right: 0;z-index: 1010;height: calc(100% - 50px);border-top-left-radius: 30px;background: #fff;transform: translateY(50px);opacity: 0;visibility: hidden;transition: all .3s}
.m_menu .box_menu .m_head_gnb{flex:none;display: flex;row-gap: 16px;flex-wrap: wrap;align-items: center;min-height:90px;padding:20px 15px 12px 20px;border-bottom:1px solid rgba(112, 112, 112, .2)}
.m_menu .box_menu nav{flex:1;min-height: 0;overflow: auto}
.m_menu .box_menu .tit_logo{display: block;margin-right: auto;padding-right:10px}
.m_menu .box_menu .link_logo{height: 33px;padding:0;box-sizing: content-box}
.m_menu .box_menu .info_user{display: flex;flex-wrap: wrap;gap: 5px 0;padding-top: 3px;font-weight: 500;font-size: 14px;line-height: 17px;color:rgba(26, 24, 24, .4)}
.m_menu .box_menu .txt_user{font-weight: 500}
.m_menu .box_menu .info_user strong{margin-right: 5px}
.m_menu .box_menu .info_user a{color:inherit}
.m_menu .box_menu .info_user a + a{--link-gap:26px;position: relative;padding-left: var(--link-gap)}
.m_menu .box_menu .info_user a + a:before{position: absolute;top:50%;left: calc(var(--link-gap) / 2);height: 12px;width: 1px;background:currentColor;transform: translateY(-50%);content: ''}

.m_gnb{--gnb-menu-default-color: #F8F8F8;position: relative;z-index: 0;min-height: 100%;background:#fff}
.m_gnb:before{position: absolute;top:0;left:0;z-index: -10;width:calc(50% - 10px);height:100%;background:var(--gnb-menu-default-color);pointer-events: none;content: ''}
.m_gnb .link_depth1{display: flex;column-gap: 7px;align-items: flex-start;width: calc(50% - 10px);padding:20px;border-bottom:1px solid #ddd;font-weight: 700;font-size: 16px;line-height: 24px;color:rgba(0,0,0,.7);background: var(--gnb-menu-default-color)}
.m_gnb a[target=_blank]:after{flex:none;margin-right:10px;font-family: 'Font Awesome 6 Pro', sans-serif;font-weight: 400;content:'\f08e'}
.m_gnb_depth3 a[target=_blank]:after{margin-right: 0}
.m_gnb .on .link_depth1{position: relative;z-index: 10;width: calc(50% + 5px);border-radius: 0 20px 10px 0;border-bottom-color: transparent;color:#fff;background: var(--primary-color)}
.m_gnb .on .link_depth1:before{order:1;margin-left:auto;font-size: 19px;font-family: 'Font Awesome 6 Pro', sans-serif;font-weight:700;content:'\f105'}
.m_gnb .on .m_gnb_depth2{display: block}
.m_gnb_depth2{display: none;overflow: auto;position: absolute;top:0;right:0;bottom:0;width:calc(50% + 10px);padding-left: 27px}
.m_gnb_depth2 .link_depth2{display: flex;position: relative;column-gap:5px;align-items: center;padding:16px 15px 16px 6px;border-bottom: 1px solid rgba(221, 221, 221, .5);font-weight: 500;font-size: 16px;line-height: 20px;color:rgba(0,0,0,.7);word-break: keep-all}
.m_gnb_depth2 .link_depth2:after{flex:none;margin-left:auto;font-family: 'Font Awesome 6 Pro', sans-serif;font-weight: 400;font-size: 18px;transition: all .3s;content: '\f078'}
.m_gnb_depth2 .sub_none .link_depth2{padding-right: 15px}
.m_gnb_depth2 .sub_none .link_depth2:after{content:normal}
.m_gnb_depth2 .sub_none .link_depth2[target="_blank"]:after{margin-left: 0;font-family: 'Font Awesome 6 Pro', sans-serif;font-weight: 400;content:'\f08e'}
.m_gnb_depth2 li.on a.link_depth2{border-bottom-color:var(--primary-color);color:var(--primary-color)}
.m_gnb_depth2 .on .link_depth2:after{transform: rotate(180deg)}
.m_gnb_depth3{display: none;position: relative;z-index: 0;padding:11px 0 10px;border-bottom:1px solid rgba(221,221,221,.5)}
.m_gnb_depth3:before{position: absolute;top:0;left: 0;right: 0;bottom:0;z-index: -10;background: var(--primary-color);opacity: .02;;content: ''}
.m_gnb_depth3 a{display: flex;gap:5px;align-items: flex-start;position: relative;padding:5px 15px;font-weight: 500;font-size: 14px;line-height: 17px;color:rgba(0,0,0,.58);word-break: break-word;word-wrap:break-word}
.m_gnb_depth3 a:before{position: absolute;top:12px;left: 7px;width: 3px;height: 3px;border-radius: 50%;background:#000;opacity: .3;content:''}

.m_menu .btn_close{--btn-size: 45px;display: flex;position: absolute;top:calc(var(--btn-size) / -2);right: 15px;width:var(--btn-size);height:var(--btn-size);border-radius: 50%;background: var(--primary-color)}
.m_menu .btn_close i{margin:auto;font-size: 25px;color:#fff}


@media
only screen and (min-width: 1200px) {
  .header{border-bottom:2px solid var(--header-bottom-line-color)}
  .head_etc_info{display: block}
  .pc_gnb_area{display: block}
  .m_gnb_area{display: none}
}




/* FOOTER */
.footer .btn_top{display: flex;flex-direction: column;align-items: center;justify-content: center;position: fixed;bottom:30px;right: 16px;z-index: 500;width: 65px;height:65px;padding:0;border-radius: 50%;border:0;font-size: 16px;line-height: 22px;color:#fff;background: rgba(0,0,0,.8);opacity: 0;visibility: hidden;cursor: pointer}
.footer .btn_top span{display: block}
.footer .btn_top.on{opacity: 1;visibility: visible}
.footer .btn_top.btn_fix{position: absolute;top:0;right: 16px;transform: translateY(-50%)}

.area_relate_site{background: #303643}
.area_relate_site .inner{padding:24px 16px}

.list_relate{--link-radius: 5px;display: grid;gap: 8px;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))}
.list_relate li{position: relative}
.list_relate .link_relate{display: flex;gap:10px;align-items: center;justify-content: space-between;height: 100%;padding:12px 20px;border-radius: var(--link-radius);border:1px solid rgba(255,255,255,.2);font-weight: 700;font-size: 12px;line-height: 16px;color:#fff;transition: all .3s}
.list_relate .link_relate i{font-size: 16px;transition: transform .5s;pointer-events: none}
.list_relate .link_relate[aria-expanded="true"]{border-radius: 0 0 var(--link-radius) var(--link-radius)}
.list_relate .link_relate[aria-expanded="true"] i{transform: rotateX(180deg)}

.list_sub_relate{display: none;overflow: auto;position: absolute;bottom:100%;left: 0;right: 0;max-height: 200px;background: #272c37}
.list_sub_relate li + li{border-top: 1px dashed rgba(255,255,255,.2)}
.list_sub_relate a{--txt-size: 11px;display: flex;gap:5px;align-items: center;padding: 9px 20px;font-size: var(--txt-size);color: rgba(255, 255, 255, .8);line-height: 16px}
.list_sub_relate a[target="_blank"]:after{font-size: calc(var(--txt-size) + 3px);font-family: "Font Awesome 6 Pro", sans-serif;font-weight: normal;content: '\f08e'}

@media
only screen and (min-width: 768px) {
  .list_relate{gap:16px}
}
@media
only screen and (min-width: 1200px) {
  .footer .btn_top{row-gap: 6px;width: 92px;height: 92px;font-size: 18px;line-height: 24px}
  .footer .btn_top i{font-size: 34px;transition: transform .3s}
  .footer .btn_top:hover i{transform: scale(1.2);}
  
  .area_relate_site .inner{padding:20px 16px}
  .list_relate{--link-radius: 10px;gap:32px}
  .list_relate .link_relate{padding:18px 27px;border-radius: 10px;font-size: 18px;line-height: 22px}
  .list_relate .link_relate i{font-size: 22px}

  .list_sub_relate{max-height: 310px;border-radius: var(--link-radius) var(--link-radius) 0 0}
  .list_sub_relate::-webkit-scrollbar{width:12px}/* 스크롤 바 전체 너비 */
  .list_sub_relate::-webkit-scrollbar-track{background-color:#212532;border-radius:6px}/* 전체 게이지 */
  .list_sub_relate::-webkit-scrollbar-thumb{background-color:#475067;border-radius:6px}/* 현재 게이지 */
  .list_sub_relate a{--txt-size: 16px;padding:15px 27px}
  .list_sub_relate a:hover, .list_sub_relate a:focus{background: #394151}
}

.area_foot_info{background: #373D4B}
.area_foot_info .inner{padding: 30px 16px 40px;text-align: center}
.area_foot_info .link_logo_foot{display: inline-block;width: 240px;max-width: 100%;vertical-align: top}
.area_foot_info .link_logo_foot img{width: 100%;vertical-align: top}
.area_foot_info .etc_info{padding-top: 25px;word-break: keep-all;word-wrap: break-word}
.area_foot_info .list_etc_info{display: flex;flex-wrap: wrap;justify-content: center}
.area_foot_info .list_etc_info li + li{--li-gap: 15px;position: relative;margin-left: var(--li-gap)}
.area_foot_info .list_etc_info li + li:before{position: absolute;top:50%;left: calc(var(--li-gap) / -2);width: 1px;height: 10px;background: rgba(255,255,255,.4);transform: translateY(-50%);content: ''}
.area_foot_info .list_etc_info a{display: block;position: relative;position: relative;padding:5px 0;font-size: 12px;line-height: 16px;color:#fff}
.area_foot_info .list_etc_info a:before{position: absolute;bottom:2px;left: 0;width: 0;height: 1px;background: currentColor;transition: width .3s;content:''}
.area_foot_info .list_etc_info a:hover:before, .area_foot_info .list_etc_info a:focus:before{width: 100%}
.area_foot_info .list_etc_info .emph_txt{color:#FDD737}
.area_foot_info .etc_info small{display: block;padding-top: 20px;font-size: 12px;line-height: 16px;color:rgba(255,255,255,.5)}
.area_foot_info .etc_info small span{display: block}
.area_foot_info .etc_info small span + span{padding-top: 3px}

@media
only screen and (min-width: 1200px) {
  .area_foot_info .inner{display: flex;gap: 60px;align-items: flex-start;padding-bottom: 55px;text-align: left}
  .area_foot_info .inner h2{padding-top: 24px}
  .area_foot_info .link_logo_foot{width: 260px}
  .area_foot_info .list_etc_info{justify-content: flex-start}
  .area_foot_info .list_etc_info li + li{--li-gap: 24px}
  .area_foot_info .list_etc_info li + li:before{height: 14px}
  .area_foot_info .list_etc_info a{font-size: 16px;line-height: 19px}
  .area_foot_info .etc_info{padding-top: 23px}
  .area_foot_info .etc_info small{display: flex;flex-wrap: wrap;gap: 0 30px;font-size: 16px;line-height: 26px}
  .area_foot_info .etc_info small span + span{padding-top: 0}
}

@media (min-width:1200px) and (max-width:1379px) {
    .list_gnb{gap:12px;}
}
.footer_mark img{width:90px;}

.area_foot_info .etc_info em{position:relative; margin:0 12px}
.area_foot_info .etc_info em:before {
    position: absolute;
    top: 13px;
    left: calc(var(--li-gap) / -2);
    width: 1px;
    height: 15px;
    background: rgba(255,255,255,.4);
    transform: translateY(-50%);
    content: ''
}