@charset "UTF-8";
@import url('font.css');
@import url('default.css');


/*
=====================
1: Base Setting
2: Common Setting
	2-1: Layout
	2-2: Basic
3: Main
4: Contents
5: Mypage
=====================
*/


/* 1: Base Setting
=========================================================================================== */
.hidden {display:none;}
.blind {visibility:hidden;}


.cursor {cursor:pointer;}
.non-cursor {cursor:default;}

.ta-r {text-align:right !important;}
.ta-l {text-align:left !important;}
.ta-c {text-align:center !important;}

.va-t {vertical-align:top !important;}
.va-m {vertical-align:middle !important;}
.va-b {vertical-align:bottom !important;}

.clearfix {}
.clearfix:after {content:""; clear:both; display:block;}
.fl-l {float:left;}
.fl-r {float:right;}


.blind {display:none;}
.clear {clear:both; height:0;}


.c-black {color:#000 !important;}
.c-red {color:#ce0000 !important;}
.c-gray {color:#8f8d8d !important;}
.c-green {color:#62b43d !important;}
.c-orange {color:#f89828 !important;}
.c-purple {color:#9c84d8 !important;}


.pa-b1 {padding-bottom:120px;}
.pa-b2 {padding-bottom:100px;}

.ma-b1 {margin-bottom:120px;}
.ma-b2 {margin-bottom:100px;}


.f-en {font-family: serif;}
.f-bold {font-weight: 900; font-family: 'Roboto', 'Noto Sans KR', sans-serif;}


iframe[name='google_conversion_frame'] {border:0; width:0; height:0; padding:0; margin:0; position:absolute; z-index:-1; visibility:hidden;}

.t-dot-solo {overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}

.under:hover {
	text-decoration: underline;
}

/* 2: Common Setting
=========================================================================================== */

/* 2-1: Basic
=========================== */
html {width:100%; font-size:62.5%;}
body {width:100%; font-family:'Noto Sans KR', serif; color:#5a5a5a; font-weight: 300; font-size:16px; line-height:1.2; -webkit-text-size-adjust: 100%; }
.inr-c {max-width:1180px; margin:0 auto;}


/*간격*/
.pr-mb0 {margin-bottom: 70px !important;}
.pr-mb1 {margin-bottom: 50px !important;}
.pr-mb2 {margin-bottom: 30px !important;}
.pr-mb3 {margin-bottom: 40px !important;}


/*버튼*/
.btn-bot {margin-top:40px;}
.btn-bot .btn-pk {min-width:110px;}

.btn-line {padding-top: 50px; border-top: 1px solid #ddd; text-align: center; font-size: 0;}

.mbtn_n2 .btn-pk {width: 200px; margin-left: 20px;}
.mbtn_n2 .btn-pk:first-child {margin-left: 0;}

.btn-pk {
	display:inline-block; *display:inline-block; *zoom:1; padding:8px 10px;
	color:#fff; font-size:14px; text-align: center;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	border: 1px solid #cdcdcd;
	transition:all .3s ease; -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease;
}
.btn-pk.bdrs {-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

.btn-pk.b {min-width:160px; padding:15px 40px; font-size:22px;}
.btn-pk.bb {min-width:160px; padding:10px 40px; font-size:20px; font-weight: 700; border-width: 2px;}
.btn-pk.n {min-width:100px; padding:9px 15px; font-size:14px; }
.btn-pk.nb {min-width:100px; padding:15px 15px; font-size:16px; }
.btn-pk.s {min-width:40px; padding:5px 10px; font-size:14px; line-height: 1.2; }


/*.btn-pk.color {
	background: rgb(208,97,54);
	background: -moz-linear-gradient(90deg, rgba(208,97,54,1) 0%, rgba(229,28,125,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(208,97,54,1) 0%, rgba(229,28,125,1) 100%);
	background: linear-gradient(90deg, rgba(208,97,54,1) 0%, rgba(229,28,125,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d06136",endColorstr="#e51c7d",GradientType=1);
	color: #fff;
}*/
.btn-pk.purple {color: #9c84d8; border-color: #9c84d8; background-color: #fff;}
.btn-pk.purple.rv {color: #fff; border-color: #9c84d8; background-color: #9c84d8;}

.btn-pk.gray {color: #fff; border-color: #9a9899; background-color: #9a9899;}
.btn-pk.orange {color: #fff; border-color: #f8982a; background-color: #f8982a;}

.btn-pk.wid1 {width: 120px;}


input.btn-pk {color: #fff; border: 0; height: auto; min-width:200px; font-size: 21px; padding: 15px 30px; cursor:pointer;}

.ft{font-size:12px;}



/*탭*/
.tab {}
.tab ul {font-size: 0;}
.tab li {position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: top; }
_::-moz-svg-foreign-content, :root .tab li {float: left;}

.tab.ty1 {border-bottom: 1px solid #d5d5d5;}
.tab.ty1 ul {border-left: 1px solid #d5d5d5;}
.tab.ty1 li {border: 1px solid #d5d5d5; border-left: 0; margin-bottom: -1px; text-align: center;}
.tab.ty1 li a {display: block; padding: 10px; min-width:110px; font-size: 16px; line-height: 1.2; color: #555555;}
.tab.ty1 li.on {border-bottom-color: #fff;}
.tab.ty1 li.on a {color: #8d3d1d;}

.tab.ty2 {margin-bottom: 40px;}
.tab.ty2 ul {display: flex; width: 100%;}
.tab.ty2 li {flex:1; position: relative;}
.tab.ty2 li a {display: block; padding: 12px 10px; font-size: 24px; color: #1a1a1a; text-align: center;}
.tab.ty2 li.on a {color: #f89828;}
.tab.ty2 li.on a span {position: relative; display: inline-block; line-height: 1;}
.tab.ty2 li.on a span:after {content:""; position: absolute; left: -15px; top: -10px; width: 12px; height: 11px; background-image: url('../images/common/ico_common.png'); background-repeat: no-repeat; background-position: -71px -97px;}

.tab.ty3 {margin-bottom: 35px; border-top: 1px solid #f4f4f4;}
.tab.ty3 ul {display: flex; width: 100%; border-left: 1px solid #f4f4f4;}
.tab.ty3 li {flex:1; position: relative; border-right: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4; }
.tab.ty3 li a {display: block; padding: 24px 10px; font-size: 16px; color: #000; text-align: center;}
.tab.ty3 li.on {border-bottom-color: #fff;}
.tab.ty3 li.on a {color: #9c84d8;}
.tab.ty3 li.on:after {content:""; position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background-color: #9c84d8;}

.tab.ty4 {margin-bottom: 30px;}
.tab.ty4 ul {display: flex; width: 100%;}
.tab.ty4 li {flex:1; position: relative; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #f9f9f9;}
.tab.ty4 li:first-child {border-left: 0;}
.tab.ty4 li a {display: block; padding: 15px 10px; font-size: 16px; color: #000; text-align: center;}
.tab.ty4 li.on {border-bottom-color: #fff; background-color: #fff; border-left: 1px solid #ddd;}
.tab.ty4 li.on a {color: #9c84d8;}
.tab.ty4 li.on:after {content:""; position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background-color: #9c84d8;}


/*IR 기법 아이콘 세트*/
.i-aft{position: relative;display: inline-block;vertical-align: middle;*display: inline;*zoom: 1;}
.i-aft:after{content:""; position: absolute; left: 0;top: 50%;display: inline-block;overflow: hidden;width: 0;height: 0;content: '';text-align: left;text-indent: -9999px;background-image: url('../images/common/ico_common.png');background-repeat: no-repeat;*display: inline;*zoom: 1;}
.i-set{display: inline-block;overflow: hidden;text-align: left;vertical-align: middle;text-indent: -9999px;line-height: 0;background-image: url('../images/common/ico_common.png');background-repeat: no-repeat;*display: inline;*zoom: 1;}


.i-aft.i_m1_1 {padding-top: 60px;}
.i-aft.i_m1_1:after {left: 50%; top: 0; margin-left: -16.5px; width: 33px; height: 47px; background-position: -10px -10px;}
.i-aft.i_m1_2 {padding-top: 60px;}
.i-aft.i_m1_2:after {left: 50%; top: 0; margin-left: -22.5px; width: 45px; height: 47px; background-position: -96px -10px;}
.i-aft.i_m1_3 {padding-top: 60px;}
.i-aft.i_m1_3:after {left: 50%; top: 0; margin-left: -28px; width: 56px; height: 47px; background-position: -182px -10px;}
.i-aft.i_m1_4 {padding-top: 60px;}
.i-aft.i_m1_4:after {left: 50%; top: 0; margin-left: -28px; width: 56px; height: 47px; background-position: -272px -10px;}

.i-aft.i_call1 {padding-left: 94px;}
.i-aft.i_call1:after {left: 0; top: 50%; margin-top: -31.5px; width: 72px; height: 63px; background-position: -251px -10px;}

.i-aft.i_m2_1 {padding-top: 90px;}
.i-aft.i_m2_1:after {left: 50%; top: 0; margin-left: -43.5px; width: 87px; height: 57px; background-position: -374px -10px;}
.i-aft.i_m2_2 {padding-top: 90px;}
.i-aft.i_m2_2:after {left: 50%; top: 0; margin-left: -35.5px; width: 71px; height: 57px; background-position: -480px -10px;}
.i-aft.i_m2_3 {padding-top: 90px;}
.i-aft.i_m2_3:after {left: 50%; top: 0; margin-left: -22.5px; width: 45px; height: 57px; background-position: -571px -10px;}
.i-aft.i_m2_4 {padding-top: 90px;}
.i-aft.i_m2_4:after {left: 50%; top: 0; margin-left: -33.5px; width: 69px; height: 57px; background-position: -636px -10px;}
.i-aft.i_m2_5 {padding-top: 90px;}
.i-aft.i_m2_5:after {left: 50%; top: 0; margin-left: -41px; width: 82px; height: 57px; background-position: -727px -10px;}

.i-aft.i_arr_r {padding-left: 25px;}
.i-aft.i_arr_r:after {left: 0; top: 50%; margin-top: -7px; width: 7px; height: 14px; background-position: -44px -97px;}
.i-aft.i_arr_r1 {padding-right: 10px;}
.i-aft.i_arr_r1:after {left: auto; right: 0; top: 50%; margin-top: -7px; width: 7px; height: 14px; background-position: -103px -97px;}
.i-aft.i_arr_r2 {padding-right: 18px;}
.i-aft.i_arr_r2:after {left: auto; right: 0; top: 50%; margin-top: -7px; width: 7px; height: 14px; background-position: -246px -97px;}
.i-aft.i_arr_l2 {padding-left: 18px;}
.i-aft.i_arr_l2:after {left: 0; top: 50%; margin-top: -7px; width: 7px; height: 14px; background-position: -246px -117px;}

.i-aft.i_check {padding-left: 70px;}
.i-aft.i_check:after {left: 0; top: 50%; margin-top: -21px; width: 52px; height: 42px; background-position: -174px -97px;}

.i-aft.i_play {padding-left: 60px;}
.i-aft.i_play:after {left: 0; top: 50%; margin-top: -30px; width: 56px; height: 47px; background-position: -182px -10px;}

.i-aft.i_log1 {padding-left: 50px;}
.i-aft.i_log1:after {left: 0; top: 50%; margin-top: -25px; width: 35px; height: 51px; background-position: -496px -97px;}
.i-aft.i_log2 {padding-left: 60px;}
.i-aft.i_log2:after {left: 0; top: 50%; margin-top: -20px; width: 48px; height: 43px; background-position: -541px -97px;}

.i-aft.i_file_zip {padding-left: 24px;}
.i-aft.i_file_zip:after {left: 0; top: 50%; margin-top: -10px; width: 17px; height: 19px; background-position: -398px -99px;}
.i-aft.i_file_pdf {padding-left: 24px;}
.i-aft.i_file_pdf:after {left: 0; top: 50%; margin-top: -8px; width: 16px; height: 16px; background-position: -426px -98px;}
.i-aft.i_file_hwp {padding-left: 24px;}
.i-aft.i_file_hwp:after {left: 0; top: 50%; margin-top: -8px; width: 14px; height: 16px; background-position: -374px -98px;}

.i-aft.i_org1_1 {padding-top: 90px;}
.i-aft.i_org1_1:after {left: 50%; top: 0; margin-left: -35px; width: 82px; height: 70px; background-position: -10px -190px;}
.i-aft.i_org1_2 {padding-top: 90px;}
.i-aft.i_org1_2:after {left: 50%; top: 0; margin-left: -32px; width: 64px; height: 64px; background-position: -116px -190px;}
.i-aft.i_org1_3 {padding-top: 90px;}
.i-aft.i_org1_3:after {left: 50%; top: 0; margin-left: -36px; width: 80px; height: 72px; background-position: -202px -190px;}


.i-aft.i_under1_1 {padding-left: 110px;}
.i-aft.i_under1_1:after {left: 0; top: 50%; margin-top: -45px; width: 90px; height: 90px; background-position: -10px -481px;}
.i-aft.i_under1_2 {padding-left: 110px;}
.i-aft.i_under1_2:after {left: 0; top: 50%; margin-top: -45px; width: 90px; height: 90px; background-position: -120px -481px;}
.i-aft.i_under1_3 {padding-left: 110px;}
.i-aft.i_under1_3:after {left: 0; top: 50%; margin-top: -45px; width: 90px; height: 90px; background-position: -234px -481px;}
.i-aft.i_under1_4 {padding-left: 110px;}
.i-aft.i_under1_4:after {left: 0; top: 50%; margin-top: -45px; width: 90px; height: 90px; background-position: -344px -481px;}
.i-aft.i_under1_5 {padding-left: 110px;}
.i-aft.i_under1_5:after {left: 0; top: 50%; margin-top: -45px; width: 90px; height: 90px; background-position: -454px -481px;}
.i-aft.i_under1_6 {padding-left: 110px;}
.i-aft.i_under1_6:after {left: 0; top: 50%; margin-top: -45px; width: 90px; height: 90px; background-position: -564px -481px;}

.i-aft.i_source {padding-left: 100px;}
.i-aft.i_source:after {left: 0; top: 50%; margin-top: -40px; width: 80px; height: 80px; background-position: -568px -301px;}


.i-set.i_home {width: 14px; height: 14px; background-position: -10px -97px;}
.i-set.i_menu {width: 24px; height: 16px; background-position: -130px -97px;}
.i-set.i_file_zip {width: 17px; height: 19px; background-position: -398px -99px;}
.i-set.i_file_pdf {width: 16px; height: 16px; background-position: -426px -98px;}
.i-set.i_file_hwp {width: 14px; height: 16px; background-position: -374px -98px;}
.i-set.i_comment {width: 11px; height: 10px; background-position: -373px -134px;}

.i-set.i_org2_1 {width: 62px; height: 62px; background-position: -312px -189px;}
.i-set.i_org2_2 {width: 59px; height: 43px; background-position: -394px -190px;}

.i-set.i_center1 {width: 150px; height: 150px; background-position: -10px -301px;}
.i-set.i_center2 {width: 150px; height: 150px; background-position: -184px -301px;}

.i-set.i_under2_1 {width: 130px; height: 130px; background-position: -10px -601px;}
.i-set.i_under2_2 {width: 130px; height: 130px; background-position: -158px -601px;}
.i-set.i_under2_3 {width: 130px; height: 130px; background-position: -308px -601px;}
.i-set.i_under2_4 {width: 130px; height: 130px; background-position: -458px -601px;}
.i-set.i_under2_5 {width: 130px; height: 130px; background-position: -608px -601px;}
.i-set.i_under2_6 {width: 130px; height: 130px; background-position: -758px -601px;}
.i-set.i_under2_7 {width: 130px; height: 130px; background-position: -908px -601px;}
.i-set.i_under2_8 {width: 130px; height: 130px; background-position: -1058px -601px;}
.i-set.i_under2_9 {width: 130px; height: 130px; background-position: -758px -451px;}
.i-set.i_under2_10 {width: 130px; height: 130px; background-position: -908px -451px;}


/* 2-2: Layout
=========================== */
#wrap {overflow:hidden; word-break:keep-all; word-wrap:break-word; padding-top: 100px; letter-spacing:-0.0325em;}

#header {z-index:102; position:fixed; left: 0; top: 0; width: 100%; height: 100px; border-bottom: 1px solid #ddd; background-color: #fff;}
#header .inr-c {position: relative;}
#header .logo {float: left; display: inline-block; vertical-align: top; transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s;}
#header .logo a {display: block; line-height: 100px;}
#header .logo a img {vertical-align: top; margin-top: 30px;}

#header .gnbbox {position: relative; z-index: 1; margin-left: 245px; padding-top: 40px;}
#header .gnbtx {display: none; position: absolute; left: -245px; top: 100px; padding-top: 30px;}
#header .gnbtx .t1 {margin-bottom: 20px; font-size: 26px; color: #000; line-height: 1.2;}
#header .gnbtx .t2 {position: relative; padding-bottom: 10px; color: #999; font-size: 14px; line-height: 1.5;}
#header .gnbtx:after {content:""; position: absolute; left: 0; bottom: 0; width: 20px; height: 2px; background-color: #f89b2e;}
#header .gnb {}
#header .gnb > ul {font-size: 0; text-align: center;}
#header .gnb > ul > li {position: relative; display: inline-block; width: 16.66%; vertical-align: top;}
#header .gnb > ul > li > a {display: block;  font-size: 16px; line-height: 40px; padding-bottom: 20px; color: #000; transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s;}
#header .gnb > ul > li:last-child > a {padding-right: 0;}
#header .depth2 {display: none; position: absolute; left: 0; top: 60px; width: 100%; text-align: left; padding: 15px 0;}
#header .depth2 ul {padding: 10px 0; height: 250px; border-left: 1px solid #e7e7e7;}
#header .depth2 li {}
#header .depth2 li a {display: block; padding: 10px 20px; font-size: 14px; color: #000;}
#header .btn_gnb {display: none;}

#header .gnb > ul > li.on > a,
#header .gnb > ul > li:hover > a {color: #f89b2e;}
#header .depth2 li.on a,
#header .depth2 li:hover a {color: #f89b2e;}


#header .rgh {z-index: 2; position: absolute; right: 0; top: 10px; font-size: 0;}
#header .rgh a {position: relative; display: inline-block; vertical-align: top; padding-left: 10px; margin-left: 10px; line-height: 20px; font-size: 13px; color: #000; }
#header .rgh a:after {content:""; position: absolute; left: 0; top: 50%; margin-top: -5px; width: 1px; height: 10px; background-color: #000;}
#header .rgh a:first-child:after {content:none;}

#header .modal-cover {height: 300px; border-top: 1px solid #ddd; border-bottom: 2px solid #f89b2e; background-color: #fff;}
#header.ovr:after {content:""; z-index: 0; position: absolute; left: 0; top: 100px; width: 100%; height: 300px; border-top: 1px solid #ddd; border-bottom: 2px solid #f89b2e; background-color: #fff;}
#header.ovr .gnbtx {display: block;}

/*
#header.scroll {
	height: 90px;
	background-color: #fff; border-bottom: 1px solid #ddd;
	/*-webkit-animation:hdtop 1s ease-in;  -moz-animation:hdtop 1s ease-in;  -o-animation:hdtop 1s ease-in;  animation:hdtop 1s ease-in; *
	transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s;
}
#header.scroll .gnb {margin-top: 5px;}
#header.scroll .gnb li a {color: #000;}
#header.scroll .gnb li.on a {color: #ec6c79;}
#header.scroll .logo a {display: block; line-height: 90px;}
#header.scroll .logo img {height: 70px; vertical-align: top; margin-top: 10px;}
#header.scroll .rgh a {margin-top: 15px;}
*/

@-webkit-keyframes hdtop {
from {top: -50%;}
to {top: 0;}
}
@-moz-keyframes hdtop {
from {top: -50%;}
to {top: 0;}
}
@-o-keyframes hdtop {
from {top: -50%;}
to {top: 0;}
}
@keyframes hdtop {
from {top: -50%;}
to {top: 0;}
}



/*footer*/
#footer {background-color:#2c2a2b;}
#footer p {font-size: 14px; line-height: 1.5; color: #959595;}
#footer p span {margin-right: 20px;}
#footer p em {margin-right: 3px; color: #fff; font-weight: 400;}
#footer p.copy {margin-top: 15px;}
.foo_link {border-bottom: 1px solid #484848; background-color: #333333;}
.foo_link li {position: relative; display: inline-block; vertical-align: top;}
.foo_link li a {display: block; padding: 20px 12px; font-size: 13px; color: #959595;}
.foo_link li:first-child a {padding-left: 0;}
.foo_link li:after {content:""; position: absolute; left: 0; top: 50%; width: 1px; height: 10px; margin-top: -5px; background-color: #959595;}
.foo_link li:first-child {padding-left: 0;}
.foo_link li:first-child:after {content:none;}

.foo_cont {padding: 30px 0 35px; }
.foo_cont .inr-c {padding-left: 270px; background: url(../images/common/logo_foo.png) 0 center no-repeat;     box-sizing: border-box;}


.scroll_top {display: none;}


.footer_more {padding: 10px 0; text-align: center; background-color: #fff; border-top: 1px solid #ececec;}
.footer_more li {display: inline-block; vertical-align: top; margin: 0 3px;}
.footer_more ul {display: flex; justify-content: center; gap: 5px; flex-wrap: wrap;}




/*타이틀*/
.hd_tit1 {margin-bottom: 35px; text-align: center; color: #555;}
.hd_tit1 .h {margin-bottom: 14px; font-weight: 700; font-size: 40px;}
.hd_tit1 .t {line-height: 1.5;}




/*메인*/
.bxMain {overflow:hidden; position: relative; height: 500px; background-color: #eee;}
.bxMain .slider_img {height: 500px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.bxMain .slider_txt {position: absolute; top: 50%; left: 50%; margin-left: -590px; width: 1180px; z-index: 1; font-size: 16px; color: #fff; line-height: 1.5; text-shadow:1px 0 1px rgba(0,0,0,.7); transform:translateY(-50%);
	animation-duration: 5s; animation-name: slidein; /*animation-iteration-count: infinite;*/ animation-direction: alternate;}
.bxMain .slider_txt > div {display: inline-block; text-align: center;}
.bxMain .slider_txt .h1 {margin-bottom: 10px; font-weight: 700; font-size: 50px; line-height: 1;}

.bxMain .item .slider_img {height: 500px;}
.bxMain .item .slider_txt  {transition:all 1s linear; -webkit-transition:all 1s linear; -moz-transition:all 1s linear; -o-transition:all 1s linear; transition-delay: 1s; }
.bxMain .owl-dot-botm .owl-dots {display: inline-block; vertical-align: middle; position: static; width: auto;}
.bxMain .owl-dots .owl-dot {float: left; display: inline-block; width: 12px; height: 12px; margin: 0 10px; border: 2px solid #fff; background: none;}
.bxMain .owl-dots .owl-dot.active {background-color: #fff;}

.bxMain .owl-nav {}
.bxMain .owl-nav > div {position: absolute; top: 50%; margin-top: -33px; width: 36px; height: 66px; text-indent: -9999px; background-position: center center; background-repeat: no-repeat;}
/*.bxMain .owl-nav > div.owl-prev {left: 50%; margin-left: -620px; background-image: url('../images/common/btn_slider_perv.png');}
.bxMain .owl-nav > div.owl-next {right: 50%; margin-right: -620px; background-image: url('../images/common/btn_slider_next.png');}*/

.bxMain .active .slider_txt {opacity:1;}
@keyframes slidein {
0% { opacity:1;}
50% {opacity:0;}
100% {opacity:1;}
}


.area_main1 {z-index: 10; position: absolute; left: 0; width: 100%; margin-top: -70px;}
.area_main1 .inr-c {overflow:hidden; background-color: #fff;}
.area_main1 .lft {float: left; width: 45%;}
.area_main1 .lft ul {font-size: 0;}
.area_main1 .lft li {display: inline-block; vertical-align: top; width: 25%; padding: 20px 0; font-size: 16px; color: #000; text-align: center;}
.area_main1 .lft li a {display: block; padding: 5px 0; border-left: 1px solid #d5d5d5;}
.area_main1 .lft li:first-child a {border-left: 0;}
.area_main1 .rgh {float: right; width: 55%; height: 140px; background: url(../images/main/bg_main1.jpg) 0 0 no-repeat; background-size: cover;}
.area_main1 .rgh > p {color: #fff; padding: 0 5%;}
.area_main1 .rgh > p.t1 {font-size: 14px; padding-top: 20px;}
.area_main1 .rgh > p.t1 em {display: block; font-size: 3em; margin: 5px 0 13px; font-weight: 900; line-height: 1; white-space:nowrap;}
.area_main1 .rgh > p.t2 {}


.area_main2 {padding: 140px 0 90px; background-color: #f9f9f9;}
.area_main2 .list ul {font-size: 0; width: 102%;}
.area_main2 .list li {display: inline-block; vertical-align: top; width: 18%; margin: 0 1%; padding: 40px 0 25px 0; border: 1px solid #ececec; text-align: center; background-color: #fff; box-sizing:border-box;}
.area_main2 .list li p {margin-bottom: 50px; font-size: 24px;}
.area_main2 .list li .btn-pk {width: 120px; font-size: 14px; padding: 10px; color: #666; border: 1px solid #ececec;}


.area_main3 {padding: 100px 0;}
.area_main3 .inr-c {position: relative;}
.area_main3:after {content:""; clear: both; display: block;}
.area_main3 .tab {margin-bottom: 10px;}
.area_main3 .list {position: relative;}
.area_main3 .list li {border-bottom: 1px solid #ececec;}
.area_main3 .list li a {display: table; table-layout:fixed; width: 100%; padding: 17px 0; font-size: 14px; color: #282424;}
.area_main3 .list li a > span {display: table-cell; vertical-align: middle;}
.area_main3 .list li a > span.h {overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}
.area_main3 .list li a > span.d {text-align: right; width: 100px; color: #929292;}
.area_main3 .a_more {position: absolute; right: 0; top: -40px; font-size: 13px; color: #8d3d1d;}
.area_main3 .lft {margin-right: 600px;}
.area_main3 .rgh {position: absolute; right: 0; top: 0; width: 560px; font-size: 0;}
.area_main3 .b_ad {position: relative; display: inline-block; width: 49%; height: 0; padding-bottom: 71.34%;}
.area_main3 .b_ad:first-child {margin-right: 2%;}
.area_main3 .b_ad img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.area_main3 .b_ad p {z-index: 1; position: absolute; left: 8%; top: 5%; color: #555;}
.area_main3 .b_ad p em {display: inline-block; vertical-align: top; margin-bottom: 20px; font-size: 16px; line-height: 1.5; border-bottom: 1px solid #ececec;}
.area_main3 .b_ad p span {display: block; font-size: 30px;}
.area_main3 .b_ad.w p {color: #fff;}
.area_main3 .b_ad.w p em {border-bottom-color: #fff;}




/*팝업*/
.layerPopup {display: none; position: fixed; left: 50%; top: 50%; z-index: 1001; box-shadow:0 0 5px rgba(0,0,0,.3);}
.layerPopup .popup {display: inline-block; *display: inline; *zoom: 1; width: 500px; background-color: #fff; position: relative; text-align: left;}
.layerPopup .p_head {
	padding: 30px 60px 30px 40px; height: 30px;
	background: rgb(246,164,84);
	background: -moz-linear-gradient(90deg, rgba(246,164,84,1) 0%, rgba(236,110,120,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(246,164,84,1) 0%, rgba(236,110,120,1) 100%);
	background: linear-gradient(90deg, rgba(246,164,84,1) 0%, rgba(236,110,120,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f6a454",endColorstr="#ec6e78",GradientType=1);
}
.layerPopup .p_head .tit {font-weight: 100; font-size: 26px; line-height: 1; color: #fff; letter-spacing:-0.0325em; text-align: left;}
.layerPopup .p_cont {padding: 40px;}
.layerPopup .p_cont .area_write {padding: 0;}
.layerPopup .p_cont .area_write .btn-bot {padding-bottom: 0;}
.layerPopup .popup .btn_close {position: absolute; right: 0; top: 0; width: 60px; height: 90px; font-size: 11px; color: #fff; text-align: center;}
.layerPopup .popup .btn_close > span {display: inline-block; vertical-align: middle; font-size: 0; width: 30px; height: 30px; line-height: 30px;}
.layerPopup .popup .btn_close > span:after {content:"\002B"; font-size: 50px; position: absolute; right: 0; top: 50%; margin-top: -15px; transform:rotate(45deg);}

.popup_dim {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); z-index: 1000;}



/*alert 팝업*/
.popup_alert {display: none;}
.popup_alert .popup {z-index: 1001; overflow:hidden; position: fixed; left: 50%; top: 50%; min-width:370px; max-width:470px; text-align: center; font-size: 15px; line-height: 1.5; border-radius: 20px; transform:translate(-50%,-50%);}
.popup_alert .popup .txt {padding: 45px 30px 40px; background-color: #fff;}
.popup_alert .popup .txt .h1 {margin-bottom: 20px; font-weight: 700; font-size: 18px; color: #463c5a;}
.popup_alert .popup .btns {display: table; width: 100%; table-layout:fixed; background-color: #5a32d2;}
.popup_alert .popup .btns a {display: table-cell; vertical-align: top; font-size: 15px; line-height: 60px; font-weight: 700; color: #fff; border-left: 1px solid rgba(255,255,255,.3); box-sizing:border-box;}
.popup_alert .popup .btns a:first-child {border-left: 0;}



/*로케이션*/
#spot {}
#spot.spot {
	display: table; width: 100%; height: 255px; font-weight: 200; font-size: 18px; color: #fff; text-align: center;
	background: rgb(90,172,230);
	background: -moz-linear-gradient(39deg, rgba(90,172,230,1) 0%, rgba(161,108,254,1) 50%, rgba(201,108,229,1) 100%);
	background: -webkit-linear-gradient(39deg, rgba(90,172,230,1) 0%, rgba(161,108,254,1) 50%, rgba(201,108,229,1) 100%);
	background: linear-gradient(39deg, rgba(90,172,230,1) 0%, rgba(161,108,254,1) 50%, rgba(201,108,229,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4b6db5",endColorstr="#8259d3",GradientType=1);
	background-repeat: no-repeat; background-position: center center; background-size: cover;
}
#spot.spot.s0 {
	background: rgb(90,172,230);
	background: -moz-linear-gradient(39deg, rgba(90,172,230,1) 0%, rgba(161,108,254,1) 50%, rgba(201,108,229,1) 100%);
	background: -webkit-linear-gradient(39deg, rgba(90,172,230,1) 0%, rgba(161,108,254,1) 50%, rgba(201,108,229,1) 100%);
	background: linear-gradient(39deg, rgba(216,248,40,1) 0%, rgba(248,152,42,1) 50%, rgba(255,156,151,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d8f828",endColorstr="#f8982a",GradientType=1);
}
#spot.spot.s1 {background-image: url('../images/spot/spot1.jpg');}
#spot.spot.s2 {background-image: url('../images/spot/spot2.jpg');}
#spot.spot.s3 {background-image: url('../images/spot/spot3.jpg');}
#spot.spot.s4 {background-image: url('../images/spot/spot4.jpg');}
#spot.spot.s5 {background-image: url('../images/spot/spot5.jpg');}
#spot.spot.s6 {background-image: url('../images/spot/spot6.jpg');}
#spot.spot > div {display: table-cell; vertical-align: middle;}
#spot .title {margin-bottom: 35px; text-align: center; font-size: 36px; font-weight: 700;}

.path {z-index: 1; position: relative; margin-top: 40px;}
.path > ul {font-size: 0;}
.path > ul > li {position: relative; display: inline-block; *display: inline; *zoom:1; vertical-align: top; padding-right: 20px; text-align: center;}
.path > ul > li span {position: relative; display: inline-block; padding-left: 30px; font-weight: 300; font-size: 16px; line-height: 1; vertical-align: middle; color: #fff;}
_::-moz-svg-foreign-content, :root .path li {float: left;}

.path > ul > li:first-child span {padding-left: 0;}


.path_depth2 {display: none; position: absolute; top: 48px; left: -1px; width: 100%; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #fff;}
.path_depth2 li {line-height: 40px; border-top: 1px solid #ddd;}
.path_depth2 li a {display: block;}
.path_depth2 li a span {font-size: 14px; line-height: 1.2;}
.path_depth2 li:hover a {background-color: #f9f9f9;}
.path_depth2 li:hover a span {color: #00416e;}



/**********서브컨텐츠**********/
.contents {padding-top: 70px; padding-bottom: 100px; color: #1c1c1c;}
.stit {padding-bottom: 15px; margin-bottom: 75px; font-weight: 700; color: #000; font-size: 35px; line-height: 1; text-align: center;}
.stit span {border-bottom: 5px solid #f8982a;}
.stit2 {margin-bottom: 15px; font-size: 20px; color: #000; font-weight: 700;}
.stit3 {margin-bottom: 40px; font-weight: 700; font-size: 25px; color: #000; font-weight: 700;}
.stit3 span {position: relative; display: inline-block; vertical-align: top; padding-bottom: 20px;}
.stit3 span:after{content:""; position: absolute; left: 0; bottom: 0; width: 40px; height: 4px; background-color: #f8982a;}



/**/
.bind_ty1 {font-size: 0; margin-bottom: 35px;}
.bind_ty1.fx {display: flex; justify-content: center;}
.bind_ty1.fx > a, .bind_ty1.fx > button {
	line-height: 1.6;
}
.bind_ty1 > * {display: inline-block; vertical-align: top;}
.bind_ty1 .btn-pk.bb {min-width:auto; padding-left: 0; padding-right: 0;}
.bind_ty1.n1 .btn-pk.bb {width: 23%;}
.bind_ty1.n3 > * {width: 32%; margin-left: 2%; box-sizing:border-box;}
.bind_ty1.n3 > *:first-child {margin-left: 0;}
.bind_ty1.n4 > * {width: 23%; margin-left: 2%; box-sizing:border-box;}
.bind_ty1.n4 > *:first-child {margin-left: 0;}





/*04. 점자배움터*/
/*강의목록*/
.lst_lecture {}
.lst_lecture ul {font-size: 0; width: 103%;}
.lst_lecture li {display: inline-block; vertical-align: top; width: 22%; margin-right: 3%; margin-bottom: 2%; transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s;}
.lst_lecture .box {padding: 30px; border: 4px solid #d4d4d4; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; /* border-radius: 20px; */}

@media screen and (min-width: 1025px) {
	.lst_lecture li {height: 506px;}
}

.lst_lecture .box .img {overflow:hidden; position: relative; width: 80%; height: 0; padding-bottom: 80%; margin: 0 auto 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid #fff;}
.lst_lecture .box .img img {min-width:100%; min-height:100%; position: absolute; left: 0; top: 0;}
.lst_lecture .box .txt {font-size: 14px; line-height: 25px; color: #000;}
.lst_lecture .box .txt .h1 {overflow:hidden; margin-bottom: 10px; font-weight: 700; font-size: 26px; line-height: 35px; height: 70px;}
.lst_lecture .box .txt .t1 {overflow:hidden; margin-bottom: 20px; height: 50px;}
.lst_lecture .box .txt .t2 {margin-bottom: 5px;}
.lst_lecture .box .txt .t2 span {display: block;}
.lst_lecture .box .btn .btn-pk {width: 100%; margin-top: 10px;}
.lst_lecture li:hover {border-color:#9c84d8;}

.lst_lecture .box.view {border: none; padding: 40px 40px; border-bottom: 1px solid #d5d5d5;}
.lst_lecture .box.view .img {width: 180px; padding-bottom: 180px;}
.lst_lecture .box.view .txt .h1 {height: auto;}
.lst_lecture .box.view .txt .t1 {height: auto; margin-bottom: 0;}
.lst_lecture .box.view .txt .t2 {font-size: 16px;}
.lst_lecture .box.view .txt .t2 > span {display: inline-block; vertical-align: top; margin: 0 10px;}
.lst_lecture .box.view .txt .t2 > span em {display: inline-block; margin-right: 5px; font-weight: 700; color: #f8982a;}

@media screen and (min-width: 1025px) {
	
	.lst_lecture .box.view {margin-bottom: 60px;}
}

.filter-radio.custom{
	padding: 16px 16px;
	display: flex;
	align-items: center;
	gap: 28px;
	background: #fff;
	margin-bottom: 30px;
	border-radius: 3px;
	flex-wrap: wrap;
	border-top: 2px solid #000;
	border-bottom: 1px solid #777;
}

.filter-radio.custom .btn {
	height: 35px;
	background-color: #9c84d8;
	width: 70px;
	line-height: 35px;
	color: #fff;
	border-radius: 3px;
}

.filter-radio.custom .rdo{
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	color: #333;
}

/* 기본 라디오 숨김(접근성 유지) */
.filter-radio.custom input[type="radio"]{
	position: absolute;
	opacity: 0;
}

/* 텍스트 앞에 커스텀 원 만들기 */
.filter-radio.custom .txt{
	position: relative;
	padding-left: 24px;
	line-height: 1.2;
	font-size: 17px;
}

/* 바깥 원 */
.filter-radio.custom .txt::before{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 16px;
	height: 16px;
	border: 2px solid #b5b5b5;
	border-radius: 50%;
	background: #fff;
	transform: translateY(-50%);
	box-sizing: border-box;
	transition: border-color .2s ease;
}

/* 안쪽 점 */
.filter-radio.custom .txt::after{
	content: "";
	position: absolute;
	left: 5px;
	top: 50%;
	width: 6px;
	height: 6px;
	background: #9c84d8;
	border-radius: 50%;
	transform: translateY(-50%) scale(0);
	transition: transform .15s ease;
}

/* ✅ 체크되면: 글자 + 원 테두리 + 점 표시 */
.filter-radio.custom input[type="radio"]:checked + .txt{
	color: #9c84d8;
}

.filter-radio.custom input[type="radio"]:checked + .txt::before{
	border-color: #9c84d8;
}

.filter-radio.custom input[type="radio"]:checked + .txt::after{
	transform: translateY(-50%) scale(1);
}

/* hover */
.filter-radio.custom .rdo:hover .txt::before{
	border-color: #9c84d8;
}

/* 키보드 포커스 */
.filter-radio.custom input[type="radio"]:focus-visible + .txt{
	outline: 2px solid #9c84d8;
	outline-offset: 3px;
}


/*테이블*/
.tbl_basic {font-size: 14px; color: #000;}
.tbl_basic table {border-top: 3px solid #64b83d;}
.tbl_basic td {padding: 10px 10px; height: 40px; text-align: left;}
.tbl_basic th {padding: 15px 10px; font-weight: normal; text-align: center; color: #000;}
.tbl_basic thead tr {border-bottom: 2px solid #888;}
.tbl_basic tbody tr {border-bottom: 1px solid #d5d5d5;}

.tbl_basic col.num {width: 145px;}
.tbl_basic col.num2 {width: 100px;}
.tbl_basic col.file {width: 85px;}
.tbl_basic col.btn {width: 180px;}
.tbl_basic col.wid1 {width: 120px;}
.tbl_basic col.wid2 {width: 180px;}
.tbl_basic col.w60 {width: 80px;}
.tbl_basic col.w90 {width: 110px;}
.tbl_basic col.w140 {width: 160px;}
.tbl_basic col.w190 {width: 190px;}


.tbl_basic table.list {table-layout:fixed;}
.tbl_basic table.list th {}
.tbl_basic table.list td {text-align: center;}
.tbl_basic table.list td.subject {text-align: left; font-weight: 500; color: #000;}
.tbl_basic table.list td.subject a {overflow:hidden; display: inline-block; max-width:100%; color: #000; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; vertical-align: middle;}
.tbl_basic table.list td.subject a:hover {text-decoration: underline;}
.tbl_basic table.list td.subject .lockIcon {width: 13px;}
.tbl_basic table.list td.subject .lockIcon {margin-left: 3px;}
.tbl_basic table.list td.subject .newIcon {margin-left: 3px;}
.tbl_basic table.list td.subject .lockIcon + .newIcon {width: 14px; margin-left: 0;}
@media screen and (max-width: 640px) {
	.tbl_basic table.list td.subject .newIcon {width: 15px;}
}

.tbl_basic table.list td > div {display: flex; align-items: center; justify-content: center; text-align: center;}
.tbl_basic table.list td i.attach {width: 19px; height: 22px; background: url(/include/images/common/ico_attach.png) no-repeat 0 0;}

.tbl_basic table.write {}
.tbl_basic table.write th {padding-left: 40px; text-align: left;}
.tbl_basic table.write td {padding-right: 40px; color: #000;}
.tbl_basic table.write .textarea1 {height: 260px;}
.tbl_basic table.write .em {margin-left: 10px;}

.tbl_basic.ty2 thead th {background-color: #f9f9f9; border-left: 1px solid #ddd; font-weight: 700; height: 25px;}
.tbl_basic.ty2 thead th:first-child {border-left: 0;}
.tbl_basic.ty2 thead tr {border-bottom: 1px solid #ddd;}
.tbl_basic.ty2 tbody td {border-left: 1px solid #ddd; padding: 10px 20px; color: #1c1c1c;}
.tbl_basic.ty2 tbody th {font-weight: 700; border-left: 1px solid #ddd;}
.tbl_basic.ty2 tbody th:first-child {border-left: 0;}
.tbl_basic.ty2 .bdn {border-left: 0;}

.a_line {font-size: 14px; line-height: 1.2; color: #000;}
.a_line span {display: inline-block; vertical-align: top; padding-bottom: 5px; border-bottom: 1px solid #000;}


.view_lecture {}
.view_lecture .tit {position: relative;padding-bottom: 15px; border-bottom: 1px solid #d5d5d5;}
.view_lecture .tit .lft {padding-right: 270px; display: table; width: 100%;}
.view_lecture .tit .lft > div {display: table-cell; vertical-align: middle;}
.view_lecture .tit .img {width: 180px;}
.view_lecture .tit .img span {overflow:hidden; display: block; width: 100%; height: 0; padding-bottom: 100%; border-radius: 50%;}
.view_lecture .tit .img img {width: 100%; min-height:100%;}
.view_lecture .tit .txt {padding-left: 20px; font-size: 14px;}
.view_lecture .tit .txt .t1 {margin-bottom: 8px; color: #f89828;}
.view_lecture .tit .txt .t2 {color: #000; margin-top: 15px;}
.view_lecture .tit .txt .h1 {font-weight: 700; font-size: 26px; color: #000; line-height: 1.2;}
.view_lecture .tit .rgh .btns {position: absolute; right: 0; top: 50%; margin-top: -22px;}
.view_lecture .tit .rgh .btns a.btn-pk.n {padding-top: 12px; padding-bottom: 12px; min-width:auto;}
.view_lecture .tit .rgh .ta-r {position: absolute; right: 0; bottom: 10px;}

.view_lecture .cont {padding: 40px; text-align: center;}

.box_check {padding: 35px 40px; margin-top: 10px; font-size: 14px; color: #000; line-height: 1.5; border: 1px solid #cfcfcf; background-color: #f7f7f7;}
.box_check p strong {display: block; margin-bottom: 4px; font-size: 1.3em; color: #a84749;}
.box_check p strong i {font-style: italic;}


/*검색*/
.area_sch {margin-top: 60px; padding: 20px; text-align: center; background-color: #f7f7f7;}
.area_sch .col {display: inline-block; vertical-align: top;}
.area_sch .select1 {width: 120px; height: 50px; line-height: 50px;}
.area_sch input.inp_txt {width: 350px; height: 50px; line-height: 50px;}
.area_sch .btn-pk.n {width: 130px; height: 50px;}


/**/
.area_practice {overflow:hidden; margin-bottom: 40px;}
.area_practice .lft {position: relative; width: 50%; float: left; margin-right:20px;}
.area_practice .lft img {}
.area_practice .bt1 {position: absolute; left: 27%; bottom: 260px; width: 16.14%;}
.area_practice .bt2 {position: absolute; left: 56%; bottom: 260px; width: 16.14%;}
.area_practice .bt3 {position: absolute; left: 50%; bottom: 30px; width: 16.14%;}
.area_practice .bt1 > span,
.area_practice .bt2 > span,
.area_practice .bt3 > span {display: block;}


.area_practice .rgh {float: right; width: calc(50% - 20px); font-size: 15px; color: #000; line-height: 1.5;}
.area_practice .rgh p {margin-bottom: 25px;}
.area_practice .rgh p.tit {margin-bottom: 15px; font-size: 26px;}
.area_practice .rgh .box {padding: 30px 35px; margin-top: 40px; background-color: #f9f9f9; }
.area_practice .rgh .box .b {padding: 15px; background-color: #fff; border-radius: 10px;}


.area_practice2 {padding: 35px 0; min-height:500px; border-top: 2px solid #cfcfcf; border-bottom: 1px solid #cfcfcf; background-color: #f7f7f7;}
.area_practice2 .tit {text-align: center; font-weight: 700; font-size: 16px; color: #9c84d8;}
.area_practice2 .area_box {margin:35px; background-color:#FFF; border-radius:20px;padding:20px;line-height:160%;}
.area_practice2 .area_box h3{text-align:center;color:#9c84d8;font-weight:700;}
.area_practice2 .area_box .insr{margin-top:20px;}
.area_practice2 .area_box .insr img{float:left;margin-right:25px;}



/*05.통하다우리*/
.tbl_media {}
.tbl_media ul {font-size: 0; width: 103%;}
.tbl_media li {display: inline-block; vertical-align: top; width: 30.33%; margin-bottom: 2%; margin-right: 2%;}
.tbl_media li .img {overflow:hidden; position: relative; height: 0; padding-bottom: 50%;}
.tbl_media li .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.tbl_media li .img:after {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); background-image: url(../images/common/ico_play.png); background-position: center center; background-repeat: no-repeat;}
.tbl_media li .txt {padding: 10px 0; font-size: 14px; color: #000; line-height: 20px;}
.tbl_media li .txt .h1 {height: 40px; margin-bottom: 10px;}
.tbl_media li .txt .t1 {color: #777;}
.tbl_media li .txt .t1 span {position: relative; display: inline-block; vertical-align: top; padding-left: 10px; margin-left: 10px;}
.tbl_media li .txt .t1 span:after {content:""; position: absolute; left: 0; top: 50%; margin-top: -6px; width: 1px; height: 12px; background-color: #888;}
.tbl_media li .txt .t1 span:first-child {padding-left: 0; margin-left: 0;}
.tbl_media li .txt .t1 span:first-child:after {content:none;}

.tbl_media li.noplay .img:after {background-color: rgba(0,0,0,0); background-image: none;}

.area_understand {font-size: 14px; line-height: 1.5;}

.lst-dot {}
.lst-dot li {position: relative; padding-left: 13px; margin-bottom: 5px; font-size: 14px;}
.lst-dot li:after {content:""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; background-color: #f8982a; border-radius:50% ;}


.lst_under1 {}
.lst_under1 li {padding: 20px 30px; margin-bottom: 10px; background-color: #f9f9f9;}
.lst_under1 li .t {display: table; width: 100%; height: 90px;}
.lst_under1 li .t > p {display: table-cell; vertical-align: middle;}

.lst_under2 {overflow:hidden;}
.lst_under2 ul {font-size: 0; width: 102%;}
.lst_under2 li {display: inline-block; vertical-align: top; width: 48%; margin-right: 2%; margin-bottom: 2%; padding: 40px; border: 1px solid #ddd; box-sizing:border-box;}
.lst_under2 li .icon {margin-bottom: 40px; text-align: center;}
.lst_under2 li .txt {font-size: 14px; min-height: 90px;}

.area_wqna .h1 {margin-bottom: 60px; text-align: center; font-weight: 700; font-size: 60px; color: #4a4a4a;}
.area_wqna .h1 span {font-weight: 400; display: block; font-family: 'Nanum Pen Script', cursive; line-height: 1;}
.lst_wqna {position: relative; padding: 70px 50px; border: 5px solid #ffa215;}
.lst_wqna:after {content:""; position: absolute; left: 50%; top: -40px; margin-left: -57px; width: 114px; height: 79px; background: url(../images/sub/tit_qna.png) 0 0 no-repeat; background-size: 100% auto;}
.lst_wqna .q {text-align: right; margin-bottom: 30px;}
.lst_wqna .q span {position: relative; display: inline-block; vertical-align: top; padding: 18px 25px; font-weight: 600; font-size: 20px; color: #fff; background-color: #4a4a4a; border-radius: 30px;}
.lst_wqna .q span:after {content:""; position: absolute; right: 2px; top: 2px; width: 9px; height: 12px; background: url(../images/sub/bg_qbox.png) 0 0 no-repeat; background-size: 100% auto;}
.lst_wqna .a {margin-bottom: 50px; padding: 35px 8%; background-color: #f4efe2; font-size: 14px; line-height: 1.7; border-radius: 30px;}
.lst_wqna .a .h {font-weight: 700; margin-bottom: 20px; font-size: 20px;}



/*06.묻고답하기*/
.tbl_faq {border-top: 3px solid #64b83d;}
.tbl_faq li {border-bottom: 1px solid #d5d5d5;}
.tbl_faq .tit {position: relative; width: 100%; padding: 20px 100px; font-weight: 600; text-align: left; font-size: 16px; color: #000; box-sizing:border-box;}
.tbl_faq .tit:after {content:""; position: absolute; right: 30px; top: 50%; margin-top: -1.5px; width: 20px; height: 3px; background-color: #b3b3b3;}
.tbl_faq .tit:before {content:""; position: absolute; right: 30px; top: 50%; margin-top: -1.5px; width: 20px; height: 3px; background-color: #b3b3b3; transform:rotate(90deg);}
.tbl_faq .tit .h {position: absolute; left: 30px; top: 50%; margin-top: -17px; font-weight: 400; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 30px; line-height: 34px; color: #64b83d;}
.tbl_faq .txt {display: none; position: relative; padding: 20px 100px; font-size: 14px; }
.tbl_faq .txt .h {position: absolute; left: 30px; top: 50%; margin-top: -17px; display: block; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 20px; width: 34px; line-height: 34px; text-align: center; color: #fff; background-color: #64b83d; border-radius: 50%;}
/* .tbl_faq .txt .t {white-space:pre-line; line-height: 1.7; color: #000;} */
.tbl_faq .txt .t {line-height: 1.7; color: #000;}
.tbl_faq .txt .link {margin-top: 20px; line-height: 22px;}
.tbl_faq .txt .link i.attach {display:inline-block;width: 19px; height: 22px; background: url(/include/images/common/ico_attach.png) no-repeat 0 0;}

.tbl_faq li.on .tit {background-color: #f8faf5;}
.tbl_faq li.on .txt {display: block;}
.tbl_faq li.on .tit:before {transform:rotate(0);}

.area_center1 {overflow:hidden; margin-bottom: 30px;}
.area_center1 > div {float: left; width: 50%; display: table; height: 380px;}
.area_center1 > div > div {display: table-cell; vertical-align: middle; text-align: center;}
.area_center1 .icon, .area_center1 .txt {display: inline-block; vertical-align: middle;}
.area_center1 .txt {text-align: left; padding-left: 35px; color: #fff; font-size: 18px; line-height: 1.5;}
.area_center1 .lft {background-color: #7bc35b;}
.area_center1 .lft .t2 {margin-bottom: 15px; font-weight: 700; font-size: 43px; line-height: 1;}
.area_center1 .lft a {position: relative; display: inline-block; vertical-align: top; border: 1px solid #fff; padding: 5px 100px 5px 20px; font-size: 15px; background-color: rgba(255,255,255,.2); border-radius: 20px;}
.area_center1 .lft a:after {content:""; position: absolute; right: 0; top: 50%; width: 80px; height: 1px; background-color: #fff;}
.area_center1 .rgh {background-color: #9c84d8;}
.area_center1 .rgh p {margin: 10px 0;}

.area_center2 {font-size: 17px; line-height: 1.5;}
.area_center2 p {margin-bottom: 20px;}


/*07.마이페이지*/
#container.mypage {}
#container.mypage .tbl_basic table {border-top-color: #f89828;}

.t_info {font-size: 14px; line-height: 1.5;}
.t_info p {margin-bottom: 5px;}

.t_info_box {padding: 35px 40px; font-size: 14px; color: #000; line-height: 1.7; background-color: #f9f9f9;}
.t_info_box h3 {font-weight: 700; font-size: 16px;}


/*0.맴버십*/
.area_member.login {padding: 40px; margin-bottom: 50px; background-color: #f9f9f9;}
.area_member.login legend {display: block; margin-bottom: 25px; text-align: center; font-size: 36px; line-height: 1; font-weight: 700; color: #1c1c1c;}
.area_member.login .inner {max-width:513px; margin: 0 auto;}
.area_member.login .inp {position: relative;  padding-right: 120px;}
.area_member.login .inp .t {position: relative; padding-left: 85px;}
.area_member.login .inp .t:first-child {margin-bottom: 20px;}
.area_member.login .inp label {position: absolute; left: 0; top: 0; line-height: 40px;}
.area_member.login .btn {position: absolute; right: 0; top: 0; width: 100px;}
.area_member.login .btn .btn-pk.b {min-width:auto; width: 100%; padding: 0; height: 98px; border: 0; background-color: #f8982a; font-size: 20px;}
.area_member.login label.inp_checkbox {position: static; margin-top: 10px; line-height: 20px;}

.area_member_botm {overflow:hidden; position: relative;}
.area_member_botm:after {content:""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background-color: #ccc;}
.area_member_botm > .col {float: left; width: 50%; padding: 15px 0; text-align: center; font-size: 14px; line-height: 1.5;}
.area_member_botm .h1 {margin-bottom: 25px; font-weight: 700; font-size: 16px; color: #000;}
.area_member_botm .btn-pk {margin-top: 20px; border-radius: 100px;}

.area_member.find {max-width:564px; min-height:250px; margin: 0 auto;}
.area_member.find .inp {margin: 0 130px; padding-top: 20px;}
.area_member.find .inp .t {position: relative; margin-bottom: 15px;}
.area_member.find .inp .t label {position: absolute; left: -70px; top: 0; line-height: 40px;}
.area_member.find .btn-pk {margin-top: 30px; max-width:305px;}


.box_comp {display: table; height: 220px; width: 100%; color: #000;  border-top: 3px solid #9c84d8; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #f9f9f9;}
.box_comp > div {display: table-cell; vertical-align: middle; padding: 0 50px; text-align: center;}
.box_comp .t1 {overflow:hidden; padding: 15px 30px; margin-top: 50px; background-color: #fff;}
.box_comp .t1 > span {float: right;}
.box_comp .t1 > span:first-child {float: left;}
.box_comp .t1 strong {margin-left: 5px;}

.box_comp.ty2 {padding: 50px 0;}
.box_comp.ty2 p {margin-bottom: 20px;}
.box_comp.ty2 .inp {margin: 0 50px 0 210px;}
.box_comp.ty2 .inp .t label {left: -160px;}


.area_member.join {max-width:700px; margin: 0 auto;}
.area_member.join .btn-line {display: flex; justify-content: center;}
.area_member.join .btn-pk.nb {padding:20px 30px; line-height: 1;}

.area_temrs {}
.area_temrs .box {overflow-y:scroll; height: 150px; padding: 30px 40px; font-size: 14px; line-height: 1.5; white-space: pre-line; border-top: 3px solid #9c84d8; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; background-color: #f9f9f9;}
.area_temrs .inp {text-align: right; margin-top: 18px;}

.area_terms2 {line-height: 1.5; white-space: pre-line; color: #222;}


.area_member.join .tbl {font-size: 14px;}
.area_member.join .tbl table {}
.area_member.join .tbl td,
.area_member.join .tbl th {padding: 15px 0; height: 40px; vertical-align: top; text-align: left;}
.area_member.join .tbl th {width: 130px; padding-left: 40px; font-weight: 400; line-height: 40px; color: #000;}

.inp_txt.wid1 {width: 100%; max-width:300px;}

.inp_ck {display: inline-block; vertical-align: middle;}
.inp_ck label {margin-left: 30px;}
.inp_ck label:first-child {margin-left: 0;}


.inp_btn {position: relative; max-width:460px;}
.inp_btn .btn-pk {position: absolute; right: 0; top: 0; width: 150px;}

.i-txt {
	display: inline-block; vertical-align: middle; padding: 0 9px; border: 2px solid #f9972a; color: #f9972a; line-height: 26px; font-size: 14px; font-weight: 300;
	-webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.i-txt.ty1, .i-txt.ty103 {color: #e954a6; border-color: #e954a6;}
.i-txt.ty2, .i-txt.ty102 {color: #f9972a; border-color: #f9972a;}
.i-txt.ty3, .i-txt.ty105 {color: #14b0bf; border-color: #14b0bf;}
.i-txt.ty4, .i-txt.ty104 {color: #9c84d8; border-color: #9c84d8;}
.i-txt.ty5 {color: #64b83e; border-color: #64b83e;}
.i-txt.ty6 {color: #ffcc00; border-color: #ffcc00;}
.i-txt.ty7 {color: #9a9899; border-color: #9a9899;}

.lst-line {font-size: 0;}
.lst-line li {display: inline-block; vertical-align: middle; font-size: 14px; line-height: 0.8; margin-left: 30px;}
.lst-line li:first-child {margin-left: 0;}
.lst-line li span {display: inline-block; vertical-align: top; padding-right: 10px; margin-right: 10px; border-right: 1px solid #d6d6d6;}



.tbl_view {border-top: 3px solid #64b83d; font-size: 14px;}
.tbl_view .tit {padding: 34px 40px; color: #8d8d8d; border-bottom: 2px solid #888888;}
.tbl_view .tit .h1 {margin-bottom: 20px; font-weight: 700; color: #000; font-size: 24px;}
.tbl_view .tit .h1 .i-txt {margin-right: 10px;}
.tbl_view .txt {padding: 25px 40px; border-bottom: 1px solid #d5d5d5; line-height: 1; color: #000;}
.tbl_view .cont {min-height:100px; padding: 40px; color: #000; line-height: 1.5;}
.tbl_view .botm {border-bottom: 1px solid #d5d5d5;}
.tbl_view .botm > div {padding: 20px 40px; color: #000; border-top: 1px solid #d5d5d5;}
.tbl_view .botm > div span {display: block;}
.tbl_view .botm > div span.h {float: left; color: #888;}
.tbl_view .botm > div span.t {margin-left: 78px;}
.tbl_view.cus {position: relative; border-top-color: #222;}
.tbl_view.cus + .tbl_basic table {margin-top: 20px; border-top-color: #222;}
.tbl_view.cus .tit .btn {padding: 10px 50px; box-sizing: border-box; display: inline-flex; background-color: #9c84d8; position: absolute; right: 0; top: 45px; color: #fff; justify-content: center; align-items: center; font-size: 16px; line-height: 1.2;}
.tbl_view.cus .tit .btn.del {background-color: #888;}

.lst_link {font-size: 14px; display: flex; gap: 10px 20px; flex-wrap: wrap;}
.lst_link li {display: inline-block; vertical-align: top; }
.lst_link li:first-child {margin-left: 0;}

@media screen and (max-width: 768px) {
	.tbl_view.cus .tit .btn {position: relative; top: 0;}
}


/*1.점자세상*/
#container.intro {}
#container.intro .i-txt {line-height: 1.5; vertical-align: baseline;}
.area_greeting {font-size: 14px; line-height: 1.7; color: #000;}
.area_greeting .col {padding-bottom: 70px;}
.area_greeting .col.ty1 {padding: 70px 0; background-color: #f2f2f2;}
.area_greeting .tit {margin-bottom: 100px; text-align: center; font-size: 24px; line-height: 1.5;}
.area_greeting .tit .h1 {position: relative; display: inline-block;  margin-bottom: 10px; font-weight: 700; color: #f89828; font-size: 34px;}
.area_greeting .tit .h1 strong {font-size: 1.2em;}
.area_greeting .tit .h1 span {position: relative; z-index: 1;}
.area_greeting .tit .h1 i {z-index: -1; position: absolute; font-size: 100px; line-height: 1; color: #e2e2e2;}
.area_greeting .tit .h1 i.l {left: -40px; top: -20px;}
.area_greeting .tit .h1 i.r {right: -40px; bottom: -60px;}

.area_organization {color: #1c1c1c; font-size: 14px; line-height: 1.7;}
.area_organization .top {margin-bottom: 50px; padding: 35px 40px; background-color: #f9f9f9;}

.area_organization .list1 {overflow:hidden;}
.area_organization .list1 ul {display: flex;}
.area_organization .list1 li {flex:1; width: 23.5%; margin-left: 2%;}
.area_organization .list1 li:first-child {margin-left: 0;}
.area_organization .list1 li .h {text-align: center; padding: 18px 0; color: #fff;}
.area_organization .list1 li .t {border: 1px solid #ccc; padding: 40px 20px 0; min-height:80px;}
.area_organization .list1 li.l1 .h {background-color: #ea54a6;}
.area_organization .list1 li.l2 .h {background-color: #f9972a;}
.area_organization .list1 li.l3 .h {background-color: #64b83d;}
.area_organization .list1 li.l4 .h {background-color: #7c66ab;}
.area_organization .list1 li.l5 .h {background-color: #3893c0;}

.area_organization .list2 {}
.area_organization .list2 ul {font-size: 0;}
.area_organization .list2 li {display: inline-block; vertical-align: top; width: 29%; padding: 1%; text-align: center; }
.area_organization .list2 li .c {position: relative; width: 90%; height: 0; padding-bottom: 90%; margin: 0 auto; background-color: #f9f9f9; font-size: 22px; line-height: 1.2; border-radius: 50%;}
.area_organization .list2 li .c:after {content:""; z-index: -1; position: absolute; left: -5%; top: -5%; width: 110%; height: 110%; background: url(../images/common/bg_org1.png) center 2px no-repeat; background-size: 100% auto;}
.area_organization .list2 li:nth-child(2) .c:before {content:""; z-index: -1; position: absolute; left: -16%; top: 50%; margin-top: -3px; width: 140%; height: 1px; background-color: #f9972a;}
.area_organization .list2 li:nth-child(2) .c:after {background: url(../images/common/bg_org2.png) center 97% no-repeat; background-size: 100% auto;}
.area_organization .list2 li .c p {position: absolute; left: 0; top: 50%; width: 100%; transform:translateY(-50%);}
.area_organization .list2 li .t {display: block; margin-top: 20px; font-size: 14px; line-height: 1.5;}


.area_organization .list3 {}
.area_organization .list3 ul {overflow:hidden;}
.area_organization .list3 li {float: left; width: 49%; height: 165px; padding-top: 55px; background-color: #f9f9f9;}
.area_organization .list3 li:first-child {margin-right: 2%;}
.area_organization .list3 li > div {display: inline-block; vertical-align: top; margin-left: 10%;}
.area_organization .list3 li .icon {width: 100px; height: 100px; background-color: #fff; text-align: center; line-height: 100px; border-radius: 50%;}
.area_organization .list3 li .t p {margin-bottom: 5px;}
.area_organization .list3 li .t strong {display: block; margin-bottom: 20px; font-size: 1.5em;}

.area_organization .maps {overflow:hidden; position: relative; height: 400px; background-color: #f9f9f9;}
.area_organization .maps .map {position: absolute; left: 50%; top: 50%; width: 1180px; height: 400px; margin-left: -590px; margin-top: -200px;}

.area_organization .map_t {overflow:hidden; padding: 36px 30px; margin-bottom: 40px; font-size: 20px; border: 1px solid #f1f1f1;}
.area_organization .map_t .l {float: left;}
.area_organization .map_t .r {float: right;}

.area_organization .tbl {overflow:hidden; border-top: 2px solid #000; margin-bottom: 60px;}
.area_organization .tbl .col {float: left; width: 33.33%; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; box-sizing:border-box;}
.area_organization .tbl .col:first-child {border-left: 0;}
.area_organization .tbl .col .h {padding: 15px; font-weight: 700; text-align: center; background-color: #f9f9f9; border-bottom: 1px solid #ddd;}
.area_organization .tbl .col .t {padding: 30px 0 0 30px; height: 140px;}
.area_organization .ts {margin-bottom: 5px;}
.area_organization .ts > span {display: inline-block; vertical-align: middle;}
.area_organization .i-tx {display: inline-block; vertical-align: middle; min-width:10px; padding: 3px 10px; margin-right: 10px; border-radius: 50px; color: #fff; line-height: 1; font-weight: 100; text-align: center;}
.area_organization .i-tx.orange {background-color: #fb723e;}
.area_organization .i-tx.yellow {background-color: #f9b643;}
.area_organization .i-tx.gray {background-color: #636363;}
.area_organization .i-tx.blue {background-color: #34a2f7;}
.area_organization .i-tx.green {background-color: #47a431;}
.area_organization .i-tx.purple {background-color: #a47de9;}


.i_purple {color:#a47de9;}
.i_green {color:#47a431;}
.i_blue {color:#34a2f7;}

.area_organization .list4 {border-top: 1px solid #ddd;}
.area_organization .list4 li {padding: 50px 0; border-bottom: 1px solid #ddd;}
.area_organization .list4 .h {font-weight: 700; margin-bottom: 25px; font-size: 20px; color: #f9972a;}



/*02.점자의 이해*/
.area_meaning {display: table; width: 100%; font-size: 14px; line-height: 1.7;}
.area_meaning > .col {display: table-cell; vertical-align: middle;}
.area_meaning > .col p {margin-bottom: 20px;}
.area_meaning .col.img {width: 167px; padding-right: 40px;}


.btn_history {position: relative; width: 100%; padding: 40px 0; text-align: left; font-size: 26px;}
.btn_history:after {content:""; position: absolute; right: 40px; top: 50%; margin-top: -10px; width: 36px; height: 20px; background: url(../images/sub/btn_history.png) 95% center no-repeat; transform:rotate(180deg);}
.btn_history img {margin-right: 40px;}
.btn_history.on {border-bottom: 1px solid #ddd;}
.btn_history.on:after {transform:rotate(0deg);}

.box_source {padding: 40px; border: 1px solid #cfcfcf; background-color: #f7f7f7;}
.box_source .txt {padding-bottom: 20px; font-size: 14px; line-height: 1.7;}
.box_source .txt p {margin-bottom: 20px;}
.box_source .in {display: table; width: 100%; }
.box_source .in > div {display: table-cell; vertical-align: middle;}
.box_source .icon {border-right: 1px solid #cfcfcf; width: 130px; padding-right: 40px; color: #f9972a;}
.box_source .lst-dot {padding-left: 40px;}

/*세계의점자*/
.tbl_world {overflow:hidden;}
.tbl_world table {float: left; width: 50%;}
.tbl_world table:first-child {border-right: 1px solid #ddd;}
.tbl_world tbody td:first-child {border-left: 0;}
.tbl_world tr.bg td {background-color: #fffaf4;}


/*점역교정사*/
.box_guide {padding: 35px 40px; font-size: 14px; line-height: 1.7; background-color: #f9f9f9;}
.box_guide ul { text-align: center; padding-top: 30px;}
.box_guide li {display: inline-block; vertical-align: top; margin-left: 5%;}
.box_guide li:first-child {margin-left: 0;}
.box_guide li > div {background-color: #fff; width: 280px; height: 280px; border-radius: 50%;}
.box_guide li > div .ico {display: block; padding-top: 65px; padding-bottom: 30px;}


/*한글점자일람표*/
.tbl_guidetable {text-align: center;}
.tbl_guidetable th {width: 60px; background-color: #f9f9f9; border-left: 1px solid #ddd; font-weight: 700;}
.tbl_guidetable th[rowspan] {border-left: 0;}
.tbl_guidetable td {padding: 0; border-left: 1px solid #ddd; font-size: 14px; color: #1c1c1c;}
.tbl_guidetable td .i {height: 42px; padding: 5px 0;}
.tbl_guidetable td .t {height: 25px; line-height: 25px; border-top: 1px solid #ddd;}

.tbl_guidetable td.w2 {}
.tbl_guidetable td.w2 .ib {display: table; width: 100%; table-layout:fixed;}
.tbl_guidetable td.w2 .ib > .i {display: table-cell; vertical-align: middle; border-left: 1px solid #ddd;}
.tbl_guidetable td.w2 .ib > .i:first-child {border-left: 0;}

.tbl_guidetable td.w5 {text-align: left; background-color: #eff8eb;}


/*점자관련기기*/
.meaning_tab {position: relative; float: left; width: 205px;}
.meaning_tab:after {content:""; position: absolute; right: 10px; top: 3%; width: 1px; height: 90%; background-color: #c9c9c9;}
.meaning_tab li {position: relative; display: block; font-size: 17px; text-align: right; padding: 5px 50px 5px 0; margin-bottom: 40px; font-weight: 700;}
.meaning_tab li:after {content:""; z-index: 1; position: absolute; right: 2px; top: 50%; margin-top: -9px; width: 10px; height: 10px; border: 4px solid #c9c9c9; border-radius:50%; background-color: #fff;}
.meaning_tab li.on a {color: #f9972a;}
.meaning_tab li.on:after {border-color: #f9972a; background-color: #f9972a;}

.meaning_tabcont {margin-left: 260px; padding: 35px 40px; font-size: 14px; line-height: 1.7; background-color: #f9f9f9;}
.meaning_tabcont .mb {margin-bottom: 10px;}
.meaning_tabcont .bind {display: table; width: 100%;}
.meaning_tabcont .bind  > div {display: table-cell; vertical-align: top;}
.meaning_tabcont .bind  > div.lft {padding-right: 40px;}
.meaning_tabcont .bind  > div.rgh.w1 {width: 490px;}
.meaning_tabcont .bind  > div .wbox {margin-bottom: 20px;}

.meaning_tabcont .stit2 {margin-bottom: 5px; font-size: 16px;}
.meaning_tabcont .wbox {background-color: #fff; display: table; width: 100%; padding: 20px 0; text-align: center; box-sizing:border-box; border-radius: 10px;}
.meaning_tabcont .wbox > div {display: table-cell; vertical-align: top; padding: 0 5px;}
.meaning_tabcont .wbox .t {display: block; font-size: 12px; color: #64b53d;}

.lst_equipment {}
.lst_equipment li {display: table; width: 100%; margin-bottom: 20px;}
.lst_equipment li > div {display: table-cell; vertical-align: middle;}
.lst_equipment li > div.img {width: 151px; padding-right: 40px;}
.lst_equipment li .txt strong {font-size: 1.15em;}



/*메인팝업*/
.wrap_mainPopup {z-index: 1000; display: none; position: fixed; left: 0; top: 0; font-size: 14px; color:#000; text-align: center; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); overflow-y:auto;}
.wrap_mainPopup .inner {display: inline-block; padding: 50px 0;}
.mainPopup {overflow:hidden; display: inline-block; background-color: #fff; vertical-align: top; min-width: 200px; max-width:800px; margin: 5px; border-radius: 5px;}
.mainPopup .info {padding:5px; text-align:left;}
.mainPopup .botm {overflow:hidden; background-color: #fff; padding: 15px; color: #000; text-align: left;}
.mainPopup .botm button {float: right; color: #000; font-size: 14px;}

@media (max-width:960px){
	.mainPopup {width: 70%;}
	.mainPopup .botm {padding: 10px;}
}


/******************************************************************************************/
@media (max-width:1260px){
	.inr-c {margin-left: 4%; margin-right: 4%;}

}
@media (max-width:1180px){
	#header .logo {width: 130px;}
	#header .logo a img {margin-top: 40px;}
	#header .gnbbox {margin-left: 150px;}
	#header .gnbtx {left: -150px; width: 130px;}
	#header .gnbtx .t2 {display: none;}

	.bxMain .slider_txt {left: 4%; width: 92%; margin-left: 0;}

	.area_main1 .lft {width: 45%;}
	.area_main1 .rgh {width: 55%;}
	.area_main1 .rgh > p.t1 em {font-size: 2.5em;}

	.area_main2 .list li p {font-size: 20px;}

	.lst_lecture li {width: 30.33%;}
}

@media (min-width:961px){
	.view-m {display: none;}
	#header .gnbbox {display: block !important;}
}



/*점자게임*/
.area_play {max-width:800px; margin: 0 auto; font-family:'BMDOHYEON', sans-serif;}
.area_play .top {position: relative; height: 62px; text-align: center; color: #fff; background-color: #694f00;}
.area_play .top .tit {font-size: 30px; line-height: 62px;}
.area_play .top .btn_back {position: absolute; left: 18px; top: 0; height: 62px;}
.area_play .top .btn_view {position: absolute; right: 18px; top: 15px; width: 100px; height: 35px; font-size: 20px; line-height:35px; color: #000; background-color: #ffcd3a; border-radius: 30px; letter-spacing:-0.0325em; font-family:'BMDOHYEON', sans-serif; }
.area_play .cont {padding: 30px 50px 70px; background-color: #f6efda;}
.area_play .cont .box {position: relative; display: table; width: 100%; height: 95px; -webkit-border-radius: 20px; border-radius: 20px; }
.area_play .cont .box .in {display: table-cell; vertical-align: middle; padding: 0 20px 0 55px; font-size: 22px; color: #000; border-radius: 30px;}
.area_play .cont .box .h {position: absolute; left: -20px; top: 0; font-size: 60px; line-height: 95px;}
.area_play .cont .box .in textarea {font-family: 'HSBRL01';font-size: 20px; line-height: 29px; border: 0; width: 100%; padding: 0;}
.area_play .cont .box .in textarea:focus {outline:0;}
.area_play .cont .box.b1 {color: #694f00; background-color: #ffcd3a;}
.area_play .cont .box.b1 .in {color: #694f00;}
.area_play .cont .box.b2 {color: #000; visibility: hidden;}
.area_play .cont .box.b2.view {visibility: visible;}
.area_play .cont .box.b3 {color: #fb9013; background-color: #fff; }
.area_play .cont .box.b2 .in,
.area_play .cont .box.b2 .in input {font-family: 'HSBRL01';}


.area_play .cont .box.b4 {color: #694f00; background-color: #ffcd3a;height:70px !important;margin-bottom:19px;}
.area_play .cont .box.b4 .in {color: #694f00;text-align:center;padding:0 20px 0 20px;}

.area_play .botm {position: relative; background-color: #fffcf1; font-size: 20px;}
.area_play .botm .lft {float: left; padding: 20px 0 0 40px;}
.area_play .botm .lft li {margin-bottom: 10px;}
.area_play .botm .lft li input[type='text'] {font-size: 20px; border: 0; padding: 0;background-color: #fffcf1; width:120px;}
.area_play .botm .lft li input:focus {outline:none;}
.area_play .botm .lft strong {display: block; color: #fa0000;}
.area_play .botm .rgh {margin-left: 230px; padding: 0 0 0; width: 514px; position: relative; top: -25px;}
.area_play .botm .rgh button {position: absolute; font-size: 0; width: 40px; height: 45px; background-repeat: no-repeat; background-position: 0 0;}
.area_play .botm .rgh .btn_p_1 {left: 37px; top: 32px; background-image: url(../images/common/img_play_btn1.png);}
.area_play .botm .rgh .btn_p_83 {left: 88px; top: 23px; background-image: url(../images/common/img_play_btn3.png);}
.area_play .botm .rgh .btn_p_68 {left: 125px; top: 22px; background-image: url(../images/common/img_play_btn3.png);}
.area_play .botm .rgh .btn_p_70 {left: 157px; top: 31px; background-image: url(../images/common/img_play_btn3.png);}
.area_play .botm .rgh .btn_p_74 {left: 319px; top: 31px; background-image: url(../images/common/img_play_btn4.png);}
.area_play .botm .rgh .btn_p_75 {left: 351px; top: 22px; background-image: url(../images/common/img_play_btn4.png);}
.area_play .botm .rgh .btn_p_76 {left: 389px; top: 23px; background-image: url(../images/common/img_play_btn4.png);}
.area_play .botm .rgh .btn_p_8 {left: 439px; top: 32px; background-image: url(../images/common/img_play_btn6.png);}
.area_play .botm .rgh .btn_p_9 {width: 144px; height: 22px; left:187px; top: 78px; background-image: url(../images/common/img_play_btn7.png);}

.area_play .botm .rgh .btn_p_83.on,
.area_play .botm .rgh .btn_p_68.on,
.area_play .botm .rgh .btn_p_70.on {background-image: url(../images/common/img_play_btn2.png);}
.area_play .botm .rgh .btn_p_74.on,
.area_play .botm .rgh .btn_p_75.on,
.area_play .botm .rgh .btn_p_76.on {background-image: url(../images/common/img_play_btn5.png);}
.area_play .botm .rgh .btn_p_9.on {background-image: url(../images/common/img_play_btn8.png);}


.area_play .cont .box.b1 .in input[type='text'] {width:100%;border:none;background:none;color: #694f00;font-size:21px;text-align:center;}

.area_play .cont .box.b1 .in input:focus {outline:none;}

.braille_box .box {padding: 30px 30px 30px; background-color: #f9f9f9; font-size: 14px;margin-bottom:30px;}
.braille_box .box .b {padding: 15px; background-color: #fff; border-radius: 10px;width:230px;position:relative;}
.braille_box .box .ml {margin-left:280px;}

/* 빈 공백 */
.empty-note {display: flex; flex-direction: column; align-items: center; border-bottom: 2px solid #888; padding: 35px 0;}
.empty-note p {margin-top: 10px;}



@media screen and (min-width: 1025px) {
	a[onclick*="fnFileDownload"] {display: inline-block; max-width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
}

@media screen and (max-width: 640px) {
	.empty-note {padding: 20px 0;}
	.empty-note img {height: 110px;}
}

@media screen and (max-width: 480px){
	.empty-note {padding: 15px 0;}
	.empty-note img {height: 90px;}
	.empty-note p {margin-top: 5px;}
}


/* 마의페이지 나의강좌 상단 */
/* 접근성용 숨김 텍스트 */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* 전체 래퍼 */
.filter-wrap {
	margin-bottom: 10px;
	display: flex;
}

.filter-wrap button {padding: 0 10px; background-color: #9c84d8; border: 0; box-sizing: border-box; color: #fff; margin-left: 5px; border-radius: 3px;}

/* 셀렉트 감싸는 박스 */
.select-box {
	position: relative;
	width: 200px;
}

/* 셀렉트 기본 스타일 */
.select-box select {
	width: 100%;
	height: 35px;
	padding: 0 40px 0 14px;
	font-size: 14px;
	color: #222;
	border: 1px solid #ccc;
	border-radius: 2px;
	background-color: #fff;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	/* 커스텀 화살표 */
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
}

/* 포커스 접근성 */
.select-box select:focus {
  outline: none;
  border-color: #2f5bff;
}

/* 모바일 */
@media screen and (max-width: 480px) {
  .select-box {
    font-size: 13px;
	width: 100%;
  }

  

  .tbl_faq .txt .link i.attach {width: 12px; height: 13px; background-size: cover;}

}