@charset "utf-8";
@import url(http://pkh.dothome.co.kr/common/css/reset.css);
::-webkit-scrollbar {width: 8px; height: 15px; border: 3px solid #fff; }
::-webkit-scrollbar-track {background: #fff; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height: 100px; width: 100px; background: #ffd200; -webkit-border-radius: 8px; border-radius: 8px; }
#full-wrap {max-width:1440px; margin:0 auto;}

#header {position:fixed;width:235px; height:100%; background:#ffd200;z-index:4;top:0;}
#header h1 {margin:10.63829787234043%/*25px*/ 0; text-align:center; text-indent:-5px;}
#header ul li {padding-left:12.76595744680851%/*30px*/;overflow:hidden; position:relative; transition:0.5s; background:url(../img/common/menu-bar.png) right 0 no-repeat; background-size:0 68px;}
#header ul li:after {float:left; content:''; display:block; border:20px solid transparent; border-top-color:#fff; position:absolute; right:8px; bottom:8px; transform:rotate(135deg);opacity:0; transition:0.7s 0.2s ease;}
#header ul li:before {float:left; content:''; display:block;border:20px solid transparent; border-top-color:#ffd200; position:absolute; right:-20px; bottom:-20px; transform:rotate(-45deg); opacity:0; transition:0.5s 0.2s ease;}
#header ul li a {display:block; height:68px; line-height:68px;font-family:Malgun Gothic,'맑은 고딕', sans-serif; font-size:12px; font-weight:bold; color:#999; transition:1s;}
#header ul li a span {font-size:24px; color:#000;transition:1s;}
#header ul li:hover {background:url(../img/common/menu-bar.png) right 0 no-repeat; background-size:100% 68px;}
#header ul li:hover a span {color:#fff;}
#header ul li:hover:after, #header ul li:hover:before {opacity:1;z-index:99;}

#header #event {position:fixed; height:110px;   bottom:0px; z-index:100; width:235px; }
#header #event .event-lyan {display:block; width:100px; height:100px; background:url(../img/common/event-lyan.png)0 0 no-repeat; background-size:cover;}
#header #event:hover .event-lyan, #header #event:focus .event-lyan {background-image:url(../img/common/event-lyan.gif);}
#header #event .event-box {position:absolute; top:0; right:10px; margin-top:-78px; display:none;}
#header #event .go-event {position:absolute; top:0px; right: 36px; font-size:24px; font-weight:bold;margin-top:-60px;display:none;}
#header #event:hover .event-box, #header #event:focus .event-box, #header #event:hover .go-event, #header #event:focus .go-event {display:block;}

#container {max-width:1205px; margin-left:235px;}

#footer {max-width:1205px; height:20vh; margin-left:235px; background:#000 url(../img/common/footer-neo1.png) right bottom no-repeat;}
#footer:hover {background-image:url(../img/common/footer-neo1.gif);}
#footer .bottom-menu {width:420px; margin:0 auto; overflow:hidden; padding-top:57px;}
#footer ul li {float:left;position:relative ;width:auto; padding:0 12px;}
#footer ul li:after {content:'·'; color : #999; position:absolute; right:0;}
#footer ul .m4:after {content:none;}
#footer ul li a {font-size:16px; color:#999; font-weight:bold;}
#footer .copy {font-size:16px; color:#999; text-align:center; margin-top:24px}

@media (max-width:1023px) {
#header {position:fixed;width:100%; height:107px; background:#ffd200;z-index:4; overflow:hidden;}
#header h1 {width:23.828125%/*183px*/; height:107px;line-height:107px;float:left;padding: 0 1.302083333333333%;margin:0;}
#header h1 img {width:100%;}
#header ul {float:left; overflow:hidden; width:55%; margin-left:3%;}
#header ul li {height:59px; padding:24px 10px;background:url(../img/common/menu-bar.png) 0 top no-repeat; background-size:100% 0; float:left; }
#header ul li + li + li ~ li {padding-top:41px; height:42px;}
#header ul li a {display:block; height:68px; line-height:0;font-family:Malgun Gothic,'맑은 고딕', sans-serif; font-size:2px; font-weight:bold; color:#999; transition:1s; vertical-align:middle;text-align:center;}
/*#header ul li a:after {content:''; display:block; width:2px; height:20px; position:absolute; left:0; top:49px;background:url(../img/common/gnb-bar.png)0 0 no-repeat;}
#header ul li#toon a:after {content:none;}*/
#header ul li a span {font-size:18px; color:#000;transition:1s;display:block;line-height:30px; text-align:center;}
#header ul li:after {border:10px solid transparent;right:4px; bottom:4px;border-top-color:#fff; }
#header ul li:before {border:10px solid transparent;right:-10px; bottom:-10px;border-top-color:#ffd200;}
#header ul li:hover {background:url(../img/common/menu-bar.png) right 0 no-repeat; background-size:100% 100%;}

#header #event {position:fixed; height:92px; bottom:0px; top:5px; right:0.9114583333333333%; z-index:100; width:16.53645833333333%/*127px;*/; }
#header #event a {width:100%; height:100%; display:block;}
#header #event .event-lyan {display:block; width:59.84251968503937%; height:67.39130434782609%; background:url(../img/common/event-lyan.gif)left bottom no-repeat; background-size:contain; position:absolute; bottom:0; left:0;}
#header #event .event-box {top:0; right:0px; margin-top:0px; display:block;width:51.18110236220472%/*65px*/;}
#header #event .go-event {top:5px; right: 5.511811023622047%; font-size:2.2vw; margin-top:0px;display:block;}

#container {width:100%; margin-left:0;}

#footer {width:100%; margin-left:0; height:162px;}
#footer .bottom-menu {width:420px; margin:0 auto; overflow:hidden; padding-top:57px;}
}

@media (max-width:767px) {
#header {position:fixed;width:100%; height:105px; background:#ffd200;z-index:4; overflow:hidden;}
#header h1 {width:100%/*183px*/; height:52px;line-height:52px;float:left;text-align:center;background:#fff;}
#header h1 img {width:30.23809523809524%; max-width:176px;}
#header ul {float:left; overflow:hidden; width:100%; margin-left:0%; height:54px}
#header ul li {height:54px; padding:0px;float:left; width:25%;background:none;}
#header ul li:after {content:none;}
#header ul li:before {content:none;}
#header ul li:hover {background:none;}
#header ul li:hover a span {color:#000;}
#header ul li + li + li ~ li {padding:0px; height:54px;}
#header ul li + li + li ~ li span {font-size:0;}
#header ul li + li + li ~ li span > strong {font-size:30px; font-weight:bold; line-height:54px;}
#header ul li + li + li + li ~ li {display:none;}
#header ul li a {display:block; height:54px; line-height:0;font-family:Malgun Gothic,'맑은 고딕', sans-serif; font-size:2px; font-weight:bold; color:#999; transition:1s; vertical-align:middle;text-align:center;}
#header ul li a:after {content:''; display:block; width:2px; height:34px; position:absolute; left:0; top:11px;background:url(../img/common/gnb-bar.png)0 0 no-repeat;}
#header ul li#toon a:after {content:none;}
#header ul li a span {font-size:16px; line-height:27px;}

#header #event {display:none;}
#footer {background-size:90px 90px; height:162px;}
#footer:hover {background-image:url(../img/common/footer-neo1.gif);}
#footer .bottom-menu {width:248px; margin:0 auto; overflow:hidden; padding-top:49px;}
#footer ul li {float:left;position:relative ;width:auto; padding:0 6px;}
#footer ul li:after {content:'·'; color : #999; position:absolute; right:0;top:2px;}
#footer ul .m4:after {content:none;}
#footer ul li a {font-size:10px;}
#footer .copy {font-size:10px; color:#999; text-align:center; margin-top:10px}
}