@charset "utf-8";

/******** Common ********/
#wrap { width:100%; min-width:320px; max-width: 100%; margin:0 auto; overflow:hidden; background-color: #fff; color: #0F172A; }
#skipnavi li a {  display:block; font-size:16px; width:100%; position:absolute; top:-10000px; left:0; text-align:center; z-index:999999; line-height:1; letter-spacing:0 ; }
#skipnavi li a:focus { position:absolute; top:0; left:0; font-weight:bold; color:#fff; background:#272727; padding:20px 0; line-height:1; }
.full-hidden { display: none; }
.mo-hidden { display: block; }
.pc-hidden { display: none; }
.pos-r { position: relative; }
.pos-a { position: absolute; }

/******** font ********/
.font96 { font-size: 96px !important; line-height: 1.3; }
.font72 { font-size: 72px !important; line-height: 1.3; }
.font60 { font-size: 60px !important; line-height: 1.3; }
.font48 { font-size: 48px !important; line-height: 1.3; }
.font40 { font-size: 40px !important; line-height: 1.3; }
.font36 { font-size: 36px !important; line-height: 1.4; }
.font32 { font-size: 32px !important; line-height: 1.4; }
.font30 { font-size: 30px !important; line-height: 1.4; }
.font28 { font-size: 28px !important; line-height: 1.4; }
.font24 { font-size: 24px !important; line-height: 1.4; }
.font22 { font-size: 22px !important; line-height: 1.3; }
.font20 { font-size: 20px !important; line-height: 1.4; }
.font18 { font-size: 18px !important; line-height: 1.4; }
.font16 { font-size: 16px !important; line-height: 1.4; }
.font14 { font-size: 14px !important; line-height: 1.4; }
.font12 { font-size: 12px !important; line-height: 1.4; }

.font-ch-30 { font-size: 30px; line-height: 1.3; }
.font-ch-28 { font-size: 28px; line-height: 1.3; }
.font-ch-20 { font-size: 20px; line-height: 1.3; }

.font-lg { font-size: 30px; line-height: 1.3; }
.font-md { font-size: 24px; line-height: 1.3; }
.font-sm { font-size: 20px; line-height: 1.3; }
.font-xs { font-size: 18px; line-height: 1.3; }

.thin { font-weight:100 !important; }
.light { font-weight:300 !important; }
.normal { font-weight:400 !important; }
.bold { font-weight:700 !important; }
.underline { text-decoration:underline; }
.poppins { font-family: "Poppins";}
.wb-ka { word-break: keep-all; }

