@charset "euc-kr";


/**
 * main content
 */
 
/* mainSlide */
.mainSlide {position:relative; width:100%; height:auto;border-bottom:2px solid #bababa}
.mainSlideBox {position:relative; overflow:hidden; width:100%; min-width:1180px; height:400px; margin:0 auto;}
.mainSlideBox dl {height:400px;}
.mainSlideBox dl dt {position:absolute; bottom:7px;}
.mainSlideBox dl dt a {display:inline-block; overflow:hidden; width:19px; height:19px; margin:0 2px 0 0; background:url('/images/main/visual/slide_btn.png') 0 0 no-repeat;}
.mainSlideBox dl dt a.active {background-position:-19px 0;}
.mainSlideBox dl dd {position:relative; top:0; width:100%; height:400px; background-position:center 0; background-repeat:no-repeat;}
.mainSlideBox dl dd a.imgLink {display:block; width:1180px; height:400px; margin:0 auto;}
.mainSlideBox dl dd .detail {position:relative; display:block; width:1180px; height:400px; margin:0 auto;}
.mainSlideBox dl dd .detail img.image {height:100%;}
.mainSlideBox dl dd .detail1 span.data, .mainSlideBox dl dd .detail2 span.data {position:absolute; top:15px; left:1px; z-index:1; display:block;}
.mainSlideBox dl dd .detail3 span.data {position:absolute; top:15px; left:1px; z-index:1; display:block;}
.mainSlideBox dl dd .detail4 span.data {position:absolute; top:15px; left:1px; z-index:1; display:block;}
.mainSlideBox dl dd .detail span.data img {max-height:100%; max-width:100%;}
.mainSlideBtn {overflow:hidden; position:absolute; z-index:11; margin:0 auto; bottom:8px; right:40px; height:21px; line-height:21px; text-align:right;}
.mainSlideBtn * {vertical-align:top;}

.mainSlideBtn .btnPlay {display:inline-block; overflow:hidden; width:17px; height:17px; background:url('/images/main/main_play_btn.png') 0 0 no-repeat;}
.mainSlideBtn .btnPlayOn {background-position:0 -17px;}
.mainSlideBtn .btnStop {display:inline-block; overflow:hidden; width:17px; height:17px; background:url('/images/main/main_pause_btn.png') 0 0 no-repeat;}
.mainSlideBtn .btnStopOn {background-position:0 -17px;}

.mainSlideBtn .mainSlideMenu {display:inline-block; overflow:hidden; height:26px; padding:0 0 0 13px; background:url('/images/main/slide_main_menu_bg.gif') 0 0 no-repeat;}
.mainSlideBtn .mainSlideMenu .mainSlideMenuList {display:inline-block; overflow:hidden; height:26px; min-width:15px; padding:0 9px 0 0; background:url('/images/main/visual/slide_main_menu_bg.gif') right -26px no-repeat;}

/* mBannerTop */
#mBannerTop {position:relative; top:-2px; z-index:20; width:100%; min-width:1180px; height:11px; margin:0 auto; background:transparent url('/images/main/banner_top_bg.png') 0 bottom repeat-x;}
#mBannerTop .inner {width:1180px; margin:0 auto;}
#mBannerTop .mBannerBtn {position:relative; top:-27px; left:0; display:inline-block; overflow:hidden; width:118px; height:29px; background:url('/images/main/banner_top_btn_bg.png') 0 0 no-repeat; vertical-align:top;}
#mBannerTop .mBannerBtn span {display:block; overflow:hidden; height:29px; padding:0 11px 0 0; margin-right:12px; border:none; font-family:Arial; font-size:11px; font-weight:bold; line-height:34px; white-space:nowrap; color:#fff; background:url('/images/main/banner_top_btn_arrow.png') right 16px no-repeat; text-align:right; vertical-align:top !important; cursor:pointer;}
#mBannerTop .mBannerBtnOn span {background-position:right -14px;}

/* mBanner */
#mBanner {display:; position:relative; width:100%; min-width:1180px; margin:0 auto; border-bottom:1px solid #dadada }
#mBanner .inner {position:relative; width:1180px; margin:0 auto; overflow:hidden;}
#mBanner ul {padding:50px 0;}
#mBanner ul li {position:relative; float:left; width:11%;background:url('/images/main/banner/bnr_line.png') left top repeat-y;}
#mBanner ul li.item1 {background:none}
#mBanner ul li a {display:block;height:110px;text-indent:-999em}
#mBanner ul li.item1 a {background:url('/images/main/banner/history.png') no-repeat center 0px}
#mBanner ul li.item2 a {background:url('/images/main/banner/location.png') no-repeat center 0px}
#mBanner ul li.item3 a {background:url('/images/main/banner/organ.png') no-repeat center 0px}
#mBanner ul li.item4 a {background:url('/images/main/banner/img_busin.png') no-repeat center 0px}
#mBanner ul li.item5 a {background:url('/images/main/banner/dbconver.png') no-repeat center 0px}
#mBanner ul li.item6 a {background:url('/images/main/banner/dbmodeling.png') no-repeat center 0px}
#mBanner ul li.item7 a {background:url('/images/main/banner/node_js.png') no-repeat center 0px}
#mBanner ul li.item8 a {background:url('/images/main/banner/wglogic.png') no-repeat center 0px}
#mBanner ul li.item9 a {background:url('/images/main/banner/jtlsdef.png') no-repeat center 0px}

/* mContents */
#mContents {width:1180px; margin:0 auto; padding:20px 0;}

.mCsv {float:left;width:33%;height:120px;background:transparent url('/images/main/banner/recruit.png') left top no-repeat}
.mCsv h2 a{display:block;height:18px;margin-left:90px;background:url('/images/main/banner/recruittxt.png') left top no-repeat;text-indent:-999em}
.mCsv p{margin:10px 20px 0 90px;font-size:14px;line-height:22px}
.mainDictionary {float:left;width:33%;height:120px;background:transparent url('/images/main/banner/img_dictionary.png') 20px top no-repeat;border-left:1px solid #dadada}
.mainDictionary h2 a {display:block;height:18px;margin-left:110px;background:url('/images/main/banner/dictxt.png') left top no-repeat;text-indent:-999em}
.mainDictionary p{margin:10px 0 0 110px;font-size:14px;line-height:22px}
.mainWargame {float:left;width:33%;height:120px;background:transparent url('/images/main/banner/img_wargame.png') 20px top no-repeat;border-left:1px solid #dadada}
.mainWargame h2 a{display:block;height:18px;margin-left:110px;background:url('/images/main/banner/wargametxt.png') left top no-repeat;text-indent:-999em}
.mainWargame p{margin:10px 20px 0 110px;font-size:14px;line-height:22px}
.mainWargame p.btn_payment_faq a{color:#3399cc}



.layer_pop {width:320px; height:430px; position:absolute; left:13%; top:100px; z-index:99; margin:100 auto 0;}


@media only screen and (min-width:971px) and (max-width:1180px) {


/**
 * main content
 */
 
/* mainSlide */
.mainSlide {height:auto;}
.mainSlideBox {min-width:970px; height:400px;}
.mainSlideBox dl {height:400px;}
.mainSlideBox dl dt {position:absolute; bottom:7px;}
.mainSlideBox dl dd {position:absolute; top:0; width:100%; height:400px;}
.mainSlideBox dl dd a.imgLink {width:auto; height:400px;}
.mainSlideBox dl dd .detail {width:auto; height:400px;}
.mainSlideBox dl dd .detail img.image {height:100%; margin-left:-170px;}
.mainSlideBox dl dd .detail1 span.data, .mainSlideBox dl dd .detail2 span.data {left:40px;}
.mainSlideBox dl dd .detail3 span.data {left:40px}
.mainSlideBox dl dd .detail3 img.image {height:100%; margin-left:-70px;}

.mainSlideBtn {bottom:8px; right:40px;}

/* mBannerTop */
#mBannerTop {min-width:970px;}
#mBannerTop .inner {width:970px;}
#mBannerTop .mBannerBtn {left:32px;}

/* mBanner */
#mBanner {min-width:970px;}
#mBanner .inner {width:970px;}
#mBanner ul {padding:25px 0;}

/* mContents */
#mContents {width:970px;padding:20px 0}
#mContents div br {display:none}
.mainDictionary p{margin:10px 20px 0 110px;}
.mainDictionary, .mainWargame {height:160px}
.mNotice {width:298px; margin-left:10px; margin-right:0;}
.mNotice h2 {margin:19px 0 0 20px;}
.mNotice ul {width:260px; margin:15px 0 0 20px;}
.mNotice ul li {overflow:hidden; height:19px; text-overflow:ellipsis; font-family:'³ª´® °íµñ', 'Nanum Gothic'; white-space:nowrap;}

.mInterview {overflow:hidden; width:338px; margin-left:10px; margin-right:0;}
.mInterview .list {width:270px;}
.mInterview .list .detail {width:190px;}
.mInterview .list .tit {width:200px; overflow:hidden; text-overflow:ellipsis; font-family:'³ª´® °íµñ', 'Nanum Gothic'; white-space:nowrap;}

}

@media only screen and (min-width:768px) and (max-width:970px) {

/**
 * main content
 */
 
/* mainSlide */
.mainSlide {height:auto;}
.mainSlideBox {min-width:768px; height:400px;}
.mainSlideBox dl {height:400px;}
.mainSlideBox dl dt {position:absolute; bottom:7px;}
.mainSlideBox dl dd {position:absolute; top:0; width:100%; height:400px;}
.mainSlideBox dl dd a.imgLink {width:auto; height:400px;}
.mainSlideBox dl dd .detail {width:auto; height:400px;}
.mainSlideBox dl dd .detail img.image {height:100%;margin-left:-200px}
.mainSlideBox dl dd .detail1 span.data, .mainSlideBox dl dd .detail2 span.data {left:40px;}
.mainSlideBox dl dd .detail3 span.data {left:40px}
.mainSlideBox dl dd .detail3 img.image {height:100%;margin-left:-250px}

/* mBannerTop */
#mBannerTop {min-width:768px;}
#mBannerTop .inner {width:768px;}
#mBannerTop .mBannerBtn {left:32px;}

/* mBanner */
#mBanner {min-width:768px;background:url('/images/main/banner/bnr_line2.png');border-bottom:0 none}
#mBanner .inner {width:768px;}
#mBanner ul {padding:20px 0;}
#mBanner ul li {width:33%;}
#mBanner ul li.item1, #mBanner ul li.item2, #mBanner ul li.item3 {margin-bottom:40px}
#mBanner ul li.item4, #mBanner ul li.item5, #mBanner ul li.item6 {margin-bottom:40px}
#mBanner ul li.item4, #mBanner ul li.item7 {clear:left;background:none}

.mCsv {height:auto;background:url('/images/main/banner/768/recruit.png') left top no-repeat}
.mCsv h2 a {margin-left:80px;height:37px;background:url('/images/main/banner/recruittxt.png') left top no-repeat}
.mCsv p{margin:10px 40px 0 80px}
.mainDictionary {height:240px;background:url('/images/main/banner/768/img_dictionary.png') 20px top no-repeat}
.mainDictionary h2 a {margin-left:110px;}
.mainDictionary p{margin:10px 20px 0 110px}
.mainWargame {height:240px;background:url('/images/main/banner/768/img_wargame.png') 20px top no-repeat}
.mainWargame h2 a{margin-left:100px}
.mainWargame p{margin:10px 20px 0 100px}

/* mContents */
#mContents {width:768px;padding:50px 0}
#mContents div br {display:none}

.mNotice {width:298px; margin-left:34px;}
.mNotice h2 {margin:19px 0 0 20px;}
.mNotice ul {width:260px; margin:15px 0 0 20px;}
.mNotice ul li {overflow:hidden; height:19px; text-overflow:ellipsis; font-family:'¸¼Àº °íµñ', 'Malgun Gothic'; white-space:nowrap;}

.mInterview {width:377px; margin-right:19px;}
.mInterview .list {width:310px;}
.mInterview .list .detail {width:230px;}
.mInterview .list .tit {width:230px; overflow:hidden; text-overflow:ellipsis; font-family:'¸¼Àº °íµñ', 'Malgun Gothic'; white-space:nowrap;}

.mSharing {clear:both; float:none; width:699px; height:101px; padding-top:20px; padding-left:34px;}
.mSharing:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
.mSharing .mCsv {float:left; width:378px; border-bottom:1px solid #dadada;}
.mSharing .mCsv p {width:190px;}

.mSharing .mActivity {float:right; width:297px; border-top:1px solid #dadada;}
.mSharing .mActivity p {width:190px;}



}

@media only screen and (max-width:767px) {

/**
 * main content
 */
 
/* mainSlide */


/* mBannerTop */
#mBannerTop {min-width:320px;}
#mBannerTop .inner {width:100%;}
#mBannerTop .mBannerBtn {left:8px;}

/* mBanner */
#mBanner {min-width:320px;background:url('/images/main/banner/320/bnr_line2.png');border-bottom:0 none;padding-bottom:2px}
#mBanner .inner {width:100%;}
#mBanner ul {padding:10px 0;}
#mBanner ul li {width:33%;}
#mBanner ul li.item1, #mBanner ul li.item2, #mBanner ul li.item3 {margin-bottom:28px}
#mBanner ul li.item4, #mBanner ul li.item5, #mBanner ul li.item6 {margin-bottom:25px}
#mBanner ul li.item7, #mBanner ul li.item8, #mBanner ul li.item9 {margin-bottom:5px}
#mBanner ul li.item4, #mBanner ul li.item7 {clear:left;background:none}


/* mContents */
#mContents {width:320px; width:auto; min-width:320px; padding:0;}
#mContents div br {display:none}

.mCsv {float:none;width:auto;height:auto;min-height:90px;border-bottom:1px solid #dadada;padding:30px 0 20px 110px;background-position:10px 30px}
.mCsv h2 a {margin-left:0}
.mCsv p{margin:10px 40px 0 0}
.mainDictionary {float:none;width:auto;height:auto;min-height:90px;border-bottom:1px solid #dadada;padding:30px 0 20px 110px;background-position:10px 30px}
.mainDictionary h2 a {margin-left:0}
.mainDictionary p{margin:10px 40px 0 0}
.mainWargame {float:none;width:auto;height:auto;min-height:90px;border-bottom:1px solid #dadada;padding:30px 0 20px 110px;background-position:10px 30px}
.mainWargame h2 a{margin-left:0;}
.mainWargame p{margin:10px 20px 0 0}

.mNotice {float:none; width:auto; min-width:298px; margin-left:10px; margin-right:10px;}
.mNotice h2 {margin:19px 0 0 20px;}
.mNotice ul {width:90%; margin:15px 0 0 20px;}
.mNotice ul li {overflow:hidden; height:19px; text-overflow:ellipsis; font-family:'¸¼Àº °íµñ', 'Malgun Gothic'; white-space:nowrap;}

.mInterview {overflow:hidden; float:none; width:auto; min-width:298px; height:auto; min-height:199px; margin-left:10px; margin-right:10px; margin-top:10px;}
.mInterview .list {width:90%;}
.mInterview .list .detail {width:60%; padding-bottom:20px;}
.mInterview .list .tit {width:70%;}
.mInterview .photo {width:178px;}
.mInterview .photo img {max-width:100%;}

.mSharing {clear:both; float:none; width:auto; height:auto; padding-top:10px; padding-left:10px; padding-right:10px;}
.mSharing:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}
.mSharing .mCsv {float:none; width:298px; width:auto; min-width:298px; border-bottom:1px solid #dadada;}
.mSharing .mCsv p {width:190px;}

.mSharing .mActivity {float:none; width:298px; width:auto; min-width:298px; border-top:1px solid #dadada; margin-top:10px;}
.mSharing .mActivity p {width:190px;}

.layer_pop {width:640px; height:610px; position:absolute; left:3%; top:111px; z-index:99; margin:100 auto 0;}

}

/* mainSlide start */
@media only screen and (min-width:701px) and (max-width:767px) {

/* mainSlide */
.mainSlide {height:auto;}
.mainSlideBox {min-width:320px; height:280px;}
.mainSlideBox dl {height:280px;}
.mainSlideBox dl dt {position:absolute; bottom:7px;}
.mainSlideBox dl dd {position:absolute; top:0; height:280px; background-image:none !important;}
.mainSlideBox dl dd a.imgLink {width:auto; height:280px;}
.mainSlideBox dl dd .detail {width:auto; height:280px;}
.mainSlideBox dl dd .detail img.image {height:100%;}
.mainSlideBox dl dd .detail span.data {position:absolute; top:60px;z-index:1; display:block;}
.mainSlideBox dl dd .detail span.data img {height:70px;}
.mainSlideBox dl dd .detail1 span.data, .mainSlideBox dl dd .detail2 span.data {left:40px;}
.mainSlideBox dl dd .detail3 span.data {left:40px}
.mainSlideBtn {bottom:8px; right:40px;}

}

@media only screen and (min-width:0) and (max-width:700px) {

/* mainSlide */
.mainSlide {height:auto;}
.mainSlideBox {min-width:320px; height:248px;}
.mainSlideBox dl {height:248px;}
.mainSlideBox dl dt {position:absolute; bottom:8px;}
.mainSlideBox dl dd {position:absolute; top:0; height:248px; background-image:none !important;}
.mainSlideBox dl dd a.imgLink {width:auto; height:248px;}
.mainSlideBox dl dd .detail {width:auto; height:248px;}
.mainSlideBox dl dd .detail img.image {height:100%;}
.mainSlideBox dl dd .detail span.data {position:absolute; top:20px; right:10px; z-index:1; display:block;}
.mainSlideBox dl dd .detail span.data img {height:70px;}
.mainSlideBox dl dd .detail1 span.data, .mainSlideBox dl dd .detail2 span.data {left:20px;}
.mainSlideBox dl dd .detail3 span.data {left:20px}
.mainSlideBtn {bottom:8px; right:40px;}

}
/* mainSlide end */

@media only screen and (max-width:480px) {

/* mainSlide */
.mainSlideBox dl dd .detail img.image {height:100%; margin-left:-170px;}

.mainSlideBox dl dt {margin-right:-30px;}
.mainSlideBtn {bottom:8px; right:10px;}

/* mBanner */
#mBanner ul li {margin:0 0 0 0;}
#mBanner ul li dl dd {margin:0 6px 0 0;}
#mBanner ul li dl dd br {}

.layer_pop {width:640px; height:610px; position:absolute; left:3%; top:111px; z-index:99; margin:100 auto 0;}

}