html.fixed { overflow: hidden; }

#wrap { overflow: hidden; }
#wrap ::-webkit-scrollbar {width: 5px; height: 5px;}
#wrap ::-webkit-scrollbar-thumb {background-color: #1e3c70; border-radius: 10px;}
#wrap ::-webkit-scrollbar-track {background-color: #caced4; border-radius: 10px;}

/* 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: 1565px; max-width: 100%; margin: 0 auto; }

/* 상단팝업 */
.uppopOpen { padding-top: 110px; }
.uppopOpen.hdBk { padding-top: 0; }
.tpopup_wrap { position: fixed; top: 0; left: 0; width: 100%; height: 110px; background: #000; z-index: 10; padding: 0.5rem 0; }
.tpopup_wrap .container { position: relative; }
.tpopup_wrap .topPopList { height: 3rem; padding: 0 2rem; overflow: hidden; }
.tpopup_wrap .topPopList .slick-track { margin: 0; }
.tpopup_wrap .topPopList .item { position: relative; }
.tpopup_wrap .topPopList .item.slick-current::before { display: none; }
.tpopup_wrap .topPopList .item + .item::before { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 1px; height: 1.5rem; border-left: 1px dashed #fff; content: ""; }
.tpopup_wrap .topPopList .item a { display: flex; align-items: center; gap: 1.5rem; padding: 0 1rem; }
.tpopup_wrap .topPopList .item a .imgBox { width: 3rem; height: 3rem; line-height: 0; }
.tpopup_wrap .topPopList .item a .imgBox img { max-width: 100%; }
.tpopup_wrap .topPopList .item a .txtBox { color: #fff; flex: 1; overflow: hidden; }
.tpopup_wrap .topPopList .item a .txtBox strong { display: block; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; font-size:0.9rem; margin-bottom: 0.2rem; }
.tpopup_wrap .topPopList .item a .txtBox span { display: block; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; font-size:0.7rem; }
.tpopup_wrap .control { display: flex; gap: 0.4rem; align-items: center; justify-content: end; margin-top: 0.2rem; }
.tpopup_wrap .control .dayClose { display: flex; gap: 0.2rem; align-items: center; color: #fff; }
.tpopup_wrap .control .dayClose p { display: flex; gap: 0.2rem; align-items: center; }
.tpopup_wrap .control a { color: #fff; }
.tpopup_wrap .control a.stop,
.tpopup_wrap .control a.play { width: 1rem; height: 1rem; background: #000; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.tpopup_wrap .control a.play { display: none; }
.tpopup_wrap .control .prev { position: absolute; top: 0.4rem; left: 0; font-size: 2rem; line-height: 1; }
.tpopup_wrap .control .next { position: absolute; top: 0.4rem; right: 0; font-size: 2rem; line-height: 1; }

.uppopOpen #header { top: 110px; }
/* .uppopOpen.hdBk #header { top: 0; } */
/* header */
#header { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; transition: 0.3s; }
#header::before { position: absolute; top: 0; left: 0; width: 100%; height: 10rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%); content: ""; }
#header .header_top { position: relative; z-index: 1; }
#header .header_top .container { display: flex; justify-content: flex-end; align-items: center; height: 2.3rem; }
#header .header_top .login_util { position: relative; display: flex; padding-right: 0.85rem; margin-right: 0.85rem; gap: 0.75rem; }
#header .header_top .login_util::before { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 0.6rem; background: rgba(255, 255, 255, 0.2); content: ""; }
#header .header_top .login_util li a { position: relative; display: block; color: #fff; }
#header .header_top .login_util li.user a em { font-weight: 700; }
#header .header_top .login_util li a::before { position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 0; height: 1px; background: #fff; content: ""; transition: 0.3s; }
#header .header_top .sns_util { position: relative; display: flex; padding-right: 0.85rem; gap: 0.75rem; }
#header .header_top .sns_util::before { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 0.6rem; background: rgba(255, 255, 255, 0.2); content: ""; }
#header .header_top .sns_util li a { display: block; width: 1.2rem; height: 1.2rem; mask-repeat: no-repeat; mask-size: contain; mask-position: center; background-color: #ffffff; }
#header .header_top .sns_util li.youtub a { mask-image: url('/images/web/eng/layout/youtube_icon.svg'); }
#header .header_top .sns_util li.insta a { mask-image: url('/images/web/eng/layout/instagram_icon.svg'); }
#header .header_top .sns_util li.blog a { mask-image: url('/images/web/eng/layout/blog_icon.svg'); }
#header .header_top .sns_util li.facbok a { mask-image: url('/images/web/eng/layout/facebook_icon.svg'); }
#header .header_top .lang_util { position: relative; padding: 0 0.85rem; margin-right: -0.85rem; }
#header .header_top .lang_util .langBtn { position: relative; color: #fff; font-size: 0.7rem; padding: 0 0.8rem 0 0; }
#header .header_top .lang_util .langBtn::before { position: absolute; top: 50%; right: 0; content: "\ea4e"; font-family: 'remixicon'; color: #fff; transform: translateY(-50%); transition: 0.3s; }
#header .header_top .lang_util .langBtn i { font-size: 0.85rem; }
#header .header_top .lang_util .lst { position: absolute; top: calc(100% + 0.5rem); left: 0; width: 100%; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.161); border-radius: 0.4rem; border: 1px solid #ccc; background: #fff; padding: 0.4rem 0.8rem; display: none; z-index: 1; }
#header .header_top .lang_util .lst li a { position: relative; display: block; padding-right: 0.8rem; color: #555; transition: 0.3s; }
#header .header_top .lang_util .lst li a::before { position: absolute; top: 50%; transform: translateY(-50%); right: 0; font-family: 'remixicon'; content: "\ecaf"; font-weight: 500; }
#header .header_top .login_util li a:hover::before,
#header .header_top .login_util li a:focus::before { width: 100%; }
#header .header_top .sns_util li a:hover,
#header .header_top .sns_util li a:focus { background: #0098D8 !important; }
#header .header_top .lang_util .lst li a:hover,
#header .header_top .lang_util .lst li a:focus { color: #222; font-weight: 700; }
#header .header_top .lang_util.on .langBtn::before { content: "\ea78"; }

#header .header_cnt { margin-top: -1rem; }
#header .header_cnt .container { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 3rem; }
#header .header_cnt .logo a { display: block; width: 220px; height: 52px; background-repeat: no-repeat; background-image: url('/images/web/eng/layout/logo_w.png'); background-size: contain;}

/* gnb */
#nav { flex: 1; }
#gnb ul li a { display: block; }
#gnb .depth01 > ul { display: flex; gap: 1rem; }
#gnb .depth01 > ul > li { flex: auto; }
#gnb .depth01 > ul > li > a { display: flex; justify-content: center; align-items: center; height: 4.5rem; color: #fff; font-size: 1.1rem; font-weight: 700; text-align: center; font-family: 'SUITE'; }
#gnb .depth01 > ul > li > a > span { position: relative; transition: 0.3s; }
#gnb .depth01 > ul > li > a:hover > span,
#gnb .depth01 > ul > li.on > a > span { padding-right: 1.5rem; }
#gnb .depth01 > ul > li > a:hover > span::before,
#gnb .depth01 > ul > li.on > a > span::before { position: absolute; top: 0; right: 0; content: "\ea4e"; font-family: 'remixicon'; color: #0098D8; font-size: 1.1rem; }
#gnb .depth01 > ul > li.on > a > span::before { content: "\ea78";}
#gnb .depth02 { position: absolute; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: all 0.5s ease; z-index: 1; padding: 1.2rem 0.7rem 3.2rem; }
#gnb .depth02::before { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2560px; height: 0; background: rgb(18 27 55 / 98%); content: ""; z-index: -1; box-shadow: 1px 10px 10px rgba(0, 0, 0, 0.15); transition: 0.5s; }
#gnb .depth02 > ul { display: flex; flex-wrap: wrap; gap: 1.6rem; }
#gnb .depth02 > ul > li { width: calc((100% - 4.8rem) / 4); } 
#gnb .depth02 > ul > li > a { position: relative; display: block; padding: 0.4rem 1.2rem; color: #7fdded; border-radius: 0.4rem; border: 1px solid #ccc; }
#gnb .depth02 > ul > li > a[target="_blank"] { padding-right: 2.2rem; }
#gnb .depth02 > ul > li > a[target="_blank"]::before { position: absolute; top: 0.4rem; right: 1.2rem; font-family: 'remixicon'; color: #fff; content: "\ecaf"; font-size: 1rem; }
#gnb .depth03 { margin-top: 0.6rem; padding: 0 0.2rem  ; }
#gnb .depth03 > ul > li + li { margin-top: 0.4rem; }
#gnb .depth03 > ul > li > a { position: relative; display: block; padding-left: 0.6rem; color: #fff; }
#gnb .depth03 > ul > li > a::before { position: absolute; top: 0.5rem; left: 0; width: 0.2rem; height: 0.2rem; border-radius: 50%; background: #7fdded; content: ""; }
#gnb .depth03 > ul > li > a[target="_blank"] { padding-right: 1rem; }
#gnb .depth03 > ul > li > a[target="_blank"]::after { position: absolute; top: 0.2rem; right: 0; font-family: 'remixicon'; color: #fff; content: "\ecaf"; font-size: 1rem; }
#gnb .depth03 > ul > li > a span { position: relative; display: inline-block; }
#gnb .depth03 > ul > li > a span::before { position: absolute; bottom: 0; width: 0; height: 1px; background: #0098D8; content: ""; }
#gnb .depth01 > ul > li.on .depth02 { opacity: 1; visibility: visible; transform: translateY(0); }
#gnb .depth01 > ul > li.on .depth02::before { min-height: 100%; height: calc(100vh - 22rem); }
#gnb a,
#gnb a::before,
#gnb a span::before { transition: 0.3s; }
#gnb .depth01 > ul > li > a:hover,
#gnb .depth01 > ul > li.on > a { color: #0098D8 !important; }
#gnb .depth02 > ul > li > a:hover,
#gnb .depth02 > ul > li > a:focus { border-color: #7fdded; font-weight: 600; }
#gnb .depth03 > ul > li > a:hover,
#gnb .depth03 > ul > li > a:focus { color: #7fdded; }
#gnb .depth03 > ul > li > a:hover::before,
#gnb .depth03 > ul > li > a:focus::before { background: #0098D8; }
#gnb .depth03 > ul > li > a:hover span::before,
#gnb .depth03 > ul > li > a:focus span::before { width: 100%; }

#header .header_actions ul { display: flex; align-items: center; gap: 1rem; }
#header .header_actions ul li.search .searchOpen { color: #fff; font-size: 1.2rem; display: none; padding: 0; line-height: 1; }
#header .header_actions ul li.search .box_search_0 #searchForm { display: flex; border-bottom: 2px solid #fff; }
#header .header_actions ul li.search .box_search_0 #searchForm .searchInput { flex: 1; background: none; border: none; font-size: 0.8rem; }
#header .header_actions ul li.search .box_search_0 #searchForm .searchInput:focus { background: #fff; }
#header .header_actions ul li.search .box_search_0 #searchForm .searchInput::placeholder { color: #fff; }
#header .header_actions ul li.search .box_search_0 #searchForm .srch_btn { color: #fff; font-size: 1.2rem; padding: 0; }
#header .header_actions ul li.search .box_search_0 .searchClose { display: none; }
#header .header_actions ul li.fullmenu a { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; width: 1.35rem; height: 1.2rem; gap: 7px; }  
#header .header_actions ul li.fullmenu a em { width: 1.35rem; height: 3px; background: #fff; }
#header .header_actions ul li.fullmenu a em:nth-child(2) { width: 0.9rem; }

#wrap.open #header,
#wrap.hdBk #header { background: #fff; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.161); }
#header.on { background: #fff; }
#wrap.hdBk #header::before,
#header.on::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; content: ""; }
#wrap.hdBk #header .header_top .lang_util .langBtn,
#header.on .header_top .lang_util .langBtn,
.sub_container #header .header_top .lang_util .langBtn { color: #222; }
#wrap.hdBk #header .header_top .lang_util .langBtn::before,
#header.on .header_top .lang_util .langBtn::before,
.sub_container #header .header_top .lang_util .langBtn::before { color: #222; }
#wrap.hdBk #header .header_top .login_util::before,
#header.on .header_top .login_util::before,
.sub_container #header .header_top .login_util::before { background: rgba(34, 34, 34, 0.2); }
#wrap.hdBk #header .header_top .login_util li a,
#header.on .header_top .login_util li a,
.sub_container #header .header_top .login_util li a { color: #222; }
#wrap.hdBk #header .header_top .sns_util::before,
#header.on .header_top .sns_util::before,
.sub_container #header .header_top .sns_util::before { background: rgba(34, 34, 34, 0.2); }
#wrap.hdBk #header .header_top .sns_util li a,
#header.on .header_top .sns_util li a,
.sub_container #header .header_top .sns_util li a { background-color: #222; }
#wrap.open #header .header_cnt .logo a,
#wrap.hdBk #header .header_cnt .logo a,
#header.on .header_cnt .logo a,
.sub_container #header .header_cnt .logo a { background-image: url('/images/web/eng/layout/logo.png'); }
#wrap.hdBk #header #gnb .depth01 > ul > li > a,
#header.on #gnb .depth01 > ul > li > a,
.sub_container #header #gnb .depth01 > ul > li > a { color: #222; }
#wrap.hdBk #header .header_actions ul li.search .box_search_0 #searchForm,
#header.on .header_actions ul li.search .box_search_0 #searchForm,
.sub_container #header .header_actions ul li.search .box_search_0 #searchForm { border-color: #222; }
#wrap.hdBk #header .header_actions ul li.search .box_search_0 #searchForm .searchInput::placeholder,
#header.on .header_actions ul li.search .box_search_0 #searchForm .searchInput::placeholder,
.sub_container #header .header_actions ul li.search .box_search_0 #searchForm .searchInput::placeholder { color: #555; }
#wrap.hdBk #header .header_actions ul li.search .box_search_0 #searchForm .srch_btn,
#header.on .header_actions ul li.search .box_search_0 #searchForm .srch_btn,
.sub_container #header .header_actions ul li.search .box_search_0 #searchForm .srch_btn { color: #222; }
#wrap.open #header .header_actions ul li.search .searchOpen,
#wrap.hdBk #header .header_actions ul li.search .searchOpen,
#header.on .header_actions ul li.search .searchOpen,
.sub_container #header .header_actions ul li.search .searchOpen { color: #222; }
#wrap.open #header .header_actions ul li.fullmenu a em,
#wrap.hdBk #header .header_actions ul li.fullmenu a em,
#header.on .header_actions ul li.fullmenu a em,
.sub_container #header .header_actions ul li.fullmenu a em { background: #222; }
 
#wrap.open .my_gnu .flotOpen,
#wrap.hdBk .my_gnu .flotOpen,
#header.on .my_gnu .flotOpen,
.sub_container .my_gnu .flotOpen { color: #222; }

/* 전체메뉴 */
#fullmenuOpen { display: none !important; }
.popFullmenu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #fff; z-index: 99999; }
.popFullmenu .logo { display: flex; align-items: center; height: 72px; padding: 0.7rem; }
.popFullmenu .logo a { display: block; line-height: 0; width: 220px; }
.popFullmenu .logo a img { max-width: 100%; }
.popFullmenu .login_box { background: #222; padding: 0.6rem 0.7rem; }
.popFullmenu .login_box .login_util { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.popFullmenu .login_box .login_util .user { flex: 100%; }
.popFullmenu .login_box .login_util .user a em { font-weight: 700; }
.popFullmenu .login_box .login_util li:not(.user) { flex: auto; }
.popFullmenu .login_box .login_util li a { color: #fff; display: block; font-size: 0.7rem; }
.popFullmenu .login_box .login_util li:not(.user) a { text-align: center; background: rgba(255, 255, 255, 0.08); border-radius: 2rem; padding: 0.2rem; }
.popFullmenu .util { padding: 0.4rem 0.7rem; }
.popFullmenu .util > ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
.popFullmenu .util > ul > li { position: relative; flex: auto; }
.popFullmenu .util > ul > li.sns { display: none; }
.popFullmenu .util > ul > li + li::before { position: absolute; top: 50%; transform: translateY(-50%); left: -0.8rem; width: 1px; height: 0.6rem; background: rgba(34, 34, 34, 0.2); content: ""; }
.popFullmenu .util > ul > li > a { text-align: center; display: block; }
.popFullmenu .sns_util { position: relative; display: flex; gap: 0.75rem; justify-content: center; }
.popFullmenu .sns_util::before { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 0.6rem; background: rgba(255, 255, 255, 0.2); content: ""; }
.popFullmenu .sns_util > li a { display: block; width: 1.2rem; height: 1.2rem; mask-repeat: no-repeat; mask-size: contain; mask-position: center; background-color: #222; }
.popFullmenu .sns_util > li.youtub a { mask-image: url('/images/web/eng/layout/youtube_icon.svg'); }
.popFullmenu .sns_util > li.insta a { mask-image: url('/images/web/eng/layout/instagram_icon.svg'); }
.popFullmenu .sns_util > li.blog a { mask-image: url('/images/web/eng/layout/blog_icon.svg'); }
.popFullmenu .sns_util > li.facbok a { mask-image: url('/images/web/eng/layout/facebook_icon.svg'); }
.popFullmenu .sns_util > li a:hover,
.popFullmenu .sns_util > li a:focus { background: #0098D8 !important; }

.popFullmenu .lang_util { position: relative; }
.popFullmenu .lang_util .langBtn { position: relative; color: #222; font-size: 0.7rem; padding: 0 0.8rem 0 0; width: 100%; }
.popFullmenu .lang_util .langBtn::before { position: absolute; top: 50%; right: 0; content: "\ea4e"; font-family: 'remixicon'; color: #222; transform: translateY(-50%); transition: 0.3s; }
.popFullmenu .lang_util .langBtn i { font-size: 0.85rem; }
.popFullmenu .lang_util .lst { position: absolute; top: calc(100% + 0.5rem); left: 0; width: 100%; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.161); border-radius: 0.4rem; border: 1px solid #ccc; background: #fff; padding: 0.4rem 0.8rem; display: none; z-index: 1; }
.popFullmenu .lang_util .lst li a { position: relative; display: block; padding-right: 0.8rem; color: #555; transition: 0.3s; }
.popFullmenu .lang_util .lst li a::before { position: absolute; top: 50%; transform: translateY(-50%); right: 0; font-family: 'remixicon'; content: "\ecaf"; font-weight: 500; }
.popFullmenu .lang_util .lst li a:hover,
.popFullmenu .lang_util .lst li a:focus { color: #222; font-weight: 700; }
.popFullmenu .lang_util.on .langBtn::before { content: "\ea78"; }

.popFullmenu .fullmenu_group { height: calc(100vh - 7rem); overflow-y: auto; }
.popFullmenu .fullmenu_group a { position: relative; display: block; }
.popFullmenu .fullmenu_group .depth01 > ul > li { border-bottom: 1px solid #ccc; }
.popFullmenu .fullmenu_group .depth01 > ul > li:last-child { border-bottom: none; }
.popFullmenu .fullmenu_group .depth01 > ul > li.active { border-top: 8px solid #ededed; border-bottom: 8px solid #ededed; }
.popFullmenu .fullmenu_group .depth01 > ul > li > a { padding: 0.6rem 0.7rem; font-size: 0.9rem; color: #222; }
.popFullmenu .fullmenu_group .depth01 > ul > li.dep > a { padding: 0.6rem 2rem 0.6rem 0.7rem; }
.popFullmenu .fullmenu_group .depth01 > ul > li.dep > a::before { position: absolute; top: 0.6rem; right: 0.7rem; content: "\ea78"; font-family: 'remixicon'; font-size: 1rem;}
.popFullmenu .fullmenu_group .depth01 > ul > li.dep.active > a::before { content: "\ea4e"; }
.popFullmenu .fullmenu_group .depth01 > ul > li.active .depth02 { display: block; }
.popFullmenu .fullmenu_group .depth02 { display: none; padding: 0 0.7rem 0.8rem 0.7rem; }
.popFullmenu .fullmenu_group .depth02 > ul > li + li { margin-top: 0.4rem; }
.popFullmenu .fullmenu_group .depth02 > ul > li > a { padding: 0.4rem 0.8rem; border-radius: 0.4rem; border: 1px solid #ccc; color: #222; font-size: 0.85rem; }
.popFullmenu .fullmenu_group .depth02 > ul > li.dep > a::before { position: absolute; top: 0.45rem; right: 0.8rem; content: "\ea13"; font-family: 'remixicon'; font-size: 1rem; }
.popFullmenu .fullmenu_group .depth02 > ul > li.dep.active > a::before { content: "\f1af"; }
.popFullmenu .fullmenu_group .depth02 > ul > li.active .depth03 { display: block; }
.popFullmenu .fullmenu_group .depth03 { display: none; padding: 0.6rem 0; }
.popFullmenu .fullmenu_group .depth03 > ul > li + li { margin-top: 0.4rem; }
.popFullmenu .fullmenu_group .depth03 > ul > li > a { font-size: 0.75rem; padding-left: 0.6rem; }
.popFullmenu .fullmenu_group .depth03 > ul > li > a::before { position: absolute; top: 8px; left: 0; width: 4px; height: 4px; background: #999; border-radius: 50%; content: ""; }
.popFullmenu .fullmenu_group .depth03 > ul > li > a > span { position: relative; display: inline-block; }
.popFullmenu .fullmenu_group .depth03 > ul > li > a > span::before { position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #0098D8; content: ""; }
.popFullmenu .fullmenu_group .depth02 > ul > li > a[target="_blank"] { padding-right: 2.2rem; }
.popFullmenu .fullmenu_group .depth02 > ul > li > a[target="_blank"]::before { position: absolute; top: 0.45rem; right: 0.8rem; font-family: 'remixicon'; color: #555; content: "\ecaf"; font-size: 1rem; }
.popFullmenu .fullmenu_group .depth03 > ul > li > a[target="_blank"] { padding-right: 2.2rem; }
.popFullmenu .fullmenu_group .depth03 > ul > li > a[target="_blank"]::after { position: absolute; top: 0; right: 0; font-family: 'remixicon'; color: #555; content: "\ecaf"; font-size: 1rem; }
.popFullmenu .fullmenu_group a,
.popFullmenu .fullmenu_group a::before,
.popFullmenu .fullmenu_group a span::before { transition: 0.3s; }
.popFullmenu .fullmenu_group .depth01 > ul > li.active > a,
.popFullmenu .fullmenu_group .depth01 > ul > li > a:hover,
.popFullmenu .fullmenu_group .depth01 > ul > li > a:focus { color: #0098D8; font-weight: 600; } 
.popFullmenu .fullmenu_group .depth02 > ul > li.active > a,
.popFullmenu .fullmenu_group .depth02 > ul > li > a:hover,
.popFullmenu .fullmenu_group .depth02 > ul > li > a:focus { background: #0098D8; color: #fff; border-color: #0098D8; }
.popFullmenu .fullmenu_group .depth02 > ul > li.active > a::before,
.popFullmenu .fullmenu_group .depth02 > ul > li > a:hover::before,
.popFullmenu .fullmenu_group .depth02 > ul > li > a:focus::before { color: #fff; }
.popFullmenu .fullmenu_group .depth03 > ul > li > a:hover,
.popFullmenu .fullmenu_group .depth03 > ul > li > a:focus { color: #0098D8; }
.popFullmenu .fullmenu_group .depth03 > ul > li > a:hover::before,
.popFullmenu .fullmenu_group .depth03 > ul > li > a:focus::before { background: #0098D8; }
.popFullmenu .fullmenu_group .depth03 > ul > li > a:hover > span::before,
.popFullmenu .fullmenu_group .depth03 > ul > li > a:focus > span::before { width: 100%; }
.popFullmenu .fullmenuClose { position: absolute; top: 1rem; right: 0.7rem; font-size: 1.3rem; }


/* footer */
.user_srv { position: relative; background: #111; }
.user_srv .titTab ul { display: flex; }
.user_srv .titTab ul li { flex: 1; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.user_srv .titTab ul li:last-child { border-right: 1px solid rgba(255, 255, 255, 0.2); }
.user_srv .titTab ul li a { position: relative; display: flex; align-items: center; height: 3.2rem; color: #fff; padding: 0 1.2rem; font-size: 0.8rem; }
.user_srv .titTab ul li a::before { position: absolute; top: 50%; right: 1.2rem; transform: translateY(-50%); font-family: 'remixicon'; color: #fff; font-size: 1rem; content: "\ea13"; }
.user_srv .titTab ul li a.current { background: #213d4f; }
.user_srv .titTab ul li a.current::before { content: "\f1af"; }
.user_srv .tabWrap .lst { position: relative; display: none; z-index: 1; }
.user_srv .tabWrap .lst.on { display: block; }
.user_srv .tabWrap .lst.on::before { position: absolute; top: 0; left: -100%; width: 200vw; height: 100%; background: #213d4f; content: ""; z-index: -1; }
.user_srv .tabWrap .lst dl { padding: 1.5rem 1rem; }
.user_srv .tabWrap .lst dl + dl { border-top: 1px dashed #5a6572; }
.user_srv .tabWrap .lst dl dt { color: #fff; font-size: 1rem; margin-bottom: 0.8rem; }
.user_srv .tabWrap .lst dl dd ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.user_srv .tabWrap .lst dl dd ul li { width: calc((100% - 1.5rem) / 4); }
.user_srv .tabWrap .lst dl dd ul li a { position: relative; display: block; color: #bcbfc6; padding-left: 0.5rem; }
.user_srv .tabWrap .lst dl dd ul li a::before { position: absolute; top: 0.55rem; left: 0; width: 2px; height: 2px; border-radius: 50%; background: #bcbfc6; content: ""; }
.user_srv .tabWrap .lst dl dd ul li a:hover span,
.user_srv .tabWrap .lst dl dd ul li a:focus span { text-decoration: underline; }

#footer { background: #222; }
#footer .ft_wrap { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 2.5rem 0; } 
#footer .ft_wrap .f_logo a { display: block; line-height: 0; }
#footer .ft_wrap .f_logo a img { max-width: 100%; }
#footer .f_lnk ul { display: flex; gap: 2.4rem; overflow: hidden; }
#footer .f_lnk ul li { position: relative; }
#footer .f_lnk ul li + li::before { position: absolute; top: 0.55rem; left: -1.3rem; width: 0.2rem; height: 0.2rem; background: rgba(255, 255, 255, 0.2); border-radius: 50%; content: ""; }
#footer .f_lnk ul li a { color: #fff; font-size: 0.8rem; font-weight: 400; }
#footer .f_lnk ul li.point a { font-weight: 600; }
#footer .f_info { flex: 100%; margin-top: 2rem; padding-right: 6rem; }
#footer .f_info ul { display: flex; flex-wrap: wrap; gap: 0.4rem;}
#footer .f_info ul li { font-weight: 600; color: #fff; }
#footer .f_info ul li em { font-weight: 100; }
#footer .copyright { flex: 100%; font-family: 'Montserrat'; color: rgba(255, 255, 255, 0.4); margin-top: 0.4rem; padding-right: 6rem; }
#footer .mark_WA { position: absolute; bottom: 2.5rem; right: 0; width: 5.25rem; line-height: 0; }
#footer .mark_WA img { max-width: 100%; }
 
.quick_link .chatBot { width: 4.5rem; }
.quick_link .chatBot img { max-width: 100%; }

.chakra-shadow-3nf4c5 { right: auto; left: 50%; }

.quick_link { position: fixed; bottom: 6rem; right: 1.3rem; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; z-index: 5; }

.quick_link .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; }
.quick_link .moveTop i { transition: 0.3s; }
.quick_link .moveTop:hover i,
.quick_link .moveTop:focus i { animation: bounce infinite 0.8s; }
#wrap.hdBk .quick_link .moveTop { display: flex; }

.quick_link .fund { transition: 0.3s; }
.quick_link .fund:hover,
.quick_link .fund:focus { transform: scale(1.18); }


@keyframes bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

.my_gnu { position: relative; }
.my_gnu .flotOpen { position: relative; overflow: hidden; color: #fff; font-size: 0.8rem; font-family: 'SUITE'; padding: 0; line-height: 1.1; font-weight: 800; }
/* .my_gnu .flotOpen::after { position: absolute; top: 1.3rem; left: 0.2rem; background: url('/images/web/eng/layout/flotOpen_bg.png') no-repeat center; width: 0.65rem; height: 0.65rem; content: ""; transition: 0.8s; }
.my_gnu .flotOpen::before { position: absolute; bottom: -1.8rem; right: -2.4rem; width: 100%; height: 100%; background: linear-gradient(306.54deg, rgba(0, 0, 0, 0) 58.79%, rgba(0, 77, 109, 0.16) 82.23%); content: ""; border-radius: 50%; transition: 0.3s; } */
.my_gnu .flotOpen:hover::before,
.my_gnu .flotOpen:focus::before { bottom: 0; right: 0; }
.my_gnu .flotOpen:hover::after,
.my_gnu .flotOpen:focus::after { transform: rotate(360deg); }

.my_gnu .inner { display: none; }
.my_gnu .lst > li { display: flex; flex-direction: row-reverse; align-items: center; gap: 3.5rem; }
.my_gnu .lst > li + li { margin-top: 1.8rem; }
.my_gnu .lst > li .user { display: flex; align-items: center; width: 8.4rem; font-family: 'SUITE'; font-size: 0.9rem; gap: 0.55rem; color: #fff; }
.my_gnu .lst > li .user .icon { position: relative; width: 3.85rem; text-align: center; flex: none; }
.my_gnu .lst > li .user .icon::before { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); width: 3.85rem; height: 3.85rem; border-radius: 50%; background: rgba(255, 255, 255, 0.2); content: ""; z-index: -1; }
.my_gnu .lst > li .user .txt { flex: 1; word-break: keep-all; }
.my_gnu .lst > li .m_lst { height: 0; flex: 1; flex-wrap: wrap; gap: 0.5rem 1.6rem; display: none; overflow: hidden; opacity: 0; visibility: hidden; transition: 0.3s; }
.my_gnu .lst > li .m_lst > li > a { position: relative; color: #fff; font-size: 0.9rem; padding-left: 0.6rem; }
.my_gnu .lst > li .m_lst > li > a::before { position: absolute; top: 0.55rem; left: 0; width: 0.2rem; height: 0.2rem; border-radius: 50%; background: #fff; content: ""; }
.my_gnu .flotClose { position: relative; justify-content: center; align-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #484848; color: #fff; font-size: 1.8rem; display: none; z-index: 1; margin-top: 3rem; margin-right: 3.5rem; }
.my_gnu .flotClose i { transition: 0.8s; }
.my_gnu .flotClose:hover i,
.my_gnu .flotClose:focus i { transform: rotate(360deg); }

.my_gnu.on {z-index: 9999; }
.my_gnu.on .inner { width: 100%; display: block; position: fixed; width: 100vw; height: 100vh; top: 0 !important; left: 0 !important; transform: none !important; background: rgba(0, 0, 0, 0.9); transition: 0.3s; display: flex; justify-content: center; flex-direction: column; }
.my_gnu.on .inner .wrap { display: flex; flex-direction: column; align-items: end; width: 1920px; max-width: 100%; padding: 0 1rem; margin: 0 auto; }
.my_gnu.on .inner .wrap .lst { width: 100%; }
.my_gnu.on .lst > li.current .user .icon::before { background: #fff; }
.my_gnu.on .lst > li.current .m_lst { overflow: visible; opacity: 1; visibility: visible; display: flex; height: auto; }
.my_gnu.on .flotClose { display: flex; }

.my_gnu .lst > li .user,
.my_gnu .lst > li .user .icon::before,
.my_gnu .lst > li .m_lst > li > a { transition: 0.3s; }
.my_gnu .lst > li .user:hover,
.my_gnu .lst > li .user:focus { color: #C3E0FC; }
.my_gnu .lst > li .user:hover .icon::before,
.my_gnu .lst > li .user:focus .icon::before { background: #fff; }
.my_gnu .lst > li .m_lst > li > a:hover,
.my_gnu .lst > li .m_lst > li > a:focus { color: #C3E0FC; font-weight: 600; padding-left: 1.4rem; }
.my_gnu .lst > li .m_lst > li > a:hover::before,
.my_gnu .lst > li .m_lst > li > a:focus::before { top: 4px; width: auto; height: auto; font-family: 'remixicon'; content: "\eb7b"; color: #C3E0FC; background: none; border-radius: 0; }

/* #wrap.hdBk .quick_link { top: auto; bottom: 1rem; transform: translateX(40.5rem); } */

.quick_link.on {  }
.quick_link.on .my_gnu { position: absolute; display: flex; flex-direction: column; align-items: flex-end; gap: 4rem; width: 1920px; max-width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 0 1rem; }
.quick_link.on .my_gnu .flotOpen { display: none; }


/* subLayout */
.sub_container { padding-top: 116px; }
.sub_container #header::before { display: none; }
#sub_content{padding-bottom:2rem; opacity:0; visibility:hidden; -webkit-transform:translateY(50px); transform:translateY(50px); -webkit-transition:opacity .5s, visibilty .5s, transform .5s; transition:opacity .5s, visibilty .5s, transform .5s; -webkit-transition-delay:0.5s; transition-delay:0.5s; }
.start #sub_content{opacity:1; visibility:visible; -webkit-transform:translateY(0); transform:translateY(0); }

/* 서브비주얼 */
.sub_visual{position:relative;width:100vw;height:304px;color: #fff;text-shadow: 0px 0px 8px #000;font-family:'SUITE';overflow:hidden; margin: 0 auto; }
.sub_visual:before{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%) scale(1.5); transform:translate(-50%, -50%) scale(1.5); width:100%; height:100%; background-image:url('/images/web/main/sub_cnt/sub_img1.jpg'); background-repeat:no-repeat; background-position:center; background-size:cover; content:''; -webkit-transition:transform 2s; transition:transform 2s; }
.sub_visual2:before{background-image:url('/images/web/main/sub_cnt/sub_img2.jpg'); }
.sub_visual3:before{background-image:url('/images/web/main/sub_cnt/sub_img3.jpg'); }
.sub_visual4:before{background-image:url('/images/web/main/sub_cnt/sub_img9.jpg'); }
.sub_visual5:before{background-image:url('/images/web/main/sub_cnt/sub_img10.jpg'); }
.sub_visual6:before{background-image:url('/images/web/main/sub_cnt/sub_img7.jpg'); }
.sub_visual7:before{background-image:url('/images/web/main/sub_cnt/sub_img8.jpg'); }

.sub_visual .container { display: flex; justify-content: center; align-items: center; height: calc(100% - 3.5rem); }
.sub_visual .txt1{ text-align: center; font-size:2.65rem; font-weight:700; }
.sub_visual .txt2{padding-top:0.5rem; font-size:1.7rem; font-weight:100; opacity:0; visibility:hidden; -webkit-transform:translateY(50px); transform:translateY(50px); -webkit-transition:opacity 1s, visibility 1s, transform 1s; transition:opacity 1s, visibility 1s, transform 1s; -webkit-transition-delay:0.3s; transition-delay:0.3s; }

body.start .sub_visual .txt2{ display: none; opacity:1; visibility:visible; -webkit-transform:translateY(0); transform:translateY(0); }
body.start .sub_visual:before{-webkit-transform:translate(-50%, -50%) scale(1); transform:translate(-50%, -50%) scale(1); }

/* 서브메뉴 */
#menu{position:relative; width:100%; max-width: 1565px; height:100%; background:rgba(0, 0, 0, 0.9); margin:-70px auto 0; }
#menu nav{width:1565px; margin:0 auto; }
#menu nav:after{display:block; clear:both; content:''; }
#menu .lnb{position:relative; }
#menu .lnb:after{display:block; clear:both; content:''; }
#menu .lnb > li{position:relative; float:left; min-width:320px; text-align:left; }
#menu .lnb > li.on .subLnb{display:block; }
#menu .lnb > li.home{width:70px; height:70px; min-width:auto; border-width:0 1px ; border-style:solid; border-color:rgba(255,255,255,.2); }
#menu .lnb > li.home a{display:block; width:100%; height:100%; padding:0; text-align:center; font-size:1.25rem; }
#menu .lnb > li.home a > i{position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); }
#menu .lnb > li a{font-family:'SUITE'; font-size:0.85rem; }
#menu .lnb > li > a{position:relative; display:block; height:70px; padding:0 4rem 0 1.5rem; line-height:70px; color:#fff; font-weight:400; border-right:1px solid rgba(255,255,255,.2); overflow:hidden; }
#menu .lnb > li > a > span{display:inline-block; overflow:hidden; max-width:100%; vertical-align:middle; text-overflow:ellipsis; white-space:nowrap; }
#menu .lnb > li.d01 > a:before{position:absolute; top:50%; right:1.5rem; width:26px; height:26px; -webkit-transform:translateY(-50%) rotate(180deg); transform:translateY(-50%) rotate(180deg); background:rgba(0, 0, 0, 0.4); font-family:'xeicon'; content:'\e945'; text-align:center; font-size:0.85rem; border-radius:50%; line-height:26px; -webkit-transition:transform .3s, background .3s; transition:transform .3s, background .3s; }
#menu .subLnb{display:none;position:absolute;top:100%;left:0;width:100%;padding:10px 0;background: rgba(0, 0, 0, 0.6);z-index:1;}
#menu .subLnb li a{position:relative; display:block; height:40px; color:#fff; padding:0 1.5rem; line-height:40px; overflow:hidden; }
#menu .subLnb li a > span{position:relative; display:inline-block; max-width:90%; overflow:hidden; vertical-align:middle; white-space: nowrap; text-overflow: ellipsis; }
#menu .subLnb li a > span:before{position:absolute; bottom:5px; left:0; width:0; height:1px; background:#fff; content:''; -webkit-transition:width .3s; transition:width .3s; }

#menu .subLnb li a:hover > span:before,
#menu .subLnb li a:focus > span:before,
#menu .subLnb li a:active > span:before{width:100%; }
#menu .subLnb li.on a{color:#22499d; }
#menu .subLnb li.on a > span:before{background:#22499d; }
#menu .lnb > li.d01.active > a::before,
#menu .lnb > li.d01.on > a::before,
#menu .lnb > li > a.active::before{background:#22499d; -webkit-transform:translateY(-50%) rotate(0deg); transform:translateY(-50%) rotate(0deg); }

#menu nav > .lnb > li a[target='_blank']:after{content:'\e980'; display:inline-block; margin-left:5px; font-family:'xeicon'; }

/* 서브 타이틀 */
.title_area{position:relative; margin:2.25rem 0 2rem; z-index:1; }
.title_area .container{position:relative; }
.title_area:after{display:block; clear:both; content:''; }
.title_area .pageTitle{word-break:keep-all; font-size:1.65rem; color:#222; font-family:'SUITE'; font-weight:800; float:left; }
.title_area .location{display:none; }

.sub_tit_tside{position:absolute; top:50%; right: 0; -webkit-transform:translateY(-50%); transform:translateY(-50%); }

.fs_ctrl{display:inline-block; vertical-align:middle; overflow:hidden; border-radius:20px; border:1px solid #e7e7e7; }
.fs_ctrl > li{position:relative; float:left; }
.fs_ctrl > li + li:before{position:absolute; top:50%; left:0; width:1px; height:15px; -webkit-transform:translateY(-50%); transform:translateY(-50%); background:#c5c6c9; content:''; }
.fs_ctrl > li > a{display:block; padding:0 .5rem; color:#000; background:#f3f3f3; font-size:0.75rem; line-height:35px; -webkit-transition:font-weight .3s, color .3s; transition:font-weight .3s, color .3s; }
.fs_ctrl > li > a:hover,
.fs_ctrl > li > a:focus,
.fs_ctrl > li > a:hover  > i,
.fs_ctrl > li > a:focus > i{color:#22499d; font-weight:700; }
.fs_ctrl > li > a.fs_ctrl_deflaut_btn{font-family:'SUITE'; }
.fs_ctrl > li > a.fs_ctrl_plus_btn,
.fs_ctrl > li > a.fs_ctrl_minus_btn{font-size:0.9rem; }

.fs_ctrl + .snsBox{margin-left:0.5rem; }
.snsBox{display:inline-block; vertical-align:middle; }
.snsBox button{position:relative;display:inline-block;width:35px;height:35px;padding:0;overflow:hidden;border-radius:50%;background: #666;border-width:1px;border-style:solid;border-color:#9799a0;line-height:33px;text-align:center;color:#fff;}/*230509*/
.snsBox  button:before{position:absolute; top:100%; left:0; width:100%; height:100%; background:#fff; -webkit-transition:top .3s; transition:top .3s; content:''; }
.snsBox button i{position:relative; z-index:1; line-height:33px; }
.snsBox .sns_more{position:absolute; right:0; top:40px; width:115px; overflow:hidden; z-index:1; opacity:0; visibility:hidden; -webkit-transform:translateX(-30px); transform:translateX(-30px); -webkit-transition:opacity .3s, visibility .3s, transform .3s; transition:opacity .3s, visibility .3s, transform .3s; }
.snsBox .sns_more button{position:relative; width:35px; height:35px; float:left; margin:0; background:#4067ae; border-color:#4067ae; font-size:1rem; -webkit-transition:all .3s ease; transition:all .3s ease; overflow:hidden; }
.snsBox .sns_more button + button{margin-left:5px; }
.snsBox .sns_more button.btnTwt{background:#1da1f2; border-color:#1da1f2; }
.snsBox .sns_more button.btnInstar{background:#ff005e; border-color:#ff005e; }
.snsBox .sns_more button.btnKtalk{background:#ffd400; border-color:#ffd400; color:#3e2e2e; }
.snsBox .btnShare.active + .sns_more{opacity:1; visibility:visible; -webkit-transform:translateX(0); transform:translateX(0); }
.snsBox button:hover:before,
.snsBox button:focus:before,
.snsBox button.active:before{top:0; }
.snsBox button:hover,
.snsBox button:focus,
.snsBox button.active{color:#666; }/*230509*/
.snsBox .sns_more button.btnFbook:hover,
.snsBox .sns_more button.btnFbook:focus{color:#4067ae; }
.snsBox .sns_more button.btnTwt:hover,
.snsBox .sns_more button.btnTwt:focus{color:#1da1f2; }
.snsBox .sns_more button.btnInstar:hover,
.snsBox .sns_more button.btnInstar:focus{color:#ff005e; }
.snsBox .sns_more button.btnKtalk:hover,
.snsBox .sns_more button.btnKtalk:focus{color:#3e2e2e; border-color:#3e2e2e; }

@media (max-width:1980px){
    body.fixed .my_gnu { padding: 0 1rem; }
}

@media screen and (max-width:1870px){
    .sub_content_wrap .container{width:95%; padding:0; }

    .sub_tit_tside{right:0; }

    #menu nav{width:95%; }
}

@media (max-width:1840px){
    .quick_link {  }
}

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

    .tpopup_wrap .container { padding: 0; }
    .tpopup_wrap .control { padding: 0 1rem; }
}

@media (max-width:1440px){
    
    #header .header_cnt .container { gap: 2rem; }

    #header .header_cnt .logo a { width: 171px; height: 41px; }

    #gnb .depth01 > ul > li > a { font-size: 1rem; }

    #footer .ft_wrap .f_logo a { width: 171px; }

    #menu .lnb > li{min-width:280px}
}

@media (max-width:1340px){
    #gnb .depth01 > ul > li.on .depth02::before { height: 100%; }
}

@media (max-width:1280px){
    #menu{margin-top:-50px; }
	#menu .lnb > li.home{width:50px; height:50px; }
	#menu .lnb > li > a{height:50px; line-height:50px; }
	#menu .subLnb li a{padding:0 .5rem; }
	#menu .lnb > li{min-width:auto; width:calc(33.333% - 17px); }
}

@media (max-width:1240px){
    #header { height: auto; }
    
    #header .header_top { display: none; }

    #header .header_actions ul li.search .searchOpen { display: block; }
    #header .header_actions ul li.search .box_search_0 { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #fff; padding: 0.4rem 0.7rem 1.2rem; box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.15); }
    #header .header_actions ul li.search .box_search_0 #searchForm { border-color: #222; }
    #header .header_actions ul li.search .box_search_0 #searchForm .searchInput::placeholder { color: #555; }
    #header .header_actions ul li.search .box_search_0 #searchForm .srch_btn { color: #222; }
    #header .header_actions ul li.search .box_search_0.active .searchClose { display: flex; padding: 0; position: absolute; top: -2.2rem; right: 3.1rem; background: #fff; font-size: 1.3rem; }

    #header .header_actions ul li.fullmenu a.siteMap { display: none; }
    #header .header_actions ul li.fullmenu a { width: 1.1rem; height: 1rem; }
    #header .header_actions ul li.fullmenu a em { width: 1.1rem; height: 2px; }
    #fullmenuOpen { display: flex !important; }

    #header .header_cnt { margin-top: 0;}
    #header .header_cnt .container { height: 3.2rem; }

    #nav { display: none; }   

    .user_srv .titTab ul { flex-wrap: wrap; }
    .user_srv .titTab ul li { flex: auto; width: calc(100% / 3); border-top: 1px solid rgba(255, 255, 255, 0.2); }
    .user_srv .titTab ul li:nth-child(1) { border-top: none; }
    .user_srv .titTab ul li:nth-child(2) { border-top: none; }
    .user_srv .titTab ul li:nth-child(3) { border-top: none; border-right: 1px solid rgba(255, 255, 255, 0.2); }
    .user_srv .tabWrap .lst dl dd ul li { width: calc((100% - 1rem) / 3); }

    .sub_container { padding-top: 3.2rem; }

    .my_gnu .flotOpen { color: #222; width: 100%; }
}

@media (max-width:1200px){
    .sub_content_wrap{width:100%;}
  	.subCntBody{min-height:auto; }

    .sub_visual {height:250px; }
	.sub_visual .txt1{padding-top:2.5rem; font-size:2rem; }
	.sub_visual .txt2{font-size:1.25rem; }
}

@media (max-width:1024px){
    .tpopup_wrap .topPopList .item a { padding: 0; }
}

@media (max-width:960px){
    #footer .ft_wrap { display: block; padding: 1.5rem 0 2.5rem; }
    #footer .f_lnk { margin-top: 1rem; }
    #footer .f_lnk ul { flex-wrap: wrap; gap: 0.5rem 1rem; }
    #footer .f_lnk ul li + li::before { left: -0.55rem; }
    #footer .f_info { margin-top: 1rem; }
}

@media (max-width:768px){
    .uppopOpen { padding-top: 115px; }
    .tpopup_wrap { height: 115px; }
    .tpopup_wrap .control .next,
    .tpopup_wrap .control .prev { top: 0.8rem; font-size: 1.3rem; }

    .uppopOpen #header { top: 115px;}

    .user_srv .tabWrap .lst dl dd ul li { width: calc((100% - 0.5rem) / 2); }
    
    .my_gnu .lst { width: 100%; height: 100vh; overflow-y: auto; }
    .my_gnu .lst > li { width: calc(100% - 6rem); gap: 1rem; align-items: flex-start; }
    .my_gnu .lst > li + li { margin-top: 0; }
    .my_gnu .lst > li .user { position: absolute; right: 1rem; width: 5.4rem; flex-direction: column; text-align: center; margin-top: 1rem; }
    .my_gnu .lst > li:nth-child(1) .user { top: 2rem; }
    .my_gnu .lst > li:nth-child(2) .user { top: 10rem; }
    .my_gnu .lst > li:nth-child(3) .user { top: 17rem; }
    .my_gnu .lst > li:nth-child(4) .user { top: 25rem; }
    .my_gnu .lst > li .user .icon { width: 3.2rem; }
    .my_gnu .lst > li .user .icon::before { width: 3.2rem; height: 3.2rem; }
    .my_gnu .lst > li .m_lst > li > a { display: block; }
    .my_gnu .lst > li .m_lst > li > a span br { display: none; }
    .my_gnu .flotClose { position: absolute; bottom: 1rem; right: 1rem; margin-right: 0; width: 3rem; height: 3rem; font-size: 1.2rem; }
    /* body.fixed .my_gnu { height: 100vh; gap: 2rem; top: auto; left: auto; transform: none; padding: 2rem 1rem 5rem 1rem; } */

    .my_gnu.on .inner .wrap { height: 100vh; padding: 2rem 1rem 5rem; }
    .my_gnu.on .lst > li.current .m_lst { display: block; width: calc(100% - 7.5rem); }
    .my_gnu.on .lst > li.current .m_lst li + li { margin-top: 0.2rem; }

    .sub_visual{height:200px; text-align:center; }
	.sub_visual .txt1{padding-top:2rem; font-size:1.5rem; }
	.sub_visual .txt2{font-size:0.95rem; }

    .title_area{margin:1.5rem 0 0; }
	.title_area .container{padding-bottom:3.5rem; }
	.title_area .pageTitle{font-size:1.25rem; text-align:center; float:none; width:100%; }

	.sub_tit_tside {top:auto; bottom:0;right:auto; left:50%; margin-left:-65px;}
	.sub_tit_tside .fs_ctrl {display:none;}
}

@media (max-width:720px){
    .quick_link { bottom: 5.6rem; right: 1.1rem; }
    .quick_link .moveTop { width: 3.2rem; height: 3.2rem; }
    .quick_link .fund { width: 3.5rem; height: 3.5rem; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); padding: 0.5rem;}
    .quick_link .fund img { max-width: 100%; }
}

@media (max-width:680px){
    .user_srv .titTab ul li { width: calc(100% / 2); }
    .user_srv .titTab ul li:nth-child(2) { border-right: 1px solid rgba(255, 255, 255, 0.2); }
    .user_srv .titTab ul li:nth-child(3) { border-top: 1px solid rgba(255, 255, 255, 0.2); border-right: none; }
    .user_srv .titTab ul li a { height: 2.4rem; padding: 0 0.8rem; }
}

@media (max-width:580px){
    
    

    #wrap:not(.sub_container) { padding-top: 3.2rem; }
    .uppopOpen { padding-top: 179px !important; }

    #header::before { display: none; }

    #header .header_cnt .logo a { width: 160px; height: 38px; background-image: url('/images/web/eng/layout/logo.png'); }

    #header .header_actions ul li.search .searchOpen { color: #222; }
    #header .header_actions ul li.fullmenu a em { background: #222; }

    .my_gnu .lst > li:nth-child(3) .user { top: 16rem; }
    .my_gnu .lst > li:nth-child(4) .user { top: 22rem; }
    .my_gnu .lst > li .user .icon { width: 2.5rem; }
    .my_gnu .lst > li .user .icon img { max-width: 100%; }

    #footer .ft_wrap .f_logo a { width: 160px; }
}

@media (max-width:480px){
    #menu .lnb > li{width:calc(33.333% - 0px); }
	#menu .lnb > li.home,
	#menu .lnb > li.home + li.d01 > a:after{display:none !important; }
	#menu .lnb > li.home + li.d01 > a { padding-left:0; }
	#menu .lnb > li > a { cursor:default; padding: 0;}
	#menu .lnb > li.d01 > a:before{right:0.5rem}
}

@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.flipInY {
	backface-visibility: visible !important;
	animation-name: flipInY;
}