/******** color ********/
.color-000000 { color:#000000 !important; }
.color-FFFFFF { color:#FFFFFF !important; }
.color-1E293B { color: #1E293B !important; }
.color-334155 { color: #334155 !important; }
.color-475569 { color: #475569 !important; }
.color-64748B { color: #64748B !important; }
.color-94A3B8 { color: #94A3B8 !important; }
.color-CBD5E1 { color: #CBD5E1 !important; }
.color-363636 { color: #363636 !important; }
.color-0F172A { color: #0F172A !important; }
.color-00206E { color: #00206E !important; }
.color-0E2644 { color: #0E2644 !important; }
.color-B91C1C { color: #B91C1C !important; }
.color-DD052B { color: #DD052B !important; }
.color-EA002C { color: #EA002C !important; }
.color-DC2626 { color: #DC2626 !important; }

.color-gradient { background: linear-gradient(180deg, #fff 0%, #00206E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; }


/******** background ********/
.bg-FFFFFF { background-color: #FFFFFF !important; }
.bg-EDF0F4 { background-color: #EDF0F4 !important; }
.bg-F1F5F9 { background-color: #F1F5F9 !important; }
.bg-0F172A { background-color: #0F172A !important; }
.bg-E9E3D8 { background-color: #E9E3D8 !important; }
.bg-0E2644 { background-color: #0E2644 !important; }


/******** display ********/
.d-block { display:block !important; }
.d-inline-block { display:inline-block !important; }
.d-inline { display:inline !important; }
.d-block-1280 { display: none; }

/******** hr ********/
hr { height: 1px; }
hr.title { height: 2px; }

/******** tit ********/
.tit.blue.line,
.tit.red.line { font-size: 30px; font-weight: 700; line-height: 1; padding-left: 16px; position: relative; margin-bottom: 40px; }
.tit.blue.line::before,
.tit.red.line::before { content:''; width: 6px; height: 26px; background-color: #B91C1C; position: absolute; top: 2px; left: 0; }
.tit.blue.line::before { background-color: #00206E; }

p.circle { padding-left: 5px; position: relative; }
p.circle::before { content: ''; display: block; top: 9px; width: 2px; height: 2px; background-color: #334155; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; position: absolute; left: 0; }

/******** btn ********/
.btn { position: relative; text-align: center; width: 100%; height: 80px; line-height: 80px; font-size: 18px; font-weight: bold; color: #0F172A; border: 1px solid #475569; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; }
.btn span { display: inline-block; }
.btn img { vertical-align: middle; }

/******** btn-size ********/
.btn.xs { width: 120px; height: 40px; line-height: 38px; font-size: 16px; border: 1px solid #64748B; border-radius: 40px; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; }
.btn.sm { width: 220px; height: 64px; line-height: 62px; font-size: 16px; }
.btn.md { width: 264px; }
.btn.lg { width: 344px; }
.btn.xl { width: 470px; height: 84px; line-height: 84px; font-size: 22px; }

/******** btn-type ********/
.btn.icon { overflow: hidden; }
.btn.icon > span:first-child { margin-right: 8px;  }
.btn > .icon.type02 { position: absolute; top: 50%; left: 26px; transform: translateY(-50%); }
.btn.white { background-color: #FFFFFF; border: 1px solid #475569; }
.btn.red { background-color: #DC2626; border: 1px solid #DC2626; color: #FFFFFF; }
.btn.blue { background-color: #00206E; border: 1px solid #00206E; color: #FFFFFF; }
.btn.none-line { border: 1px solid transparent; }
.btn.border-0 { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; }
.btn.blue.submit:disabled,
.btn.red.submit:disabled { background-color: #D1D5DB; border: 1px solid #D1D5DB; color: #FFFFFF; cursor: auto; }

.btn.guideline { position: relative; height: 70px; line-height: 70px; padding: 0 26px 0 37px; text-align: left; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }
.btn.guideline .icon-line { position: absolute; right: 46px; top: 50%; }
.btn.guideline .icon-line span { position: absolute; display: block; width: 20px; height: 2px; background-color: #0F172A; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; }
.btn.guideline .icon-line span + span { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); }
.btn.guideline.active { background-color: #334155; color: #FFFFFF; }
.btn.guideline.active .icon-line span { background-color: #FFFFFF; }
.btn.guideline.active .icon-line span + span { transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); }

/******** icon ********/
.icon-line { position: relative; }
.icon-line [class*="line"] { position: absolute; top: 50%; left: 50%;  display: block; width: 18px; height: 2px; background-color: #0F172A; }
.icon-line .line-1 { transform: translate(-50%, -50%); }
.icon-line .line-2 { transform: translate(-50%, -50%) rotate(90deg); }

.icon-num { display: inline-block; width: 40px; height: 40px; line-height: 42px !important; border-radius: 50%; font-family: "Poppins"; text-align: center; margin-right: 12px; }

/******** layout ********/
.default-wrap { overflow: hidden; position: relative; width:100%; max-width: 1600px; margin-left:auto; margin-right:auto; padding-left: 61px; padding-right: 61px; }
.default-wrap.medium { width:100%; max-width:1022px; padding-left: 24px; padding-right: 24px; }
.default-wrap.wide { width:100%; max-width:1510px; padding-left: 24px; padding-right: 24px; }

/* .default-wrap .title-wrap { max-width: 1006px; width: 100%; padding-left: 16px; padding-right: 16px; margin: 0 auto; } */

/******** tabs ********/
.tab-wrap { overflow: hidden; display: block; position: relative; width: auto; margin: 0px auto; z-index: 1; }
.tab-wrap.type1 li { overflow: hidden; z-index: 1; height: 72px; border: 1px solid #CBD5E1; display: table; }
.tab-wrap.type1 li a { display: table-cell; width: 100%; height: 72px; line-height: 1.3; font-size: 20px; color: #64748B; text-align: center; z-index: 3; transition: all 0.25s; background-color: #F1F5F9; font-weight: bold; vertical-align: middle; }
.tab-wrap.type1 li.active { border: 1px solid transparent; border-top: 2px solid #00206E; }
.tab-wrap.type1 li.active a { background-color: #FFFFFF; color:#0F172A; }
.tab-contents { position: relative; display: none; }
.tab-contents.active { display: block; }


.tab-wrap.type2 ul li { position: relative; width: 22%; float: left; height: 220px; border-right: 1px solid #CBD5E1; padding-top: 16px; padding-left: 32px; overflow: hidden; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; background-repeat: no-repeat; background-position: right -10% center; background-size: contain;  }
.tab-wrap.type2 ul li span { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; }
.tab-wrap.type2 ul li > a { position: relative; display: block; height: 100%; }
.tab-wrap.type2 ul li:first-child { background-image: url('/images/page/img_3_4_1_g.png'); border-left: 1px solid #CBD5E1; }
.tab-wrap.type2 ul li:nth-child(2) { background-image: url('/images/page/img_3_4_2_g.png'); }
.tab-wrap.type2 ul li:nth-child(3) { background-image: url('/images/page/img_3_4_3_g.png'); }
.tab-wrap.type2 ul li:nth-child(4) { background-image: url('/images/page/img_3_4_4_g.png'); }

.tab-wrap.type2 ul li.active:first-child { background-image: url('/images/page/img_3_4_1.png'); }
.tab-wrap.type2 ul li.active:nth-child(2) { background-image: url('/images/page/img_3_4_2.png'); }
.tab-wrap.type2 ul li.active:nth-child(3) { background-image: url('/images/page/img_3_4_3.png'); }
.tab-wrap.type2 ul li.active:nth-child(4) { background-image: url('/images/page/img_3_4_4.png'); }

.tab-wrap.type2 ul li.active  { width: 34%; background-position: right center; }
.tab-wrap.type2 ul li.active::before { position: absolute; bottom: 0; left: 0; content: ""; display: block; width: 100%; height: 3px; background-color: #00206E; }
.tab-wrap.type2 ul li.active > a > span { font-size: 24px; color: #00206E; }


.tab-wrap.type3 ul { max-width: 423px; width: 100%; }
.tab-wrap.type3 ul li { height: 28px; line-height: 26px; border: 1px solid #CBD5E1; background-color: #F8FAFC; border-radius: 30px; text-align: center; display: inline-block; }
.tab-wrap.type3 ul li a { display: block; font-size: 14px; font-weight: bold; color: #64748B; }
.tab-wrap.type3 ul li.active { border-color: #334155; background-color: #334155; }
.tab-wrap.type3 ul li.active a { color: #F8FAFC; }

/******** data Entry ********/
.form-wrap { position:relative; }
.input-item { position: relative; }
.input-item label { display: block; font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.input-item input { width:100%; height: 54px; line-height: 54px; font-size: 20px; font-weight: 500; color: #0F172A; background-color: #FFFFFF; border-bottom: 1px solid #0F172A;}
.input-item input::placeholder { color: #94A3B8; }
/* .input-item input:focus{ border: 1px solid #B91C1C; background-color: #ffffff;  } */
input:focus::-webkit-input-placeholder { color: transparent; }
.textarea-item { position: relative; }
.textarea-item textarea { height: 352px; overflow-y: auto; border:1px solid transparent; border-bottom-color: #0F172A; background-color: #F1F5F9; }
input[type="text"]:focus,input[type="password"]:focus,input[type="tel"]:focus,input[type="number"]:focus, input[type="email"]:focus { border: 1px solid transparent; border-bottom: 1px solid #0F172A; background-color: #fff; }
textarea:focus { border: 1px solid transparent; border-bottom: 1px solid #0F172A; background-color: #F1F5F9; }
.textarea-item .text-num { position: absolute; bottom: 10px; right: 16px; font-size: 14px; color: #888888; line-height: 1.4;}

/* dropdown */
.dropdown-wrap { position: relative; z-index: 1;}
.dropdown-wrap .dropdown-btn { width:100%; background-color: #F1F5F9; background-image: url('/images/common/icon_arrow_down_db.svg'); background-repeat: no-repeat; background-position: right 30px center; letter-spacing:0; height: 64px; line-height: 0; color: #334155; border: 1px solid #CBD5E1; padding: 8px 30px; font-size: 18px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; }
.dropdown-wrap .dropdown-on { display: none; }
.dropdown-wrap .dropdown-on ul li { background: #F1F5F9; color: #334155; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; }
.dropdown-wrap .dropdown-on ul li a { padding: 8px 16px; display: block; border-bottom: 1px solid #CBD5E1; height: 40px; line-height: 1.65; font-size: 16px; width: 100%; }

.dropdown-wrap .dropdown-on ul li:hover { background-color: #e5e7eb; }
.dropdown-wrap .dropdown-on ul li:hover a { color: #0f172a; }
.dropdown-wrap .dropdown-on ul li.active { background-color: #e5e7eb; }
.dropdown-wrap .dropdown-on ul li.active a { color: #0f172a; }

/* select */
/* .select-item select { width: 100%; height: 64px; background-color: #F1F5F9; color: #334155; border: 1px solid #CBD5E1; padding: 8px 30px; font-size: 18px; background-image: url('/images/common/icon_arrow_down_db.svg'); background-repeat: no-repeat; background-position: right 30px center; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; } */
.select-item select { width: 100%; height: 54px; font-size: 18px; background-image: url('/images/common/icon_arrow_down_db.svg'); background-repeat: no-repeat; background-position: right 3px center; border-bottom: 1px solid #000000; }



/* accordion */
.accordion-wrap { width: 100%; }
.accordion-item { position: relative; width: 100%; padding: 22px 21px; text-align: left; border-top: 1px solid #94a3b8; border-bottom: 1px solid #94a3b8; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; }
.accordion-item > span { font-size: 24px; font-weight: bold; color: #1E293B; }
/* .accordion-item .handle { display: block; position: relative; padding: 24px 0; border-bottom: 1px solid #cccccc; font-size: 16px; background: url(/images/common/btn_arrow_down_b.svg) no-repeat center right; }
.accordion-item.active .handle { border-bottom: 1px solid #ffffff; background: url(/images/common/btn_arrow_up_b.svg) no-repeat center right;  }
.accordion-item .handle.none-con { cursor:initial; background: none;}
.accordion-item .handle span { display: block; } */
.accordion-item .handle { position: absolute; top: 50%; right: 31px; transform: translateY(-50%); }
.accordion-con { display: none; padding: 48px 60px 60px; overflow: hidden; border-bottom: 1px solid #CBD5E1; }
/* .accordion-con.active { display: block; } */
/* .accordion-item.active ~ .accordion-con { display: block; } */
/* .accordion-wrap .none { text-align: center; padding-top: 22px; padding-bottom: 22px; border-bottom: 1px solid #E9E9E9; } */

/******** tablest ********/
.tablest { display: table; table-layout: fixed; width: 100%; }
.tablest .tr { display: table-row; width: 100%; }
.tablest .th { display: table-cell; width: 19%; vertical-align: middle; padding-bottom: 120px; }
.tablest .td { display: table-cell; word-break: break-all; overflow: hidden; vertical-align: middle; }
.input-item { position: relative; width: 100%; }
.tablest .tr .td.e-mail .input-item { max-width: 30%; }
.tablest .tr .td > span { display: inline-block; width: 6%; height: 54px; line-height: 54px; text-align: center; }
.tablest .tr .td .select-item { max-width: 30%; width: 100%; margin-left: 28px; }
.tablest .tr .td .select-item select { padding: 0 5px; }
.tablest .td.textarea-item textarea { max-width: 786px; }


/******** headerWrap ********/
#headerWrap { position: fixed; z-index: 1000; height: 100px; width: 100%; top: 0; left: 0; transition: all 500ms cubic-bezier(0.565, 0.155, 0.355, 0.940); -webkit-transition: all 500ms cubic-bezier(0.565, 0.155, 0.355, 0.940); -moz-transition: all 500ms cubic-bezier(0.565, 0.155, 0.355, 0.940); -ms-transition: all 500ms cubic-bezier(0.565, 0.155, 0.355, 0.940); -o-transition: all 500ms cubic-bezier(0.565, 0.155, 0.355, 0.940); }
/* #headerWrap.scroll-down { top: -100px; } */

#headerWrap.main { background-color: transparent; }
#headerWrap.trans { background-color: rgba(0,0,0,0.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#headerWrap.trans .logo { background-image: url('/images/eng/common/img_logo_w.svg'); }
#headerWrap.trans .gnb-menu .depth-1 li .depth-1-menu { color: #fff; }
#headerWrap.trans .right-wrap .btn.white { background-color: transparent; border: 1px solid #fff; color: #fff; }
#headerWrap.trans .right-wrap .dropdown-lang-wrap .btn-lang { color: #fff; }
#headerWrap.trans .right-wrap .dropdown-lang-wrap .btn-lang::before { border-top: 4px solid #fff; }
#headerWrap.trans .right-wrap .dropdown-lang-wrap .btn-lang::after { background-color: #fff; }
#headerWrap.trans .gnb-menu .depth-1 li .depth-1-menu.active { color: #98A6C9; }
#headerWrap.trans .gnb-menu .depth-1 li .depth-1-menu.active::after { background-color: #98A6C9; }

#headerWrap::after { content: ""; display: block; position: absolute; top: 100px; left: 0px; height: 1px; width: 100%; background-color: rgba(255,255,255,0.2); }
#headerWrap .header-inner { position: absolute; top: 0px; height: 100%; width: 100%; padding-left: 44px; padding-right: 24px; }
#headerWrap .logo { position: absolute; top: 19px; left: 44px; z-index: 1200; display: block; height: 63px; width: 180px; background-image: url('/images/eng/common/img_logo.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; }
#headerWrap .gnb-menu { position: absolute; top: 0; left: calc(50% - 460px); max-width: 900px; width: 100%; height: 100px; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; z-index: 1; }
#headerWrap .gnb-menu .depth-1 { overflow: hidden; height: 100px; }
#headerWrap .gnb-menu .depth-1 > li { width: 20%; height: 100%; float: left; }
#headerWrap .gnb-menu .depth-1 li .depth-1-menu { display: block; position: relative; height: 100px; width: 100%; text-align: center; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; padding-top: 36px; line-height: 1.5; }
#headerWrap .gnb-menu .depth-1 li .depth-1-menu.lh2 { padding-top: 22px; }
#headerWrap .gnb-menu .depth-1 li .depth-1-menu::after { content: ""; display: block; position: absolute; bottom: 0.8rem; left: 0px; right: 0px; margin-left: auto; margin-right: auto; height: 3px; width: 140px; }
#headerWrap .gnb-menu .depth-1 li .depth-1-menu.active { color: #00206E; }
#headerWrap .gnb-menu .depth-1 li .depth-1-menu.active::after { background-color: #00206E; }
#headerWrap .gnb-menu .depth-2 { border-left: 1px solid; border-color: rgba(255,255,255,0.2); padding-top: 1.5rem; height: 0; }
#headerWrap .gnb-menu .depth-2 a { display: block; padding-left: 2.5rem; padding-right: 1.5rem; text-align: left; font-size: 1rem; font-weight: 500; line-height: 1.75rem; padding-top: 6px; padding-bottom: 6px; }
#headerWrap .right-wrap { float: right; padding-top: 36px; position: relative; z-index: 1; }
#headerWrap .right-wrap .dropdown-lang-wrap { display: inline-block; position: relative; margin-left: 20px; }
#headerWrap .right-wrap .dropdown-lang-wrap .btn-lang { width: 60px; height: 33px; text-align: left; font-size: 14px; font-family: "Poppins"; font-weight: 600; vertical-align: middle; padding-bottom: 10px; }
#headerWrap .right-wrap .dropdown-lang-wrap .btn-lang::before { content: ""; display: block; width: 0px; height: 0px; position: absolute; right: 10px; top: 10px; border-top: 4px solid #334155; border-left: 4px solid transparent; border-right: 4px solid transparent; }
#headerWrap .right-wrap .dropdown-lang-wrap .btn-lang::after { content: ""; display: block; position: absolute; left: 0px; bottom: 0.25rem; height: 1px; width: 50px; background-color: #64748B; }
#headerWrap .right-wrap .dropdown-menu { display: none; position: absolute; top: 30px; right: 0px; z-index: 50; width: 70px; }
#headerWrap .right-wrap .dropdown-menu.open { display: block; }
#headerWrap .right-wrap .dropdown-menu a { display: block; height: 40px; width: 100%; border-bottom: 1px solid #e2e8f0; background-color: #f3f4f6; text-align: center; font-family: "Poppins"; font-size: 14px; line-height: 40px; color: #475569; }

/******** gnb-open ********/
#headerWrap.gnb-open { height: 550px; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; }
#headerWrap.gnb-open .logo { background-image: url('/images/eng/common/img_logo_w.svg'); }
#headerWrap.gnb-open .depth-1 { height: 100%; }
#headerWrap.gnb-open .gnb-menu { height: 550px; }
#headerWrap.gnb-open .gnb-menu .depth-2 { height: 100%; }
#headerWrap.gnb-open .gnb-menu .depth-1 li a { color: #FFFFFF; }
#headerWrap.gnb-open .gnb-menu .depth-1 li .depth-1-menu.active { color: #98A6C9; }
#headerWrap.gnb-open .gnb-menu .depth-1 li .depth-1-menu.active::after { background-color: #98A6C9; }
#headerWrap.gnb-open .gnb-menu .depth-2 li a.active { color: #98A6C9; }
#headerWrap.gnb-open .gnb-menu .depth-2 li a.active::after { background-color: #98A6C9; }

#headerWrap.gnb-open .right-wrap .btn.contact { border: 1px solid #FFFFFF; color: #FFFFFF; background-color: transparent; }
#headerWrap.gnb-open .right-wrap .dropdown-lang-wrap .btn-lang { color: #FFFFFF; }
#headerWrap.gnb-open .right-wrap .dropdown-lang-wrap .btn-lang::before { border-top-color: #FFFFFF; }
#headerWrap.gnb-open .right-wrap .dropdown-lang-wrap .btn-lang::after { background-color: #FFFFFF; }
#headerWrap.gnb-open .dropdown-menu a { background-color: #475569; color: #FFFFFF; border-color: rgba(255,255,255,0.2); }

/******** hero-wrap ********/
#contentsWrap { position: relative; max-width: 100%; height: 100%; margin: 0 auto; }
.hero-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; }
.hero-wrap .title-wrap { width: 100%; background-color: #ffffff; font-family: 'Poppins'; }
.hero-wrap.has-image .title-wrap.before { background-color: transparent; color: #ffffff; z-index: 1; }
.hero-wrap .title-wrap h4 { font-size: 32px; line-height: 1.35; font-weight: 600; text-transform: uppercase; }
.hero-wrap .title-wrap h5 { font-size: 24px; line-height: 1.35; font-weight: 600; text-transform: uppercase; }
.hero-wrap .title-wrap h1 { overflow-wrap: normal; word-break: normal; font-size: 13vmin; font-weight: 700; line-height: 0.9em; letter-spacing: -0.025em; position: relative; }
.hero-wrap.long .title-wrap h1 { font-size: 12vmin; }
.hero-wrap .title-wrap.after h1::after { background-color: #0f172a !important; }
.hero-wrap .img-wrap { position: absolute; width: 100%; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); overflow: hidden; background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero-wrap .img-wrap::after { content: ''; position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100vh; min-height: calc(var(--vh, 1vh) * 100); background-color: rgba(0, 0, 0, 0.2); }
.hero-wrap .sub-title { position: absolute;  bottom: 120px; padding-left: 11.5105%; font-size: 60px; line-height: 1; font-weight: 800; letter-spacing: -0.05em;  color: #ffffff; text-shadow: 0 0 32px rgba(0, 0, 0, 0.2); }
.hero-wrap .sub-title-logo { display: block; height: 0.75em; margin-bottom: min(8vh, 2em); font-size: inherit; }
.hero-wrap .hero-mark-wrap { position: absolute; bottom: min(64px, 6.25vh); right: 72px; width: min(144px, 14.0625vh); display: flex; flex-direction: column; gap: 16px; }

.hero-wrap.has-image { height: 100vh; height: calc(var(--vh, 1vh) * 100); }
.hero-wrap.has-image.left .img-wrap { background-position: left 30% center; }
.hero-wrap.has-image .title-wrap { width: 100%; height: 60vh; position: absolute; z-index: 2; padding: 23.5vh 2% 0 11.5105%; background-color: #ffffff; font-family: 'Poppins'; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
.hero-wrap.has-image.long .title-wrap { height: 70vh; }
.hero-wrap .title-wrap h4 {  margin-top: 30px; }
.hero-wrap.has-image .title-wrap h5 {  margin-top: 3vw; }
.hero-wrap.has-image .title-wrap h1::after { content: ''; display: block; width: 9.9vw; height: 4px; background-color: #ffffff; position: absolute; left: -13.3%; bottom: 10px; }

.hero-wrap.no-image { padding-top: 100px; }
.hero-wrap.no-image .title-wrap { padding-left: 120px; padding-top: 200px; }
.hero-wrap.no-image .title-wrap h1 { font-size: 10vmin; }
.hero-wrap.no-image .title-wrap .line { position: absolute; bottom: 0.5rem; left: -30px; display: block; height: 4px; width: 140px; --tw-bg-opacity: 1; background-color: #000000 }

/******** quickWrap ********/
#quickWrap { display: none; position: fixed; right: 40px; bottom: 0; z-index: 5; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; }
#quickWrap.on { display: block; }
#quickWrap .top-btn { width: 90px; height: 48px; line-height: 48px; background-color: #80858C; }
#quickWrap .top-btn span { display: block; color: #FFFFFF; font-size: 14px; font-weight: bold; text-align: center; }
#quickWrap .top-btn span::after { content: ""; display: inline-block; width: 14px; height: 10px; background-image: url('/images/common/icon_arrow_top.svg'); background-repeat: no-repeat; background-size: contain; background-position: center; margin-left: 10px; }

/******** footerWrap ********/
#footerWrap { height: auto !important; background-color: #222425; }
#footerWrap .footer-wrap { position: relative; padding-top: 65px; padding-bottom: 60px; }
#footerWrap .footer-wrap .default-wrap { overflow: visible; }
#footerWrap .footer-wrap .site-map { display: inline-block; max-width: 954px; width: 65%; height: 195px; border-right: 1px solid rgba(255,255,255,0.1); margin-right: -4px; }
#footerWrap .footer-wrap .site-map > ul > li { float: left; max-width: 150px; width: 25%; }
#footerWrap .footer-wrap .site-map > ul > li + li { margin-left: 32px; }
#footerWrap .footer-wrap .site-map > ul > li > a { display: block; color: #FFFFFF; font-size: 18px; line-height: 1; font-weight: 700; margin-bottom: 25px; }
#footerWrap .footer-wrap .site-map > ul > li > ul > li + li { margin-top: 9px; }
#footerWrap .footer-wrap .site-map > ul > li > ul > li > a { display: block; color: #E2E8F0; font-size: 14px; line-height: 1.5; font-weight: 500; }

#footerWrap .footer-wrap .footer-txt { max-width: 386px; width: 100%; display: inline-block; vertical-align: top; margin-left: 66px; }
#footerWrap .footer-wrap .footer-txt .privacy { margin-bottom: 34px; display: inline-block; margin-right: -4px; }
#footerWrap .footer-wrap .footer-txt .privacy a { color: #ffffff; }

#footerWrap .footer-wrap .footer-txt > .select { position: relative; width: 246px; background-color: #555555; margin-bottom: 25px; z-index: 1; }
#footerWrap .footer-wrap .footer-txt > .select > a { position: relative; display: block; font-size: 14px; font-weight: 700; line-height: 46px; color: #FFFFFF; padding: 0 16px; background-image: url('/images/common/icon_arrow_up_w.svg'); background-position: right 20px center; background-repeat: no-repeat; }
#footerWrap .footer-wrap .footer-txt > .select > ul { position: absolute; bottom: 47px; left: 0; width: 100%; background-color: #555555; display: none; }
#footerWrap .footer-wrap .footer-txt > .select > ul > li > a { color: #E2E8F0; padding: 0 16px; line-height: 40px; font-size: 14px; display: block; }
#footerWrap .footer-wrap .footer-txt address, #footerWrap .footer-wrap .footer-txt .copy { color: #CBD5E1; font-size: 12px; }

/******** layer-popup ********/
.popup-block { position: fixed; z-index: 25; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.6; }
.layer-popup { width: 80%; max-width: 1100px; height: 70%; max-height: 720px; display: none; overflow: hidden; position: fixed; top:50%; left: 50%; z-index: 50; background-color: #FFFFFF; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
.layer-popup .pop-top { height: 80px; line-height: 80px; text-align: center; border-bottom: 1px solid #CACACA; position: relative; }
.layer-popup .pop-top .tit { font-size: 20px; font-weight: 700; }
.layer-popup .pop-top .pop-close { width: 24px; height: 24px; line-height: 0; border: none; position: absolute; top: 50%; right: 24px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; }
.layer-popup .pop-top .pop-close span { position: absolute; width: 2px; height: 24px; background-color: #4B5563; top: 0; left: 50%; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }
.layer-popup .pop-top .pop-close span + span { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); }
.layer-popup .pop-con { height: calc(100% - 80px); }
.layer-popup .pop-con .scroll-box { padding: 40px 63px; height: 100%; }
.layer-popup .pop-con .scroll-box p + p { margin-top: 40px; }
.layer-popup .pop-con .scroll-box p + p + p { margin-top: 32px; }
.layer-popup .pop-con .scroll-box p strong { display: block; font-size: 18px; margin-bottom: 8px; }
.layer-popup .pop-con .scroll-box::-webkit-scrollbar { width: 20px; background-color: #E8E8E8; }
.layer-popup .pop-con .scroll-box::-webkit-scrollbar-thumb { background-color: #C8C8C8;  }

/******** search-box-wrap ********/
.select-item .btn-search { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 32px; height: 32px; background-image: url('/images/common/icon_search.svg'); background-repeat: no-repeat; background-position: center; }

/******** product-search-wrap ********/
.product-search-wrap .accordion-item.active { border-top: 1px solid #1E293B; border-bottom: 1px solid #1E293B; }
.product-search-wrap .accordion-con { border-bottom: 1px solid #1E293B; }
.product-search-wrap .view-wrap, .product-search-wrap .find-wrap { overflow: hidden; max-width: 100%; width: 648px; }
.product-search-wrap .view-wrap .tab-wrap.type3 li { width: 57px; height: 28px; }
.product-search-wrap .view-wrap .table-wrap { max-height: 345px; overflow-y: auto; scrollbar-width: none; }
.product-search-wrap .view-wrap .table-wrap::-webkit-scrollbar { width: 4px; }
.product-search-wrap .view-wrap .table-wrap::-webkit-scrollbar-thumb { background: #bbbbbb; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
.product-search-wrap .view-wrap .table-wrap .tab-contents { position: static !important; background-color: #F1F5F9; color: #64748B; }
.product-search-wrap .view-wrap .table-wrap .tab-contents.active { display: table; }
.product-search-wrap .view-wrap .table-wrap .tab-contents thead th { border-top: 1px solid #CBD5E1; border-bottom: 1px solid #CBD5E1; padding: 18px 10px 18px 42px; }
.product-search-wrap .view-wrap .table-wrap .tab-contents tbody td { padding: 0 0 25px 42px; }
.product-search-wrap .view-wrap .table-wrap .tab-contents tbody tr:first-child td { padding: 25px 0 25px 42px; }
.product-search-wrap .view-wrap .table-wrap .tab-contents tbody td strong { color: #1E293B; }
.product-search-wrap .find-wrap .btn-wrap { overflow: hidden; }
.product-search-wrap .find-wrap .btn-wrap button { width: 120px; height: 140px; padding: 79px 10px 42px; color: #94A3B8; border: 1px solid #E2E8F0; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; background-image: url('/images/common/btn_check_line_b.svg'); background-repeat: no-repeat; background-position: center top 29px; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; display: block; float: left; }
.product-search-wrap .find-wrap .btn-wrap button + button { margin-left: 12px; }
.product-search-wrap .find-wrap .btn-wrap button.active { background-image: url('/images/common/btn_check_line_blue.svg'); border: 1px solid #334155; color: #0F172A; }
.product-search-wrap .find-wrap .select-item.type1 select { height: 64px; line-height: 24px; padding: 20px 30px; background-color: #F1F5F9; color: #334155; background-position: right 30px center; border: 1px solid #CBD5E1; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; -o-border-radius: 6px; }
.product-search-wrap .find-wrap .search-wrap a { display: block; height: 70px; padding: 8px 30px; line-height: 54px; position: relative; border: 1px solid #334155; background-color: #ffffff; }
.product-search-wrap .find-wrap .search-wrap a span { font-size: 18px; font-weight: bold; }
.product-search-wrap .find-wrap .search-wrap a span + span { position: absolute; right: 30px; }
.product-search-wrap .find-wrap .search-wrap a span + span img { vertical-align: sub; }

/******** list ********/
.list-wrap { overflow: hidden; }
.list-wrap li { position: relative; float: left; height: 413px; background-size: cover; background-repeat: no-repeat; background-position: center; }
.list-wrap li > span { display: block; }
.list-wrap li + li { margin-left: 34px; }

.list-wrap.column2 li { width: calc(50% - 17px); }
.list-wrap.column3 li { width: calc(33.33% - 23px); }
.list-wrap.column4 li { width: calc(25% - 26px); }
.list-wrap.column5 li { width: calc(20% - 10px); }

.list-wrap.type1 li { max-width: 722px; height: 670px; padding: 51px 70px 58px 63px; }
.list-wrap.type1 li a { position: absolute; bottom: 58px; left: 63px; }

/******** card-list-wrap ********/
.card-list-wrap { overflow: hidden; }
.card-list-wrap .card-item { margin-bottom: 34px; }
.card-list-wrap .card-item .inner-wrap { position: relative; display: block; padding: 37px 36px; border: 1px solid #E2E8F0; border-top-color: #0F172A; }
.card-list-wrap .card-item .inner-wrap > span { display: block; }
.card-list-wrap .card-item .inner-wrap .img-wrap > img { width: 100%; }
.card-list-wrap .card-item .inner-wrap .news-title { font-weight: bold; line-height: 1.2; letter-spacing: -0.025em; }
.card-list-wrap .card-item .inner-wrap .news-date { font-family: "Poppins"; font-size: 14px; line-height: 1rem; color: #475569; }
.card-list-wrap .card-item .inner-wrap.box-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.card-list-wrap .card-item .inner-wrap.box-shadow:hover { box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.15); }
.card-list-wrap .card-item .inner-wrap .btn-row { margin-top: 55px; }

.card-item .btn-row .btn-incard { height: 56px; line-height: 56px; padding-left: 56px; padding-right: 20px; border: 1px solid #0F172A; letter-spacing: -0.025em; background-image: url('/images/page/icon_4_2_1.svg'); background-repeat: no-repeat; background-position: left 20px center; background-size: 26px 30px; }
.card-item .btn-row .btn-incard:last-child { background-image: url('/images/page/icon_4_2_2.svg'); margin-left: 8px; background-size: 28px 28px; }
.card-item .btn-row .btn-incard > span { display: block; }
.card-item .btn-row .btn-incard:hover { background-color: #F1F5F9; }

/******** media-list-wrap ********/
.media-list-wrap { border-top: 1px solid #0F172A; }
.media-list-wrap > .media-list-item { width: 100%; border-bottom: 1px solid #E2E8F0; }
.media-list-wrap > .media-list-item > a { display: block; padding: 53px 0; }
.media-list-wrap > .media-list-item > a::after { display: block; content: ""; clear: both; }
.media-list-wrap > .media-list-item > a > span { float: left; }
.media-list-wrap > .media-list-item > a > .news-date { padding-left: 15px; padding-right: 21px; position: relative; max-width: 83px; width: 6%; }
.media-list-wrap > .media-list-item > a > .news-date .dot { display: none; }
.media-list-wrap > .media-list-item > a > .news-date::after { content: ""; display: inline-block; width: 1px; height: 100%; background-color: #CBD5E1; position: absolute; top: 0; right: 0; }
.media-list-wrap > .media-list-item > a > .news-title { max-width: 767px; width: 52%; padding-left: 32px; letter-spacing: -0.025em; }
.media-list-wrap > .media-list-item > a > .news-summary { padding-left: 31px; max-width: 618px; width: 42%; letter-spacing: -0.025em; }
.media-list-wrap > .media-list-item > .inner-wrap.box-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; }
.media-list-wrap > .media-list-item > .inner-wrap.box-shadow:hover { box-shadow: 4px 4px 24px rgba(0, 0, 0, 0.15); }


/******** info-wrap ********/
.info-wrap { max-width: 1226px; width: 100%; margin: 0 auto; }
.info-wrap .list-wrap li { height: 203px; }
.info-wrap .list-wrap.column4 li { width: calc(25% - 16px); }
.info-wrap .list-wrap li + li { margin-left: 18px; }
.info-wrap .list-wrap.column5 li + li { margin-left: 12px; }
.info-wrap .list-wrap li span { position: absolute; width: calc(100% - 60px); bottom: 30px; left: 30px; color: #ffffff; font-size: 20px; font-weight: 700; }

.info-wrap .data-list-wrap ul .data-list { border-top: 1px solid #94A3B8; padding: 16px; overflow: hidden; }
.info-wrap .data-list-wrap ul .data-list p { padding: 16px; float: left; }
.info-wrap .data-list-wrap ul .data-list p span { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: #64748B; }
.info-wrap .data-list-wrap ul .data-list p span + span { font-size: 16px; color: #0F172A; margin-top: 10px; }

.info-wrap .data-list-wrap ul.column3 .data-list p { width: calc(100% / 3); }
.info-wrap .data-list-wrap ul.column4 .data-list p { width: 25%; }
.info-wrap .data-list-wrap ul.column5 .data-list p { width: 20%; }
.info-wrap .data-list-wrap ul.column6 .data-list p { width: calc(100% / 6); }

.info-wrap .box-list-wrap.column2 .box-list { width: calc(50% - 17px); }
.info-wrap .box-list-wrap.column3 .box-list { width: calc(33.33% - 23px); }
.info-wrap .box-list-wrap { overflow: hidden; }
.info-wrap .box-list-wrap .box-list { text-align: center; float: left; position: relative; }
.info-wrap .box-list-wrap .box-list + .box-list { margin-left: 34px; }
.info-wrap .box-list-wrap .box-wrap { overflow: hidden; background-color: #F1F5F9; border: 1px solid #F1F5F9; border-radius: 32px; -webkit-border-radius: 32px; -moz-border-radius: 32px; -ms-border-radius: 32px; -o-border-radius: 32px; padding: 0 20px; }
.info-wrap .box-list-wrap .box-wrap .check { background-image: url('/images/page/icon_3_2_1.svg'); background-repeat: no-repeat; background-position: left center; padding-left: 30px; }

.info-wrap .box-tit { width: 100%; height: 72px; line-height: 72px; font-weight: 700; color: #00206E; background-color: #FFFFFF; border: 1px solid #97A3BA; text-align: center; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; -ms-border-radius: 100px; -o-border-radius: 100px; position: absolute; top: -32px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }
.info-wrap .box-tit.red { height: 100px; line-height: 100px; background-color: #B91C1C; border: 1px solid #B91C1C; color: #FFFFFF; }
.info-wrap .box-tit.blue { height: 100px; line-height: 100px; background-color: #00206E; border: 1px solid #00206E; color: #FFFFFF; }
.info-wrap .box-tit.red br,
.info-wrap .box-tit.blue br { display: none; }
.info-wrap .box-tit.sm { max-width: 210px; }
.info-wrap .box-tit.md { max-width: 498px; }
.info-wrap .box-tit.lg { max-width: 650px; position: static; margin-left: auto; margin-right: auto; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); }

/******** icon-list-wrap ********/
.icon-list-wrap .list { padding-bottom: 60px; border-bottom: 1px solid #CBD5E1; }
.icon-list-wrap .list + .list { padding-top: 60px; }
.icon-list-wrap .list > div > div + div { margin-left: 36px; max-width: 722px; }
.icon-list-wrap .list ul li  { font-size: 18px; position: relative; color: #334155; list-style-type: '·'; margin-left: 10px; }
.icon-list-wrap .list ul li + li { margin-top: 8px; }

@media (max-width: 1600px) {
    /******** footerWrap ********/
    #footerWrap .footer-wrap .site-map > ul > li { width: 17%; }
    #footerWrap .footer-wrap .footer-txt { margin-left: 30px; }

    /******** product-search-wrap ********/
    .product-search-wrap .view-wrap, .product-search-wrap .find-wrap { width: calc(50% - 20px); }
    .product-search-wrap .find-wrap { margin-left: 20px; }
    .product-search-wrap .find-wrap .btn-wrap button { width: calc(20% - 10px); }

    /******** list ********/
    .list-wrap li + li { margin-left: 20px; }
    .list-wrap.column2 li { width: calc(50% - 10px); }
    .list-wrap.column3 li { width: calc(33.33% - 14px); }
    .list-wrap.column4 li { width: calc(25% - 15px); }
}
/*xl*/
@media (max-width: 1440px) {
    /******** footerWrap ********/
    #footerWrap .footer-wrap .default-wrap { text-align: center; }
    #footerWrap .footer-wrap .site-map { text-align: left; width: 100%; max-width: 900px; margin-bottom: 40px; border-right: none; }
    #footerWrap .footer-wrap .footer-txt { max-width: 100%; margin-left: 0; }
    #footerWrap .footer-wrap .footer-txt address { max-width: 510px; margin: 0 auto; }
    #footerWrap .footer-wrap .footer-txt > .select { max-width: 900px; width: 100%; margin-left: auto; margin-right: auto; }

    /******** product-search-wrap ********/
    .product-search-wrap .view-wrap, .product-search-wrap .find-wrap { float: none !important; margin: auto; width: 100%; }
    .product-search-wrap .find-wrap { margin-top: 30px; }
}
/* gird 브레이크포인트와 별도로 레이아웃에만 쓰임*/
@media (max-width: 1280px) {
    .d-block-1280 { display: block; }

    /******** font ********/
    .font48 { font-size: 42px !important; line-height: 1.3; }
    .font40 { font-size: 36px !important; line-height: 1.3; }
    .font36 { font-size: 30px !important; line-height: 1.4; }
    .font32 { font-size: 28px !important; line-height: 1.4; }
    .font30 { font-size: 26px !important; line-height: 1.4; }
    .font28 { font-size: 24px !important; line-height: 1.4; }
    .font24 { font-size: 22px !important; line-height: 1.4; }

    .font-ch-30 { font-size: 26px; }

    /******** headerWrap ********/
    #headerWrap .logo { width: 140px; height: 54px; top: 23px; }
    #headerWrap .gnb-menu { max-width: 640px; left: calc(50% - 350px); }
    #headerWrap .gnb-menu .depth-1 li .depth-1-menu { font-size: 18px; }
    #headerWrap .gnb-menu .depth-1 li .depth-1-menu::after { width: 132px; }
    #headerWrap .gnb-menu .depth-2 a { padding-left: 1.2rem; padding-right: 0.4rem; }
    #headerWrap.gnb-open { height: 580px; }
    #headerWrap.gnb-open .gnb-menu { height: 580px; }


    /******** tab-wrap ********/
    .tab-wrap.type2 ul li { background-size: 90%; }
    .tab-wrap.type2 ul li.active > a > span { font-size: 22px; }

    .card-item .btn-row .btn-incard { padding-left: 53px; padding-right: 18px; background-size: 24px 28px; background-position: left 18px center; }

    /******** info-wrap ********/
    .info-wrap .box-tit.md { max-width: 338px; }
    .info-wrap .box-list-wrap.column2 .box-list { width: calc(50% - 10px); }
    .info-wrap .box-list-wrap.column3 .box-list { width: calc(33.33% - 14px); }
    .info-wrap .box-list-wrap .box-list + .box-list { margin-left: 20px; }
}

/*lg*/
@media (max-width: 1024px) {
    .contents.pt180 { padding-top: 80px !important; }
    .mo-hidden { display: none; }
    .pc-hidden { display: block; }

    /******** font ********/
    .font96 { font-size: 96px !important; line-height: 1.3; }
    .font72 { font-size: 72px !important; line-height: 1.3; }
    .font60 { font-size: 60px !important; line-height: 1.3; }
    .font48 { font-size: 28px !important; line-height: 1.3; }
    .font40 { font-size: 28px !important; line-height: 1.3; }
    .font36 { font-size: 24px !important; line-height: 1.4; }
    .font32 { font-size: 24px !important; line-height: 1.4; }
    .font30 { font-size: 20px !important; line-height: 1.4; }
    .font28 { font-size: 20px !important; line-height: 1.4; }
    .font24 { font-size: 18px !important; line-height: 1.4; }
    .font22 { font-size: 20px !important; }
    .font20 { font-size: 18px !important; line-height: 1.4; }
    .font18 { font-size: 18px !important; line-height: 1.4; }
    .font16 { font-size: 16px !important; line-height: 1.4; }
    .font14 { font-size: 14px !important; line-height: 1.4; }
    .font12 { font-size: 12px !important; line-height: 1.4; }

    /******** btn ********/
    .btn { height: 64px; line-height: 64px; }
    .btn.sm { width: 160px; height: 48px; line-height: 46px; font-size: 14px; }
    .btn.md { max-width: 292px; width: 100%; }
    .btn.xl { width: 334px; }
    .btn.lg { width: 334px; }

    .btn.guideline { max-width: 100%; width: 358px !important; height: 64px; line-height: 64px; font-size: 16px; }

    /******** icon ********/
    .icon-num { width: 26px; height: 26px; line-height: 28px !important; }

    .input-item input { font-size: 16px; }

    .tit.red.line { font-size: 18px; padding-left: 12px; }
    .tit.red.line::before { width: 4px; height: 20px; top: 0; }


    /******** headerWrap ********/
    #headerWrap { height: 60px; }
    #headerWrap::after { content: none; }
    #headerWrap .header-inner { position: static; }
    #headerWrap .logo { width: 120px; height: 38px; top: 10px; left: 16px; }
    #headerWrap .logo.dark { background-image: url('/images/eng/common/img_logo_w.svg'); }
    #headerWrap .gnb-menu { position: fixed; max-width: 100%; width: 100%; min-height: 100vh;  min-height: calc(var(--vh, 1vh) * 100); right: -100%; left: inherit; background-color: #3C3C3C; transition: all 0.3s; padding: 78px 40px; }
    #headerWrap .gnb-menu.active { right: 0; }
    #headerWrap .gnb-menu .depth-1 { overflow-y: auto; max-height: 100vh; max-height: calc(var(--vh, 1vh) * 100); height: 100%; }
    #headerWrap .gnb-menu .depth-1 > li { width: 100%; height: auto; float: none; border-top: 1px solid rgba(255,255,255,0.3); }
    #headerWrap .gnb-menu .depth-1 li .depth-1-menu { height: auto; line-height: inherit; text-align: left; font-size: 22px; color: #FFFFFF; background-image: url('/images/common/icon_arrow_down_w.svg'); background-repeat: no-repeat; background-position: right 7px center; padding-right: 35px; padding-top: 20px; padding-bottom: 19px; }
    #headerWrap .gnb-menu .depth-1 li .depth-1-menu br { display: none; }
    #headerWrap .gnb-menu .depth-1 li .depth-1-menu::after { content: none; }
    #headerWrap .gnb-menu .depth-1 li .depth-1-menu.active { color: #98A6C9 !important; background-image: url('/images/common/icon_arrow_up_y.svg'); }
    #headerWrap .gnb-menu .depth-1 li:last-child .depth-1-menu { background-image: none; }
    #headerWrap .gnb-menu .depth-1 li .depth-1-menu.active::after { content: none; }
    #headerWrap .gnb-menu .depth-2 { display: none; height: auto; padding-bottom: 1.5rem; padding-top: 0; border: none; }
    #headerWrap .gnb-menu .depth-2 a { display: inline-block; font-size: 18px; color: #FFFFFF;  padding-left: 2%; }
    /* #headerWrap .gnb-menu .depth-2.active { display: block; } */
    #headerWrap .gnb-menu .depth-2.active a.active { color: #98A6C9; }
    #headerWrap .right-wrap { padding-top: 10px; }
    #headerWrap .right-wrap .btn.contact { display: none; }
    #headerWrap .right-wrap .dropdown-lang-wrap.active .btn-lang { color: #FFFFFF; }
    #headerWrap .right-wrap .dropdown-lang-wrap.active .btn-lang::before { border-top: 4px solid #FFFFFF; }
    #headerWrap .right-wrap .dropdown-lang-wrap.active .btn-lang::after { background-color: #FFFFFF; }
    #headerWrap .dropdown-lang-wrap.active .dropdown-menu a { background-color: #475569; color: #FFFFFF; border-color: rgba(255,255,255,0.2); }

    #headerWrap .right-wrap .btn-burger { width: 40px; height: 40px; vertical-align: middle; }
    #headerWrap .right-wrap .btn-burger .line { position: absolute; top: 50%; left: 50%; display: block; height: 2px; width: 22px; background-color: #0F172A; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
    #headerWrap .right-wrap .btn-burger .line::before { content: ""; position: absolute; top: -8px; display: block; height: 2px; width: 100%; background-color: #0F172A; }
    #headerWrap .right-wrap .btn-burger .line::after { content: ""; position: absolute; top: 8px; display: block; height: 2px; width: 100%; background-color: #0F172A; }

    #headerWrap.trans { height: 60px; }
    #headerWrap.trans .right-wrap .btn-burger .line { background-color: #fff; }
    #headerWrap.trans .right-wrap .btn-burger .line::before { background-color: #fff; }
    #headerWrap.trans .right-wrap .btn-burger .line::after { background-color: #fff; }

    /******** 모바일 gnb 활성화 ********/
    #headerWrap.on { position: fixed; top: 0; left: 0; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); }
    #headerWrap.on .right-wrap .btn-burger .line { background-color: transparent !important; }
    #headerWrap.on .right-wrap .btn-burger .line::before { top: 0px; transform: rotate(45deg); background-color: #FFFFFF; }
    #headerWrap.on .right-wrap .btn-burger .line::after { top: 0px; transform: rotate(-45deg); background-color: #FFFFFF; }

    .default-wrap { max-width: 720px !important; padding-left: 16px !important; padding-right: 16px !important; }
    .hero-wrap .hero-mark-wrap { bottom: 40px; right: 40px; width: 96px; }
    .hero-wrap.no-image { padding-top: 60px; }
    .hero-wrap.no-image .title-wrap { padding-left: 60px; padding-top: 108px; }
    .hero-wrap.no-image .title-wrap h1 { font-size: 11vw; }
    .hero-wrap.no-image .title-wrap .line { left: -85px; }

    /******** layer-popup ********/
    .layer-popup { height: 550px; }
    .layer-popup .pop-top { height: 60px; line-height: 60px; }
    .layer-popup .pop-top .tit { font-size: 18px; }
    .layer-popup .pop-top .pop-close span { height: 20px; top: 3px; }
    .layer-popup .pop-con { height: calc(100% - 60px); }
    .layer-popup .pop-con .scroll-box { padding: 30px; }
    .layer-popup .pop-con .scroll-box p { font-size: 14px; }
    .layer-popup .pop-con .scroll-box p strong { font-size: 16px; }
    .layer-popup .pop-con .scroll-box::-webkit-scrollbar { width: 0; }

    /******** tab-wrap ********/
    .tab-wrap.type1 li { height: 56px; }
    .tab-wrap.type1 li a { height: 56px;  line-height: 1.1; font-size: 16px; }
    .tab-wrap.type2 ul { flex-wrap: wrap; }
    .tab-wrap.type2 ul li { width: 50%; height: 130px; padding-top: 15px; padding-left: 16px; background-size: contain; }
    .tab-wrap.type2 ul li + li + li { margin-top: 17px; }
    .tab-wrap.type2 ul li span { font-size: 18px; }
    .tab-wrap.type2 ul li.active { width: 50%; }
    .tab-wrap.type2 ul li.active > a > span { font-size: 18px; }

    /******** quickWrap ********/
    #quickWrap.on { display: none; }

    /******** footerWrap ********/
    #footerWrap { height: 300px !important; }
    #footerWrap .footer-wrap { padding-top: 40px; padding-bottom: 68px; }
    #footerWrap .footer-wrap .default-wrap { padding-left: 24px; padding-right: 24px; }
    #footerWrap .footer-wrap .site-map { display: none; }

    .card-list-wrap .card-item .inner-wrap { padding: 24px; }

    /******** tablest ********/
    .tablest .tr .td .select-item { margin-left: 22px; }

    /******** list ********/
    .list-wrap.type1 li { float: none; width: 100%; height: 480px; }
    .list-wrap.type1 li + li { margin-left: 0; margin-top: 24px; }
    .list-wrap.type1 li a span:first-child { margin-right: 64px !important; }
    .list-wrap.type1 li a span + span img { width: 88px; }

    /******** media-list-wrap ********/
    .media-list-wrap > .media-list-item > a { padding: 26px 0 32px; }
    .media-list-wrap > .media-list-item > a > span { float: none; display: block; }
    .media-list-wrap > .media-list-item > a > .news-date { padding-left: 0; padding-right: 0; max-width: 100%; width: 100%; }
    .media-list-wrap > .media-list-item > a > .news-date .dot { display: inline-block; }
    .media-list-wrap > .media-list-item > a > .news-date::after { display: none; }
    .media-list-wrap > .media-list-item > a > .news-title { max-width: 100%; width: 100%; padding-left: 0; margin-top: 8px; }
    .media-list-wrap > .media-list-item > a > .news-summary { display: none !important; }

    /******** info-wrap ********/
    .info-wrap .list-wrap li { height: 248px; }
    .info-wrap .list-wrap li,
    .info-wrap .list-wrap.column2 li,
    .info-wrap .list-wrap.column3 li,
    .info-wrap .list-wrap.column4 li,
    .info-wrap .list-wrap.column5 li { float: none; width: 100%; height: 248px; }
    .info-wrap .list-wrap li + li,
    .info-wrap .list-wrap.column5 li + li { margin-top: 24px; margin-left: 0; }

    .info-wrap .data-list-wrap ul .data-list { padding: 0 13px 28px 0; }
    .info-wrap .data-list-wrap ul .data-list p { width: 50% !important; padding: 24px 0 0 0; }
    .info-wrap .data-list-wrap ul .data-list p:nth-child(odd) { padding-right: 24px; clear: left; }
    .info-wrap .data-list-wrap ul.column3 .data-list p { width: 100% !important; }
    .info-wrap .data-list-wrap ul .data-list p:first-child span + span { font-size: 18px; }
    .info-wrap .data-list-wrap ul .data-list p span { font-size: 12px; }
    .info-wrap .data-list-wrap ul .data-list p span + span { font-size: 14px; margin-top: 8px; }

    .info-wrap .box-tit { height: 64px; line-height: 64px; font-size: 20px !important; }
    .info-wrap .box-tit.red { font-size: 28px !important; max-width: 100% !important; height: 120px; line-height: 1.3; padding: 23px 15px; border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; }
    .info-wrap .box-tit.red br { display: block; }
    .info-wrap .box-tit.md { max-width: 278px; }
    .info-wrap .box-tit.sm { max-width: 176px; }

    .info-wrap .box-list-wrap .box-wrap { border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; }
    .info-wrap .box-list-wrap.column2 .box-list { float: none; width: 100%; }
    .info-wrap .box-list-wrap.column3 .box-list { float: none; width: 100%; }
    .info-wrap .box-list-wrap .box-list + .box-list { margin-left: 0; margin-top: 76px; }
    .info-wrap .box-list-wrap.column3 .box-list .box-wrap { height: 173px; padding-top: 60px !important; }

    /******** icon-list-wrap ********/
    .icon-list-wrap .list { padding-bottom: 56px; }
    .icon-list-wrap .list + .list { padding-top: 56px; }
    .icon-list-wrap .list div div.fl-l { float: none !important; margin-left: 0; }
    .icon-list-wrap .list div div:first-child { text-align: center; margin-bottom: 24px; }
    .icon-list-wrap .list div div:first-child img { width: 160px; height: 160px; }
    .icon-list-wrap .list div div + div br { display: none; }
    .icon-list-wrap .list ul li { font-size: 16px; }
}

/*md*/
@media (max-width: 768px) {

    /******** font ********/
    .font96 { font-size: 96px !important; line-height: 1.3; }
    .font72 { font-size: 72px !important; line-height: 1.3; }
    .font60 { font-size: 60px !important; line-height: 1.3; }
    .font48 { font-size: 20px !important; line-height: 1.3; }
    .font40 { font-size: 28px !important; line-height: 1.3; }
    .font36 { font-size: 24px !important; line-height: 1.4; }
    .font32 { font-size: 18px !important; line-height: 1.4; }
    .font30 { font-size: 16px !important; line-height: 1.4; }
    .font28 { font-size: 20px !important; line-height: 1.4; }
    .font24 { font-size: 16px !important; line-height: 1.4; }
    .font20 { font-size: 16px !important; line-height: 1.4; }
    .font18 { font-size: 16px !important; line-height: 1.4; }
    .font16 { font-size: 14px !important; line-height: 1.4; }
    .font14 { font-size: 12px !important; line-height: 1.4; }
    .font12 { font-size: 12px !important; line-height: 1.4; }

    .hero-wrap .title-wrap h4 { font-size: 18px; margin-top: 20px; }
    .hero-wrap .title-wrap h5 { font-size: 16px; }
    .hero-wrap.no-image .title-wrap .line { width: 50px; left: 0; }
    .hero-wrap .sub-title { font-size: 40px; }

    .btn.xl { width: 100%; height: 64px; line-height: 64px; font-size: 18px; margin-bottom: 8px; }
    .btn.lg { height: 60px; line-height: 60px; }
    .btn-wrap .btn.lg { width: 100%; margin-bottom: 16px; }


    .card-item .btn-row .btn-incard { height: 40px; line-height: 40px; padding-left: 44px; padding-right: 16px; background-size: 20px 24px; background-position: left 15px center;}
    .card-item .btn-row .btn-incard:last-child { background-size: 24px 24px; }

    /******** tablest ********/
    .tablest .th { display: block; width: 100%; padding-bottom: 16px; }
    .tablest .td { display: block; width: 100%; padding-bottom: 60px; }
    /* .tablest .tr .td .select-item { max-width: 160px; } */
    .tablest .tr .td.e-mail .input-item { max-width: 45%; }
    .tablest .tr .td .select-item { max-width: 100%; margin-top: 20px; margin-left: 0; }
    .tablest .tr .td > span { width: 10%; }

    /******** tab-wrap ********/
    .tab-wrap.type2 ul li span { font-size: 16px; }
    .tab-wrap.type2 ul li.active > a > span { font-size: 16px; }

    /******** product-search-wrap ********/
    .product-search-wrap .accordion-con { padding: 30px 0 50px; }
    .product-search-wrap .view-wrap > div.mb35 { margin-bottom: 22px !important; }
    .product-search-wrap .view-wrap > div > div { float: none !important; }
    .product-search-wrap .view-wrap .tab-wrap.type3 { margin-top: 20px; }
    .product-search-wrap .view-wrap .tab-wrap.type3 ul li {  margin-bottom: 8px; }
    /* .product-search-wrap .view-wrap .table-wrap { height: 285px; } */
    .product-search-wrap .view-wrap .table-wrap .tab-contents { font-size: 13px; }
    .product-search-wrap .view-wrap .table-wrap .tab-contents tbody tr:first-child td { padding: 20px 0 20px 25px; }
    .product-search-wrap .view-wrap .table-wrap .tab-contents thead th { padding: 18px 10px 18px 25px; }
    .product-search-wrap .view-wrap .table-wrap .tab-contents tbody td { padding: 0 0 20px 25px; }

    .product-search-wrap .find-wrap .btn-wrap, .product-search-wrap .find-wrap .select-item.type1 { margin-bottom: 10px !important; }
    .product-search-wrap .find-wrap .btn-wrap button { width: calc(50% - 6px); height: 54px; padding: 18px  5px 19px 47px; text-align: left; background-position: left 15px center; background-size: 24px; }
    .product-search-wrap .find-wrap .btn-wrap button + button { margin-left: 0; }
    .product-search-wrap .find-wrap .btn-wrap button + button + button { margin-top: 6px; }
    .product-search-wrap .find-wrap .btn-wrap button:nth-child(even) { margin-left: 6px; }

    .product-search-wrap .find-wrap .select-item.type1 select { font-size: 14px; padding: 14px 22px; height: 48px; line-height: 20px; }
    .product-search-wrap .find-wrap .search-wrap a { height: 54px; padding: 17px 22px; line-height: 20px; }
    .product-search-wrap .find-wrap .search-wrap a span { font-size: 14px; }
    .product-search-wrap .find-wrap .search-wrap a span + span { top: 15px; right: 25px; }

    /******** list ********/
    .list-wrap.type1 li { padding: 30px 37px 40px; }
    .list-wrap.type1 li a { width: 77%; bottom: 40px; left: 37px; }

    /******** info-wrap ********/
    .info-wrap .tit p.font40 { font-size: 24px !important; }
    .info-wrap .data-list-wrap h1 { font-size: 18px; }
    .info-wrap .list-wrap li { width: 100% !important; }
    .info-wrap .list-wrap li + li { margin-left: 0; margin-top: 24px !important; }
}

/*sm*/
@media (max-width: 560px) {
    .hero-wrap .hero-mark-wrap { bottom: 20px; right: 20px; width: 80px; }
}

@media (max-width: 414px) {
    .product-search-wrap .find-wrap .btn-wrap button.lh2 { padding: 0; padding-left: 45px; }

    /******** hero-wrap ********/
    .hero-wrap .sub-title { font-size: 28px; }

    /******** tab-wrap ********/
    .tab-wrap.type2 ul li { background-size: 80%; }

    /******** list ********/
    .list-wrap.type1 li a span:first-child { margin-right: 22px !important; }
}


/*xs*/
@media (max-width: 375px) {
    /******** tab-wrap ********/
    .tab-wrap.type1 li a { font-size: 14px; }

    /******** info-wrap ********/
    .info-wrap .box-tit.red { font-size: 22px !important; height: 105px; }
}

@media all and (max-width:320px) {
    .hero-wrap .title-wrap h4 { font-size: 16px; margin-top: 10px; }
}


/*hover*/
@media all and (min-width:1024px) {
    /* header */
    #headerWrap.gnb-open .gnb-menu .depth-1 li .depth-1-menu:hover { color: #98A6C9; }
    #headerWrap.gnb-open .gnb-menu .depth-2 > li > a:hover { color: #98A6C9; }
    #headerWrap .dropdown-menu a:hover { background-color: #e5e7eb; color: #0f172a; }
    #headerWrap.gnb-open .dropdown-menu a:hover { background-color: #1E293B; color: #FFFFFF; }
    /* #headerWrap .dropdown-lang-wrap.active .dropdown-menu a:hover { background-color: #1E293B; color: #FFFFFF; } */

    /* btn */
    .btn.blue:not(.none-hover):hover { background-color: #00206E; border: 1px solid #00206E; color: #FFFFFF; }
    .btn.red:not(.none-hover):hover { background-color: #DC2626; border: 1px solid #DC2626; color: #FFFFFF; }
    .btn.white:not(.none-hover):hover { background-color: #00206E; border: 1px solid #00206E; color: #FFFFFF; }
    #headerWrap.main .btn.white:not(.none-hover):hover { background-color: #00206E; border: 1px solid #00206E; color: #FFFFFF; }

    /* accordion */
    .accordion-item:hover { border-top: 1px solid #1E293B; border-bottom: 1px solid #1E293B; }
    .accordion-item:hover .icon-line [class*="line"] { background-color: #00206E; }

    #footerWrap .footer-wrap .footer-txt > .select > ul > li > a:hover { background-color: #444444; }

    /******** product-search-wrap ********/
    .product-search-wrap .find-wrap .btn-wrap button:hover { border: 1px solid #334155; }
}



/* 모바일-가로모드 */
@media (max-width: 915px) and (orientation: landscape) {
    .hero-wrap.has-image.long .title-wrap { height: 75vh; }
    .hero-wrap .title-wrap h4 { margin-top: 10px; font-size: 18px; }
    .hero-wrap .sub-title { font-size: 28px; }
}


/* ie에서만 사용 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .color-gradient { color: #00206E; background: none; }
}