@charset "utf-8";

@font-face {
    font-family:'NotoSans';
    font-style:normal;
    font-weight:100;
    src:
        url(../_Fonts/NotoSans-Thin.woff2) format('woff2'), 
        url(../_Fonts/NotoSans-Thin.woff) format('woff'),
        url(../_Fonts/NotoSans-Thin.otf) format('opentype'),
        url(../_Fonts/NotoSans-Thin.eot) format('embedded-opentype');
}

@font-face {
    font-family:'NotoSans';
    font-style:normal;
    font-weight:200;
    src:
        url(../_Fonts/NotoSans-Light.woff2) format('woff2'), 
        url(../_Fonts/NotoSans-Light.woff) format('woff'),
        url(../_Fonts/NotoSans-Light.otf) format('opentype'),
        url(../_Fonts/NotoSans-Light.eot) format('embedded-opentype');
}

@font-face {
    font-family:'NotoSans';
    font-style:normal;
    font-weight:400;
    src:
        url(../_Fonts/NotoSans-Regular.woff2) format('woff2'), 
        url(../_Fonts/NotoSans-Regular.woff) format('woff'),
        url(../_Fonts/NotoSans-Regular.otf) format('opentype'),
        url(../_Fonts/NotoSans-Regular.eot) format('embedded-opentype');
}

@font-face {
    font-family:'NotoSans';
    font-style:normal;
    font-weight:500;
    src:
        url(../_Fonts/NotoSans-Medium.woff2) format('woff2'), 
        url(../_Fonts/NotoSans-Medium.woff) format('woff'),
        url(../_Fonts/NotoSans-Medium.otf) format('opentype'),
        url(../_Fonts/NotoSans-Medium.eot) format('embedded-opentype');
}
@font-face {
    font-family:'NotoSans';
    font-style:normal;
    font-weight:700;
    src:
        url(../_Fonts/NotoSans-Bold.woff2) format('woff2'), 
        url(../_Fonts/NotoSans-Bold.woff) format('woff'),
        url(../_Fonts/NotoSans-Bold.otf) format('opentype'),
        url(../_Fonts/NotoSans-Bold.eot) format('embedded-opentype');
}

@font-face {
    font-family:'NotoSans';
    font-style:normal;
    font-weight:900;
    src:
        url(../_Fonts/NotoSans-Black.woff2) format('woff2'), 
        url(../_Fonts/NotoSans-Black.woff) format('woff'),
        url(../_Fonts/NotoSans-Black.otf) format('opentype'),
        url(../_Fonts/NotoSans-Black.eot) format('embedded-opentype');
}
@font-face { font-family: NanumSquare; font-weight: 400; src: url(../_Fonts/NanumSquareR.woff2) }
@font-face { font-family: NanumSquare; font-weight: 700; src: url(../_Fonts/NanumSquareB.woff2) }
@font-face { font-family: NanumSquare; font-weight: 800; src: url(../_Fonts/NanumSquareEB.woff2) }
:root { font-family: NanumSquare; line-height: 1.2; font-weight: 400;}

/* HTML ---------------------------------------------------------*/
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; margin: 0; padding: 0; border: 0; }
* { margin:0;padding:0; }
html, body { height: 100%;}
body { height: 100%; font-family: 'NotoSans', 'Malgun Gothic', sans-serif; list-style: none; outline: 0; }
hr { display:none; }
img,fieldset,button { border:none; vertical-align: middle; }
ul, ol { list-style:none; }
legend,caption { position:relative;width:0;height:0;font-size:0;line-height:0;overflow:hidden;text-indent:-9999px; }
table { border-collapse:collapse;width:100%; }
table td { word-break:break-all;  }
table th{ font-weight:400; white-space:nowrap; }
td.cont { height:150px; vertical-align:top; }
strong { font-weight:500}
xmp { display:block; }

