@charset "utf-8";
/*@import url('font.css');*/
@import url('base.css');

#skipnavi{margin: 0; padding:0;}
#skipnavi a{display:block;overflow:hidden;position:absolute;left:0;top:-10000px;}
#skipnavi a:hover,#skipnavi a:focus,#skipnavi a:active{ padding:15px 0; background:#1e2e46;color:#fff;font-size:120%;width:100%;text-align:center;top:0px;z-index:500; text-indent:0;}

#realHeader{ border-bottom: 3px solid #bd2329}
#gnbNavi{ max-width: 1200px; width: 100%; margin: 0 auto; background: #fff; letter-spacing: -0.085em; z-index: 10; position: relative}
#gnbNavi>p{position: absolute}
#gnbNavi>p>a{ display: inline-block; background: url(../images/common/ci.png) no-repeat 0 0 / 205px auto; font-size: 0; padding: 16px 0 0 215px; vertical-align: top; font-size: 1.6em; font-weight: 500; line-height: 1; color: #3967c3; min-height: 56px; letter-spacing: -0.095em; margin-top: 20px}
#gnbNavi>p>a strong{ color: #34495e}
#gnbNavi #header:after{ content: ''; display: block; clear: both}
#gnbNavi #header #gnb{ float: right; position: relative; height: 100px;}
#gnbNavi #header #gnb:after{ content: ''; display: block; clear: both}
#gnbNavi #header #gnb>li{ display: inline-block; position: relative}
#gnbNavi #header #gnb>li:before{ content: '\002F'; display: block; position: absolute; left: 0; line-height: 100px; color: #8d8d8d}
#gnbNavi #header #gnb>li:first-child:before{ content: ''}
#gnbNavi #header #gnb>li>a{ display: block; font-size: 1.65em; line-height: 100px; font-weight: 500; letter-spacing: -0.085em; color: #000; text-align: center; padding: 0 1em; color: #404040}

.realHeader_tp .moMn, .moMnClose{ display: none}
.mo_gnbNavi{ display: none}

#container{ }
#realContent{ position: relative}
#realContent .content{ max-width: 1200px; width: 100%; margin: 0 auto; padding: 50px 0; position: relative; z-index: 10}
#realContent.myPage .content_tp{ display: none}
#realContent.myPage .content{ position: relative; z-index: 1000; background: #fff; margin: 65px auto 0}
#realContent .content h1{ font-size: 2.5em; color: #fff; font-weight: 600; margin-bottom: 15px; text-shadow: 1px 3px 0 #000;}
#realContent .content h2{ font-size: 1.6em; color: #323232; font-weight: 500; padding-left: 30px; position: relative; margin: 30px 0 5px}
#realContent .content h2:before{ content: ''; display: block; position: absolute; left: 0; top: 23%; width: 10px; height: 10px; border: 8px solid transparent; border-radius: 50%; background-image: linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0)), linear-gradient(10deg, rgba(32,208,249,1) 0%,rgba(5,70,204,1) 100%); background-origin: border-box; background-clip: content-box, border-box; box-shadow: 2px 2000px 1px #fff inset;}
#realContent .content h3{ font-size: 1.3em; color: #323232; font-weight: 500; margin: 0 0 10px; padding-left: 30px; position: relative; }
#realContent .content h3:before{ content: ''; display: block; position: absolute; left: 8px; top: 10px; width: 12px; height: 12px; border:2px solid #3579cf; border-radius: 50%; background-image: linear-gradient(rgba(255, 255, 255, 0),rgba(255, 255, 255, 0)), linear-gradient(10deg, rgba(0,209,197,1) 0%,rgba(5,70,204,1) 100%); background-origin: border-box; background-clip: content-box, border-box;}
#realContent .content h2>span, #realContent .content h3>span{ font-size: 20px; font-weight: 300; margin-left: 10px}

