html{overflow:auto} body{background:#fff} *::placeholder { color:#999; } *::-webkit-input-placeholder { color:#999; } *:-moz-placeholder { color:#999; } *::-moz-placeholder { color:#999; } *:-ms-input-placeholder { color:#999 !important; } *::-ms-input-placeholder { color:#999; } #wrap {position:relative; width:100%;} #header, #mainVisual, #subVisual, #container, #foot{width:100%; position:relative;} .inner {width:1100px; margin:0 auto; position:relative;} /*header*/ #header{position:absolute; left:0; top:0; width:100%; height:90px; z-index:200; box-sizing:border-box; padding-right:320px; background: transparent; } #header + i { display:none; } #header.sub { position:fixed; left:0; top:0; padding-right:0; height:47px; } #header.sub + i { display:block; width:100%; height:47px; } .headerWrap { position:relative; } .headerWrap h1{width:178px; padding-top:30px} .headerWrap h1 img { width:120%; } #header.sub .headerWrap h1 { padding-top:9px; width:140px; } .headerWrap .head-in { padding:0 100px; height:100%; } .headerWrap .head-in h1 img.sub-logo { display:none; } #header.sub .headerWrap .head-in { height:47px; } #header.sub .headerWrap .head-in h1 img { } #header.sub .headerWrap .head-in h1 img.main-logo { display:none; } #header.sub .headerWrap .head-in h1 img.sub-logo { display:block; } #header.sub .headerWrap .head-in { position:relative; max-width:1920px; box-sizing:border-box; margin:0 auto; background:#222; } @media screen and (max-width:1333px){ #header { padding-right:0; } } @media screen and (max-width:1200px){ .headerWrap .head-in { padding:0 40px; } } @media screen and (max-width:900px){ .headerWrap .head-in { padding:0 20px; } .headerWrap h1 { padding-top:15px; } #header { background: none !important; } } /* 우측 사이드 영역 (메인 흰색- 서브는 어떻게 될지 모름) */ .side-area-contain { position:absolute; right:0; top:0; width:320px; height:100%; z-index:100; background-color:#fff; z-index:222;} .side-area-contain .side-inner { height:100%; } .side-area-contain .side-inner .side-inner-in { padding:50px; height:100%; box-sizing:border-box; } @media screen and (max-width:1333px){ .side-area-contain { position:relative; right:auto; top:auto; width:100%; height:auto; } .side-area-contain .side-inner .side-inner-in { padding:80px 100px; } } @media screen and (max-width:900px){ .side-area-contain .side-inner .side-inner-in { padding:50px 20px; } } .sns-lang-contain { text-align:right; } .sns-lang-contain p { display:inline-block; vertical-align:top; height:18px; line-height:18px; } .sns-lang-contain p a { display:inline-block; vertical-align:top; } .sns-lang-contain p.sns { padding-right:10px; } .sns-lang-contain p.sns a { width:18px; height:18px; } .sns-lang-contain p.sns a.twitter { background:url("/images/common/sns_icon01_gray.png") no-repeat left top; } .sns-lang-contain p.sns a.twitter:hover { background:url("/images/common/sns_icon01.png") no-repeat left top; } .sns-lang-contain p.sns a.facebook { background:url("/images/common/sns_icon02_gray.png") no-repeat left top; } .sns-lang-contain p.sns a.facebook:hover { background:url("/images/common/sns_icon02.png") no-repeat left top; } .sns-lang-contain p.sns a.instagram { background:url("/images/common/sns_icon03_gray.png") no-repeat left top; } .sns-lang-contain p.sns a.instagram:hover { background:url("/images/common/sns_icon03.png") no-repeat left top; } .sns-lang-contain p.sns a + a { margin-left:7px; } .sns-lang-contain p.lang { position:relative; padding-left:13px; z-index:1; } .sns-lang-contain p.lang:after { content:''; position:absolute; left:0; top:3px; width:1px; height:12px; background:#b2b2b2; } .sns-lang-contain p.lang a { font-size:14px; color:#222; font-family: 'Montserrat'; font-weight:600; } .sns-lang-contain p.lang a i { display:inline-block; width:18px; height:18px; vertical-align:middle; background:url("/images/common/lang_icon.png") no-repeat left top; margin-right:5px; } .sns-lang-contain p.lang a em { display:inline-block; width:8px; height:5px; vertical-align:middle; background:url("/images/common/icon_linearrw.png") no-repeat left top; background-size:contain; margin-left:5px; margin-bottom:2px;} .sns-lang-contain p.lang a em.up { background-image:url("/images/common/icon_linearrw_up.png");} .sns-lang-contain p.lang span { display:none; position:absolute; left:10px; top:23px; width:76px; height:55px; border:1px solid #e0e0e0; background-color:#fff;} .sns-lang-contain p.lang span a { display:block; color:#666; text-align:center; padding-top:6px; } .sns-lang-contain p.lang span a:hover, .sns-lang-contain p.lang span a.on { color:#222; } .side-area-contain.mtvlayer { display:none; right:122px; top:92px; width:200px; height:30px; background-color:transparent; z-index:1;} .side-area-contain.mtvlayer .sns-lang-contain p.sns a.twitter { background:url("/images/common/sns_icon01_wht.png") no-repeat left top; } .side-area-contain.mtvlayer .sns-lang-contain p.sns a.facebook { background:url("/images/common/sns_icon02_wht.png") no-repeat left top; } .side-area-contain.mtvlayer .sns-lang-contain p.sns a.instagram { background:url("/images/common/sns_icon03_wht.png") no-repeat left top; } .side-area-contain.mtvlayer .sns-lang-contain p.lang a i { background:url("/images/common/lang_icon_wht.png") no-repeat left top; } .side-area-contain.mtvlayer .sns-lang-contain p.lang > a { color:#fff; } .side-area-contain.mtvlayer .sns-lang-contain p.lang a em { background:url("/images/common/icon_linearrw_wht.png") no-repeat left top; background-size:contain;} .side-area-contain.mtvlayer .sns-lang-contain p.lang a em.up { background-image:url("/images/common/icon_linearrw_up_wht.png");} .side-area-contain .board-area { } .side-area-contain .board-area .latest-box { min-height:85px; padding-bottom:25px; } .side-area-contain .board-area .latest-box + .latest-box { border-top:1px solid #dfdfdf; padding-top:22px; } .side-area-contain .board-area .latest-box .tit-brd {position:relative; font-size:18px; color:#000; padding-bottom:15px; font-weight:600; } .side-area-contain .board-area .latest-box .tit-brd a { position:absolute; right:0; top:0; width:18px; height:18px; background:url("/images/common/btn_plus_b.png") no-repeat 50% 50%; background-size:15px; } .side-area-contain .board-area .latest-box div > p { font-size:14px; color:#666; } .side-area-contain .board-area .latest-box .b-list { } .side-area-contain .board-area .latest-box .b-list ul { } .side-area-contain .board-area .latest-box .b-list li { display:block; font-size:14px; } .side-area-contain .board-area .latest-box .b-list li a {position:relative; display:block; font-size:14px; color:#666; font-weight:300; padding-left:8px; margin-bottom: 2px; } .side-area-contain .board-area .latest-box .b-list li a + a { margin-top:5px; } .side-area-contain .board-area .latest-box .b-list li a:after {content:''; position:absolute; left:0; top:9px; width:2px; height:2px; background:#7f7f7f; } .side-area-contain .icons-going-area { padding:22px 0 25px; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;} .side-area-contain .icons-going-area > p { font-size:18px; color:#000; padding-bottom:15px; font-weight:600; } .side-area-contain .icons-going-area .item { display:block; border-top:1px solid #dfdfdf; border-left:1px solid #dfdfdf; border-right:1px solid #dfdfdf; padding:20px 0 20px 18px; } .side-area-contain .icons-going-area .item:last-of-type { border-bottom:1px solid #dfdfdf; } .side-area-contain .icons-going-area .item span { display:block; font-size:16px; color:#222; } .side-area-contain .icons-going-area .item span i { display:inline-block; vertical-align:bottom; width:24px; height:25px; margin-right:8px; } .side-area-contain .icons-going-area .item span i.icon1 { background:url("/images/main/main_icon01.png") no-repeat 50% 50%; background-size:contain; } .side-area-contain .icons-going-area .item span i.icon2 { background:url("/images/main/main_icon02.png") no-repeat 50% 50%; background-size:contain; } .side-area-contain .icons-going-area .item span i.icon3 { background:url("/images/main/main_icon03.png") no-repeat 50% 50%; background-size:contain; } .side-area-contain .icons-going-area .item span i.icon4 { background:url("/images/main/main_icon04.png") no-repeat 50% 50%; background-size:contain; } .side-area-contain .icons-going-area .item p { font-size:14px; color:#666; padding-top:5px; } .side-area-contain .box-guide { width:100%; box-sizing:border-box; padding-top:15px; } .side-area-contain .box-guide > a { display:block; padding:18px 25px; margin-top:10px; background-color:#fff; border:1px solid #dfdfdf; } .side-area-contain .box-guide > a span { position:relative; display:block; font-size:17px; font-weight:500; padding-bottom:12px; } .side-area-contain .box-guide > a span u { display:none; text-decoration:none; position:absolute; right:0; top:0; width:15px; height:14px; background:url("/images/common/btn_plus_w.png") no-repeat left top; background-size:contain; } .side-area-contain .box-guide > a p { font-size:14px; } .side-area-contain .box-guide > a:hover { background-color:#222; color:#fff; } .side-area-contain .box-guide > a:hover span u { display:block; } .side-area-contain .box-guide .black { background-color:#222; color:#fff; } .side-area-contain .box-guide .gray { background-color:#f7f7f7; border:1px solid #dfdfdf; } .side-area-contain .box-guide .gray span { color:#222; font-family: 'Montserrat'; font-weight:600; } .side-area-contain .box-guide .gray p { color:#666; } @media screen and (max-width:1333px){ .side-area-contain { position:relative; right:auto; top:auto; width:100%; height:auto; } .side-area-contain .sns-lang-contain { display:none; } .side-area-contain .board-area { padding-top:0; font-size:0;} .side-area-contain .board-area .latest-box { display:inline-block; vertical-align:top; width:33.333333%; box-sizing:border-box; padding-right:3%; padding-bottom:0; margin-bottom:25px; } .side-area-contain .board-area .latest-box + .latest-box {position:relative; border-top:0; padding-top:0; padding-right:3%; padding-left:3%; } .side-area-contain .board-area .latest-box + .latest-box:after { content:''; position:absolute; left:0; top:0; width:1px; height:100%; background:#dfdfdf; } .side-area-contain .board-area .latest-box:last-of-type { padding-right:0; } .side-area-contain .icons-going-area { font-size:0; } .side-area-contain .icons-going-area .item { display:inline-block; vertical-align:top; width:49%; box-sizing:border-box; } .side-area-contain .icons-going-area .item:nth-of-type(odd) { margin-right:1%; border-bottom:1px solid #dfdfdf; } .side-area-contain .icons-going-area .item:nth-of-type(even) { margin-left:1%; } .side-area-contain .box-guide { font-size:0; } .side-area-contain .box-guide > a { display:inline-block; vertical-align:top; width:49%; box-sizing:border-box; } .side-area-contain .box-guide > a:first-of-type { margin-right:1%; } .side-area-contain .box-guide > a:last-of-type { margin-left:1%; } .side-area-contain.mtvlayer {position:absolute; display:block; } .side-area-contain.mtvlayer .sns-lang-contain { display:block; } } @media screen and (max-width:1200px){ .side-area-contain.mtvlayer { right: 52px; } } @media screen and (max-width:900px){ .side-area-contain.mtvlayer { display:none; } .side-area-contain .board-area .latest-box { display:block; width:100%; padding-right:0; } .side-area-contain .board-area .latest-box + .latest-box { padding-left:0; border-top: 1px solid #dfdfdf; padding-top:20px; } .side-area-contain .board-area .latest-box + .latest-box:after { content:none; } .side-area-contain .board-area .latest-box:nth-of-type(2) { padding-right:0; } } @media screen and (max-width:640px){ .side-area-contain .icons-going-area .item { padding: 15px 0 15px 18px; } .side-area-contain .icons-going-area .item p { display:none; } .side-area-contain .box-guide > div { display:block; width:100%; } .side-area-contain .box-guide .black { margin-right:0; } .side-area-contain .box-guide .gray { margin-left:0; } .side-area-contain .box-guide > a { padding: 20px 15px; } } @media screen and (max-width:445px){ .side-area-contain .icons-going-area .item { padding: 15px 0 15px 15px;} .side-area-contain .icons-going-area .item span { font-size: 14px; } .side-area-contain .box-guide > a { height:139px; } .side-area-contain .box-guide > a br { display:none; } } /* gnb */ #topmenu {position: absolute; top:30px; right: 70px; /* width:665px; */color:#333333; z-index:100;} #topmenu ul li {position:relative; display:inline-block; } #topmenu ul li > a {display:block; text-align:center; width:127px; height:54px; line-height:54px; text-align:center; font-size:23px; font-weight:400; color:#fff; } #topmenu > ul { position:relative; z-index:5; } #topmenu > ul > li > a { margin-left:15px; margin-right:15px; padding-bottom:5px; } #topmenu > ul > li.on > a , #topmenu > ul > li > a:hover { border-bottom:5px solid #222; padding-bottom:0; } #header.sub #topmenu > ul > li > a { height:49px; line-height:49px; font-size:18px;} #topmenu .in-allmenu { display:none; position:absolute; left:0; padding:0 0px 30px 0px; top:52px; width:100%; background:#fff; z-index:1; } #topmenu .in-allmenu ul { font-size:0; } #topmenu .in-allmenu ul li {position:relative; display:inline-block; width:20%; padding-top:30px; vertical-align:top; /* padding-top:30px; */ height:auto;} #topmenu .in-allmenu ul li.on { /* border-top:3px solid #222; padding-top:27px; */ } #topmenu .in-allmenu ul li a { display:block; font-size:15px; color:#666; height:34px; line-height:34px; text-align:center; width:100%;} #topmenu .in-allmenu ul li a:hover { color:#222; } #topmenu .in-allmenu ul li:after {content:''; position:absolute; right:0; top:30px; width:1px; height:204px; background:#dfdfdf; } #topmenu .in-allmenu ul li:last-of-type:after { content:none; } #header.sub #topmenu .in-allmenu { top:47px; background: rgba(255,255,255,0.90); } #header.sub #topmenu .in-allmenu ul li { width:20%; } @media screen and (max-width:1700px){ #topmenu ul li > a { width:135px; } } @media screen and (max-width:1600px){ #topmenu ul li > a { width:110px; } #topmenu .in-allmenu ul li a { font-size:14px; } } @media screen and (max-width:1200px){ #topmenu { right:40px; } } @media screen and (max-width:900px){ #topmenu { display:none; } } /*삼선버튼*/ .menubtn-area { display:none; position:absolute; right:20px; top:20px; width:40px; height:26px; opacity:0; transition:all .3s ease;} .menubtn-area a {position:relative; display:block; width:100%; height:100%; } .menubtn-area a i , .menubtn-area a:before, .menubtn-area a:after { position:absolute; right:0; height:3px; background-color:#fff; } .menubtn-area a i { top:50%; width:80%; margin-top:-1.5px; } .menubtn-area a:before { content:''; top:0; width:100%; } .menubtn-area a:after { content:''; bottom:0; width:100%;} #header.sub #topmenu { color:#fff; top:0; right:190px;} @media screen and (max-width:1200px){ #header.sub #topmenu { right:100px; } } @media screen and (max-width:1000px){ #header.sub #topmenu { display:none; } } @media screen and (max-width:900px){ /* .menubtn-area { display:block; opacity:1; } */ } @media screen and (max-width:640px){ .menubtn-area { width: 35px;} } .sub-top-menu { position:absolute; right:100px; top:12px; padding-right:50px; } .sub-top-menu.main { top:24px; display:none; } .sub-top-menu .sns-lang-contain { text-align:right; } .sub-top-menu .sns-lang-contain p { display:inline-block; vertical-align:top; height:18px; line-height:18px; } .sub-top-menu .sns-lang-contain p a { display:inline-block; vertical-align:top; } .sub-top-menu .sns-lang-contain p.sns { padding-right:10px; } .sub-top-menu .sns-lang-contain p.sns a { width:18px; height:18px; } .sub-top-menu .sns-lang-contain p.sns a.twitter { background:url("/images/common/sns_icon01_gray.png") no-repeat left top; } .sub-top-menu .sns-lang-contain p.sns a.twitter:hover { background:url("/images/common/sns_icon01.png") no-repeat left top; } .sub-top-menu .sns-lang-contain p.sns a.facebook { background:url("/images/common/sns_icon02_gray.png") no-repeat left top; } .sub-top-menu .sns-lang-contain p.sns a.facebook:hover { background:url("/images/common/sns_icon02.png") no-repeat left top; } .sub-top-menu .sns-lang-contain p.sns a.instagram { background:url("/images/common/sns_icon03_gray.png") no-repeat left top; } .sub-top-menu .sns-lang-contain p.sns a.instagram:hover { background:url("/images/common/sns_icon03.png") no-repeat left top; } .sub-top-menu .sns-lang-contain p.sns a + a { margin-left:7px; } .sub-top-menu .sns-lang-contain p.lang { position:relative; padding-left:13px; } .sub-top-menu .sns-lang-contain p.lang a { font-size:14px; color:#222; font-family: 'Montserrat'; font-weight:600; } .sub-top-menu .sns-lang-contain p.lang a i { display:inline-block; width:15px; height:15px; vertical-align:middle; background:url("/images/common/lang_icon.png") no-repeat left top; margin-right:5px; background-size:contain; } .sub-top-menu .sns-lang-contain p.lang a em { display:inline-block; width:8px; height:5px; vertical-align:middle; background:url("/images/common/icon_linearrw.png") no-repeat left top; margin-left:8px; margin-bottom:2px;} .sub-top-menu .sns-lang-contain p.lang span.under { display:none; position:absolute; right:0px; top:23px; width:71px; background-color:#fff; } .sub-top-menu .sns-lang-contain p.lang span.under a { display:block; padding:10px 10px 10px 17px; text-align:center; } @media screen and (max-width:900px){ .sub-top-menu.main { display:block; } } /*삼선버튼 - 서브*/ .sub-menu-btn { position:absolute; right:0; top:0; width:32px; } .sub-menu-btn a {position:relative; display:block; width:100%; height:22px; } .sub-menu-btn a i , .sub-menu-btn a:before, .sub-menu-btn a:after { position:absolute; right:0; height:2px; background-color:#fff; } .sub-menu-btn a i { top:50%; width:100%; margin-top:-1.5px; } .sub-menu-btn a:before { content:''; top:0; width:100%; } .sub-menu-btn a:after { content:''; bottom:0; width:100%;} .sub-menu-btn p { font-size:24px; color:#000; line-height:1.1; padding:0 5px; margin-top:30px; } .sub-menu-btn p i { display:inline-block; font-style:normal; padding-top:10px; } @media screen and (max-width:1200px){ .sub-top-menu { right:40px; } } @media screen and (max-width:900px){ .sub-top-menu { right:20px; top:12px; } .sub-top-menu .sns-lang-contain { display:none; } .sub-menu-btn p { display:none; } } /*삼선 - 전체 메뉴*/ .float-all-menu { display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:999; } .float-all-menu .all-contain { position:absolute; right:-560px; top:0; height:100%; background-color:#fff; z-index:2;} .float-all-menu .all-contain .inner-cont { width:550px; height:100%; } .float-all-menu .all-contain .inner-cont .logo-box { padding:28px 0 0 50px; height:90px; border-bottom:1px solid #222; box-sizing:border-box; } .float-all-menu .all-contain .inner-cont .logo-box img { width:166px; } .float-all-menu .all-contain .inner-cont .logo-box .closebtn { position:absolute; right:50px; top:33px; } .float-all-menu .all-contain .inner-cont .logo-box .closebtn a { display:inline-block; width:26px; height:26px; background:url("/images/common/btn_close_x.png") no-repeat 50% 50%; background-size:contain;} .float-all-menu .all-contain .inner-cont .sns-lang-contain {position:relative; text-align:left; } .float-all-menu .all-contain .inner-cont .sns-lang-contain .closebtn { position:absolute; right:0; top:0; } .float-all-menu .all-contain .inner-cont .sns-lang-contain .closebtn a { display:inline-block; width:24px; height:24px; background:url("/images/common/btn_close_x.png") no-repeat 50% 50%; background-size:contain;} .float-all-menu .all-contain .inner-cont .menu-area-list { font-size:0; height:calc(100% - 79px); box-sizing:border-box; } .float-all-menu .all-contain .inner-cont .menu-area-list > div { display:inline-block; vertical-align:top; height:100%; overflow-y:auto; -webkit-overflow-scrolling: touch; } .float-all-menu .all-contain .inner-cont .menu-area-list .onedepth { width:30%; border-right:1px solid #dfdfdf; box-sizing:border-box; } .float-all-menu .all-contain .inner-cont .menu-area-list .onedepth ul {} .float-all-menu .all-contain .inner-cont .menu-area-list .onedepth li { display:block; text-align:center; height:65px; } .float-all-menu .all-contain .inner-cont .menu-area-list .onedepth li a { display:inline-block; font-size:24px; color:#222; font-weight:500; margin-top:14px; } .float-all-menu .all-contain .inner-cont .menu-area-list .onedepth li a.on { border-bottom:2px solid #2b2b2b; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth { width:70%; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu { display:none; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu.on { display:block; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu { } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu > a {position:relative; display:block; height:70px; line-height:70px; padding-left:24px; font-size:20px; color:#222; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu > a i { display:none; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu > a.on i { display:inline-block; position:absolute; right:50px; top:50%; width:22px; height:2px; background:#292929; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu div { display:none; padding:10px 0 10px 35px; background:#f5f5f5; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu div.on { display:block; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu div a { display:block; font-size:18px; color:#666; height:40px; line-height:40px; font-weight:300; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu div a.on { color:#222; font-weight:400; } .float-all-menu .f-blind { position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:1; } @media screen and (max-width:640px){ .float-all-menu .all-contain { width:100%; } .float-all-menu .all-contain .inner-cont { width: 100%; } .float-all-menu .all-contain .inner-cont .logo-box { padding:20px; height:auto; } .float-all-menu .all-contain .inner-cont .logo-box .closebtn { right:25px; top:26px; } .float-all-menu .all-contain .inner-cont .menu-area-list .onedepth { width:20%; } .float-all-menu .all-contain .inner-cont .menu-area-list .onedepth li { height:50px; } .float-all-menu .all-contain .inner-cont .menu-area-list .onedepth li a { font-size:18px; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth { width:80%; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu > a { font-size:15px; padding-left: 14px; height:50px; line-height:50px; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu div { padding: 8px 0 8px 22px; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu div a { font-size:15px; height:37px; line-height:37px; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu > a.on i { right:26px; width:18x; } } @media screen and (max-width:380px){ .float-all-menu .all-contain .inner-cont { width:100%; } .float-all-menu .all-contain .inner-cont .menu-area-list .onedepth li a { font-size:16px; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu div { padding: 8px 0 8px 12px; } .float-all-menu .all-contain .inner-cont .menu-area-list .twodepth .child-menu .inmenu div a { font-size:14px; letter-spacing:-1px; } } /* quick menu #quick {width:50px; height:153px; position:absolute; left:50%; margin-left:600px;} #quick ul{width:50px; font-size:0;} #quick ul li {width:82px; height:65px; margin-bottom:1px; text-align:center; color:#fff; vertical-align:middle;font-size:0;} #quick ul li a { display:block; } */ /* 메인비주얼 Type01 */ #mainVisual {position:relative; width:100%; min-height:300px; position:relative; z-index:1 !important; overflow:hidden; box-sizing:border-box; padding-right:320px; } #mainVisual .visual-text-box { position:absolute; left:100px; top:210px; height:auto; padding-right:20px; z-index:100; color:#fff; line-height:1.3; font-weight:300; text-shadow: 1px 1px 10px rgba(0, 0, 0, 1); } #mainVisual .visual-text-box > div { } #mainVisual .visual-text-box .fir-tx { font-size:20px; padding-top:20px; } #mainVisual .visual-text-box .bg-tx { font-size:80px; line-height:1.2; padding:10px 0; } #mainVisual .visual-text-box .lin-tx { font-size:20px; padding-left: 3px; padding-bottom:15px; } #mainVisual .visual-text-box em {display:inline-block; font-style:normal; border-bottom: 1px solid #fff; font-weight:400; padding-bottom:8px; } #mainVisual { background-image: url('/images/main/main_visual03.jpg'); background-size: cover; background-position: center top; background-repeat: no-repeat; height: 100vh; } @media screen and (max-width:1333px){ #mainVisual { padding-right:0; } } @media screen and (max-width:900px){ #mainVisual .visual-text-box { left:20px; } #mainVisual { height:700px; } } @media screen and (max-width: 800px) { #mainVisual { background-image: url(/images/main/main_visual03mo.jpg); height: 100vh; background-size: cover; background-position: center bottom; } } @media screen and (max-width:640px){ #mainVisual .visual-text-box { top:120px; } #mainVisual .visual-text-box .lin-tx { font-size:15px;} #mainVisual .visual-text-box .bg-tx { font-size:40px; } #mainVisual .visual-text-box .fir-tx { font-size:18px; } } @media screen and (max-width:360px){ #mainVisual .visual-text-box .fir-tx br { display:none; } } /*메인비주얼 블릿*/ #mainVisual .bx-controls { position:absolute; left:100px; bottom:42px; width:100%; z-index: 100; } #mainVisual .bx-controls .bx-pager { display:inline-block; width:auto; } #mainVisual .bx-controls .bx-pager .bx-pager-item { display:inline-block; } #mainVisual .bx-controls .bx-pager .bx-pager-item + .bx-pager-item { margin-left:17px; } #mainVisual .bx-controls .bx-pager .bx-pager-item a { display:block; width:13px; height:13px; border-radius:50%; background-color:transparent; border:1px solid #fff; font-size:0; } #mainVisual .bx-controls .bx-pager .bx-pager-item a.active { background-color:#fff; } @media screen and (max-width:900px){ #mainVisual .bx-controls { left:20px; } #mainVisual .bx-controls .bx-pager .bx-pager-item + .bx-pager-item { margin-left:10px; } #mainVisual .bx-controls .bx-pager .bx-pager-item a { width:9px; height:9px; } } /* 플레이 : 일시정지 버튼 */ #mainVisual .slide-play-toggle { position:absolute; left:169px; bottom:42px; width:10px; height:14px; z-index: 100; } #mainVisual .slide-play-toggle a { display:block; display:block; width:0; height:0; border-width:6.5px 0 6.5px 10px; border-color:transparent transparent transparent #fff; border-style:solid; } #mainVisual .slide-play-toggle a.pus { position:relative; border:0; width:10px; height:14px; } #mainVisual .slide-play-toggle a.pus:before { content:''; position:absolute; left:0px; top:0; width:3px; height:13px; background-color:#fff; } #mainVisual .slide-play-toggle a.pus:after { content:''; position:absolute; right:0px; top:0; width:3px; height:13px; background-color:#fff; } @media screen and (max-width:900px){ #mainVisual .slide-play-toggle { bottom:39px; left: 66px; } #mainVisual .slide-play-toggle a.pus { width:8px; height:11px; } #mainVisual .slide-play-toggle a.pus:before { width:2px; height:11px; } #mainVisual .slide-play-toggle a.pus:after { width:2px; height:11px; } } /*main contents */ .contentsArea { padding-bottom:100px; padding-top:10px; } @media screen and (max-width:1300px){ .subcontainer { padding-left:50px; padding-right:50px; } } @media screen and (max-width:640px){ .subcontainer { padding-left:20px; padding-right:20px; } .contentsArea { padding-bottom:50px; } } .main-section-title { font-size:40px; color:#191919; font-weight:600; font-family: 'Poppins'; line-height:1; } .main-section-title .title-caption { font-size:16px; font-weight:400; color:#777; font-family:'Nanum Gothic'; margin-top:7px;} a.btn-brn { display:inline-block; width:145px; height:45px; line-height:45px; text-align:center; font-size:16px; color:#fff; font-weight:300; background-color:#977b5d; } .main #contents {} .mainConWrap { } /* 메인 공지사항, 자유게시판, SMS문의하기 부분 - 미사용시 삭제 */ .mainConWrap .cols{width:100%; margin-top:30px; margin-bottom:100px; overflow:hidden} .col1, .col2, .col3, .col4{float:left; position:relative;} .mainConWrap .col1{width:355px; margin-right:40px;} .mainConWrap .col2{width:355px; margin-right:40px;} .mainConWrap .col3{width:310px;} .mainConWrap .cols h3{margin-bottom:18px; padding-bottom:15px; font-size:22px; color:#191919; font-weight:600; border-bottom:1px solid #ddd; } .mainConWrap .col1 .more {position:absolute; top:0; right:0} .mainConWrap .col2 .product{position:relative} .mainConWrap .col2 .more{position:absolute; top:0; right:0px} .mainConWrap .col2 .product .left{text-align:left; float:left; padding-right:5px;} .mainConWrap .col2 .product .right{text-align:right; position:absolute; top:0; right:0; padding-left:5px;} .mainConWrap .col2 .product #gallery{width:360px; height:75px; vertical-align:top} .mainConWrap .col1 .more, .mainConWrap .col2 .more { top:5px; } .mainConWrap span.more a { displaY:inline-block; padding-right:8px; background:url("/images/common/icon/icon_more_clamp.png") no-repeat right 5px; } /*sub contents*/ #container {} #container #contents {min-height:500px; } .sub #contents{/* width:750px; float:right;*/ min-height:400px; text-align:left; } .sub #contents .titleArea{margin-top:30px; margin-bottom:40px; position:relative;} .sub #contents .titleArea h3{ padding:0px; color:#000; font-size:40px; font-weight:600; text-align:center;} .sub #contents .titleArea .location { margin-top:20px; font-size:13px; text-align:center; } /* 서브비주얼 */ #subVisual { position:relative; height:165px; overflow:hidden; background:#f7f7f7; border-bottom:1px solid #ebebeb; } #subVisual .subv-title { max-width:1920px; margin:0 auto; color:#222; text-align:center; } #subVisual .subv-title > div { padding-top:24px; } #subVisual .subv-title span.top {display:block; font-size:50px; color:#222; font-weight:500; } #subVisual .subv-title p.center { font-size:22px; color:#666; font-weight:300; margin-top:10px; line-height:1.1; } #subVisual .subv-title p.center br { display:none; } #subVisual .subv-title .side-link { position:absolute; left:0; top:35px; width:100%; } #subVisual .subv-title .side-link a { display:inline-block; font-size:18px; color:#000; height:43px; line-height:43px; } #subVisual .subv-title .side-link a.left-arr {margin-left:40px; float:left; padding-left:39px; padding-right:10px; background:url("/images/common/btn_arr_left.png") no-repeat left top; } #subVisual .subv-title .side-link a.right-arr {margin-right:40px; float:right; padding-right:39px; padding-left:10px; background:url("/images/common/btn_arr_right.png") no-repeat right top; } @media screen and (max-width:1000px){ #subVisual .subv-title .side-link a.left-arr , #subVisual .subv-title .side-link a.right-arr { font-size:0; background-size:15px 28px; } #subVisual .subv-title .side-link a.left-arr { margin-left:20px; background-position:left 50%;} #subVisual .subv-title .side-link a.right-arr { margin-right:20px; background-position:right 50%; } } @media screen and (max-width:640px){ #subVisual { height:145px; } #subVisual .subv-title span.top { font-size:30px; } #subVisual .subv-title p.center { font-size:16px; } #subVisual .subv-title p.center br { display:block; } #subVisual .subv-title .side-link { top:27px; } } #subVisual .arrow-down { position:absolute; bottom:0; left:0; width:100%; height:40px; } #subVisual .arrow-down i { position:absolute; left:50%; margin-left:-20px; top:0; width:40px; height:40px; background:url("/images/common/icon_linearrw_big.png") no-repeat 50% 50%; background-size:16px 15px; animation:arrwani 1s ease; animation-iteration-count:infinite; -webkit-animation:arrwani 1s ease; -webkit-animation-iteration-count:infinite; -ms-animation:arrwani 1s ease; -ms-animation-iteration-count:infinite; -moz-animation:arrwani 1s ease; -moz-animation-iteration-count:infinite; -o-animation:arrwani 1s ease; -o-animation-iteration-count:infinite;} @keyframes arrwani{ 0% { top:0; } 50% { top:-10px; } 100% { top:0; } } @media screen and (max-width:640px){ #subVisual .arrow-down i { background-size:10px 9px; } } /*sub visual*/ .subVsal11 { background:url("/images/sub/sub_visual11.jpg") no-repeat 50% top; } .subVsal12 { background:url("/images/sub/sub_visual12.jpg") no-repeat 50% top; } .subVsal13 { background:url("/images/sub/sub_visual13.jpg") no-repeat 50% top; } .subVsal21 { background:url("/images/sub/sub_visual21.jpg") no-repeat 50% top; } .subVsal41 { background:url("/images/sub/sub_visual41.jpg") no-repeat 50% top; } .subVsal42 { background:url("/images/sub/sub_visual42.jpg") no-repeat 50% top; } .subVsal43 { background:url("/images/sub/sub_visual43.jpg") no-repeat 50% top; } .subVsal44 { background:url("/images/sub/sub_visual44.jpg") no-repeat 50% top; } #SNB { max-width:2200px; margin:0 auto; } .SNBWrap { position:relative; border-bottom:1px solid #efefef; text-align:center; } .SNBWrap > a.active-section { display:none; } .SNBWrap ul.menu { display:inline-block; width:100%; max-width:1600px; margin:0 auto; height:64px; font-size:0; text-align:center; vertical-align:top; background:#fff;} .SNBWrap ul.menu li { display:inline-block; vertical-align:top; } .SNBWrap ul.menu li:last-of-type { margin-right:0; } .SNBWrap ul.menu li a { display:inline-block; width:70%; height:54px; line-height:54px; font-size:15px; color:#666; font-weight:300; text-align:Center; box-sizing:border-box; } .SNBWrap ul.menu li.snb_on a { color:#222; border-bottom:2px solid #222; font-weight:600; } .SNBWrap ul.menu.w2 li { width:25%; } .SNBWrap ul.menu.w3 li { width:33.333%; } .SNBWrap ul.menu.w3 li a { width:40%; } .SNBWrap ul.menu.w5 li { width:20%; } .SNBWrap ul.menu.w5 li a { width:180px; } .SNBWrap ul.menu.w7 li { width:11%; } .SNBWrap ul.menu.w7 li a { width:100%; } .SNBWrap ul.menu li a.mut { line-height:1.2; padding-top:11px;} @media screen and (max-width:1024px){ .SNBWrap ul.menu.w3 li a { width:70%; } } @media screen and (max-width:980px){ .SNBWrap ul.menu.w7 li a { font-size:14px; } } @media screen and (max-width:830px){ .SNBWrap ul.menu.w7 li a { font-size:13px; letter-spacing:-1px; } } .SNBWrap .mo-sub-depth { display:none; } .SNBWrap .mo-sub-depth a.home { } @media screen and (max-width:640px){ .SNBWrap { font-size:0; } .SNBWrap .mo-sub-depth { display:inline-block; } .SNBWrap ul.menu.w2 li { width:100%; } .SNBWrap ul.menu.w3 li { width:100%; } .SNBWrap ul.menu.w3 li a { width:100%; } .SNBWrap ul.menu.w5 li { width:100%; } .SNBWrap ul.menu.w5 li a { width:100%; } .SNBWrap ul.menu.w7 li { width:100%; } .SNBWrap ul.menu.w7 li a { width:100%; font-size:14px; } .SNBWrap ul.menu li.snb_on a { border-bottom:0; font-weight:500; } .SNBWrap ul.menu li a.mut {padding-top:5px; } } @media screen and (max-width:820px){ .SNBWrap ul.menu.lowd li a { font-size:16px; } } @media screen and (max-width:640px){ .SNBWrap { position:relative; padding:20px; z-index:100; } .SNBWrap ul.menu {display:none; /* display:block; */ position:absolute; left:0px; top:56px; height:auto; width:calc(100% - 40px); margin:0 20px; box-sizing:border-box; border:1px solid #222; padding-top:0; } .SNBWrap ul.menu li { display:block; margin-right:0; width:100%; } .SNBWrap ul.menu li + li { border-top:1px solid #ccc; } .SNBWrap ul.menu li a { font-size:15px; display:block; width:100%; height:auto; line-height:inherit; padding:5px 10px; text-align:left; border:0; box-sizing:border-box; background-color:#fff; color:#555; } .SNBWrap ul.menu li a.active { border-width:1px; border:0; line-height:35px; color:#000; font-weight:400;} .SNBWrap a.active-section { display:block; border:1px solid #222; height:auto; line-height:inherit; padding:5px 10px; font-size:15px; color:#222; background:url("/images/common/icon_select_arrw_black.png") no-repeat 97% 50%; background-size: 15px 9px; text-align:left; } .SNBWrap ul.menu li a br , .SNBWrap a.active-section br { display:none; } } /*common*/ .subcontain1920 { margin:0 auto; max-width:1920px; } .subcontain1400 { margin:0 auto; max-width:1400px; } .subcontain1200 { margin:0 auto; max-width:1200px; } @media screen and (max-width:1300px){ .subcontain1200 { padding:0 50px; } } @media screen and (max-width:640px){ .subcontain1200 { padding:0 20px; } } .big-text { font-size:43px; color:#000; line-height:1.3; font-weight:300; word-break: keep-all;} .big-text.more { font-size:40px; } .big-text b { } .big-text b.mid { font-weight:400; } .sm-text { font-size:18px; color:#000; line-height:1.3; font-weight:300;} .sm-text p.stt { font-size:20px; } .sm-text p.stt b { font-size:24px; font-weight:500;} .sm-text .mon { font-family: 'Montserrat';} .align-center-pad { text-align:center; padding:90px 0 50px; } .align-center-pad .sm-text { padding-top:20px; } @media screen and (max-width:640px){ .big-text { font-size:24px; } .big-text.more { font-size:36px; } .sm-text { font-size:15px; } .sm-text p.stt { font-size:18px; } .sm-text p.stt b { font-size:20px;} } /* 경영정보 - 경영공시 - */ .sub-thr-depth { padding-bottom:50px; } .sub-thr-depth ul { font-size:0; } .sub-thr-depth li { display:inline-block; vertical-align:top; width:20%;} .sub-thr-depth li a { display:block; height:60px; line-height:60px; text-align:center; font-size:18px; color:#666; border-top:1px solid #dfdfdf; border-right:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; } .sub-thr-depth li:first-of-type a { border-left:1px solid #dfdfdf; } .sub-thr-depth li a.on { background:#222; border-color:#222; color:#fff; } @media screen and (max-width:1024px){ .sub-thr-depth li { width:33.33333%; } .sub-thr-depth li:nth-of-type(4) a { border-left:1px solid #dfdfdf; } .sub-thr-depth li:nth-of-type(n+4) a { border-top:0; } } @media screen and (max-width:640px){ .sub-thr-depth { padding-bottom:20px; } .sub-thr-depth li { width:50%; } .sub-thr-depth li:nth-of-type(4) a { border-left:0; } .sub-thr-depth li:nth-of-type(n+3) a { border-top:0; } .sub-thr-depth li:nth-of-type(3) a , .sub-thr-depth li:nth-of-type(5) a { border-left:1px solid #dfdfdf; } .sub-thr-depth li a { height:50px; line-height:50px; font-size:15px; } } @media screen and (max-width:360px){ .sub-thr-depth li a { height:40px; line-height:40px; font-size:13px; } } /*인사말*/ .greetings_bg01 { background:url("/images/company/greetings_bg1.jpg") no-repeat 50% top; } .greetings_box01 { width:100%; font-size:0; padding-top:90px; padding-bottom:200px; } .greetings_box01 > div { display:inline-block; width:55%; vertical-align:top; } .greetings_box01 > div:last-of-type { width:40%; text-align:right; margin-left:5%;} .greetings_box01 > div:last-of-type img { max-width:100%; } .greetings_box01 .big-text { padding-bottom:30px; } .greetings_box01 .sm-text { text-align:justify; } .greetings_bg02 { height:730px; background:url("/images/company/greetings_bg2.jpg") no-repeat 50% top; } .greetings_box02 { padding-top:50px; } .greetings_box02 > div { padding-left:32%; } .greetings_box02 .big-text { padding-bottom:30px; } .greetings_box02 .sm-text { text-align:justify; } .greetings_bg01 .photo { display:none; } .greetings_bg01 .photo img { max-width:100%; } .greetings_bg02 .photo { display:none; } .greetings_bg02 .photo img { max-width:100%; } @media screen and (max-width:1200px){ .greetings_bg01 { background:url("/images/company/greetings_bg1.jpg") no-repeat 59% top; } .greetings_bg02 { background:url("/images/company/greetings_bg2.jpg") no-repeat 40% top; } } @media screen and (max-width:800px){ .greetings_bg01 { height:auto; background:none; } .greetings_bg01 .photo { display:block;} .greetings_box01 { padding-top:0; padding-bottom:60px; } .greetings_box01 > div { width:100%; } .greetings_bg02 { height:auto; background:none; } .greetings_bg02 .photo { display:block;} .greetings_box02 { padding-top:20px; padding-bottom:60px; } .greetings_box02 > div { width:100%; padding-left:0;} .greetings_box01 > div:last-of-type { display:none; } } @media screen and (max-width:640px){ .align-center-pad{ padding:50px 0 40px; } .greetings_box02 .big-text br { display:none; } } /*연혁*/ .history-contain {position:relative; margin-top:90px; font-size:0; padding-bottom:75px; } .history-contain .le-title { position:absolute; left:0; top:0; } .history-contain .le-title p { font-size:48px; color:#222; font-weight:300; line-height:1.1;} .history-contain .le-title p b { font-family: 'Montserrat'; font-weight: 600; } .history-contain .le-title span { display:block; margin-top:10px; font-size:30px; color:#222; font-weight:300;} .history-contain .le-title span em { font-style:normal; font-family: 'Montserrat'; font-weight:300;} .history-contain .history-list { padding-left:320px; } .history-contain .history-list ul { } .history-contain .history-list li { position:relative; padding-left:135px; padding-bottom:30px; border-bottom:1px solid #dfdfdf;} .history-contain .history-list li + li { margin-top:30px; } .history-contain .history-list li:last-of-type { border-bottom:0; } .history-contain .history-list li span {position:absolute; left:0; top:0; display:block; font-size:30px; color:#222; font-weight:600; font-family: 'Montserrat'; } .history-contain .history-list li p {position:relative; font-size:18px; color:#222; padding-left:80px; font-weight:300;} .history-contain .history-list li p + p { margin-top:10px; } .history-contain .history-list li p u {position:absolute; left:0; top:4px; text-decoration:none; font-family: 'Montserrat'; font-weight:500; } @media screen and (max-width:900px){ .history-contain .le-title { position:relative; left:auto; top:auto; padding-bottom:40px; } .history-contain .history-list { padding-left:0; } } @media screen and (max-width:640px){ .history-contain { margin-top:30px; } .history-contain .le-title p { font-size:30px; } .history-contain .history-list li { padding-left:75px; } .history-contain .history-list li span { font-size:20px; } .history-contain .history-list li p { font-size:15px; padding-left:60px; } } /*찾아오시는 길*/ .location-map-contain { } .location-map-contain .root_daum_roughmap { width:100%; } .location-map-contain .root_daum_roughmap .wrap_map { height:590px; } .location-map-infor { position:relative; top:0; z-index:10; padding-bottom:50px;} .location-map-infor .map-infor-in { font-size:0; background:#fff; } .location-map-infor .map-infor-in .inbox { position:relative; display:inline-block; width:50%; vertical-align:top; box-sizing:border-box; padding:50px 30px; } .location-map-infor .map-infor-in .inbox > img { position:absolute; left:30px; top:40px; width:75px; } .location-map-infor .map-infor-in .inbox div { padding-left:100px; } .location-map-infor .map-infor-in .inbox div span { display:block; font-size:18px; color:#222; font-weight:500; padding-bottom:15px; } .location-map-infor .map-infor-in .inbox p { font-size:16px; color:#222; letter-spacing:-1px; } .location-map-infor .map-infor-in .inbox p + p { margin-top:7px; } .location-map-infor .map-infor-in .inbox i { display:inline-block; font-style:normal; padding:1px 0 2px; width:43px; text-align:center; font-size:14px; color:#fff; vertical-align:baseline; font-weight:300;} .location-map-infor .map-infor-in .inbox i.sub1 { background:#15458a; } .location-map-infor .map-infor-in .inbox i.sub2 { background:#009246; } .location-map-infor .map-infor-in .inbox i.sub5 { background:#6d3abf; } .location-map-infor .map-infor-in .inbox i.air { background:#79abde; } .location-map-infor .map-infor-in .inbox i.bus { background:#4550a4; } .location-map-infor .map-infor-in .inbox em.clm { color:#666; font-size:17px; display:inline-block; padding:0 5px; font-family: 'Noto Serif KR'; } @media screen and (max-width:888px){ .location-map-infor .map-infor-in .inbox { display:block; width:100%; } } @media screen and (max-width:700px){ .location-map-infor { margin-top:0; } .location-map-infor .map-infor-in .inbox { padding:40px 0; } .location-map-infor .map-infor-in .inbox > img { left:0; } .location-map-contain .root_daum_roughmap .wrap_map { height:300px; } } @media screen and (max-width:640px){ .location-map-infor .map-infor-in .inbox div { position:relative; padding-top:60px; padding-left: 0px; } .location-map-infor .map-infor-in .inbox span { position:absolute; left:53px; top:8px; } .location-map-infor .map-infor-in .inbox p { font-size:15px; } .location-map-infor .map-infor-in .inbox > img { width:43px; } .location-map-infor .map-infor-in .inbox + .inbox { padding-top:0; } .location-map-infor .map-infor-in .inbox + .inbox > img { top:0; } } /*관계사*/ .companies-contain { padding:95px 0 100px; } .companies-contain ul { font-size:0; } /* .companies-contain li { position:relative; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #dfdfdf; } */ .companies-contain li { display:inline-block; vertical-align:top; width:48%; margin-right:4%; margin-bottom:4%; border:1px solid #e1e1e1; box-sizing:border-box; } .companies-contain li:nth-of-type(even) { margin-right:0; } .companies-contain li > img { position:absolute; left:0; top:0; } .companies-contain li .inbox {position:relative; min-height:268px; padding:40px; } .companies-contain li .inbox > span { display:block; font-size:30px; color:#222; font-weight:300; padding-bottom:10px; letter-spacing:-0.5px;} .companies-contain li .inbox > span b { font-weight:500; } .companies-contain li .inbox p { font-size:18px; color:#222; font-weight:300; } .companies-contain li .inbox p em { font-style:normal; font-family: 'Montserrat'; font-weight:400; } .companies-contain li .inbox p s { display:inline-block; vertical-align:baseline; width:1px; height:15px; background:#666; margin:0 5px; } .companies-contain li .inbox p br.ab { display:block; } .companies-contain li .inbox p u { position:relative; padding-left:35px; text-decoration:none; display:block; line-height:1.5; } .companies-contain li .inbox p u + u { margin-top:7px; } .companies-contain li .inbox p u i { position:absolute; left:0; top:3px; display:inline-block; width:20px; height:20px; } .companies-contain li .inbox p u i.icon1 { background:url("/images/company/companies_icon01.png") no-repeat 50% top; background-size:contain; } .companies-contain li .inbox p u i.icon2 { background:url("/images/company/companies_icon02.png") no-repeat 50% top; background-size:contain; } .companies-contain li .inbox p u i.icon3 { background:url("/images/company/companies_icon03.png") no-repeat 50% top; background-size:contain; } .companies-contain li .inbox p u br { display:none; } .companies-contain li .inbox > a.lineboxbtn { position:absolute; left:40px;bottom:40px; } .companies-contain li:nth-last-of-type(1) .inbox , .companies-contain li:nth-last-of-type(2) .inbox { min-height:180px; } @media screen and (max-width:1300px){ .companies-contain li .inbox > span { font-size:26px; } } @media screen and (max-width:1168px){ .companies-contain li .inbox > span { font-size:20px } .companies-contain li .inbox p { font-size:15px; } } @media screen and (max-width:1049px){ .companies-contain li .inbox { padding:20px; min-height: 239px;} .companies-contain li .inbox > a.lineboxbtn { left:20px; bottom:20px; } } @media screen and (max-width:963px){ .companies-contain { padding:50px 0 50px; } .companies-contain li { width:100%; margin-right:0; } .companies-contain li .inbox { min-height: auto; } .companies-contain li .inbox > a.lineboxbtn { position:relative; left:auto; bottom:auto; margin-top:30px; } .companies-contain li .inbox p u br { display:block; } .companies-contain li .inbox p s { display:none; } .companies-contain li:nth-last-of-type(1) .inbox , .companies-contain li:nth-last-of-type(2) .inbox { min-height:auto; } } @media screen and (max-width:640px){ } /* @media screen and (max-width:1090px){ .companies-contain li > img { width:350px;} .companies-contain li .inbox { margin-left:390px; } } @media screen and (max-width:999px){ .companies-contain li > img { width:280px; } .companies-contain li .inbox { margin-left:310px; } } @media screen and (max-width:920px){ .companies-contain li .inbox > span { font-size:20px; } .companies-contain li .inbox p { font-size:15px; } .companies-contain li .inbox { min-height:225px; } } @media screen and (max-width:777px){ .companies-contain { padding: 30px 0 50px; } .companies-contain li > img { position:relative; width:100%; } .companies-contain li .inbox { margin-left:0; margin-top:20px; min-height:auto; } .companies-contain li .inbox > a.lineboxbtn { position:relative; left:auto; top:auto; margin-top:20px; } .companies-contain li .inbox p u { padding-left:24px; } .companies-contain li .inbox p u i { width:15px; height:15px; } } @media screen and (max-width:360px){ .companies-contain li .inbox p { font-size:14px; } .companies-contain li .inbox p u br { display:block; } .companies-contain li .inbox p u s { display:none; } } */ .lineboxbtn { display:inline-block; font-size:15px; color:#222; padding:11px 20px; border:1px solid #222; background:#fff; text-align:center; transition:all .3s ease; -webkit-transition:all .3s ease; -ms-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease;} .lineboxbtn:hover { color:#fff; background:#222; } /*팩토리 & 일반자금대출 & 02상품소개_01기업금융_03프로젝트파이낸스 & 신기술금융 & 인수금융*/ .factoring-contain { position:relative; border-top:1px solid #dfdfdf; padding-bottom:90px; } .factoring-contain > i { position:absolute; left:0; top:-1px; width:154px; height:1px; background:#222; } .factoring-contain > div { position:relative; margin-top:40px; } .factoring-contain > div > span { position:absolute; lefT:0; top:0; display:inline-block; font-size:24px; color:#222; font-weight:500; } .factoring-contain > div .in-box { padding-left:170px; } .factoring-contain > div .in-box ul { } .factoring-contain > div .in-box li { display:block; font-size:18px; color:#666; font-weight:300; } .factoring-contain > div .in-box li + li { margin-top:5px; } .factoring-contain > div .in-box li b { font-weight:400; color:#222; } .factoring-contain > div .in-box.firstpad li { position:relative; padding-left:95px;} .factoring-contain > div .in-box.firstpad li span { position:absolute; left:0; top:0; display:inline-block; } .factoring-contain > div .in-box.firstpad li.w1 { padding-left:104px; } .factoring-contain > div .in-box.firstpad li.w2 { padding-left:143px; } .factoring-contain > div .in-box.dotlist li { position:relative; padding-left:13px; } .factoring-contain > div .in-box.dotlist li span { position:absolute; left:0; top:0; } .factoring-contain > div .in-box.subbox { font-size:0; } .factoring-contain > div .in-box.subbox > div { display:inline-block; vertical-align:top; width:32%; height:240px; border:1px solid #e0e0e0; box-sizing:border-box; margin-right:2%; text-align:Center;} .factoring-contain > div .in-box.subbox > div:last-of-type {margin-right:0;} .factoring-contain > div .in-box.subbox > div p { font-size:18px; color:#666; font-weight:300; padding-top:35px; line-height:1.3; padding-left:10px; padding-right:10px; } .factoring-contain > div .in-box.subbox > div p > img { width:77px; } .factoring-contain > div .in-box.subbox > div p span { display:block; color:#222; font-weight:400; padding:12px 0; } .factoring-contain > div .in-box.subbox.adht > div { height:250px; } @media screen and (max-width:750px){ .factoring-contain > div > span { position:relative; left:auto; top:auto; } .factoring-contain > div .in-box { padding-left:0; padding-top:20px; } } @media screen and (max-width:640px){ .factoring-contain > i { display:none;} .factoring-contain { padding-bottom:50px; } .factoring-contain > div > span { font-size:20px; } .factoring-contain > div .in-box li { font-size:15px; } .factoring-contain > div .in-box.subbox > div p { font-size:15px; padding:30px 10px;} .factoring-contain > div .in-box.subbox > div { display:block; width:100%; height:auto; margin-right:0; margin-bottom:2%; } .factoring-contain > div .in-box.subbox.adht > div { height:auto; } .factoring-contain > div .in-box.firstpad li { position:relative; padding-left:82px;} .factoring-contain > div .in-box.firstpad li.w1 { padding-left:89px; } .factoring-contain > div .in-box.firstpad li.w2 { padding-left:122px; } } /*투자정보*/ .table-style1 { padding-bottom:90px; } .table-style1 .top-t { font-size:30px; color:#222; font-weight:300; padding-bottom:10px; border-bottom:1px solid #222;} .table-style1 .top-t b { font-weight:400; } .table-style1 .top-t span { float:right; font-size:18px; padding-top:5px; } .table-style1 table { width:100%; table-layout:fixed; } .table-style1 table th, .table-style1 table td { border-right:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; padding:18px 5px; text-align:center; font-size:18px; color:#222;} .table-style1 table em { font-style:normal; font-family:'Montserrat'; font-weight:400; } .table-style1 table th em { font-weight:600; } .table-style1 table th:last-of-type , .table-style1 table td:last-of-type { border-right:0; } .table-style1 table th { background:#f5f5f5; font-weight:500; } .table-style1 table td { font-weight:300; } @media screen and (max-width:900px){ .table-style1 { padding-bottom:40px; } .table-style1 .top-t { font-size:20px; } .table-style1 .top-t span { font-size:15px; } .table-style1 table th, .table-style1 table td { font-size:15px; padding:10px 5px;} } @media screen and (max-width:360px){ .table-style1 table th, .table-style1 table td { font-size:13px; padding:10px 5px;} .table-style1 .top-t { font-size:18px; } .table-style1 .top-t span { font-size:14px; } } /*부가정보 -- 개인정보 방침 등등 ~ 7개*/ .terms-contain { padding:0 0 90px; } .terms-box { border:1px solid #eee; padding:50px; font-size:14px; color:#222; font-weight:300; } .terms-box p { font-size:17px; font-weight:400; } .terms-box p.center { text-align:center; } .terms-box span { display:block; font-weight:400; } .terms-box table { width:100%; } .terms-box table thead { border-left:1px solid #ddd; border-top:1px solid #ddd; } .terms-box table tbody { border-left:1px solid #ddd; } .terms-box table td, .terms-box table th { border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding:10px 5px; font-size:14px; color:#222; } .terms-box table th { background:#f1f1f1; text-align:Center; font-weight:500; } @media screen and (max-width:640px){ .terms-contain { padding:30px 0 30px; } .terms-box { padding:15px 10px; } } /*채용정보 - 인재상*/ .talented-boxlist { padding-bottom:85px; } .talented-boxlist ul { font-size:0; } .talented-boxlist li {position:relative; display:inline-block; vertical-align:top; width:23.5%; height:350px; margin-right:2%; box-sizing:border-box; border:1px solid #dfdfdf; padding:30px 20px 30px 30px; } .talented-boxlist li:nth-of-type(4n) { margin-right:0; } .talented-boxlist li u { text-decoration:none; display:inline-block; font-family: 'Montserrat'; color:#222; font-size:18px; padding-bottom:15px; border-bottom:1px solid #313131; } .talented-boxlist li div { padding-top:18px; } .talented-boxlist li div span { display:block; font-size:20px; color:#222; } .talented-boxlist li div p { padding-top:20px; } .talented-boxlist li div p em { position:relative; font-style:normal; display:block; padding-left:5px; font-size:16px; color:#666; font-weight:300; letter-spacing:-1px; } .talented-boxlist li div p em i {position:absolute; lefT:0; top:12px; display:inline-block; width:2px; height:2px; background:#747474; vertical-align:middle; } .talented-boxlist li div p em + em { margin-top:5px; } .talented-boxlist li > i { position:absolute; right:30px; bottom:25px; width:56px; height:66px; } .talented-boxlist li > i.ta-icon1 { background:url("/images/job/talented_icon01.png") no-repeat left top; background-size:contain; } .talented-boxlist li > i.ta-icon2 { background:url("/images/job/talented_icon02.png") no-repeat left top; background-size:contain; } .talented-boxlist li > i.ta-icon3 { background:url("/images/job/talented_icon03.png") no-repeat left top; background-size:contain; } .talented-boxlist li > i.ta-icon4 { background:url("/images/job/talented_icon04.png") no-repeat left top; background-size:contain; } @media screen and (max-width:1200px){ .talented-boxlist li { height: 377px; } } @media screen and (max-width:990px){ .talented-boxlist li { width:49%; margin-right:2%; margin-bottom:2%; } .talented-boxlist li:nth-of-type(2n) { margin-right:0; } } @media screen and (max-width:640px){ .talented-boxlist li { width:100%; margin-right:0; height:auto; padding: 20px 15px 111px 15px; } .talented-boxlist li > i { right:20px; bottom:20px; } } /*복리후생*/ .welfare-box-list { padding-bottom:85px; } .welfare-box-list ul { font-size:0; } .welfare-box-list li { display:inline-block; vertical-align:top; width:32%; margin-right:2%; margin-bottom:2%; } .welfare-box-list li:nth-of-type(3n) { margin-right:0; } .welfare-box-list div { text-align:center; border:1px solid #dfdfdf; height:390px; padding:37px 42px; box-sizing:border-box; } .welfare-box-list div img { display:inline-block; width:60px; } .welfare-box-list div span { display:block; font-size:20px; color:#222; padding-bottom:20px; padding-top:22px; } .welfare-box-list div p { text-align:left; } .welfare-box-list div p u {position:relative; text-decoration:none; display:block; font-size:16px; color:#666; padding-left:6px; font-weight:300; letter-spacing:-0.5px; padding-bottom:5px;} .welfare-box-list div p u:after { content:''; position:Absolute; left:0; top:12px; width:2px; height:2px; background:#666; } .welfare-box-list li:nth-of-type(n+4) div { height:350px; } @media screen and (max-width:1300px){ .welfare-box-list div { height: 490px; } .welfare-box-list li:nth-of-type(n+4) div { height:390px; } } @media screen and (max-width:1070px){ .welfare-box-list li { width:49%; margin-right:2%; } .welfare-box-list li:nth-of-type(3n) { margin-right:2%; } .welfare-box-list li:nth-of-type(even) { margin-right:0; } .welfare-box-list div { height: 410px; padding:37px 30px; } .welfare-box-list li:nth-of-type(n+4) div { height:410px; } } @media screen and (max-width:820px){ .welfare-box-list div { height: 450px; } .welfare-box-list li:nth-of-type(n+3) div { height:400px; } .welfare-box-list li:last-of-type div { height:350px; } .welfare-box-list li:nth-last-of-type(2) div { height:350px; } } @media screen and (max-width:790px){ .welfare-box-list li { width:100%; margin-right:0; } .welfare-box-list li:nth-of-type(3n) { margin-right:0; } .welfare-box-list li:nth-of-type(even) { margin-right:0; } .welfare-box-list div , .welfare-box-list li:nth-of-type(n+3) div , .welfare-box-list li:last-of-type div { height:auto; } .welfare-box-list li:nth-last-of-type(2) div { height:auto; } .welfare-box-list div { padding: 37px 10%; } } @media screen and (max-width:640px){ .welfare-box-list div { padding: 37px 20px; } } /*조직도*/ .chart-contain { padding-bottom:95px; background:url("/images/company/chart_line_bg4.jpg") no-repeat 50% top; } .chart-contain .box { display:inline-block; width:250px; height:55px; line-height:55px; text-align:Center; font-size:18px; font-weight:380; margin-bottom:6px; box-sizing:border-box; } .chart-contain i.empty0 { display:block; width:100%; height:16px; } .chart-contain i.empty01 { display:block; width:100%; height:28px; } .chart-contain i.empty1 { display:block; width:100%; height:38px; } .chart-contain i.empty2 { display:block; width:100%; height:150px; } .chart-contain i.empty3 { display:block; width:100%; height:160px; } .chart-contain i.empty4 { display:block; width:100%; height:50px; } .chart-contain .box.color1 { background:#313131; color:#fff; font-size:22px; } .chart-contain .box.color2 { background:#6c6c6c; color:#fff; border:3px solid #6c6c6c; font-size:21px; } .chart-contain .box.color3 { background:#f7f7f7; color:#222; border:2px solid #e7e7e7; line-height:55px; font-weight:300; font-size:18px; } .chart-contain .box.color4 { background:#fff; color:#222; border:1px solid #313131; line-height:53px; font-size:17px; } .chart-contain .top { padding-bottom:85px; text-align:Center; } .chart-contain .mid-area1 { font-size:0; } .chart-contain .mid-area1 > div { display:inline-block; vertical-align:top; width:50%; text-align:Center; } .chart-contain .mid-area { font-size:0; } .chart-contain .mid-area > div { display:inline-block; vertical-align:top; width:33.33333%; text-align:Center; } /* @media screen and (max-width:1147px){ .chart-contain {background:url("/images/company/chart_line_bg2.jpg") no-repeat 50% top;} } @media screen and (max-width:1010px){ .chart-contain {background:url("/images/company/chart_line_bg3.jpg") no-repeat 50% top;} } */ @media screen and (max-width:1020px){ } .chart-contain .mid-area-mo { display:none; } .mid-area-mo { font-size:0; } .mid-area-mo > div {position:relative; display:inline-block; vertical-align:top; width:40%; } .mid-area-mo > div + div { margin-left:20%; } .mid-area-mo > div:first-of-type { text-align:left; } .mid-area-mo > div:last-of-type { text-align:right; } .mid-area-mo > div > u.ver { position:absolute; display:inline-block; right:-25.2%; top:-87px; width:1px; height:788px; background:#e3e3e3; } @media screen and (max-width:960px){ .chart-contain { background:none; padding-bottom:70px; } .chart-contain .mid-area-mo { display:block; } .chart-contain .box {position:relative; width:100%; } .chart-contain .box > u.le-line { position:absolute; right:100%; margin-right:1px; top:50%; width:25%; height:1px; background:#e3e3e3; } .chart-contain .box > u.ri-line { position:absolute; left:100%; margin-left:1px; top:50%; width:25%; height:1px; background:#e3e3e3; } .chart-contain .top { padding-bottom: 30px;} .chart-contain .top .box { width:45%; } .chart-contain i.empty-m1 { display:block; width:100%; height:20px; } .chart-contain i.empty-m2 { display:block; width:100%; height:63px; } .mid-area-mo > div > u.ver { height: 436px; } .chart-contain .mid-area > div:nth-child(2) {display:none;} .chart-contain .mid-area, .chart-contain .mid-area1 {display:flex; justify-content:space-between;} .chart-contain .mid-area > div {width:49%;} .chart-contain .mid-area1 > div {width: 49%;} .chart-contain i.empty4 {display:none;} } @media screen and (max-width:640px){ .chart-contain .box { height:50px; line-height:50px; } .chart-contain .box.color3 , .chart-contain .box.color4 { line-height:48px; } .chart-contain .box { font-size:17px; } .chart-contain .box.color1 { font-size:15px; } .chart-contain .box.color3 { font-size:15px } .chart-contain .top { padding-bottom:40px; } .chart-contain .top .box { width:55%; } .mid-area-mo > div { width:43%; } .mid-area-mo > div + div { margin-left:14%; } .chart-contain i.empty-m1 { height:20px; } .chart-contain i.empty-m2 { height:53px; } .mid-area-mo > div > u.ver {top:-47px; right: -16.9%; height:354px; } .chart-contain .box > u.le-line, .chart-contain .box > u.ri-line { width:15.9%; } .chart-contain .box.color4 {font-size: 15px;} .chart-contain .box {font-size:15px;} } @media screen and (max-width:360px){ .chart-contain .box { font-size:15px; } .chart-contain .box.color3 { font-size:15px; } } /*공시정보 - iframe 부분*/ .electron-contain { padding:90px 0 100px; text-align:center; } .electron-contain iframe.pcver { width: 745px; height:800px; } .electron-contain iframe.mover { display:none; width:100%; height:800px; } @media screen and (max-width:830px){ .electron-contain { padding:50px 0; } } /*--------------------------------------------------------------------------------*/ /* 3depth - 메뉴 ( ex 걸어온길 (연혁) 상단~~~) */ .thdepth-tbn-area { position:relative; width:100%; height:70px; font-size:0; padding-top:70px; text-align:center; } .thdepth-tbn-area ul {position:relative; z-index:1; display:inline-block; max-width:1200px; margin:0 auto; box-sizing:border-box; border:1px solid #e0e0e0; } .thdepth-tbn-area ul li { display:inline-block; vertical-align:top; width:200px; } .thdepth-tbn-area ul li a { display:block; height:70px; line-height:70px; font-size:20px; color:#222; font-weight:300;text-align:center; background:#fff; } .thdepth-tbn-area ul li a.active { background-color:#222; color:#fff; } .thdepth-tbn-area > i { position:absolute; left:0; bottom:35px; display:block; width:100%; height:1px; background:#e0e0e0; } .thdepth-tbn-area ul.w6 { width:100%; } .thdepth-tbn-area ul.w6 li { width:16.666666666%; } .thdepth-tbn-area.fix { position:fixed; left:0; top:0; padding-top:0; width:100%; padding:0; z-index:100; } .thdepth-tbn-area.fix + .thdepth-tbn-area-emptybox { height:140px; } @media screen and (max-width:900px){ .thdepth-tbn-area { padding-top:10px; } .thdepth-tbn-area ul { font-size:0; } .thdepth-tbn-area ul li { display:inline-block; } .thdepth-tbn-area ul li a { height:40px; line-height:40px; font-size:15px; } .thdepth-tbn-area > i { display:none; } .thdepth-tbn-area ul.w6 li { width:33.33333333%; } .thdepth-tbn-area ul.w4 { width:100%; } .thdepth-tbn-area ul.w4 li { width:25%; } } @media screen and (max-width:640px){ .thdepth-tbn-area.fix + .thdepth-tbn-area-emptybox { height:70px; } .thdepth-tbn-area { padding:0 20px; width:auto; } .thdepth-tbn-area ul.w2 , .thdepth-tbn-area ul.w3 { width:100%; } .thdepth-tbn-area ul.w2 li { width:50%; } .thdepth-tbn-area ul.w3 li { width:33.333333%; } .thdepth-tbn-area ul.w4 li { width:50%; } .thdepth-tbn-area ul li a { font-size:13px; } } @media screen and (max-width:440px){ .thdepth-tbn-area ul.w3.cts li { width:28%; } .thdepth-tbn-area ul.w3.cts li:nth-of-type(2) { width:44%; } } /*사이트맵*/ .sitemap-contain { padding-bottom:140px; } .sitemap-contain .site-guide { } .sitemap-contain .site-guide + .site-guide { margin-top:50px; } .sitemap-contain .site-guide > p { font-size:30px; color:#222; font-weight:500; padding-bottom:9px; border-bottom:1px solid #313131;} .sitemap-contain .site-guide ul { padding-top:20px; font-size:0; } .sitemap-contain .site-guide li { display:inline-block; vertical-align:top; width:23%; margin-right:2.66666666%; margin-bottom:24px; } .sitemap-contain .site-guide li:nth-of-type(4n) { margin-right:0; } .sitemap-contain .site-guide li > span { display:block; font-size:20px; color:#222; font-weight:500; border-bottom:3px solid #dfdfdf; padding-bottom:12px;} .sitemap-contain .site-guide li > div { padding-top:12px; } .sitemap-contain .site-guide li > div p { margin-bottom:8px; } .sitemap-contain .site-guide li > div p a { display:inline-block; font-size:18px; color:#666; font-weight:300; } .sitemap-contain .site-guide li > div p a:hover { font-weight:400; color:#222; } .sitemap-contain .site-guide li > div p u { display:block; text-decoration:none; margin-top:3px; } .sitemap-contain .site-guide li > div p u a { position:relative; padding-left:6px; font-size:16px; line-height:1.7;} .sitemap-contain .site-guide li > div p u a:after { content:''; position:absolute; left:0; top:13px; width:2px; height:2px; background:#666; } .sitemap-contain .site-guide li:hover > span { border-color:#222; } @media screen and (max-width:900px){ .sitemap-contain .site-guide li { width:49%; margin-right:2%; } .sitemap-contain .site-guide li:nth-of-type(even) { margin-right:0; } } @media screen and (max-width:640px){ .sitemap-contain { padding-bottom:50px; } .sitemap-contain .site-guide li { width:100%; margin-right:0; } .sitemap-contain .site-guide + .site-guide { margin-top:20px; } .sitemap-contain .site-guide > p { font-size:20px; } .sitemap-contain .site-guide ul {padding-top:10px; } .sitemap-contain .site-guide li > span { font-size:17px; border-width:2px; padding-bottom:9px;} .sitemap-contain .site-guide li > div p a { font-size:15px; } .sitemap-contain .site-guide li > div p u a { font-size:14px; } } /*Top going~*/ a.quick_menu { position:fixed; right:10px; bottom:170px; display:inline-block; width:24px; height:100px; z-index:995; text-align:right; } a.quick_menu span {position:absolute; left:0; top:5px; display:inline-block; font-size:12px; color:#000; font-weight:300; font-family: 'Montserrat'; transform:rotateZ(-90deg); } a.quick_menu i { display:inline-block; width:4px; height:100px; background-color:#000; } @media screen and (max-width:900px){ a.quick_menu { display:none !important; } } span.new-icon { font-size:12px; color:#999; letter-spacing:-1px; font-weight:500; } /*----------- MEMBER ---------------------------------------------------*/ /* 회원단 공통 */ #MemBody {width:100%; padding:0px 0; margin-top:0px; position:relative;} #MemBody caption {display:none;} #MemBody textarea { width:100%; height:200px;border:1px solid #ddd; color:#666; overflow-x:hidden; padding:5px; box-sizing:border-box;} /* 로그인 */ .login #MemBody {padding:50px 0;} .login #MemBody .login_title {margin-bottom:25px; padding-top:145px; background:url('/images/member/icon_login02.png') no-repeat center 0; text-align:center;} .login #MemBody .login_title h4 {font-size:36px; font-weight:600; color:#222; letter-spacing:-0.25px;} .login #MemBody .login_title p {padding-top:20px; font-size:18px; font-weight:300; letter-spacing:-0.2px;} .login #MemBody .login_con {width:440px; margin:0 auto;} .login #MemBody .login_con table {width:100%;} .login #MemBody .login_con table input.text {width:285px; height:38px; background:#f9f9f9;} .login #MemBody .login_con .login_util {border-top:1px solid #bfbfbf; margin-top:20px; padding-top:20px; overflow:hidden;} .login #MemBody .login_con .login_util ul {float:left;} .login #MemBody .login_con .login_util ul li {display:inline-block; padding-left:11px; margin-left:10px; background:url('/images/member/login_gap.gif') no-repeat 0 center; font-size:14px; letter-spacing:-0.2px; line-height:30px;} .login #MemBody .login_con .login_util ul li:first-child {padding-left:0; margin-left:0; background:none;} .login #MemBody .login_con .login_util ul li:hover a {text-decoration:underline;} .login #MemBody .login_con .login_util .btn_black {float:right;} .login .save {margin-top:-3px; margin-right:6px;} /* 회원가입 - 약관동의 */ #MemBody.join_agree .info_check_box {padding:30px 20px; border:1px solid #cccccc; background:#f3f3f3; text-align:center;} #MemBody.join_agree .join_agree_box {margin-top:30px;} #MemBody.join_agree .info_check_box input.mem_name {width:100px;} #MemBody.join_agree .info_check_box input.mem_email {width:200px;} #MemBody.join_agree .join_agree_box .title {position:relative; display:block; margin-bottom:10px; padding-left:15px; font-size:17px;} #MemBody.join_agree .join_agree_box .title:before {content:''; display:block; position:absolute; top:50%; left:0; width:5px; height:18px; margin-top:-9px; background:#977b5d;} #MemBody.join_agree .join_agree_box .agree_check {padding:10px; background:#f5f5f5;} /* 아이디/비번 찾기 */ #findIdpw {overflow:hidden;} #findIdpw h4 {margin-bottom:20px; font-size:18px; font-weight:600; text-align:left; color:#222;} #findIdpw .over {overflow:hidden;} #findIdpw .find { display:inline-block; width:440px; height:260px; background:#f5f5f5; padding:40px 50px; border:1px solid #cfcfcf;} #findIdpw .find p {padding-bottom:20px; margin-bottom:20px; border-bottom:1px dashed #c3c3c3; font-size:15px; color:#393939; line-height:22px; letter-spacing:-0.8px;} #findIdpw .find p .blue {text-decoration:underline;} #findIdpw .findTable {width:100%;} #findIdpw .findTable th, #findIdpw .findTable td {padding:2px 2px;} #findIdpw .findTable td input.text {width:310px; height:40px;} #findIdpw .btn_idpw01 {width:104px; height:88px; line-height:88px;} #findIdpw .btn_idpw02 {width:104px; height:134px; line-height:134px;} #findIdpw.idpw_result .find {display:block; width:auto; height:auto; margin:0 auto; text-align:center;} #findIdpw.idpw_result .find {padding-bottom:20px;} #findIdpw.idpw_result .btnArea {width:280px; margin:0 auto;} /*개인정보 / 이용약관*/ .rule-txt-area { max-width:1100px; width:100%; margin:0 auto 100px; } .rule-txt-area textarea { width:100%; height:500px; padding:10px 15px; border:1px solid #ddd; box-sizing:border-box; font-size:16px; color:#222; font-weight:400; line-height:1.5;} .rule-txt-area .rul-btn-box { margin-top:50px; text-align:center; } .rule-txt-area .rul-btn-box a { vertical-align:Top; } /*전자결제(pay)*/ .pay {background:#fff; width:94%; padding:3%; margin-bottom:0px; margin-left:0; margin-right:0; margin-top:0;} .pay h3 {position:relative; font-size:22px; margin-bottom:20px; padding-left:15px; font-weight:600; color:#222;} .pay h3:before {content:''; display:block; position:absolute; top:50%; left:0; width:5px; height:20px; margin-top:-10px; background:#977b5d;} .pay h4 {font-size:16px; margin-bottom:10px; color:#222;} .pay .mgB30 {margin-bottom:30px;} .pay #Board .privacy .textarea {font-size:13px; line-height:20px;} .pay .btnArea {text-align:center; margin-top:25px} /*foot*/ #foot {position:relative; z-index:300;width:100%; background:#202020; } .footWrap {position:relative; width:100%; max-width:1920px; height:170px; margin:0 auto; position:relative; font-size:12px; box-sizing:border-box; padding:0 100px;} /* #foot.sub .footWrap { max-width:1200px; } */ .footWrap .footCnt { position:relative; padding-top:40px; color:#999;} .footWrap .footCnt .com-btns { margin-bottom:10px; } .footWrap .footCnt .com-btns a {font-size:14px; color:#fff; font-weight:300; display:inline-block; vertical-align:top; padding-right:10px; margin-right:8px; background:url("/images/common/util_gap2.png") right 5px no-repeat; } .footWrap .footCnt .com-btns a:last-of-type { background:none; color:#cccccc; } .footWrap .footCnt .link-site { font-size:0; padding-bottom:5px; } .footWrap .footCnt .link-site a { display:inline-block; vertical-align:top; font-size:14px; color:#999; position:relative; padding-right:12px; margin-right:12px; } .footWrap .footCnt .link-site a > i { display:inline-block; width:12px; height:12px; background:url("/images/common/icon_blnak.png") no-repeat left top; background-size:contain; margin-left:7px; } .footWrap .footCnt .link-site a:after { content:''; position:absolute; right:0; top:50%; margin-top:-5px; width:1px; height:10px; background:#767676; } .footWrap .footCnt .link-site a:last-of-type:after { content:none; } .footWrap .footCnt address {padding-bottom:3px; line-height:1.7; color:#aaa;} .footWrap .footCnt address span { display:inline-block; font-size:12px; color:#777; padding-right:10px; margin-right:8px; background:url("/images/common/util_gap2.png") right 4px no-repeat} .footWrap .footCnt address em { font-style:normal; font-family: 'Montserrat'; } .footWrap .footCnt p {padding-right:5px; vertical-align:middle;} .footWrap .footCnt p a {color:#999;} .footWrap .footCnt p a:hover {text-decoration:underline;} .footWrap .footCnt address a { color:#aaa; } .footWrap .footCnt span.secret { display:inline-block; vertical-align:middle; background:none; margin:-1px 0 0 0; line-height:1;} .footWrap .footCnt span.secret img { width:8px; } .footWrap .footCnt .fam-site-area { position:absolute; right:0; top:22px; width:230px; height:38px; } .footWrap .footCnt .fam-site-area > a { display:block; color:#fff; height:40px; line-height:40px; font-size:14px; font-family: 'Montserrat'; border:1px solid #5e5e5e; padding:0 10px; background:#202020 url("/images/common/icon_select_arrw.png") no-repeat 95% 50%; background-size:15px 9px; } .footWrap .footCnt .fam-site-area ul { display:none; position:absolute; left:0; bottom:38px; width:100%; border:1px solid #5e5e5e; box-sizing:border-box; border-bottom:0; } .footWrap .footCnt .fam-site-area li { display:block; } .footWrap .footCnt .fam-site-area li a { display:block; height:40px; line-height:40px; padding:0 10px; color:#fff; font-size:14px; background:#202020;box-sizing:border-box; } .footWrap .footCnt .fam-site-area li a:hover { background:#333; } @media screen and (max-width:1920px ){ .footWrap { padding:0 50px; } } @media screen and (max-width:1200px ){ .footWrap .footCnt address span.cnon { background:none; } .footWrap .footCnt address em.blo { display:block; } .footWrap .footCnt .fam-site-area { top:23px; } } @media screen and (max-width:900px){ .footWrap { padding:0 20px; } } @media screen and (max-width:640px){ .footWrap { height:auto; } .footWrap .footCnt { padding-top:80px; padding-bottom:20px; } .footWrap .footCnt .fam-site-area { right:auto; left:0; } } @media screen and (max-width:430px){ .footWrap .footCnt address span.mv {display:block; background:none;} } #foot.sub { background-color:#f7f7f7; } #foot.sub .footWrap .footCnt .com-btns a { color:#222; } #foot.sub .footWrap .footCnt .com-btns a:last-of-type { color:#666; } #foot.sub .footWrap .footCnt address { color:#aaa; } #foot.sub .footWrap .footCnt address span { color:#777; background: url('/images/common/util_gap3.png') right 5px no-repeat; } #foot.sub .footWrap .footCnt .com-btns a { background: url('/images/common/util_gap3.png') right 5px no-repeat;} #foot.sub .footWrap .footCnt .fam-site-area > a { color:#9d9d9d; background:#f7f7f7 url('/images/common/icon_select_arrw_black.png') no-repeat 95% 50%; border: 1px solid #cbcbcb; background-size: 15px 9px; } #foot.sub .footWrap .footCnt .fam-site-area ul {border: 1px solid #cbcbcb; } #foot.sub .footWrap .footCnt .fam-site-area li a { background:#f7f7f7; color:#9d9d9d; } #foot.sub .footWrap .footCnt .fam-site-area li a:hover { background:#ededed; } /* 관리자 로그인 */ .divbox {display:none; position:absolute; z-index: 1;} .divbox .text {width:150px;} div#box {width:500px; margin-left:-250px; text-align:center; background-color:#fff; position:fixed; left:50%; bottom:300px; z-index:9999; padding:40px 30px 20px 30px; border:5px solid #eee; box-sizing:border-box; } div#box .login_center{overflow:hidden; padding:30px 0; border-top:1px solid #222; border-bottom:1px solid #bbb;} div#p_input {text-align:center;} div#p_input span.label {display:inline-block; width:90px; padding-right:10px; text-align:right;} div.login_foot {clear:both; text-align:center; margin-top:20px;} @media screen and (max-width:640px){ div#box {width:100%; margin:0; left:0; bottom:0; border:none; border-top:1px solid #eee; padding:20px; position:fixed; z-index:9999; } div#p_input span.label { width:60px; } .divbox .text { width:130px; } } /* 배경 페이드 전환 효과 */ #mainVisual.fade-bg { transition: background-image 0.5s linear; } #mainVisual .fade-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1s; background-size: cover; background-position: center top; background-repeat: no-repeat; } #mainVisual .fade-layer.active { opacity: 1; } #mainVisual .bg-fade { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background-size: cover; background-position: center top; background-repeat: no-repeat; opacity: 0; transition: opacity 1s; } #mainVisual .bg-fade.active { opacity: 1; } #mainVisual { position: relative; overflow: hidden; }