@charset "utf-8";

@font-face {font-weight: 100; font-family: 'Pretendard'; font-style: normal; src: url(../font/Pretendard-Thin.woff) format('woff'), url(../font/Pretendard-Thin.woff2) format('woff2');}
@font-face {font-weight: 200; font-family: 'Pretendard'; font-style: normal; src: url(../font/Pretendard-ExtraLight.woff) format('woff'), url(../font/Pretendard-ExtraLight.woff2) format('woff2');}
@font-face {font-weight: 300; font-family: 'Pretendard'; font-style: normal; src: url(../font/Pretendard-Light.woff) format('woff'), url(../font/Pretendard-Light.woff2) format('woff2');}
@font-face {font-weight: 400; font-family: 'Pretendard'; font-style: normal; src: url(../font/Pretendard-Regular.woff) format('woff'), url(../font/Pretendard-Regular.woff2) format('woff2');}
@font-face {font-weight: 500; font-family: 'Pretendard'; font-style: normal; src: url(../font/Pretendard-Medium.woff) format('woff'), url(../font/Pretendard-Medium.woff2) format('woff2');}
@font-face {font-weight: 600; font-family: 'Pretendard'; font-style: normal; src: url(../font/Pretendard-SemiBold.woff) format('woff'), url(../font/Pretendard-SemiBold.woff2) format('woff2');}
@font-face {font-weight: 700; font-family: 'Pretendard'; font-style: normal; src: url(../font/Pretendard-Bold.woff) format('woff'), url(../font/Pretendard-Bold.woff2) format('woff2');}
@font-face {font-weight: 800; font-family: 'Pretendard'; font-style: normal; src: url(../font/Pretendard-ExtraBold.woff) format('woff'), url(../font/Pretendard-ExtraBold.woff2) format('woff2');}
@font-face {font-weight: 900; font-family: 'Pretendard'; font-style: normal; src: url(../font/Pretendard-Black.woff) format('woff'), url(../font/Pretendard-Black.woff2) format('woff2');}

body {background:none!important}
#wrap {position: relative; width: 100%; font-size: 14px; letter-spacing: 0; word-break: keep-all; overflow-x: hidden;}
#wrap section .tit_box {display:flex; align-items: flex-end; margin:60px 0 25px;}
#wrap section h3  { font-size: 25px; font-weight: 800; min-height: 25px; line-height: 25px; color: #000; letter-spacing: -0.8px; text-transform: uppercase;}

