@charset "utf-8";
/**
* @File Name : all.css
* @Description : Base Adjust + Layout[main+sub] Mobile First!
* @Modification Information
*
* 수정일 | 수정자 | 수정내용
* 2016.09.29 | 문영신 | 최초 등록
* 2016.10.06 | 문영신 | 요구반영. 결함개선. 고도화.
* 2016.10.31 | 문영신 | 순수 IE8. 결함 수정.
* 2017.01.18 | 양미정 | 네비게이션 위치수정
*
* @author 웹표준화실 문영신
* @since 2016.09.05
*
* @Copyright (C) IACTS.CO.KR All rights reserved.
*/
/* Table of contents ))
| Base Adjust
| Layout[main+sub] Mobile First!
| clearfix
| #head, ..
| ETC
| @media print{}
| RWD ◇◆
*/
/* ◇◆ Base Adjust ◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆ */
/* ☆@import url(base.css); */
/* base.css )) Overwrite. 20160921. ◆◆◆ */
*+html{overflow-x:hidden;} /* [IE7] 자손 넘치면 가로스크롤 발생 결함 해결 */
body {
background:#fff;
color:#555;
font-weight:400;
font-size:140%; /* 14px */
line-height:1.666;
letter-spacing:0; /* ☆ 맑은고딕-1, 나눔고딕0, 외국어0 */
overflow:hidden; /* ★ Avoid horizontal scrolling */
}
html[lang='en'] body{font-family:
'Open Sans',Helvetica,
Arial,sans-serif;
}
/* ◇◆ Layout[main+sub] ◇◆◇◆◇◆◇◆◇◆ */
/* 배치.전체 20160819 */
html,
body,
#container, #wrap, #body{min-height:100%;}
.container{position:relative;
min-width:300px; /* ☆ */
max-width:1240px; /* ☆ 디자인폭(1200)+패딩좌우(20*2) */
margin:0 10px;
}
#container{position:static;}
div.bg2top{}
div.bg2top>div{}
div.bg2btm{}
div.bg2btm>div{}
#head{/* z-index:30; */clear:both;position:relative;}
div.bg2head{}
div.bg2head>div{}
#head_s1{ /* #logo, #gn1, #gn2 */
/* z-index:40; */position:relative;min-height:50px;
}
#head_s2{ /* #tnb1,#anb1, #search1 */
z-index:30;position:relative;height:0;
border-bottom:1px solid #1e61a2;
/* box-shadow:0 2px 3px 0 rgba(0, 0, 0, .1); */
}
#head_s3{ /* #visual */
z-index:-1;position:relative;
}
#wrap{z-index:auto; /* ☆ 쌓임맥락 안만든다. */
clear:both;
position:relative;
min-height:50px; /* ☆ 펼침콘텐츠 높이 고려. */
}
#wrap>.container{} /* ))) sub.css, main.css */
#wing{}
#foot{z-index:20;clear:both;position:relative;background:#fff;}
div.bg2foot{}
div.bg2foot>div{}
#foot_s1{z-index:10;position:relative;padding:15px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;}
#foot_s2{z-index:20;position:relative;padding:20px 0;}
/* #head */
/* 모바일 감춤 20160906 */
#gn1{display:none;} /* ☆ */
#gn2{display:none;} /* ☆ */
#anb1{display:none;} /* ☆ */
#visual{display:none;} /* ☆ */
/* 로고 20160930 */
h1#logo{display:block;
z-index:30; /* ☆ */
position:relative;
margin:6px 90px 13px 3px;
}
h1#logo>a{}
h1#logo>a>img{width:auto;height:46px;}
/* 주메뉴 20160930 makeActive2ClickHover('#tnb1'); */
#tnb1{z-index:30;float:left;position:absolute;left:0;top:0;width:100%;line-height:1.333;letter-spacing:-1px;}
#tnb1 .tnb1menu1,
#tnb1 .b3{display:none;} /* ☆ */
#tnb1 .b1.toggle{z-index:10;float:left;
position:absolute;right:38px;bottom:13px;
box-sizing:border-box;
width:33px;height:30px;
border-radius:0;
border:0;
background:#ea002c;
overflow:hidden;text-indent:-9999px;
}
#tnb1 .b1.toggle .ic1{display:block;
position:absolute;left:50%;top:50%;
width:20px;height:20px;margin:-10px;
background:url(../../img/inc/ic40sitemap@2x.png) no-repeat;background-size:contain;
}
#tnb1 .b1.toggle.on .ic1{background-image:url(../../img/inc/ic40close@2x.png);}
#tnb1 .bsContain img{left:0;right:0;top:0;bottom:0;} /* ☆ */
/* ☆ Advance) transition [Android4.1~4.3] -webkit- 지원 but 먹통? 모더나이저 점진적 향상? */
#tnb1c{
display:block /* !important */;
visibility:hidden;
z-index:10;
position:fixed; /* ☆ .container padding 값 영향 안받음! */
right:-100%;top:0;
width:100%;height:100%;
overflow-x:hidden;
overflow-y:auto; /* ☆ */
}
#tnb1c.on{
display:block;visibility:visible;
right:0;
}
#tnb1c>.bg{}
#tnb1c.on>.bg{}
#tnb1c>div.cont{float:right;
position:relative;right:-320px;
width:320px;min-height:100%;
box-shadow:2px 0 3px 0 rgba(0, 0, 0, .2);
}
#tnb1c>div.cont:before{content:'';display:block;
position:absolute;left:-9999px;right:0;top:0;bottom:0;
background:url(../../img/inc/b.000000.opacity.70.png);
}
#tnb1c.on>div.cont{right:0;
box-sizing:border-box; /* ☆[IE8+] */
}
#tnb1c .b2{
z-index:110;float:left;position:absolute;right:0;top:5px;width:40px;height:40px;
}
#tnb1c .b2>.ic1{float:left;position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;background:url() no-repeat;background-size:contain;}
#tnb1c .b2.close{right:0;}
#tnb1c .b2.close>.ic1{background-image:url(../../img/inc/ic40close@2x.png);
opacity:.55;
}
/* 로고 */
#tnb1logo{position:relative;display:block;width:100%;height:192px;
border-bottom:1px solid #004b95;
background:#2461a1;
}
#tnb1logo img{display:block;width:auto;height:71px;margin:0 auto;padding:24px 0;}
/* 글로벌내비.스몰미디엄화면용 */
#tnb1gn1{z-index:20;display:block;position:absolute;left:50px;top:130px;
line-height:1.333;letter-spacing:0;
}
#tnb1gn1 ul{overflow:hidden;}
#tnb1gn1 li{float:left;padding:0 1px 0 0;
background:url(../../img/inc/gn1s.png) no-repeat right center;
}
#tnb1gn1 a{float:left;padding:0 1em;color:#fff;font-size:13px;}
#tnb1gn1 a>.t1{}
#tnb1gn1 a>.ic1{}
/* 글로벌내비.스몰미디엄화면용 */
#tnb1gn2{z-index:40;display:block;position:absolute;left:200px;top:130px;
font-size:13px;
line-height:1.333;letter-spacing:0;
}
#tnb1gn2 a.toggle{display:block;overflow:hidden;}
#tnb1gn2 a.toggle .t1{float:left;padding:0 0 0 1em;color:#fff;}
#tnb1gn2 a.toggle .ic1{float:left;width:0;height:0;margin:7px 6px 0 6px;border:4px solid transparent;border-top-color:#fff;overflow:hidden;text-indent:100%;}
#tnb1gn2 a.toggle.on{}
#tnb1gn2 a.toggle.on .ic1{margin-top:3px;border-top-color:transparent;border-bottom-color:#fff;}
#tnb1gn2c{display:none;position:absolute;right:0;top:100%;width:100%;
margin:.333em 0 0 0;
border-radius:2px;
background:#1f5289;
box-shadow:0 2px 5px 0 rgba(0,0,0, .2);
overflow:hidden;
}
#tnb1gn2 ul{float:left;width:100%;}
#tnb1gn2 li{float:left;width:100%;}
#tnb1gn2 li a{display:block;padding:.333em 1em;color:#fff;}
#tnb1gn2 li:first-child a{padding-top:.833em;}
#tnb1gn2 li:last-child a{padding-bottom:.833em;}
#tnb1gn2 li a:hover{background:#1a4674;}
/* depth1~depth4 */
/* depth1 */
#tnb1 div.d1{
position:relative;
min-height:100%;
padding:0 0 0 85px; /* ☆ */
background:#fff url(../../img/inc/tnb1bg1.png) repeat-y;
line-height:1.333;letter-spacing:-1px;
overflow:hidden;
}
#tnb1 div.d1>ul{width:100%;
min-height:700px; /* >=1차메뉴전체높이 */
}
#tnb1 div.d1>ul>li{display:inline;position:static;} /* ☆ */
#tnb1 div.d1>ul>li>a{display:block;
z-index:20; /* ☆ */
position:absolute;left:0;top:0;
width:85px;height:59px;
padding:5px 0; /* ☆ */
border-bottom:1px solid #ddd;
color:#333;font-weight:500;font-size:14px;
text-align:center;
}
#tnb1 div.d1>ul>li>a>.ic1{display:inline-block;width:0;height:100%;vertical-align:middle;}
#tnb1 div.d1>ul>li>a>.t1{display:inline-block;
width:100%;
vertical-align:middle;
}
#tnb1 div.d1>ul>li.hasSub>a{}
#tnb1 div.d1>ul>li.on>a{color:#1e61a2;font-weight:600;}
#tnb1 div.d1>ul>li.on>a:before{content:''; float:left;
position:absolute;right:0;top:50%;width:0;height:0;
margin:-3px 0;
border:6px solid transparent;border-right-color:#ea002c;
overflow:hidden;text-indent:100%;
}
/* ☆ */
#tnb1 div.d1>ul>li:nth-child(1)>a{top:0;}
#tnb1 div.d1>ul>li:nth-child(2)>a{top:70px;}
#tnb1 div.d1>ul>li:nth-child(3)>a{top:140px;}
#tnb1 div.d1>ul>li:nth-child(4)>a{top:210px;}
#tnb1 div.d1>ul>li:nth-child(5)>a{top:280px;}
#tnb1 div.d1>ul>li:nth-child(6)>a{top:350px;}
#tnb1 div.d1>ul>li:nth-child(7)>a{top:420px;}
#tnb1 div.d1>ul>li:nth-child(8)>a{top:490px;}
/* ☆ */
#tnb1 div.d1>ul>li:nth-child(5)>a>.t1,
#tnb1 div.d1>ul>li:nth-child(6)>a>.t1{width:3em;}
/* depth2~3 */
#tnb1 li>div[class^='d']{
display:none;
visibility:hidden;height:0;opacity:0;
/* transition:.2s; */
}
#tnb1 li.on>div[class^='d']{
display:block;
visibility:visible;height:auto;opacity:1;
}
/* depth2 */
#tnb1 div.d2{z-index:10;position:relative;background:#fff;}
#tnb1 div.d2>.bg{}
#tnb1 div.d2>.hg1{display:none;} /* ☆ */
#tnb1 div.d2>ul{}
#tnb1 div.d2>ul>li{position:relative;}
#tnb1 div.d2>ul>li>a{display:block;
z-index:10;
position:relative;
min-height:0;
padding:1em 40px 1em 18px;
border-bottom:1px solid #ddd;
background:url() no-repeat 95% 50%;
color:#333;font-size:15px;
}
#tnb1 div.d2>ul>li.hasSub>a{
background-image:url(../../img/inc/tnb1d2bg1has.png);
}
#tnb1 li.on>div.d2>ul>li.on>a{
border-bottom:1px solid #ddd;
background-color:#ea002c;
color:#fff;font-weight:600;
}
#tnb1 li.on>div.d2>ul>li.hasSub.on>a{
background-image:url(../../img/inc/tnb1d2bg1on.png);
}
/* depth3 */
#tnb1 div.d3{overflow:hidden;}
#tnb1 li.on>div.d3{position:relative;padding:0 1em;border-bottom:1px solid #ddd;background:#f5f7f9;}
#tnb1 div.d3>ul{float:left;width:100%;padding:.666em 0;}
#tnb1 div.d3>ul>li{position:relative;width:100%;}
#tnb1 div.d3>ul>li>a{display:block;
z-index:10;
position:relative;
min-height:0;
margin:0 0 0 3px;
padding:.5em 0 .5em .666em;
background:url(../../img/inc/tnb1d3bg1.png) no-repeat 0 1em;
color:#666;font-size:14px;
}
#tnb1 li.on>div.d3>ul>li.on>a{color:#ea002c;font-weight:600;}
/* depth4 */
#tnb1 div.d4{overflow:hidden;}
#tnb1 li.on>div.d4{position:relative;margin:.333em 0;padding:0 .666em;border-top:1px solid #e7e7e7;border-bottom:1px solid #e7e7e7;background:#f7f7f7;}
#tnb1 div.d4>ul{float:left;width:100%;padding:.5em 0;}
#tnb1 div.d4>ul>li{position:relative;width:100%;}
#tnb1 div.d4>ul>li>a{z-index:10;display:block;position:relative;min-height:0;
padding:.5em 0 .5em .5em;
background:url(../../img/inc/tnb1d4bg1.png) no-repeat 0 1em;
color:#666;font-size:13px;
}
#tnb1 li.on>div.d4>ul>li.on>a{color:#07c;font-weight:bold;}
/* 통합검색 20160930 */
#search1{z-index:30; /* #tnb1 보다 낮음 */
position:relative;right:0;bottom:0;
height:0; /* [IE7]fix */
}
#search1 .b1.toggle{z-index:10;float:left;
position:absolute;right:0;bottom:13px;
box-sizing:border-box;
width:33px;height:30px;
border-radius:0;
border:0;
background:#00004c;
overflow:hidden;text-indent:-9999px;
}
#search1 .b1.toggle .ic1{display:block;
position:absolute;left:50%;top:50%;
width:20px;height:20px;margin:-10px;
background:url(../../img/inc/ic40search@2x.png) no-repeat;background-size:contain;
}
#search1 .b1.toggle.on .ic1{/* background-image:url(../../img/inc/ic40close@2x.png); */}
#search1c{display:none;visibility:hidden;
position:absolute;left:0;right:0;top:0;
height:0; /* ☆ */
margin:0 -10px; /* ☆ .container margin 값 맞춤 */
padding:22px 80px 22px 30px; /* ☆ .container margin 값 맞춤 */
background:#fff;
box-shadow:0 1px 2px 0 rgba(0, 0, 0, .2);
overflow:hidden; /* [~IE8] visible 하면 visibility:hidden; 인데도 img.bsContain 보일 수 있으니 주의! */
}
#search1c.on{display:block;visibility:visible;
height:auto;
}
#search1 input.text{float:left;
box-sizing:content-box;
width:100%;height:49px;
margin:0;padding:0;
border-radius:0;
border:0;
border-bottom:1px solid #d7d7d7;
background:#fff;
color:#666;
font-size:15px;line-height:45px;
}
#search1 input.text:focus{color:#000;}
#search1 .submit{float:right;
position:relative;
width:50px;height:50px;margin:0 -50px 0 0;padding:0;
border-radius:0;
border:0;
border-bottom:1px solid #d7d7d7 !important;
background:transparent !important;overflow:hidden;text-indent:-9999px;
transition:0s; /* ☆ */
}
#search1 .submit .ic1{float:left;position:absolute;left:50%;top:50%;
width:40px;height:40px;margin:-20px;
background:url(../../img/inc/ic80search@2x.png) no-repeat center center;
background-size:contain;
}
#search1 .bsContain img{left:0;right:0;top:0;bottom:0;} /* ☆ */
/* #wing */
/* #foot */
/* 배너(이미지) 20161026. 배너크기다변형.세로정렬중앙.뷰배너수고도화. [JS] $('#banner1').jQmTicker1(); */
#banner1{display:block;
clear:both;
position:relative;
min-height:40px;
}
#banner1 .h1{display:block;margin:0 auto;
color:#333;
font-size:32px;
text-align:center;
}
#banner1 .mControl{display:block;
margin:0 auto;
text-align:center;
}
#banner1 .mControl .b1{display:inline-block;
position:relative;width:20px;height:40px;
box-sizing:border-box; /* for a and button */
margin:0;padding:0;border-radius:0;border:0;
background:#fff;
font-size:0;line-height:0;
vertical-align:middle;
text-indent:-9999px;overflow:hidden;
}
#banner1 .mControl .b1.prev{position:absolute;left:0;bottom:0;}
#banner1 .mControl .b1.next{position:absolute;right:0;bottom:0;}
#banner1 .mControl .b1>.ic1{float:left;position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;
background:url() no-repeat center center;background-size:contain;
}
html.IE8 #banner1 .mControl button.b1>.ic1{top:auto;} /* [IE8]fix) */
#banner1 .mControl .b1.more>.ic1{background-image:url(../../img/inc/ic20c1more@2x.png);}
#banner1 .mControl .b1.stop>.ic1{background-image:url(../../img/inc/ic20c1pause@2x.png);}
#banner1 .mControl .b1.play>.ic1{background-image:url(../../img/inc/ic20c1play@2x.png);}
#banner1 .mControl .b1.prev>.ic1{width:20px;height:20px;margin:-10px;background-image:url(../../img/inc/ic40a1left@2x.png);opacity:.5;}
#banner1 .mControl .b1.next>.ic1{width:20px;height:20px;margin:-10px;background-image:url(../../img/inc/ic40a1right@2x.png);opacity:.5;}
/* ☆ */
#banner1 .mView{position:relative;height:40px;margin:0 20px;overflow:hidden;}
#banner1 .mCont{position:absolute;left:0;top:0;width:100%;overflow:hidden;
text-align:center; /* ☆ */
transition:.2s ease-out;
}
#banner1 .mContC{display:table;float:left;}
#banner1 .mContC>a{display:table-cell;
width:100%;
padding:0 10px;
height:40px;
text-align:center;vertical-align:middle;
}
*+html #banner1 .mContC>a{display:block;}
#banner1 .mContC>a>img{width:auto;height:auto;max-height:40px;max-width:100%;}
/* 뷰배너수 */
@media all and (max-width:359px){
#banner1 .mContC{width:100%;}
#banner1 .mContC>a{max-width:260px;} /* =(320-(10*2)-(20*2)) */
}
@media all and (min-width:360px){
#banner1 .mContC{width:100%;}
#banner1 .mContC>a{min-width:0;}
}
@media all and (min-width:480px){ /* 배너2개씩 */
#banner1 .mContC{width:50%;}
#banner1 .mContC>a{max-width:210px;} /* =((480-(10*2)-(20*2)) / 2) */
}
@media all and (min-width:960px){ /* 배너3개씩 */
#banner1 .mContC{width:33.333%;}
}
@media all and (min-width:1200px){ /* 배너3개씩 */
#banner1 .mContC{width:25%;}
}
/* 하단로고 20160906 */
#foot_logo{display:block;position:relative;margin:0 auto 10px;}
#foot_logo img{display:block;height:46px;margin:0 auto;}
/* 소셜링크 20160906 */
#snslink1{position:relative;margin:.666em 0 1em;line-height:1.333;letter-spacing:-1px;}
#snslink1 ul{text-align:center;overflow:hidden;}
#snslink1 li{display:inline-block;margin:0 -.125em;}
#snslink1 a{float:left;position:relative;width:40px;height:40px;}
#snslink1 a>.ic1{float:left;position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px;
background:url() no-repeat center center;background-size:contain;
overflow:hidden;text-indent:-9999px;cursor:pointer;
}
/* ☆ */
#snslink1 .facebook>a{background-color:#034ea1;}
#snslink1 .twitter>a{background-color:#28aae1;}
#snslink1 .youtube>a{background-color:#ed2123;}
#snslink1 .facebook>a>.ic1{background-image:url(../../img/inc/snslink1facebook@2x.png);}
#snslink1 .twitter>a>.ic1{background-image:url(../../img/inc/snslink1twitter@2x.png);}
#snslink1 .youtube>a>.ic1{background-image:url(../../img/inc/snslink1youtube@2x.png);}
/* 작성자(연락처/저작권) 20160906 */
#author1{position:relative;padding:0 0 .666em;
color:#666;
font-size:14px;line-height:1.5;
text-align:center;
}
#author1 a{color:#666;} /* iOS 는 000-000 를 자동으로 로 마크업되니 주의! */
#author1 .copyright{color:#666;margin:1em 0;letter-spacing:0;font-size:13px;}
/* 맨위로. 20160906 */
#gotop1{float:right;
z-index:10;position:relative;
width:40px;height:40px;
border-radius:9999px;
border:0;
margin:-20px 0 0 0;
color:#999;
font-weight:600;
font-size:11px;
letter-spacing:0;
text-align:center;
overflow:hidden;
}
#gotop1:before{content:'';
display:block;position:absolute;left:0;right:0;top:0;bottom:0;
background:rgba(255,255,255, .5);
}
#gotop1 .t1{display:block;position:relative;color:#26c;}
#gotop1 .ic1{display:block;
position:relative;right:0;top:0;width:0;height:0;
margin:0 auto;border:8px solid transparent;border-bottom-color:#26c;
overflow:visible;text-indent:100%;
}
#gotop1 .ic1:before{content:'';
float:left;position:absolute;right:0;top:50%;width:0;height:0;
margin:-3px -6px;border:6px solid transparent;border-bottom-color:#fff;
overflow:visible;text-indent:100%;
}
/* ETC */
/* ◇◆ StyleName. YYYYMMDD. @Who ◇◆ */
/* RWD ◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆ */
@media all and (min-width:768px){/* medium ◇◆◇◆◇◆◇◆◇◆ */
.container{margin:0 20px;}
#foot_s1{padding:33px 0 22px;}
h1#logo{margin:9px 0 26px;}
h1#logo>a>img{height:60px;}
#tnb1 .b1.toggle{bottom:32px;}
#search1 .b1.toggle{bottom:32px;}
#search1c{margin:0 -20px;
padding:40px 100px 40px 60px;
}
#search1 input.text{font-size:19px;}
#banner1{margin:0 auto 10px 200px;}
#banner1 .h1{float:left;margin:-4px 0 0 -200px;}
#banner1 .mControl{float:left;margin:0 0 0 -80px;}
#banner1 .mControl .b1.prev{left:0;bottom:0;}
#banner1 .mControl .b1.next{right:0;bottom:0;}
#banner1 .mView{position:relative;height:40px;margin:0 20px;overflow:hidden;}
#foot_logo{float:left;margin:0 auto;}
#foot_logo img{display:block;height:65px;margin:5px 40px 30px 0;}
#snslink1{float:right;margin:6px 0 1.666em;}
#snslink1 a{width:70px;height:62px;}
#author1{text-align:left; width:80%;}
/* #author1 br{display:none;} */
} /* /(min-width:768px) */
@media all and (min-width:1000px){/* large ◇◆◇◆◇◆◇◆◇◆ */
} /* /(min-width:1000px) */
@media all and (min-width:1256px){/* xlarge ◇◆◇◆◇◆◇◆◇◆ */
.container{max-width:1200px;margin:0 auto;}
#head_s1{height:50px;background:#707784;}
#head_s1:before{content:'';
position:absolute;left:50%;top:0;
width:50%;height:100%;
margin:0 0 0 350px;
background:#333949;
}
#head_s1 .container{}
#head_s2{height:100px;border-bottom:1px solid #ddd;}
#foot{}
#foot_s1{z-index:10;position:relative;}
#foot_s2{z-index:20;position:relative;padding:20px 0;}
h1#logo{float:left; /* ☆ */
z-index:40; /* ☆ */
margin:66px 0 24px 1px;
}
h1#logo>a>img{height:60px;}
/* 검색 20160930 ))) 모바일과 많이 다르니, 스타일 복제하여 재정의 (분리 사용 가능)
*/
#search1{z-index:30;position:absolute;right:250px;top:0;bottom:auto;height:auto;}
#search1 .b1.toggle{display:none;}
#search1c{display:block !important;visibility:visible !important;
position:relative;top:0;
width:190px;height:50px;
margin:0 20px;
padding:7px 30px 0 0;
background:transparent;
box-shadow:none;
}
#search1 input.text{float:left;
box-sizing:content-box;
width:100%;height:29px;
margin:0;
padding:0;
border-radius:0;
border:0;border-bottom:1px solid #b3b6bc;
background:transparent;
color:#fff !important;
font-size:14px;line-height:25px;
}
#search1 .submit{float:right;
position:relative;
width:30px;height:30px;margin:0 -30px 0 0;padding:0;
border-radius:0;
border:0;
border-bottom:1px solid #b3b6bc !important;
background:transparent !important;overflow:hidden;text-indent:-9999px;
transition:0s; /* ☆ */
}
#search1 .submit .ic1{float:left;position:absolute;left:50%;top:50%;
width:20px;height:20px;margin:-10px;
background:url(../../img/inc/ic40search@2x.png) no-repeat center center;
background-size:contain;
}
/* 주메뉴 20160907 makeActive2ClickHover('#tnb1'); ))) 모바일과 많이 다르니, 스타일 복제하여 재정의 (분리 사용 가능)
* 1차 float. 2차 inline-block. 3차 이하 없음.
*/
#tnb1{z-index:30;float:left;position:absolute;left:275px;top:0;width:925px;line-height:1.333;letter-spacing:-1px;}
/* 데스크탑 감춤 20160906 */
#tnb1 .b1.toggle,
#tnb1c .b2,
#tnb1logo,
#tnb1gn1,
#tnb1gn2,
#tnb1c>div.cont:before{display:none;}
#tnb1c{
display:block !important; /* ☆ */
visibility:visible;
z-index:10;
position:absolute; /* ☆ .container padding 값 영향 안받음! */
right:0;top:0;
width:100%;height:101px;
background:transparent;
overflow:visible; /* ☆ */
}
#tnb1c.on{
display:block;visibility:visible;
right:0;
}
#tnb1c>.bg{}
#tnb1c.on>.bg{}
#tnb1c>div.cont{float:left;
/* ☆[IE7]fix)) position:relative; 하면 z-index 없어도 쌓임맥락 만드니 주의! */
right:0;
width:100%;min-height:100%;
box-shadow:none;
}
#tnb1c.on>div.cont{right:0;
box-sizing:border-box; /* ☆[IE8+] */
}
/* depth1~depth4 */
/* depth1 */
#tnb1 div.d1{
position:relative;
width:82%;
min-height:100%;
padding:0 0 0 18%; /* ☆ */
background:transparent;
line-height:1.333;letter-spacing:0;
overflow:visible;
}
#tnb1 div.d1>ul{width:100%;
min-height:0; /* >=1차메뉴전체높이 */
}
#tnb1 div.d1>ul>li{display:inline;position:static;} /* ☆ */
#tnb1 div.d1>ul>li.m5 ~ li{display:none;} /* ☆ */
#tnb1 div.d1>ul>li>a{display:block;
float:left; /* ☆ */
position:relative; /* ☆ */
right:auto !important; /* ☆ */
top:auto !important; /* ☆ */
width:auto;
height:24px;
/*padding:38px 25px 39px; ☆ */
padding:38px 46px 39px;
border:0;
background:transparent;
color:#000;font-weight:400;font-size:18px;
text-align:center;
}
#tnb1 div.d1>ul>li>a>.ic1{display:inline-block;width:0;height:100%;vertical-align:middle;}
#tnb1 div.d1>ul>li>a>.t1{display:inline-block;
width:auto !important; /* ☆ */
vertical-align:middle;
}
#tnb1 div.d1>ul>li.hasSub>a{}
#tnb1 div.d1>ul>li.on>a{color:#000;font-weight:400;}
#tnb1 div.d1>ul>li.on>a:before{display:none;} /* ☆ */
#tnb1 div.d1>ul>li.over>a:before{content:'';display:none;}
#tnb1 div.d1>ul>li.on>a:after{display:none;} /* ☆ */
#tnb1 div.d1>ul>li.over>a:after{content:'';display:none;}
/* not() 활용이유?
모바일 메인페이지에서 주메뉴 펼치면 허전해보이지 않기 위해.. 1차 1번째 메뉴를 활성(.on) 하였다면,
데스크탑에서는 이 활성이 표시나지 않게 한다.
이 때, body[data-layout*='main'] 를 사용하면 오버(.over) 스타일보다 적용 우선순위가 높아져 문제가 발생한다.
아래처럼 활성(.on) 스타일을 비활성과 같게 만들고, 서브페이지만 활성(.on) 스타일을 추가하여 해결하였다.
또한, 활성(.on) 메뉴도 오버(.over) 스타일이 보이게 하려고, 오버(.over) 스타일에 html.Desktop 선택자를 추가하여 우선순위 높였다.
*/
#tnb1 div.d1>ul>li.on>a{ /* 메인페이지 (+서브페이지) */
background-color:transparent;color:#000;
}
body:not([data-layout*='main']) #tnb1 div.d1>ul>li.on>a{ /* 서브페이지 */
background-color:transparent;color:#000;font-weight:400;
}
#tnb1 div.d1>ul>li.on>a:hover,
#tnb1 div.d1>ul>li.on>a:focus{}
/* ★ depth1 오버(포커스)동작 */
html.Desktop #tnb1 div.d1>ul>li.over>a{
background-color:transparent;color:#000;font-weight:600;
}
html.Desktop #tnb1 div.d1>ul>li.over>a:after{content:'';display:block;
positIon:absolute;left:0;right:0;bottom:0;
width:auto;height:5px;
margin:0 25px;
border:0;
background:#ea002c;
}
#tnb1 div.d1>ul>li>div.d2{
display:none;
visibility:hidden;height:0;opacity:0;
}
#tnb1 div.d1>ul>li.over>div.d2{
display:block;
visibility:visible;height:auto;opacity:1;
}
/* ★ depth2~3 오버(포커스)동작 */
#tnb1 li>div[class^='d'],
#tnb1 li.on>div[class^='d']{
display:none;
visibility:hidden;height:0;opacity:0;
/* transition:.2s; */
}
#tnb1 li.over>div[class^='d']{
display:block;
visibility:visible;height:auto;opacity:1;
}
/* depth2 */
#tnb1 div.d2{z-index:10;
position:absolute;left:-275px;top:101px;width:1200px;
background:#fff;
min-height:36px; /* ☆화면확인 */
padding:0 0 1em;
background:#fff;
}
#tnb1 div.d2>.bg{position:absolute;left:-100%;right:-100%;top:0;bottom:0;
background:#ea002c;
}
/* 2차메뉴 */
#tnb1 div.d2>ul{float:none;
position:relative; /* ☆ 하위메뉴의 기준위치 */
width:auto; /* ☆ */
margin:0; /* ☆ */
padding:0;
}
#tnb1 div.d2>ul>li{
display:inline; /* ☆ */
position:static; /* ☆ 하위메뉴의 기준위치가 안되도록 */
}
#tnb1 div.d2>ul>li>a,
#tnb1 li.on>div.d2>ul>li.on>a{
display:inline-block; /* ☆ */
float:none; /* ☆ */
z-index:10;
position:relative;
min-height:0;
margin:1em 1em 0 1em;
padding:0;
border-bottom:1px solid transparent;
background-color:transparent;
color:#fff;font-size:14px;
}
#tnb1 li.on>div.d2>ul>li.on>a{
color:#fff;
font-weight:400;
}
#tnb1 div.d2>ul>li.hasSub>a,
#tnb1 li.on>div.d2>ul>li.hasSub.on>a{
background-image:url();
}
#tnb1 li.over>div.d2>ul>li.over>a{
border-bottom:1px solid #e1f18e;
background-color:transparent;
color:#e1f18e;font-weight:400;
}
#tnb1 li.over>div.d2>ul>li.hasSub.over>a{
background-image:url();
}
/* 정렬 */
#tnb1 li.m1>div.d2>ul{text-align:center;}
#tnb1 li.m2>div.d2>ul{text-align:center;}
#tnb1 li.m3>div.d2>ul{text-align:center;}
#tnb1 li.m4>div.d2>ul{text-align:center;}
#tnb1 li.m5>div.d2>ul{text-align:center;}
/* depth3 */
#tnb1 div.d3{display:none !important;overflow:hidden;}
/* 20160909 새 창 표시 */
#tnb1 div.d2>ul>li>a[target="_blank"]:after,
#tnb1 div.d3>ul>li>a[target="_blank"]:after{ /* [IE8+] */
content:'';
display:inline-block;
width:12px;height:10px;
margin:0 0 3px 4px;
background:url(../../img/inc/ic12newwindow.png) no-repeat;
vertical-align:middle;
}
/* 작업확인용.★☆ToEdit) */
/* #tnb1 div.d1>ul>li.on>div.d2{
display:block;
visibility:visible;height:auto;opacity:1;
} */
/* ◇◆◇◆ only Desktop Contents ◇◆◇◆ */
/* 글로벌내비 20160930 */
#gn1{z-index:20;display:block;position:absolute;left:0;top:12px;font-size:13px;}
#gn1 ul{overflow:hidden;}
#gn1 li{float:left;padding:0 0 0 1px;
background:url(../../img/inc/gn1s.png) no-repeat left center;
}
#gn1 a{float:left;padding:.333em 1em;color:#fff;}
#gn1 a>.t1{}
#gn1 a>.ic1{}
/* 글로벌내비 20160930 */
#gn2{z-index:40;display:block;position:absolute;right:0;top:12px;font-size:13px;}
#gn2 ul{overflow:hidden;}
#gn2 li{float:left;}
#gn2 li a{float:left;padding:0 1em;padding:.333em 1em;color:#fff;
text-transform:uppercase;
}
/* 전체메뉴 20160909 */
#anb1{display:block;
z-index:60; /* #tnb1 보다 높음 */
position:absolute;left:0;right:0;bottom:0;
height:0; /* [IE7]fix */
line-height:1.333;letter-spacing:-1px;
}
#anb1 .b1.toggle{z-index:10;float:left;
position:absolute;right:0;bottom:36px;
box-sizing:border-box;
width:33px;height:30px;
border-radius:0;
border:0;
background:#f65d00;
overflow:hidden;text-indent:-9999px;
}
#anb1 .b1.toggle .ic1{display:block;
position:absolute;left:50%;top:50%;
width:20px;height:20px;margin:-10px;
background:url(../../img/inc/ic40sitemap@2x.png) no-repeat;background-size:contain;
}
#anb1 .b1.toggle.on{right:0;bottom:36px;}
#anb1 .b1.toggle.on .ic1{background-image:url(../../img/inc/ic40close@2x.png);}
#anb1c{display:none;position:absolute;left:0;right:0;top:0;background:#ee0;}
#anb1c.on{display:block;}
#anb1c>.bg{}
#anb1c>div.cont{position:relative;
height:100%;
padding:1.333em;
border:1px solid #ea002c;
background:#fff;
box-shadow:0 0 5px 0 rgba(0,0,0, .2);
}
#anb1c.on>.bg{right:0;opacity:1;}
#anb1c.on>div.cont{}
/* depth1 */
#anb1 div.d1{}
#anb1 div.d1>ul{overflow:hidden;}
#anb1 div.d1>ul>li{float:left;position:relative;
box-sizing:border-box;
width:20%; /* =100/5 */
padding:0 1.1425% 1.1425% 1.1425%;
background:#fff;
}
#anb1 div.d1>ul>li:before{content:'';float:left;position:absolute;left:0;top:0;
width:0;height:600px;
border-left:1px solid #eee;
}
#anb1 div.d1>ul>li:first-child:before{display:none;}
#anb1 div.d1>ul>li>a{display:block;margin:0 0 .666em;color:#444;font-weight:bold;font-size:18px;}
/* depth2 */
#anb1 div.d2{}
#anb1 div.d2>ul{}
#anb1 div.d2>ul>li{display:inline;}
#anb1 div.d2>ul>li>a{display:block;padding:.25em 0 .25em 8px;
background:url(../../img/inc/bu1.png) no-repeat 0 10px;
color:#666;font-weight:normal;font-size:13px;
}
#anb1 div.d2>ul>li>a:hover,
#anb1 div.d2>ul>li>a:focus{background:#f7f7f7;}
/* 맨끝 */
#anb1 div.d1>ul>li.m5 ~ li{display:none;
clear:both;
float:none;width:auto;
padding-top:1.1425%;
border:0;
border-top:1px solid #eee;
}
#anb1 div.d1>ul>li.m5 ~ li:before{display:none;}
#anb1 div.d1>ul>li.m5 ~ li>a{float:left;padding:0 2% 0 0;}
#anb1 div.d1>ul>li.m5 ~ li>div.d2>ul{margin:0 0 0 2%;padding:0 0 0 1.3%;border-left:1px dotted #ccc;overflow:hidden;}
#anb1 div.d1>ul>li.m5 ~ li>div.d2>ul>li{float:left;position:relative;padding:0 .5em;background:#fff;}
#anb1 div.d1>ul>li.m5 ~ li>div.d2>ul>li>a{}
} /* /(min-width:1256px) */
/* /RWD ◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆ */