/* ========== COMMON ========== */
.blind { overflow: hidden; position: absolute; top: 0; left: 0; text-indent: 100%; width: 1px; height: 1px; line-height: 0; font-size: 0; }

.b { font-weight: bold !important; }
.color-dark { color: #333; }
.color-point { color: #024297; }
.color-light { color: #ffffff; }

.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }

.title { font-size: 22px; }
@media (max-width:1024px) {
    .title { line-height: 20px; font-size: 17px; }
}

.pr { line-height: 23px; font-size: 15px; color: #666666; }
.pr-regular { line-height: 30px; font-size: 16px; color: #777777; }
@media (max-width:1024px) {
    .pr { line-height: 21px; font-size: 14px; }
    .pr-regular { line-height: 28px; font-size: 15px; }
}


.sub-head-title { position: relative; }
.sub-head-title h1 { margin-bottom: 60px; line-height: 30px; font-size: 33px; }
@media (max-width:1024px) {
    .sub-head-title h1 { margin-bottom: 30px; line-height: 20px; font-size: 17px; }
}

.line-box { margin-bottom: 20px; padding: 24px 10px 25px; border: 4px solid #eeeeee; }




.mo-only { display: none; }
.pc-only { }
.mo-br { display: none; }
.m-scroll { display: none; margin: auto; max-width: 360px; width: 100%; }
[data-scroll="false"] { overflow-y: hidden; }


ul.list:after { content: ''; display: table; clear: both; }
ul.list > li { float: left; }


/* ------- Grid ------- */
.grid { font-size: 0; }
.grid:after { content: ''; display: block; clear: both; }
.grid > div,
.grid > li { display: inline-block; vertical-align: top; padding: 10px; font-size: 16px; }
.grid > div > ._g,
.grid > li > ._g { height: 100%; }
/* 1 col */
.grid-24 { width: 100%; }
/* 2 col */
.grid-12 { width: 50%; }
/* 3 col */
.grid-8 { width: 33.333333%; }
/* 4 col */
.grid-6 { width: 25%; }
/* 5 col */
.grid-5 { width: 20%; }
/* 6 col */
.grid-4 { width: 16.66666%; }
@media (max-width: 1024px){
    .grid-4 { width: 33.33333%; }
}
@media (max-width: 768px){
    .grid-6 { width: 50%; }
    .grid-5 { width: 33.33333%; }
}
@media (max-width: 600px){
    .grid-8 { width: 100%; }
    .grid-5 { width: 100%; }
    .grid-4 { width: 50%; }
}

.float:after { content: ''; display: block; clear: both; }
.f-left { float: left; }
.f-right { float: right; }


.centre { display: table; width: 100%; height: 100%; }
.centre .inner { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }



/* List Style */
.ul-square { margin-left: 15px; list-style: square; }
.ul-square li { list-style: square; list-style-image: url('../img/icon/square.png'); }





/* Container */
.container {
    margin: auto;
    max-width: 1200px;
}
.sub-contents { position: relative; padding: 80px 0 120px; }

@media (max-width: 1024px){
    .container { padding-right: 15px; padding-left: 15px; }
    .sub-contents { padding: 100px 0 60px; }
}






/* Tab Menu */
.sub_tab_menu { padding: 50px 0; width: 100%; }
.sub_tab_menu .tab_menu > ul { position: relative; }
.sub_tab_menu .tab_menu > ul:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #1e458f; }
.sub_tab_menu .tab_menu > ul > li { float: left; margin-top: 6px; margin-right: 5px; background-color: #f9f9f9; border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; }
.sub_tab_menu .tab_menu > ul > li a { display: block;  width: 190px; height: 40px; line-height: 40px; text-align: center; color: #888888; font-size: 15px; letter-spacing: -0.04em; }
.sub_tab_menu .tab_menu > ul > li.active { position: relative; margin-top: 0; border-top: 2px solid #1e458f; background-color: #fff; border-left: 2px solid #1e458f; border-right: 2px solid #1e458f; }
.sub_tab_menu .tab_menu > ul > li.active a { height: 45px; color: #1e458f; }
.sub_tab_menu .tab_menu > ul > li.active:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #fff; }
.tab_contents > ul { position: relative; }
.tab_contents > ul > li { display: none; position: absolute; top: 0; left: 0; padding-top: 35px;}
.tab_contents > ul > li.active { display: block; height:auto; position:relative; }


/* Tab Menu 2 Depth */
.tab_menu_2depth > ul > li { float: left; width: 50%; }
.tab_menu_2depth > ul > li > a { display: block; padding-left: 20px; height: 45px; line-height: 45px; color: #888888; text-align: left; font-size: 14px; font-weight: 400; background: url('../img/tabmenu/sub_tap.png') no-repeat right 15px center; border: 1px solid #e5e5e5; }
.tab_menu_2depth > ul > li:nth-child(2) > a { border-left: none; }
.tab_menu_2depth > ul > li:nth-child(3) > a { border-left: none; }
.tab_menu_2depth > ul > li:last-child > a { border-left: none; }
.tab_menu_2depth > ul > li.active > a { color: #fff; background: #1e458f url('../img/tabmenu/sub_tap_on.png') no-repeat right 15px center; border: none; }
.tab_contents_2depth > ul > li { display: none; text-align: left; }
.tab_contents_2depth > ul > li.active { display: block; }




/* Button Style */
.btn-point { color: #fff ; background: #024297; }



.check { display: inline-block; vertical-align: top; position: relative; }
.check:last-child { margin-right: 0; }
.check input { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; }
.check i { display: inline-block; vertical-align: -6px; margin-right: 5px; width: 20px; height: 20px; background: url('../img/icon/check.png') no-repeat left center; }
.check input:checked ~ i { background: url('../img/icon/check-on.png') no-repeat left center; }
.check span { display: inline-block; vertical-align: middle; }
.radio { display: inline-block; vertical-align: top; position: relative; }
.radio:last-child { margin-right: 0; }
.radio input { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; }
.radio i { display: inline-block; vertical-align: middle; margin-right: 10px; width: 24px; height: 24px; background: url('../img/icon/radio.png') no-repeat center; }
.radio input:checked ~ i { background: url('../img/icon/radio-on.png') no-repeat center; }
.radio span { display: inline-block; vertical-align: middle; }

@media (max-width:768px) {
    .check,
    .radio { font-size: 15px; }
    .check i,
    .check input:checked ~ i,
    .radio i,
    .radio input:checked ~ i { margin-right: 0; background-size: auto 16px; }
}






/* Tab Menu */
.sub_tab_menu { padding: 50px 0; width: 100%; }
.tab-list { position: relative; margin-bottom: 44px; }
.tab-list:before { content: ''; position: absolute; left: 0; bottom: 0; width: calc(100% - 3px); height: 2px; background-color: #024297; }
.tab-list:after { content: ''; display: block; clear: both; }
.tab-list > li { float: left; margin-left: -1px; background-color: #fff; border-top: 1px solid #d6d6d6; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; }
.tab-list > li:first-child { margin-left: 0; }
.tab-list > li a,
.tab-list > li button { display: block;  width: 100%; height: 55px; text-align: center; color: #777777; font-size: 16px; letter-spacing: -0.05em; }
.tab-list > li.active { position: relative; margin-top: 0; border-top: 2px solid #024297; background-color: #fff; border-left: 2px solid #024297; border-right: 2px solid #024297; }
.tab-list > li.active a,
.tab-list > li.active button { color: #024297; font-weight: 500; }
.tab-list > li.active:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #fff; }
.tab2 > li { width: 50%; }
.tab3 > li { width: 33.33333%; }
.tab4 > li { width: 25%; }
.tab5 > li { width: 20%; }
.tab6 > li { width: 16.66666%; }
.tab7 > li { width: 14.285%; }
.tab10 > li { width: 10%; }
.tab2:before { width: calc(100% - 1px); }
.tab3:before { width: calc(100% - 2px); }
.tab4:before { width: calc(100% - 3px); }
.tab5:before { width: calc(100% - 4px); }
.tab6:before { width: calc(100% - 5px); }
.tab7:before { width: calc(100% - 6px); }
.tab10:before { width: calc(100% - 9px); }
.tab-contents { position: relative; }
.tab-contents > li { display: none; position: absolute; top: 0; left: 0; }
.tab-contents > li.active { display: block; height:auto; position:relative; }

@media (max-width:1024px) {
    .tab-list:before { content: none; }
    .tab-list { margin-bottom: 35px; }
    .tab-list > li { margin-bottom: -1px; width: 50%; height: 45px; border-bottom: 1px solid #d6d6d6; }
    .tab-list > li:first-child { margin-left: -1px; }
    .tab-list > li.active:before { background: #333; }
    .tab-list > li a, .tab-list > li button { height: 45px; line-height: 45px; font-size: 13px; }
}




/* ======= Accordon Style ======= */
#menu-wrapper { overflow: hidden; max-width: 100%; }
#menu-wrapper #hamburger-menu { position: relative; width: 25px; height: 20px; margin: 15px; }
#menu-wrapper #hamburger-menu span { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; left: 0; display: block; width: 100%; border-radius: 10px; color: black; background-color: white; position: absolute;
    height: 2px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: ease-out .4s;
    transition: ease-out .4s; }
#menu-wrapper #hamburger-menu span:nth-child(1) { top: 0; }
#menu-wrapper #hamburger-menu span:nth-child(2) { top: 9px; }
#menu-wrapper #hamburger-menu span:nth-child(3) { top: 18px; }
#menu-wrapper #hamburger-menu.open span:nth-child(1) { top: 9px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
#menu-wrapper #hamburger-menu.open span:nth-child(2) { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; left: -60px; }
#menu-wrapper #hamburger-menu.open span:nth-child(3) { top: 9px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
#menu-container { overflow-y: auto; height: 100%; }
#menu-container .menu-list { padding-left: 0; display: block; width: 100%; background: white; overflow-y: auto; overflow-x: hidden; }
#menu-container .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login {
    font-size: 15px;
    text-transform: uppercase;
/*    border-top: 1px solid #dbdcd2;*/
}
#menu-container .menu-list li:first-of-type { border-top: 0; }
.accordion-toggle, .accordion-content { font-size: 16px; position: relative; letter-spacing: 1px; }
.accordion-content { display: none; }
.accordion-toggle a:before, .accordion-toggle a:after { content: ''; display: block; position: absolute; top: 50%; right: 30px; width: 15px; margin-top: -1px;
     background-color: #333; height: 1px;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: ease-out 0.35s;
    transition: ease-out 0.35s; }
.accordion-toggle a:before {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 1; z-index: 2; }
.accordion-toggle a.active:before {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    background: #fff !important; }
.accordion-toggle a.active:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    background: #333 !important; opacity: 0; }


/* 20200514 panel °ü·Ã Ãß°¡ */
.panelBody {padding:140px 0;}
.panelWrap {clear:both; overflow:hidden;}
.panelWrap:after {display:block; content:''; height:0; width:100%; font-size:0; line-height:0;}
.panelWrap .panelLeft,
.panelWrap .panelRight {display:inline-block; position:relative; height:calc(100% - 0px);}
.panelWrap .panelLeft  {float:left; width:calc(100% - 320px);}
.panelWrap .panelRight {float:right; width:300px; position:relative;}

.panelWrap .fBlue {color:#1c65c5;}
.panelWrap .fSky  {color:#22b7f1;}
.panelWrap .hideText {opacity:0; width:0; height:0; font-size:0; line-height:0; overflow:hidden;}

.panelWrap .panelLeft .imgBox {position:relative;}
.panelWrap .panelLeft .imgBox h1 {font-size:33px; line-height:1.4em; margin-bottom:40px; padding-bottom:5px; position:relative;}
.panelWrap .panelLeft .imgBox h1:after {display:block; content:''; position:absolute; bottom:0; width:72%; height:1px; background:#1c65c5;}
.panelWrap .panelLeft .imgBox .textUnit {position:absolute; z-index:1; left:0; width:49%; font-size:16px; line-height:1.5em; margin-left:30px; top:50%; transform:translateY(-50%); margin-top:-20px;}
.panelWrap .panelLeft .imgBox .textUnit strong {font-weight:600;}
.panelWrap .panelLeft .imgBox .textUnit .firstLine {display:block;}
.panelWrap .panelLeft .imgBox .imgUnit {position:relative; padding:0 10px 0 30px; display:block;}
.panelWrap .panelLeft .imgBox .imgUnit img {max-width:100%;}

.panelWrap .panelRight .noticeBox,
.panelWrap .panelRight .bannerBox {width:100%;}
.panelWrap .panelRight .noticeBox {position:relative;}
.panelWrap .panelRight .bannerBox {position:; bottom:0;}

.panelWrap .panelRight .noticeBox h2 {border-bottom:2px solid #0062a9; padding-bottom:15px; font-size:30px;  position:relative;}
.panelWrap .panelRight .noticeBox h2 .tit {display:inline-block; position:relative;}
.panelWrap .panelRight .noticeBox h2 .more {display:inline-block; position:relative; width:30px; height:30px; border:1px solid rgba(0,0,0,0.15); background:rgba(0,0,0,0.01); border-radius:15px; position:absolute; right:0; top:50%; transform:translateY(-50%); margin-top:-5px;}
.panelWrap .panelRight .noticeBox h2 .more:before {display:block; content:''; width:100%; height:100%; background:url('../img/icon/arrow-on.png') no-repeat center center;}

.panelWrap .panelRight .noticeBox h2 .more:hover {background:rgba(0,0,0,0.05);}
.panelWrap .panelRight .noticeBox h2 .more:hover:before {animation: ani_left 0.2s ease-out 0s 1 alternate}

.panelWrap .panelRight .noticeBox ul {margin:0px 0;}
.panelWrap .panelRight .noticeBox li {padding:5px 0; border-bottom:1px solid rgba(0,0,0,0.15);}
.panelWrap .panelRight .noticeBox li .unit {display:block; padding:15px 5px; font-size:16px;}
.panelWrap .panelRight .noticeBox li .unit .cont,
.panelWrap .panelRight .noticeBox li .unit .date {display:block; overflow:hidden; padding:1px 0;}
.panelWrap .panelRight .noticeBox li .unit .cont {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
.panelWrap .panelRight .noticeBox li .unit .date {font-size:0.8em; color:#999;}
.panelWrap .panelRight .noticeBox li .unit:hover {background:rgba(0,0,0,0.05);}
.panelWrap .panelRight .noticeBox li .unit:hover .cont,
.panelWrap .panelRight .noticeBox li .unit:hover .date {animation: ani_down 0.2s ease-out 0s 1 alternate}

.panelWrap .panelRight .noticeBox li:last-of-type {border-bottom:0;}

.panelWrap .panelRight .bannerBox {padding:15px 0px; border-top:2px solid #024297;}
.panelWrap .panelRight .bannerBox .tit {display:block; text-align:center; color:#024297; font-weight:600; font-size:20px; letter-spacing:-0.08em;}
.panelWrap .panelRight .bannerBox .btn {display:block; border:0; background:#024297; color:#fff; text-align:center; margin:15px 0 0; padding:18px 0; font-size:18px;}

@keyframes ani_down {
  0%   {opacity:0; transform: translateY(-5px);}
  100% {opacity:1; transform: translateY(0px);}
}

@keyframes ani_left {
  0%   {opacity:0; transform: translateX(-5px);}
  100% {opacity:1; transform: translateX(0px);}
}

@media (max-width:1280px) {
	.panelBody {padding:100px 0px 60px 0;}	
	.panelWrap {padding:0 20px 0 0;}
    .panelWrap .panelLeft  {float:left; width:calc(100% - 320px);}
	.panelWrap .panelRight {float:right; width:300px; position:relative;}
	.panelWrap .panelLeft .imgBox .imgUnit {padding:;}

}

@media (max-width:1024px) {
	.panelWrap {padding:0 20px; overflow:initial;}
    .panelWrap .panelLeft,
	.panelWrap .panelRight {display:block; float:none; width:100%; height:auto;}
	.panelWrap .panelRight {margin-top:10px;}

	.panelWrap .panelLeft .imgBox .textUnit {margin-left:0px;}
	.panelWrap .panelLeft .imgBox h1 {font-size:17px; line-height:20px; margin-bottom:15px; padding-top:0px; position:relative; transform:translateY(0px);}

	.panelWrap .panelLeft .imgBox .textUnit {left:0; top:50%; transform:translateY(-50%);  font-size:12px; line-height:1.45em; }
	.panelWrap .panelLeft .imgBox .textUnit:first-line {display:block; font-size:1.2em;  margin-bottom:0px; line-height:1.4em;}

	.panelWrap .panelRight .noticeBox h2 {font-size:17px; padding-bottom:10px;}
	.panelWrap .panelRight .noticeBox,
	.panelWrap .panelRight .bannerBox {position:relative;}

	.panelWrap .panelRight .noticeBox ul {margin:5px 0;}
	.panelWrap .panelRight .noticeBox li .unit {padding:5px 2px; font-size:13px;}
	.panelWrap .panelRight .noticeBox li .unit .date {font-size:13px;}
	.panelWrap .panelRight .bannerBox {padding:10px 0px;}
	.panelWrap .panelRight .bannerBox .tit {font-size:18px; font-weight:600;}
}

@media (max-width:414px) {
	.panelWrap .panelLeft .imgBox h1 {font-size:16px; line-height:20px; margin-bottom:10px; transform:translateY(-15px);}
	.panelWrap .panelLeft .imgBox .textUnit {font-size:12px; line-height:1.3em; width:53%; margin-top:0px;}
	.panelWrap .panelLeft .imgBox .imgUnit {padding:10px 0px 0 20px;}
	.panelWrap .panelLeft .imgBox .imgUnit img {max-width:100%;}
	.panelWrap .panelRight .bannerBox .btn {padding:18px 0;}
}


@media (max-width:375px) {
	.panelWrap {padding:0 15px; margin:-10px 0;}
	.panelWrap .panelLeft .imgBox h1 {font-size:15px; line-height:18px; margin-bottom:0px; transform:translateY(-20px);}
	.panelWrap .panelLeft .imgBox .textUnit {font-size:11px; line-height:1.3em; width:54%; margin-top:0px; letter-spacing:-0.09;}
	.panelWrap .panelLeft .imgBox .imgUnit {padding:20px 0 10px 25px;}
	.panelWrap .panelLeft .imgBox .imgUnit img {max-width:100%;}
	.panelWrap .panelRight .bannerBox .btn {padding:16px 0;}

	.panelWrap .panelRight .noticeBox h2 .more {width:24px; height:24px;  background-size:50% 50%;}
}

@media (max-width:320px) {
	.panelWrap .panelLeft .imgBox h1 {font-size:14px; line-height:18px; margin-bottom:0px; transform:translateY(-20px);}
	.panelWrap .panelLeft .imgBox .textUnit {font-size:11px; line-height:1.2em; width:50%; margin-top:0px;}
	.panelWrap .panelLeft .imgBox .imgUnit {padding:20px 0 10px 20px;}
	.panelWrap .panelRight .bannerBox .tit {font-size:16px}
	.panelWrap .panelRight .bannerBox .btn {padding:14px 0;}
}