/* CSS Document */ @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); @import url(http://cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css);/* 나눔 스퀘어*/ /* common */ html, body {margin:0; padding:0; } div, ul, ol, li, dl, dt, dd, form, fieldset, input, button, p, h1, h2, h3, h4, h5, h6, blockquote, iframe, th, td { margin:0; padding:0; } img { border:0; vertical-align:top; } li { list-style:none; float:left; display:inline;} /* style */ *{margin:0; padding:0; border:0;} html{overflow-x:hidden;; overflow-y:scroll; margin:0; padding:0; width:100%; } body{margin:0; padding:0; font-size:12px; color:#1d0c01; font-style:normal; width:100%; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important; background:#ffffff; } a { color:#1d0c01; text-decoration:none;} a:hover{color:#bebebe; text-decoration:none;} table{border:0; border-collapse:0; border-spacing:0;} td{vertical-align:middle;} ul, ol, li,{margin:0; padding:0; vertical-align:top; float:left;} /* common */ #wrap{width:100%; float:left; min-width:1260px;}/* min-width:최소너비*/ .center{width:1260px; margin:0 auto;}/* min-width:최소너비*/ #topWrap{width:100%; float:left; background:#fff; position:relative; z-index:200;} /* 상단 메뉴*/ #topLogWrap{width:100%; float:left; background:#1cab9d; position:relative; padding:10px 0;} #mGnbWrap{width:100%; float:left; position:relative; z-index:200; padding:15px 0 20px 0; background:#f2f2f2;} .mLogo{width:100%; float:left; text-align:center;} .logGnb{float:right; margin-top:-5px;} .logGnb a{padding-left:15px; color:#fff !important; line-height:20px; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important; font-size:14px;} .logGnb a:hover{color:#e1e1e1;} .mGnb{width:100%; padding-top:20px; float:left; position:relative; z-index:200; text-align:center;}/* 메인메뉴 너비*/ .mGnb ul{width:100%; height:30px; float:left; text-align:center;} .mGnb ul li{position:relative; z-index:200; line-height:30px; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important; font-size:18px; text-align:center; display:inline-block; float:none;} /* 메인로고 높이 : line-height */ /*.mGnb ul li.on{padding-bottom:17px; border-bottom:3px solid #1dab9d;}*/ .mGnb ul li a{color:#292929; display:inline-block; padding:0 50px;} /* 메인로고 높이 : height */ .mGnb ul li a:hover{color:#1dab9d; padding-bottom:17px; border-bottom:3px solid #1dab9d;} .mGnb ul li.on a{color:#1dab9d; padding-bottom:17px; border-bottom:3px solid #1dab9d;} .mGnb ul li.onM a{color:#1dab9d; padding-bottom:17px; border-bottom:3px solid #1dab9d;} .mGnb ul li .subM{width:100%; position:absolute; top:50px; left:0; display:none; z-index:200;} /* 상단메뉴 높이 : top */ .mGnb ul li .subM ul{width:100%; float:left; margin-top:10px; height:130px; border-left:1px solid #ccc; background:#fff; } .mGnb ul li .subM ul li{width:100%; box-sizing:border-box; float:left; line-height:22px; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important; font-size:14px; text-align:left; position:relative; z-index:200; /*border-left:1px solid #cccccc; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc;*/ margin:0; background:#fff;} .mGnb ul li .subM ul li a{color:#292929; text-decoration:none; background:none; padding:5px 10px; border-bottom:none; letter-spacing:-1px;} .mGnb ul li .subM ul li a:hover{color:#1dab9d; text-decoration:none; padding-bottom:5px !important; border-bottom:none;} .mGnb ul li .subM ul li.on a{color:#1dab9d; text-decoration:none; padding-bottom:5px !important; border-bottom:none;} .mGnb ul li .subM ul li.on{background:none;} #tmWrap{width:100%; position:absolute; background:#fff; border-bottom:1px solid #cccccc; border-top:1px solid #cccccc; height:150px; z-index:3; top:180px; left:0; display:none;} /* 상단메뉴 높이 : top */ /* Main Page Gnb : 서브와 다른 메인Gnb*/ #mainPage #mGnbWrap{display:none;} .mainPageGnb{width:199px; height:560px; overflow:hidden; background:#545454; float:left; position:relative; z-index:1;} .mainPageGnb .mainLogo{width:100%; float:left; position:relative; z-index:2;} .mainPageGnb .mainGnb{width:160px; float:left; margin-top:30px; margin-left:10px; position:relative; z-index:2;} .mainPageGnb .mainGnb ul{width:100%; float:left;} .mainPageGnb .mainGnb ul li{width:140px; padding:10px 0 10px 15px; line-height:20px; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important; font-size:16px;} .mainPageGnb .mainGnb ul li a{display:inline-block; width:100%; color:#ffffff;} .mainPageGnb .mainGnb ul li a:hover{color:#1cab9d; background:url(../images/bletArrow.png) no-repeat right 2px;} .mainPageGnb .mainGnb ul li.hasSub a:hover{background:url(../images/bletArrowD.png) no-repeat right center;} .mainPageGnb .mainGnb ul li.hasSub a.on{background:url(../images/bletArrowD.png) no-repeat right center;} .mainPageGnb .mainGnb ul li.hasSub .mGnbSub{width:100%; float:left; margin-top:5px; display:none;} .mainPageGnb .mainGnb ul li.hasSub .mGnbSub li{width:100%; font-size:14px; padding:5px 0; margin-left:3px;} .mainPageGnb .mainGnb ul li.hasSub .mGnbSub li a{letter-spacing:-1px;} .mainPageGnb .mainGnb ul li.hasSub .mGnbSub li a:hover{background:none;} .mainPageGnb .subGnbArea{width:100%; height:365px; position:absolute; z-index:1; top:195px; left:0; background:#454545;} /* main page*/ #mainWrap{width:100%; float:left;} .mainRollWrap{width:1061px; height:560px; float:left; margin-top:0px; position:relative; z-index:1; overflow:hidden;} /* 메인롤링이미지 높이 : height */ /* main roll img */ .mSlideWrap{width:1061px; height:560px; float:left; position:relative; overflow:hidden; z-index:1;}/* 메인롤링이미지 높이 : height */ .mSlideWrap .mSlide{width:1061px; height:560px; float:left; position:relative; z-index:1; overflow:hidden;}/* 메인롤링이미지 높이 : height */ .mSlideWrap .mSlide ul{width:100%; float:left; position:relative; z-index:1;} .mSlideWrap .mSlide ul li{width:100%; float:left; position:absolute;top:0; left:0; z-index:1;} .mSlideWrap .msTxt{position:absolute; top:192px; left:0px; z-index:200; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important; font-size:16px; color:#222222; line-height:30px; text-align:center; color:#ffffff; height:368px; width:351px; background:#1cab9d; }/* main roll img txt : margin-left: 텍스트 가로 위치, top: 텍스트 새로위치*/ .mSlideWrap .msTxt ul{width:100%; float:left; position:relative;} .mSlideWrap .msTxt ul li{width:100%; float:left; position:absolute; top:0; left:0;} .mSlideWrap .msTxt ul li .mTxt01{width:301px; height:308px; padding:30px 25px; background:#1cab9d; color:#fff; line-height:31px; text-align:left;} .mSlideWrap .msTxt ul li .mTxt01 .txt01{font-size:30px; font-weight:300; font-weight:400;} .mSlideWrap .msTxt ul li .mTxt01 .txt02{font-size:30px; font-weight:bold; line-height:40px;} .mSlideWrap .msTxt ul li .mTxt01 .line{width:30px; height:1px; margin:10px 0;background:#fff;} .mSlideWrap .msTxt ul li .mTxt01 .txt03{font-size:14px; line-height:24px;} .mSlideWrap .msTxt ul li .mTxt01 .txt04{font-size:14px; line-height:24px; padding:10px 0;} .mSlideWrap .msTxt ul li .mTxt01 .txt04 a{display:inline-block; padding:5px 15px; color:#fff; border:1px solid #fff;} .mSlideWrap .msTxt ul li .mTxt01 .txt04 a:hover{color:#545454; border:1px solid #545454;} .mSlideWrap .sBlet{display:none;} .mSlideWrap .playStop{position:absolute; bottom:50px; left:100px; z-index:200; cursor:pointer;} .mSlideWrap .playStop li span.off{display:block;} .mSlideWrap .playStop li span.on{display:none;} .mSlideWrap .playStop li.on span.off{display:none;} .mSlideWrap .playStop li.on span.on{display:block;} .mSlideWrap .arrowL{position:absolute; bottom:50px; left:30px; z-index:200; cursor:pointer;} .mSlideWrap .arrowR{position:absolute; bottom:50px; left:60px; z-index:200; cursor:pointer;} /* end : main roll img */ /* main Cont*/ .mContWrap{width:100%; float:left; padding:0; position:relative; z-index:200;} .mCont01Wrap{width:100%; float:left;} .mCont01_01{float:left;width:488px; height:263px; padding:30px; border:1px solid #d5d3d6; background:url(../images/mCont01_01_bg.jpg) no-repeat; overflow:hidden;} .mCont01_02{float:left;width:294px; height:263px; padding:30px; border:1px solid #d5d3d6; background:#fbf9fc; border-left:none; border-right:none; overflow:hidden;} .mCont01_03{float:left; width:294px; height:263px; padding:30px; border:1px solid #d5d3d6; background:url(../images/mCont01_03_bg.jpg) no-repeat; overflow:hidden;} .mCont02Wrap{width:100%; float:left; border-bottom:1px solid #d5d3d6;} .mCont02_01{float:left;width:139px; height:105px; padding:30px; border-left:1px solid #d5d3d6; border-right:1px solid #d5d3d6; background:#fff; overflow:hidden;} .mCont02_02{float:left;width:288px; height:105px; padding:30px; border-right:1px solid #d5d3d6; background:url(../images/mCont02Bg_01.png) no-repeat; overflow:hidden;} .mCont02_03{float:left;width:294px; height:105px; padding:30px; border-right:1px solid #d5d3d6; background:url(../images/mCont02Bg_02.png) no-repeat; overflow:hidden;} .mCont02_04{float:left;width:294px; height:105px; padding:30px; border-right:1px solid #d5d3d6; background:url(../images/mCont02Bg_03.png) no-repeat; overflow:hidden;} .mCont03{width:100%; float:left;background:#dedcdf; position:relative;} .mCont03 p{float:left; display:inline-block; width:201px; height:55px; background:#515151; cursor:pointer;} .mCont03 p span{width:200px; height:35px; background:#515151; padding:10px 0; text-align:center; line-height:35px; font-size:14px; color:#fff; float:left;} .mCont03 p span.off{display:inlne-block; width:170px; padding-right:30px; background:url(../images/blet_up.png) no-repeat 180px center;} .mCont03 p span.on{display:inline-block; width:170px; padding-right:30px; background:url(../images/blet_down.png) no-repeat 180px center; display:none;} .mCont03 p.on span.off{display:inline-block; width:170px; padding-right:30px; background:url(../images/blet_down.png) no-repeat 180px center;} .mCont03 p.on span.on{display:none;} .mCont03MapWrap{position:absolute; left:0; top:-290px; width:100%; height:290px; background:#dedcdf; display:none;} .mCont03MapWrap .mCont03Map{float:left; width:100%;} .mCont03MapWrap .mCont03Map .mCont03MapTit{width:181px; padding:0 10px; height:290px; line-height:50px; float:left; font-size:16px; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important; color:#ffffff; background:#515151; text-align:center;} .mCont03MapWrap .mCont03Map ul{float:right; width:1002px; padding-right:30px; margin-top:40px;} .mCont03MapWrap .mCont03Map ul li{width:150px; font-size:18px; color:#4b4b4b; line-height:40px; border-bottom:1px solid #e1e1e1;} .mCont03MapWrap .mCont03Map ul li a{color:#1cab9d;} .mCont03MapWrap .mCont03Map ul li a:hover{color:#ffffff;} .mCont03MapWrap .mCont03Map ul ul{width:100%; float:left; margin:0;} .mCont03MapWrap .mCont03Map ul ul li{float:left; width:100%; font-size:15px; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important; color:#4b4b4b; line-height:30px; border-bottom:none; text-align:left;} .mCont03MapWrap .mCont03Map ul ul li a{color:#000000;} .mCont03MapWrap .mCont03Map ul ul li a:hover{color:#1cab9d;} .mCont03MapWrap .mCont03Map ul ul.sub{width:96%; float:left; margin-left:4%;} .mCont03MapWrap .mCont03Map ul ul.sub li{float:left; width:100%; font-size:15px; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important; color:#4b4b4b; line-height:24px; border-bottom:none; text-align:left;} .mCont03MapWrap .mCont03Map ul ul.sub li a{color:#727272;} .mCont03MapWrap .mCont03Map ul ul.sub li a:hover{color:#1cab9d;} .mContTit{width:100%; font-size:20px; color:#3c3c3c; font-weight:bold;} .mContTit .btnMore{float:right; margin-right:5px; padding-right:15px; background:url(../images/moreArrow.png) no-repeat 48px center; line-height:20px; height:20px; color:#62503e; font-size:14px; font-family:Verdana, Geneva, sans-serif; display:inline-block; font-weight:100;} .mContBox{width:100%; margin-top:30px;} .mEduBox{display:inline-block; width:108px; height:110px; border:2px solid #1cab9d; margin-left:10px; margin-top:15px; text-align:center; padding-top:50px; font-size:16px; color:#3c3c3c; background:url(../images/btnGo.png) no-repeat center 100px;} .mEduBox span{font-weight:bold; font-size:18px;} .mEduBox:first-child{margin-left:0;} .mEduBox:hover{color:#515151; border-color:#515151;} .mBoard{width:100%; float:left;} .mBoard li{width:100%; float:left; color:#3c3c3c; font-size:14px; line-height:24px;} .mBoard li a{display:inline-block; width:100%; float:left;} .mBoard li .mNotice{float:left; width:70%; color:#3c3c3c;} .mBoard li .mDate{float:right; width:30%; color:#676767; text-align:right;} .mBoard li a:hover .mNotice{color:#1cab9d;} .mBoard li a:hover .mDate{color:#1cab9d;} .mStoreBox{display:inline-block; width:95px; height:70px; color:#fff; text-align:center; font-size:18px; background:#1cab9d; margin-left:1px;} .mStoreBox a{display:inline-block; width:95px; height:50px; padding-top:20px; color:#fff; text-align:center; font-size:16px; background:url(../images/btnCircle.png) no-repeat center 40px;} .mStoreBox a span{font-weight:bold;} .mStoreBox:first-child{margin-left:0;} .mStoreBox:hover{background:#515151;} .mContTxt{width:100%; float:left; line-height:24px; font-size:13px;} #footWrap{width:100%; float:left; background:#ebebeb; position:relative;} .fm{float:left; padding-top:10px; padding-bottom:10px; position:relative; width:100%;} .fm li{padding:0 5px; line-height:30px; font-size:14px; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important; color:#888484;} .fm li a{color:#888484;} .fm li a:hover{color:#454545;} .fm .legoCafe{position:absolute; top:10px; right:0;} .fm .legoCafe .selcetCafe{width:200px; padding:0 10px; height:28px; line-height:28px; border:1px solid #d7d7d7; background:#fff;} .foot{width:100%; padding:20px 0; position:relative; float:left; clear:both; border-top:1px solid #c5c5c5;} .foot .copy{width:100%; text-align:left; line-height:24px; font-size:14px; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important; padding-top:15px; color:#888484; float:left;} .foot .copy span{padding:0 5px;} .foot .fStoreWrap{width:400px; padding-left:19px; float:left; border-left:1px solid #c5c5c5; border-bottom:1px solid #c5c5c5; color:#727272;} .foot .fStoreWrap:first-child{width:380px; padding-left:0; border-left:none;} .foot .fStoreWrap:last-child{width:380px;} .foot .fStoreWrap .fStore{font-size:16px; font-weight:600; line-height:30px; text-align:left;} .foot .fStoreWrap p{font-size:12px; line-height:24px; text-align:left;} .copyWrap{width:100%; padding:10px 0; background:#454545; float:left;} .copyright{width:100%; text-align:center; font-size:14px; color:#fff; float:left;} #subWrap{width:100%; float:left; padding:50px 0; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important; font-size:16px; min-height:500px;} .subLeftWrap{width:198px; float:left;} .subCont{width:1005px; padding-left:57px; float:left;} .sConts{width:100%; float:left; position:relative;} .subLeftTop{width:168px; padding:50px 15px; line-height:40px; font-size:30px; color:#fff; background:#1cab9d; font-weight:600; float:left; text-align:left;} ul.leftMenu{width:100%; float:left;} ul.leftMenu li{width:100%; float:left; text-align:left;} ul.leftMenu li a{display:inline-block; float:left; width:168px; padding:10px 15px; line-height:24px; border-bottom:1px solid #d7d7d7; color:#3c3c3c; text-align:left; font-size:16px; font-family: 'Nanum Square',"나눔고딕", NanumGothic, Malgun Gothic, "돋움", Dotum, AppleGothic, sans-serif !important;} ul.leftMenu li a:hover{color:#1cab9d; background:url(../images/listArrow.png) no-repeat right center;} ul.leftMenu li.on a{color:#1cab9d; background:url(../images/listArrow.png) no-repeat right center;} /*ul.leftMenu li:hover a{color:#1cab9d; background:url(../images/listArrow.png) no-repeat right center;}*/ ul.leftSub{width:100%; float:left;} ul.leftSub li{width:100%; float:left;} ul.leftSub li a{display:inline-block; float:left; width:150px; padding:10px 24px; line-height:24px; border-bottom:none; color:#3c3c3c; background:#f1f1f1;} ul.leftSub li a:hover{color:#fff; background:#a7a9aa;} ul.leftSub li.on a{color:#fff; background:#a7a9aa;} ul.leftMenu li.on ul.leftSub li a{display:inline-block; float:left; width:150px; padding:10px 24px; line-height:24px; border-bottom:none; color:#3c3c3c; background:#f1f1f1;} ul.leftMenu li.on ul.leftSub li a:hover{color:#fff; background:#a7a9aa;} ul.leftMenu li.on ul.leftSub li.on a{color:#fff; background:#a7a9aa;} .subTopTitWrap{width:100%; float:left; padding:50px 0 30px; position:relative;} .subTopTitWrap .subTopTit{float:left; color:#292929; font-size:22px;} .subTopTitWrap .subTopLoca{position:absolute; top:52px; right:0; font-size:14px; line-height:20px; padding-left:20px; background:url(../images/bletHome.png) no-repeat 0 center; color:#292929;} .subTabWrap{width:100%; float:left; margin:10px 0;} .subTab{width:100%; float:left; text-align:center; height:40px; overflow:hidden; position:relative;} .subTab .sTab{display:inline-block; position:relative; z-index:2;} .subTab .sTab li{float:left; height:38px; width:208px; box-sizing:border-box; margin-top:1px; background:#f7f7f7; color:#8c8c8c; font-size:16px; line-height:38px; text-align:center; cursor:pointer;} .subTab .sTab li.on{height:40px;/* width:206px;*/ margin-top:0px; background:#fff; border:1px solid #292929; border-bottom:1px solid #fff; color:#292929; font-size:16px; line-height:40px; text-align:center;} .subTab .sTabLine{width:100%; height:1px; position:absolute; top:39px; left:0; background:#292929;} .subTabConts{width:100%; float:left; margin:10px 0;} .sTabCont{width:100%; float:left;} .sTabCont li{width:100%; float:left; display:none;} .sTabCont li.on{display:block;} .subMovie{width:840px; height:420px; position:absolute; top:0; left:81px;} .subTabWrap02{width:100%; float:left; margin:40px 0;} .subTab02{width:100%; float:left; text-align:center; height:40px; overflow:hidden; position:relative;} .subTab02 .sTab{display:inline-block; position:relative; z-index:2;} .subTab02 .sTab li{float:left; height:38px; width:200px; box-sizing:border-box; margin-top:1px; background:#f7f7f7; color:#8c8c8c; font-size:16px; line-height:38px; text-align:center; cursor:pointer;} .subTab02 .sTab li a{display:inline-block; width:100%; height:100%; color:#8c8c8c;} .subTab02 .sTab li.on{height:40px; /*width:248px;*/ margin-top:0px; background:#fff; border:1px solid #292929; border-bottom:1px solid #fff; color:#292929; font-size:16px; line-height:40px; text-align:center;} .subTab02 .sTab li.on a{color:#292929;} .subTab02 .sTabLine{width:100%; height:1px; position:absolute; top:39px; left:0; background:#292929;} .subMovie02{width:840px; height:420px; position:relative; margin-left:81px; margin-bottom:40px; margin-top:20px;} .sForm{width:100%; float:left;} .sContsTxt{text-align:left; padding:0px; font-weight:bold; color:#1cab9d; font-size:16px; float:left;} .subMap{width:100%; height:300px; margin:50px 0; float:left;} .storeSel{width:100%; border-top:1px solid #000; border-bottom:1px solid #dcdcdc; margin-bottom:0px; margin-top:30px; display:table; float:left;} .storeSel .storeName{width:212px; display:table-cell; padding-left:20px; background:#f7f7f7; font-size:13px; height:40px; vertical-align:middle; text-align:left; font-weight:bold;} .storeSel .store{width:679px; display:table-cell; padding:10px 0 10px 15px; font-size:13px; vertical-align:middle; color:#333; text-align:left;} .storeSel .store .sSelct{width:100px; height:30px; line-height:30px; border:1px solid #ddd; }