@charset "UTF-8";
/* ------------------------------------------------------------------------------------------------------ */
/* ----------------------------------------------- Common ----------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------ */

/* ---------------------------------------------- 타이틀 ---------------------------------------------- */
/* Headline2 */
.comTitleH2 {width:100%; margin-bottom:30px; position:relative;}
.comTitleH2:after {content:""; display:block; clear:both;}
.comTitleH2 .alignL {float:left;}
.comTitleH2 .alignR {float:right;}
.comTitleH2 .unit {display:inline-block;}
.comTitleH2 h2 {font-size:36px; font-weight:500; line-height:1; color:#2784ff;}

/* Headline3 */
.comTitleH3 {width:100%; margin-top:20px; margin-bottom:20px; position:relative;}
.comTitleH3:after {content:""; display:block; clear:both;}
.comTitleH3 .alignR {position:absolute; top:-6px; right:0;}
.comTitleH3 .unit {display:inline-block;}
.comTitleH3 h3 {font-size:28px; font-weight:500; line-height:1; color:#000;}


/* ---------------------------------------------- 타이틀, 테이블 상단, 그리드상단 등 그룹의 사이드 ---------------------------------------------- */
.comSideOpt {}
.comSideOpt > ul {}
.comSideOpt > ul > .item {margin-left:10px; display:inline-block;}
.comSideOpt > ul > .item:first-child {margin-left:0;}
.comSideOpt select {height:40px; padding:0 40px 0 20px; font-size:16px; color:#000; line-height:40px; border:0; border-radius:20px; background:#fff url(/common/images/icon/select_arr.svg) calc(100% - 20px) center no-repeat; }
.comSideOpt .btnSide {min-width:120px; height:40px; padding:0 20px; font-size:16px; color:#fff; text-align:center; line-height:40px; border:0; border-radius:20px; background:#2784ff;}
.comSideOpt .btnSide.download {padding-left:40px; font-size:14px; background:#2784ff url(/common/images/icon/icon_side_down.svg) 20px center no-repeat;}
.comSideOpt .btnIcon {width:40px; height:40px; padding:0; font-size:0; border:0; border-radius:20px;}
.comSideOpt .btnIcon.add {background:url(/common/images/icon/btn_side_add.svg) center no-repeat;}
.comSideOpt .btnIcon.del {background:url(/common/images/icon/btn_side_del.svg) center no-repeat;}


/* ---------------------------------------------- 페이징 ---------------------------------------------- */
.comPaging {width:100%; margin-top:30px; font-size:0; text-align:center;}
.comPaging .prev {width:36px; height:36px; font-size:0; border-radius:50%; vertical-align:top; background:#fff url(/common/images/icon/icon_paging_prev.svg) center no-repeat; display:inline-block;}
.comPaging .next {width:36px; height:36px; margin-left:10px; font-size:0; border-radius:50%; vertical-align:top; background:#fff url(/common/images/icon/icon_paging_next.svg) center no-repeat; display:inline-block;}
.comPaging .numList {vertical-align:top; display:inline-block;}
.comPaging .numList > li {width:36px; height:36px; margin-left:10px; font-size:0; display:inline-block;}
.comPaging .numList > li a {width:100%; height:100%; font-size:16px; border-radius:50%; background:#fff; color:#ccc; line-height:35px; display:block;}
.comPaging .numList > li.on a {color:#fff; background:#319af6;}


/* ------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------- Component --------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------ */

/* ---------------------------------------------- 테이블, 그리드 등 그룹상단 ---------------------------------------------- */
.cptGroupTop {width:100%; margin-top:30px; margin-bottom:10px; position:relative;}
.cptGroupTop .alignL {}
.cptGroupTop .alignR {position:absolute; bottom:0; right:0;}
.cptGroupTop .unit {display:inline-block;}
.cptGroupTop .text {font-size:16px; line-height:1; vertical-align:bottom; color:#000;}
.cptGroupTop .total {font-size:18px; font-size:700; color:#319af6;}


/* ---------------------------- 그리드 :: basic ---------------------------- */
.cptGrid {width:100%; margin-bottom:40px;}
.cptGrid .gridTb {width:100%; border-collapse:collapse; border-spacing:0;}
.cptGrid .gridTb thead th {padding:12px 10px; font-size:16px; font-weight:500; color:#fff; text-align:center; line-height:1.6; background:#2a2d3e;}
.cptGrid .gridTb tbody td {padding:12px 10px; font-size:16px; font-weight:400; color:#757575; text-align:center; line-height:1.6; border-bottom:1px solid #ddd; background:#fff;}
.cptGrid .gridTb tbody tr:nth-child(2n) td {background:#f5f6fb;}
/* 그리드 내부 폼 */
/* 추가조작 */
.cptGrid .gridTb tr .left {text-align:left;}
.cptGrid .gridTb tr .center {text-align:center;}
.cptGrid .gridTb tr .right {text-align:right;}
.cptGrid .gridTb tr .top {vertical-align:top;}
.cptGrid .gridTb tr .middle {vertical-align:middle;}
.cptGrid .gridTb tr .bottom {vertical-align:bottom;}
.cptGrid .gridTb tr .bold {font-weight:bold;}


/* ---------------------------- table :: basic ---------------------------- */
.cptTable {width:100%; margin-bottom:40px; border-top:2px solid #35414c;}
.cptTable table {width:100%; border-collapse:collapse; border-spacing:0;}
.cptTable table th, .cptTable table td {border:1px solid #eee;}
.cptTable table th {padding:5px; background:#f6f6f6;}
.cptTable table td {padding:5px;}
.cptTable table .textBox {height:30px; line-height:29px; display:inline-block;}
.cptTable table .textBox.deco {margin:0 3px 0 2px;}
/* 추가조작 */
.cptTable .table tr .left {text-align:left;}
.cptTable .table tr .center {text-align:center;}
.cptTable .table tr .right {text-align:right;}
.cptTable .table tr .top {vertical-align:top;}
.cptTable .table tr .middle {vertical-align:middle;}
.cptTable .table tr .bottom {vertical-align:bottom;}
.cptTable .table tr .bold {font-weight:bold;}


/* ------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------ Form ----------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------ */
input[type=text] {width:100%; height:30px; padding-left:5px; border:1px solid #dbdbdb;}
input[type=password] {width:100%; height:30px; padding-left:5px; border:1px solid #dbdbdb;}
input[type=checkbox] {}
input[type=radio] {}
select {width:100%; height:30px; padding-left:5px; border:1px solid #dbdbdb;}

/* 기본 */
input.iptText {font-size:14px;}
input.iptChk {width:1px; height:1px; position:absolute; left:0; top:0; opacity:0.01;}
input.iptRdo {width:1px; height:1px; position:absolute; left:0; top:0; opacity:0.01;}
.iptLbl {display:inline-block;}
.iptSlt {font-size:14px;}
.textBox {height:30px; line-height:29px; display:inline-block;}
.textBox.deco {margin:0 3px 0 2px;}
/* ------------------------------------------------ 라디오/체크박스 ------------------------------------------------ */
/* 일반 체크박스/라디오 박스 */
.frmChoBox {display:inline-block;}
.frmChoBox .iptLbl {margin-right:10px; padding-top:5px; padding-bottom:5px;}
.frmChoBox .iptLbl:last-child {margin-right:0;}
.frmChoBox .iptChk + .iptLbl {padding-left:26px; font-size:14px; background:url(/common/images/icon/icon_check.png) left center no-repeat;}
.frmChoBox .iptChk:checked + .iptLbl {background:url(/common/images/icon/icon_check_on.png) left center no-repeat;}
.frmChoBox .iptRdo + .iptLbl {padding-left:26px; font-size:14px; background:url(/common/images/icon/icon_radio.png) left center no-repeat;}
.frmChoBox .iptRdo:checked + .iptLbl {background:url(/common/images/icon/icon_radio_on.png) left center no-repeat;}
/* 체크박스/라디오 리스트 */
.frmChoList {width:100%; display:flex; flex-wrap:wrap;}
.frmChoList .frmChoBox {width:200px;}
.frmChoList.w100 .frmChoBox {width:100px;}
.frmChoList.w150 .frmChoBox {width:150px;}
.frmChoList.w200 .frmChoBox {width:200px;}
.frmChoList.w250 .frmChoBox {width:250px;}
.frmChoList.w300 .frmChoBox {width:300px;}
.frmChoList.col6 .frmChoBox {width:50%;}
.frmChoList.col4 .frmChoBox {width:33.333%;}
.frmChoList.col3 .frmChoBox {width:25%;}
.frmChoList.col2 .frmChoBox {width:18.888%;}
.frmChoList.vertical .frmChoBox {width:100%;}
/* 텍스트 없는 체크박스/라디오 */
.frmChoBox.only .iptChk + .iptLbl {height:30px; margin:0; padding-left:20px;}
.frmChoBox.only .iptRdo + .iptLbl {height:30px; margin:0; padding-left:20px;}

/* 버튼식 체크박스/라디오 박스 */
.frmChoBtn {display:flex;} 
.frmChoBtn .iptChk + .iptLbl {width:100px; height:30px; font-size:14px; text-align:center; color:#fff; line-height:26px; border-radius:3px; border:1px solid #444; background:#666;}
.frmChoBtn .iptChk:checked + .iptLbl {border:1px solid #2784ff; background:#319af6;}
.frmChoBtn .iptRdo + .iptLbl {width:100px; height:30px; font-size:14px; text-align:center; color:#fff; line-height:26px; border-radius:3px; border:1px solid #444; background:#666;}
.frmChoBtn .iptRdo:checked + .iptLbl {border:1px solid #2784ff; background:#319af6;}



/* ------------------------------ 한줄 안에 여러폼을 넣어야 할 경우 ------------------------------ */
.frmGroup {display:flex;}
.frmGroup.phone {flex-wrap:nowrap;} /* 핸드폰 */
.frmGroup.email {flex-wrap:nowrap;} /* 이메일 */



/* ------------------------------------------------------------------------------------------------------ */
/* --------------------------------------------- 모듈 module -------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------ */
.modPopup {width:100%; height:100%; display:none; position:fixed; left:0; top:0; z-index:1000;}
.modPopup.on {display:block;}

.modPopup .popupDim {width:100%; height:100%; font-size:0; background:rgba(0,0,0,0.4); position:fixed; left:0; top:0;}
.modPopup.on .popupDim {opacity:0; animation: popOpenDimd 0.2s linear forwards;}
@keyframes popOpenDimd { 0% {opacity:0;} 100% {opacity:1;} }

.modPopup .popupArea {width:762px; height:auto; max-height: calc(100% - 100px); position:absolute; right:50%; bottom:50%; transform: translate(50%,50%);}

.modPopup .popupInMotion {width:100%; height:100%; background:#fff;}
.modPopup.on .popupInMotion {opacity:0; transform:scale(0.7); animation: popOpenScale 0.3s linear forwards;}
@keyframes popOpenScale { 0% {opacity:0; transform:scale(0.7);} 100% {opacity:1; transform:scale(1);} }

.modPopup .btnPopClose {width:50px; height:50px; font-size:0; background:url(/images/icon/icon-close-pop.png) center no-repeat; position:absolute; right:20px; top:-30px;}
.modPopup .popupContGroup {height:100%; max-height: calc(100vh - 100px); padding:20px; overflow:auto;}
.modPopup .popupContGroup.noPd {padding:0;}



/* ------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------- 콤포넌트 간 거리 ------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------ */










/* ----------------------------------------- Form Group ----------------------------------------- */
/* ---------------------------------------- Compnent Name ---------------------------------------- */
/* ----------------------------------------- Common Name ----------------------------------------- */


/* Component Type */
/* Common Type */
/* Form Name or Form Type */

/*
input {width:100%; height:30px; padding:8px; font-size:14px; color:#333; border:1px solid #dbdbdb;}
input.datepick {padding-left:45px; background:url(/common/images/icon/icon_calander.png) 15px center no-repeat;}
select {width:100%; height:30px; padding-left:25px; font-size:14px; color:#333; border:1px solid #dbdbdb; background:#fff url(/common/images/icon/icon_select.png) calc(100% - 20px) center no-repeat;}

.btn {color:#fff; text-align: center; border:1px solid #000;}
.btn.topSearch {width:160px; height:40px; margin-top:40px; font-size:17px; line-height:40px; border-radius:3px; border:0; background:#0357be;}

*/