@charset "UTF-8";

/* table  common */
table { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; border-top: 1px solid #8f8f8f; border-bottom: 1px solid #8f8f8f; }
caption { overflow: hidden; width: 0; height: 0; font-size: 0; line-height: 0; }
th { background: #f6f6f6; padding: 14px 10px; color: #222; border-left: 1px solid #c8c8c8; word-wrap: break-word; }
td { vertical-align: middle; padding: 14px 10px; border-left: 1px solid #c8c8c8; border-bottom: 1px solid #c8c8c8; word-wrap: break-word; }
tr th:first-child { border-left: 0; }
tr td:first-child { border-left: 0; }

.tbl-type2 th { color: #fff; background: #4d5973; }
.tbl-type2 th:first-child { background: #536894; }

/* 햄버거 메뉴 오픈시 bg */
body.gnb-open { height: 100%; overflow: hidden; }
body.gnb-open header:after { position: fixed; top: 0; bottom: 0; left: 0; right: 0; content: ''; background: rgba(0, 0, 0, 0.7); z-index: 100; }

/* ir */
.invisible { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; }

/*header*/
header { position:relative; padding:0 15px; height:58px; z-index: 100; background:#fff; }
header h1 {position:absolute; top:18px; left:18px;}
header h1 a { overflow: hidden; display: block; width: 26px; height: 21px; color: transparent; background: url(../images/cl/logo.png) 0 0 no-repeat; background-size: 62px 42px; }
header > a i { color: #222; }
	header.main {background:none;}
	header.main h1 a {width:62px; background-position:0 100%; padding:10px}
	header.main a > i { color: #fff; }
header .btn-alert { display: block; position: absolute; top: 18px; right: 90px; width: 28px; height: 23px; background-position: -66px 0px; font-size: 22px; }
header .btn-alert strong { display: block; position: absolute; top: -2px; right: -5px; min-width: 15px; height: 15px; background: #e6303c; color: #fff; text-align: center; font-size: 10px; line-height: 15px; padding: 0 5px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; font-family: HelveticaNeue,AppleSDGothicNeo,Sans-serif; box-sizing: border-box; }
header .btn-srch { display: block; position: absolute; top: 18px; right: 54px; width: 22px; height: 22px; font-size: 22px; }
header .btn-total-open { display: block; position: absolute; top: 20px; right: 17px; width: 22px; height: 22px; font-size: 17px; }

header nav { position: fixed; top: 0; right: 0; bottom: 0; width: 290px; padding: 19px 0 0 0; background:#f0f0fa url(../images/cl/bg-gnb.gif) no-repeat 0 0; background-size: 340px 140px; -webkit-transform: translate3d(320px, 0, 0); transform: translate3d(320px, 0, 0); -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 1000; }
header nav .list-channel { overflow: hidden; position: relative; }
header nav .list-channel li { float: left; position: relative; font-size: 17px; opacity: .5; }
header nav .list-channel li.current { font-size: 20px; opacity: 1; }
header nav .list-channel li.current a { color: #fff; }
header nav .list-channel li:first-child:after { display: none; }
header nav .list-channel li:first-child a { padding-left: 15px; }
header nav .list-channel li a { padding: 0 20px; }
header nav .list-channel li:after { display: block; content: ''; height: 15px; width: 1px; background: #9c1721; position: absolute; left: 0; top: 50%; margin-top: -5px; }
header nav .list-utils { overflow: hidden; margin: 22px 0; width: 100%; }
header nav .list-utils li { float: left; width: 25%; text-align: center; }
header nav .list-utils li a { display: block; position: relative; font-size: 15px; color: #fff; line-height: 1; letter-spacing: -0.126em; }
header nav .list-utils li a i { display: block; margin-bottom: 14px; font-size: 24px; opacity: .8; }
header nav .list-utils li:nth-child(2) i { font-size: 26px; margin-bottom: 12px; }

header nav #mCfmClMenu { position: relative; height: 100%;}
header nav #mCfmClMenu .category { overflow: auto; position: absolute; top: 120px; bottom: 0; left: -8px; width: 128px; padding-left: 8px; padding-bottom: 200px; font-size: 16px; -webkit-overflow-scrolling: touch; }
header nav #mCfmClMenu .category li { background: #f0f0fa; margin-bottom: 5px; }
header nav #mCfmClMenu .category li i { margin-left: 6px; color: #222; vertical-align: text-bottom; }
header nav #mCfmClMenu .category li:first-child a { padding: 20px 0 19px 18px; }
header nav #mCfmClMenu .category li:first-child a i { color: #d71826; }
header nav #mCfmClMenu .category li.active { background: #fff; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); }
header nav #mCfmClMenu .category li.active > a:before { display: block; width: 8px; height: 100%; position: absolute; top: 0px; left: -8px; content: ""; background: #fff; }
header nav #mCfmClMenu .category li.active > a:after { display: block; position: absolute; bottom: -8px; left: -8px; content: ""; border-bottom: 8px solid transparent; border-right: 8px solid #24262e; }
header nav #mCfmClMenu .category a { display: block; position: relative; padding: 18px 0 18px 18px; line-height: 1; }
header nav #mCfmClMenu .category a span { display: block; padding-top: 7px; }
header nav #mCfmClMenu .category-depth { overflow-y: auto; position: absolute; top: 120px; bottom: 0; left: 120px; width: 170px; height: 100%; padding: 10px 15px 200px; background: #fff; -webkit-overflow-scrolling: touch; }
header nav #mCfmClMenu .category-depth .depth02 { display: none; }
header nav #mCfmClMenu .category-depth .depth02.active { display: block; }
header nav #mCfmClMenu .category-depth .depth02:first-child li a { display: block; padding: 13px 0 12px; font-size: 15px; color: #000; letter-spacing: -0.1em; }
header nav #mCfmClMenu .category-depth .depth02:first-child li a span { display: block; padding-top: 4px; font-size: 11px; color: #999; }
header nav #mCfmClMenu .category-depth .depth02 > li { background: #fff; }
header nav #mCfmClMenu .category-depth .depth02 > li > a { display: block; position: relative; padding: 15px 0; font-size: 15px; border-bottom: 1px solid #e0e0e0; color: #000; line-height: 1; letter-spacing: -0.126em; }
header nav #mCfmClMenu .category-depth .depth02 > li > a i { float: right; padding-top: 4px; font-size: 8px; color: #000;transition: all 0.5s; }
header nav #mCfmClMenu .category-depth .depth02 > li > a.active i{transform: rotate(180deg);margin-right: -3px}
header nav #mCfmClMenu .category-depth .depth02 .depth03 { display: none; padding-bottom: 10px; }
header nav #mCfmClMenu .category-depth .depth02 .depth03 > li { margin-top: 6px; }
header nav #mCfmClMenu .category-depth .depth02 .depth03 > li.active a:after { display: none; }
header nav #mCfmClMenu .category-depth .depth02 .depth03 > li a { display: block; position: relative; padding: 7px 0; font-size: 13px; color: #222; line-height: 1; }
header nav #mCfmClMenu .category-depth .depth02 .depth03 > li a i { position: absolute; right: 0; top: 50%; margin-top: -5px; color: #000; font-size: 10px; }
header nav #mCfmClMenu .category-depth .depth02 .depth04 { display: none; margin-top: 10px; margin-bottom: 15px; background: #f9f9fd; }
header nav #mCfmClMenu .category-depth .depth02 .depth04 li { margin-top: 0; }
header nav #mCfmClMenu .category-depth .depth02 .depth04 li a { font-size: 13px; color: #666; padding: 7px 15px; letter-spacing: -0.126em; }
header nav #mCfmClMenu .category-depth .depth02 .depth04 li a:before, header nav #mCfmClMenu .category-depth .depth02 .depth04 li a:after { display: none; }
header nav.open { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
header nav .btn-total-close { top: 20px; right: 15px; font-size: 19px; position: absolute; }

/*footer*/
footer { position: relative; background: #f2f2f2; }
footer .notice { overflow: hidden; display: block; padding: 23px 15px 22px; font-size: 15px; background: #fff; color: #222; line-height: 1; border-top: 1px solid #e5e5e5; }
footer .notice strong { position: relative; float: left; display: block; padding-right: 8px; font-size: 15px; }
footer .notice strong:after { display: block; content: ""; position: absolute; width: 1px; height: 15px; right: 0; top: 50%; margin-top: -7px; background: #adadad; }
footer .notice span { display: block; min-width: 237px; padding-left: 5px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
footer .family-links { border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; }
footer .family-links .box { position: relative; float: left; width: 50%; }
footer .family-links .box:first-child { border-right: 1px solid #d5d5d5; }
footer .family-links:after { clear: both; display: block; content: ""; }
footer .family-links select { width: 100%; padding: 14px 15px; border: none; -webkit-appearance: none; background-color: #ededed; font-size: 13px; }
footer .family-links select:first-child { border-right: 1px solid #dcdcdc; }
footer .family-links i { position: absolute; right: 15px; top: 20px; color: #000; font-size: 7px; }
footer .list-quick-01 ul, footer .list-quick-02 ul { overflow: hidden; font-size: 11px; padding: 16px 15px; }
footer .list-quick-01 ul li, footer .list-quick-02 ul li { float: left; padding-right: 9px; }
footer .list-quick-01 ul li a, footer .list-quick-02 ul li a { color: #000; }
footer .list-quick-01 ul li { position: relative; float: left; letter-spacing: -0.13em; }
footer .list-quick-01 ul li:first-child { padding-left: 0; }
footer .list-quick-01 ul li:first-child:after { display: none; }
footer .list-quick-01 ul li:after { display: block; content: ''; height: 12px; width: 1px; background: #797979; position: absolute; left: -5px; top: 50%; margin-top: -6px; }
footer .list-quick-01 ul li a { line-height: 1; }
footer .list-quick-02 ul { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; overflow: hidden; font-size: 12px; padding: 17px 15px; }
footer .list-quick-02 ul li { float: left; padding-right: 5px; }
footer .list-quick-02 ul li a { display: block; font-size: 9px; line-height: 1.4; letter-spacing: -0.2em; }
footer .list-quick-02 ul li a img { float: left; width: 30px; height: 22px; margin-right: 4px; }
footer .list-quick-02 ul li:nth-child(2) a img { width: 37px; height: 24px; }
footer address { padding: 20px 15px 60px; font-style: normal; font-size: 11px; color: #666; line-height: 1.4; letter-spacing: -0.128em; }
footer .btn-gopc { display: block; margin-top: 20px; padding: 12px; border: 1px solid #dddddd; font-size: 13px; text-align: center; color: #888; }

/* temp-header, temp-footer */
.temp-header img {max-width:640px;width:100%;margin:0 auto;}
.temp-footer img {max-width:640px;width:100%;margin:0 auto;}