/* Global Elements
---------------------------------------------------------*/
.blind, caption { visibility: hidden; overflow: hidden; position: absolute; top: 0; left: 0; width: 0; height: 0; font-size: 0; line-height: 0 }
.clear { clear: both; overflow: hidden; }
.clear:after { content:"";display:block;height:0;clear:both;visibility:hidden; }
.input5 {width: 5%;box-sizing: border-box}
.input7 {width: 7%;box-sizing: border-box}
.input10 {width: 10%;box-sizing: border-box}
.input20 {width:20%;box-sizing:border-box}
.input25 {width:25%;box-sizing:border-box}
.input30 {width:30%;box-sizing:border-box}
.input35 {width:35%;box-sizing: border-box}
.input36 {width:36%;box-sizing:border-box}
.input50 {width:50%;box-sizing:border-box}
.input54 {width: 54%;box-sizing: border-box}
.input60 {width:60%;box-sizing:border-box}
.input70 {width: 70%;box-sizing: border-box}
.input75 {width:75%;box-sizing:border-box}
.input80 {width:80%;box-sizing:border-box}
.input85 {width: 85%;box-sizing: border-box}
.input87 {width: 87%;box-sizing: border-box}
.input90 {width:90%;box-sizing:border-box}
.input100 {width:100%;box-sizing:border-box}

.inputCode39 {width:39px;box-sizing:border-box}
.inputNum20 {width:20%;box-sizing:border-box;text-align:right;}
.inputNum25 {width:25%;box-sizing:border-box;text-align:right;}
.inputNum30 {width:30%;box-sizing:border-box;text-align:right;}
.inputNum50 {width:50%;box-sizing:border-box;text-align:right;}
.inputNum60 {width:60%;box-sizing:border-box;text-align:right;}
.inputNum65 {width:65%;box-sizing:border-box;text-align:right;}
.inputNum70 {width: 70%;box-sizing: border-box;text-align: right;}
.inputNum75 {width:75%;box-sizing:border-box;text-align:right;}
.inputNum90 {width:90%;box-sizing:border-box;text-align:right;}
.inputNum100 {width:100%;box-sizing:border-box;text-align:right;}

.hidden { position:absolute;width:0;height:0;font-size:0;line-height:0;overflow:hidden;visibility:hidden; }
.displaynone { display:none; }
.displayblock { display:block !important }
.inputblock { display:block;width:100%;box-sizing:border-box; }
.inputhalf { box-sizing:border-box; }
/*.inputhalf { width:48.5%;box-sizing:border-box; }*/

.overflowH {overflow:hidden}

.textLeft { text-align:left !important; }
.textCenter { text-align:center !important; }
.textRight { text-align:right !important; }
.floatLeft { float:left !important; }
.floatRight { float:right !important; }
.leftArea { float:left;width:49%; }
.rightArea { float:right;width:49%; }
.leftArea30 { float:left;width:29%; }
.rightArea70 { float:right;width:69%; }
.floatTrio { float:left;width:33%;padding-left:1%}
.floatTrio.first{ width:32%;padding-left:0}
.fullArea{ width:100%}
.mrgnleft20 { margin-left:20px !important; }
.mrgntop5 { margin-top:5px !important; }
.mrgntop10 { margin-top:10px !important; }
.mrgntop20 { margin-top:20px !important; }
.mrgntop100 { margin-top:100px !important; }
.mrgnbttm15 { margin-bottom:15px !important; }
.mrgnbttm20 { margin-bottom:20px !important; }
.mrgnbttm40 { margin-bottom:40px !important; }
.mrgnbttm4 { margin-bottom:4px !important; }
.mrgnbttm5 { margin-bottom:5px !important; }
.mrgnbttm0 { margin-bottom:0 !important; }
.imgArea { text-align:center;margin-bottom:10px !important; }
.basic { min-width:134px !important; }
.pl_15{padding-left:15px;}
.pl_20{padding-left:20px !important; }
.pl_25{padding-left:25px}
.pr_15{padding-right:15px !important; }
.pr_50{padding-right:50px !important; }
.pt_20 { padding-top:20px !important; }
.pbttm0 { padding-bottom:0 !important; }

.line_h21{line-height:21px !important; }

.col10{width:10%;}
.col17{width:18%;}
.col20{width:20%;}
.col293{width:293px;}
.col24{width:24%;}
.col74{width:72%;}
.col79{width:79%;}
.col30{width:30%;}
.col33{width:32.6%;}
.col69{width:69%;}
.col60{width:60%;}
.col100{width:100% !important;}

.border0{border:0 !important; }


/* 전체 */
#wrapper { position: relative; min-width: 1200px; height: auto; margin: 0; padding: 0; font-size: 13px; text-align: left;}
#wrapper_main { position: relative; min-width: 1200px; height: 100%; margin: 0; padding: 0; font-size: 13px; text-align: left; background:#f3f3f4}

