@charset "utf-8";
@import './font/opensans.css';
@import './font/nanumsquare.css';
@import './font/spoqahansans.css';

/********** RESET **********/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, hr, textarea, input[type=text], input[type=radio], input[type=checkbox], input[type=button], input[type=image], input[type=password], input[type=reset], input[type=submit], input[type=email], input[type=color], input[type=date], input[type=datetime],input[type=datetime-local], input[type=month], input[type=number], input[type=range], input[type=search], input[type=tel], input[type=time], input[type=url], inpuyt[type=week] {margin:0; padding:0; border:0; font: inherit;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video {display:block;}
ol, ul, li {list-style:none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content:"";	content:none;}
table {border-collapse:collapse; border-spacing:0;}
textarea {overflow:auto}
caption, figcaption {display:none;} 
em, address {font-style:normal;}
label {cursor:pointer;}
legend {position:absolute; top:0; left:0; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;} /* for screen reader */
:focus {outline:0 none;}
a {color:inherit;}
a:link {text-decoration:none;color:inherit;}
a, button {background:none; border:0 none; cursor:pointer;}


/********** COMMON **********/

html {height:100%;}
body {position:relative; min-height:100%; box-sizing:border-box;}
body, input, textarea, select, button {font:400 15px/1.0 "Spoqa Han Sans", sans-serif; color: #111; letter-spacing:-0.03em;}

div.container {position:relative; width:1100px; margin:0 auto; z-index:0;}
div.container:after {display:block; clear:both; content:"";}

hr.sep {display:block; height:1px; margin:80px 0; background:#e1e1e1;}

button.more {position:relative; display:inline-block; width:200px; height:50px; padding-left:20px; background:url("../img/common/arrow-more.png") right center no-repeat; border:1px solid #ccc; text-align:left; font:400 18px/1.0 "NanumSquare", sans-serif; color:#555; box-sizing:border-box; z-index:10; transition:all 0.3s;}
button.more:hover {background:url("../img/common/arrow-more-hover.png") right center no-repeat; border:3px solid #e21000; font-weight:700; color:#e21000;}

/********** LAYOUT **********/

#header {height:80px; background:#fff;}
#header h1 {position:relative; float:left; width:108px; height:44px; margin-top:17px;}
#header h1 a {display:block; width:100%; height:100%; background:url("../img/common/header-h1-logo.png"); text-indent:-9999px;}
#header nav {position:relative; float:right; margin-top:20px;}
#header nav a {display:inline-block; padding:10px; font:800 20px/1.0 "Open Sans", sans-serif; transition:all 0.3s;}
#header nav a.on {color:#e21000; transition:all 0.3s;}
#header nav a:hover {color:#ff9900;}
#header nav a + a {margin-left:35px;}

#footer {height:150px; border-top:1px solid #e1e1e1;}
#footer h1 {position:relative; float:left; width:108px; height:44px; margin-top:40px; background:url("../img/common/footer-h1-logo.png"); text-indent:-9999px;}
#footer address {position:relative; float:left; margin:35px 0 0 50px; line-height:1.5; color:#999;}
#footer p.copyright {position:relative; float:right; margin-top:100px; font-family:"Open Sans", sans-serif; color:#999;}

section.mov-frame {position:relative; height:500px; text-align:center; font-size:0; line-height:0; overflow:hidden;}
section.mov-frame video {width:100%; min-width:1920px; height:auto; margin-top:-290px;}
section.mov-frame h1 {position:absolute; top:0; bottom:0; left:0; right:0; background:url("../img/common/bg-mov-frame.png") center center; font:800 84px/500px "Open Sans", sans-serif; letter-spacing:0.5em; text-indent:0.5em; color:#fff; text-transform:uppercase;}

#lnb {height:80px; border-bottom:1px solid #e1e1e1; text-align:center;}
#lnb a {position:relative; display:inline-block; margin-top:15px; padding:15px; font:400 20px/1.0 "NanumSquare", sans-serif; color:#999; transition:all 0.3s;}
#lnb a:after {position:absolute; display:block; left:50%; top:63px; width:0; height:5px; background:#ff9900; content:""; transition:all 0.3s;}
#lnb a.on {font-weight:700; color:#111;}
#lnb a.on:after {width:100%; margin-left:-50%; background:#e21000; transition:all 0.3s;}
#lnb a:hover {font-weight:400; color:#333; transition:all 0.3s;}
#lnb a:hover:after {width:100%; margin-left:-50%; background:#ff9900;}
#lnb a + a {margin-left:30px;}

section.cnt-frame {padding-bottom:150px; max-width:100%; overflow:hidden;}
section.cnt-frame.company-greetings {background:url("../img/company/bg-greetings.png") center top no-repeat;}
section.cnt-frame.company-history {padding-bottom:400px; background:url("../img/company/bg-history.png") center bottom no-repeat;}
section.cnt-frame.customer-inquiry {background:url("../img/customer/bg-inquiry.png") center bottom no-repeat;}
section.cnt-frame hgroup {position:relative; padding:65px 0 75px; text-align:center; z-index:10;}
section.cnt-frame hgroup h2 {font:300 42px/1.0 "NanumSquare", sans-serif;}
section.cnt-frame hgroup h3 {margin-top:15px; font:800 18px/1.0 "Open Sans", sans-serif; letter-spacing:0.4em; text-indent:0.4em; color:#ddd; text-transform:uppercase;}

/********** CONTENT **********/

section.home-impression {background:#f2f2f2;}
section.home-impression div.item {height:760px;}
section.home-impression div.item div.mov-mask {position:relative; height:620px; text-align:center; font-size:0; line-height:0; overflow:hidden;}
section.home-impression div.item div.mov-mask:after {position:absolute; display:block; top:0; bottom:0; left:0; right:0; background:url("../img/common/bg-mov-frame.png") center center; content:"";}
section.home-impression div.item video {width:100%; min-width:1920px; height:auto; margin-top:-290px;}
section.home-impression div.item div.container {z-index:100;}
section.home-impression div.item p {position:absolute; top:-120px; left:30px; font:800 18px/24px "NanumSquare", sans-serif; color:#fff; transition:all 0.7s;}
section.home-impression div.item button {position:absolute; top:30px; left:40px; transition:all 0.8s;}
section.home-impression div.item figure.pingu-logo {position:absolute; top:-410px; left:20px; transition:all 0.6s;}
section.home-impression div.item figure.pingu-character {position:absolute; top:-370px; left:50%; margin-left:-100px; transition:all 0.9s;}
section.home-impression div.item figure.domokun-logo {position:absolute; top:-310px; left:20px; transition:all 0.6s;}
section.home-impression div.item figure.domokun-character {position:absolute; top:-370px; left:50%; margin-left:-100px; transition:all 0.9s;}
section.home-impression div.owl-carousel .active p {left:0;}
section.home-impression div.owl-carousel .active button {left:0;}
section.home-impression div.owl-carousel .active figure.pingu-logo {left:0;}
section.home-impression div.owl-carousel .active figure.pingu-character {top:-340px;}
section.home-impression div.owl-carousel .active figure.domokun-logo {left:0;}
section.home-impression div.owl-carousel .active figure.domokun-character {top:-340px;}
section.home-impression div.owl-dots {position:absolute; left:50%; bottom:130px; margin-left:420px; z-index:10000;}
section.home-impression div.owl-dots .owl-dot {display:inline-block; width:20px; height:20px; background:#333; border-radius:10px; text-indent:-9999px; transition:all 0.3s;}
section.home-impression div.owl-dots .owl-dot.active {width:100px; background:#e21000; }
section.home-impression div.owl-dots .owl-dot + .owl-dot {margin-left:10px;}
section.home-impression div.owl-dots .owl-dot span {display:none !important;}

section.home-news {padding:150px 0 100px; background:#f2f2f2 url("../img/home/bg-news.png") center top no-repeat; text-align:center; font-size:0; line-height:0;}
section.home-news a {display:inline-flex; width:350px;}
section.home-news a + a {margin-left:25px;}
section.home-news a dl {}
section.home-news a dl dt {height:250px;}
section.home-news a dl dd {position:relative; width:350px; padding:20px; background:#fff; text-align:left; box-sizing:border-box;}
section.home-news a dl dd:after {position:absolute; display:block; top:0; left:0; right:0; height:0; content:""; transition:all 0.3s; z-index:1;}
section.home-news a dl.notice dd:after {background:#605ca8;}
section.home-news a dl.press dd:after {background:#d53166;}
section.home-news a:hover dl dd:after {height:100%;}
section.home-news a dl dd p {position:relative; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; z-index:10;}
section.home-news a:hover dl dd p {color:#fff !important;}
section.home-news a dl dd p:first-child {font:400 22px/1.0 "NanumSquare", sans-serif; letter-spacing:-0.075em;}
section.home-news a dl dd p:nth-child(2) {font:400 15px/1.0 "Open Sans", sans-serif; color:#999;}
section.home-news a dl dd p:nth-child(3) {font-size:15px; line-height:1.5; color:#666;}
section.home-news a dl dd p + p {margin-top:15px;}

section.home-slider {position:relative; z-index:100;}
section.home-slider div.item {height:790px;}
section.home-slider div.item figure {position:absolute;}
section.home-slider div.item p {position:absolute; line-height:1.5;}
section.home-slider div.item.i01 p {left:760px; top:380px;}
section.home-slider div.item.i02 p {left:730px; top:320px;}
section.home-slider div.item.i03 p {left:700px; top:360px;}
section.home-slider div.item.i01 button {position:absolute; left:760px; top:500px;}
section.home-slider div.item.i02 button {position:absolute; left:730px; top:460px;}
section.home-slider div.item.i03 button {position:absolute; left:700px; top:480px;}
section.home-slider div.owl-nav {}
section.home-slider div.owl-nav button.owl-prev {position:absolute; left:50%; top:270px; margin-left:-550px; width:46px; height:90px; background:url("../img/home/slider-prev.png") center center no-repeat;}
section.home-slider div.owl-nav button.owl-prev:hover {background:transparent url("../img/home/slider-prev.png") center center no-repeat !important;}
section.home-slider div.owl-nav button.owl-next {position:absolute; left:50%; top:270px; margin-left:504px; width:46px; height:90px; background:url("../img/home/slider-next.png") center center no-repeat;}
section.home-slider div.owl-nav button.owl-next:hover {background:transparent url("../img/home/slider-next.png") center center no-repeat !important;}

section.home-slider div.owl-nav button span {display:none;}

section.home-inquiry {position:relative; margin-top:-160px; padding:240px 0 100px; background:#333 url("../img/home/bg-inquiry.png") center top no-repeat; z-index:10; overflow-x:hidden;}
section.home-inquiry figure {position:absolute; right:-250px; bottom:-125px; font-size:0; line-height:0; z-index:11;}
section.home-inquiry ul {position:relative; width:1000px; margin:0 auto 50px; font-size:0; line-height:0; z-index:12;}
section.home-inquiry ul li {display:inline-flex; width:480px; padding:0 10px 20px; vertical-align:middle;}
section.home-inquiry ul li:last-child {width:980px;}
section.home-inquiry ul li dl, article.inquiry ul li dt, article.inquiry ul li dd {width:100%;}
section.home-inquiry ul li dt {padding-bottom:10px; font-size:15px; line-height:1.0; color:#999;}
section.home-inquiry select {width:100%; height:50px; padding-left:15px; background:#333; border:1px solid #999; color:#fff; box-sizing:border-box;}
section.home-inquiry input {width:100%; height:50px; padding-left:15px; background:#333; border:1px solid #999; font-size:15px; line-height:48px; color:#fff; box-sizing:border-box;}
section.home-inquiry textarea {width:100%; height:200px; padding:15px; background:#333; border:1px solid #999; line-height:1.5; resize:none; color:#fff; box-sizing:border-box;}
section.home-inquiry button {display:block; margin:0 auto; width:150px; height:150px; background:#e21000; font:400 20px/1.0 "NanumSquare", sans-serif; color:#fff; border-radius:75px;}
section.home-inquiry span#result {display:block; text-align:center; font:400 20px/150px "NanumSquare", sans-serif; color:#e21000;}

section.home-map {position:relative; height:500px; z-index:0;}

div#full-popup {position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.7); z-index:10000;}
div#popup-frame {position:fixed; top:50%; left:50%; width:540px; height:600px; margin:-230px 0 0 -270px; background:#fff; z-index:10001;}
div#popup-frame div {background:#f2f2f2; height:30px; padding:15px 40px;}
div#popup-frame div:after {clear:both; display:block; content:"";}
div#popup-frame div span {float:left; display:block; line-height:30px;}
div#popup-frame div span input [type=checkbox] {width:14px; height:14px;}
div#popup-frame div button {float:right; display:block; width:60px; height:30px; background:#333; color:#fff;}

article.company-greetings {}
article.company-greetings p {line-height:1.5;}
article.company-greetings p:first-child {font:400 20px/1.5 "NanumSquare", sans-serif; letter-spacing:-0.075em;}
article.company-greetings p + p {margin-top:30px;}
article.company-greetings p:first-child + p {margin-top:60px;}

article.company-history {}
article.company-history dl {display:table;}
article.company-history dl dt, article.company-history dl dd {position:relative; display:table-cell; padding:0 40px; vertical-align:middle;}
article.company-history dl dt {font:800 48px/1.0 "Open Sans", sans-serif;}
article.company-history dl dd {line-height:2.0;}
article.company-history hr.sep {margin:60px 0;}

article.company-awards {font-size:0; line-height:0;}
article.company-awards dl {position:relative; display:inline-flex; width:25%; height:379px; background:url("../img/company/awards-plaque.png") center top no-repeat; text-align:center;}
article.company-awards dl dt {position:absolute; bottom:50px; width:100%; height:75px; text-indent:-10px; font:800 24px/75px "Open Sans", sans-serif; color:#fff;}
article.company-awards dl dd {position:absolute; width:100%; font:700 17px/24px "NanumSquare", sans-serif; color:#7e655a;}
article.company-awards dl.type1 dd {top:60px;}
article.company-awards dl.type2 dd {top:72px;}
article.company-awards dl.type3 dd {top:84px;}
article.company-awards figure {position:absolute; right:-170px; bottom:-150px; font-size:0; line-height:0;}

article.company-location {}
article.company-location div.map {height:400px;}
article.company-location ul {margin-top:30px; font-size:0; line-height:0;}
article.company-location ul li {display:inline-flex; width:50%;}
article.company-location ul li dl {}
article.company-location ul li dl dt {font:400 20px/1.0 "NanumSquare", sans-serif;}
article.company-location ul li dl dd {margin-top:10px; font-size:15px; line-height:1.5;}
article.company-location ul li dl dd + dt {margin-top:30px;}

article.business {}
article.business p {position:relative; font-size:18px; font-weight:300; line-height:1.5; z-index:10;}
article.business figure.typo {margin-top:50px; font-size:0; line-height:0;}
article.business figure.typo img {width:100%;}
article.business figure.typo + button {margin-top:80px;}
article.business ul {margin-top:150px;}
article.business ul:after {display:block; clear:both; content:"";}
article.business ul li {float:left; width:50%; text-align:center;}
article.business ul li dl {clear:both;}
article.business ul li dl dt {height:50px; font:700 24px/1.0 "NanumSquare", sans-serif;}
article.business ul li dl dd {font-size:0; line-height:0;}
article.business ul li dl dd img {width:100%;}
article.business ul li button {margin-top:30px;}
article.business figure.layer {position:absolute; right:0; top:0; z-index:1;}
article.business figure.layer img {width:100%;}

article.character {}
article.character div {position:relative; z-index:0;} 
article.character div.gray:before {position:absolute; display:block; left:50%; top:0; bottom:0; width:100vw; margin-left:-50vw; background:#f2f2f2; content:""; z-index:-1;}
article.character figure {font-size:0; line-height:0;}
article.character h4 {position:absolute; display:inline-block; padding:10px 20px; background:#333; border-radius:30px; font:700 30px/1.0 "Open Sans", sans-serif; color:#fff;}
article.character p {position:absolute; font-size:16px; line-height:1.5;}
article.character button.shuttle {display:block; width:1100px; height:150px; margin:50px auto 0; background-position:center; background-size:100%; text-align:center; font:700 24px/150px "NanumSquare", sans-serif; color:#fff; transition:all 0.3s;}
article.character button.shuttle:hover {background-size:105%;}
article.character button.pingu {background-image:url("../img/character/pingu-btn.png");}
article.character button.pingu2 {background-image:url("../img/character/pingu2-btn.png");}
article.character button.domokun {background-image:url("../img/character/domokun-btn.png");}
article.character button.domokun2 {background-image:url("../img/character/domokun2-btn.png");}
article.character button.jangguem {background-image:url("../img/character/jangguem-btn.png");}
article.character button.jangguem2 {background-image:url("../img/character/jangguem2-btn.png");}
article.character button.hunter {background-image:url("../img/character/hunter-btn.png");}
article.character button.hunter2 {background-image:url("../img/character/hunter2-btn.png");}
article.character button.more {display:block; margin:50px auto 0;}

article.character.pingu div:nth-child(2) h4 {left:0; top:150px;}
article.character.pingu div:nth-child(2) p {left:0; top:220px;}
article.character.pingu div:nth-child(3) h4 {left:600px; top:150px;}
article.character.pingu div:nth-child(3) p {left:600px; top:220px;}
article.character.pingu div:nth-child(5) h4 {right:0; top:200px;}
article.character.pingu div:nth-child(6) h4 {right:0; top:70px;}

article.character.pingu2 div:first-child h4 {left:0; top:50px;}
article.character.pingu2 div:nth-child(2) h4 {left:0; top:50px;}
article.character.pingu2 div:nth-child(3) h4 {right:0; top:50px;}
article.character.pingu2 div:nth-child(4) h4 {left:0; top:50px;}

article.character.domokun div:nth-child(2) h4 {left:0; top:150px;}
article.character.domokun div:nth-child(2) p {left:0; top:220px;}
article.character.domokun div:nth-child(3) h4 {left:600px; top:150px;}
article.character.domokun div:nth-child(3) p {left:600px; top:220px;}

article.character.domokun2 div:first-child h4 {left:0; top:50px;}
article.character.domokun2 div:nth-child(2) h4 {left:0; top:50px;}
article.character.domokun2 div:nth-child(3) h4 {left:0; top:50px;}
article.character.domokun2 div:nth-child(4) h4 {left:0; top:50px;}

article.character.jangguem div:nth-child(2) h4 {left:0; top:150px;}
article.character.jangguem div:nth-child(2) p {left:0; top:220px;}
article.character.jangguem div:nth-child(3) h4 {left:550px; top:150px;}
article.character.jangguem div:nth-child(3) p {left:550px; top:220px;}
article.character.jangguem div:nth-child(4) h4 {left:0; top:100px;}

article.character.jangguem2 div:first-child h4 {left:0; top:50px;}
article.character.jangguem2 div:nth-child(2) h4 {left:0; top:100px;}

article.character.hunter div:nth-child(2) h4 {left:0; top:150px;}
article.character.hunter div:nth-child(2) p {left:0; top:220px;}
article.character.hunter div:nth-child(3) h4 {left:550px; top:150px;}
article.character.hunter div:nth-child(3) p {left:550px; top:220px;}

article.character.hunter2 div:first-child h4 {right:0; top:50px;}
article.character.hunter2 div:nth-child(2) h4 {left:0; top:100px;}

article.animation-info {position:relative; min-height:360px; padding-left:300px;}
article.animation-info figure {position:absolute; left:0; width:250px; font-size:0; line-height:0;}
article.animation-info figure img {width:100%;}
article.animation-info h4 {font:700 20px/1.0 "NanumSquare", sans-serif;}
article.animation-info h5 {margin-top:10px; font:300 15px/1.0 "Open Sans", sans-serif;}
article.animation-info ul {margin-top:30px;}
article.animation-info ul li + li {margin-top:15px;}
article.animation-info p {margin-top:30px; text-align:justify; line-height:1.5; color:#666;}
article.animation-info iframe {margin-top:50px;}

article.customer.list {font-size:0; line-height:0;}
article.customer.list a {display:inline-flex; width:255px; height:320px; padding:0 10px 20px;}
article.customer.list a dl {position:relative; width:100%; height:100%; z-index:0;}
article.customer.list a dl:after {position:absolute; display:block; bottom:0; left:0; right:0; height:0; content:""; transition:all 0.3s; z-index:1;}
article.customer.list a dl.notice:after {background:#605ca8;}
article.customer.list a dl.press:after {background:#d53166;}
article.customer.list a:hover dl:after {height:100%;}
article.customer.list a dl dt {position:absolute; display:inline-block; left:20px; top:170px; height:30px; padding:0 10px; border:1px solid #fff; text-align:center; font-size:15px; line-height:28px; color:#fff; box-sizing:border-box; z-index:10;}
article.customer.list a dl dd:nth-child(2) {position:absolute; left:20px; top:220px; font:400 17px/24px "NanumSquare", sans-serif; color:#fff; z-index:10;}
article.customer.list a dl dd:nth-child(3) {position:absolute; left:20px; bottom:20px; font:400 16px/1.0 "Open Sans", sans-serif; color:#fff; z-index:10;}

article.customer.detail h1 {padding-bottom:15px; border-bottom:1px solid #e21000; font:700 27px/1.3 "NanumSquare", sans-serif;}
article.customer.detail p.date {margin-top:15px; text-align:right; font:400 15px/1.0 "Open Sans", sans-serif; color:#999;}
article.customer.detail p.article {font-size:15px; line-height:1.8;}
article.customer.detail p.article a {font-weight:700; color:#e21000;}
article.customer.detail figure {text-align:center;}
article.customer.detail figure img {max-width:100%;}
article.customer.detail .primo {margin-top:80px;}
article.customer.detail .vicino {margin-top:80px;}
article.customer.detail button {position:relative; display:block; width:150px; height:50px; margin:80px auto 0; background:#e21000; font:400 18px/1.0 "NanumSquare", sans-serif; color:#fff; box-sizing:border-box;}

article.inquiry {}
article.inquiry ul {font-size:0; line-height:0; margin-bottom:50px;}
article.inquiry ul li {display:inline-flex; width:530px; padding:0 10px 20px; vertical-align:middle;}
article.inquiry ul li:last-child {width:1080px;}
article.inquiry ul li dl, article.inquiry ul li dt, article.inquiry ul li dd {width:100%;}
article.inquiry ul li dt {padding-bottom:10px; font-size:15px; line-height:1.0; color:#999;}
article.inquiry select {width:100%; height:50px; padding-left:15px; border:1px solid #e1e1e1; box-sizing:border-box;}
article.inquiry input {width:100%; height:50px; padding-left:15px; border:1px solid #e1e1e1; font-size:15px; line-height:48px; box-sizing:border-box;}
article.inquiry textarea {width:100%; height:200px; padding:15px; border:1px solid #e1e1e1; line-height:1.5; resize:none; box-sizing:border-box;}
article.inquiry button {display:block; margin:0 auto; width:150px; height:150px; background:#e21000; font:400 20px/1.0 "NanumSquare", sans-serif; color:#fff; border-radius:75px;}
article.inquiry span#result {display:block; text-align:center; font:400 20px/150px "NanumSquare", sans-serif; color:#e21000;}