.inputData{ border: 1px solid #d3d3d3; text-indent: 10px;}
.inputData:-ms-input-placeholder{ color: #969696; font-size: inherit; font-weight: 300;}
.inputData::-webkit-input-placeholder{ color: #969696; font-size: inherit; font-weight: 300;}
.inputData:-moz-input-placeholder{ color: #969696; font-size: inherit; font-weight: 300;}
.inputData::-moz-input-placeholder{ color: #969696; font-size: inherit; font-weight: 300;}
select.inputData, .searchBox ul li select.inputData{ background: transparent url(../images/common/selBox_arr.png) no-repeat 100% 50%; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
select.inputData::-ms-expand, .searchBox ul li select.inputData::-ms-expand{ display: none}

.afterClear h3, .afterClear div{ margin: 0 0 5px !important}

.fileUpload{ position: relative; margin-bottom: 5px; display: inline-block; min-width: 30%}
.fileUpload label{ position:relative; cursor:pointer; display:inline-block; vertical-align:middle; overflow:hidden; width:100%; height:45px; color:#fff; text-align:center; line-height:45px;}
.fileUpload label span{ position: absolute; right: 0; top: 0; background: #34495e; color: #fff; border: 1px solid #34495e; width: 100px; height: 45px; line-height: 45px;  padding: 0 15px; font-weight: 300; border-radius: 0 3px 3px 0; box-sizing: border-box}
.fileUpload label input{ display: block; position:absolute; width:calc(100% - 100px); height:100%; overflow:hidden; border: 0; background: transparent; left: 0; top: 0; opacity: 0}
.fileUpload input[type=text]{ position: absolute; left: 0; top: 0; vertical-align:middle; display: block; width: calc(100% - 100px); height:45px; line-height:45px; border:1px solid #d3d3d3; border-right: 0; box-sizing: border-box}

.content_tp{ background: url(../images/common/visual.jpg) no-repeat 50% 0; position: absolute; width: 100%; height: 200px}
.content_tp>.slogan{ max-width: 1200px; width: 100%; margin: 40px auto 0; text-align: right;}
.content_tp>.slogan strong{ display: block; font-size: 1.7em; font-weight: 500; color: #fff; letter-spacing: -0.045em; line-height: 1.3}
.content_tp>.slogan strong span{ display: block; font-size: 0.7em; font-weight: 400; margin-right: 10px}

/* 아이콘 참조박스 */
.referBox{ background: #fff; position: relative; border-radius: 15px 15px 0 0; border-top: 6px solid #485671; padding: 20px 65px 10px 75px; position: relative;}
.referBox:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat 0 -25px; width: 34px; height: 23px; position: absolute; left: 30px; top: 20px}
.referBox.myPage{ padding-left: 30px}
.referBox.myPage:before{ width: 0;}
.referBox.myPage:after{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat -289px -563px; width: 110px; height: 101px; position: absolute; right: 220px; bottom: 10px}
.referBox.myPage>div{ padding: 10px 0 10px 170px; border-bottom: 2px solid #d9d9d9; min-height: 130px; margin: 0; margin-right: 200px}
.referBox strong{ display: block; font-size: 1.7em; font-weight: 500}
.referBox p{ font-size: 1.2em; font-weight: 300; padding: 15px 250px 20px 0; border-bottom: 2px solid #d9d9d9}
.referBox.bgBlue{ background: #cef2ff; color: #000}

.referBox.icon>i{  position: absolute; right: 45px; bottom: 0;  height: 170px; z-index: 10}
.referBox.icon>i{ background: url(../images/common/icon.png) no-repeat 0 -65px; width: 218px;}
.referBox.icon.icon2>i{ background-position: -235px -65px; width: 246px}
.referBox.icon.icon3>i{ background-position: 0 -244px; width: 235px}
.referBox.icon.icon4>i{ background-position: -235px -244px; width: 240px; height: 184px}
.referBox.icon.icon5>i{ background-position:  0 -428px; width: 270px; height: 183px}

.referBox.bgBlue .point_txt{ color: #3a5f85; margin-bottom: 20px}
.referBox.caution{ border-top: 1px solid #3967c3; padding-top: 55px}
.referBox.icon.caution>i{ top: 55px}
.referBox.caution>span{ display: block; position: absolute; background: #3967c3; line-height: 45px; padding: 0 30px; color: #fff; top: 0;left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.referBox.caution>ul{ margin: 0}
.referBox.caution>ul>li{ margin-bottom: 5px}
.referBox.caution ul ul{ margin: 5px 0}
.referBox.caution li li{ color: #686868; margin-bottom: 5px; position: relative; padding-left: 12px}
.referBox.caution li li:before{ content: '\25AA'; display: block; position: absolute; left: 0; top: 3px; line-height: 1}

/* 검색영역 */
.searchBox{ border: 1px solid #16bc93; border-top: 2px solid #16bc93; padding: 20px 0; position: relative; margin: 0 0 30px}
.searchBox ul{ margin: 0 auto; width: 80%; }
.searchBox ul li{ display: inline-block; margin: 3px 0}
.searchBox ul li label{ display: inline-block; position: relative; padding-left: 15px; text-align: left}
.searchBox ul li label:before{ content: ''; display: block; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; background: #f04d4d}
.searchBox ul li .inputData{ height: 45px; margin: 0 5px 0 0; background-color: #fff}
.searchBox>.button{ position: absolute; right: 20px; top: 20px; width: 10%; min-height: 55px !important}
.searchBox>.button.line2{ min-height:100px !important}
.searchBox.mt_12{ top: -12px}
.searchBox.mt_12 .button{ top: 15px}

/* 체크박스 라디오박스 */
.agreeBox label{ display: inline-block; position: relative; font-size: 18px; line-height: 30px; padding: 0 10px 0 0; margin-right: 10px; cursor: pointer}
.agreeBox input{ position: absolute; width: 1px; height: 1px; opacity: 0; overflow: visible;}
.agreeBox label:before{ content: ''; display: inline-block; color: #fff; margin-right: 5px; background: url(../images/common/chkB.png) no-repeat 0 0; border: 0; width: 30px; height: 30px; border-radius: 0; font-weight: 800; line-height: 30px; text-align: center; box-sizing: border-box; vertical-align: middle; transition: all .2s; -webkit-transition: all .2s;}
.agreeBox input[type='radio']:checked + label, .agreeBox input[type='checkbox']:checked + label{ font-weight: 500; cursor: pointer}
.agreeBox input[type='radio']:checked + label:before, .agreeBox input[type='checkbox']:checked + label:before{ background: url(../images/common/chkB.png) no-repeat 0 -32px}
.agreeBox.agreeChk label:before{ background-position: -34px 0; border-radius: 0}
.agreeBox.agreeChk input[type='checkbox']:checked + label:before{ background-position: -34px -32px;}
.agreeBox.allChk{ margin: 10px 0 0; text-align: center; color: #fff}
.agreeBox.allChk label{ display: block; background: #f9f9f9; border: 1px solid #b5b5b5; color: #000; padding: 10px 0; margin: 0}
.agreeBox.allChk label:before{ background-position: -67px 0}
.agreeBox.allChk input[type='checkbox']:checked + label{ background: #16bc93; border-color: #16bc93; color: #fff}
.agreeBox.allChk input[type='checkbox']:checked + label:before{ background-position: -67px -32px}

.agreeDiv{ position: relative;}
.grayBox{ margin: 5px 0 30px; background: #f4f4f4; border: 1px solid #dedfe2; padding: 10px 20px;  position: relative;}
.scrolNon{ border-top: 1px solid #485671}
.agreeInCont{ height: 250px; overflow-y: auto}
.scrolNon .agreeInCont{ height: auto; overflow-y: inherit;}
.agreeInCont>p{ margin-bottom: 20px; font-size: 17px}
#realContent .content .agreeInCont>h3{ padding-left: 0}
#realContent .content .agreeInCont>h3:before{ display: none}
.agreeInCont>h4{ font-size: 1.15em; font-weight: 400;}
.agreeDiv .agreeBox{ margin: -10px 0 50px; border-bottom: 1px solid #b5b7bd; background: #fff; padding: 0 0 10px; text-align: center}
.agreeDiv .respon_tableArea+.agreeBox{ margin-top: 20px}

.blueBox{ margin: 10px 0; background: #fff; border: 1px solid #3967c3; padding: 10px 20px; text-align: center; position: relative; padding-bottom: 90px}
.agreeBox input[type='radio']+ label+span{ display: none; position: absolute; top: 50px; left: 0; width: 100%; height: 52px; padding: 15px 0; background: #f1f1f1; color: #485671; font-size: 30px; font-weight: 800}
.agreeBox input[type='radio']+ label+span:before{ content: '최종 결제금액'; display: inline-block; font-weight: 400; font-size: 18px; margin-right: 5px}
.agreeBox input[type='radio']:checked + label+span{ display: block;}

.bankCash{ margin: -11px 0 0; border: 1px solid #3967c3; padding: 0 10px}
.bankCash ul>li{ color: #000; padding: 10px; border-top: 1px solid #ddd}
.bankCash ul>li:first-child{ border: 0}
.bankCash ul>li span, .bankCash ul>li label{ display: inline-block; width: 20%}
.bankCash ul>li span:before, .bankCash ul>li label:before{ content: ''; display: inline-block; width: 6px; height: 6px; background: #3598db;  position: relative; top: -3px; margin: 0 5px}
.bankCash ul>li .inputData{ height: 40px}

/* 상세 입력 테이블 */
.detailGrid{ margin-top: 5px; position: relative}
.detailGrid>ul{ border-top: 2px solid #236dc7;}
.detailGrid>ul.bt1{ border-top: 1px solid #236dc7;}
.detailGrid>.necessary{ margin: -35px 0 10px; font-size: 17px; text-align: right;}
.detailGrid>.necessary:before, .detailGrid .necessary:before{ content: '\22C6'; display: inline-block; margin-right: 3px; color: #cb330a; font-weight: 600; position: relative; top: -2px}
.detailGrid>ul li{ display: table; width: 100%;}
.detailGrid>ul li>div{ display: table-cell; padding: 10px; border: 1px solid #c3c9cc; border-top: 0; font-size: 17px; vertical-align: middle;}
.detailGrid>ul li>div:nth-child(odd){ background: #eaf0f3; color: #333; font-weight: 400; width: 20%; vertical-align: top; line-height: 1.5; display: table-cell; border-right: 0}
.detailGrid>ul li>div:nth-child(3){ border-left: 0}
.detailGrid>ul li>div .inputData, .outGridCont .inputData{ height: 45px; margin: 0 5px}
.detailGrid>ul li>div .data_txt{ display: inline-block;  padding: 8px; color: #1563a5}
.detailGrid>ul li>div .refere_txt{ display: inline-block; padding: 8px 8px 8px 25px; color: #000;position: relative;}
.detailGrid>ul li>div .refere_txt:before{ content: '\0021'; display: block; color: #bd2329; position: absolute; left: 0; font-size: 15px; font-weight: 600; border: 1px solid #bd2329; border-radius: 50%; width: 16px; height: 16px; text-align: center; line-height: 16px; top: 30%}
.detailGrid>ul li>div .formCov .inputData{ margin: 0 5px}
.detailGrid>ul li>div .formCov{ margin: 5px 0}
.detailGrid>ul>li.gridTitle{ border-bottom: 8px solid #fff}
.detailGrid>ul>li.gridTitle div{ padding: 20px 10px}
.detailGrid>ul>li.gridTitle div:nth-child(even){ font-size: 1.3em; font-weight: 500}
.detailGrid>ul>li.gridTitle+li{ border-top: 1px solid #c3c9cc;}

.detailGrid .agreeBox{ margin: 0 0 10px}
.detailGrid .agreeBox label{ font-size: 17px}
.detailGrid .agreeBox label:before{ width: 24px; height: 24px; background-position: -100px 0}
.detailGrid .agreeBox input[type='radio']:checked + label:before, .detailGrid .agreeBox input[type='checkbox']:checked + label:before{ background-position: -100px -25px}
.detailGrid .pickView{ background: #f4f4f4; padding: 5px}
.detailGrid ul.pickView{ border-top: 1px solid #ccc; padding: 5px 10px 0}
.detailGrid ul.pickView li{ margin-bottom: 5px}
.detailGrid .pickView .fileUpload, .detailGrid .pickView .multifileUpload, .detailGrid .pickView .inputData{ margin: 0;}
.detailGrid .pickView label.t{ display: inline-block; line-height: 1.5; padding: 0  0 5px 0; width:18%; vertical-align: top}
.detailGrid ul.pickView label.t:before{ content: ''; display: inline-block; width: 6px; height: 6px; background: #3598db; margin-right: 5px; position: relative; top: -3px}
.detailGrid ul.pickView textarea.inputData{ width: 80%; height: 100px}
.detailGrid ul.pickView .agreeBox{ width: 80%; display: inline-block; padding: 0; border: 0}
.detailGrid ul.pickView .agreeBox label{ width: 30%; vertical-align: top}

.picArea{ position: absolute; right: 1px; background: #eee; z-index: 1; text-align: center;  padding: 8px; margin-top: 2px}
.picArea p{ border: 1px solid #ccc; background: #fff; width:180px; height: 210px; vertical-align: middle; text-align: center; overflow: hidden}
.picArea p span{ line-height: 1.4; display: block; margin-bottom: 10px; padding-top: 50px;}
.picArea p img{ width: 100%;}

/* 셀렉트 스타일 */
.selectSy{ display: inline-block; border: 1px solid #c5c5c5; height: 45px; box-sizing: border-box; background: #fff; position: relative;}
.selectSy:after{ content: '\276F'; display: block; position: absolute; right: -1px; top: -1px; border: 1px solid #c5c5c5; background: #f1f1f1; width: 43px; height: 35px; z-index: 9; transform: rotate(90deg); padding: 8px 0 0 }
.selectSy label{ display:block; width: 0; height:0px; font-size:0px; font-size:0em; line-height:0px; content:''; overflow:hidden; clear:both;  padding: 0 !important; margin: 0 !important}
.selectSy select{ text-align: left; height: 43px; border: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0; background: transparent; padding: 0 55px 0 10px; position: relative; z-index: 10}
.selectSy select::-ms-expand{ display: none}

/* 반응형 테이블 */
.default_table, .outGridCont table{ border-spacing: 0; table-layout: fixed; display: table; margin-bottom: 10px; width: 100%; border-collapse: collapse; background-color: transparent;}
.default_table tr, .outGridCont table tr{ transition: transform .3s ease,visibility .3s ease,opacity .3s ease,-webkit-transform .3s ease;}
.default_table thead tr:first-child th, .outGridCont table thead tr:first-child th{ background: #f9f9f9; border: 1px solid #b4b8bc; border-bottom: 1px solid #6d727d; border-top: 2px solid #236dc7; color:#09326d;}
.default_table thead th, .outGridCont table thead th{ padding:10px; background:#e3eaf0; border-left:1px solid #e2e2e2; color:#385a7d; font-size: 17px; font-weight: 400}
.default_table tbody th, .outGridCont table tbody th{ background:#fff;line-height:1.2;color:#333;}
.default_table tbody td, .outGridCont table tbody td{ border:1px solid #d3d3d3; color:#323232; font-size: 17px; background: #fff}
.default_table tbody th, .default_table tbody td, .outGridCont table tbody th, .outGridCont table tbody td{ padding: 10px; border-bottom: 1px solid #d3d3d3}
.default_table td a{ display: inline-block; text-decoration: underline; font-weight: 500}
/* //반응형 테이블 */

/* 테이블 정의 */
.outGridCont{ position: relative;}
.outGridCont table{ width: 100%}

/* 페이징 */
.paging{ text-align: center; margin: 20px 0 50px;}
.paging a, .paging span{ display: inline-block; box-sizing: border-box;}
.paging span{ margin: 0 0 3px}
.paging span a{ font-size: 16px; border: solid 1px #b7b7b7; color: #323232; width: 52px; height: 50px; margin: 0 -2px;  line-height: 45px; text-decoration: underline; background: #fff}
.paging span.on a{ font-weight: bold; border: 1px solid #3967c3; background: #3967c3; color: #fff}
.paging .first, .paging .prev, .paging .next, .paging .last{ width: 50px; height: 50px; font-size: 0; line-height: 0; padding: 0; background: #abbcce; border: 0}
.paging>a{ border: solid 1px #b7b7b7; vertical-align: middle;}
.paging>a:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat; width: 14px; height: 14px; margin: 0 auto; margin-top: 18px}
.paging>a.prev{ margin-right: 20px}
.paging>a.next{ margin-left: 20px}
.paging>a.first:before{ background-position: 0 0;}
.paging>a.prev:before{ background-position: -16px 0; width: 8px;}
.paging>a.next:before{ background-position: -28px 0; width: 8px;}
.paging>a.last:before{ background-position: -38px 0;}

/* LAYER */
.layerPop{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.7); z-index: 100; /* display: none */}
.layerPop>div{ max-width: 1200px; width: 100%; height: 100%; background: #3967c3; position: absolute; left: 50%; transform: translateX(-50%); overflow-y: auto; padding: 0 20px}
.layerPop.layerLogin>div{ padding: 0; height: auto; top: 100px; overflow-y: inherit; width: 600px; background: #fff; border: 0; padding:  50px}
.layerPop.layerLogin>div .referBox, #realContent .content.realNmCont>div .referBox{ font-size: 1.1em; margin: 10px 0 0; border-top: 0 !important; padding: 0 190px 10px 0 !important; line-height: 1.7}
.layerPop.layerLogin>div .referBox:before{ display: none !important}
#realContent .content.realNmCont>div .referBox:before{ display: none}
.layerPop.layerLogin>div .referBox.icon>i{ right: -10px !important}
#realContent .content.realNmCont>div .referBox>i{ right: 0}
.layerPop.layerLogin>div dl, #realContent .content.realNmCont>div dl{ position: relative; z-index: 10}
.layerPop.layerLogin>div dd, #realContent .content.realNmCont>div dd{ margin: -5px 0 15px}
.layerPop.layerLogin>div .inputData, #realContent .content.realNmCont>div .inputData{ height: 50px; line-height: 50px; width: 100%}
.layerPop.layerLogin>div .button, #realContent .content.realNmCont>div .button{ width: 100%}
.layerPop.layerLogin>div .pointBox, #realContent .content.realNmCont>div .pointBox{ background: #ededed; padding: 25px 10px 25px 100px; position: relative}
#realContent .content.realNmCont>div .pointBox{ margin-top: 30px; min-height: 60px;}
.layerPop.layerLogin>div .pointBox i, #realContent .content.realNmCont>div .pointBox i{ display: block; background: url(../images/common/icon.png) no-repeat -184px 0; width: 54px; height: 59px; position: absolute; left: 25px; top: 25px}
.layerPop.layerLogin>div .layerClose{ display: block; position: absolute; right: 0; top: 0; background: #f04d4d; width: 65px; height: 65px; text-align: center; font-size: 0}
.layerPop.layerLogin>div .layerClose:before{ content: '\2715'; display: block; font-size: 30px; position: relative; text-align: center; line-height: 35px; color: #fff;}

#realContent .content .layerPop h1, #realContent .content.realNmCont>div h1{ text-align: left; margin: 5px 0 10px; color: #323232; text-shadow: none; font-size: 2.2em; font-weight: 500}
#realContent .content .layerPop.pop_picEdit h1{ color: #fff}
#realContent .content .layerPop  h2{ margin: 10px 20px 5px; padding-left: 0}
#realContent .content .layerPop  h2:before, #realContent .content .layerPop  h3:before{ display: none}
#realContent .content .layerPop  h3{ margin: 0 20px; padding: 0}
#realContent .content .layerPop ul{ margin: 10px 0; background: #fff; padding: 10px; border-bottom: 10px solid #3967c3}
#realContent .content .layerPop ul.listS{ margin: 0}
#realContent .content .layerPop ul.listS>li{ margin: 0 15px 10px;}
.layerPop>div>div{ position: relative; background: #fff;}
.layerPop>div>div .txt_red{ position: absolute; right: 30px; top: 15px;}
.layerPop>div>a{ display: block; position: absolute; top: 15px; right: 30px; font-size: 0; line-height: 1}
.layerPop>div>a:before{ content: '\2715'; display: inline-block; font-size: 35px; color: #fff}

.picEditDiv{ padding: 10px}
.picEditDiv:after{ content: ''; display: block; clear: both}
.picEditDiv .picEdit{ float: right; width: calc(100% - 180px - 20px); background: #eaf0f3; border-top: 1px solid #515151; box-sizing: border-box; padding: 10px}
.picEditDiv .picEdit table{ width: 100%}
.picEditDiv .picEdit table p img{ width: 80%;}
.picEditDiv .picEdit .picEditCrop{ background: #fff; width: 100%; height: 400px; overflow: scroll}
.picEditDiv .picEdit .btnArea{ margin-bottom: 0}
.picEditDiv .picFinal{ float: left; width: 180px;}
.picEditDiv .picFinal .picDiv{ border: 1px solid #515151; background: #fff; height: 220px; background: url(../images/common/pic.png) no-repeat 50% 100%; margin-bottom: 2px}
.picEditDiv .picFinal .button{ width: 100%}

/* 리스트 스타일 */
.listS, .listH3{ margin: 5px 0 20px 7px;}
.listS>li, .listH3>li{ font-size: 1em; margin-bottom: 12px; position: relative; padding-left: 15px}
.listS> li>i, .listH3>li>i{ display: block; width: 6px; height: 6px; background: #f04d4d; position: absolute; left: 0; top: 10px}
.listH3>li{ font-size: 1.1em; padding-left: 20px; font-weight: 400}
.listH3>li>i{ background: #0a7ecd; width: 10px; height: 10px; top: 10px; border-radius: 50%}

.listH3 ul{ margin: 7px 0}
.listH3 ul li{  font-weight: 300; margin-bottom: 3px; padding-left: 15px; position: relative}
.listH3 ul li:before{ content: ''; display: block; position: absolute; left: 0; top: 12px; background: #828282; width: 7px; height: 1px}

.numberList li{ display: inline-block; margin: 0 10px 10px; letter-spacing: -0.065em; line-height: 25px; }
.numberList li:before{ content: '1'; display: inline-block; background: #485671; color: #fff; width:25px; height: 25px; text-align: center; vertical-align: middle; margin-right: 5px;}
.numberList li:nth-child(2):before{ content: '2';}
.numberList li:nth-child(3):before{ content: '3';}
.numberList li:nth-child(4):before{ content: '4';}
.numberList li:nth-child(5):before{ content: '5';}
.numberList li:nth-child(6):before{ content: '6';}

/* 탭스타일 */
.lnkTabs{ text-align: center; }
.lnkTabs>li{ display: inline-block; margin: 0 -2px; width: 14%}
.lnkTabs>li a{ display: block; height: 55px; line-height: 55px; background: #fff; border: 1px solid #cbcbcb; text-align: center; font-size: 18px}
.lnkTabs li.active a{ background: #16bc93; border-color: #16bc93; color: #fff; font-weight: 500; position: relative; z-index: 10}

.lnkTabs2{ margin: 0 0 0 2px}
.lnkTabs2>li{ display: inline-block; margin: 0 -2px 0 0;}
.lnkTabs2>li a, .subTabs h3 button{ display: block; height: 45px; line-height: 45px; background: #a6b5c4; color: #34495e; text-align: center; position: relative; padding: 0 30px; overflow: hidden}
.lnkTabs2>li a:after, .subTabs h3 button:after{ content: '\25E5'; display: block; color: #fff; position: absolute; right: -1px; top: 0; font-size: 22px; line-height: 0.5}
.lnkTabs2 li.active a, .subTabs div.active h3 button, .tabs_txtB{ background: #34495e; color: #fff; font-weight: 500;}

.subTabs{ position: relative}
.subTabs>div>div{ display: none; padding-top: 45px;}
.subTabs>div.active>div{ display: block}
#realContent .content .subTabs h3{ position: absolute; top: 0; width: 15%; text-align: center; margin: 0}
.subTabs h3 button{ padding: 0; width: 100%}
.subTabs .tabsCont+.tabsCont h3{ left: calc(15% + 1px)}
.tabs_txtB{ margin-bottom: 30px; padding: 10px 20px; color: #fff; font-weight: 300}
.tabs_txtB strong{ color: #fed000}
.board_total{ margin: 0 0 10px; font-size: 1em}
.board_total strong{ color: #f04d4d; font-size: 1.25em}

/* 실명인증 */
.realNameB{ background: #fff; border: 1px solid #dedfe2; margin: 5px 0 0; padding: 35px 0 30px}
.realNameB>dl{ width: 45%; margin: 0 auto; border-bottom: 1px solid #c5c5c5; padding-bottom: 15px}
.realNameB>dl:after{ content: ''; display: block; clear: both}
.realNameB dd{ width: 47%}
.realNameB dd label{ display: block; font-size: 18px; color: #323232; padding-left: 15px; position: relative; margin-bottom: 10px}
.realNameB dd label:before{ content: ''; display: block; width: 6px; height: 6px; background: #f04d4d; position: absolute; left: 0; top: 10px}
.realNameB dd input{ border: 1px solid #93969a; height: 50px; text-indent: 10px; width: 100%}
.realNameB .btnArea{ margin: 15px 0 0}
.realNameB .btnArea .colorGray{ border-color: #93969a}

#realContent .content.realNmCont{ padding: 0; max-width: 100%; background: #fff}
#realContent .content.realNmCont>div{ max-width: 700px; margin: 0 auto; padding: 100px 0 180px}
#realContent .content.realNmCont>div .lnkTabs{ margin: 0 0 50px !important}
#realContent .content.realNmCont>div .lnkTabs li{ width: 50%}

/* 마이페이지 */
.myInfo{ margin: 40px auto; width: 70%; position: relative; font-size: 1.15em}
.myInfo:before{ content: ''; display: block; position: absolute; left: 25px; top: 20px; width: 121px; height: 121px; background: url(../images/common/icon.png) no-repeat -300px -436px;}
.myInfo .myData span{ display: block; line-height: 1.2; font-weight: 400; margin: 7px 0 0}
.myInfo .myData span em{ color: #00a85f; margin-left: 5px}
.myInfo .myData strong{ font-size: 32px; color: #34495e;  font-weight: 500; margin: 0; line-height: 1.2}
.myInfo .myData .button{ vertical-align: bottom; padding: 0 25px; font-size: 1em}

.myInfo .btnArea{ margin: 10px 0 0 160px; text-align: left}
.myInfo .btnArea>div{ display: inline-block; line-height: 40px; }
.myInfo .btnArea>div span{ margin: 0 10px 0 30px; color: #323232; font-weight: 400}
.myInfo .btnArea>div span:before{ content: '\￦'; display: inline-block; vertical-align: middle; width: 30px; height: 30px; background: #ffda31; border: 1px solid #ebc519; border-radius: 50%; text-align: center; line-height: 30px; color: #34495e; margin-right: 5px}
.myInfo .btnArea>div span+.button.colorWhite{ display: none}
.myInfo .btnArea>div.payNon span{ color: #f04d4d}
.myInfo .btnArea>div.payNon span+.button.colorWhite{ display: inline-block}

.myInfo.gpa{ background: #fff; margin-bottom: 0; border: 2px solid #34495e; width: 100%; box-sizing: border-box;}
.myInfo.gpa:after{ content: ''; display: block; clear: both}
.myInfo.gpa>.myData>p{ font-size: 20px; padding-top: 10px; font-weight: 400}
.myInfo.gpa>.myData>span{ position: absolute; right: 30px; bottom: 25px; font-size: 22px}
.myInfo.gpa>.myData>em{ display: block}

.myInfo.gpa .myInfoNm{ width: 35%; background: #34495e; position: relative; height: 160px}
.myInfo.gpa .myInfoNm i{left: 8%; top: 20px;}
.myInfo.gpa .myInfoNm>div{ padding:  40px 0 0 35%; font-size: 20px; color: #fff; position: relative; z-index: 10}
.myInfo.gpa .myInfoNm>div strong{ display: inline-block; font-size: 35px; line-height: 1.5; font-weight: 500}
.myInfo.gpa .myInfoNm>div span{ display: block; font-size: 20px; color: #ffda31}
.myInfo.gpa .myInfoGap{ width: calc(65% - 60px); height: 110px; padding: 25px 30px; color: #34495e; font-size: 20px;}
.myInfo.gpa .myInfoGap>p{ font-size: 30px; font-weight: 400; color: #f04d4d; line-height: 1.2;}
.myInfo.gpa .myInfoGap>p span, .myInfo.gpa .myInfoGap>p strong{ color: #34495e; font-weight: 400}
.myInfo.gpa .myInfoGap>p em{ font-size: 40px; font-weight: 600}
.myInfo.gpa .myInfoGap .point_txt{ display:  block; margin-top: 10px}
.myInfo.gpa+.finResult{ border-top: 0;}

.finResult{ background: #d2d9e4; padding: 20px 50px 15px; margin: 0 0 20px; border: 1px solid #4d6b8a}
.finResult p{ font-size: 1.6em; font-weight: 600; position: relative; padding: 5px 0 0 90px; min-height: 80px}
.finResult p:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat 0 -626px; width: 74px; height: 81px; position: absolute; left: 0; top: 0}
.finResult p span{ display: block; font-size: 0.65em; font-weight: 300}

.testResult1 .resultBox{ background: #f6f6f6; border-top: 1px solid #4d6b8a; position: relative; padding: 10px 20px}
.testResult1 .resultBox>p{ display: inline-block; font-size: 18px; line-height: 40px; margin-right: 10px}
.testResult1 .resultBox.pass:before{ background-position: -355px -115px;}
.testResult1 .bluBox1, .testResult2{ position: relative; background: #4d6b8a; text-align: center; padding: 15px 0; color: #fff; font-size: 20px}
.testResult1 .bluBox1>span{ display: block; position: absolute; right: 15px; top: 15px}
.testResult1 .subjectDiv{ margin: 2px 0 10px; border: 1px solid #34495e;}
.testResult1 .subjectDiv:After{ content: ''; display: block; clear: both}
.testResult1 .subjectDiv li{ display: inline-block; border-left: 1px solid #34495e; box-sizing: border-box; width: 20%; float: left;}
.testResult1 .subjectDiv li:first-child{ border: 0;}
.testResult1 .subjectDiv li>div{ position: relative; text-align: center; font-size: 18px; padding: 20px 0}
.testResult1 .subjectDiv li>div strong{ display: block; font-size: 30px; color: #000; margin-top: 15px}
.testResult1 .subjectDiv li>div .button{ position: absolute; right: 5px; top: 3px}
.testResult2{ background: #34495e;}
.testResult2>strong{ font-size: 25px; color: #fed000}

/* BUTTON */
.btnArea{ margin: 20px 0 30px; text-align: center}
.btnArea:after{ content: ''; display: block; clear: both}
.btnArea .button{ margin: 0 2px}
.button,
.button *{ position:relative; margin:0; padding:0; display:inline-block; text-decoration:none !important; border:0; white-space:nowrap; vertical-align:top; overflow:visible; cursor: pointer; letter-spacing: -0.08em; color: #fff; background: #16bc93;  box-sizing: border-box;}
.button.small{ height:45px; line-height:45px; padding:0 15px; font-weight: 300;}
.button.medium{ height:50px; line-height:50px; font-size: 18px; padding:0 50px; font-weight: 300;}
.button.large{ height:60px; line-height: 60px; font-size: 20px; padding:0 50px; font-weight: 400;}
.button.colorWhite{ background: #fff; color: #000; border: 1px solid #9aa6b2;}
.button.colorBlack{ background: #34495e;}
.button.colorblue1{ background: #3967c3;}
.button.colorRed{ background: #f04d4d;}

.button.icon:before{ content: ''; display: inline-block; vertical-align: middle; background: url(../images/common/icon.png) no-repeat; position: relative; top: -2px; left: -3px; line-height: 1; margin: 0 3px 0 0; height: 25px;}
.button.icon.delete:before{ background-position: -157px 0; width: 19px;}
.button.icon.search:before{ background-position: -132px 0; width: 22px;}
.button.icon.cross:before{ background-position: -157px 0; width: 19px;}
.button.icon.delete:before{ background-position: -80px 0; width: 19px;}
.button.icon.print:before{ background-position: -103px 0; width: 26px;}
.button.icon.calendar:before{ background-position: -54px 0; width: 23px; border-radius: 5px}
.button.icon.plus:before{ background: none; display: inline-block; content: '\002B'; line-height: 1; font-size: 22px; }
.button.icon.minus:before{ background: none; display: inline-block; content: '\2212';  line-height: 1; font-size: 22px; }
.button.icon.arrow:before{ background: none; display: inline-block; content: '\25B8'; position: relative; top: -3px; font-size: 25px; left: -2px; line-height: 1}
.button.icon.arrow2:after{ background: none; display: inline-block; content: '\2192'; position: relative; top: 4px; font-size: 30px; line-height: 1; font-weight: 200; margin-left: 20px}
.btnFileDown{ text-align: center; margin: 0 0 30px}
.btnFileDown>a{ display: inline-block; background: #34495e; line-height: 50px; height: 50px; color: #fff; font-size: 18px; font-weight: 400; position: relative; padding: 0 70px 0 15px; margin: 0 3px}
.btnFileDown>a i{ display: block; background: #ff7e7a; width: 50px; height: 50px; position: absolute; right: 0; top: 0}
.btnFileDown>a i:after{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat -400px 0; width: 20px; height: 23px;}

/* 참고 문장 정의 */
.help_txt{ font-size: 16px; color: #000; letter-spacing: -0.065em; line-height: 1.3; margin: 5px 0; position: relative; padding-left: 18px}
.point_txt{ margin: 0 0 5px; color: #f04d4d; font-weight: 400;  position: relative; padding-left: 22px;}
.point_txt:before{ content: '\203B'; display: block; position: absolute; left: 0; }
.help_txt.orange, .point_txt.orange{ color: #ff6c00; font-weight: 400}
.help_txt.red, .point_txt.red{ color: #bd2329; font-weight: 400}
.help_txt.orange:before{ color: #000}
.help_txt:before{ content: '\26A0'; display: block; font-size: 18px; position: absolute; left: 0; line-height: 1;}
.refere_txt{ display: inline-block; padding: 8px 8px 8px 25px; color: #000;position: relative; font-size: 16px;}
.refere_txt:before{ content: '\0021'; display: block; color: #bd2329; position: absolute; left: 0; font-size: 15px; font-weight: 600; border: 1px solid #bd2329; border-radius: 50%; width: 16px; height: 16px; text-align: center; line-height: 16px; top: 30%}
.inputData.grayB{ background: #f8fbfd}
/*.inputData.hasDatepicker{ background: #f8fbfd url(../images/common/calendar.png) no-repeat 95% 50%;}*/
.listH3 .help_txt{ color: #686868; font-weight: 300;}
.fileAdd .fileNm{ display: inline-block; padding-left: 30px; position: relative; line-height: 35px;}
.fileAdd .fileNm:before{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat -464px 0; width: 27px; height: 27px; position: absolute; left: 0; top: 5px}

.button.icon.fileDelete{ position: relative; left: 5px; padding: 0 8px 0 15px; line-height: 35px; height: 35px}
.button.icon.fileDelete:before{ background-position: -154px 0; width: 14px; height: 16px;}

.addFile{ display: inline-block;}
.addFile:before{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat -245px 0; width: 27px; height: 27px; vertical-align: middle; margin-right: 5px}

.statusB{ display: inline-block; line-height: 35px; font-size: 15px; padding: 0 10px; border-radius: 3px}
.statusB.blu{ background: #3967c3; color: #fff}
.statusB.orange{ background: #f04d4d; color: #fff}
.statusB.green{ background: #16bc93; color: #fff}
.statusB.darkBlu{ background: #4d6b8a; color: #fff}
.statusB.off:before, .statusB.on:before{ content: 'OFF'; display: inline-block; width: 25px; height: 25px; border-radius: 50%; background: #34495e; color: #fff; font-size:12px; line-height: 25px; margin-right: 5px}
.statusB.on:before{ content: 'ON'; background: #3967c3}
/*
.error{ background: #f5f5f5}
.error>div{ margin: 30px auto 0; width: 730px; position: relative; padding-top: 70px }
.error>div:before, .error>div>div:before{ content: ''; display: block; background: url(../images/common/error.png) no-repeat 0 -313px; width: 188px; height: 53px;}
.error>div>div{ padding: 210px 75px 50px; text-align: center; font-size: 18px; color: #636363}
.error>div>div:before{ background-position: 0 0; width: 404px; height: 307px; position: absolute; top: 70px; right: 0}
.error>div>div>strong, .error>div>div>span{ display: block; letter-spacing: -0.085em; text-align: left}
.error>div>div>strong{ font-size: 34px; color: #232323; font-weight: 400; line-height: 50px; position: relative; padding: 0 40px; letter-spacing: -0.045em; }
.error>div>div>strong:before, .error>div>div>strong:after{ content: ''; display: block; position: absolute; background: url(../images/common/error.png) no-repeat -216px -334px; width: 27px; height: 21px;}
.error>div>div>strong:before{ top: 0; left: 0;}
.error>div>div>strong:after{ background-position: -252px -334px; left: auto; right: 40px; bottom: 20px}
.error>div>div>span{ display: block; padding: 10px 40px; line-height: 1.4}
.error>div>div>a{ display: inline-block; background: #053863; color: #fff; font-size: 16px; padding: 12px 20px 15px; text-decoration: none}
*/
.eduIntro{ margin: 0 90px}
.eduIntro>li{ margin-bottom: 30px; position: relative; padding: 10px 0 0 120px; font-size: 1.1em; color: #323232; min-height: 100px}
.eduIntro>li strong{ display: block; font-size: 1.4em; font-weight: 500; color: #4d6b8a; margin-bottom: 10px}
.eduIntro>li i{ display: block; width: 110px; height: 110px; border-radius: 50%; background: #e6e6e6; position: absolute; left: 0; top: 0; text-align: center}
.eduIntro>li i:before{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat 0 -712px; width: 61px; height: 63px; margin-top: 25px}
.eduIntro>li:nth-child(2) i:before{ background-position: -67px -712px; width: 70px}
.eduIntro>li:nth-child(3) i:before{ background-position: -148px -712px; width: 57px}
.eduIntro>li:nth-child(4) i:before{ background-position: -205px -712px; width: 50px}
.eduIntro>li:nth-child(5) i:before{ background-position: -260px -712px; width: 46px}
.eduIntro>li:nth-child(6) i:before{ background-position: -0px -630px; width: 61px}

#footer{ background: #253a4f}
#footer .section{ max-width: 1200px; width: 100%; margin: 0 auto; position: relative}
#footer>.section{ padding: 30px 0 50px;}
#footer>.section .nias{ display: block; float: left; background: url(../images/common/ci.png) no-repeat 0 0 / 165px auto; width: 165px; height: 65px; filter: grayscale(100%); -webkit-filter: grayscale(100%);  filter: brightness(200%); -webkit-filter: brightness(200%); opacity: 0.75; margin-right: 30px; font-size: 0; color: transparent}
#footer>.section .privacy{ display: block; position: absolute; right: 0; top: 15px; padding: 5px 10px; color: #d2ff00; font-weight: 500}
#footer address{ color:#fff;}
#footer address em{ color: #9db2c7; font-weight: 500; margin-right: 10px}
#footer address strong{ display: inline-block; margin-left: 20px; font-weight: 400}
#footer>.section p.copyright{ margin-top: 0; color:#929292;}

/* MAIN */
#container.main{ }
#container.main .content_tp{ background: url(../images/main/visual.jpg) no-repeat 50% 0; height: 500px;}
#container.main .content_tp>.slogan{ margin: 0 auto; text-align: center; padding-top: 75px}
#container.main .content_tp>.slogan strong{ font-size: 2.89em; text-shadow: 1px 3px 0 #000; font-weight: 600}
#container.main .content_tp>.slogan strong span{ font-size: 0.65em;  font-weight: 500}
#container.main #realContent .content{ max-width: 100%; padding-top: 210px}
#container.main #realContent .content>div, #container.main #realContent .content>div.mainPrint>div{ max-width: 1200px; width: 100%; margin: 0 auto}
#container.main #realContent .content>div.mainPrint{ max-width: 100%; background: #3598db}
.mainAppLnk ul{ text-align: center; margin: 0 0 40px}
.mainAppLnk ul li{ display: inline-block; background: #fff; width: 415px; height: 240px; border-radius: 15px; position: relative; text-align: left; margin: 0 10px}
.mainAppLnk ul li>strong, .mainAppLnk ul li span, .mainAppLnk ul li em, .mainAppLnk ul li a, .mainAppLnk ul li i{ display: block; margin-left: 25px; font-size: 1.05em}
.mainAppLnk ul li>strong{ margin: 70px 120px 20px 25px; font-weight: 500; font-size: 1.5em; color: #323232; line-height: 1.3}
.mainAppLnk ul li em, .mainAppLnk ul li a, .mainAppLnk ul li i{ position: absolute}
.mainAppLnk ul li em{ top: 25px; line-height: 30px; border-radius: 30px; background: #f04d4d; color: #fff; padding: 0 15px}
.mainAppLnk ul li span{ font-size: 1.1em; letter-spacing: 0.0015em; margin-bottom: 8px}
.mainAppLnk ul li span:before, .mainAppLnk ul li i{ content: ''; display: inline-block; background: url(../images/main/mainIc.png) no-repeat -335px -71px; width: 18px; height: 18px; margin-right: 8px;}
.mainAppLnk ul li span.memb:before{ background-position: -356px -71px}
.mainAppLnk ul li i{ background-position: -103px 0; width: 79px; height: 86px; margin: 0; right: 20px; bottom: 20px}
.mainAppLnk ul li a{ top: 0; left: 0; font-size: 0; width: 100%; height: 100%; margin: 0}
.mainAppLnk ul li.appEnd em{ background: #34495e}
.mainAppLnk ul li.appEnd i{ filter: grayscale(100%); -webkit-filter: grayscale(100%);}
.mainAppLnk ul li.appEnd a{ width: 0}
.mainPrint>div{ padding: 20px 0; position: relative; min-height: 89px}
.mainPrint>div:after{ content: ''; display: block; clear: both; background: url(../images/main/mainIc.png) no-repeat 0 0; width: 93px; height: 89px; position: absolute; left: 0; top: 20px}
.mainPrint>div span{ float: left; display: block; font-size: 1.45em; font-weight: 600; color: #fff; margin: 13px 20px 0 100px; line-height: 1.3}
.mainPrint>div span em{ display: block; color: #fcff00}
.mainPrint>div dl{ margin-top: 15px}
.mainPrint>div dl, .mainPrint>div dt, .mainPrint>div dd{ float: left; line-height: 55px}
.mainPrint>div dl label{ font-size: 1.15em; font-weight: 500; color: #2e2e2e; margin: 0 15px}
.mainPrint>div dl label:before{ content: '\002F'; display: inline-block; color: #3967c3; font-weight: 800; margin-right: 7px; line-height: 1}
.mainPrint>div dl input{ background: #fff; border-radius: 5px; height: 55px; text-indent: 10px}
.mainPrint>div>button{ display: block; position: absolute; top: 0; right: 0; width: 195px; height: 100%; border-radius: 10px; background: #2655b2; overflow: hidden; text-align: center; font-size: 1.5em; font-weight: 500; color: #fff; z-index: 1}
.mainPrint>div>button:before{ content: ''; display: block; width: 0; height: 0; border-top: 130px solid #3967c3; border-right: 195px solid transparent; z-index: -1; position: absolute; top: 0;}
.mainPrint>div>button:after, .mainLnk ul li em:after, .mainLnk ul li em a:after{ content: '\276D\276D'; display: inline-block; margin-left: 8px; line-height: 1; font-size: 0.95em;}
.mainLnk{ padding: 40px 0 10px}
.mainLnk ul{ text-align: center}
.mainLnk ul:after{ content: ''; display: block; clear: both}
.mainLnk ul li{ display: inline-block; width: 375px; height: 260px; border-radius: 8px; background: #16bc93; color: #fff; position: relative; overflow: hidden}
.mainLnk ul li:first-child{ float: left; background: #f3d458; color: #000}
.mainLnk ul li:last-child{ float: right; background: #3967c3}
.mainLnk ul li strong, .mainLnk ul li em, .mainLnk ul li span, .mainLnk ul li i, .mainLnk ul li a{ display: block;}
.mainLnk ul li i{ margin: 40px auto 15px; background: url(../images/main/mainIc.png) no-repeat -258px 0; width: 70px; height: 71px;}
.mainLnk ul li:first-child i{ background-position: -189px 0; width: 64px; height: 72px}
.mainLnk ul li:last-child i{ background-position: -335px 0; width: 73px;}
.mainLnk ul li strong{ font-size: 1.5em; font-weight: 500}
.mainLnk ul li span{ font-size: 1.15em}
.mainLnk ul li em{ position: absolute; bottom: 0; width: 100%; height: 45px; line-height: 45px; font-size: 1.05em}
.mainLnk ul li em a{ position: relative; z-index: 10}
.mainLnk ul li:first-child em{ background: #e8b01e}
.mainLnk ul li:last-child em{ background: #365890; color: #60c4f1}
.mainLnk ul li>a{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 0}

/* 2020 08 27 */
#gnbNavi{ position: inherit}
#gnbNavi>p{ position: static}
#header{ background: #fff;}
#header:before, #header:after{ content: ''; display: block; position: absolute; left: 0; top: 92px; width: 100%; height: 70px; background: #fff;}
#header:after{ height: 1px; background: #aaa}
#gnbNavi #header #gnb{ float: none; height: 70px;}
#gnbNavi #header #gnb>li{ display: block; float: left; width: 25%}
#gnbNavi #header #gnb>li>a{ line-height: 70px;}
#gnbNavi #header #gnb>li:before{ line-height: 70px}

/* 1200이하 */
@media all and (max-width:1200px){
#gnbNavi>p{position: static;}
#gnbNavi>p>a{ background: url(../images/common/ci.png) no-repeat 0 0 / 180px auto; margin: 10px 0 0; min-height: 35px; padding: 16px 0 0 190px;}
.realHeader_tp .section>p{ width: 55%; line-height: 1.5; padding: 15px 0 5px 10px;}
.realHeader_tp .section>div{ margin: 12px 10px 0 0}
#gnbNavi:after{ background: url(../images/common/gnb_bg.png) repeat-x 0 80px;}

#gnbNavi ul ul{ top: 160px; width: 20%; min-height: 320px;}
#gnbNavi #header:before{ display: none}
#gnbNavi #header #gnb{ width: 100%; background: #34495e; float: none; text-align: center; margin: 10px 0 0; height: auto}
#gnbNavi #header #gnb>li, #gnbNavi #header #gnb>li:first-child{ width: 20% !important}
#gnbNavi #header #gnb>li>a{ margin: 0; line-height: 1.5; height: 55px; padding-top: 10px; color: #fff}
#gnbNavi #header #gnb>li:before{ line-height: 65px}
#gnbNavi ul ul a{ text-align: left; line-height: 1.5; padding: 0 5px 0 10px;}
#gnbNavi ul ul a:before{ left: 3px}

.finResult:after, .testResult1 .resultBox.pass:before{ right: 0}

.mainAppLnk ul li{ width: 45%; height: auto}
.mainAppLnk ul li>strong, .mainAppLnk ul li span, .mainAppLnk ul li em, .mainAppLnk ul li a, .mainAppLnk ul li i{ margin-left: 0.5em}
.mainAppLnk ul li>strong{ margin-right: 0.5em}
.mainPrint>div{ padding: 0.5em 0}
.mainPrint>div:after, .mainPrint>div>button:before, .mainLnk ul li em{ display: none}
.mainPrint>div span{ margin: 0 0.5em; float: none; text-align: center; font-size: 1.85em;}
.mainPrint>div span em{ display: inline-block}
.mainPrint>div dl, .mainPrint>div dt, .mainPrint>div dd{ float: none; text-align: center}
.mainPrint>div dt, .mainPrint>div dd{ display: inline-block}
.mainPrint>div>button{ position: static; margin: 0.8em auto; width: 95%; border-radius: 0; line-height: 50px}
.mainLnk ul li{ float: none !important; width: 32%; height: auto; vertical-align: top; padding-bottom: 1em}

/* 2020 08 27 */
#header:after{ height: 0}
#gnbNavi #header #gnb>li, #gnbNavi #header #gnb>li:first-child{ width: 25% !important}
}

/* Mobile */
@media all and (max-width:768px){
#wrap::before{ content: ''; position: fixed; background: transparent; top:0; left: 0; bottom: 0; right: 0; z-index:10; transition: background .3s; z-index:-1;}
#wrap.mo_gnbNavi_active::before{ content: ''; background: rgba(0,0,0,0.8); z-index:13;}
#wrap>h1{ font-size: 0; position: static; width: auto; height: auto}
#wrap>h1 a{ display: block; height: 60px; background: url(../images/mo/ci.png) no-repeat 10px 12px / 260px auto; width: 300px; height: 60px; }
.realHeader_tp{ background: #fff; border-bottom: 1px solid #25539d;}
.realHeader_tp .section>p, .realHeader_tp .section>div>a, .realHeader_tp .section>div button{ display: none}
.realHeader_tp .section>div .schBtn, .realHeader_tp .moMn{ display: block;width: 40px; height: 40px; padding: 0; background: #fff;}
.realHeader_tp .section>div .schBtn:before{ background-position: -309px 0; display: block; margin: 8px auto 0; width: 21px; height: 21px}
.realHeader_tp .moMn{ position: absolute; right: 10px; top: 12px; background: #34495e; font-size: 0;}
.realHeader_tp .moMn:before{ content: '\2263'; display: block; font-size: 24px; color: #fff; text-align: center;}
.content_tp>.slogan{ display: none}
.content_tp .locArea .section>a{ background: #3598db;}
.moMnClose{ display: block; z-index: 10}
#gnbNavi{ display: none}
.moMnClose{ display: block; position: absolute; right: 20px; top: 13px; font-size: 0; width: 40px; height: 40px; box-sizing: border-box;}
.moMnClose:before{ content: '\2715'; display: block; font-size: 35px; position: relative; text-align: center; line-height: 35px; color: #000}
#gnbNavi>p{ height: auto; height: 60px; background: #fff}
#gnbNavi>p>a{ margin: 0; background: url(../images/mo/ci.png) no-repeat 10px 10px / 270px auto; width: 300px; height: 55px; padding: 0; font-size: 0}
#gnbNavi #header{ background: #2b5ec4}
#gnbNavi #header #gnb{ border: 0; height: auto;}
#gnbNavi #header #gnb>li{ float: none}
#gnbNavi #header #gnb>li, #gnbNavi #header #gnb>li:first-child{ width: 100% !important;}
#gnbNavi #header #gnb>li:before{ display: none}
#gnbNavi #header #gnb>li>a, #gnbNavi #header #gnb>li:first-child>a{ height: auto; padding: 10px 22px 10px 45px; font-size: 1.1875em; color: #fff; text-align: left; font-weight: 400; border-bottom: 1px solid rgba(255, 255, 255, .3); position: relative}
#gnbNavi #header #gnb>li>a:before{ display: none !important}
#gnbNavi #header #gnb>li>a:after{ content: '\270E'; position: absolute; top: 10px; left: 20px; display: block; color: rgba(255, 255, 255, .7);}
#gnbNavi .myBtn>a{ background: #08b288; top: -53px; right: 10px;  font-size: 1.1875em;}
.mo_gnbNav, #gnbNavi{ display: block; position:fixed; bottom:0; top:0; right:-90%; padding-left:0; z-index:555; width: 90%; background: #34495e; border-top:0; overflow-y:auto; transition:right .3s;}
#gnbNavi .memberS{ top: -320px; height: 60px; background: #08b288}
#gnbNavi .memberS>div{ top: 0; right: auto; left: 20px}

.mo_gnbNavi.active, #gnbNavi.active{ display: block; right: 0}
.mo_gnbNavi>p{ height: 60px; background: #fff; border-bottom: 1px solid #25539d;}
.mo_gnbNavi>p a{ display: block; height: 60px; background: url(../images/common/ci.png) no-repeat 0 15px / 180px auto; font-size: 0; width: 180px; margin-left: 10px}
.mo_gnbNavi .langC{ display: block; background: #1e78d0; line-height: 35px; color: #27d9f9; font-size: 16px; font-weight: 500}
.mo_gnbNavi .langC:before{ content: 'Languages'; display: inline-block; color: #fff; font-weight: 300; margin: 0 15px; letter-spacing: 0; font-size: 14px; border-right: 1px solid #25539d; padding-right: 15px}
.mo_gnbNavi .langC:after{ content: ''; display: inline-block; width: 0; height: 0; border-left: 5px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; position: relative; top: -2px; margin-left: 10px}
.accordion>ul> li>a{ display: block; background: #fff; border-bottom: 1px solid #333; color: #333; padding: 20px 15px; font-size: 16px; position: relative}
.accordion>ul>li>a:before{ content: ''; display: inline-block; border-left: 5px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; margin-right: 6px; position: relative; top: -2px}
.accordion>ul>li>a:after{ content: '+'; display: block; width: 25px; height: 25px; background: #ccc; border-radius: 50%; position: absolute; right: 10px; top: 20px; text-align: center; line-height:23px; font-weight: 600}
.accordion>ul>li.active>a:after{ content: '\2012'; background: #fff; color: #25539d}
.accordion>ul>li.active>a{ background: #25539d; color: #fff; font-weight: 500}
.accordion>ul>li>ul{ display:none; background: #edf0f2; border-bottom: 1px solid #25539d; padding: 10px}
.accordion li li a{ display: block; padding: 0 0 0 15px; line-height: 35px; border-bottom: 1px dashed #c7cbcd; position: relative}
.accordion li li a:before{ content: ''; display: inline-block; width: 3px; height: 3px; background: #adb0b2; position: absolute; left: 5px; top: 15px}
.accordion li li:last-child a{ border: 0}
.accordion>ul>li.active>ul{ display:block;}

#container{ padding: 0}
#realContent .content{ padding: 0; max-width: 100%; width: auto; margin: 0 10px}
#realContent .content.realNmCont{ margin: 0; padding: 0 10px}
#realContent .content.realNmCont>div{ padding: 0 0 50px;}
#realContent .content.realNmCont>div .lnkTabs{ margin: 2em 0 0 !important;}
#realContent .content.realNmCont>div .lnkTabs li{ margin: 4px -2px 0;}
#realContent.myPage .content{ margin: 0 10px 0; max-width: 100%; width: auto; z-index: 10}
#container #realContent h1{ background: none; padding: 0.8em 0 0; border-bottom: 1px solid #7f7f7f; font-size: 35px; line-height: 55px; margin: 0}
#container #realContent h1:after{ display: none}
#container #realContent.myPage h1{ border: 0}

.referBox{ padding: 190px 10px 20px; text-align: center}
.referBox:before{ display: none}
.referBox p{ padding: 0 0 10px}
.referBox.icon>i{ top: 10px !important; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
#realContent .content.realNmCont>div .referBox{ padding: 190px 10px 20px !important}

#footer{ margin-top: 30px}
#footer>.section{ padding: 0 0 20px;}
#footer>.section .nias{ float: none; margin: 0 0 0 15px; height: 55px}
#footer>.section .privacy{ background: #3598db; color: rgba(255,255,255,.5); font-weight: 400; position: static; text-align: center; background: none; margin-bottom: 1em; border-bottom: 1px solid rgba(255,255,255,.2);}
#footer address strong{ display: block; margin: 0}
#footer address em{ display: block}

#footer>.section address{ padding: 0 10px 0}
#footer>.section p{ padding: 0 15px}
#footer>.section p.copyright{ margin-top: 5px; font-size: 0.9em}

#realContent .content h2{ line-height: 1.2}
#realContent .content h2:before{ top: 5px}
#realContent .content h2>span, #realContent .content h3>span{ margin: 0; display: block}
.agreeBox label{ box-sizing: border-box;}
.referBox.bgBlue .point_txt{ text-align: left}
.processReceipt li{ -webkit-transform: scale(.7); margin:0 -30px -45px; padding: 0 17px 0 8px;}
.processReceipt li span{ font-size: 23px;}
.processReceipt li span strong{ font-size: 1em; line-height: 1.1}
.btnFileDown>a{ margin: 0 3px 3px;}
.agreeDiv .agreeBox{ position: static; margin: 0 0 40px; text-align: center; padding: 10px 0; border-top: 1px solid #ccc}
.agreeDiv .grayBox{ margin: 5px 0 0;}
.agreeDiv .point_txt{ margin-top: 0 !important}

.lnkTabs{ margin: 0 0 1em}
.lnkTabs:after{ display: none}
.lnkTabs>li{ width: auto; margin: 4px 0 0;}
.lnkTabs>li a{ padding: 0 20px}

.searchBox ul, .searchBox ul li{ width: 100% !important}

.myInfo{ width: 100%}
.finResult, .payComp{ text-align: left; padding: 20px 10px; line-height: 1.2;}
.finResult:before{ position: absolute; left: 10px; margin: 0; }
.finResult:after, .testResult1 .resultBox.pass:before{ margin: 0 -1px 0}
.testResult1 .resultBox{ padding: 10px 60px 10px 10px}
.testResult1 .bluBox1>span{ position: static; margin: 10px 10px 0; background: #fff; color: #000}
.testResult1 .subjectDiv li>div .button, .referBox.icon.caution>i{ display: none}
.referBox.caution>ul{ text-align: left}
.myInfo .myData .button{ margin: 0 2px 6px}

.myInfo.gpa .myInfoNm, .myInfo.gpa .myInfoGap{ width: 100%;  height: auto}
.myInfo.gpa .myInfoGap{ padding: 20px 0 0; text-align: center; height: auto}
.myInfo.gpa .myInfoGap .point_txt{ background: rgba(0,0,0,.1); padding: 10px; margin: 10px 0 0; color: #000}
.myInfo.gpa .myInfoGap .point_txt:before{ display: none}
.myInfo.gpa .myInfoNm i{ top: 0; transform: scale(0.8)}
.myInfo.gpa .myInfoNm>div{ padding: 20px 0 20px 30%;}
.picArea{ position: static}
.picArea p{ margin: 0 auto;}

#realContent .content .subTabs h3{ width: 50%;}
.subTabs .tabsCont+.tabsCont h3{ left: 50%}

.agreeBox.blueBox{ padding: 10px 10px 0; text-align: left;}
.agreeBox.blueBox label{ display: block; margin: 0 0 10px}
.agreeBox input[type='radio']+ label+span{ position: static; margin: 10px 0; padding: 5px 0; text-align: center}
.bankCash ul>li span, .bankCash ul>li label{ width: 100%; display: block; margin: 5px 0 10px}
.bankCash ul>li select.inputData{ width:35% !important}
.bankCash ul>li .inputData{ width: 55% !important}

.searchBox{ padding: 10px}
.searchBox>.button{ width: 100%; display: block; position: static; margin-top: 10px}
.searchBox>.button.line2{ min-height: auto !important}

.realNameB{ padding: 20px 0 10px}
.realNameB>dl{ width: 90%}
.realNameB dd{ width: 100%}

.referBox  .point_txt{ text-align: left}
.referBox.myPage>div{ padding: 0 0 10px}
.myInfo:before, .referBox.myPage:after{ display: none}
.referBox.myPage{padding: 190px 0 20px}

#container #realContent h1{ padding: 1.5em 0 20px; line-height: 1;}
#realContent .content .layerPop.layerReceiveApp p{ padding: 15px 10px; font-weight: 300}
#realContent .content .layerPop.layerReceiveApp p br{ display: none}
#realContent .content .layerPop h3{ padding: 10px 0}
.layerPop{ z-index: 1000}
.layerPop>div{ top: 0}
.layerPop.layerLogin>div{ width: calc(100% - 20px); top: 0; padding: 0 10px 10px;}
.layerPop.layerLogin>div .referBox{ padding: 200px 0 10px 0 !important}

#realContent .content .layerPop ul{ margin: 10px 0 0}
.layerPop>div>div .txt_red{ position: static; background: #eeeff2; padding: 0 10px 10px}
.layerPop.layerReceiveApp>div{ top: 0; height: 100%; overflow-y: auto;}
.picEditDiv .picEdit, .picEditDiv .picFinal, .picEditDiv .picEdit table p img{ float: none; width: 100%}

.detailGrid ul.pickView li{ margin-bottom: 15px}
.detailGrid .pickView label.t{ display: block; width: 100%;  padding: 0 0 5px; border-bottom: 1px solid #ccc; margin-bottom: 5px}
.detailGrid ul.pickView .inputData, .detailGrid ul.pickView .agreeBox{ width: 100% !important}
.detailGrid ul.pickView .agreeBox label{ line-height: 1.3; margin: 0 0 10px; width: auto}

/* 반응형 테이블 */
.respon_tableArea{ width: 100%; overflow: hidden; border-top: 2px solid #236dc7;}
.respon_tableArea .default_table tbody td{ display: block; width: 100%; padding:10px; border: none; text-align: left; box-sizing: border-box; word-break: keep-all; word-wrap: break-word; border-bottom: 1px dashed #ccc;}
.respon_tableArea .default_table tbody td:last-child{ border-bottom: 1px solid #b3b3b3}
.respon_tableArea .default_table [data-cell-header]:before{ content: attr(data-cell-header); display: inline-block; min-width: 15%; margin-right: 15px; padding-right: 10px; font-size: 1.1075em; font-weight: 700; color: #222; border-right: 1px solid #ccc;}
.respon_tableArea .default_table colgroup, .respon_tableArea .default_table thead th{ display: none}
.respon_tableArea .default_table tbody tr:nth-child(odd) th, .respon_tableArea .default_table tbody tr:nth-child(odd) td{ background: #f8f8f8;}
/* //반응형 테이블 */

.outGridCont{ overflow-x: auto}
.outGridCont table{ width: 1200px}

#gnbNavi ul li>div{ position: static; height: auto;}
#gnbNavi ul li>div ul{ padding: 0}
#gnbNavi ul li>div:before, #gnbNavi ul li>div ul:before{ display: none}
#gnbNavi ul.mn1 div ul li{ display: block;}
#gnbNavi ul div ul li{ border-bottom: 1px solid #ccc;}
#gnbNavi ul div ul li a{ border: 0 !important; width: 100% !important; padding: 10px 0; color: #323232 !important; line-height: 2; text-indent: 20px !important; font-weight: 500 !important}
#gnbNavi ul div ul li a:before{ content: ''; display: inline-block; width: 7px; height: 7px; background: #005dad; margin-right: 5px; position: relative; top: -2px}
.detailGrid>ul li{ display: block}
.detailGrid>ul li>div, .detailGrid>ul li>div:nth-child(odd){ width: 100% !important; display: block; padding: 10px; border-right: 1px solid #c3c9cc; border-left: 1px solid #c3c9cc; box-sizing: border-box;}
.detailGrid>ul li>div .formCov .inputData, .detailGrid>ul li>div .inputData{ margin: 0 5px 5px}
.fileDown{ margin: 0 5px 20px; width: 90%}
.detailGrid>.necessary{ margin: 0; text-align: left}
.paging a, .paging span{ border-radius: 0; vertical-align: top}
.paging span a, .paging .first, .paging .prev, .paging .next, .paging .last{ width: 40px; height: 40px; line-height: 40px}
.paging>a.prev, .paging>a.next{ margin: 0}
.paging>a{ border: 0}
.paging>a:before{ top: 15px}

.btnArea .button{ margin: 0 2px 4px; padding: 0 20px;}

.eduIntro{ margin: 0}

/* MAIN */
#container.main .content_tp{ position: static; height: auto}
#container.main .content_tp>.slogan{ display: block; padding: 1.5em 0}
#container.main .content_tp>.slogan strong{ font-size: 1.8em; text-shadow: none}
#container.main .content_tp>.slogan strong span{ display: inline; font-size: 1em; margin: 0}
#container.main #realContent .content{ padding-top: 0}
#container.main #realContent .content>div.mainPrint{ display: none}
.mainAppLnk ul{ margin: 0}
.mainAppLnk ul li{ margin:  0 0 0.5em; width: 100%; border-bottom: 5px solid #ccc; border-top: 5px solid #ccc;}
.mainLnk{ padding: 0}
.mainLnk ul li{ width: 100%; margin: 0 0 0.5em;}
}

@media all and (max-width:500px){
#gnbNavi .memberS>div{ left: 5px}
#gnbNavi .memberS>div .button.mypage:before, #gnbNavi .memberS>div .button.logout:before{ display: none}
#gnbNavi .memberS>div .button{ padding: 0 5px; border-radius: 5px}
.btnFileDown>a{ display: block;}

.myInfo{ padding-top: 150px}
.myInfo.gpa{ padding-top: 0}
.myInfo.gpa .myInfoNm>div{ padding: 20px 0; text-align: center}
.myInfo>i{ left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.myInfo.gpa .myInfoNm i{ display: none}
.myInfo .myData, .myInfo .btnArea{ margin: 0; text-align left}
.myInfo .myData span{ margin: 10px 0 0; font-size: 1.15em; font-weight: 400;}
.myInfo .btnArea>div{ display: block; margin: 10px 0 0; border-top: 1px solid #ccc; padding: 10px 0 0;}
.myInfo .btnArea>div span{ margin-left: 0}
}
/* 2020 06 30 공지팝업 */
#pop_wrap{ background: #fff}
#pop_wrap .pop_tit{ background: #17c5cc url(../images/common/notiBg.png) ;padding: 25px 0 20px; text-align: center; font-size: 2.3rem;font-weight: 500; color: #323232; letter-spacing: -0.1em;}
#pop_wrap .pop_tit:before{ content: ''; display: block; background: url(../images/common/notiIc.png) 0 0; width: 130px; height: 130px; margin: 0 auto 10px}
#pop_wrap .pop_cont{ background: #fff; padding: 20px 30px 35px; letter-spacing: -0.085em}
#pop_wrap .pop_cont p{ font-size: 16px; color: #323232; line-height: 1.4; margin: 0 0 10px}
#pop_wrap .pop_btm{ background: #323232; color: #fff; font-size: 13px; padding: 8px 10px 10px; text-align: right}
#pop_wrap .pop_btm a{ color: #fff30b; font-weight: 600; font-size: 14px}

.error{ background: #e6eef6}
.error>div{ position: relative; width: 1060px; margin: 0 auto}
.error>div:before{ content: ''; display: block; position: absolute; border: 0; border-top: 500px solid #0099bb; border-left: 530px solid transparent; border-right: 530px solid transparent; width: 0; height: 0; top: 0; left: 50%; transform: translateX(-50%); z-index: -1}
.error>div>div{ padding: 50px 0 50px; text-align: center; font-size: 18px; color: #636363; letter-spacing: -0.2em; }
.error>div>div:before{ background-position: 0 0; width: 404px; height: 307px; position: absolute; top: 70px; right: 0}
.error .headerLogo{ display: block; font-size: 17px; margin-bottom: 60px; color: #19fffc; line-height: 48px; letter-spacing: -0.045em; font-weight: 300; padding: 0}
.error .headerLogo i{ display: inline-block; background: url(../images/common/ci.png) no-repeat 0 0 / 140px auto; width: 140px; height: 40px; font-size: 0; color: transparent; vertical-align: top; margin: 0 5px 0 0}
.error>div>div>strong{ font-size: 45px; color: #fff; font-weight: 700; line-height: 1; position: relative;}
.error>div>div>p{ display: block; padding: 30px 0 0; line-height: 1.4; color: #fccf3a; font-size: 24px; letter-spacing: -0.055em}
.error>div>div>p+p{ font-size: 20px; color: #fff0c0; padding: 0; font-weight: 300}
.error>div>div>p+p:after{ content: ''; display: block; background: url(../images/common/error.png) no-repeat; width: 252px; height: 183px; margin: 60px auto 20px}
.error>div>div>span{ display: block; font-size: 15px; font-weight: 300; color: #0099bb; letter-spacing: 0}

@media all and (max-width:1060px){
.error>div{ width: 100%; overflow: hidden;}
.error .headerLogo{ margin-bottom: 10px;}
}

/* 2020 07 22 */
#footer>.section{ padding-top: 20px}
#footer>.section .nias{ margin-top: 15px;}
#footer>.section .privacy{ position: static; padding: 5px 10px 10px 0;}
#footer .callC{ position: absolute; right: 0; top: 40px; text-align: right; padding: 5px 40px 0 0; font-size: 1em; font-weight: 500; color: #fff; line-height: 1.2}
#footer .callC:after{ content: ''; display: block; background: url(../images/common/icon.png) no-repeat -315px -712px; width: 93px; height: 74px; position: absolute; right: 0; top: 0}
#footer .callC strong{ display: block; font-size: 1.3em; letter-spacing: -0.085em; color: #f3d458}

@media all and (max-width:768px){
#footer>.section{ padding-top: 0}
#footer>.section .nias{ display: none}
#footer>.section .privacy{ text-align: center}
#footer>.section>div.callC{ position: static; border: 0; margin: 0 0 0 0.5em; text-align: left; padding: 10px 0 20px}
#footer>.section>div.callC:after{ display: none}
#footer>.section p.copyright{ margin-top: 0; padding-left: 0.5em}
}


/* 2020 07 31 */
#realContent.referN ..content_tp{ height: 180px;}
#realContent.referN .content .referBox{ height: 0; overflow: hidden; position: absolute; top: -300%}
#realContent.referN .content h1{ padding: 50px 0 50px;}

@media all and (max-width:768px){
#realContent.referN .content_tp{ height: 110px;}
}

/* 2019.11.21 lns */
.flip {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

.rotate-180 {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.flip-and-rotate-180 {
  -moz-transform: rotate(180deg) scaleX(-1);
  -webkit-transform: rotate(180deg) scaleX(-1);
  -o-transform: rotate(180deg) scaleX(-1);
  transform: rotate(180deg) scaleX(-1);
}

.rotate-90 {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  max-width: inherit;
  width: 180px !important;
  height: 180px !important;
  left: -21px;
  bottom: 23px;
}

.flip-and-rotate-90 {
  -moz-transform: rotate(90deg) scaleX(-1);
  -webkit-transform: rotate(90deg) scaleX(-1);
  -o-transform: rotate(90deg) scaleX(-1);
  transform: rotate(90deg) scaleX(-1);
  max-width: inherit;
  width: 180px !important;
  height: 222px !important;
  left: -21px;
  bottom: 23px;
}

.rotate-270 {
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  max-width: inherit;
  width: 180px !important;
  height: 222px !important;
  left: -21px;
  bottom: 23px;
}

.flip-and-rotate-270 {
  -moz-transform: rotate(270deg) scaleX(-1);
  -webkit-transform: rotate(270deg) scaleX(-1);
  -o-transform: rotate(270deg) scaleX(-1);
  transform: rotate(270deg) scaleX(-1);
  max-width: inherit;
  width: 180px !important;
  height: 222px !important;
  left: -21px;
  bottom: 23px;
}

/* 2020 08 28 */
#gnbNavi .remote{ display: block; position: absolute; right: calc(50% - 1200px / 2); top: 20px; font-size: 1.45em; background: #3598db; border-radius: 5px; padding: 5px 20px 5px 15px; color: #fff}
#gnbNavi .remote:before{ content: ''; display: inline-block; background: url(../images/common/icon.png) no-repeat -408px -712px; width: 50px; height: 40px; vertical-align: middle;}

@media all and (max-width:1200px){
#gnbNavi .remote{ right: 0; top: 10px}
}

@media all and (max-width:768px){
#gnbNavi .remote{ display: none}
/* 21.05.12_모바일에서 공고일정 조회 시 100%로 나오게 해달라는 요청 */
.pblancOutGrid table{ width: 100%}
}

/* 2026 04 08 누리집마크추가*/
.header_top{ background: #EDF1F5; position: relative; z-index: 100;}
.header_top .inner{ background: transparent !important; padding: 6px 0; max-width: 1200px; margin: 0 auto}
.header_top .inner span{ display: flex; gap: 5px; align-items: center; font-size: 16px;}
#header:before, #header:after{ top: 122px}
#gnbNavi .remote{ top: 50px}

@media (max-width: 768px) {
  .header_top .inner span{ font-size: 14px}
.realHeader_tp .moMn{ top: 45px}
}

/* 웹편의성 조치 */
/* 돼지능력검정원 > 자료실  */
.btn_clear_x {display: none; position: absolute; top: -4px; right: 17px; transform:translateY(-50%); width:22px; height: 22px; 	border: none; border-radius: 50%; background: #e5e5e5; cursor: pointer; transition:all .15s ease; }
.btn_clear_x::before, .btn_clear_x::after {content:''; position:absolute; top:50%; left:50%; width: 10px; 	height: 1.5px; background: #666; border-radius: 1px; }
.btn_clear_x::before {transform:translate(-50%, -50%) rotate(45deg);}
.btn_clear_x::after {transform:translate(-50%, -50%) rotate(-45deg);}
.btn_clear_x:hover {background: #dfe3e8;}
.btn_clear_x:hover::before, .btn_clear_x:hover::after {background: #222;}