#wrapper.hidden { overflow: hidden; }
.header-pc { position:fixed; left:0; right:0; min-width: 1200px; display: block;  }
.header-area { width: 100%; height: 45px; padding: 0; border: 0px solid red; }
.header-area:after { content: ""; clear: both; display: block; }
.header-area h1 { float: left; margin-top: 5px; border: 0px solid red; }
.header-area h1 a { width: 125px; display: block; padding-left: 15px; }
/* top menu */
.header-pc { display: block; background: #fff; z-index: 99; }
.header-pc .header-area { width: 100%; min-width: 1200px; min-height: 80px; border-bottom: 1px solid #2f4050; }
.header-area:after { content: ""; clear: both; display: block; }
.header-pc .header-area h1 { float: left; margin-top: 35px; border: 0px solid red; }
.header-pc .header-area h1 a { display: block; }
.header-pc .header-area h1 a img { display: block; }

.gnb {display: block; position: absolute; top:0; right:0; float: right; height: 36px; background: #fff; border: 0px solid red; z-index: 11;}
.gnb dl {float: left; /*width: 246px;*/ height: 36px;}
.gnb dl dt {float: left; width: 36px; height: 36px; background:url(../_Images/common/gnb_icon.gif) center center no-repeat;}
.gnb dl dt img {display: block;}
.gnb dl dd.dd01 {float: left; width: 120px; height: 36px; font-size:13px; color:#666; }
.gnb dl dd.dd02 {float: left; width: 36px; height: 36px; font-size:13px; padding-top:7px; color:#666;}
.gnb dl dd .language-info {	line-height: 36px; font-size:13px; color:#666; background:url(../_Images/common/dd_bg.gif) 93px 18px no-repeat;	}
.gnb dl dd .language-info.on { color:#222; }
.gnb dl dd .language-info a { display: block; padding-left: 13px; }
.gnb dl dd .language-list {	display: none; position: absolute; top: 36px; right: 30px; width: 175px; background: #fafafa; border-top: 1px solid #d1d1d1;}
.gnb dl dd .language-list li { display: block; border-right: 1px solid #d1d1d1; border-left: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; }
.gnb dl dd .language-list li a { display: block; width: 175px; height: 50px; line-height: 50px; text-align:center; color:#474747; }
.gnb dl dd .language-list li a:hover { color:#2d87e2; }
.gnb dl dd .language-list .li01 a { background:url(../_Images/common/gnbdd01.gif) 30px center no-repeat;}
.gnb dl dd .language-list .li02 a { background:url(../_Images/common/gnbdd02.gif) 30px center no-repeat;}
.gnb dl dd .language-list li a img { display: inline-block; vertical-align: middle; }
/* my menu */

.userBox { position: absolute; right: 20px; top: 0px;z-index: 11;  }

.user_info { position: relative; float: left; margin-top:6px;}
.user_info a { display: block; padding-left: 0px; }
.user_info .name { float: left; margin: 2px 10px 10px 5px }
.user_info .round_wrap { position: relative; float: left; height: 26px; width: 26px }
.user_info img.myphoto { width: 100%; height: auto }

.potal { position: relative; float: left; }
.potal a { display: block; padding-left: 0px; }
.potal .round_wrap { position: relative; float: left; height: 26px; width: 26px }

.mymenu_info { position: relative; float: left;  margin-left:10px; margin-right:10px; }
.mymenu_info a { display: block; padding-left: 0px; }
.mymenu_info .name { float: left; margin: 2px 10px 10px 5px }
.mymenu_info .round_wrap { position: relative; float: left; height: 23px; width: 23px }
.mymenu_info img.myphoto { width: 100%; height: auto }

.user-list { display: none; position: absolute; top: 36px; right: 150px; width: 160px; background: #fafafa; border-top: 1px solid #d1d1d1; }
.user-list li { display: block; border-right: 1px solid #d1d1d1; border-left: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; }
.user-list li a { display: block; width: 160px; height: 40px; line-height: 40px; text-align: center; color: #474747; }
.user-list li a:hover { color: #2d87e2; }
.user-list .li01 a { background: url(../_Images/common/gnbdd01.gif) 30px center no-repeat; }
.user-list .li02 a { background: url(../_Images/common/gnbdd02.gif) 30px center no-repeat; }
.user-list li a img { display: inline-block; vertical-align: middle; }

.mymenu-list { display: none; position: absolute; top: 36px; right: 0px; width: 150px; background: #fafafa; border-top: 1px solid #d1d1d1; }
.mymenu-list li { display: block; padding:10px 17px; background: url(../_Images/common/ico_mymenu.gif) 10px center no-repeat; border-right: 1px solid #d1d1d1; border-left: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; }
.mymenu-list li a { display: block; width: 150px; line-height: 20px; text-align:left; color: #474747; }
.mymenu-list li a:hover { color: #2d87e2; }
.mymenu-list .li01 a { background: url(../_Images/common/gnbdd01.gif) 30px center no-repeat; }
.mymenu-list .li02 a { background: url(../_Images/common/gnbdd02.gif) 30px center no-repeat; }
.mymenu-list li a img { display: inline-block; vertical-align: middle; }

/* top menu */
/* .top-menu { display: block; float: left; width: 1050px; margin-top: 26px; border: 0px solid red; } */
.top-menu { display: block; float: left; margin-top: 26px; border: 0px solid red; }
.top-menu { border: 0px solid red; }
.top-menu ul { margin: 0; padding: 0; border: 0px solid red; }
.top-menu ul:after { content: ""; clear: both; display: block; }
.top-menu ul li { float: left; width: 165px; text-align: center; border: 0px solid red; }
.top-menu ul li.last { width: 14%; }
.top-menu ul li a { display: block; margin: 0 auto; color: #4d4d4d; height: 51px; line-height: 51px; font-size: 16px; font-weight: bold; }
.top-menu ul li a:hover { color: #2d87e2; border-bottom: 3px solid #2d87e2; }

/* sidemenu */
.sidemenu {position: relative; float: left;  margin-left:10px; margin-right:0px;  }
.sidemenu li {float: left;}
.sidemenu a {display: inline-block; text-align: center; padding:7px 20px; color: #fff;}
.sidemenu .support a {color: #fff; background-color: #7a859b;}
.sidemenu .sign a {color: #fff; background-color: #1966af;}/* 시간제 */

.h_fix { max-height: 500px; }

.caution {border:2px solid #f05d5d; padding : 10px; font-weight:bold;}
.infoBox01 {border:1px solid #666; padding : 5px; font-weight:bold; text-align:center;}
.infoBox02 {border:1px solid #ccc; padding : 5px; font-size:12px;}
.infoBox03 {padding: 5px;text-align: center;}

/*#Apopup1 {width: 100%; margin: 0 auto; left: -200px !important;}*/
/* 상하좌우 중앙 */
/*#Apopup1 {width: 100%; margin: 0 auto; left: 0 !important; top:0 !important; display: flex; justify-content: center; align-items: center; min-height: 100vh;}*/
#Apopup1 {width: 100%; margin: 0 auto; left: 0 !important; top:60px !important; display: flex; justify-content: center; align-items: center;}
/*#popupcontent1 {position: relative; margin: 0 auto;}*/
#popupcontent1 {position: relative; margin: 0 auto; width:auto !important; height:auto !important;}
/*
#tabs {margin: 0px 0px 10px 0px; padding: 5px 0px 0px 5px; list-style: none; overflow: hidden; border-bottom: 1px solid #d1d1d1}
#tabs li {float: left; display: block; padding: 5px 5px 5px 10px; background-color: #aaa; margin-right: 5px; }
#tabs li a {color: #fff; text-decoration: none; }
#tabs li.current {background-color: #1a73e8; }
#tabs li.current a {color: #fff; font-weight:bold; text-decoration: none;}
#tabs li a.remove {color: #f00; margin-left: 10px; }

#tabs {margin: 0px 0px 10px 0px; padding: 5px 0px 0px 5px; list-style: none;overflow: hidden;border-bottom: 1px solid #d1d1d1;}
#tabs li {float: left; display: block; padding: 5px 5px 5px 10px;background-color: #aaa; margin-right: 5px;}
#tabs li a {color: #fff;text-decoration: none;}
#tabs li.current {background-color: #1a73e8;}
#tabs li.current a {color: #fff; font-weight:bold; text-decoration: none; }
#tabs li a.remove {color: #f00; margin-left: 10px; }

*/
.btn_top {position: fixed; right: 20px; bottom: 20px; width: 48px; height: 48px; border-radius: 50%; background: #6c757d url(../_Images/common/btn_top.png) no-repeat 50% 50%; color: #fff; text-align: center; transition: all 0.5s; display:none; opacity: 0; z-index: 999; overflow: hidden;}
.btn_top::before { display: inline-block; position: relative; top: 1px; vertical-align: top; display: block; padding-top: 0.5rem;}
.btn_top.active { visibility: visible; display:block; opacity: 1; }
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}