@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700|Roboto:300,400,500,700&subset=korean);
#skip .main { display:none; }

/***contents***/
.intro { text-align:center; padding:20px 0; border:1px solid #d5d5d5; box-shadow:1px 3px 3px #e5e5e5; background:#fcfcfc url('/open_content/skydome/images/intro_bbg.gif') repeat-x left bottom; }
.introText{padding-bottom:15px; font-size:15px; font-family:'Noto Sans KR','Malgun Gothic','맑은고딕',sans-serif;letter-spacing:-0.5px;}
.intro p { text-align:left; margin:20px 4% 0; }
.history { padding-left:12px; padding-top:10px; }
.remodeling { overflow:hidden; margin-top:10px; }
.remodeling li { float:left; width:44%; text-align:center; }
.remodeling li:first-child { width:44%; padding-right:50px; margin-right:20px; background:url('/open_content/skydome/images/intro_point.gif') no-repeat right 100px; }
.remodeling li img { margin-bottom:10px; }
.intro_facility { overflow:hidden; text-align:center; }
.intro_facility>img { margin-bottom:10px; }
.intro_facility ul { float:left; margin-left:25px; }
.intro_shape { overflow:hidden; margin-left:2%; }
.intro_shape li { margin:1% 0px 0px; text-align:center; border:1px solid #ddd; box-shadow:-1px 1px 3px rgba(100,100,100,.1); }
.intro_shape li p.img { margin:20px 10px; }
.intro_shape li p.txt { margin-top:20px; line-height:32px; background:#f5f5f5; border-top:1px solid #ddd; font-weight:bold; font-size:12px; }
.offsite_photo li { margin:1% 4% 1% 2%; text-align:center; }
.intro_facility .facility_list {margin-left:8px;}
.intro_facility .facility_list li img {width:759px;}

.artbookArea {display:flex; flex-wrap:wrap; margin:15px 0 0; border:1px solid #ccc; border-top:3px solid #333;}
.artbookArea * {box-sizing:border-box;}
.artbookArea>div {padding:20px 25px;}
.artbookArea>div>p {font-size:18px; font-weight:600; color:#222; margin-bottom:20px;}
.artbookArea .space{position:relative; width:33.33%; }
.artbookArea .space:before {position:absolute; right:0; top:20px; bottom:20px; width:1px; background:#ccc; content:"";}
.artbookArea .space li {position:relative; padding-left:26px; margin-top:7px; font-size:15px;}
.artbookArea .space li:first-child {margin-top:0;}
.artbookArea .space li .alp {position:absolute; top:2px; left:0; text-align:center; width:17px; height:17px; color:#fff; font-weight:600; font-size:13px; line-height:17px; background:#ff5100;}
.artbookArea .space li .bogo {position:relative; padding-left:15px; color:#777;}
.artbookArea .space li .bogo:before {position:absolute; left:7px; top:3px; height:13px; width:1px; background:#ccc; content:"";}
.artbookArea .bookstore{width:66.66%;}
.artbookArea .bookstore ul {display:flex; flex-direction:column; flex-wrap:wrap; height:170px;}
.artbookArea .bookstore li {position:relative; padding-left:26px; margin-top:7px; width:50%; font-size:15px;}
.artbookArea .bookstore li:first-child {margin-top:0;}
.artbookArea .bookstore li .num {position:absolute; top:2px; left:0; text-align:center; width:17px; height:17px; color:#fff; font-weight:600; font-size:12px; line-height:17px; border-radius:50%; background:#008ebf;}
.artbookArea .etc {width:100%; border-top:1px solid #ccc;}
.artbookArea .etc ul {text-align:center;}
.artbookArea .etc ul li {position:relative; display:inline-block; padding-left:25px; margin:0 10px;}
.artbookArea .etc ul li:before {position:absolute; left:0; top:-3px; height:25px; width:25px; content:""; background:url(/open_content/skydome/images/ico_artbook.png) no-repeat; background-size:25px auto;}
.artbookArea .etc ul li.ic2:before {background-position:0 -25px;}
.artbookArea .etc ul li.ic3:before {background-position:0 -50px;}
.artbookArea .etc ul li.ic4:before {background-position:0 -75px;}
.artbookArea .etc ul li.ic5:before {background-position:0 -100px;}
.artbookArea .etc ul li.ic6:before {background-position:0 -125px;}
.artbookArea .etc ul li.ic7:before {background-position:0 -150px;}

.artbookPhoto {margin-top:10px;}
.artbookPhoto * {box-sizing:border-box;}
.artbookPhoto img {width:100%;}
.artbookPhoto ul {position:relative; padding-left:81%;}
.artbookPhoto ul li {margin-top:2%;}
.artbookPhoto ul li p {position:absolute; display:none; top:0; left:0; width:78%;}
.artbookPhoto ul li.on p {display:block;}
.artbookPhoto ul li a {display:block; position:relative;}
.artbookPhoto ul li a:after {position:absolute; left:0; top:0; bottom:0; right:0; content:""; background:rgba(0,0,0,.5); }
.artbookPhoto ul li.on a {border:2px solid #ff5100;}
.artbookPhoto ul li.on a:after {display:none;}


/*PC*/
@media all and (min-width:769px) { 
#top #nav>ul>li { margin-left:95px; }
.sub01 #container { background:url('/open_content/skydome/images/sub_visual01.jpg') no-repeat center top; }
.sub02 #container { background:url('/open_content/skydome/images/sub_visual02.jpg') no-repeat center top; }
.sub03 #container { background:url('/open_content/skydome/images/sub_visual03.jpg') no-repeat center top; }
.sub04 #container { background:url('/open_content/skydome/images/sub_visual04.jpg') no-repeat center top; }
}

/*1024*768*/
@media all and (max-width:1024px) { 
.intro_facility ul { margin-left:10px; }
.intro_facility .facility_list {margin-left:0px;}
}

/*TABLET~PC*/
@media all and (min-width:768px) { 
.history { padding-top:20px; padding-bottom:20px; background:url('/open_content/skydome/images/intro_history.jpg') no-repeat right center; }
.history2 { overflow:hidden; }
.history2 p { float:right; width:44%; }
.history2 p:first-child { float:left; padding-right:4%; border-right:1px dotted #ccc; }
.intro_shape li{ float:left; width:24%;  border-left:none; }
.intro_shape li:first-child { border-left:1px solid #ddd; }
.intro_shape li p.txt { line-height:35px; font-size:14px; }
.offsite_photo { overflow:hidden; }
.offsite_photo li { float:left; width:40%}
}

/*TABLET~MOBILE*/
@media all and (max-width:768px) { 
.intro>img { width:95%; }
.intro_facility ul { margin-left:0; }
.respond_table { width:100%; overflow-x:auto; }
.respond_table table { min-width:700px; }

.artbookArea {display:block;}
.artbookArea .space{width:100%; }
.artbookArea .space:before {display:none;}
.artbookArea .bookstore{width:100%; border-top:1px solid #ccc;}
.artbookArea .etc ul li {margin:5px 10px;}



}

/*MOBILE_MIN*/
@media all and (max-width:640px) { 
.remodeling li { float:none; width:99% !important; margin:0 0 20px; padding:0 !important; background:none !important; }
.intro_facility ul { float:none; }
}