﻿@charset "utf-8";

@import url("base.css");

/* layout */
html, body { position:relative; width:100%; }
body { min-width:320px; min-height:700px; -webkit-text-size-adjust:none; }
#wrap,
.footer { max-width:1146px; margin:0 auto; }
#wrap { background-color:#fff; }
#header { position:relative; float:left; width:237px; }
#container { overflow:hidden; max-width:889px; margin-left:22.42582%;/* 257/1146 */ margin-bottom:56px; }
.otherMenu { clear:both; }
#footWrap { margin-top:60px; padding-top:68px; min-height:222px; background:url(../images/common/bg_bottom.jpg) center bottom no-repeat; }
.footer { position:relative; min-height:180px; }
#wrap button { cursor:pointer; }
.pcMode { display:block !important; }
.mobileMode { display:none !important; }

/* header */
#header h1 { padding:18px 10px; border:1px solid #d0d0d0; text-align:center; color:#1a1a1a; box-sizing:border-box; }
p.btnLnb,
p.btnSearch { display:none; position:absolute; }
#header h1 .mobileMode img { padding:0 10px; }
#header h2 { display:none; }

/* container */
#container i { font-style:normal; }
#arimy,
#notice { position:relative; margin-left:68%; }
#arimy { margin-bottom:9px; border:1px solid #dcdcdc; }
.arimyList a { display:block; height:339px; }
#arimy dt { position:relative; }
#arimy dt span.icon { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.3) url(../images/main/icon_play.png) center no-repeat; }
#arimy dd { padding:17px 20px; }
#arimy dd span { display:block; padding:0 0 10px; }
#arimy dd span.tit { line-height:1.4; }
#arimy dd span.txt { white-space:nowrap; text-overflow:ellipsis; word-wrap:normal; overflow:hidden; }
#arimy dd span.btn { color:#d46e00; font-size:14px; }
.arimyControl { position:absolute; right:0; bottom:0; }
.arimyControl ul { border-top:1px solid #e5e5e5; border-left:1px solid #e5e5e5; font-size:0; }
.arimyControl ul li { display:inline; }
.arimyControl ul li a,
.arimyControl ul li p#slide-counter { display:inline-block; width:32px; height:29px; line-height:29px; text-align:center; vertical-align:middle; color:#000; font-size:14px; }
.arimyControl ul li a { background-position:center; background-repeat:no-repeat; border-right:1px solid #e5e5e5; text-indent:-9999px; overflow:hidden; }
.arimyControl ul li a.bx-prev { background-image:url(../images/main/btn_arimy_prev.gif); }
.arimyControl ul li a.bx-next { background-image:url(../images/main/btn_arimy_next.gif); }
#notice { background:#f4f4f4; border:1px solid #ddd; font-size:0; overflow:hidden; }
#notice h3 {display:inline; }
#notice h3 a { display:inline-block; width:64px; height:33px; line-height:33px; background:#f4f4f4; border-style:solid; border-color:#ddd; border-left-width:1px; border-right-width:1px; text-align:center; color:#595959; font-size:13px; font-weight:normal; }
#notice h3 a:hover,
#notice h3 a:active { text-decoration:none; }
#notice h3 a.on { margin-top:-1px; height:34px; line-height:34px; background:#505050; border:none; color:#fff; }
#notice div { /*float:left; */background:#ebebeb; border-top:1px solid #dfdfdf; height:179px;}
#notice div ul  { margin-top:20px; }
#notice div ul li { margin:15px 15px 0px; padding-left:15px; padding-bottom:0px; color:#000; font-size:14px; background: url(../images/main/bu_slnb.gif) left 8px no-repeat;  line-height:1.4; }
#notice div ul li.dotTxt { overflow:hidden; max-height:2.8em; }
#notice div .btnMore { position:absolute; right:0; top:0; }
#notice div .btnMore a { display:block; padding:9px 8px; }
#visual dl dd.btn i,
#arimy dd span i,
#notice div dd i { font-family:'Arial'; }

/* aside */
.otherMenu .otherMenuList { max-width:950px; margin:0 auto; text-align:center; font-size:0; }
.otherMenu .otherMenuList a { display:inline-block; width:10.12216%; min-width:7em; margin:0 1.5%; text-align:center; vertical-align:top; font-size:16px; letter-spacing:-1px; line-height:1.4;}
.otherMenu .otherMenuList i { display:block; width:116px; height:116px; margin:0 auto 8px auto; background-position:center; background-repeat:no-repeat; border:1px solid #ddd; border-radius:50%; }
.otherMenu .otherMenuList i.linkIcon01 { background-image:url(../images/main/icon_menu01.png); }
.otherMenu .otherMenuList i.linkIcon02 { background-image:url(../images/main/icon_menu02.png); }
.otherMenu .otherMenuList i.linkIcon03 { background-image:url(../images/main/icon_menu03.png); }
.otherMenu .otherMenuList i.linkIcon04 { background-image:url(../images/main/icon_menu04.png); }
.otherMenu .otherMenuList i.linkIcon05 { background-image:url(../images/main/icon_menu05.png); }
.otherMenu .otherMenuList i.linkIcon06 { background-image:url(../images/main/icon_menu06.png); }
.otherMenu .owl-carousel .owl-nav { display:inline-block; margin-top:20px; border:1px solid #ededed; }
.otherMenu .owl-carousel .owl-nav button,
.otherMenu .owl-carousel .owl-nav span.counter { display:inline-block; min-width:40px; line-height:40px; height:40px; vertical-align:top; color:#000; font-size:20px; }
.otherMenu .owl-carousel .owl-nav span.counter { padding:0 14px; }
#wrap .otherMenu .owl-carousel .owl-nav button { display:inline-block; width:40px; line-height:40px; background-position:center; background-repeat:no-repeat; background-size:auto 50%; border-right:1px solid #ededed; vertical-align:top; text-indent:-9999px; }
.otherMenu .owl-carousel .owl-nav button.owl-prev { background-image:url(../images/main/btn_arimy_prev.gif); }
.otherMenu .owl-carousel .owl-nav button.owl-next { background-image:url(../images/main/btn_arimy_next.gif); }
.owl-dots { display:none; }
/* footer */
.footer h2 { float:left; margin-left:7px; }
.footer address,
.footer p.copyright { max-width:438px; line-height:1.6; margin-left:20%; text-align:center; color:#fff; font-size:12px; }
.footer b { font-weight:normal; }
.footer address a { color:inherit; }
.sponSite { position:absolute; right:220px; top:0; }
.sponSite li { display:inline; }
.sponSite li a { display:inline-block; line-height:50px; padding:0 8px; vertical-align:middle; }
.sponSite li a img { vertical-align:middle; }
.footer .siteGo { position:relative; float:right; width:18%; z-index:5; }
.footer .siteGo p button { width:100%; height:37px; padding:0 5px; background:transparent url(../images/common/arrow_site.png) 98% center no-repeat; border:1px solid #b9b9b9; color:#fff; box-sizing:border-box; }
.siteGo p button { text-align:left; }
.siteGo ul { display:none; background:#fff; border:1px solid #b9b9b9; }
.footer .siteGo ul { position:absolute; left:0; bottom:37px; width:100%; }
.siteGo.active ul { display:block; }
.siteGo ul li a { display:block; padding:2px 4px; }

@media all and (min-width:960px) {
    /* util */
    .util { padding:14px; text-align:center; }
    .util li { display:inline; }
    .util ul,
    .util form,
    .util p { display:inline-block; }
    .util ul { font-size:0; }
    .util li a { display:inline-block; padding:5px 6px; background:url(../images/common/line_gnb.gif) left center no-repeat; font-size:14px; letter-spacing:-1px;  }
    .util li:first-child a { background:none; }
    .util p { padding:8px 13px; border:1px solid #d9d9d9; }
    .util p input[type="text"] { line-height:15px; padding:2px 4px; border:none; color:#4c4c4c; font-size:14px; box-sizing:border-box; }

    /* lnb */
    #lnb .gnb,
    #lnb .siteGo { display:none; }
    #lnb .btnClose { display:none; }
    .lnbList { width:100%; padding:10px 0;  }
    .lnbList>li { padding-right:5%; }
    .lnbList>li>a { position:relative; display:block; line-height:45px; padding:2px 18px 2px 8px; background:url(../images/common/lnb_plus.gif) 97% center no-repeat; border-bottom:1px solid #e1dede; color:#1a1a1a; font-size:16px; white-space:nowrap; }
    .lnbList>li.active span { position:absolute; right:0%; top:0; width:11px; height:48px; margin-right:-12px; background:url(../images/main/arrow_lnb.gif) left center no-repeat; z-index:5; }
    .lnbList div { display:none; position:absolute; left:100%; top:0; width:100%; min-width:100px; height:100%; margin-left:-1px; padding:110px 0 0 13.84615%; background:#fff; border:1px solid #d0d0d0; z-index:2; box-sizing:border-box; }
    .lnbList>li.active div { display:block; }
    .lnbList div h3 { padding:0 0 20px 10px; color:#1a1a1a; font-size:24px; }
    .lnbList div a { display:block; padding:6px 10px; color:#1a1a1a; font-size:15px; }
    .lnbList div a.active { background:url(../images/main/bu_lnb.gif) left center no-repeat; color:#ad381d; }
    .otherLnb { margin-top:6px; min-height:73px; }
    .otherLnb dl { padding:12px 15px; color:#fff; text-align:center; }
    .otherLnb dl dt { font-size:15px; }
    .otherLnb dl dd ul { font-size:0; }
    .otherLnb dl dd ul li { display:inline-block; }
    .otherLnb dl dd ul li a { display:block; color:#fff; }
    .otherLnb .top { margin-bottom:5px; background-color:#d89615; }
    .otherLnb .top dt { margin-bottom:13px; }
    .otherLnb .top ul li { padding:0 14px; font-size:16px; }
    .otherLnb .top ul li a span { display:inline-block; padding:3px 0 3px 30px; background-position:left center; background-repeat:no-repeat; }
    .otherLnb .top ul li.i1 a span { background-image:url(../images/main/icon_otherlnb_top01.png); }
    .otherLnb .top ul li.i2 a span { background-image:url(../images/main/icon_otherlnb_top02.png); }
    .otherLnb .bottom { background-color:#d47800; }
    .otherLnb .bottom dt { margin-bottom:10px; }
    .otherLnb .bottom ul { border:1px solid #e7b26e; }
    .otherLnb .bottom ul li { width:25%; border-left:1px solid #e7b26e; font-size:14px; box-sizing:border-box; }
    .otherLnb .bottom ul li:first-child { border-left:0 none; }
    .otherLnb .bottom ul li a { padding:5px 0; }
    
    /* visual */
    #visual { position:relative; float:left; width:65.46681%; overflow:hidden; }
    #visual .visualList a { position:relative; display:inline-block; height:566px; background-position:center top; background-repeat:no-repeat; color:#fff; overflow:hidden; }
    #visual .visualList a.visual01 { background-image:url(../images/main/img_pc_visual01.jpg); }
    #visual .visualList a.visual02 { background-image:url(../images/main/img_pc_visual02.jpg); }
    #visual .visualList a.visual03 { background-image:url(../images/main/img_pc_visual03.jpg); }
    #visual .visualList a.visual04 { background-image:url(../images/main/img_pc_visual04.jpg); }
    #visual .visualList a.visual05 { background-image:url(../images/main/img_pc_visual05.jpg); }
    #visual .visualList a.visual06 { background-image:url(../images/main/img_pc_visual06.jpg); }
    #visual .visualList a.visual01,
    #visual .visualList a.visual02 { color:#42475f; }
    #visual dl { position:absolute; left:44px; top:46px; padding-right:132px; }
    #visual dl dt { padding-bottom:12px; font-size:32px; }
    #visual dl dd { padding-bottom:4px; font-size:15px; }
    #visual dl dd b { font-weight:normal; }
    #visual dl dd i { display:none; }
    #visual dl dd.btn i { display:inline-block; }
    #visual .visualList a.visual04 dt { color:#425565; }
    #visual .visualList a.visual04 dd { color:#55697a; }
    #visual .visualList a.visual06 dt { color:#1d283b; }
    #visual .visualList a.visual06 dd { color:#3a465a; }
    #visual .visualList dl dd.btn { display:inline-block; width:61px; line-height:23px; margin-top:10px; padding-bottom:0; background:rgba(30,35,96,0.24); border:1px solid #dfeaef; text-align:center; color:#fff; font-size:14px; }
    .visualControl { position:absolute; right:0; top:0; width:132px; background:#af2a00; }
    .visualControl a { color:#fff; font-size:14px; }
    .visualNum { padding:10px 0; }
    .visualNum li a { display:block; padding:6px 10px 6px 25px; word-break:break-word; }
    .visualNum li a.active { background:url(../images/main/bu_choice.png) 14px 12px no-repeat; }
    .visualBtn { background:#9f2701; border-top:1px solid #951800; font-size:0; }
    .visualBtn li { display:inline; }
    .visualBtn li div { display:inline; }
    .visualBtn li a { display:inline-block; width:39px; height:39px; background-position:center; background-repeat:no-repeat; border-left:1px solid #951800; text-indent:-9999px; overflow:hidden; }
    .visualBtn li a.bx-prev { background-image:url(../images/main/btn_prev.png); }
    .visualBtn li a.bx-next { background-image:url(../images/main/btn_next.png); }
    .visualBtn li a.bx-stop { background-image:url(../images/main/btn_pause.png); }
    .visualBtn li a.bx-start { background-image:url(../images/main/btn_play.png); }
}
@media all and (max-width:960px){
    #seoul-common-gnb { position:absolute; width:100%; }
    /*#wrap { padding-top:30px; }*/
    #wrap,
    #container,
    .footer { max-width:960px; }
    #footWrap { min-height:130px; margin-top:20px; padding:0; background:#505050; }
    .footer { min-height:130px; padding:0 0 20px; background:#474747;}
    .pcMode { display:none !important; }
    .mobileMode { display:block !important; }
    #header { float:none; width:100%; height:100%; }
    /* header */
    .util { display:none; }
    #header h1 { width:100%; line-height:100px; padding:0 5%; border:none; }
    #header h1 img { width:60%; vertical-align:middle; }
    .otherLnb { display:none; }
    p.btnLnb { display:block; }
    p.btnSearch { display:block; }
    p.btnLnb { left:2%; top:0; }
    p.btnSearch { right:3%; top:0; text-align:right; }
    p.btnLnb button,
    p.btnSearch a { display:block; width:54px; line-height:100px; background:transparent; border:none; vertical-align:middle; }
    p.btnLnb button img { width:67.6923%; vertical-align:middle; }
    p.btnSearch a img { width:80.6923%; vertical-align:middle; }
    #lnb { display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); overflow-y:auto; z-index:100000; }
    .lnbView #lnb { display:block; }
    #lnb .lnbWrap { position:relative; width:90%; min-height:100%; padding-bottom:20px; background:#505050; box-sizing:border-box; z-index:2; }
    #lnb .gnb { background:#555; font-size:0; }
    #lnb .gnb li { display:inline; }
    #lnb .gnb li a { display:inline-block; width:25%; line-height:3em; background:url(../images/main/line_gnb.gif) left center no-repeat; text-align:center; color:#fefefe; font-family:'돋움','Dotum'; font-size:14px; }
    #lnb .gnb li:first-child a { background:none; }
    #lnb h2 { position:relative; display:block; line-height:1; padding:1em 0.5em; background:#464646; color:#fff; }
    #lnb .btnClose { position:absolute; right:20px; top:0.9em; }
    #lnb .btnClose button { display:inline-block; line-height:1; background:transparent; border:none; }
    #lnb .btnClose button img { width:60%;}
    .lnbList { padding-top:0; background:#fff; }
    .lnbList>li { border-top:2px solid #f0f0f0; }
    .lnbList>li a { display:block; color:#010101; box-sizing:border-box; }
    .lnbList>li>a { width:100%; line-height:2.5em; padding-left:1em; color:#444852; }
    .lnbList>li>div { display:none; }
    .lnbList>li.active>div { display:block; }
    .lnbList>li>div h3 { display:none; }
    .lnbList>li>div a { line-height:2em; margin-left:1.5em; padding-left:10px; background:url(../images/main/bu_slnb.gif) left center no-repeat; font-weight:300; }
    .lnbList div { background:#f6f7f7; border-top:2px solid #f0f0f0; }
    #lnb .siteGo { width:90%; margin:0 auto; }
    #lnb .siteGo p { margin:20px 0 0; text-align:center; }
    #lnb .siteGo p button { display:block; width:100%; padding:0.3em 10px; background:#585858 url(../images/main/arrow_select.gif) 98% center no-repeat; border:1px solid #616161; color:#d3d3d3; box-sizing:border-box; }
    
    /* container */
    #container { margin-bottom:0; }
    #container,
    #notice { margin-left:0; }
    #visual { position:relative; margin-bottom:35px; }
    #visual .visualList a { position:relative; min-width:320px; background-size:100%; color:#fff; }
    #visual .visualList a.visual01 { background-image:url(../images/main/img_visual01.jpg); }
    #visual .visualList a.visual02 { background-image:url(../images/main/img_visual02.jpg); }
    #visual .visualList a.visual03 { background-image:url(../images/main/img_visual03.jpg); }
    #visual .visualList a.visual04 { background-image:url(../images/main/img_visual04.jpg); }
    #visual .visualList a.visual05 { background-image:url(../images/main/img_visual05.jpg); }
    #visual .visualList a.visual06 { background-image:url(../images/main/img_visual06.jpg); }
    #visual dl { min-height:4.8em; margin-top:60%; padding:5% 16% 10%; background:#a62304; text-align:center; z-index:20; }
    #visual dl dt { padding-bottom:12px; font-size:30px; font-weight:bold; }
    #visual dl dd { display:inline; padding-bottom:0; font-size:18px; font-weight:200; letter-spacing:-1px; }
    #visual dl dd b { display:none; }
    #visual dl dd i { display:inline-block; padding:0 2px; }
    #visual dl dd.btn { display:none; }
    .visualControl { position:absolute; left:0; bottom:5%; width:100%; background:none; }
    .visualNum { width:100%; text-align:center; font-size:0; }
    .visualNum li { display:inline; }
    .visualNum li a { display:inline-block; width:12px; height:12px; margin:0 3px; background:url(../images/main/num_visual.png) center no-repeat; padding:0; text-indent:-9999px; overflow:hidden; }
    .visualNum li a.active { background:url(../images/main/num_visual_on.png) center no-repeat; }
    .visualBtn { background:none; border-top:none; font-size:0; }
    .visualBtn li { display:inline; }
    .visualBtn li div { display:none; }
    .visualBtn li a { position:absolute; bottom:280%; display:inline-block; width:39px; height:39px; background-position:center; background-repeat:no-repeat; background-size:auto 70%; }
    .visualBtn li a.bx-prev { left:3%; background-image:url(../images/main/btn_m_prev.png); }
    .visualBtn li a.bx-next { right:3%; background-image:url(../images/main/btn_m_next.png); }
    #arimy { margin:0 3% 35px; border-color:#eee; }
    .arimyList a { height:auto; overflow:hidden; }
    .arimyList dt { float:left; width:46%; margin-left:1px; }
    .arimyList dt img { width:100%; border-right:1px solid #969696; }
    #arimy dt span.icon { background-size:24%; }
    #arimy dd {  margin-left:49%; padding:4% 1%; font-size:18px; line-height:1.4; }
    #arimy dd span { padding-bottom:10px; }
    #arimy dd span.dotTxt { max-height:2.9em; font-weight:normal; }
    #arimy dd span.btn { font-size:16px; }
    .arimyControl { position:absolute; right:0; bottom:0; min-width:110px; }
    .arimyControl ul { background:#fff; border-top:1px solid #e5e5e5; border-left:1px solid #e5e5e5; font-size:0; }
    .arimyControl ul li a,
    .arimyControl ul li p#slide-counter { display:inline-block; min-width:30px; height:40px; line-height:40px; box-sizing:border-box; background-size:auto 50%; font-size:20px; }
    .arimyControl ul li a.bx-prev { background-image:url(../images/main/btn_m_arimy_prev.gif); }
    .arimyControl ul li a.bx-next { background-image:url(../images/main/btn_m_arimy_next.gif); }
    #notice { margin-bottom:20px; padding:20px 4%; background:#ebebeb; border:none; }
    #notice h3 a { width:auto; margin:0 2.6%; padding:4px 3px; background:none; border:none; color:#000; font-size:18px; }
    #notice h3:first-child a { margin-left:4px;}
    #notice h3 a.on { margin-top:0; height:auto; line-height:1; background:none; border-bottom:2px solid #b42803; color:#b42803; }
    #notice div { width:100%; background:none; border:none; max-height:200px;}
    #notice div ul li { margin:15px 15px 8px; background-position:left 12px; font-size:18px; }
    #notice div .btnMore { right:5%; top:14px; }
    #notice div .btnMore a { width:16px; background:#f3f3f3; border:1px solid #c2c2c2; padding:12px; }
    #notice .btnMore1 { right:5%; top:14px; }
    #notice .btnMore1 a { width:16px; background:#f3f3f3; border:1px solid #c2c2c2; padding:12px; }
    .otherMenu { margin:0 8%; }
    .otherMenu .otherMenuList a { font-size:16px; }
    .otherMenu .otherMenuList i { width:70px; height:70px; background-size:60%; }
    .otherMenu .owl-carousel .owl-nav button,
    .otherMenu .owl-carousel .owl-nav span.counter { min-width:30px; line-height:40px; height:40px; vertical-align:middle; color:#000; font-size:20px; }
    .arimyControl ul li p#slide-counter,
    .otherMenu .owl-carousel .owl-nav span.counter { padding:0 8px; }
    .otherMenu .owl-carousel .owl-nav button.owl-prev { background-image:url(../images/main/btn_m_arimy_prev.gif); }
    .otherMenu .owl-carousel .owl-nav button.owl-next { background-image:url(../images/main/btn_m_arimy_next.gif); }
    /* footer */
    .footer h2,
    .footer .siteGo { display:none; }
    .sponSite { position:static; right:0; top:0; line-height:60px; background:#505050; text-align:center; }
    .sponSite li { display:inline; }
    .sponSite li a { display:inline-block; width:30%; padding:0 2%; background:url(../images/common/line_foot.png) left center no-repeat; text-align:center; box-sizing:border-box; vertical-align:middle; }
    .sponSite li:first-child a { background:none; }
    .sponSite li a img.mobileMode { display:inline-block !important; }
    .footer address,
    .footer p.copyright { max-width:none; margin-left:0; color:#cacaca; font-size:14px; }
    .footer address { padding-top:20px; padding-bottom:10px; }
    .footer address i { display:block; height:0; text-indent:-9999px; overflow:hidden; }
    .footer b { display:none; }
    .footer p.copyright { padding-bottom:20px; color:#c1c1c1; }
}
@media all and (max-width:460px) {
    #header h1,
    p.btnLnb button,
    p.btnSearch a { line-height:70px; }
    p.btnLnb button img { width:50%; }
    p.btnSearch a img { width:60%; }
    #visual dl { padding:5% 13% 10%; }
    .visualBtn li a.bx-prev { left:0; }
    .visualBtn li a.bx-next { right:0; }
    #visual dl dt { padding-bottom:8px; font-size:20px; }
    #arimy dd span.btn { font-size:14px; }
    #notice div ul li,
    #visual dl dd,
    #arimy dd,
    .arimyControl ul li p#slide-counter { font-size:16px; }
    .otherMenu { margin:0 3%; }
    .otherMenu .otherMenuList a { font-size:14px; }
    .visualBtn li a { bottom:220%; }
    #notice div ul li { margin:15px 10px 8px; }
}
@media all and (max-width:340px) {
    .otherMenu { margin:0 4px; }
    #arimy dd { font-size:14px; }
    #arimy dd span { padding-bottom:7px; }
    #arimy dd span.btn { font-size:13px; }
}