/* header renewal */
header {display: flex; position: relative; z-index: 50; width: 100%; border-bottom: 1px solid #888; background: #fff; font-family: 'Pretendard'; color: #222; align-items: center; z-index:999}
header .inner {display: flex; align-items: center; justify-content: space-between; width:1200px; margin:0 auto; }
header h1 {position: static; z-index: auto; }

/* navi gnb 메뉴 */
.navi .gnb_layout,
.navi .gnb_layout ul {display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; }
.navi .gnb_layout {height: 90px; justify-content: center;}
.navi .gnb_layout li.depth::before {content: ''; display: block; visibility: hidden; opacity: 0; position: absolute; top: 100%; right: 0; left: 0; z-index: 1; width: 100%; height: 0; background-color: #fff;
    -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.navi .gnb_layout.open::before,
.navi .gnb_layout li.depth:hover::before,
.navi .gnb_layout li.depth:focus::before {visibility:visible; opacity: 1; height: 70px; border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);}
.navi .gnb_layout > li > a {height: 90px; padding: 0 35px; font-size: 19px; line-height: 90px;}
.navi .gnb_layout > li:last-child > a {padding-right:10px;}
.navi > .gnb_layout ul {visibility: hidden; opacity: 0; position: absolute; top: 100%; z-index:10 ; width: -webkit-max-content; width: -moz-max-content; width: max-content; padding: 24px 22px;}
.navi > .gnb_layout li:nth-child(3) ul{transform: translateX(-30%);}
.navi > .gnb_layout li:nth-child(4) ul{transform: translateX(-40%);}
.navi > .gnb_layout li:nth-child(5) ul{transform: translateX(-77%);}
.navi .gnb_layout > li:hover > ul,
.navi .gnb_layout > li:focus > ul {visibility:visible; opacity:1; -webkit-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s;}
.navi .gnb_layout ul a {padding: 10px 15px;}
.navi > .gnb_layout ul > li + li {margin-left: 10px;}

/* 메뉴 공통 호버 설정 */
.navi,
.gnb_layout > li > a::after,
.gnb_layout > li > ul { -webkit-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;}
.gnb_layout > li > a {display: block; position: relative; font-weight: 600; font-family: 'Pretendard';}
.gnb_layout > li > a:hover,
.gnb_layout > li:hover > a,
.gnb_layout > li > a:focus,
.gnb_layout > li.current > a {color: #0061ce; transition: all 0.2s ease-in-out;}
.gnb_layout > li > a:hover::after,
.gnb_layout > li:hover > a::after,
.gnb_layout > li > a:focus::after,
.gnb_layout > li.current > a::after {content:''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: #0061ce;}
.gnb_layout > li > a:hover::after,
.gnb_layout > li > a::after {-moz-transform: scaleX(0); -webkit-transform: scaleX(0); -o-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); transform-origin: bottom center;}
.gnb_layout > li:hover > a::after,
.gnb_layout > li:focus > a::after {-moz-transform: scaleX(1);-webkit-transform: scaleX(1); -o-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); transform-origin: bottom center;}
.gnb_layout ul > li a {font-size: 15px; font-weight: 500; font-family: 'Pretendard';}
.gnb_layout > li > ul > li > a:hover,
.gnb_layout > li > ul > li > a:focus,
.gnb_layout > li > ul > li.current > a {color: #0060ce; transition: all 0.2s ease-in-out;}

#wrap #topbar {width:100%; background:#000; height:35px;}
#wrap #topbar div.toparea{ position: relative; width: 1200px; display: flex; float:none; top:0; margin: 0 auto; flex-direction: row; align-items: center; height: 35px; justify-content: flex-end;}
#wrap #topbar ul.userset{  display: flex; flex-direction: row; align-items: center; height: 35px; justify-content: flex-end;}
#wrap #topbar ul.userset li a {height: auto; line-height: 1; padding: 0 12px; border-right: 1px solid #A0A3A8; font-size: 13px; font-weight:400;}
#wrap #topbar ul.userset li:first-child a {color:#f858c5;}
#wrap #topbar ul.userset li:last-child a {border-right:0;}
#wrap #topbar ul a {color: #ffffff; text-decoration: none;}

#wrap #topbar .topsch {position:relative;}
#wrap #topbar .topsch .tsch_input {width: 200px; margin: 5px; padding: 4px 7px; font-size: 14px; background-color:#565656; border:0; border-radius:3px; color:#fff; font-weight:100}
#wrap #topbar .topsch .tsch_btn {position: absolute; width:13px; height:14px; right:12px; top:10px; background:url(../images/pt/common/ico_tsch.png)no-repeat center center; font-size: 0;}

#wrap #contents{float:none!important; position:relative; width: 1200px; margin: 0 auto 95px; overflow:hidden; z-index:99;}

/* footer */
footer {display :flex; flex-direction:column; width:1200px; margin:30px auto 10px; font-family: 'Pretendard'; }
footer .finfo {display: flex; flex-direction: row; margin-bottom:20px;}
footer .finfo h2 {width:200px;}
footer .finfo h2 a {width:200px; height:100px; }
footer .finfo ul {display: flex; flex-direction: column; margin-left:20px;}
footer .finfo ul li span {margin-right:7px;}
footer .flink {display: flex; flex-direction: row; justify-content: space-between; width:100%; border-top:1px solid #d8d8d8; padding:15px 0;}
footer .flink ul {display: flex; flex-direction: row; flex: 1; }
footer .flink ul li {text-align: left; position: relative; font-size:14px; font-weight:500;}
footer .flink ul li + li::before {content: ""; display:inline-block; width: 1px; height: 13px; margin:0 15px; vertical-align: middle; background-color: #ddd;}
footer .flink ul li .clr_red {color:#d20f8c;}
footer .flink p::before {content:""; display:inline-block; width:14px; height:14px; margin-right:5px; /*background:url(../images/ico_noti.png)*/}

/* sub_left.css #left의 강제 너비 지정 */
#left {width:980px!important;}

#wrap #topbar .toparea .top-info {
	position: absolute;
	left: 0;
	color: #ff0000;
}