@charset "utf-8"; @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700); @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700); /* reset */ html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, button, p, blockquote, th, td { margin:0; padding:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0); } html, body { width:100%; height:100%; } body, code { font-family:'Noto Sans', sans-serif, '굴림', Gulim; font-size:12px; line-height:1.2; letter-spacing:-0.7px; color:#444; -webkit-text-size-adjust:none; -webkit-overflow-scrolling: touch; } code { background:none; display:block; } ul, ol { list-style:none; } img, fieldset{ border:0; } img, video { max-width:100%; } i, em, address { font-style:normal; font-weight:normal; } ins { text-decoration:none; } a { text-decoration:none; color:#444; } a:active { text-decoration:none; } table { width:100%; table-layout:fixed; border:0 none; border-spacing:0; border-collapse:collapse; } caption { visibility:hidden; width:0; height:0; margin:0; padding:0; background:none; font-size:0; line-height:0; } th, td { border:0; word-wrap:break-word; } legend, hr, .blind { overflow:hidden; visibility:hidden; position:absolute; left:-120%; width:1px; height:1px; margin:0; padding:0; background:none; font-size:0; line-height:0; text-indent:120%; white-space:nowrap; } label { cursor:pointer; } img, textarea, input, select { vertical-align:middle; } textarea { resize:none; line-height:1.2em; } button::-moz-focus-inner { padding:0; border:0; } button { overflow:visible; border:0; padding:0; margin:0; cursor:pointer; vertical-align:middle; text-align:left; font-family:'Noto Sans', sans-serif, '굴림', Gulim; font-size:12px; line-height:1.2; color:#303030; outline:0; background:none; } input[type*="text"], input[type*="tel"] { font-family:'Noto Sans', sans-serif, '굴림', Gulim; } /* html5 */ object, del, sub, var { margin:0; padding:0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } /* layout */ #skipNavigation { position:absolute; top:0; left:0; z-index:200; width:100%; height:0; } #skipNavigation p, #skipNavigation ul, #skipNavigation ul li { height:0; } #skipNavigation p a { position:absolute; left:0; top:0; display:block; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px; text-align:center; color:#000; white-space:nowrap; } #skipNavigation p a:focus, #skipNavigation p a:hover, #skipNavigation p a:active { width:100%; height:auto; padding:10px 0; background:#c4122f; color:#fff; z-index:200; } /* common */ .txtNormal { color:#444 !important; } .txtStrong { color:#f75a0a !important; } .txtEm { color:#3d81d6 !important; } .txtLight { color:#777 !important; } .txtSup { color:#9e9e9e; !important; } .txtUnder { text-decoration:underline; } .txtEllipsis{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .txtItalic { font-style:italic; } .gSingle { display:block; padding-top:5px; } .gDouble { display:block; padding-top:10px; } .gTriple { display:block; padding-top:15px; } .video.hideM { display:none; } .dimmed { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:#fff; opacity:0.5; } .mLayer { display:none; z-index:100; } .mLayer .layer { z-index:101; position:fixed; top:50%; left:50%; width:500px; height:300px; background:#fff; border:3px solid red;} #contents a[href="#top"] { display:none; } #footer .btnTop { display:none; } .admng-paging { display:none; } /* For Print */ @media print { #header, #sidebar, #aside, #footer { display:none; } #content { float:none; width:auto; } } /* ====================================== Media Query ========================================== */ /* ********************Mobile******************** */ @media all and (max-width:767px) { /* layout */ body{ min-width:320px; } body.mNav { height:100%; } body.mNav #wrap { overflow:hidden; height:100%; } #wrap { position:relative; width:100%; min-height:100%; } /* header */ #header { z-index:50; position:fixed; top:0; padding:0; width:100%; height:43px; background:#585e6a; text-align:center;} #header .topHead { padding:0 3%; width:94%; } #header .topBar .familySite, #header .topHead .info { display:none; } #header .topHead { margin:0 auto; padding:4px 0 0; width:100%; } #header .topHead h1.logo { float:none; display:inline-block; margin:0 20px 0 0; } #header .topHead h1.logo img { vertical-align:top; } #header .topBar { position:absolute; top:10px; right:10px; } #header .topBar .inner .customer li:first-child { display:none; } #header .topBar .inner .customer li.login a { display:block; width:73px; height:23px; font-size:0; color:transparent; background: url("/theme/basic/img/btn_login_m.png") no-repeat 0 0; background-size:73px auto; } .mBreadcrumb { overflow:hidden; width:0; height:0; font-size:0; text-indent:120%; white-space:nowrap; } #header .fold { z-index:50; display:block; position:absolute; top:0; left:0; width:50px; height:43px; } #header .fold:after { position:absolute; top:11px; left:15px; display:block; content:""; height:4px; width:26px; background:#cfd8de; border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px; box-shadow:0 8px 0 #cfd8de, 0 16px 0 #cfd8de; -webkit-box-shadow:0 8px 0 #cfd8de, 0 16px 0 #cfd8de; -moz-box-shadow:0 8px 0 #cfd8de, 0 16px 0 #cfd8de; } #header .fold span { overflow:hidden; font-size:0; line-height:0; text-indent:120%; white-space:nowrap; } /* navigation */ #btnFoldLayout { display:block; z-index:100; position:absolute; top:0; right:0; width:0; height:100%; background-color:transparent; font-size:0; color:transparent; line-height:0; } body.mNav #btnFoldLayout { width:23%; -webkit-transition: width 0.5s; -moz-transition: width 0.5s; transition: width 0.5s; } body.mNav #navigation { left:0; -webkit-transition:left 0.5s; -moz-transition:left 0.5s; transition:left 0.5s; } #navigation { z-index:100; overflow:auto; overflow-x:hidden; position:fixed; top:43px; bottom:0; left:-100%; width:77%; background-color:rgba(26, 27, 29, 0.90); } #navigation .inner { width:100%; height:100%; } #navigation .inner > ul a { display:block; width:100%; box-sizing:border-box; } #navigation .inner > ul > li button { position:relative; margin:0 0 0 3%; width:97%; height:40px; line-height:40px; text-align:left; font-size:15px; color:#fff; border-bottom:1px solid #6e6f70; } #navigation .inner > ul > li button:after { position:absolute; top:14px; right:14px; display:block; content:''; width:4px; height:4px; border:1px solid #fff; border-width:0 0 1px 1px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); } #navigation .inner > ul > li:hover button { border:0; border-bottom:1px solid #6e6f70; background:transparent; } #navigation .inner > ul > li.selected button:after { top:17px; transform:rotate(135deg);-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg);-ms-transform:rotate(135deg); } #navigation .inner > ul > li.selected + li button { border-top:1px solid #6e6f70;} #navigation .inner > ul > li > a { position:relative; margin:0 0 0 3%; width:97%; height:40px; line-height:40px; text-align:left; font-size:15px; color:#fff; border-bottom:1px solid #6e6f70; } #navigation .inner > ul > li > a:after { position:absolute; top:14px; right:14px; display:block; content:''; width:4px; height:4px; border:1px solid #fff; border-width:0 0 1px 1px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); } #navigation .inner > ul > li:hover > a { border:0; border-bottom:1px solid #6e6f70; background:transparent; } #navigation .inner > ul > li.selected > a:after { top:17px; transform:rotate(135deg);-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-o-transform:rotate(135deg);-ms-transform:rotate(135deg); } #navigation .inner > ul > li.selected + li > a { border-top:1px solid #6e6f70; } /* #navigation .inner > ul > li > ul { display:none; } */ #navigation .inner > ul > li.selected > ul { display:block; } #navigation .inner > ul > li > ul > li { text-align:left; } #navigation .inner > ul > li > ul > li a { padding:0 20px; height:36px; line-height:36px; color:#bebebe; font-size:13px; } #navigation .inner > ul > li > ul > li > ul li { position:relative; margin-bottom:1px; background-color:rgba(0, 0, 0, 0.18); } #navigation .inner > ul > li > ul > li > ul li a { padding:0 34px; height:36px; line-height:36px; } #navigation .inner > ul > li > ul > li > ul li:before { position:absolute; display:block; content:''; top:12px; left:22px; width:5px; height:5px; border:1px solid #fff; border-width:0 0 1px 1px; } #navigation .inner > ul li.new a:after { display:inline-block; content:""; margin:0 0 0 5px; width:13px; height:13px; vertical-align:middle; background:url("/theme/basic/img/sfix_icon_m.png") no-repeat 0 -125px; background-size:300px auto; } /* container */ #container { padding:3px 0 0; width:100% !important; border-left:0; } #container #snb { display:none; } #container #contents { margin:0; padding:0 10px 30px; border:0; box-sizing:border-box; } #container.old #contents { padding:0 10px 50px; } #container.noNav #content { padding:0 0 30px; } /* footer */ #footer { padding:21px 0 0; font-size:11px; background:#282c32; } body.mNav #footer .btnTop { display:none; } #footer .btnTop { z-index:21; position:fixed; bottom:10px; right:10px; padding:0; width:30px; height:26px; border:1px solid #d0d0d0; border-radius:2px; background:rgba(242, 242, 242, 0.7) url("/theme/basic/img/btn_top_m.png") no-repeat 10px 5px; background-size:10px auto; -webkit-transition: bottom 0.5s; -moz-transition: bottom 0.5s; transition: bottom 0.5s; } #footer .btnTop span { overflow:hidden; width:0; height:0; color:transparent; line-height:0; text-indent:120%; white-space:nowrap; } #footer .inner, #footer .inner a, #footer .inner button { color:#969aa3; } #footer .inner .corp { margin:15px 0;} #footer .inner .corp .logo { margin:0 0 22px; text-align:center; padding-bottom:15px; } #footer .inner .infoWrap .util { padding:21px 0 15px; font-size:0; text-align:center; } #footer .inner .infoWrap .util li { position:relative; display:inline-block; font-size:11px; } #footer .inner .infoWrap .util li:before { position:absolute; top:6px; left:0; display:block; content:""; width:1px; height:11px; background:#4a4d51; } #footer .inner .infoWrap .util li:first-child:before { display:none; } #footer .inner .infoWrap .util li a { display:block; padding:5px 13px; } #footer .inner .infoWrap .info { background:#363b43; } #footer .inner .infoWrap .association { padding:13px 0; text-align:center; } #footer .inner .infoWrap .association a { margin:0 0 0 12px; } #footer .inner .infoWrap .association a:first-child { margin:0; } #footer .inner .infoWrap .association img { width:auto; height:20px; } #footer .inner .familysite { position:relative; margin:0 auto; width:90%; max-width:250px; } #footer .inner .familysite > button { position:relative; display:block; margin:0 auto; padding:4px 8px; width:100%; border:1px solid #4f5259; font-size:13px; background-color:#3b3e45; } #footer .inner .familysite > button:after { display:block; content:"\002B"; position:absolute;top:4px; right:8px; width:8px; height:8px; font-weight:bold; } #footer .inner .familysite a { display:block; padding:6px 20px; color:#989a9e; text-align:left; } #footer .inner .familysite ul { display:none; position:absolute; bottom:24px; left:0; width:100%; padding:5px 7px 8px; max-height:400px; overflow-y:auto; border:1px solid #4f5259; background-color:#3b3e45; box-sizing:border-box; } #footer .inner .familysite ul li { position:relative; } #footer .inner .familysite ul li:before { display:block; content:""; position:absolute; top:12px; left:15px; width:2px; height:2px; background:#989a9e; } #footer .inner .familysite.selected ul { display:block; } #footer .inner .address .simplexi { display:block; margin:0 0 1px; padding:11px 0; text-align:center; border-top:1px solid #3c414a; cursor:pointer; } #footer .inner .address .simplexi .icoSFix { padding:0 18px 0 0; } #footer .inner .address .simplexi .icoSFix:after { top:3px; right:0; width:12px; height:7px; background-position:-250px 0; } #footer .inner .address.selected .simplexi .icoSFix:after { background-position:-275px 0; } #footer .inner .address > ul { overflow:hidden; height:0; } #footer .inner .address.selected > ul { padding:15px 14px; height:auto; border-top:1px solid #282c32; -webkit-transition: height 1s; -moz-transition: height 1s; transition: height 1s; } #footer .inner .address ul dl:after { display:block; content:""; clear:both; } #footer .inner .address ul li dt, #footer .inner .address ul li dd { float:left; line-height:17px; } #footer .inner .address ul li dt { width:30%; } #footer .inner .address ul li dd { width:70%; } #footer .inner .address dd a.btnBizinfo { display:inline-block; padding:4px 7px; line-height:1; border:1px solid #4f5259; color:#363b43; background:#7e838e; border-radius:3px; } #footer .copyright { padding:9px 0 8px; text-align:center; color:#727d8e; border-top:1px solid #363b43; } /* common */ .icoSFix, .icoSFlex { position:relative; } .icoSFix:after, .icoSFlex:after { position:absolute; display:block; content:""; background-repeat:no-repeat; } .icoSFix:after { background-image:url("/theme/basic/img/sfix_icon_m.png"); background-size:300px auto; } .icoSFlex:after { background-image:url("/theme/basic/img/sflex_icon_m.png"); background-size:300px auto; } #sub_titani{height:90px; margin:0 auto; padding-top:60px;} #sub_tit{background:url(../img/sub_bg.jpg) repeat; margin-bottom:0px;} .main .board { margin-top:20px;} .main .visual.typeDefault { position:relative; margin-top:40px; padding-top:30px; height:100%; } /*---------------------------- Container & textbox -----------------------------*/ #txtcontainer{ color: #fff; font-size:20px; font-weight:700; margin: 0 auto; padding: 0px 0 0px; position:relative; min-height: 30px; text-align:left; font-family:나눔고딕,NanumGothic; text-shadow:1px 1px 0 rgba(0,0,0,0.5); } #txtcontainer1{ color: #fafafa; font-size: 15px; font-weight:500; margin: 0 auto; padding: 0px 0 0px; position:relative; min-height: 30px; text-align:left; font-family:나눔고딕,NanumGothic; text-shadow:1px 1px 0 rgba(0,0,0,0.5); } } /* ********************Tablet******************** */ @media all and (min-width:768px) and (max-width:1120px) { /* layout */ #wrap { min-width:1090px; } #navigation > ul { padding:0 3%; width:94% !important; } #header .topBar .inner { width:100%; } #header .topHead .info .notice > div { width:200px; } #header .topHead .info .notice li { width:170px; } #header .topHead .info .notice .button { right:10px; } #header .topHead .info .search input { width:160px; } #container { width:100%; } #footer .btnTop { z-index:51; position:fixed; bottom:30px; right:30px; padding:20px 0 0; width:40px; height:18px; text-align:center; border:1px solid #d0d0d0; background:rgba(255, 255, 255, 0.7) url("/theme/basic/img/sfix_icon.png") no-repeat -185px 7px; } #footer .inner .infoWrap .util li { padding:0 1.5%; } #footer .inner .infoWrap .util li:first-child { padding:0 1.5% 0 0; } #footer .inner .infoWrap .util li:last-child { padding:0 0 0 1.5%; } } /* ********************Tablet & Desktop******************** */ @media all and (min-width:768px) { /* layout */ #wrap { position:relative; min-width:1090px; } /* header */ #header { z-index:50; position:relative; padding:20px 0 0; width:100%; height:80px; background:#fff; } #header .topHead { margin:0 auto; width:1090px; height:60px; } #header .topHead:after { display:block; content:""; clear:both; } #header .topHead h1.logo { float:left; margin:0px 0; width:180px; } #header .topHead .info { float:right; padding:21px 0; } #header .topHead .info > div { position:relative; float:left; } #header .topHead .info .notice { overflow:hidden; width:300px; min-height:0; } #header .topHead .info .notice ul { overflow:hidden; height:35px; width:900px; } #header .topHead .info .notice ul li { overflow:hidden; position:relative; padding:0 8px 0 22px; width:216px; height:35px; line-height:35px; } #header .topHead .info .notice li.new:before { position:absolute; top:10px; left:0; display:block; content:""; width:17px; height:15px; background:url("/theme/basic/img/sfix_icon.png") no-repeat 0 -250px; } #header .topHead .info .notice ul li:after { display:block; content:""; clear:both; } #header .topHead .info .notice a { float:left; width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; color:#000; } #header .topHead .info .notice .btnSlide { right:20px; top:9px; } #header .topHead .info .search { position:relative; } #header .topHead .info .search input { padding:3px 40px 3px 3px; width:280px; height:27px; } #header .topHead .info .search button { position:absolute; top:0; right:0; width:40px; height:35px; background:url("/theme/basic/img/sfix_icon.png") no-repeat 10px -92px; } #header .topHead .info .search button span { overflow:hidden; width:0; height:0; font-size:0; line-height:0; text-indent:120%; white-space:nowrap; } #header .topBar { position:absolute; top:0; width:100%; height:29px; border-bottom:1px solid #ececec; } #header .topBar .inner { margin:0 auto; width:1090px; height:100%; line-height:100%; box-sizing:border-box; } #header .topBar .inner:after { display:block; content:""; clear:both; } #header .topBar .inner .familySite { float:left; } #header .topBar .inner .customer { float:right; } #header .topBar .inner > ul > li { float:left; } #header .topBar .inner ul li a { display:block; line-height:1; color:#535353; } #header .topBar .inner .familySite li a { padding:9px 11px; border-left:1px solid #e1e1e1; } #header .topBar .inner .familySite li.goAdmin a { position:relative; color:#5a689a; } #header .topBar .inner .familySite li.goAdmin a:after { position:absolute; top:11px; right:0; display:block; content:""; width:4px; height:7px; background:url("/theme/basic/img/sfix_icon.png") no-repeat -100px -50px; } #header .topBar .inner .customer > li:first-child { margin:0 1px 0 0; background:#585e6a; } #header .topBar .inner .customer > li { width:126px; } #header .topBar .inner .customer > li > a { height:29px;line-height:29px; text-align:center; color:#fff; } #header .topBar .inner .customer li.login > a, #header .topBar .inner .customer li.member > a { background:#4485da; } #header .topBar .inner .customer li.member > a { position:relative; padding:0 23px 0 0; } #header .topBar .inner .customer li.member > a:after { position:absolute; top:10px; right:27px; display:block; content:""; width:16px; height:10px; background:url("/theme/basic/img/sfix_icon.png") no-repeat 0 0; } #header .topBar .inner .customer li.member:hover .mypage { display:block; } #header .topBar .inner .customer .mypage { z-index:51; position:relative; display:none; padding:1px 11px 0; border:1px solid #7f8185; border-top:0; background:#fff; } #header .topBar .inner .customer .mypage li { padding:0 13px; border-top:1px solid #ddd; } #header .topBar .inner .customer .mypage li:first-child { border-top:0; } #header .topBar .inner .customer .mypage li a {height:23px; line-height:23px; color:#777; } #header .topBar .inner .customer .mypage li:hover a { color:#4485da; } #header .fold { display:none; } /* navigation */ #btnFoldLayout { display:none; } #navigation { position:absolute; top:87px; width:100%; height:43px; background:rgba(65, 65, 65, 0.9); } #navigation.open { height:300px; } #navigation.fixed { position:fixed; top:0; } #navigation .inner { border-bottom:1px solid #4f545f; background:#585e6a; } #navigation .inner > ul { margin:0 auto; width:1090px; background:#585e6a; } #navigation .inner > ul:after { display:block; content:""; clear:both; } #navigation .inner > ul > li { float:left; width:19.90%; height:42px; } /* ECM-8941배포 후 삭제 */ #navigation .inner > ul > li > button { position:relative; display:block; width:100%; height:100%; text-align:center; font-size:16px; color:#e7eaef; font-weight:bold; cursor:default; box-sizing:border-box; } #navigation .inner > ul > li:hover button { padding:1px 0 0; color:#fff; background:#4080d7; } /* //ECM-8941배포 후 삭제 */ #navigation .inner > ul > li > a { position:relative; display:block; width:100%; height:100%; text-align:center; font-size:16px; line-height:42px; color:#e7eaef; font-weight:bold; box-sizing:border-box; } #navigation .inner > ul > li:hover > a { color:#fff; background:#4080d7; } #navigation .inner > ul > li > ul { display:none; text-align:center; } #navigation.open .inner > ul > li > ul { display:block; padding:27px 0 0; height:231px; } #navigation .inner > ul > li:hover > ul { background:rgba(0, 0, 0, 0.5); } #navigation .inner > ul > li:hover > ul a { color:#fff; } #navigation .inner > ul > li > ul > li a { z-index:52; position:relative; display:block; padding:8px 15px; font-size:14px; line-height:1; color:#c4c8cd; } #navigation .inner > ul > li > ul > li:hover a { position:relative; color:#4080d7; font-weight:bold; } #navigation .inner > ul > li > ul > li > ul { display:none; } /* container */ #container { z-index:10; position:relative; margin:0 auto; width:1090px; border-left:1px solid #d0d0d0; border-right:0px solid #d0d0d0; min-height:500px; box-sizing:border-box; } #container.main { width:100%; border:0; } #container.main #contents { margin:0 auto; width:1090px; border:0; } #container.main .section { padding:0; } #container.old #contents { padding:0 0 60px 117px; } /* 1단 레이아웃 */ #container.full { width:100%; border:0; text-align:center; } #container.full #contents { width:100%; border:0; padding:0; margin:0; } .noNav #container { width:100%; border:0; } .noNav #container #contents { margin:0 auto; padding:0; width:1090px; border:0; } .noNav #header { padding:0; height:77px; } /* snb */ #snb { z-index:11; position:absolute; left:0; width:200px; height:100%; font-family:'Noto Sans', sans-serif, '굴림', Gulim; !important; border-right:1px solid #d0d0d0; } #snb h2 { margin:0 -1px 0 -1px; padding:50px 1px 48px; height:22px; color:#fff; background:#3d81d6; font-size:22px; text-align:center; } #snb > ul { font-size:16px; } #snb > ul > li { position:relative; border-bottom:1px solid #dcdcdc; } #snb > ul > li a { position:relative; display:block; padding:18px 25px 18px 13px; color:#444; letter-spacing:-1px; } #snb > ul > li.selected a, #snb > ul > li a:hover{ color:#2d2e2f; font-weight:bold; } #snb > ul > li > button{ position:absolute; top:0; right:0; width:40px; height:55px; } #snb > ul > li.collapse > a { color:#3d81d6; font-weight:bold; } #snb > ul > li.selected > a:after, #snb > ul > li > button:after { position:absolute; top:23px; right:14px; display:block; content:""; background:url("/theme/basic/img/sfix_icon.png") no-repeat 0 0; } #snb > ul > li.selected > a:after { top:20px; width:8px; height:13px; background-position:-50px 0; } #snb > ul > li.expandable > button:after { width:13px; height:8px; background-position:-100px 0; } #snb > ul > li.collapse > button:after { width:13px; height:8px; background-position:-150px 0; } #snb > ul > li > button > span { font-size:0; color:transparent; line-height:0; } #snb > ul > li.expandable > ul { display:none; } #snb > ul > li.collapse > ul { display:block; padding:10px 10px 10px 20px; border-top:1px solid #dcdcdc; font-size:14px; background:#f0f0f2; } #snb > ul > li.collapse > ul > li { position:relative; } #snb > ul > li.collapse > ul > li.selected { font-weight:bold; } #snb > ul > li.collapse > ul > li a:before { position:absolute; top:16px; left:0; display:block; content:""; width:2px; height:2px; background:#666668; } #snb > ul > li.collapse > ul > li a { padding:10px 7px; } #snb > ul li.new a:after { display:inline-block; content:""; margin:0 0 0 5px; width:15px; height:16px; vertical-align:top; background:url("/theme/basic/img/sfix_icon.png") no-repeat -50px -250px; } #snb div.banner { width:160px; margin:40px auto 0; } #snb ul.banner { width:160px; margin:0 auto; text-align:center; } #snb ul.banner li { margin:12px 0 0; border:0; } /* contents */ #contents { z-index:11; position:relative; margin:0 0 0 220px; padding:0 0 10px; height:100%; border-left:0px solid #d0d0d0; box-sizing:border-box; } /* footer */ #footer { z-index:20; position:relative; width:100%; background:#20242b; } #footer .inner { position:relative; margin:0 auto; width:1090px; color:#989a9e; } #footer .inner:after { display:block; content:""; clear:both; } #footer .inner > div { float:left; } #footer .inner .corp { padding:20px 0 20px 0px; width:240px; } #footer .inner .corp h2 { margin:0 0 16px; } #footer .inner .familysite { position:relative; width:150px; } #footer .inner .familysite > button { position:relative; display:block; width:100%; border:1px solid #4f5259; padding:9px 20px; margin:0 auto; color:#989a9e; font-size:13px; background-color:#3b3e45; } #footer .inner .familysite > button:after { display:block; content:"\002B"; position:absolute; top:9px; right:20px; width:8px; height:8px; font-weight:bold; } #footer .inner .familysite a { display:block; padding:6px 20px; color:#989a9e; text-align:left; } #footer .inner .familysite a:hover { text-decoration:underline; } #footer .inner .familysite ul { display:none; position:absolute; bottom:34px; left:0; width:100%; padding:10px 7px 15px; max-height:400px; overflow-y:auto; border:1px solid #4f5259; background-color:#3b3e45; box-sizing:border-box; } #footer .inner .familysite ul li { position:relative; } #footer .inner .familysite ul li:before { display:block; content:""; position:absolute; top:12px; left:15px; width:2px; height:2px; background:#989a9e; } #footer .inner .familysite.selected ul { display:block; } #footer .inner .infoWrap { padding:30px 0 25px; width:820px; line-height:1.8; } #footer .inner .infoWrap strong { padding:0 10px 0 0; } #footer .inner .infoWrap .simplexi, #footer .inner .infoWrap .util { float:left; } #footer .inner .infoWrap .util { margin:0 0 20px; padding:20px 0; width:100%; border-bottom:1px solid #484848; } #footer .inner .infoWrap .util li { position:relative; float:left; padding:0 5%; text-align:center; } #footer .inner .infoWrap .util li:first-child { padding:0 5% 0 0; } #footer .inner .infoWrap .util li:last-child { padding:0 0 0 5%; } #footer .inner .infoWrap .util li:before { position:absolute; top:4px; left:0; display:block; content:""; width:1px; height:11px; background:#484848; } #footer .inner .infoWrap .util li:first-child:before { display:none; } #footer .inner .infoWrap .util li a { color:#fff; } #footer .inner .infoWrap .util li strong { color:#4a83c4; } #footer .inner .infoWrap .info:after { display:block; content:""; clear:both; } #footer .inner .infoWrap .info, #footer .inner .infoWrap .association { float:left; } #footer .inner .infoWrap .info { width:90%; font-size:11px; } #footer .inner .infoWrap .association { padding:40px 0 0; width:30%; } #footer .inner .infoWrap .association a { margin:0 0 0 24px; } #footer .inner .infoWrap .association a:first-child { margin:0; } #footer .inner .infoWrap .address dl:after { display:block; content:""; clear:both; } #footer .inner .infoWrap .address dt, #footer .inner .infoWrap .address dd { display:inline-block; } #footer .inner .infoWrap .address dt { position:relative; padding:0 0 0 11px; } #footer .inner .infoWrap .address dt:first-child { padding:0; } #footer .inner .infoWrap .address dd { padding:0 10px 0 0; } #footer .inner .infoWrap .address dt:after { position:absolute; top:4px; left:0; display:block; content:""; width:1px; height:11px; background:#484848; } #footer .inner .infoWrap .address dt:first-child:after { display:none; } #footer .inner .infoWrap .address dd a { color:#989a9e; } #footer .inner .infoWrap .address dd a.btnBizinfo { display:inline-block; margin:0 0 0 10px; padding:0 4px; border:1px solid #4f5259; color:#989a9e; background:#3b3e45; } #footer .copyright { width:100%; height:47px; line-height:47px; background:#282c32; text-align:center; color:#8c8e92; } /* mBreadcrumb */ .mBreadcrumb { position:absolute; top:53px; right:0px; color:#777; } .mBreadcrumb:after { display:block; content:""; clear:both; } .mBreadcrumb li { position:relative; float:left; padding:0 10px 0 16px; } .mBreadcrumb li:first-child { padding:0 10px 0 0; } .mBreadcrumb li:before { position:absolute; top:0; left:0; display:block; content:"\003E";} .mBreadcrumb li:first-child:before { display:none; } /* slide button */ .btnSlide { overflow:hidden; position:absolute; width:32px; height:16px; background:url("/theme/basic/img/sfix_icon.png") no-repeat -350px -100px; } .btnSlide button { float:left; margin:0; padding:0; width:16px; height:16px; } .btnSlide button span, .btnSwipe button span { overflow:hidden; position:absolute; font-size:0; color:transparent; text-indent:120%; } .btnSwipe ol { overflow:hidden; } .btnSwipe li { float:left; margin:0 0 0 14px; } .btnSwipe li:first-child { margin:0; } .btnSwipe li button { width:16px; height:16px; background:url("/theme/basic/img/sfix_icon.png") no-repeat -550px -100px; } .btnSwipe li.selected button { background-position:-500px -100px; } #sub_titani{width:1090px; height:130px; margin:0 auto; padding-top:50px;} #sub_tit{background:url(../img/sub_bg.jpg) repeat; margin-bottom:0px;} /*---------------------------- Container & textbox -----------------------------*/ #txtcontainer{ color: #fff; font-size: 40px; font-weight:700; margin: 0 auto; padding: 0px 0 0px; width: 1090px; position:relative; min-height: 40px; text-align:left; font-family:나눔고딕,NanumGothic; text-shadow:1px 1px 0 rgba(0,0,0,0.5); } #txtcontainer1{ color: #fafafa; font-size: 22px; font-weight:500; margin: 0 auto; padding: 0px 0 0px; width: 1090px; position:relative; min-height: 50px; text-align:left; font-family:나눔고딕,NanumGothic; text-shadow:1px 1px 0 rgba(0,0,0,0.5); } } /* ********************Desktop (1120 ~ Full)******************** */ @media all and (min-width:1120px) { #footer .btnTop { position:fixed; bottom:280px; padding:20px 0 0; width:28px; height:18px; border:1px solid #d0d0d0; text-align:center; background:#fff url("/theme/basic/img/sfix_icon.png") no-repeat -192px 7px; } }