@charset "utf-8";
/*==================================================

    ----------------------------------------------------------------
	* Date					:	2023.07.21
	* Modify				:
	* Name					:	common.css
	----------------------------------------------------------------

	- Description -

	00. 변수				:	root
	00. common				:	전체 공통사항
	01. layout				:	레이아웃
	02. table				:	테이블 요소
	03. button				:	버튼요소
	04. pop					:	팝업요소
	05. font				:	폰트
	06. icon				:	아이콘

=====================================================*/

#skipNavi {position:absolute; left:0; top:-200px; width:100%; margin:0 auto; z-index:9999;}
#skipNavi a:active,
#skipNavi a:focus {position:absolute; top:200px; left:0; width:100%; background:#f8f7f3; line-height:25px; text-align:center; border-bottom:1px solid #dbdbdb;}



/* ===========================
	변수
=========================== */
:root {
	
	/* main */
	--color-100 : #3361cd;
	--color-200 : #ec5962;
	--color-300 : #68C132;
	--color-400 : #FF921B;

}




/* ===========================
	00. common
=========================== */
/* color */
.font-color-blue {color:var(--color-100) !important;;}
.font-color-red {color:var(--color-200) !important;;}
.font-color-light-blue {color:#d1deff !important;;}
.font-color-black {color:#252525 !important;;}
.font-color-light-gray {color:#808080 !important;}



/* ===========================
	01. layout
=========================== */
/* html.fix body {overflow:hidden;} */

/* wrapper */
#wrap {position:relative; min-height:100vh; opacity:0; transition:opacity 0.2s 0s ease;}
#wrap.open {opacity:1; }

/* dHead */
#dHead {position:fixed; top:0; left:0; width:100%; z-index:9999; background-color:#fff;}
#dHead.scroll {}
#dHead.up .header-wrap {transform:translate(0px , 0px);}
#dHead.down .header-wrap {transform:translate(0px , -45px);}
#dHead.state-gnb .header-gnb-wrap {height:640px;}
#dHead.state-search .header-gnb-wrap {height:400px;}
#dHead.state-search .header-search-wrap {opacity:1; visibility:visible; transition:opacity 0.4s 0s ease, visibility 0s 0s ease;}
#dHead.state-sitemap .header-gnb-wrap {height:100vh;}
#dHead.state-sitemap .header-all-menu-wrap {opacity:1; visibility:visible; overflow-y:auto; transition:opacity 0.4s 0s ease, visibility 0s 0s ease;}
#dHead.state-sitemap .header-global-wrap {opacity:0; visibility:hidden; transition:opacity 0.4s 0s ease, visibility 0s 0.4s ease;}
#dHead.down.state-sitemap .header-gnb-wrap  {height:calc( 100vh + 45px );}
#dHead.up.state-sitemap .header-gnb-wrap  {height:100vh;}

#dHead.transparent .header-gnb-wrap {background:rgba(255,255,255,0);}
#dHead.transparent .header-global-wrap:before {background-color:rgba(235,235,235,0);}
#dHead.transparent .global-menu .global-menu-list .menu-list-cell > a {color:rgba(255,255,255,0.6);}
#dHead.transparent .global-menu .global-menu-list .menu-list-cell:after {background-color:rgba(255,255,255,0.3);}
#dHead.transparent .language-menu .btn-language-menu {color:#fff;}
#dHead.transparent .language-menu .btn-language-menu .icons:before {opacity:0;}
#dHead.transparent .language-menu .btn-language-menu .icons:after {opacity:1;}
#dHead.transparent .language-menu .btn-language-menu .arrow:before {opacity:0;}
#dHead.transparent .language-menu .btn-language-menu .arrow:after {opacity:1;}
#dHead.transparent .header-wrap .logo > a:before {opacity:0;}
#dHead.transparent .header-wrap .logo > a:after {opacity:1;}
#dHead.transparent .gnb-list .gnb-list-cell > a {color:#fff;}
#dHead.transparent .header-wrap .cta-btn-group > ul > li > a {color:#fff; background-color:rgba(255,255,255,.0); border-color:rgba(201,201,201,.3);}
#dHead.transparent .header-gnb-wrap .side-btn-wrap .search-data .btn-search:before {opacity:0;}
#dHead.transparent .header-gnb-wrap .side-btn-wrap .search-data .btn-search:after {opacity:1;}
#dHead.transparent .header-gnb-wrap .side-btn-wrap .menu-data .btn-gnb-menu-open span {background:#fff;}
#dHead.transparent .header-gnb-wrap {box-shadow:0px 14px 12px -10px rgba(0,0,0,.0);}

#dHead.actived .header-gnb-wrap {background:rgba(255,255,255,1);}
#dHead.actived .header-global-wrap:before {background-color:rgba(235,235,235,1);}
#dHead.actived .global-menu .global-menu-list .menu-list-cell > a {color:#666}
#dHead.actived .global-menu .global-menu-list .menu-list-cell:after {background-color:rgba(102,102,102,0.3);}
#dHead.actived .language-menu .btn-language-menu {color:#666;}
#dHead.actived .language-menu .btn-language-menu .icons:before {opacity:1;}
#dHead.actived .language-menu .btn-language-menu .icons:after {opacity:0;}
#dHead.actived .language-menu .btn-language-menu .arrow:before {opacity:1;}
#dHead.actived .language-menu .btn-language-menu .arrow:after {opacity:0;}
#dHead.actived .header-wrap .logo > a:before {opacity:1;}
#dHead.actived .header-wrap .logo > a:after {opacity:0;}
#dHead.actived .gnb-list .gnb-list-cell > a {color:#222;}
/* #dHead.actived .header-wrap .cta-btn-group > ul > li > a {color:#4d4d4d; background-color:rgba(255,255,255,.8); border-color:rgba(201,201,201,.8);} */
#dHead.actived .header-wrap .cta-btn-group > ul > li > a {color:#3069fe; background-color:transparent; border-color:#3069fe;}
#dHead.actived .header-gnb-wrap .side-btn-wrap .search-data .btn-search:before {opacity:1;}
#dHead.actived .header-gnb-wrap .side-btn-wrap .search-data .btn-search:after {opacity:0;}
#dHead.actived .header-gnb-wrap .side-btn-wrap .menu-data .btn-gnb-menu-open span {background:#252525;}
#dHead.actived .header-gnb-wrap {box-shadow:0px 14px 12px -10px rgba(0,0,0,.05);}

#dHead.gray .header-gnb-wrap {background-color:#f6f6f6;}
#dHead.gray .header-global-wrap:before {background-color:rgba(235,235,235,0);}

.header-wrap {position:absolute; top:0; left:0; width:100%;  transform:translate(0px , 0px); transition:transform 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000);}
.header-wrap .header-inner {display:flex; width:100%; height:100%; padding:0 80px; box-sizing:border-box;}


/* header-global-wrap */
.header-global-wrap {position:relative; width:100%; height:45px; /*border-bottom:1px solid #ebebeb;*/ box-sizing:border-box; opacity:1; visibility:visible; z-index:5; transition:opacity 0.4s 0s ease, visibility 0s 0s ease;}
.header-global-wrap:before {content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:rgba(235,235,235,1); transition:background 0.4s ease;}
.header-global-wrap .header-inner {align-items:center;}
.header-global-wrap .header-inner > div:first-child {margin-left:auto;}
/*
#dHead.scroll .header-global-wrap {height:0px; opacity:0; visibility:hidden; transition:all ease 0.3s;}
*/
.global-menu .global-menu-list {display:flex; align-items:center; margin:0 -6px;}
.global-menu .global-menu-list .menu-list-cell {position:relative; display:flex; align-items:center; padding:0 6px;}
.global-menu .global-menu-list .menu-list-cell:after {content:''; position:absolute; top:50%; right:0; width:1px; height:12px; transform:translateY(-50%); background-color:rgba(102,102,102,.3); transition:background 0.4s ease;}
.global-menu .global-menu-list .menu-list-cell:last-child:after {content:none;}
.global-menu .global-menu-list .menu-list-cell > a {display:block; padding:0 6px; font-size:14px; font-weight:600;color:#666; transition:color 0.4s ease;}

/* language-menu */
.global-menu + .language-menu {margin-left:24px;}
.language-menu {position:relative; display:flex;}
.language-menu .btn-language-menu {position:relative; padding:0 25px 0 22px; font-size:14px; line-height:18px; color:#666; transition:color 0.4s ease;}
.language-menu .btn-language-menu .icons {position:absolute; left:0; top:0; width:18px; height:18px; display:block;}
.language-menu .btn-language-menu .icons:before {content:''; display:block; position:absolute; left:0; top:0; width:18px; height:18px; background:url(../images/icon/btn-language-menu-global.png) no-repeat center center; background-size:18px auto; opacity:1; transition:opacity 0.4s ease;}
.language-menu .btn-language-menu .icons:after {content:''; display:block; position:absolute; left:0; top:0; width:18px; height:18px; background:url(../images/icon/btn-language-menu-global-white.png) no-repeat center center; background-size:18px auto; opacity:0; transition:opacity 0.4s ease;}
.language-menu .btn-language-menu .arrow {position:absolute; right:0; top:0; width:18px; height:18px; display:block;}
.language-menu .btn-language-menu .arrow:before {content:''; display:block; position:absolute; left:0; top:0; width:18px; height:18px; background:url(../images/icon/btn-language-menu-arrow.png) no-repeat center center; background-size:18px auto; opacity:1; transition:opacity 0.4s ease;}
.language-menu .btn-language-menu .arrow:after {content:''; display:block; position:absolute; left:0; top:0; width:18px; height:18px; background:url(../images/icon/btn-language-menu-arrow-white.png) no-repeat center center; background-size:18px auto; opacity:0; transition:opacity 0.4s ease;}.language-menu .btn-language-menu:before {content:''; position:absolute; left:0; top:0; width:18px; height:18px; background:url(../images/icon/btn-language-menu-global.png) no-repeat center center; background-size:18px auto;}

.language-menu .menu-list {position:absolute; top:100%; left:0; margin:12px 0 0 12px; opacity:0; visibility:hidden; transition:ease all 0.3s;}
.language-menu .menu-list > ul {width:72px; padding:8px; border-radius:8px; background-color:#4d4d4d;; box-sizing:border-box;}
.language-menu .menu-list > ul > li {}
.language-menu .menu-list > ul > li > a {display:block; font-size:16px; line-height:30px; color:#a5a5a5; text-align:center;}
.language-menu .menu-list > ul > li > a:hover {color:#fff;}

.language-menu.actived .btn-language-menu:after {transform:rotate(0); transition:ease all 0.3s;}
.language-menu.actived .menu-list {opacity:1; visibility:visible; transition:ease all 0.3s; z-index:10;}

/* header-gnb-wrap */
.header-gnb-wrap {position:absolute; top:0; left:0; padding-top:45px; height:117px; width:100%; overflow:hidden; z-index:0; box-shadow:0px 14px 12px -10px rgba(0,0,0,.05); background:#fff; box-sizing:border-box; transition:height 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000), background 0.4s ease, box-shadow 0.4s ease;}
.header-gnb-wrap .header-inner {height:auto;}
.header-gnb-wrap .header-inner .header-inner-grid {position:relative; display:flex; align-items:center; width:1128px; margin:auto;}

/* logo */
.header-wrap .logo {width:316px; padding-top:25px; box-sizing:border-box;}
.header-wrap .logo > a {position:relative; display:block; width:214px; height:22px; font-size:0;}
.header-wrap .logo > a:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/common/logo_black.png) left center no-repeat; opacity:1; transition:opacity 0.4s ease;}
.header-wrap .logo > a:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/common/logo_black.png) left center no-repeat; opacity:0; transition:opacity 0.4s ease;}
#dHead.transparent .header-wrap .logo > a:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/common/logo_white.png) left center no-repeat; opacity:1; transition:opacity 0.4s ease;}
#dHead.transparent .header-wrap .logo > a:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/common/logo_black.png) left center no-repeat; opacity:0; transition:opacity 0.4s ease;}
#dHead.gray.actived .header-wrap .logo > a:before {background:url(../images/common/logo_black.png) left center no-repeat; opacity:1;}

/*  gnb */
#gnb {position:relative; width:100%; height:72px;}
#gnb .gnb-wrap {height:100%;}
.gnb-list {position:relative; display:flex; align-items:center; height:100%;}
.gnb-list .gnb-list-cell {padding:0 25px; height:100%;}
.gnb-list .gnb-list-cell:first-child {padding-left:0;}
.gnb-list .gnb-list-cell > a {font-size:18px; font-weight:600; display:inline-flex; height:100%; align-items:center; color:#222; transition:color 0.4s ease;}
.gnb-list .gnb-list-cell:hover > a {color:#809ce0;}
.gnb-list .gnb-list-cell .snb {position:absolute; left:0; top:100%; display:flex; width:100%; padding:24px 0 0 0; opacity:0; visibility:hidden;}
.gnb-list .gnb-list-cell.hover .snb {opacity:1; visibility:visible; transition:opacity 0s ease;}

.header-wrap .snb .snb-list {display:flex; flex-wrap:wrap; flex:1; margin:-6px;}
.header-wrap .snb .snb-list .snb-list-cell {width:50%; padding:6px; box-sizing:border-box;}
.header-wrap .snb .snb-list .snb-list-cell .snb-list-visual {display:flex; flex-direction:column; height:100%; padding:23px 32px; border:1px solid #ededed; border-radius:16px; background-color:#fff; box-sizing:border-box;}
.header-wrap .snb .snb-list .snb-list-cell .snb-list-visual .snb-header > .icon {padding-right:8px;}
.header-wrap .snb .snb-list .snb-list-cell .snb-list-visual .snb-header > a {position:relative; display:inline-flex; align-items:center; font-size:18px; font-weight:600; color:#1a1919;}
.header-wrap .snb .snb-list .snb-list-cell .snb-list-visual .snb-header > a:after {content:''; width:18px; height:18px; margin:0 0 0 4px; background:url(../images/icon/arrow-left-gray-18.png) no-repeat center center; background-size:18px;}
.header-wrap .snb .snb-list .snb-list-cell .snb-list-visual .snb-header > a > .icon {margin-right:8px;}
.header-wrap .snb .snb-list .snb-list-cell .snb-list-visual .inner-word-wrap {display:flex; margin-top:16px; font-size:18px; font-weight:600; color:#1a1919;}
.header-wrap .snb .snb-list .snb-list-cell .snb-list-visual .inner-word-wrap > ul {display:flex; flex-wrap:wrap; margin:-4px -10px;}
.header-wrap .snb .snb-list .snb-list-cell .snb-list-visual .inner-word-wrap > ul > li {padding:4px 10px; font-size:16px; font-weight:500; color:#666;}
.header-wrap .snb .snb-list .snb-list-cell .snb-list-visual .inner-word-wrap > ul > li > a {display:block;}
/* .header-wrap .gnb-list .gnb-list-cell:nth-child(2) .snb .snb-list .snb-list-visual {height:165px;} */

.header-wrap .snb .snb-list + .snb-visual-area {margin-left:12px;}
.header-wrap .snb .snb-visual-area {flex:0 0 auto; width:354px;}
.header-wrap .snb .snb-visual-area .snb-visual {position:relative; width:354px; height:372px;; border-radius:16px; overflow:hidden;}
.header-wrap .snb .snb-visual-area .snb-visual-list {position:absolute; top:0; left:0; width:100%; height:100%;}
.header-wrap .snb .snb-visual-area .snb-visual-list > ul {display:flex; flex-direction:column; width:100%; height:100%; padding:56px 40px; box-sizing:border-box;}
.header-wrap .snb .snb-visual-area .snb-visual-list .snb-visual-list-cell {position:relative; width:100%; min-height:27px;}
.header-wrap .snb .snb-visual-area .snb-visual-list .snb-visual-list-cell + .snb-visual-list-cell {margin-top:16px;}
.header-wrap .snb .snb-visual-area .snb-visual-list .snb-visual-list-cell .snb-header > a {position:relative; display:inline-block; font-size:18px; color:#fff; font-weight:600; line-height:27px;}
.header-wrap .snb .snb-visual-area .snb-visual-list .snb-visual-list-cell .snb-header > a:after {content:''; position:absolute; top:0; right:-22px; margin-top:5px; width:18px; height:18px; background:url(../images/icon/header-snb-arrow-white.png) no-repeat center center; background-size:auto 18px;}

/* cta-btn-group */
.header-wrap .cta-btn-group {position:absolute; right:0;}
.header-wrap .cta-btn-group > ul {display:flex;}
.header-wrap .cta-btn-group > ul > li {}
.header-wrap .cta-btn-group > ul > li + li {margin-left:8px;}
.header-wrap .cta-btn-group > ul > li > a {display:block; height:40px; padding:0 24px; font-size:14px; color:#3069fe; line-height:38px; font-weight:600; background-color:transparent; border:1px solid #3069fe; border-radius:20px; box-sizing:border-box; transition:background 0.4s ease, border 0.4s ease, color 0.4s ease;}
.header-wrap .cta-btn-group > ul > li > a:hover {color:#fff; background-color:#3069fe;}

/* header-wrap > side-btn-wrap */
.header-gnb-wrap .side-btn-wrap {display:flex; width:316px;}
.header-gnb-wrap .side-btn-wrap > ul {display:flex; align-items:center; margin-left:auto;}
.header-gnb-wrap .side-btn-wrap > ul > li {width:36px; height:36px;}
.header-gnb-wrap .side-btn-wrap > ul > li + li {margin-left:32px;}
.header-gnb-wrap .side-btn-wrap .search-data .btn-search {position:relative; width:100%; height:100%;}
.header-gnb-wrap .side-btn-wrap .search-data .btn-search:before {content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:url(../images/icon/icon-search-black-36.png) no-repeat center center; background-size:auto 100%; opacity:1; transition:opacity 0.4s ease;}
.header-gnb-wrap .side-btn-wrap .search-data .btn-search:after {content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:url(../images/icon/icon-search-white.png) no-repeat center center; background-size:auto 100%; opacity:0; transition:opacity 0.4s ease;}
.header-gnb-wrap .side-btn-wrap .menu-data .btn-gnb-menu-open {position:relative; width:100%; height:100%;}
.header-gnb-wrap .side-btn-wrap .menu-data .btn-gnb-menu-open span {position:absolute; left:50%; display:block; width:30px; height:3px; background-color:#252525; transform:translateX(-50%); transition:background 0.4s ease;}
.header-gnb-wrap .side-btn-wrap .menu-data .btn-gnb-menu-open span:nth-child(1) {top:6px;}
.header-gnb-wrap .side-btn-wrap .menu-data .btn-gnb-menu-open span:nth-child(2) {top:16px;}
.header-gnb-wrap .side-btn-wrap .menu-data .btn-gnb-menu-open span:nth-child(3) {top:26px;}

/* header-all-menu-wrap */
.header-all-menu-wrap {position:absolute; top:0; left:0; width:100%; height:100%; z-index:99999; overflow-y:hidden; opacity:0; visibility:hidden; transition:opacity 0.4s 0s ease, visibility 0s 0.4s ease, overflow 0s 0.4s ease;}
.header-all-menu-inner {width:100%; min-height:100%; padding:80px 80px 40px 80px; background-color:#f6f6f6; box-sizing:border-box;}
.header-all-menu-inner .header-menu-top .logo {position:absolute; top:66px; left:50%; margin-left:-880px; width:214px; height:52px; font-size:0; background:url(../images/common/logo_black_lg.png) center center no-repeat; background-size:auto 100%;}
.header-all-menu-inner .header-menu-top .btn-gnb-menu-close {position:absolute; top:66px; right:50%; margin-right:-880px; width:56px; height:56px; background:url(../images/icon/icon-clear-black.png) no-repeat center center; background-size:56px;}

@media screen and (max-width:1920px){
	.header-all-menu-inner .header-menu-top .logo {margin-left:auto; left:80px;}
	.header-all-menu-inner .header-menu-top .btn-gnb-menu-close {margin-right:auto; right:80px;}
}

.header-all-content {max-width:1128px; margin:0 auto;}
.header-all-menu .all-menu-list {display:flex; margin:0 -24px;  white-space:nowrap;}
.header-all-menu .menu-list-cell {flex:1; padding:0 24px; box-sizing:border-box;}
.header-all-menu .menu-list-subject {font-weight:700; font-size:24px; line-height:1.5; color:#333;}
.header-all-menu .menu-list-subject > a {}
.header-all-menu .snb-list {margin-top:16px;}
.header-all-menu .snb-list .snb-list-cell + .snb-list-cell {margin-top:16px;}
.header-all-menu .snb-list .snb-list-cell .snb-list-data > a {position:relative; display:inline-block; padding-right:24px; font-size:18px; color:#1a1919; font-weight:600; line-height:1.5;}
.header-all-menu .snb-list .snb-list-cell .snb-list-data > a:after {content:''; position:absolute; top:50%; right:0; width:18px; height:18px; background:url(../images/icon/arrow-left-blue-18.png) no-repeat center center; background-size:auto 100%; transform:translateY(-50%) rotate(0deg); opacity:1;}
.header-all-menu .snb-list .snb-list-cell .snb-list-data > a.single:after {display:none;}
.header-all-menu .tnb-list {margin-top:8px;}
.header-all-menu .tnb-list > li + li {margin-top:4px;}
.header-all-menu .tnb-list > li > a {font-size:16px; line-height:1.5; font-weight:500; color:#808080;}
.header-all-content .all-menu-bottom {margin-top:80px;}
.header-all-content .all-menu-bottom > ul {display:flex; align-items:center; margin-left:-16px;}
.header-all-content .all-menu-bottom > ul > li {position:relative; padding:8px;}
.header-all-content .all-menu-bottom > ul > li:after {content:''; position:absolute; top:50%; left:0; width:2px; height:12px; background-color:rgba(37,37,37,.1); transform:translateY(-50%);}
.header-all-content .all-menu-bottom > ul > li:first-child:after {content:none;}
.header-all-content .all-menu-bottom > ul > li > a {display:block; padding:8px; font-weight:600; color:#808080}
.header-all-content .all-menu-bottom > ul > li > a:hover {color:#0039c0;}

.header-all-menu .menu-list-cell:hover .menu-list-subject {color:#0039c0;}

/* header-search-wrap */
.header-search-wrap {position:absolute; top:117px; left:0; width:100%; box-shadow:0px 14px 12px -10px rgba(0,0,0,.05); opacity:0; visibility:hidden; transition:opacity 0.4s 0s ease, visibility 0s 0.4s ease;}
.header-search-inner {width:100%; padding:72px 0 115px;}
.header-search-form .header-input-form {position:relative; display:flex; width:760px; margin:0 auto;}
.header-search-form .header-input-form .input-value {width:100%;}
.header-search-form .header-input-form input {height:96px; padding:0 100px 0 40px; font-size:32px; font-weight:500; color:rgba(37,37,37,.5); border-radius:16px; border-color:#ededed;}
.header-search-form .header-input-form .input-ui {position:absolute; right:0; top:0; margin:23px 40px 0 0;}



/* dBody */
#dBody {position:relative; min-height:100vh; padding-top:117px; /*overflow:hidden;*/ box-sizing:border-box; transition:all ease 0.3s;}
/*
#dHead.scroll + #dBody {padding-top:0px;  transition:all ease 0.3s;}
*/
#dBody.dbody-back-gray {background-color:#f6f6f6;}
#dBody.dbody-back-light-blue {background-color:#f2f5fc;}
#contents {position:relative; max-width:1128px; margin:0 auto; padding:0 0 160px 0; box-sizing:border-box; z-index:0;}

/* dFoot */
#dFoot {position:relative; width:100%; z-index:150;}
.footer-wrap {width:100%;}
.footer-inner {display:flex; width:100%; height:100%; padding:0 80px; box-sizing:border-box;}
.footer-inner .footer-right {margin-left:auto;}

/* dFoot > page ui*/
#page-ui {position:fixed; right:80px; bottom:0; display:flex; flex-direction:column; align-items:flex-end; padding:80px 0; z-index:999;}
#page-ui.actived .page-ui-item {transform:translate(0% , 0%); opacity:1;}
#page-ui.bottom {position:absolute; bottom:100%; }
.page-ui-item {transform:translate(0% , 100%); opacity:1; transition:transform 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940), opacity 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);}
.page-ui-item:nth-child(3) {opacity:0;}
.page-ui-item + .page-ui-item {margin-top:6px;}
.page-ui-item > button {font-size:0; border-radius:50%;}
.page-ui-item .btn-page-chatbot {position:relative; width:64px; height:64px; border-radius:32px; background-color:#0039c0; overflow:hidden; transition-duration:0.4s;} 
.page-ui-item .btn-page-chatbot:after {content:''; position:absolute; top:0; right:0; width:64px; height:64px; background-image:url(../images/icon/icon-chatbot.png); background-repeat:no-repeat; background-position:right center; background-size:64px 64px; opacity:1;}
.page-ui-item .btn-page-chatbot > span {position:absolute; top:0; right:0; display:flex; align-items:center; width:255px; height:100%; padding:0px 64px 0px 24px; font-size:14px; line-height:21px; color:#ffffff; text-align:left; box-sizing:border-box; background: linear-gradient(90deg, rgba(0,148,211,1) 0%, rgba(0,57,192,1) 100%); transform:translate(calc(100% - 64px) , 0%); opacity:0; visibility:hidden;}
.page-ui-item .btn-page-chatbot:hover {width:255px; background-color:transparent;}
.page-ui-item .btn-page-chatbot:hover > span {transform:translate(0, 0%); transition:transform 0.4s, opacity 0.4s; opacity:1; visibility:visible;}

.page-ui-item .btn-page-goods {position:relative; width:64px; height:64px; border-radius:32px; background-color:#8d2dd8; overflow:hidden; transition-duration:0.4s;} 
.page-ui-item .btn-page-goods:after {content:''; position:absolute; top:0; right:0; width:64px; height:64px; background-image:url(../images/icon/icon-goods.png); background-repeat:no-repeat; background-position:right center; background-size:64px 64px; opacity:1;}
.page-ui-item .btn-page-goods > span {position:absolute; top:0; right:0; display:flex; align-items:center; width:292px; height:100%; padding:0px 60px 0px 24px; font-size:14px; line-height:21px; color:#ffffff; text-align:left; box-sizing:border-box; background: linear-gradient(90deg, #bc5be6 0%, #8d2dd8 100%); transform:translate(calc(100% - 64px) , 0%); opacity:0; visibility:hidden;}
.page-ui-item .btn-page-goods:hover {width:292px; background-color:transparent;}
.page-ui-item .btn-page-goods:hover > span {transform:translate(0, 0%); transition:transform 0.4s, opacity 0.4s; opacity:1; visibility:visible;}

.page-ui-item .btn-page-top {width:64px; height:64px; background-color:#333333; background-image:url(../images/icon/icon-footer-page-top.png); background-repeat:no-repeat; background-position:center center; background-size:auto;}


/* dFoot > footer menu */
.footer-menu-wrap {height:80px; border-bottom:1px solid rgba(255,255,255,.1); background-color:#1a1919; box-sizing:border-box;}
.footer-menu-wrap .footer-inner {align-items:center;}
.footer-menu {display:flex; align-items:center;}
.footer-menu-list {display:flex; margin:0 -15px;}
.footer-menu-list .menu-list-cell {padding:0 15px;}
.footer-menu-list .menu-list-cell > a {display:block; font-size:16px; color:rgba(255,255,255,.2); font-weight:400;}
.footer-menu-list .menu-list-cell > a > em,
.footer-menu-list .menu-list-cell > a:hover{color:rgba(255,255,255,.5)}

.footer-language .btn-language-menu {color:rgba(255,255,255,.5);}
.footer-language .language-menu .btn-language-menu:before {content:''; position:absolute; left:0; top:0; width:18px; height:18px; background:url(../images/icon/btn-footer-language-menu-global.png) no-repeat center center; background-size:18px auto;}
.footer-language .language-menu .btn-language-menu:after {content:''; position:absolute; right:0; top:0; width:18px; height:18px; background:url(../images/icon/btn-language-menu-arrow.png) no-repeat center center; background-size:18px auto;}



/* dFoot > footer content */
.footer-content {padding:80px 0; background-color:#1a1919;}
.footer-content .footer-right {display:flex; flex-direction:column;}
.footer-number-wrap {display:flex;}
.footer-number-wrap .footer-number-item {display:flex;}
.footer-number-wrap .footer-number-item + .footer-number-item {margin-left:24px;}
.footer-number-wrap .footer-number-item .number-data {font-size:18px; color:rgba(255,255,255,.5); font-weight:500; line-height:30px;}
.footer-number-wrap .footer-number-item .number-data  + .number-data {padding-left:12px;}

.footer-number-wrap + .footer-company-location {margin-top:16px;}
.footer-company-location {width:960px;}
.footer-company-location .company-location-list {display:flex; flex-wrap:wrap; margin:0 -6px;}
.footer-company-location .company-location-list .location-list-cell {display:inline-flex; align-items:center; padding:0 6px; font-size:14px; line-height:27px; font-weight:400;}
.footer-company-location .company-location-list .location-list-cell .list-subject {color:rgba(168,192,255,.2);}
.footer-company-location .company-location-list .location-list-cell .list-info {padding-left:8px; color:rgba(255,255,255,.2);}

.footer-company-location + .footer-copyright {margin-top:23px}
.footer-copyright .copyright {font-size:14px; font-weight:400; color:rgba(255,255,255,.2); line-height:23px;}

.footer-logo {display:flex; padding-top:22px;}
.footer-logo .logo {margin-left:auto;}

.footer-sns-menu {margin-top:auto;}
.footer-sns-menu .sns-menu-list {display:flex; align-items:center;}
.footer-sns-menu .sns-menu-list .menu-list-cell {margin-left:23px;}
.footer-sns-menu .sns-menu-list .menu-list-cell:first-child {margin-left:0}
.footer-sns-menu .sns-menu-list .menu-list-cell > a {position:relative; display:block; width:24px; height:24px;}
.footer-sns-menu .sns-menu-list .menu-list-cell .sns-naver {background:url(../images/icon/icon-sns-naver.png)no-repeat center center; background-size:24px auto;}
.footer-sns-menu .sns-menu-list .menu-list-cell .sns-youtube {background:url(../images/icon/icon-sns-youtube.png)no-repeat center center; background-size:24px auto;}
.footer-sns-menu .sns-menu-list .menu-list-cell .sns-linkedin {background:url(../images/icon/icon-sns-linkedin.png)no-repeat center center; background-size:24px auto;}
.footer-sns-menu .sns-menu-list .menu-list-cell .sns-facebook {background:url(../images/icon/icon-sns-facebook.png)no-repeat center center; background-size:24px auto;}
.footer-sns-menu .sns-menu-list .menu-list-cell .sns-instagram {background:url(../images/icon/icon-sns-instagram.png)no-repeat center center; background-size:24px auto;}
.footer-sns-menu .sns-menu-list .menu-list-cell .sns-kakao {background:url(../images/icon/icon-sns-kakao.png)no-repeat center center; background-size:24px auto;}

/* lnb */
#lnb {position:absolute; left:0; top:0; width:280px; height:100%; border-right:1px solid #ededed; background-color:#f6f6f6; transition:all ease 0.3s; z-index:9990;}
.lnb-scroller-outer {position:absolute; top:0; right:0; bottom:0; left:0; display:flex; width:auto; height:auto; margin:117px 0px 0px 0px; overflow-x:hidden; overflow-y:auto;}
.lnb-scroller-inner {flex:1; display:flex; flex-direction:column;}
.lnb-scroller-inner .lnb-text {padding:48px 48px 0; font-weight:400; font-size:24px;}
.lnb-scroller-inner .lnb-text .name {font-weight:600;}
.lnb-scroller-inner .lnb-text + .lnb-list-content {margin-top:24px;}
.lnb-scroller-inner .lnb-list-content {padding:0 24px 48px;}
.lnb-scroller-inner .lnb-list-content > ul {}
.lnb-scroller-inner .lnb-list-content > ul > li {padding:18px 24px;}
.lnb-scroller-inner .lnb-list-content > ul > li + li {margin-top:4px;}
.lnb-scroller-inner .lnb-list-content > ul > li > a {display:flex; align-items:center; line-height:28px; color:#808080; font-weight:500; font-size:18px;}
.lnb-scroller-inner .lnb-list-content > ul > li > a .icon {width:24px; height:24px; margin-left:auto; opacity:0;}

.lnb-scroller-inner .lnb-list-content > ul > li.actived, .lnb-scroller-inner .lnb-list-content > ul > li:hover {background-color:#3361cd; border-radius:12px; box-shadow:0px 8px 16px 8px rgb(0, 57, 192, 0.24);}
.lnb-scroller-inner .lnb-list-content > ul > li.actived > a, .lnb-scroller-inner .lnb-list-content > ul > li:hover > a  {color:#fff;}
.lnb-scroller-inner .lnb-list-content > ul > li.actived > a .icon, .lnb-scroller-inner .lnb-list-content > ul > li:hover > a .icon {opacity:1;}

/* 레이아웃 >  그리드 레이아웃 */
.grid-layout {}
.grid-layout-inner {display:flex; margin:-16px -24px; flex-wrap:wrap;}
.grid-layout-cell {box-sizing:border-box; padding:16px 24px;}

/* 레이아웃 > 컨텐츠 그룹핑 레이아웃 */
.basic-data-group {margin-top:40px;}
.basic-data-group:first-child,
.basic-data-group.first {margin-top:0 !important;}
.basic-data-group.group-100 {margin-top:4px;}
.basic-data-group.group-200 {margin-top:8px;}
.basic-data-group.group-300 {margin-top:12px;}
.basic-data-group.group-400 {margin-top:16px;}
.basic-data-group.group-500 {margin-top:20px;}
.basic-data-group.group-600 {margin-top:24px;}
.basic-data-group.group-700 {margin-top:28px;}
.basic-data-group.group-750 {margin-top:30px;}
.basic-data-group.group-800 {margin-top:32px;}
.basic-data-group.group-830 {margin-top:40px;}
.basic-data-group.group-850 {margin-top:48px;}
.basic-data-group.group-900 {margin-top:56px;}
.basic-data-group.group-1000 {margin-top:60px;}
.basic-data-group.group-1100 {margin-top:64px;}
.basic-data-group.group-1200 {margin-top:80px;}
.basic-data-group.group-1300 {margin-top:96px;}

.group-line {width:100%; padding-top:40px; border-top:2px solid #252525;}



/* ===========================
	02. table
=========================== */
/* 정보 제공 테이블 */
.info-table-wrap {width:100%;}
.info-table-header {}
.info-table-header .table-header {}

.info-table-body {width:100%;}
.info-table-body .table-outer {}
.info-table-body .table-inner {}
.info-table-body .table-data table {width:100%;}
.info-table-body .table-data table > thead > tr > th {padding:12px 10px; font-size:16px; color:#252525; font-weight:500; text-align:center; background-color:#fff;}
.info-table-body .table-data table > tbody > tr > th {padding:12px 10px; font-size:16px; color:#252525; font-weight:500;  background-color:#fff;}
.info-table-body .table-data table > tbody > tr > td {padding:13px 10px; font-weight:400; font-size:14px; color:#4d4d4d; text-align:center; background-color:transparent; vertical-align:middle;}
.info-table-body td > pre {white-space:pre-line; font-family:inherit;}

/* horizontal */
.info-table-body.horizontal .table-data table > tbody > tr > th {text-align:center; border-right:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9; vertical-align:middle;}
.info-table-body.horizontal .table-data table > tbody > tr > td {text-align:left; border-right:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9;}
.info-table-body.horizontal .table-data table > tbody > tr:first-child > th {border-top:2px solid #252525; border-right:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9;}
.info-table-body.horizontal .table-data table > tbody > tr:first-child > td {border-top:2px solid #252525; border-right:0; border-bottom:1px solid #c9c9c9;}
.info-table-body.horizontal .table-data table > tbody > tr > th:last-child, .info-table-body .table-data table > tbody > tr > td:last-child {border-right:none;}

/* vertical */
.info-table-body.vertical .table-data table > thead > tr > th {border-top:2px solid #252525; border-right:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9;}
.info-table-body.vertical .table-data table > thead > tr > th:last-child {border-right:none;}
.info-table-body.vertical .table-data table > tbody > tr > td {padding:13px 30px; border-left:1px solid #c9c9c9; border-right:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9;}
.info-table-body.vertical .table-data table > tbody > tr > td:first-child {border-left:none;}
.info-table-body.vertical .table-data table > tbody > tr > td:last-child {border-right:none;}

/* 보더 커스텀 형테 테이블 */
.border-table-wrap {}
.border-table-header {}
.border-table-header .table-title {font-size:24px; font-weight:700;}
.border-table-header + .border-table-body {margin-top:24px;}
.border-table-body table {width:100%; border:1px solid #c9c9c9; border-radius:12px; border-collapse:separate; table-layout:fixed; overflow:hidden;}

/* horizontal */
.border-table-body table > tbody > tr {}
.border-table-body table > tbody > tr > th {padding:13px 40px; font-weight:500; line-height:21px; text-align:left; border-top:1px solid #ededed; background-color:#f6f6f6;}
.border-table-body table > tbody > tr > td {padding:13px 30px; color:#4d4d4d; font-size:14px; font-weight:400; line-height:21px; border-top:1px solid #ededed; border-left:1px solid #ededed; background-color:#fff;}
.border-table-body table > tbody > tr:first-child > th {border-top:none;}
.border-table-body table > tbody > tr:first-child > td {border-top:none;}

/* vertical */
.border-table-body table > thead > tr {}
.border-table-body table > thead > tr > th {padding:12px 40px; font-weight:500; line-height:24px; border-left:1px solid #ededed; background-color:#fff; background-color:#f6f6f6;}
.border-table-body.vertical table > tbody > tr > td {padding:12px 32px 12px 30px; color:#4d4d4d; font-size:14px; font-weight:400; line-height:21px; text-align:center; border-top:1px solid #ededed; border-left:1px solid #ededed; background-color:#fff;}
.border-table-body.vertical table > thead > tr > th:first-child {border-left:none;}
.border-table-body.vertical table > tbody > tr > td:first-child {border-left:none}
.border-table-body.vertical table > tbody > tr:first-child > td {border-top:1px solid #ededed;}

/* 보드 형태 테이블 */
.board-list-wrap {}

.board-list-header {width:100%;}
.board-list-header .data-item-wrap {display:flex; align-items:center;}
.board-list-header .data-item-wrap .data-item-left {}
.board-list-header .data-item-wrap .data-item-right { margin-left:auto;}
.board-list-header .data-item-wrap .data-item-group {display:flex; margin:-4px;}
.board-list-header .data-item-wrap .data-item-group .data-item {padding:4px;}
.board-list-header .data-item-wrap .data-item {}
.board-list-header .total-data {line-height:24px; color:#808080;}
.board-list-header .total-data .data {display:inline-flex; margin-left:4px; color:#3361cd;}

.board-list-header + .board-list-body {margin-top:16px;}
.board-body-outer {}
.board-body-inner {}
.board-body-data {width:100%;}
.board-body-data table {width:100%; border-collapse:separate; table-layout:fixed;}
.board-body-data table > thead {}
.board-body-data table > thead > tr {}
.board-body-data table > thead > tr > th {padding:19px 4px; line-height:24px; color:#252525; border-top:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9;}
.board-body-data table > thead > tr > th:first-child {padding-left:48px; border-left:1px solid #c9c9c9; border-top-left-radius:12px; border-bottom-left-radius:12px;}
.board-body-data table > thead > tr > th:last-child {padding-right:48px;border-right:1px solid #c9c9c9; border-top-right-radius:12px; border-bottom-right-radius:12px;}
.board-body-data table > tbody {}
.board-body-data table > tbody > tr {}
.board-body-data table > tbody > tr.table-disabled > td > .td-col{background-color:#f6f6f6;}
.board-body-data table > tbody > tr.cursor-pointer-area > td > .td-col {cursor:pointer;}
.board-body-data table > tbody > tr.cursor-pointer-area:hover > td > .td-col {background-color:#f6f6f6;}
.board-body-data table > tbody > tr > td {}
.board-body-data table > tbody > tr > td > .td-col {display:flex; justify-content:center; align-items:center; height:64px; margin-top:8px; padding:14px 4px; line-height:24px; color:#808080; font-weight:400; text-align:center; border-top:1px solid #ededed; border-bottom:1px solid #ededed; vertical-align:middle; box-sizing:border-box;}
.board-body-data table > tbody > tr > td > .td-col .text-align-left {width:100%;}
.board-body-data table > tbody > tr > td > .td-col strong.font-color-gray{display:inline-block; color:#808080; font-weight:500;}
.board-body-data table > tbody > tr > td:first-child > .td-col {padding-left:48px; border-left:1px solid #ededed; border-top-left-radius:12px; border-bottom-left-radius:12px;}
.board-body-data table > tbody > tr > td:last-child > .td-col {padding-right:48px; border-right:1px solid #ededed; border-top-right-radius:12px; border-bottom-right-radius:12px;}
.board-body-data table > tbody > tr > td > .td-col > a {display:block}
.board-body-data table > tbody > tr > td > .td-col .td-inner {flex:0 0 auto;}

.board-body-data table > tbody > tr > td.text-align-left .td-col {justify-content:flex-start; color:#252525;}
.board-body-data table > tbody > tr > td.text-align-right .td-col {justify-content:flex-end;}
.board-body-data table > tbody > tr > td.text-align-right.two-col .td-col {flex-direction:column; align-items:flex-end; justify-content:center; text-align:right;}
.board-body-data table > tbody > tr > td.text-align-right.two-col .td-col > span {display:inline-block; text-align:right;}

.board-body-data table > thead > tr.tr-2 > th:first-child {padding:19px 4px;}
.board-body-data table > thead > tr.tr-2 > th:last-child {padding:19px 4px;}
.board-body-data table > tbody > tr.tr-2 > td > .td-col {height:92px; padding:16px 0;}
.board-body-data table > tbody > tr > td > .td-col .row + .row {margin-top:8px;}
.board-body-data table > tbody > tr > td > .td-col .row.font-color-black {font-size:18px; line-height:27px;}
.board-body-data table > tbody > tr.tr-2 > td .sub-info > span {display:inline-block; font-size:16px; line-height:24px;}
.board-body-data table > tbody > tr.tr-2 > td .sub-info .icon {margin:2px 4px;}

.board-list-body + .board-list-footer {margin-top:40px;}

/* 색상 */
.border-table-body.table-black table {border-color:#565656}
.border-table-body.table-black table tbody > tr > th {color:#c9c9c9; border-top-color:#404040; background-color:#3d3d3d;}
.border-table-body.table-black table tbody > tr > td {font-size:16px; color:#fff; font-weight:500; border-color:#404040; border-left-color:#565656; background-color:#333;}

.border-table-body.table-black .page-result-info-wrap {padding:60px 0; border-top:1px solid #565656;}
.border-table-body.table-black .page-result-info-wrap .page-info-description {color:#c9c9c9;}


/* ===========================
	03. button
=========================== */
/* 기본 버튼 */
button {background-color:transparent;}
.btn-basic {display:inline-flex; align-items:center; justify-content:center; height:64px; width:135px; padding:0 24px; font-size:16px; font-weight:500; color:#252525; border:1px solid #222; border-radius:12px; background-color:transparent; box-sizing:border-box; white-space:nowrap;}
.btn-basic.item-hidden {display:none;}

/* 버튼 색상 */
.btn-100 {color:#fff; border-color:var(--color-100); background-color:var(--color-100);}
.btn-200 {color:#666666; border-color:#c9c9c9; background-color:#fff;}
.btn-300 {color:#666666; border-color:#f6f6f6; background-color:#f6f6f6;}
.btn-400 {color:#fff; border-color:#1a1919; background-color:#1a1919;}
.btn-500 {color:#808080; border-color:#c9c9c9; background-color:#fff;}
.btn-600 {color:#808080; border-color:#f6f6f6; background-color:#f6f6f6;}
.btn-700 {color:#252525; border-color:#a5a5a5; background-color:#f6f6f6;}
.btn-800 {color:#666666; border-color:#fff; background-color:#fff;}

/* 버튼 싱테 > hover */
.btn-100:hover {border-color:#0039c0; background-color:#0039c0;}
.btn-200:hover {color:#0039c0; border-color:#0039c0; background-color:#fff;}
.btn-300:hover {color:#3361cd; border-color:#e6ecf9; background-color:#e6ecf9;}
.btn-400:hover {color:#fff; border-color:#4d4d4d; background-color:#4d4d4d;}
.btn-500:hover {color:#3361cd; border-color:#3361cd; background-color:#fff;}
.btn-600:hover {color:#fff; border-color:#0039c0; background-color:#0039c0;}
.btn-700:hover {color:#fff; border-color:#4d4d4d; background-color:#4d4d4d;}
/* .btn-800:hover {color:#3361cd; border-color:#fff; background-color:#fff;} */

/* 버튼 상테 > disabled */
.btn-basic:disabled, .btn-basic.disabled {pointer-events:none;}
.btn-100:disabled, .btn-100.disabled {color:#a5a5a5; border-color:#ededed; background-color:#ededed;}
.btn-200:disabled, .btn-200.disabled {color:#a5a5a5; border-color:#c9c9c9; background-color:#fff;}
.btn-500:disabled, .btn-500.disabled {color:#808080; border-color:#e4e4e4; background-color:#fff;}

/* 버튼 사이즈 */
.btn-size-xs {width:auto; height:32px; padding:0 12px; font-size:14px; font-weight:400;}
.btn-size-sm {width:auto; height:36px; padding:0 12px; font-size:14px; font-weight:400;}
.btn-size-xmd {width:auto; height:40px; padding:0 16px;}
.btn-size-md {width:auto; height:48px; padding:0 24px;}
.btn-size-lg {width:167px; padding:0 24px}
.btn-size-auto {width:auto; padding:0 24px}
.btn-size-100 {width:100%;}

/* 버튼 둥근형 */
.btn-circle-100 {border-radius:16px;}
.btn-circle-200 {border-radius:20px;}
.btn-circle-300 {border-radius:24px;}
.btn-circle-400 {border-radius:8px;}

/* 버튼 커스텀 */
.btn-basic .number-state {display:inline-flex; padding-left:4px; color:#a5a5a5;}
.btn-size-md.btn-custom {padding:0 22px 0 16px;}
.btn-custom .icon {position:relative; margin-right:8px;}
.btn-basic-icon .icon {position:relative; flex:0 0 auto;}
.btn-basic-icon .icon:first-child {margin-right:8px;}
.btn-basic-icon .icon:last-child {margin-left:8px;}

.btn-custom .icon:after {content:''; position:absolute; top:0; left:0; opacity:0;}
.btn-custom .icon:before {content:''; position:absolute; top:0; left:0; opacity:1;}
.btn-custom:hover .icon:after {opacity:1;}
.btn-custom:hover .icon:before {opacity:0;}

.icon-download {display:block; width:24px; height:24px;}
.icon-download:after {width:24px; height:24px; background-image:url(../images/icon/icon-download-white.png);}
.icon-download:before {width:24px; height:24px; background-image:url(../images/icon/icon-download-gray.png);}

.btn-brocure-download .icon {position:relative; width:18px; height:18px; margin-right:4px;}
.btn-brocure-download .icon:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/icon/icon-file-download-gray.png) no-repeat center center; background-size:auto 100%; opacity:1;}
.btn-brocure-download .icon:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/icon/icon-file-download-blue.png) no-repeat center center; background-size:auto 100%; opacity:0;}
.btn-brocure-download:hover .icon:before {opacity:0;}
.btn-brocure-download:hover .icon:after {opacity:1;}

.btn-online-manual .icon {position:relative; width:12px; height:12px; margin-left:4px;}
.btn-online-manual .icon:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/icon/icon-arrow-outward-gray.png) no-repeat center center; background-size:auto 100%; opacity:1;}
.btn-online-manual .icon:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/icon/icon-arrow-outward-blue.png) no-repeat center center; background-size:auto 100%; opacity:0;}
.btn-online-manual:hover .icon:before {opacity:0;}
.btn-online-manual:hover .icon:after {opacity:1;}

/* 더보기 버튼 */
.btn-arrow-more-blue {display:inline-flex; align-items:center; font-weight:600; color:#3361cd;}
.btn-arrow-more-blue:after {content:''; display:block; width:24px; height:24px; background:url(../images/icon/icon-arrow-more-blue.png) center center no-repeat;}

/* 버튼 그룹핑 > position 속성 */
.btn-page-wrap {position:relative; justify-content:space-between; display:flex;}
.btn-pos-left {display:inline-flex; margin:0 -4px;}
.btn-pos-middle {display:inline-flex; margin:auto;}
.btn-pos-right {display:inline-flex; margin:0 -4px; margin-left:auto;}
.btn-page-wrap > div:nth-child(1).btn-pos-left ~ .btn-pos-right {margin-left:0;}
.btn-page-wrap > div:nth-child(1).btn-pos-middle + .btn-pos-right {position:absolute; right:0; margin-left:0;}
.btn-page-wrap .btn-col {flex:0 0 auto; padding:0 4px;}
.btn-page-wrap .btn-col.item-hidden {display:none;}

/* 버튼 그리드 */
.grid-btn-layout {display:flex; flex-wrap:wrap; margin:-5px; justify-content:center;}
.grid-btn-layout .grid-btn-col {width:100%; padding:5px; box-sizing:border-box;}
.grid-btn-layout .grid-btn-col > .btn-basic {width:100%;}
.grid-btn-layout.large {margin:-10px;}
.grid-btn-layout.large .grid-frame-cell {padding:10px;}

/* 페이징 */
.paging-wrap {position:relative; display:flex; justify-content:center;}
.paging-content {position:relative; display:flex; align-items:center; justify-content:center; height:32px; text-align:center;}
.paging-content > a {position:relative; display:block; min-width:18px; height:18px; font-size:0px; background-color:#fff;}
.paging-content > a:after, .paging-content > a:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-position:center center; background-size:18px auto; background-repeat:no-repeat;}
.paging-content .btn-first:before {background-image:url(../images/icon/btn-paging-first.png);}
.paging-content .btn-first:after {background-image:url(../images/icon/btn-paging-first-actived.png);}
.paging-content .btn-prev:before {background-image:url(../images/icon/btn-paging-prev.png);}
.paging-content .btn-prev:after {background-image:url(../images/icon/btn-paging-prev-actived.png);}
.paging-content .btn-next:before {background-image:url(../images/icon/btn-paging-next.png);}
.paging-content .btn-next:after {background-image:url(../images/icon/btn-paging-next-actived.png);}
.paging-content .btn-last:before {background-image:url(../images/icon/btn-paging-last.png);}
.paging-content .btn-last:after {background-image:url(../images/icon/btn-paging-last-actived.png);}
.paging-content > a:before {opacity:1;}
.paging-content > a:after {opacity:0;}
.paging-content > a:hover:before {opacity:0;}
.paging-content > a:hover:after {opacity:1;}

.paging-content .paging-list {display:flex; align-items:center; margin:0 8px;}
.paging-content .paging-list > li {display:inline-flex; align-items:center; justify-content:center; min-width:32px; padding:0 2px;}
.paging-content .paging-list > li a {position:relative; display:block; padding:0 2px; height:32px; padding:0 10px; font-size:16px; font-weight:500; color:#4d4d4d; line-height:30px;  background-color:#fff; box-sizing:border-box;}
.paging-content .paging-list > li a:after {content:''; position:absolute; bottom:0; left:50%; width:50%; height:2px; background-color:#3361cd; transform:translateX(-50%); opacity:0;}
.paging-content .paging-list > li a:hover {color:#3361cd;}
.paging-content .paging-list > li a:hover:after {opacity:1;}
.paging-content .paging-list > li a.actived {color:#3361cd;}
.paging-content .paging-list > li a.actived:after {opacity:1;}

/* 탭버튼  > 페이지 탭 버튼 */
.page-tab-wrap {}
.page-tab-wrap .page-tab-outer {}
.page-tab-wrap .page-tab-inner {}
.page-tab-wrap .page-tab-inner.center .page-tab {justify-content:center;}
.page-tab-wrap .page-tab-inner.border-none .page-tab {border-bottom:none;}
.page-tab-wrap .page-tab {display:flex; width:100%; height:58px; border-bottom:1px solid #c9c9c9; box-sizing:border-box;}
.page-tab-wrap .page-tab.no-border {border:none;}
.page-tab-wrap .page-tab .contents-cell {height:100%; padding:0 12px;}
.page-tab-wrap .page-tab .contents-cell:first-child {padding-left:0;}
.page-tab-wrap .page-tab .contents-cell .btn-tab-item {position:relative; display:block; height:100%; padding:0 24px; font-size:18px; color:#a5a5a5; font-weight:500; line-height:57px;}
.page-tab-wrap .page-tab .contents-cell .btn-tab-item:before {content:''; position:absolute; bottom:0; left:50%; width:100%; height:4px; margin-bottom:-1px; border-radius:2px; background-color:#0039c0; transform:translateX(-50%); opacity:0;}
.page-tab-wrap .page-tab .contents-cell.actived .btn-tab-item {color:#0039c0; font-weight:600;}
.page-tab-wrap .page-tab .contents-cell.actived .btn-tab-item:before {opacity:1;}

/* 탭버튼  > 컨텐츠 탭 버튼 */
.contents-tab-wrap {}
.contents-tab-button {}
.contents-tab-button .contents-tab-outer {}
.contents-tab-button .contents-tab-inner {}
.contents-tab-button .contents-tab {margin:-4px; display:flex; align-items:center; justify-content:center;}
.contents-tab-button .contents-tab .content-cell {padding:4px;}
.contents-tab-button .contents-tab .content-cell .btn-tab-item {display:block; height:64px; min-width:142px; padding:0 20px; color:#0039c0; font-size:16px; font-weight:600; line-height:62px; text-align:center; border:2px solid #0039c0; border-radius:32px; background-color:#fff; box-sizing:border-box;} 
.contents-tab-button .contents-tab .content-cell.actived .btn-tab-item {color:#fff; border-color:#0039c0; background-color:#0039c0;}

.panel-tab-wrap .tab-data-group .tab-data {display:none;}
.panel-tab-wrap .tab-data-group .tab-data.actived {display:block;}

/* 탭버튼  > 필터 탭 버튼 */
.filter-tab-wrap {}
.filter-tab-button {padding:32px 48px; border-radius:12px; background-color:#eef3ff;}
.filter-tab-button .filter-tab-outer {}
.filter-tab-button .filter-tab-inner {}
.filter-tab-button .filter-tab {display:flex; flex-wrap:wrap; margin:-4px;}
.filter-tab-button .filter-tab .tab-cell {padding:4px;}
.filter-tab-button .filter-tab .tab-cell .btn-tab-item {font-weight:500;}
.filter-tab-button .filter-tab .tab-cell.actived .btn-tab-item {color:#3361cd; font-weight:600;}
.filter-tab-button .filter-tab .tab-cell.actived .btn-tab-item .number-state {color:#3361cd; font-weight:600;}


/* ===========================
	04. pop
=========================== */
.layer-pop-wrap {position:fixed; top:0; left:100%; display:block; width:100%; height:100%; background-color:rgba(0,0,0,0); z-index:99999; visibility:hidden; overflow:hidden; transition:left 0s var(--layer-pop-duration) ease, visibility 0s var(--layer-pop-duration) ease, background var(--layer-pop-duration) 0s ease;}
.layer-pop-wrap.actived {left:0; visibility:visible; background-color:rgba(0,0,0,0.5); transition:left 0s 0s ease, visibility 0s 0s ease, background var(--layer-pop-duration) 0s ease;}
.layer-pop-wrap.scroll {overflow-y:auto; overflow-x:hidden;}
.layer-pop-wrap .pop-data {display:inline-block;}

.layer-pop-parent {display:table; width:100%; height:100%; table-layout:fixed;}
.layer-pop-children {display:table-cell; width:100%; height:100%; padding:30px 30px; text-align:center; vertical-align:middle;}

/* 레이어팝업 > 메세지팝업 */
.layer-pop-wrap.actived .alert-pop-wrap {opacity:1;}
.alert-pop-wrap {position:relative; min-width:532px; margin:0 auto; border-radius:0px; overflow:hidden; background-color:#fff; border-radius:12px; background:#fff; opacity:0; transition:opacity var(--layer-pop-duration) ease;}
.alert-pop-wrap.alert-pop-gray {background-color:#f8f8f8;}
.alert-pop-wrap .btn-pop-close {position:absolute; top:0; right:0; margin:16px 24px 0 0;}
.alert-pop-wrap .alert-pop-inner {padding:50px 0 0;}
.alert-pop-wrap .alert-pop-msg {display:flex; align-items:center; justify-content:center; width:100%; padding:52px 0 40px; font-size:20px; font-weight:500; text-align:center; line-height:30px; box-sizing:border-box;}
.alert-pop-wrap .alert-pop-btns {padding:24px 40px 32px; background-color:#fff;}

/* 레이어팝업 > 컨텐츠팝업 */
.pop-view-wrap {position:relative; width:963px; border-radius:16px; background-color:#fff; overflow:hidden;}
.pop-view-wrap .pop-view-header {padding:16px 48px; text-align:left;}
.pop-view-wrap .pop-view-header .pop-view-title {font-size:22px; font-weight:500; color:#1a1919; line-height:36px;}
.pop-view-wrap .pop-view-body {padding:32px 48px 40px; text-align:left;}
.pop-view-wrap .pop-view-body .pop-view-detail {position:relative;}
.pop-view-wrap .pop-view-body.pop-body-scroll {max-height:450px; overflow-x:hidden; overflow-y:auto}
.pop-view-body.pop-body-gray {background-color:#f8f8f8;}
.pop-view-wrap .pop-view-footer {padding:29px 48px;}

.pop-view-wrap .btn-pop-close {position:absolute; top:0; right:0; width:36px; height:36px; margin:16px 26px 0 0px;}
/* md사이즈 */
.pop-view-wrap.pop-view-md {width:592px;}
.pop-view-wrap.pop-view-md .pop-view-header {padding:16px 24px;}
.pop-view-wrap.pop-view-md .pop-view-body {padding:24px;}
.pop-view-wrap.pop-view-md .btn-pop-close {margin:16px 24px 0 0;}

/* 메인 팝업 */
.main-pop-wrap {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:9999;}
.main-pop-wrap.close {display:none;}
.main-pop-wrap .pop-data-wrap {position:relative; display:table; table-layout:fixed; width:100%; height:100%; box-sizing:border-box;}
.main-pop-wrap .pop-data-item {display:table-cell; vertical-align:middle;}
.main-pop-wrap .pop-data {position:relative; width:518px; margin:auto; padding-top:48px;}
.main-pop-wrap .pop-data-inner {border-radius:32px; overflow:hidden;}
.main-pop-wrap .pop-body {position:relative; background:rgba(255,255,255,1);}
.main-pop-wrap .pop-body .main-pop-visual {position:relative;}
.main-pop-wrap .pop-body .main-pop-visual .swiper-wrap {overflow:visible;}
.main-pop-wrap .pop-body .main-pop-visual .swiper-wrapper {height:518px;}
.main-pop-wrap .pop-body .main-pop-visual .swiper-wrapper .swiper-slide {overflow-x:hidden; overflow-y:auto;}
.main-pop-wrap .pop-body .main-pop-visual .swiper-wrapper .swiper-slide img {width:100%; max-width:none;}
.main-pop-wrap .pop-body .swiper-pagination {position:absolute; width:auto; bottom:-45px; right:0; padding-right:40px;}
.main-pop-wrap .pop-body .swiper-pagination .swiper-pagination-bullet {width:10px; background-color:#c9c9c9;}
.main-pop-wrap .pop-body .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width:10px; background-color:#3361cd;}

.main-pop-wrap .pop-footer {width:100%; height:85px; padding:0 48px; font-size:18px; font-weight:500; color:#333; border-radius:0 0 32px 32px; background-color:#fff; box-sizing:border-box; z-index:999;}
.main-pop-wrap .pop-footer .close-today-content {display:flex; align-items:center; height:100%;}
.main-pop-wrap .pop-footer .form-check-box.check .form-check-icon em {font-size:18px; font-weight:500; color:#333;}
.main-pop-wrap .pop-footer .close-today-content .close-today-btn {position:absolute; top:0; right:0; z-index:999;}
.main-pop-wrap .pop-footer .close-today-content .close-today-btn .btn-pop-close {font-size:0; width:40px; height:40px; background:url(../images/icon/btn-delete-white.png) no-repeat center center; background-size:auto 100%;}

/* 툴팁 팝업 */
.tooltip-pop-wrap {position:fixed; bottom:0; right:0; display:none; z-index:9999;}
.tooltip-pop-wrap.actived {display:block;}
.tooltip-pop-outer {max-height:100vh; width:600px; overflow-x:hidden; overflow-y:auto;}
.tooltip-pop-inner {padding:40px 40px 40px 0; width:100%; height:100%; box-sizing:border-box;}
.tooltip-data-list {display:flex; flex-direction:column-reverse; margin:-4px;}
.tooltip-data-item {position:relative; padding:4px;}
.tooltip-data-outer {padding:56px; border-radius:12px; background-color:#f6f6f6;}
.tooltip-data-item .btn-pop-close {position:absolute; top:0; right:0; margin:24px 24px 0 0;}
.tooltip-data-item .tooltip-data-body .content-text {display:inline-block; padding-right:24px; font-weight:400; font-size:18px; line-height:26px;}
.tooltip-data-item .tooltip-data-body .content-text .color-blue {display:inline-block; color:#3361cd;}
.tooltip-data-item .tooltip-data-body .content-text + .content-btn {margin-top:24px;}

/* 챗봇 팝업 */
.chatBot-layer-wrap {position:fixed; top:0; left:100%; display:block; width:100%; height:100%; background-color:rgba(0,0,0,0); z-index:99999; visibility:hidden; overflow:hidden; transition:left 0s var(--layer-pop-duration) ease, visibility 0s var(--layer-pop-duration) ease, background var(--layer-pop-duration) 0s ease;}
.chatBot-layer-wrap.actived {left:0; visibility:visible; background-color:rgba(0,0,0,0.5); transition:left 0s 0s ease, visibility 0s 0s ease, background var(--layer-pop-duration) 0s ease;}
.chatBot-data-wrap {display:table; width:100%; height:100%; table-layout:fixed;}
.chatBot-data-cont {display:table-cell; width:100%; height:100%; padding:80px 80px 110px 80px; vertical-align:bottom;}

.chat-data-item {display:flex; flex-direction:column; width:400px; margin:auto 0 0 auto;}
.chat-header {border-radius:8px 8px 0 0; overflow:hidden;}
.chat-header-inner {position:relative; display:flex; width:100%; height:80px; padding:24px 20px; background-color:#0039c0; box-sizing:border-box;}
.chat-header-inner:after {content:''; position:absolute; left:124px; top:8px; width:110px; height:72px; margin-left:20px; background:url(../images/icon/icon-chatbot-header-visual.png) no-repeat center center; background-size:110px 72px;}
.chat-header-inner .chat-header-data.right {margin-left:auto;}
.chat-header-inner .chat-header-data .btn-chat-header {width:32px; height:32px; font-size:0; background-repeat:no-repeat; background-size:32px; background-position:center center;}
.chat-header-inner .chat-header-data .btn-chat-header.arrow {background-image:url(../images/icon/icon-chatbot-header-arrow.png);}
.chat-header-inner .chat-header-data .btn-chat-header.home {background-image:url(../images/icon/icon-chatbot-header-home.png);}

.chat-body-inner {height:558px; background:#fff; padding-bottom:8px; overflow-x:hidden; overflow-y:auto; box-sizing:border-box;}
.chat-message-group .chat-message + .chat-message {margin-top:16px;}
.chat-message .message-cont {display:flex;}
.chat-message-group .chat-message-date {display:flex; align-items:center; justify-content:center; height:56px; font-size:12px; color:#a5b3c2;}
.chat-message-group .message-profile {padding-left:16px;}
.chat-message-group .message-profile .profile-data {width:36px; height:36px; border-radius:50%; background-color:#0039c0; overflow:hidden;}
.chat-message-group .chat-message .message-item .message-data {max-width:255px;}
.chat-message-group .chat-message-left .message-item {margin-left:4px;}
.chat-message-group .chat-message-left .message-item .message-data {padding:24px; color:#000; font-size:16px; line-height:24px; font-weight:500; border-radius:0 16px 16px 16px; background-color:#f8f8f8; box-sizing:border-box;}
.chat-message-group .chat-message-right .message-cont {flex-direction:row-reverse;}
.chat-message-group .chat-message-right .message-item {margin-right:20px;}
.chat-message-group .chat-message-right .message-data {max-width:255px; padding:8px 12px; color:#fff; font-size:16px; line-height:24px; font-weight:500; border-radius:16px 16px 4px 16px; background-color:#0039c0; box-sizing:border-box;} 
.chat-message-group .chat-message-right.chat-message .chat-time {text-align:right;}
.chat-message-group .chat-message .chat-time {margin-top:4px; color:#666666; font-size:12px; line-height:18px;}

.chat-footer {border-radius:0 0 8px 8px; overflow:hidden; box-shadow:0px -4px 24px rgba(0, 0, 0, 0.04);}
.chat-footer-inner {height:62px; background-color:#fff;}
.chat-footer-inner .chatting-data-wrap {position:relative; display:flex;}
.chat-footer-inner .chatting-data-wrap .chatting-textarea {width:100%;}
.chat-footer-inner .chatting-data-wrap .chatting-textarea textarea {min-width:100%; width:100%; height:62px; padding:16px 60px 16px 24px; font-size:16px; line-height:24px; color:#999999; border:0; border-radius:0; box-sizing:border-box;}
.chat-footer-inner .chatting-data-wrap .chatting-send-btn {position:absolute; right:0; bottom:0; margin:0 16px 11px 0;}
.chat-footer-inner .chatting-data-wrap .chatting-send-btn .btn-chat-send {position:relative; width:40px; height:40px; font-size:0; background-color:#e6ecf9; border-radius:12px;}
.chat-footer-inner .chatting-data-wrap .chatting-send-btn .btn-chat-send:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/icon/icon-chatbot-send.png) no-repeat center center; background-size:auto 100%;}

/* 굿즈 팝업 */
.goods-layer-wrap {position:fixed; top:0; left:100%; display:block; width:100%; height:100%; background-color:rgba(0,0,0,0); z-index:99999; visibility:hidden; overflow:hidden; transition:left 0s var(--layer-pop-duration) ease, visibility 0s var(--layer-pop-duration) ease, background var(--layer-pop-duration) 0s ease;}
.goods-layer-wrap.actived {left:0; visibility:visible; background-color:rgba(0,0,0,0.5); transition:left 0s 0s ease, visibility 0s 0s ease, background var(--layer-pop-duration) 0s ease;}
.goods-data-wrap {display:table; width:100%; height:100%; table-layout:fixed;}
.goods-data-cont {display:table-cell; width:100%; height:100%; padding:80px 80px 110px 80px; vertical-align:bottom;}

.goods-data-item {display:flex; flex-direction:column; width:400px; margin:auto 0 0 auto;}
.goods-header {border-radius:8px 8px 0 0; overflow:hidden;}
.goods-header-inner {position:relative; display:flex; width:100%; height:80px; padding:24px 20px; background-color:#8434c2; box-sizing:border-box;}
.goods-header-inner:after {content:''; position:absolute; left:124px; top:8px; width:110px; height:72px; margin-left:20px; background:url(../images/icon/icon-chatbot-header-visual.png) no-repeat center center; background-size:110px 72px;}
.goods-header-inner .goods-header-data.right {margin-left:auto;}
.goods-header-inner .goods-header-data .btn-goods-header {width:32px; height:32px; font-size:0; background-repeat:no-repeat; background-size:32px; background-position:center center;}
.goods-header-inner .goods-header-data .btn-goods-header.arrow {background-image:url(../images/icon/icon-chatbot-header-arrow.png);}

.goods-body {height:622px; background:#ededed; border-radius:0 0 8px 8px;overflow-x:hidden; overflow-y:auto; box-sizing:border-box;}
.goods-body-inner {padding:40px 32px;}
.goods-body-inner .body-info {font-size:16px; color:#000; text-align:center;}

.body-info + .goods-content-wrap {margin-top:32px;}
.goods-content-wrap {position:relative;}
.goods-content-wrap .content-item {position:relative;}
.goods-content-wrap .content-item + .content-item {margin-top:24px;}
.goods-content-wrap .item-data {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:276px;}
.goods-content-wrap .text-cont {position:relative; z-index:1;}
.goods-content-wrap .text-cont .title {font-size:24px; font-weight:500; color:#fff; text-align:center;}
.goods-content-wrap .text-cont .sub-info {font-size:16px; font-weight:300; color:rgba(255,255,255,.6);}
.goods-content-wrap .text-cont .btn-download {margin-top:16px; text-align:center;}
.goods-content-wrap .text-cont .btn-download .btn-basic .icon {position:relative; margin-right:4px; background-image:none;}
.goods-content-wrap .text-cont .btn-download .btn-basic .icon:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/icon/icon-download-darkgray.png) no-repeat center center; background-size:24px; opacity:1;}
.goods-content-wrap .text-cont .btn-download .btn-basic .icon:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/icon/icon-download-blue.png) no-repeat center center; background-size:24px; opacity:0;}
.goods-content-wrap .text-cont .btn-download .btn-basic:hover .icon:before {opacity:0;}
.goods-content-wrap .text-cont .btn-download .btn-basic:hover .icon:after {opacity:1;}

.goods-content-wrap .item-data .thumb {position:absolute; top:0; left:0; width:100%; height:100%; border-radius:16px; overflow:hidden; z-index:0;}
.goods-content-wrap .item-data .thumb:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.65);}
.goods-content-wrap .item-data .thumb img {max-width:none;}



/* ===========================
	05. font
=========================== */
/* 텍스트 줄임 */
.text-clamp-1 {display:block; min-height:24px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

/* 점 커스텀 */
.item-input-info .info-cell {position:relative; padding-left:8px; font-size:14px; display:flex; align-items:flex-start; color:#808080;}
.item-input-info .info-cell:before {content:''; position:absolute; left:0; top:0; margin-top:9px; width:3px; height:3px; background-color:#a5a5a5; border-radius:50%;}

/* 스마트에디터 */
.editor-textarea * {font-family:'Pretendard' !important; font-size:16px !important; line-height:1.7em !important;}
.editor-textarea a {font-weight:700 !important; color:#3361cd !important;}
.editor-textarea a * {font-weight:700 !important; color:#3361cd !important;}



/* ===========================
	06. icon
=========================== */
.icon {display:inline-flex; flex:0 0 auto; font-size:0; background-repeat:no-repeat; background-position:center center; background-size:100% 100%;}

/* icon 16 */
.icon-pencil-white {width:16px; height:16px; background-image:url(../images/icon/icon-pencil-white.png);}

/* icon 18 */
.icon-print-gray {width:18px; height:18px; background-image:url(../images/icon/icon-print-gray.png);}
.icon-file-download-gray {width:18px; height:18px; background-image:url(../images/icon/icon-file-download-gray.png);}
.icon-more-arrow-white {width:18px; height:18px; background-image:url(../images/icon/icon-more-arrow-white.png);}
.icon-arrow-left-gray {width:18px; height:18px; background-image:url(../images/icon/iocn-arrow-left-gray-18.png);}
.icon-arrow-outward-18 {width:18px; height:18px; background-image:url(../images/icon/icon-arrow-outward-18.png);}

/* icon 24 */
.icon-util-error-red {width:24px; height:24px; background-image:url(../images/icon/icon-util-error-red.png);}
.icon-visibility-off-gray {width:24px; height:24px; background-image:url(../images/icon/icon-visibility-off-gray.png);}
.icon-visibility-gray {width:24px; height:24px; background-image:url(../images/icon/icon-visibility-gray.png);}
.icon-id-blue {width:24px; height:24px; background-image:url(../images/icon/icon-id-blue.png);}
.icon-id-gray {width:24px; height:24px; background-image:url(../images/icon/icon-id-gray.png);}
.icon-password-blue {width:24px; height:24px; background-image:url(../images/icon/icon-password-blue.png);}
.icon-password-gray {width:24px; height:24px; background-image:url(../images/icon/icon-password-gray.png);}
.icon-download-white {width:24px; height:24px; background-image:url(../images/icon/icon-download-white.png);}
.icon-download-link-white {width:24px; height:24px; background-image:url(../images/icon/icon-download-link-white.png);}
.icon-download-gray {width:24px; height:24px; background-image:url(../images/icon/icon-download-gray.png);}
.icon-attach-file-gray {width:24px; height:24px; background-image:url(../images/icon/icon-attach-file-gray.png);}
.icon-attach-file-blue {width:24px; height:24px; background-image:url(../images/icon/icon-attach-file-blue.png);}
.icon-lock-gray {width:24px; height:24px; background-image:url(../images/icon/icon-lock-gray.png);}
.icon-lnb-self-estimate-white {width:24px; height:24px; background-image:url(../images/icon/icon-lnb-self-estimate-white.png);}
.icon-lnb-training-white {width:24px; height:24px; background-image:url(../images/icon/icon-lnb-training-white.png);}
.icon-lnb-account-white {width:24px; height:24px; background-image:url(../images/icon/icon-lnb-account-white.png);}
.icon-lnb-download-white {width:24px; height:24px; background-image:url(../images/icon/icon-lnb-download-white.png);}
.icon-lnb-counsel-white {width:24px; height:24px; background-image:url(../images/icon/icon-lnb-counsel-white.png);}
.icon-lnb-license-white {width:24px; height:24px; background-image:url(../images/icon/icon-lnb-license-white.png);}
.icon-result-link {width:24px; height:24px; background-image:url(../images/icon/icon-link-white.png);}
.icon-result-save {width:24px; height:24px; background-image:url(../images/icon/icon-bookmark-white.png);}
.icon-result-email {width:24px; height:24px; background-image:url(../images/icon/icon-email-white.png);}
.icon-result-link-gray {width:24px; height:24px; background-image:url(../images/icon/icon-link-gray.png);}
.icon-result-save-gray {width:24px; height:24px; background-image:url(../images/icon/icon-bookmark-gray.png);}
.icon-result-email-gray {width:24px; height:24px; background-image:url(../images/icon/icon-email-gray.png);}
.icon-location-gray {width:24px; height:24px; background-image:url(../images/icon/icon-location-gray.png);}
.icon-phone-gray {width:24px; height:24px; background-image:url(../images/icon/icon-phone-gray.png);}
.icon-fax-gray {width:24px; height:24px; background-image:url(../images/icon/icon-fax-gray.png);}
.icon-subway-gray {width:24px; height:24px; background-image:url(../images/icon/icon-subway-gray.png);}
.icon-apply-process-1 {width:72px; height:72px; background-image:url(../images/icon/icon-apply-process-1.png);}
.icon-apply-process-2 {width:72px; height:72px; background-image:url(../images/icon/icon-apply-process-2.png);}
.icon-apply-process-3 {width:72px; height:72px; background-image:url(../images/icon/icon-apply-process-3.png);}
.icon-apply-process-4 {width:72px; height:72px; background-image:url(../images/icon/icon-apply-process-4.png);}
.icon-apply-process-5 {width:72px; height:72px; background-image:url(../images/icon/icon-apply-process-5.png);}
.icon-apply-process-6 {width:72px; height:24px; background-image:url(../images/icon/icon-apply-process-6.png);}
.icon-apply-process-7 {width:72px; height:72px; background-image:url(../images/icon/icon-apply-process-7.png);}
.icon-apply-process-8 {width:72px; height:72px; background-image:url(../images/icon/icon-apply-process-8.png);}
.icon-apply-process-9 {width:72px; height:72px; background-image:url(../images/icon/icon-apply-process-9.png);}
.icon-arrow-more-white {width:24px; height:24px; background-image:url(../images/icon/icon-arrow-more-white.png);}
.icon-arrow-more-gray {width:24px; height:24px; background-image:url(../images/icon/icon-arrow-more-gray.png);}

.icon-national-australia {width:24px; height:24px; background-image:url(../images/icon/icon-national-australia.png);}
.icon-national-brazil {width:24px; height:24px; background-image:url(../images/icon/icon-national-brazil.png);}
.icon-national-canada {width:24px; height:24px; background-image:url(../images/icon/icon-national-canada.png);}
.icon-national-china {width:24px; height:24px; background-image:url(../images/icon/icon-national-china.png);}
.icon-national-france {width:24px; height:24px; background-image:url(../images/icon/icon-national-france.png);}
.icon-national-germany {width:24px; height:24px; background-image:url(../images/icon/icon-national-germany.png);}
.icon-national-india {width:24px; height:24px; background-image:url(../images/icon/icon-national-india.png);}
.icon-national-japan {width:24px; height:24px; background-image:url(../images/icon/icon-national-japan.png);}
.icon-national-kingdom {width:24px; height:24px; background-image:url(../images/icon/icon-national-kingdom.png);}
.icon-national-russia {width:24px; height:24px; background-image:url(../images/icon/icon-national-russia.png);}
.icon-national-singapore {width:24px; height:24px; background-image:url(../images/icon/icon-national-singapore.png);}
.icon-national-spain {width:24px; height:24px; background-image:url(../images/icon/icon-national-spain.png);}
.icon-national-taiwan {width:24px; height:24px; background-image:url(../images/icon/icon-national-taiwan.png);}
.icon-national-thailand {width:24px; height:24px; background-image:url(../images/icon/icon-national-thailand.png);}
.icon-national-turkey {width:24px; height:24px; background-image:url(../images/icon/icon-national-turkey.png);}
.icon-national-usa {width:24px; height:24px; background-image:url(../images/icon/icon-national-usa.png);}
.icon-national-malaysia {width:24px; height:24px; background-image:url(../images/icon/icon-national-malaysia.png);}
.icon-national-hongkong {width:24px; height:24px; background-image:url(../images/icon/icon-national-hongkong.png);}

.icon-write-white {width:24px; height:24px; background-image:url(../images/icon/icon-write-white.png);}
.icon-lock-black {width:24px; height:24px; background-image:url(../images/icon/icon-lock-black.png);}
.icon-lock-gray {width:24px; height:24px; background-image:url(../images/icon/icon-lock-gray.png);}
.icon-lock-lightgray {width:24px; height:24px; background-image:url(../images/icon/icon-lock-lightgray.png);}

/* icon 32 */
.icon-search-black {width:32px; height:32px; background-image:url(../images/icon/icon-search-black.png);}

/* icon 36 */
.icon-close-black {width:36px; height:36px; background-image:url(../images/icon/icon-close-black.png);}
.icon-brocure-middleware-48 {width:36px; height:36px; background-image:url(../images/icon/icon-brocure-middleware-36.png);}
.icon-brocure-middleware-platform-48 {width:36px; height:36px; background-image:url(../images/icon/icon-brocure-middleware-platform-36.png);}
.icon-brocure-interface-framework-48 {width:36px; height:36px; background-image:url(../images/icon/icon-brocure-interface-framework-36.png);}
.icon-brocure-business-framework-48 {width:36px; height:36px; background-image:url(../images/icon/icon-brocure-business-framework-36.png);}
.icon-brocure-system-managemant-48 {width:36px; height:36px; background-image:url(../images/icon/icon-brocure-system-managemant-36.png);}
.icon-brocure-rehosting-48 {width:36px; height:36px; background-image:url(../images/icon/icon-brocure-rehosting-36.png);}

/* icon 48 */
.icon-search-blue {width:48px; height:48px; background-image:url(../images/icon/icon-search-blue-48.png);}


/* icon etc */
.icon-common-error-1 {width:256px; height:256px; background-image:url(../images/icon/icon-common-error-1.png);}
.icon-common-error-2 {width:256px; height:256px; background-image:url(../images/icon/icon-common-error-2.png);}
.icon-common-error-3 {width:256px; height:256px; background-image:url(../images/icon/icon-common-error-3.png);}
.icon-none-data {width:128px; height:128px; background-image:url(../images/icon/icon-none-data.png);}

/* snb 24 */
.icon-snb-business {width:24px; height:24px; background-image:url(../images/icon/icon-snb-business.png);}
.icon-snb-interface {width:24px; height:24px; background-image:url(../images/icon/icon-snb-interface.png);}
.icon-snb-middleware {width:24px; height:24px; background-image:url(../images/icon/icon-snb-middleware.png);}
.icon-snb-middleware-platform {width:24px; height:24px; background-image:url(../images/icon/icon-snb-middleware-platform.png);}
.icon-snb-system {width:24px; height:24px; background-image:url(../images/icon/icon-snb-system.png);}
.icon-snb-rehost {width:24px; height:24px; background-image:url(../images/icon/icon-snb-rehost.png);}

/* process icon */
.process-icon {display:inline-flex; width:72px; height:72px; align-items:center; justify-content:center;}

/* ===========================
	06. label
=========================== */
.label {display:inline-flex; align-items:center; border:1px solid; background:#fff;}

.label-xsm {height:24px; padding:0 8px; font-size:14px; line-height:22px; border-radius:8px; box-sizing:border-box;}
.label-sm {height:32px; padding:0 12px; font-size:14px; line-height:30px; border-radius:8px; box-sizing:border-box;}
.label-md {height:36px; padding:0 24px; font-size:14px; line-height:34px; border-radius:18px; box-sizing:border-box;}
.label-lg {}

.label-border-blue {color:#4d75d3; border-color:#4d75d3;}
.label-border-light-green {color:#57ad23; border-color:#57ad23;}
.label-border-light-gray {color:#666; border-color:#666;}
.label-border-gray {color:#808080; border-color:#808080;}
.label-border-lighter-green {color:#68c132; border-color:#68c132;}
.label-border-orange {color:#ff921b; border-color:#ff921b;}
.label-border-light-blue {color:#6993ff; border-color:#6993ff;}
.label-border-red {color:#ec5962; border-color:#ec5962;}
.label-border-blue-100 {color:#3069fe; border-color:#3069fe;}
.label-border-dark-blue {color:#0039c0; border-color:#0039c0;}
.label-border-purple {color:#9422ca; border-color:#9422ca;}
.label-border-skyblue {color:#00aeef; border-color:#00aeef;}

.label-light-green {color:#fff; border-color:#57ad23; background-color:#57ad23;}
.label-light-blue {color:#fff; border-color:#4dc7f4; background-color:#4dc7f4;}
.label-yellow {color:#fff; border-color:#f9b508; background-color:#f9b508;}
.label-blue {color:#fff; border-color:#3361cd; background-color:#3361cd;}

.label-layout {display:flex; margin:-2px;}
.label-layout > .label-item {padding:2px;}
.label-layout > .label-item.item-hidden {display:none;}


@media screen and (max-width:1780px){
    #lnb + #contents {margin:0 0 0 300px;}
}

@media screen and (max-width:1280px){
    #dHead {position:absolute;}
    .header-gnb-wrap .header-inner .header-inner-grid {min-width:64.72%;}
    /* #lnb + #contents {padding-left:280px;} */
    #contents {}
    .footer-company-location {width:auto;}
}

@media screen and (max-width:1600px){
	.header-wrap .header-inner {padding:0 30px;}
    .header-wrap .logo, .header-gnb-wrap .side-btn-wrap {flex:0 0 auto;}
	.header-wrap .logo {width:214px; margin-right:60px;}
	.header-gnb-wrap .header-inner .header-inner-grid {width:100%; flex:1;}
	.header-gnb-wrap .side-btn-wrap {width:auto; margin-left:60px;}	
    .header-wrap .snb .snb-visual-area {width:270px;}
    .header-wrap .snb .snb-visual-area .snb-visual {width:270px; height:284px;}
    .header-wrap .snb .snb-list .snb-list-cell .snb-list-visual .snb-header > a > .icon {display:inline-flex; align-self:flex-start; margin-top:2px;}
    .header-all-menu-inner {padding:120px 80px 40px 80px;}
    .header-all-menu-inner .header-menu-top .logo {top:40px;}
    .header-all-menu-inner .header-menu-top .btn-gnb-menu-close {top:40px;}

    #page-ui {right:30px; padding:30px 0;}
    .footer-inner {padding:0 30px;}

    #lnb {width:250px;}
    #lnb + #contents {max-width:980px;}
}

@media screen and (max-width:1366px){
	.header-wrap .logo {margin-right:30px;}
	.header-gnb-wrap .side-btn-wrap {margin-left:30px;}	
	.gnb-list .gnb-list-cell {padding:0 20px;}
	.gnb-list .gnb-list-cell:first-child {padding-left:0;}

}