/*-------------------------------------------------------------- >>> color-set light mint < #35c1d4 #178899 #195d66 #124b54 > dark mint #1685c7 : blue #900 : Dark Red / #000 #333 #666 #999 #e6e6e6 #f0f0f0 #fff : Gray Scale >>> TABLE OF CONTENTS: 1.0 Genericons 일반 - 1.1 Normalize 표준화 - 1.2 일반 요소 - 1.3 정렬 요소 (Float & Flex포함) - 1.4 이미지 플랙스 - 1.5 말풍선 요소 - 1.6 버튼 요소 - 1.7 아이콘 및 블릿 요소 2.0 공용 Layout - 2.1. HEADER - Top로고, Top메뉴, GNB 호출 버튼 - 2.2. GNB ( full menu ) - 2.3. 슬라이드 - 2.4 친구기업 배너 - 2.5 Footer - 2.6 Content 3.0 메인페이지 Layout - 3.1 메인 슬라이드 - 3.2 축제&코스 탭 4.0 서브페이지 Layout 5.0 카드리스트 - 5.1 카드 아이템 일반 - 5.1 Touch Image Gallery 6.0 콘텐츠 공통요소 - 6.1 헤더 - 6.2 탭 - 6.3 콘텐츠 바디 영역 일반 - 6.4 html에디터 출력부분 스타일 7.0 List 각종 목록 스타일 정의 - 7.1 비순차라스트 (파트너, 오디오가이드북, 설명) - 7.2 순차리스트 - 7.3 정의리스트 (연혁) - 7.4 특수리스트 (조직도,문의처) - 7.5 기타 리스트 관련 요소 8.0 게시판 및 게시판 응용 프로그램 9.0 페이지별 콘텐츠 개별요소 - 9.1 메인 콘텐츠 일반 - 9.2 메인-지도관련 - 9.3 축제-행사개요 - 9.6 코스 - 9.7 서브콘텐츠 개별요소 - 9.8 회원관련 >>> Medua Qurye - 기준 320px 420px 616px 780px 995px 1274px - rem변환 20 26.25 38.5 48.75 62.1875 79.625 >>> Z-index .cardlist(600) .cardlist .item(4) ----------------------------------------------------------------*/ @import url(font_nanumGothic.css); /*-------------------------------------------------------------- 1.0 Genericons 일반 ----------------------------------------------------------------*/ /* 1.1 Normalize 표준화 */ img { max-width:100%} html{overflow-y:scroll;margin:0;padding:0;border:0;font-size:.875em;font-weight:300} body{overflow:hidden;margin:0;padding:0;border:0} body, div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,dt,dd,li,fieldset,form,label,legend,caption,th,td,article,aside{margin:0;padding:0;border:0;vertical-align:baseline;font-family:"Nanum Gothic", "Malgun Gothic", "맑은고딕", AppleSDGothic, sans-serif} abbr,address,cite,code,del,dfn,em,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,ol,ul,table,tbody,tfoot,thead,tr,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-family:inherit;vertical-align:baseline; } article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block} a:link, a:hover, a:visited, a:active{text-decoration:none} h3{font-size:2em;font-weight:normal} h4{font-size:1.2857em;font-weight:normal} h5, h6 { font-size:1em} h3 strong, h4 strong{font-weight:bold} a.item_title{color:#000} a:link, a:visited{ color:#444} a:hover, a:active { text-decoration:underline} a, img { border:none} /* 1.2 일반 요소 */ .m-only{display:none} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} .wordkeep { word-break:keep-all !important} .nowrap { white-space:nowrap !important} .red, .red a{color:red!important} .black, .black a{color:#000!important} .bold { font-weight:700!important} /* 1.3 정렬 요소 (Float & Flex포함)*/ .float_left { float:left} .float_right { float:right} .floatLeft{float:left;width:50%;margin:0 auto} .floatLeft img{width:100%} @media (min-width:780px){ .pc_float_left { float:left} .pc_float_right { float:right} } .flex.center{display:flex;justify-content:center;flex-wrap:wrap} .flex.center .img:first-child{margin-right:20px} .flex.center .img:last-child{margin-left:20px} /* 1.4 이미지 플랙스 */ .img_flex { margin-top:15px; margin-bottom:15px; text-align:left} /*.img_flex.center {justify-content:center;}*/ .img_flex.banner { flex-wrap:wrap} .img_flex.banner a { display:inline-flex; justify-content:center;align-items:center;width:100px; margin:0 10px 10px} .img_flex.banner a img {max-width:100px; height:auto} @media (min-width:1273px) { .img_flex.x3 .img { display: flex; justify-content:center; align-content:center; width:33.333%; height:122px;overflow: hidden; } .img_flex.x3 .img img { max-height:100%; max-width:150%} .img_flex.x2 .img { display: flex; justify-content:center; align-content:center; width:50%; height:122px;overflow: hidden; } .img_flex.x2 .img img { max-height:150%; max-width:100%} } @media (max-width:588px){ .img_flex {display:block} .img_flex.banner {display:flex} .img_flex.x4 .img, .img_flex .img { display:block; width:100%;} .img_flex.x4 .img img, .img_flex .img img { width:100%} } /* 이미지 플랙스 대용 */ .img_list {margin-top:15px; margin-bottom:15px} .img_list+* { clear:both} .img_list .img { display:block; float:left; width:33.333%;} .img_list.col1 .img { width:100%} .img_list.col2 .img { width:50%} .img_list.col4 .img { width:25%} .img_list .img>img {width:100%; height:auto} @media (max-width:588px){ .img_list .img, .img_list.col2 .img {float:none; width:100%} .img_list.col4 .img {float:left; width:50%} } /* 1.5 말풍선 요소 */ .balloontext{position:relative;box-sizing:border-box;display:inline-block;min-width:7.272em;height:28px;margin-right:9px;border-radius:5px;border:1px solid #d7d7d7;line-height:28px;color:#58595b;text-align:center;font-size:0.777em;cursor:pointer} .balloontext.left:after{content:"";position:absolute;top:8px;left:-5px;width:5px;height:11px;background-image:url(base/balloon_left.png);background-repeat:no-repeat} .balloontext.right:after{content:"";position:absolute;top:8px;right:-5px;width:5px;height:11px;background-image:url(base/balloon_right.png);background-repeat:no-repeat} .balloontext span{color:#0aafed} .btn_basic{display:inline-block;background-color:fff;color:#0aafed; padding:.0 1em;border:1px solid #0aafed;border-radius:5px;font-weight:bold;font-size:1.214em;line-height:38px;text-align:center;margin:0 auto} /* 1.6 버튼 요소 */ .btnSet{display:flex;justify-content:center} .btnSet.left, .btnSet.pc_left {justify-content:flex-start;} p + .btnSet{ margin:10px 0} table + .btnSet {position:absolute; right:0; margin:14px 0} .btnSet a, .btnSet input[type=button] {display:block;margin:5px 2px;text-align:center} .btnSet.final{margin-top:10px; margin-bottom:60px} .btnSet.final a, .btnSet.final input[type=button]{line-height:30px;min-width:140px} a.min, input.min[type=button], button.min { padding:5px !important; font-size:.825em !important;line-height:16px !important} a.btn_olleBasic, input.btn_olleBasic[type=button], button.btn_olleBasic{padding:10px 5px;color:#FFF !important;font-weight:bold;border:0px;border-radius:3px;background:#0aafed;font-size:1.142em;line-height:20px} a.btn_olleBasic.orange, input.btn_olleBasic.orange[type=button], button.btn_olleBasic.orange{background:#f28021;} a.btn_olleBasic.dark, input.btn_olleBasic.dark[type=button], button.btn_olleBasic.dark{background:#222;} a.btn_olleLine, input.btn_olleLine[type=button]{box-sizing:border-box;padding:10px 5px;color:#0aafed;font-weight:bold;border:1px solid #0aafed;border-radius:3px;background:#fff;font-size:1.142em;line-height:20px} .item_list .item a.btn_olleBasic, .item_list .item input.btn_olleBasic[type=button]{display:inline-block;margin:3px 0 10px;padding:5px;font-size:1em; margin:10px 0 0} @media (max-width:62.1875rem){ a.btn_olleBasic, input.btn_olleBasic[type=button], button.btn_olleBasic{font-size:1.6vw;} } @media (max-width:48.75rem){ .btnSet.pc_left{justify-content:center} } @media (max-width:26.25rem){ table + .btnSet + .pagination, #list .paginationjs { padding-right:60px; text-align:left} table + .btnSet + .pagination a, #list .paginationjs a { display:inline-block; text-align:center} } /* 1.7 아이콘 및 블릿 요소 */ .btn_blit { position:relative; padding-left:30px;} .btn_olleBasic .btn_blit {margin-left:5px; margin-right:5px} .btn_icon { position:relative; width:24px;} .btn_blit:before, .btn_icon:before { content:""; position:absolute; top:calc(50% - 12px); left:0; width:24px; height:24px; background-position:50% 50%; background-size:24px 24px; background-repeat:no-repeat; } .icon_plus:before { background-image:url(base/btn_icon_plus.png);} .icon_write:before { background-image:url(base/btn_icon_write.png);} .icon_cancle:before { background-image:url(base/btn_icon_cancle.png);} .icon_home:before { background-image:url(base/btn_icon_home.png);} .icon_check:before { background-image:url(base/btn_icon_check.png);} .icon_list:before { background-image:url(base/btn_icon_list.png);} .icon_jump:before {background-position:50% 0; background-size:24px auto; background-image:url(base/btn_icon_jump.png);} @media (max-width:48.75rem){ .btn_olleBasic.m_onlyIcon { box-sizing:border-box; border-radius:50%; padding:5px; width:40px; height:40px; line-height:30px;} .btn_olleBasic.m_onlyIcon .btn_blit { display:block;margin:0; left:calc(50% - 12px); width:0px; overflow:hidden; white-space:nowrap} } @media (max-width:588px){ .m_center{text-align:center} } /*-------------------------------------------------------------- 2.0 공용 Layout ----------------------------------------------------------------*/ body, body.main, body.sub{position:relative;display:flex;flex-wrap:wrap} /* 2.1. HEADER - Top로고, Top메뉴, GNB 호출 버튼 */ #header{position:fixed;z-index:760;right:0;left:0;top:0;width:100%;height:0px;overflow:visible} .main #header{ box-sizing:content-box; height:40px;background-color:rgba(0,0,0,.8)} .main #header>.innerWrap { position:relative} .toplogo{position:absolute;width:1px;height:1px;padding:0;margin:-100px;clip:rect(0,0,0,0);border:0;overflow:hidden} .topmenu{float:right;display:flex;justify-content:flex-end;align-items:center;height:40px;font-size:1em;line-height:40px} .topmenu>li{position:relative;color:#fff;font-size:0.857em;height:40px;line-height:40px} .topmenu>li a{color:#fff} .topmenu>li>a{position:relative;display:block;height:40px} .topmenu li{list-style:none} .topmenu .bt_login>a{padding-left:15px;padding-right:10px} .topmenu .bt_user>a{padding-left:15px;padding-right:10px} .topmenu .bt_lang>a{padding-left:10px;padding-right:25px} .topmenu .bt_login>a:before, .topmenu .bt_user>a:before {content:"";position:absolute;left:0;top:0;display:block;width:15px;height:40px;background-repeat:no-repeat;background-position:50% 50%;background-size:15px auto} .topmenu .bt_login>a:before{background-image:url(base/header_lock.png)} .topmenu .bt_user>a:before{background-image:url(base/header_lockopen.png)} .topmenu .bt_login>a>span , .topmenu .bt_logoout>a>span{padding-left:5px} .topmenu .bt_lang{position:relative} .topmenu .bt_lang:before{content:"";position:absolute;top:14px;left:0;display:inline-block;width:1px;height:12px;background-color:#e6e6e6} .topmenu .bt_lang>a{background:url(base/header_btn_more.png) no-repeat calc(100% - 10px) 50%} .topmenu>li>ul{position:absolute;right:0px;top:40px;display:none;text-align:center} .topmenu>li>ul:before{content:"";position:absolute;top:-7px;right:calc(50% - 7px);display:block;width:14px;height:7px;background:url(base/header_moremenu.png)} .topmenu>li.bt_lang>ul{right:5px} .topmenu>li.bt_user>ul:before{right:12px} .topmenu>li>ul li{padding:0 10px;height:30px;background-color:rgba(0,0,0,.6);line-height:30px;white-space:nowrap} .topmenu>li>ul li.selected{background-color:#f38020;font-weight:700} .topmenu>li>ul li:hover{background-color:#000} .topmenu .bt_menu{width:40px;height:40px;background:url(base/header_btn_gnbopen.png) no-repeat 50% 100%} /* 2.2. GNB ( full menu ) */ #gnb{position:absolute;z-index:770;width:calc(100% - 40px);height:0;padding-left:20px;padding-right:20px;padding-bottom:0;background-color:rgba(0,0,0,0.98);color:#fff; font-size:1.142em;overflow:hidden;-webkit-transition:height 1.5s;transition:height 1.5s} #gnb.show{height:calc(54em + 164px)} #gnb a{color:#fff} #gnb li{list-style:none} /* 2.2.1 GNB Header */ #gnb_header{background-color:#000;height:40px} #gnb_header:before, #gnb_header:after{content:"";position:absolute;top:39px;display:block;height:1px;width:calc(50% - 6em);background-color:#2e2e2e} #gnb_header:before{left:0} #gnb_header:after{right:0} #gnb_header .menu_title{position:relative;top:17px;right:10px;text-align:center;font-size:2.857em;font-weight:100;line-height:40px} #gnb_header .clost_bt{position:absolute;top:10px;display:block;width:19px;height:19px;background-image:url(base/menu_close.png);background-repeat:no-repeat;background-position:50% 50%;background-size:100%} /* 2.2.2 GNB Body */ #gnb_body{display:flex;justify-content:space-between;flex-direction:row;flex-wrap:wrap;align-items:top;padding:4em 0 0} #gnb_body>.menu,#gnb_body>.menu_box{width:calc(33.333% - 14px)} #gnb_body>.menu_box>.menu{width:100%} #gnb_body .menu:last-child{position:relative;width:100%;border-bottom:1px solid #fff} #gnb_body .mypage{text-align:center;padding:8px 0 ;border-bottom:1px solid #fff} #gnb_body .mypage img{position:static;margin:15px 0px} #gnb_body .lang {position:static} #gnb_body .mypage p{margin:0 5px} #gnb_body .mypage a {display:inline-block;width:80px;height:40px;margin:20px 5px 20px 5px;border-radius:5px;border:1px solid #fff;text-align:center;font-size:1.0714em;line-height:40px; letter-spacing:-.05em; color:#fff;} #gnb_body .mypage a:hover,#gnb_body .mypage a:active {border:1px solid #f28125;color:#f28125; text-decoration:none} #gnb_body .menu h3{font-size:2em;border-bottom:3px solid #fff;padding-bottom:calc(.5em - 3px);box-sizing:border-box;font-weight:bold; line-height:1em} #gnb_body .depth2item{display:flex;justify-content:space-between;padding:.5em 0;border-bottom:1px solid #fff;line-height:calc(1.5em - 1px)} #gnb_body .depth2item>a{text-align:left;font-weight:700; white-space:normal; max-width:100%; overflow:hidden;} #gnb_body .depth2item.m_folding>a{width:9em} #gnb_body .depth2item>ul{width: calc(100% - 9em);text-align:left} #gnb_body .depth3list>il {line-height:1.5em} #gnb_body .menu li i img{float:left;display:block;margin-right:8px;margin-top:4px} #gnb_body .menu_box .menu:nth-child(n+2){margin-top:3em} /* 2.2.3 GNB 버튼 & 링크 */ #gnb a.active{color:#f28125} #gnb .sideBtn_set {margin-top:20px; text-align:right} #gnb .btn_olleLine {display:block;height:50px;line-height:50px;padding:0 10px;background-color:transparent;border:1px solid #f28125;color:#f28125;text-align:center;font-size:1.0714em;} #gnb .btn_olleLine .icon_jump {display:inline-block;width:200px;} #gnb .btn_olleLine .icon_jump:before {background-position: 50% -100px} #gnb .btn_olleLine:hover, #gnb .btn_olleLine:active {border:1px solid #fff;color:#fff;text-decoration:none} #gnb .btn_olleLine:hover .icon_jump:before, #gnb .btn_olleLine:active .icon_jump:before {background-position: 50% -50px} #gnb_header .clost_bt{right:10px} #gnb .clost_bt_bottom {display:block;width:64px;height:64px;margin:30px auto;background-image:url(base/menu_close_bottom.png);background-repeat:no-repeat;text-align:center;overflow:hidden;cursor:pointer} #gnb .clost_bt_bottom span{font-size:0.857em;padding-top:32px;display:block} @media (min-width:1273px){ #gnb.show{height:calc(53.412em + 227px)} #gnb_body {width:1233px; margin-left:auto; margin-right:auto} #gnb_body .mypage{text-align:center;padding:8px 0 ;border-bottom:1px solid #fff} #gnb_body .mypage img{position:static;margin:15px 0px} #gnb_body .lang {position:static} } @media (min-width:48.75rem) and (max-width:964px){ #gnb_body { position:relative} #gnb.show{height:calc(73em + 164px)} #gnb_body>.menu,#gnb_body>.menu_box{width:calc(50% - 10px)} #gnb_body>.menu_box:nth-child(2) .menu:first-child{position:absolute; left:0; top:51em; width:calc(50% - 10px)} #gnb_body>.menu_box:nth-child(2) .menu:last-child{ margin-top:0} #gnb_body>.menu_box:last-child {position:relative; width:100%; display:flex; justify-content:space-between} #gnb_body>.menu_box:last-child .menu {width:calc(50% - 10px); margin-top:42px} #gnb_body>.menu_box:last-child .menu:nth-child(2) {margin-top:15px} #gnb .sideBtn_set { position:absolute; top:220px;left:0; width:calc(50% - 10px);} #gnb .clost_bt_bottom { position:relative} } @media (max-width:48.75rem){ #gnb.show{height:100%} #gnb_header{background:url(../images/common/logo.png) no-repeat 0 50%;background-size:37px 30px} #gnb_header:before, #gnb_header:after, #gnb_header .menu_title{display:none} #gnb_body{padding:0} #gnb_body .menu_box .menu:nth-child(n+2){margin-top:0} #gnb_body li.depth2item { flex-wrap:wrap} #gnb_body .menu.m_folding ul,#gnb_body ul.depth3list,#gnb_body>.menu:last-child h3{display:none} #gnb_body .menu.m_folding.show>ul,#gnb_body li.depth2item.show ul{display:block} #gnb_body li.depth2item.m_folding>a{ width:calc(100% - 25px); padding-left:25px; background:url(base/gnb_morebtn_1.png) no-repeat 0% 50%; background-size:18px 18px} #gnb_body li.depth2item.m_folding.show>a{word-break:keep-all;background:url(base/gnb_moreclosebtn_1.png) no-repeat 0% 50%; background-size:18px 18px} #gnb_body .depth2item>ul{width:calc(100% - 25px); padding-left:25px} #gnb .menu h3{width:100%;height:50px;padding-bottom:0;background:url(base/gnb_morebtn_1.png) no-repeat 100% 50%;font-size:1.4285em;line-height:50px; } #gnb li.depth2item>a{display:block;width:100%} #gnb li.depth2item.course{display:block} #gnb li.depth2item.course.show ul{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;margin-top:10px} #gnb li.depth2item.course li{width:47%;white-space:nowrap;overflow:hidden} #gnb_body>.menu:first-child{border-top:3px solid #fff} #gnb .menu.m_folding.show h3{background:none} #gnb .menu, #gnb .menu_box{width:100%} #gnb .menu.show{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:3px solid #fff} #gnb .menu.show h3{width:4em;border-bottom:0;font-size:1.2em;line-height:1.428em;padding:7px 0;font-weight:900} #gnb .menu.show>ul{width:calc(100% - 5.2em)} #gnb .menu.show li.depth2item:last-child{border-bottom:0} #gnb .menu.show li.depth2item>ul{border-bottom:0} #gnb_body .mypage{padding:20px 0 20px 5em; position:relative; text-align:left;} #gnb_body .mypage>img{width:50px;height:50px; position:absolute; top:20px; left:0px; margin:0px;} #gnb_body .mypage a{height:26px;margin:10px 2px 0;font-size:1em;line-height:26px} #gnb_body .mypage .name{ padding-left:0px; display:inline-block; width:auto;} #gnb_body .lang{position:static;border-top:1px solid #fff} #gnb_body li.lang.depth2item.m_folding>a{width:4em;background:none} #gnb_body li.lang.depth2item.m_folding>ul{display:flex;width:calc(100% - 5em);justify-content:space-between} #gnb_body li.lang.depth2item.m_folding>ul li{width:auto} #gnb .sideBtn_set {position:relative; left:0;top:0; width:100%; margin-top:10px;} } /* 2.3. 슬라이드 */ #myCarousel{width:100%;height:100%} #myCarousel .looper-inner, #myCarousel .item{width:100%;height:100%;text-align:center;background-position:50% 0%;background-repeat:no-repeat; background-attachment:fixed;} #myCarousel .item .wrap{display:inline-block;margin:0 auto} #myCarousel .carousel-nav{position:absolute;z-index:3;left:0;width:100%;height:45px} #myCarousel .looper-control{position:absolute;display:block;width:82px;height:42px;background-position:50% 50%;background-repeat:no-repeat} #myCarousel .looper-control span{display:none} #myCarousel .looper-control.left{left:15px;background-image:url(../images/common/ctrl_btn_prev.png)} #myCarousel .looper-control.right{right:15px;background-image:url(../images/common/ctrl_btn_next.png)} #myCarousel .looper-nav li{display:inline-block;list-style:none;margin:0 15px} #myCarousel .looper-nav li a{display:inline-block;width:11px;height:11px;border-radius:6px;background-color:#fff} #myCarousel .looper-nav li.active a{background-color:#f38020} #myCarousel .looper-nav li a span{display:none} /* 2.4 친구기업 배너 */ #friendBnZone{position:relative;width:100%;padding-top:30px;padding-bottom:30px;border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6} #friendBnZone h3{position:absolute;top:0;left:calc(50% - 27em);width:10em;max-height:40px;background-color:#e1e1e1;font-size:1em;color:#535353;text-align:center;line-height:30px;font-weight:700} #friendBnZone h3:before, #friendBnZone h3:after{content:"";position:absolute;top:0;width:20px;height:100%;background-repeat:no-repeat;background-position:50% 100%} #friendBnZone h3:before{left:-18px;background-image:url(base/friendBn_title_left.png)} #friendBnZone h3:after{right:-18px;background-image:url(base/friendBn_title_right.png)} #friendBnZone ul{position:relative;display:flex;flex-wrap:wrap;justify-content:flex-start;margin-left:calc(22em - 12px);list-style:none} #friendBnZone li{width:calc(20% - 9px); height:31px; padding:10px 0; margin-left:9px; text-align:center} #friendBnZone li img{max-height:31px} #friendBnZone li.selected{position:absolute;left:-22em;width:22em;height:62px;padding:42px 0 0;text-align:center} #friendBnZone li.selected img{max-height:62px;} @media (min-width:1273px){ #friendBnZone h3{left:calc(50% - 38em)} #friendBnZone li {width:calc(12.5% - 12px);margin-left:12px} #friendBnZone li.selected{padding:25px 0 0} } @media (min-width:48.75rem) and (max-width:964px){ #friendBnZone h3{left:calc(50% - 23.5em)} #friendBnZone ul {margin-left:233px} #friendBnZone li {width:calc(25% - 12px);margin-left:12px} #friendBnZone li.selected{left:-245px;width:220px} } @media (max-width:48.75rem){ #friendBnZone{margin-bottom:0;padding-bottom:0} #friendBnZone h3{left:calc(50% - 5em)} #friendBnZone ul{display:flex;margin-left:0 ;margin-top:90px;margin-bottom:30px} #friendBnZone.m_hidden {border-bottom:0} #friendBnZone.m_hidden ul{display:none} #friendBnZone li.selected{top:-65px;left:0;right:0;width:100%;padding:0} } /* 2.5 Footer */ #footer{padding-top:20px;padding-bottom:20px;color:#666;background-color:#fff} #footer h1{display:inline-block; vertical-align: middle } #footer .copyright{display:inline-block;margin-left:10px; width:calc(100% - 270px); vertical-align: middle} #footer .footermenu { margin-bottom:10px} #footer .footermenu a{position:relative;display:inline-block;padding:0px 8px;color:#666;font-weight:bold;font-size:0.857em} #footer .footermenu a:before{content:"";position:absolute;top:3px;left:-2px;display:block;height:8px;border-left:1px solid #c2c2c2} #footer .footermenu a:first-child{padding-left:0px} #footer .footermenu a:first-child:before{border:0px} #footer .copyright address{display:block; line-height:16px;font-size:0.857em; } #footer .copyright span{font-size:0.917em; display:inline-block; white-space: nowrap} #footer .icon{display:inline-block; vertical-align:top; /*2018.01.17*/ margin:10px 10px 0 117px} #footer .icon img{margin:0px 5px} #footer .icon img:last-child{margin-right:0px} /* 2.6 Content */ .content{position:relative;box-sizing:border-box;padding-bottom:0;border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6;overflow:hidden} .main .content{border-top:1px solid #e6e6e6} .content_header{position:relative;width:93.75%;margin:0 auto;border-bottom:1px solid #c0c0c0} .content_header:last-child{border-bottom:none} .content[data-depth="2"] .content_header{border-bottom:none} /*-------------------------------------------------------------- 3.0 메인페이지 Layout ----------------------------------------------------------------*/ /* 3.1 메인 슬라이드 */ .main_slide{position:relative;width:100%; height:747px;margin:0;overflow:hidden} .main_slide #myCarousel .item .wrap{ position:relative;max-height:calc(100% - 120px - 11em);} .main_slide #myCarousel .carousel-nav{top:calc(747px - 5.7em)} .main_slide #myCarousel .looper-control{top:calc(3em - 374px)} .main_slide #myCarousel .looper-inner{background-color:#000} .main_slide #myCarousel .looper-inner, .main_slide #myCarousel .item {background-size:auto 747px;} .main_slide #myCarousel .item .wrap img { position:absolute;top:-10px; left:calc(50% - 960px); height:747px; max-width: 1920px} /* 3.2 축제&코스 탭 */ .main_tab{position:absolute;z-index:700;left:0;right:0;top:calc(747px - 50px);width:100%;background-color:rgba(0,0,0,0.4)} .main_tab>.innerWrap{display:flex;} .main_tab a{position:relative; float:left;display:block;width:50%; height:50px;Color:#fff;text-align:center;font-size:1.57em;font-weight:700;line-height:50px;transition:width linear 0.3} .main_tab a.course{display:none} .main_tab.on_fastival a.fastival{background-color:rgba(243,128,32,0.9)} .main_tab.on_olle a.olle{background-color:rgba(69,170,228,0.9)} .main_tab.on_course a.fastival{width:33.333%} .main_tab.on_course a.olle{width:33.333%;margin-right:13px;background-color:rgba(0,0,0,.7)} .main_tab.on_course a.olle:after{content:"";position:absolute;top:0;left:100%;display:block;width:13px;height:100%;background:url(base/main_tab_more.png) no-repeat 100% 50%} .main_tab.on_course a.course {display:block;width:calc(33.333% - 13px);background-color:rgba(139,199,37,0.9)} .main_tab.on_course a.course:before{content:"";position:absolute;top:0;right:100%;display:block;width:13px;height:100%;background:url(base/main_tab_course.png) no-repeat 100% 50%} /* 3.3 카드 분류 */ .main_category{width:100%;height:75px;background-color:#fff; border-top:1px solid #e6e6e6} .main_category>.innerWrap{display:flex;} .main_category a:hover, .main_category a.active{background-color:#e6e6e6;;font-weight:900} .main_category .quick_link a.link_prepare{background-image:url(layout/main_category_new_01.png)} .main_category .quick_link a.link_tip{background-image:url(layout/main_category_new_02.png)} .main_category .quick_link a.link_talk{background-image:url(layout/main_category_05.png)} .main_category .quick_link a.link_store{background-image:url(layout/main_quick_store.png)} .main_category .quick_link a.link_sobang{background-image:url(layout/main_quick_01.png)} .main_category .quick_link a.link_stay{background-image:url(layout/main_quick_02.png)} .main_category .quick_link a.link_lounge{background-image:url(layout/main_quick_03.png)} .main_category .quick_link a.link_support{background-image:url(layout/main_quick_04.png)} .main_category .quick_link a.link_supportCom{ width:50px;background-image:url(layout/main_category_new_03.png)} .main_category .quick_link a.link_notice{background-image:url(layout/main_category_01.png)} .main_category .quick_link a.link_help{background-image:url(layout/main_quick_help.png)} .main_category a{ float:left; display:block;width:60px;padding:34px 0 5px; line-height:24px; border-radius:5px;background-position:50% 3px;background-repeat:no-repeat;background-size:47px auto;font-size:0.85714em; color:#444;vertical-align:bottom;text-align:center; letter-spacing:-0.03em} .main_category a span {display:inline-block; line-height: 12px; vertical-align: middle} .main_category .quick_link {width:100%;border-left:1px solid #e6e6e6;padding:7px 0;border-right:1px solid #e6e6e6; } .main_category .quick_link a { margin-left:calc(4.16% - 27.5px); margin-right:calc(4.16% - 27.5px)} .main_category .quick_link a:nth-child(1){margin-left:calc(8.32% - 55px)} .main_category .quick_link a.link_talk { width:70px} .main_category .quick_link a.link_support{width:50px} .main_category .quick_link a.link_talk { width:70px} .main_category .quick_link a.link_support{width:50px} @media (max-width:48.75rem) and (min-width:588.1px) { .main_category {display:block; height: 149px;} .main_category>.innerWrap{ flex-wrap:wrap} .main_category a{font-size:0.85714em;padding:38px 0 5px; background-size:47px auto; } .main_category .quick_link{width:100%;background-color:#f2f2f2; } .main_category .quick_link a { width:70px !important; margin-left:calc(7.1428% - 30px); margin-right:calc(7.1428% - 30px)} .main_category .quick_link a:nth-child(1){margin-left:calc(14.2856% - 60px)} .main_category .quick_link a:nth-child(7){margin-left:calc(21.4284% - 60px)} } @media (max-width:588px){ .main_category {display:block; height:216px; } .main_category>.innerWrap{ flex-wrap:wrap} .main_category a{font-size:0.85714em;padding:38px 0 5px; background-size:47px auto; } .main_category .quick_link{width:100%;background-color:#f2f2f2; } .main_category .quick_link a:nth-child(1), .main_category .quick_link a { margin-left:calc(12.5% - 30px); margin-right:calc(12.5% - 30px)} .main_category .quick_link a:nth-child(5){margin-left:calc(25% - 30px)} } /*-------------------------------------------------------------- 4.0 서브페이지 Layout ----------------------------------------------------------------*/ /* 4.1 상단 서브 Navi Bar */ #sub_navi{position:fixed;z-index:710;left:0;right:0;top:0;width:100%;height:2.857em;max-height:2.857em;background-color:rgba(0,0,0,0.8);overflow:visible} #sub_navi>.innerWrap {display:flex;align-items:center;height:2.857em;max-height:2.857em;} #sub_navi a{background-position:50% 50%;background-repeat:no-repeat;color:#fff;font-size:1.142em} #sub_navi>div>a{position:relative;top:-1px;width:23px;height:24px} #sub_navi>div>a.home{display:block;background-image:url(base/navi_home.png)} #sub_navi>div>a.back{display:none;background-image:url(base/navi_back.png)} #sub_navi>div>a>span{display:none} #sub_navi div[data-depth]{position:relative;margin-left:10px;overflow:hidden;overflow:visible} #sub_navi div[data-depth]:before{content:"";position:relative;top:1px;display:inline-block;width:14px;height:14px;background:url(base/navi_next.png) no-repeat 50% 50%} #sub_navi div[data-depth='0']:before{display:none} #sub_navi div[data-depth]>a{display:inline-block} #sub_navi .selectmenu{padding:0.2em 10px} #sub_navi .other{position:relative;top:2px;width:14px;height:14px;background:url(base/navi_dropdown.png) no-repeat 50% 50%} #sub_navi .fullmenu{position:absolute;left:24px;top:2.3em;display:none;min-width:calc(100% - 32px);padding:10px 14px;background-color:rgba(0,0,0,0.8);line-height:2em} #sub_navi .fullmenu li{list-style:none;white-space:nowrap} /* 4.2 퀵메뉴 */ .sub_quick{position:absolute; z-index:500;top:204px;left:calc(50% - 33em); right:calc(50% - 33em); text-align: center} .sub_quick a{display:inline-block;width:94px;height:94px;background-repeat:no-repeat} .sub_quick .item_01{background-image:url(../images/common/quicklink_01.png)} /*소녀방앗간*/ .sub_quick .item_02{background-image:url(../images/common/quicklink_02.png)} /*올레스테이*/ .sub_quick .item_03{background-image:url(../images/common/quicklink_03.png)} /*간세라운지*/ .sub_quick_flag{position:absolute;z-index:550;top:399px;right:calc(50% - 32.714em)} .sub_quick_flag a { display:inline-block; width:1em; padding:10px calc(16px - .5em) 50px;margin-left:5px; background-position:50% 100%; text-align:center; color:#fff; font-weight:700} .sub_quick_flag a:nth-child(1){margin-left:0; background-image:url(layout/linkflag_blue.png)} .sub_quick_flag a:nth-child(2){background-image:url(layout/linkflag_orange.png)} /* 4.3 슬라이드 이미지 */ #sub_slide{width:100%;height:400px;margin:0;overflow:hidden} #sub_slide #myCarousel .item .wrap{max-height:calc(100% - 120px - 11em);padding-top:220px} #sub_slide #myCarousel .carousel-nav{top:325px} /* 4.4 서브 탭 */ #sub_tab{position:absolute;/*display:none;*/z-index:700;left:0;right:0;top:350px;width:100%;text-align:center; } #sub_tab .innerWrap {display:none} #sub_tab.on, #sub_tab .innerWrap.on{ display:block} #sub_tab a{display:inline-block; min-width:80px; max-width:170px; padding:0 10px; background:#27aae1;border-top-left-radius:5px;border-top-right-radius:5px;color:#fff;font-size:1.1428em;line-height:50px;text-align:center;white-space:nowrap;overflow:hidden; text-overflow:ellipsis} #sub_tab a>span { display:inline-block; line-height:18px; vertical-align: middle; white-space: normal} #sub_tab a.selected{color:#27aae1;font-weight:700;background:#fff no-repeat url(base/icon_subtab_on.png) 50% 100%} #sub_tab a.selected>span { position:relative; top:-3px;} /* 4.5 서브타이틀 */ .sub_title[data-depth="1"]{position:absolute;z-index:90;top:105px;left:calc(50% - 33em);right:calc(50% - 33em);text-align:center;color:#fff} .sub_title[data-depth="1"] p{font-size:1.428em} .sub_title[data-depth="1"] h1{font-size:3.5714em} @media (min-width: 79.625rem) { .sub_title[data-depth="1"]{top:165px;} .sub_quick{top:154px;text-align: right} #sub_tab a { max-width: 250px} } @media (max-width: 62.1875rem) and (min-width: 48.75rem) { #sub_tab a { max-width: 110px} } @media (max-width:48.75rem){ #sub_tab, #sub_tab.on{display:none} } /* 긴급공지 */ #urgent {position:fixed;z-index:761;right:0;left:0;top:0;width:100%; height:0px;overflow:hidden;background-color:#fff} #urgent.on { height:40px} #urgent .innerWrap {} .urgent_title {float:left; display:block; width:4em; height:40px; line-height:40px; padding:0 10px 0 25px; background:url(base/icon_urgent.png) no-repeat 0% 50%; font-weight:bold} .urgent_link { display:block; width:calc(100% - 4em - 35px); height:40px; line-height:40px; white-space:nowrap;text-overflow:ellipsis;overflow:hidden } .main #urgent.on + #header, #urgent.on + #header + #gnb + #sub_navi { height:80px; max-height:80px;} #urgent.on + #header .innerWrap, #urgent.on + #header + #gnb + #sub_navi .innerWrap{ position:relative; top:40px} .popupLayer.modal, .popupWindow.modal{content:"";position:fixed;z-index:900;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.2);min-width:320px} .popupLayer>div, .popupWindow>div{position:absolute;z-index:901} .popupLayer.mini>div, .popupWindow.mini>div{top:15px;left:calc(50% - 300px);width:600px;min-height:100px;background-color:#fff;border-radius:10px;box-shadow:0 0 10px #000} .popupLayer.x-mini>div, .popupWindow.x-mini>div{top:15px;left:calc(50% - 300px);width:400px;min-height:100px;background-color:#fff;border-radius:10px;box-shadow:0 0 10px #000} .popupCloser{position:absolute;top:5px;right:10px;text-decoration:none} .popupCloser:after{content:"✖";width:40px;height:40px;line-height:30px;text-align:center;color:#808286;font-size:20px} .popupHeader{width:calc(100% - 50px);line-height:40px;background-color:#f2f2f2;border-top-left-radius:10px;border-top-right-radius:10px;padding:0 40px 0 10px} .popupTitle{width:100%; font-size:1em; white-space:nowrap;text-overflow:ellipsis;overflow:hidden} .popupBody{padding:20px;text-align:center} .popupBody .item_title{margin:20px 0; color:#27AAE1;font-weight:bold} .popupBody p{line-height:1.4em;margin:.3em 0;color:#808286} .popupBody p>strong{font-weight:bold;color:#000} .popupWindow .popupContent{text-align:center;padding:20px} .popupWindow h1{padding:10px} .popupWindow .btnSet.final{margin-bottom:0px;margin-top:30px} .popupWindow .popupFooter{margin:20px -20px -20px; padding:10px; background-color: #f0f0f0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; text-align:right; line-height: 26px;} .popupWindow .popupFooter>label {float:left; margin-right: 20px;} .popupWindow .popupFooter input, .popupWindow .popupFooter button { vertical-align: middle} @media (max-width:640px){ .popupWindow h1{padding:0px} .popupWindow h1 img { max-height: 50px} .popupLayer.mini>div, .popupWindow.mini>div{top:15px;left:20px;width:calc(100% - 40px)} .popupBody{padding:10px} .popupWindow .btnSet.final{margin-top:10px} } .popupLayer.x-mini>div, .popupWindow.x-mini>div{top:15px;left:calc(50% - 200px);width:400px;min-height:100px;background-color:#fff;border-radius:10px;box-shadow:0 0 10px #000} .popupLayer.x-mini h1, .popupWindow.x-mini h1{padding:0px} .popupLayer.x-mini h1 img, .popupWindow.x-mini h1 img { max-height: 50px} .popupWindow.x-mini .popupBody{padding:10px 10px 0 10px} .popupWindow.x-mini .btnSet.final{margin-top:10px} @media (max-width:430px){ .popupLayer.x-mini>div, .popupWindow.x-mini>div{top:15px;left:15px;width:calc(100% - 30px)} } /* 각종 입력서식에 대한 결과 창 */ .resultMsg{text-align:center;color:#808286;line-height:1.6em} .resultMsg>p{ margin:.5em 0} .resultMsg>p>strong{color:#000} .resultMsg>p:first-child, p.resultMsgTitle{margin:0 0 30px;font-size:1.5em;font-weight:bold;color:#000} .resultMsg>p:first-child>strong, p.resultMsgTitle>strong{color:#f28021} .resultMsg>ul{margin:30px 0;padding:20px;border:3px solid #e2e2e2} .resultMsg li{list-style:none;padding:5px 0} .resultMsg li:before{content:"";display:inline-block;width:10px;height:1.5em;margin-right:10px;background-image:url(base/blit_check.png);background-position:50% 85%;background-repeat:no-repeat} .resultMsg li>strong{color:#0aafed;text-decoration:underline;white-space:nowrap} .popupBody .resultMsg { line-height: 1.4em} .popupBody p.resultMsgTitle{ line-height:1.2em} @media (max-width:640px){ .popupBody p.resultMsgTitle{margin:0 0 15px;font-size:1.2em;} .popupBody p:nth-child(n+2){font-size: .9em} } /*** looper :슬라이드 Plugin 라이브러리 ***/ .looper{position:relative;z-index:1;line-height:1;width:auto;height:auto} .looper:focus{outline:0} .looper .looper-inner{overflow:hidden;height:auto;position:relative;z-index:2} .looper .item{display:none;position:relative;z-index:3} .looper .item.active, .looper .item.next, .looper .item.prev{display:block} .looper .item.active{top:0;left:0;z-index:4} .looper .item > img{display:block;line-height:1} .looper.xfade .looper-inner{height:100%} .looper.xfade .item{-webkit-transition:0.5s ease-in opacity;-moz-transition:0.5s ease-in opacity;-o-transition:0.5s ease-in opacity;transition:0.5s ease-in opacity;position:absolute;width:100%;opacity:0} .looper.xfade .item.go{opacity:1} .looper.xfade .item.active{opacity:1} .looper.xfade .item.active.go{opacity:0} .looper.slide.xfade .item{-webkit-transition:0.5s ease-in-out left, 0.5s ease-in opacity;-moz-transition:0.5s ease-in-out left, 0.5s ease-in opacity;-o-transition:0.5s ease-in-out left, 0.5s ease-in opacity;transition:0.5s ease-in-out left, 0.5s ease-in opacity} .looper.slide .item{-webkit-transition:0.5s ease-in-out left;-moz-transition:0.5s ease-in-out left;-o-transition:0.5s ease-in-out left;transition:0.5s ease-in-out left} .looper.slide .item.next,.looper.slide .item.prev{position:absolute;top:0;left:0;width:100%} .looper.slide .item.next{left:100%} .looper.slide .item.prev{left:-100%} .looper.slide .item.active.prev,.looper.slide .item.active.next{position:relative;left:0} .looper.slide .item.go{left:0} .looper.slide .item.go.active{left:-100%} .looper.slide .item.go.active.prev{left:100%} .looper.slide.right .item.next{left:-100%} .looper.slide.right .item.prev{left:100%} .looper.slide.right .item.go{left:0} .looper.slide.right .item.go.active{left:100%} .looper.slide.right .item.go.active.prev{left:-100%} .looper.slide.down .looper-inner{height:100%} .looper.slide.down .item{-webkit-transition:0.5s ease-in-out top;-moz-transition:0.5s ease-in-out top;-o-transition:0.5s ease-in-out top;transition:0.5s ease-in-out top} .looper.slide.down .item.next,.looper.slide.down .item.prev{left:0} .looper.slide.down .item.next{top:-100%} .looper.slide.down .item.prev{top:100%} .looper.slide.down .item.go{top:0} .looper.slide.down .item.go.active{top:100%;left:0} .looper.slide.down .item.go.active.prev{top:-100%} .looper.slide.down.xfade .item{-webkit-transition:0.5s ease-in-out top, 0.5s ease-in opacity;-moz-transition:0.5s ease-in-out top, 0.5s ease-in opacity; -o-transition:0.5s ease-in-out top, 0.5s ease-in opacity; transition:0.5s ease-in-out top, 0.5s ease-in opacity} .looper.slide.up .looper-inner{ height:100%} .looper.slide.up .item{ -webkit-transition:0.5s ease-in-out top;-moz-transition:0.5s ease-in-out top;-o-transition:0.5s ease-in-out top; transition:0.5s ease-in-out top} .looper.slide.up .item.next,.looper.slide.up .item.prev{left:0} .looper.slide.up .item.next{top:100%} .looper.slide.up .item.prev{top:-100%} .looper.slide.up .item.go{top:0} .looper.slide.up .item.go.active{top:-100%;left:0} .looper.slide.up .item.go.active.prev{top:100%} .looper.slide.up.xfade .item{-webkit-transition:0.5s ease-in-out top, 0.5s ease-in opacity;-moz-transition:0.5s ease-in-out top, 0.5s ease-in opacity;-o-transition:0.5s ease-in-out top, 0.5s ease-in opacity; transition:0.5s ease-in-out top, 0.5s ease-in opacity} .looper-control{position:absolute;z-index:5; top:50%; left:-20px;font-size:30px;line-height:40px;color:#ffffff;text-align:center;cursor:pointer;-webkit-transition:none; -moz-transition:none;-o-transition:none;transition:none} .looper-control.right{left:auto} .looper-control:hover{color:#ffffff;text-decoration:none;text-shadow:none;opacity:0.9; filter:alpha(opacity=90)} .looper-nav{background:transparent;text-align:center;list-style-type:none; margin:0} /*** 기본 :965 ~ 1273 px ***/ #urgent>.innerWrap, #header>.innerWrap, #friendBnZone>.innerWrap, .main_tab>.innerWrap, .main_category>.innerWrap, #sub_navi>.innerWrap,#sub_tab>.innerWrap, #footer, .content, .cardlist{width:calc(66rem + 1px);margin:0 auto} #footer .copy strong { display:block;margin-top:3px; color:#000; font-weight:bold !important} @media (min-width:1000px){#footer .copy strong { display:inline-block;margin-top:0}} /*** 와이드 :1274 px ~ ***/ @media (min-width:79.625rem){ #urgent>.innerWrap, #header>.innerWrap, #friendBnZone>.innerWrap, .main_tab>.innerWrap, .main_category>.innerWrap, #sub_navi>.innerWrap, #sub_tab>.innerWrap, .content, .cardlist, #footer {width:calc(88rem + 1px)} .sub_quick_flag{right:calc(50% - 43.75rem)} .sub_quick, .sub_title[data-depth="1"]{left:calc(50% - 44rem);right:calc(50% - 44rem)} .comment_wrap{width:calc(72% - 10px)} .tag, .link_posts{width:calc(22% - 10px)} } /*** :780 ~ 995 px ***/ @media (min-width:48.75rem) and (max-width:62.1875rem){ #urgent>.innerWrap, #header>.innerWrap, #friendBnZone>.innerWrap, .main_tab>.innerWrap, .main_category>.innerWrap, #sub_navi>.innerWrap,#sub_tab>.innerWrap,#footer, .content, .cardlist{width:calc(100vw - 5rem)} .sub_quick{display:none} .sub_quick_flag{right:calc(50% - 25.964em)} } /*** :641 ~ 779 px (66.56% 축소) ***/ @media (max-width:48.75rem){ #footer, .content, .cardlist{width:100%;margin:0 auto} .m-hidden{display:none} h3{font-size:1.1428em} .m_block{display:block!important} #urgent>.innerWrap, #header>.innerWrap,#gnb,#sub_navi>.innerWrap, #friendBnZone>.innerWrap{width:calc(100% - 20px); padding-left:10px;padding-right:10px; min-width:300px} .main_tab,.main_tab>.innerWrap,.main_category,.main_category>.innerWrap{width:100%} .topmenu{right:10px} .main_tab{top:507px; /* calc:547-40 */} .main_tab a{height:40px;font-size:1.2857em;line-height:40px} .main_slide{height:547px} .main_slide #myCarousel .carousel-nav{top:calc(547px - 5.7em)} .main_slide #myCarousel .looper-control{top:calc(3em - 274px); width:8%;background-size:100% auto} .main_slide #myCarousel .looper-inner, .main_slide #myCarousel .item{background-size:auto 547px} .main_slide #myCarousel .item .wrap img { left:calc(50% - 702px); height:547px} .content{width:100%;border:0} #sub_slide{height:360px} #sub_slide #myCarousel .carousel-nav{display:none} .sub_quick, .content_header:after{display:none} #sub_navi .selectmenu { padding:0.2em 0}/* 2018.01.17*/ #sub_navi div[data-depth]{display:none} #sub_navi div[data-depth]:last-child{display:block; width:calc(100vw - 170px) } #sub_navi div[data-depth]:last-child a.selectmenu {width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #sub_navi .other { top: -.3em} /* 2018.01.17*/ #sub_navi div[data-depth]:before { top: -.2em }/* 2018.01.17*/ .sub_quick_flag{top:360px;right:4px} #footer{position:relative;width:calc(100% - 20px);min-height:88px;padding:10px 10px 50px 10px;border-top:0;} #footer h1 img{width:86px} #footer .copyright{position:relative;padding-bottom:30px;} #footer .copy{font-size:0.7857em;line-height:1.4545em;} #footer .footermenu { position:absolute; left:0; bottom:-10px} #footer .footermenu a { display:none; padding:5px; background-color:#00afed; color:#fff; border-radius:4px } #footer .footermenu a:before { display:none} #footer .footermenu a:nth-child(5) { display:block} #footer .icon {position:absolute;margin:0; bottom:46px; left:180px } /*2018.01.17*/ #footer address {margin-top:0} #footer address span { display:inline-block; white-space: nowrap} #footer address span[data-addtess-type=area], #footer address span[data-addtess-type=old], #footer address span[data-addtess-type=zipcode], #footer address span.mail, #footer address span.represent, #footer address span.regist-no , #footer address span.do-not{display:none} #footer .m_show .footermenu{display:block;order:3} #footer .m_show address{display:block;order:2} .popupLayer.mini>div{left:90px;width:calc(100% - 180px)} } /*** :588 px ***/ @media (max-width:588px){ #header,#sub_navi, #friendBnZone, #footer{min-width:300px} #header .bt_login>a>span, #header .bt_logout>a>span {display:none} #footer .copyright{width:calc(100% - 100px)} #footer .icon { position:static; width:100%; margin-top:10px; margin-left:96px;} /*2018.01.17*/ .main_tab, .main_category {min-width:320px} .main_tab{top:calc(432px - 40px)} .main_slide{height:432px;min-width:320px} .main_slide #myCarousel .looper-inner, .main_slide #myCarousel .item{background-size:auto 432px} .main_slide #myCarousel .item .wrap img { left:calc(50% - 555px); height:432px} .main_slide #myCarousel .carousel-nav{top:calc(432px - 5.7em)} .main_slide #myCarousel .looper-control{top:calc(3em - 216px)} .sub_title, #sub_slide, .content, .content_header, .cardlist{min-width:320px} } @media (max-width:480px){ .popupLayer.mini>div{left:calc(50% - 150px);min-width:300px} } @media (max-width:320px){ .sub_quick_flag{left:234px;width:76px; right:auto} } /*-------------------------------------------------------------- 5.0 카드리스트 ----------------------------------------------------------------*/ .cardlist{ position:relative;z-index:600; display:flex;justify-content:flex-start;flex-wrap:wrap; box-sizing:border-box; border-top:1px solid #e6e6e6;border-right:1px solid #e6e6e6; background-color:#e6e7e8; } /* 5.1 카드 아이템 일반 */ .cardlist .item{ position:relative;z-index:4; box-sizing:border-box;width:33.33333%;height:22rem;padding:0;margin:0; border-left:1px solid #e6e6e6; background-color:#fff;background-repeat:no-repeat;background-position:50% 100%; background-size:100% auto; list-style:none; text-align:center; overflow:hidden;} .cardlist .item:nth-child(n+4){border-top:1px solid #e6e6e6;} /* Mouse Over & Select 시 디자인 변경 */ .cardlist .item.on:after, .cardlist .item.over:after { content:"";position:absolute; z-index:9;top:0;left:0;right:0;bottom:0; padding:0px;border:10px solid transparent;} #grid.cardlist .item.on:after, #grid.cardlist .item.over:after { z-index:-1 } .cardlist .item.on.cardlist_btnset:after, .cardlist .item.over.cardlist_btnset:after { display: none} .cardlist:not(.recomm) .item.on:after{ border-image:url(../images/icon/border_on.png) 10 repeat} .cardlist .item.over:after{ border-image:url(../images/icon/border_over.png) 10 repeat} /* 아이템 크기에 따른 디자인 변경 */ .cardlist .item>div{ box-sizing:border-box;height:100%;padding:3rem 2rem} .cardlist .item.w2x{ display:-webkit-flex ; display:flex; justify-content:flex-end; align-items:flex-start; width:66.66666%; background-size:auto 22rem; background-position:0% 0%; background-image:url(layout/noimage_maincard.png);} .cardlist .item.w2x>div{ box-sizing:border-box;width:50%;height:100%;padding:3rem; background-repeat:no-repeat;background-position:0% 50%;background-color:transparent; background-image:url(base/card_x2.png); background-size:auto 120%} /* 아이템 내부 요소에 대한 디자인 정의 : 세로 22rem 을 기준으로 정의 */ .cardlist .item_subtitle { display:block;height:2.8em; max-height: 2.8em; margin:1.25em 0; line-height:1.4em; overflow:hidden;text-overflow:ellipsis;word-break:keep-all} .cardlist .item_title{ display:block;min-height:3em; margin:0; font-size:1.8rem;font-weight:bold; line-height:3em; text-align:center; letter-spacing:-0.05em; } .cardlist .item_title strong { display:inline-block; line-height:1.3em; vertical-align: middle; text-overflow: ellipsis; overflow-y: hidden; word-break:keep-all} .cardlist .item:not(.use_bgimg) .item_title strong {max-height:3.9em; } .cardlist .item.use_bgimg .item_title strong {max-height:2.8em; } /* 아이템 내부요소 배치 형태에 따른 디자인 정의 */ .cardlist .category-list + .item_title { position:relative; top:61px } .cardlist .use_plusinfo .category-list + .item_title { position:relative; top:0 } .cnts .item.use_bgimg { position:relative;background-position:50% 0%; background-size:100% calc(100% - 7rem - 10px)} .cnts .item.use_bgimg>div { position:absolute; left:0; bottom:0; box-sizing:border-box; width:100%;padding:.8rem 2rem calc(.8rem + 10px); height:calc(7rem + 10px);} .cnts .item.use_bgimg>div>.item_subtitle {display:none} .depth.cardlist .item>div>.icon { position:absolute; left:0; right:0; bottom:40px} .depth.cardlist .item_title {line-height:1.4em;} /*** 화면크기에 다른 변동 ***/ @media (min-width:79.625rem){ .cardlist .item{width:25%} /* WIDE 화면에서 카드 4장 출력 */ .cardlist .item.w2x{width:50%} .cardlist .item.w3x{width:75%} .cardlist .item:nth-child(4){border-top:0px none;} } @media (min-width:48.75rem) and (max-width:62.1875rem){ .cardlist { background-size:245px 245px} .cardlist .item{height:calc(33.33vw - 27px)} .cardlist:not(.recomm) .item.on:after{border:8px solid transparent;border-image:url(../images/icon/border_on.png) 8 repeat} .cardlist:not(.recomm) .item.over:after{border:8px solid transparent;border-image:url(../images/icon/border_over.png) 8 repeat} .cardlist .item>div{padding:4.225vw 2.81vw} .cardlist .item.w2x{background-size:auto 33.33vw; background-position:0% 50%} .cardlist .item.w2x>div{padding:25px} .cardlist .item_subtitle{ font-size:1.407vw;} .cardlist .item_title{font-size:2.532vw} .cnts .item.use_bgimg { background-size:100% calc(100% - 9.596vw - 8px)} .cnts .item.use_bgimg>div { padding:1vw 2.81vw calc(1vw + 8px); height:calc(9.596vw + 8px);} } @media (max-width:48.75rem) { .depth.cardlist .item_subtitle {height:4.2em; max-height: 4.2em;} } @media (min-width:38.5rem) and (max-width:48.75rem){ .cardlist .item{height:33vw} .cardlist:not(.recomm) .item.on:after{border:6px solid transparent;border-image:url(../images/icon/border_on.png) 6 repeat} .cardlist:not(.recomm) .item.over:after{border:6px solid transparent;border-image:url(../images/icon/border_over.png) 6 repeat} .cardlist .item.w2x>div{padding:24px} .cardlist .item_subtitle{ margin:0 0 1.2em 0; font-size:.9rem} .cardlist .item_title{ margin:0; font-size: 1.357rem} .cnts .use_plusinfo>div {display:-webkit-flex ; display:flex; -ms-flex-direction:column; flex-direction: column; justify-content: space-between} .cnts .item:not(.use_plusinfo) .item_subtitle {min-height:2.8em; height:auto; max-height:4.2em;} .cnts .item.use_plusinfo .item_subtitle {min-height:1.4em; height:auto; max-height:2.8em;} .cnts .item.use_plusinfo .item_title {min-height:1.4em; line-height: 1.4em} .cnts .item.use_bgimg { background-size:100% calc(100% - 9.4vw - 6px)} .cnts .item.use_bgimg>div { padding:.8vw 2.248vw calc(.8vw + 6px); height:calc(4.071rem + 1.6vw + 6px);} .depth.cardlist .item>div {justify-content:space-between} } @media (max-width:38.5rem){ .cardlist .item:not(.w3x) {width:50%; height:50vw; min-height: 160px;} .cardlist .item:nth-child(3){border-top:1px solid #e6e6e6;} .cardlist:not(.recomm) .item.on:after{border:1.62vw solid transparent;border-image:url(../images/icon/border_on.png) 10 repeat} .cardlist:not(.recomm) .item.over:after{border:1.62vw solid transparent;border-image:url(../images/icon/border_over.png) 10 repeat} .cardlist .item>div, .cardlist .item.w2x>div{padding:6.818vw 4.545vw} .cardlist .item.w2x{width:100%} .cardlist .item.w2x { background-size:auto 100%; background-position:0% 50%} .cardlist .item.w3x .item_title {position:relative;z-index:2;padding:0 0} .cardlist .item_subtitle { margin:calc(6.8335vw - 1.4rem) 0;} .cardlist .item_title{font-size:1.075rem; font-size:4.09vw} .cnts .use_plusinfo>div {display:-webkit-flex ; display:flex; -ms-flex-direction:column; flex-direction: column; justify-content: space-between} .cnts .item.use_plusinfo .item_subtitle {min-height:1.3em; height:auto; max-height:2.6em;} .cnts .item.use_plusinfo .item_title {min-height:1.3em; line-height: 1.3em} .cnts .use_plusinfo>div { display: block} .cnts .item.use_bgimg { background-size:100% calc(100% - 17.526vw)} .cnts .item.use_bgimg>div { height:17.526vw; padding:1.818vw 4.545vw 3.438vw} } @media (max-width:26.25rem){ .cardlist .item_title{font-size:18px; font-size: 1.285rem} .cnts .item.use_bgimg { background-size:100% calc(100% - 3.855rem - 5.256vw)} .cnts .item.use_bgimg>div { height:calc(3.855rem + 5.256vw); } } @media (max-width:20rem){ .cardlist .item>div, .cardlist .item.w2x>div{padding:1.5rem 1rem} .cardlist .item_subtitle { margin:.14rem 0;} } /* 5.2 공통 - 공유아이콘 */ .cardlist .icon{display:flex;width:100%;flex-direction:row;justify-content:center;align-items:center;text-align:center} .cardlist .icon a{position:relative;display:block;margin:0 10px;padding:0 10px;color:#a8a8a9} .cardlist .icon a img{display:block} .cardlist .icon a span{display:block;height:1.4em;line-height:1.4em} .cardlist .icon a span:before{content:"";position:absolute;left:-10px;top:5px;display:inline-block;width:1px;height:calc(1.4em + 6px);background-color:#f0f1f1} .cardlist .icon a:first-child span:before{display:none!important} .cardlist .item.cardlist_btnset{display:flex;flex-wrap:wrap;justify-content:center;align-items:center; border:0;background:none} .cardlist .item.cardlist_btnset>* {min-width:55%} @media (max-width:48.75rem){ .cardlist .icon {display:none} } @media (max-width:680px) and (min-width:601px){ .cardlist .icon a{margin:0 6px;padding:0 6px} .cardlist .icon a img{ width:18px;height:auto} .cardlist .icon a span:before{left:-6px} } @media (max-width:26.25rem){ .cardlist .icon a{margin:0 6px;padding:0 6px} .cardlist .icon a img{ width:18px;height:auto} .cardlist .icon a span:before{left:-6px} } /* 5.3 공통 - 카드리스트버튼 */ .cardlist_btnset{ z-index:-1;list-style:none; position:absolute; bottom:19px;right:19px} .cardlist_btnset p.text{line-height:2.1428em} .cardlist_btnset p.text{color:#7f7f7f} .cardlist_btnset p.text>em{color:#00adee;font-size:1.5em} .cardlist_btnset p.text>em>strong{font-weight:900;font-size:1.6666em} .cardlist_btn{display:inline-block;width:50px;height:23px;padding:32px 5px 5px;margin-top:15px; border:1px solid #b2b3b3;background-repeat:no-repeat;background-position:50% 5px;color:#7f7f7f;text-align:center;line-height:23px} .cardlist_btn span { display:inline-block; line-height:12px; vertical-align: middle } .cardlist_btn:hover{background-color:rgba(255,255,255,.4)} .cardlist_btn.btn_top{background-image:url(base/icon_itemTopBtn.png)} .cardlist_btn.btn_more{background-image:url(base/icon_itemMoreBtn.png)} @media (max-width:964px){ .cardlist_btnset{bottom:16px;right:16px} .cardlist_btnset p.text{font-size:.7954em} .cardlist_btn{width:40px;height:22px;padding:25px 5px 3px;margin-top:10px;line-height:22px;background-size:24px 24px;font-size:.8em} .cardlist_btn span { line-height:11px; } } /* 5.4 서브 - */ /* 5.5 메인 - 코스&축제카드 */ .cnts .item {cursor:pointer } .cnts .item>div { background-color:#fff} /* 메인 - 코스&축제카드 - 공통 - 카테고리 */ .category-list{display:none; /*flex;justify-content:center;height:30px;*/} .category-list>em,.category-list>a{display:block;width:35px;height:29px;margin:0 5px;background-position:50% 50%;background-size:100% auto;background-repeat:no-repeat} .icon-cate_N{background-image:url(../images/icon/main_category_01.png)} .icon-cate_C{background-image:url(../images/icon/main_category_02.png)} .icon-cate_S{background-image:url(../images/icon/main_category_03.png)} .icon-cate_E{background-image:url(../images/icon/main_category_04.png)} .icon-cate_T{background-image:url(../images/icon/main_category_05.png)} @media (max-width:62.1875rem){.category-list>em,.category-list>a{width:28px;height:22px;margin:0 3px}} @media (max-width:48.75rem){.category-list>em,.category-list>a{width:24px;height:20px;margin:0 1px}} /* 메인 - 코스&축제카드 - 이미지배너 */ .cnts .item.imgBn>div { padding:0; background-color:transparent} .cnts .item.imgBn { background-size:100% auto; background-repeat:no-repeat; background-position:50% 50%} .cnts .item.imgBn .item_title{display:flex;width:100% !important;height:100% !important;justify-content:center;align-items:center;margin:0 !important;padding:0 !important} /* 메인 - 코스&축제카드 - 축제 */ .cnts .item .d-day{font-size:3em;color:#0aafed;font-weight:900; margin-top:1.25rem} @media (max-width:62.1875rem){ .cnts .item .d-day{font-size:2.4em;} } @media (max-width:26.25rem){ .cnts .item .d-day { font-size: 2em; margin-top:0} } /* 메인 - 코스&축제카드 - 코스 정보(2칸용) 및 이미지 카드 */ .cnts .item_courseinfo{display:flex;justify-content:center;width:100%;max-width:230px;margin:2.5rem auto 0; background-color:#333333;} .cnts .item_courseinfo span{ position:relative;display:block;width:50%;margin:10px auto;text-align:center} .cnts .item_courseinfo span:nth-child(n+2) { border-left:1px solid #aaa} .cnts .item_courseinfo em{display:block;color:#fff} .cnts .item_courseinfo strong{display:block;padding-top:7px;font-size:2.714em;color:#0aafed;font-weight:900} @media (max-width:62.1875rem){ .cnts .item_courseinfo span{margin:7px auto;} .cnts .item_courseinfo strong{padding-top:6px;font-size:2em} } @media (max-width:26.25rem){ .cnts .item.use_plusinfo>div { position:relative} .cnts .item_courseinfo {position:absolute; top:calc(45vw - 3em - 9px); left:4.645vw; right:4.645vw; width:auto; margin:0 auto 0} .cnts .item_courseinfo span{margin:3px auto;} .cnts .item_courseinfo em { font-size:.9em} .cnts .item_courseinfo strong{padding-top:3px;font-size:1.8em} } @media (max-width:20rem){ .cnts .item_courseinfo {position:absolute; top:calc(7.285em - 9px); left:1rem; right:1rem; width:auto; margin:0 auto 0} } /* 메인 - 기타 카드 : 2017.03.02 추가 */ .cnts .item.etc01>div { padding:0;} .cnts .item.etc01>div>a { position:relative;z-index:10;display:block; width:100%;height:50%;} .cnts .item.etc01>div>a>span {position:absolute; left:0; width:100%; max-height:30px; } .cnts .item.etc01>div>a>span>img { max-width:calc(100% - 20px)} .cnts .item.etc01 a:nth-child(2n+1){background-color:rgba(244,243,180,.2);} .cnts .item.etc01 a:nth-child(2n+1)>span{top:50%;} .cnts .item.etc01 a:nth-child(2n){ background-color:rgba(0,174,239,0.05)} .cnts .item.etc01 a:nth-child(2n)>span{bottom:50%;} /* 메인 - 주변정보카드(3칸용) */ .recomm .item.w3x{display:flex;width:100%;justify-content:space-between;background-position:50% 50%;background-repeat:no-repeat;background-size:calc(33.3333% + 52px) 100%; background-image:url(layout/noimage_maincard_3x.png)} .recomm .item.w3x>div.category {position:relative;display:block;box-sizing:border-box;width:33.3333%;height:100%;padding:19px;background-position:50% 50%; text-align: left} .recomm .item.w3x>div.category a,.recomm .item.w3x>div.recomm_item .btnSet { position:relative; z-index:10} .recomm .item.w3x>div.recomm_item{box-sizing:border-box;width:33.3333%;} .recomm .item.on:nth-child(3n):after{border:10px solid transparent;border-image:url(layout/main_recomm_bg01.jpg) 10 repeat} .recomm .item.on:nth-child(3n+2):after{border:10px solid transparent;border-image:url(layout/main_recomm_bg02.jpg) 10 repeat} .recomm .item.on:nth-child(3n+1):after {border:10px solid transparent;border-image:url(layout/main_recomm_bg03.jpg) 10 repeat} .recomm .item .btnSet a.btn_olleBasic { background-color:#e2e2e2; cursor:default !important; opacity:.85; -webkit-transition: .1s;-moz-transition: .1s;transition: .1s;} @media (min-width:48.75rem) { .recomm .item .btnSet a.btn_olleBasic { min-height:20px} } .recomm .item .btnSet a.btn_olleBasic:hover, .recomm .item .btnSet a.btn_olleBasic:active {text-decoration:none} .recomm .item .btnSet a.btn_olleBasic[href] {cursor:pointer !important} .recomm .item .btnSet a.btn_olleBasic[href]:hover,.recomm .item .btnSet a.btn_olleBasic[href]:active {opacity:1} .recomm .item:nth-child(3n) .btnSet a.btn_olleBasic[href] { background:url(layout/main_recomm_bg01.jpg) repeat} .recomm .item:nth-child(3n+2) .btnSet a.btn_olleBasic[href] { background:url(layout/main_recomm_bg02.jpg) repeat} .recomm .item:nth-child(3n+1) .btnSet a.btn_olleBasic[href] { background:url(layout/main_recomm_bg03.jpg) repeat} .category .cardlist_btn.btn_more{background-image:url(base/icon_itemMoreBtn_fff.png);border:1px solid #fff;color:#fff} @media (max-width:62.1875rem){ .recomm .item.w3x>div.category {padding:1.5vw} .recomm .item.on:nth-child(3n):after{border:8px solid transparent;border-image:url(layout/main_recomm_bg01.jpg) 8 repeat} .recomm .item.on:nth-child(3n+2):after{border:8px solid transparent;border-image:url(layout/main_recomm_bg02.jpg) 8 repeat} .recomm .item.on:nth-child(3n+1):after {border:8px solid transparent;border-image:url(layout/main_recomm_bg03.jpg) 8 repeat} } @media (max-width:48.75rem){ .recomm .item.on:nth-child(3n):after{border:6px solid transparent;border-image:url(layout/main_recomm_bg01.jpg) 6 repeat} .recomm .item.on:nth-child(3n+2):after{border:6px solid transparent;border-image:url(layout/main_recomm_bg02.jpg) 6 repeat} .recomm .item.on:nth-child(3n+1):after {border:6px solid transparent;border-image:url(layout/main_recomm_bg03.jpg) 6 repeat} } /* 주변정보-카테고리 */ .recomm .item.w3x>div.category {line-height:8.18rem} .recomm .item .category:before{content:"";display:block;width:100%;height:calc(100% - 8.18rem);background-position:50% 50%;background-repeat:no-repeat;background-size: auto 100%} .recomm .item.w3x>div.category p{display:inline-block; width:calc(100% - 105px);color:#fff;text-align:left;line-height:1em;white-space:nowrap;vertical-align:bottom} .recomm .item .category p span{display:block;font-weight:700; margin-bottom:.7em} .recomm .item .category p strong{display:inline-block; max-height:3.45em; line-height:1.15em;font-size:1.8em; font-weight:900; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-break: keep-all} .recomm .item.w3x>div.category .cardlist_btn{ position:absolute; right:19px; bottom:19px;} .recomm .item.w3x>div.category .cardlist_btn:hover{background-color:rgba(0,0,0,0.4)} .recomm .item:nth-child(3n) .category{background-image:url(layout/main_recomm_bg01.jpg)} .recomm .item:nth-child(3n+2) .category{background-image:url(layout/main_recomm_bg02.jpg)} .recomm .item:nth-child(3n+1) .category{background-image:url(layout/main_recomm_bg03.jpg)} .recomm .item:nth-child(2n) {justify-content:flex-end;background-position:0 50%} .recomm .item:nth-child(2n) .category{order:2;} .recomm .item.food .category:before{background-image:url(layout/main_recomm_food_icon.png)} .recomm .item.accomm .category:before{background-image:url(layout/main_recomm_accom_icon.png)} .recomm .item.joy .category:before{background-image:url(layout/main_recomm_view_icon.png)} @media (max-width:62.1875rem){ .recomm .item.w3x>div.category {line-height:calc(1.672rem + 8.28vw)} .recomm .item .category:before{height:calc(100% - 1.672rem - 8.28vw)} .recomm .item.w3x>div.category p{width:calc(100% - 75px); width:calc(100% - 60px - 4vw); font-size:.838em; /*2018.01.17*/ white-space:normal; line-height:1.2em} .recomm .item .category p strong{font-size:1.17rem; font-size:2.4vw; } .recomm .item.w3x>div.category .cardlist_btn{ right:15px; bottom:15px; right:1.5vw; bottom:1.5vw;} } @media (max-width:48.75rem){ .recomm .item.w3x>div.category {line-height:calc(1.672rem + 8.832vw)} .recomm .item .category:before{height:calc(100% - 1.672rem - 8.832vw)} .recomm .item.w3x>div.category p{width:calc(100% - 50px - 5vw);} .recomm .item .category p strong{ font-size:1.125rem; font-size:2.56vw; } } @media (max-width:38.5rem){ .recomm .item.w3x>div.category{position:absolute;z-index:10;bottom:50%;right:50%;width:calc(50% - 10px);height:calc(50% - 10px); padding:3.084vw; line-height:calc(1.672rem + 14.766vw)} .recomm .item .category:before{height:calc(100% - 1.672rem - 14.766vw); } .recomm .item .category p strong{font-size:4.28vw; } .recomm .item.w3x>div.category .cardlist_btn{ right:3.084vw; bottom:3.084vw;} } @media (max-width:26.25rem){ .recomm .item.w3x>div.category{bottom:calc(100% - 5.96rem - 9.144vw);right:calc(100% - 47.5vw - 62px);width:calc(47.5vw + 52px);height:calc(5.96rem + 6.168vw); line-height:5.96rem} .recomm .item.w3x>div.category:before {position:absolute; left:0; top:0; width:100%; height: 100%; background-position:0% 50%; opacity: .3 } .recomm .item .category p strong{font-size:1rem; font-size:5vw; } .recomm .item.w3x>div.category .cardlist_btn{ right:3.084vw; bottom:3.084vw;} } @media (max-width:20rem){ .recomm .item.w3x>div.category{bottom:calc(100% - 8.294rem);right:calc(100% - 9.5rem - 6.168vw - 62px);width:calc(9.5rem + 6.168vw + 52px);height:7.369rem; line-height:calc(7.369rem - 6.168vw)} .recomm .item .category p strong{font-size: 1.1428rem; } } /* 주변정보-콘텐츠아이템 */ .recomm .item.w3x>div.recomm_item{position:relative;display:block;background:url(base/card_x2.png) no-repeat 0% 50%; background-size:auto 110%; line-height: 5rem;} .recomm .item.w3x .item_title {position:relative; z-index:2; display:inline-block;width:100%; min-height:1.3em; max-height:3.9em; line-height:1.3em; overflow:hidden; text-overflow:ellipsis; vertical-align: middle; } .recomm .item.w3x .contact_item{position:relative; z-index:2; display:inline-block; width:7.35em; margin:calc(4.49rem - 51px) auto 0; text-align:center; white-space:nowrap; overflow:hidden } .recomm .item.w3x>div.recomm_item .btnSet { position:absolute; left:0; right:0; bottom:calc(2rem + 10px)} .recomm .item.w3x .icon {z-index:2} @media (min-width:79.625rem){ .cardlist.recomm {width:66em;padding:0;margin:0 0 0 calc(50% - 44em)} .cardlist.recomm .item{width:100%} } @media (max-width:62.1875rem){ .recomm .item.w3x .item_subtitle { height:3.6em; align-items:flex-end} .recomm .item.w3x .contact_item{ margin:5px auto 0; margin:1.2vw auto 0; } .recomm .item.w3x>div.recomm_item .btnSet { bottom:20px; bottom:4.225vw} } @media (max-width:48.75rem){ .recomm .item.w3x>div.recomm_item {padding:30px 20px; padding:4.423vw 2.948vw} .recomm .item.w3x>div.recomm_item .btnSet { bottom:2.948vw} } /* @media (min-width:38.5rem){ .recomm .item.on:nth-child(2n+1) .recomm_item { position:absolute; right:0} .recomm .item.on:nth-child(2n) .recomm_item { position:absolute; right:33.3333%} }*/ @media (max-width:38.5rem){ .recomm .item.w3x{position:relative;display:block;background-size:auto 100%; height: height:100vw;} .recomm .item.w3x>div.recomm_item{position:absolute;z-index:10;top:50%;left:50%;box-sizing:border-box;width:calc(50% - 10px);height:calc(50% - 10px);background-image:none;background-color:#fff} } @media (max-width:38.5rem) and (min-width:26.25rem){ .recomm .item.w3x>div.recomm_item { padding:6.818vw 4.545vw} .recomm .item.w3x>div.recomm_item .btnSet { bottom:4.545vw} } @media (max-width:26.25rem){ .recomm .item.w3x>div.recomm_item{top:calc(5.96rem + 9.144vw + 10px); left:calc(5.96rem + 9.144vw + 10px); width:calc(100% - 5.96rem - 12.192vw - 10px);height:calc(100% - 5.96rem - 12.192vw - 10px); line-height: 20.787vw; padding:8vw 5.95vw} .recomm .item.w3x .contact_item{ margin:0 auto 0; } .recomm .item.w3x .item_title {font-size: 5.33vw} } @media (max-width:20rem){ .recomm .item.w3x{height:22.857rem;} .recomm .item.w3x>div.recomm_item{top:calc(8.297rem + 10px); left:calc(5.96rem + 9.144vw + 10px); width:calc(100% - 5.96rem - 12.192vw - 10px);height:calc(100% - 9.226rem - 10px); line-height: 1.5em; padding:1.78rem 1.357rem;} .recomm .item.w3x .item_title {font-size: 1.214rem} } /* @media (max-width:48.75rem) and (min-width:520.1px){.recomm .item.w3x .item_title {font-size:1.8em; height:3.6em}} @media (max-width:560px) and (min-width:520.1px){.recomm .item.w3x{height:540px;}} @media (max-width:520px) and (min-width:480.1px){.recomm .item.w3x{height:500px;}} @media (max-width:480px) and (min-width:440.1px){ .recomm .item.w3x{height:460px;} .recomm .item.w3x>div.recomm_item { padding:35px 10px} .recomm .item.w3x>div.recomm_item .btnSet{ bottom:30px} } @media (max-width:440px) and (min-width:400.1px){ .recomm .item.w3x{height:420px;} .recomm .item.w3x>div.recomm_item { padding:30px 10px} .recomm .item.w3x .contact_item{margin:5px auto} .recomm .item.w3x>div.recomm_item .btnSet{ position:static} } @media (max-width:400px) { .recomm .item .category {padding:calc(25% - 62px) 10px !important} .recomm .item .category:before {display:none} .recomm .item .category p strong{font-size:1.5em;} .recomm .item.w3x .contact_item:before { display:none} .recomm .item.w3x .contact_item{margin:0 auto; width:5.5em} .recomm .item.w3x>div.recomm_item .btnSet{ position:static} } @media (max-width:400px) and (min-width:360.1px){.recomm .item.w3x{height:380px;}} @media (max-width:360px) and (min-width:320.1px){.recomm .item.w3x{height:340px;}} @media (max-width:320px){.recomm .item.w3x{height:320px;}} */ /*** 기본 :965 ~ 1273 px ***/ .side {display:none;borde-top:1px solid #e6e6e6;border-right:1px solid #e6e6e6} .side>.fb_wrap{width:100%;border-bottom:1px solid #e6e6e6} .side>.tag_wrap{width:100%;text-align:center} .side .tag_wrap h3{color:#27aae1;font-size:2em;height:90px;line-height:90px} .side .tag_wrap h3 strong{font-weight:800} .side .taglist{display:flex;height:calc(100% - 110px);flex-wrap:wrap;justify-content:center;align-items:center;padding:0 20px;overflow:hidden} .side .taglist>span{display:block;padding:0 1em;height:2em;line-height:2em} /*** 와이드 :1274 px ~ ***/ @media (min-width:1273px){ .side{display:block;width:calc(22em - 1px);height:66em} .side>.fb_wrap, .side iframe{height:66em} .side>.tag_wrap{box-sizing:border-box;height:22em} } /*-------------------------------------------------------------- 6.0 콘텐츠 공통요소 ----------------------------------------------------------------*/ /* 6.1 헤더 */ .content_header:before{content:"";position:absolute;left:0;top:30px;width:88px;height:70px;display:block;background-image:url(../images/common/logo.png);background-position:0% 50%;background-size:100% 100%;background-repeat:no-repeat} .content[data-depth="2"] .content_header .sub_title, .content[data-depth="3"] .content_header .sub_title, .sub_title[data-depth="2"], .sub_title[data-depth="3"]{box-sizing:border-box;max-width:calc(100% - 200px);padding-bottom:20px;margin:0 auto;text-align:center;color:#0aafed;font-size:3em;font-weight:bold} .sub_title[data-depth="3"] .bbs_title{ display:block;font-size:.7em; line-height:1.2em} .sub_title[data-depth="2"] { display:none } .content[data-depth="2"] .content_header .sub_title{padding-top:30px} .content[data-depth="3"] .content_header .sub_title, .sub_title[data-depth="3"]{padding-top:45px} .sub_title .sub{display:block;margin-bottom:10px;font-size:.4em;color:#444} .content_header .info{display:flex;justify-content:center;padding-bottom:10px} .info .info_item{position:relative;display:block;margin:0px 15px;padding-left:29px;background-position:0% 50%;background-repeat:no-repeat;height:22px;line-height:22px;color:#58595b} .info .btn_view{background-image:url(base/icon_view.png)} .info .btn_comt{background-image:url(base/icon_comment.png)} .info .btn_shar{background-image:url(base/icon_share.png)} .info .btn_like{background-image:url(base/icon_like.png)} .info .info_item:after{content:'';position:absolute;left:-16px;height:20px;border-left:1px solid #e6e7e8} .info .info_item:first-child{margin-left:0px} .info .info_item:first-child:after{border:0px} .info .info_item:last-child{margin-right:0px} @media (min-width:1273px){ .content_header{position:relative} } @media (max-width:48.75rem){ .content_header:before{display:none} .content_header .info{position:absolute; left:0;right:0;top:auto;bottom:70px;text-align:center} .content_header .info_item:after{border-left:1px solid #333} .content_header .info_item{color:#fff} .content_header .btn_view{background-image:url(base/icon_view_fff.png)} .content_header .btn_comt{background-image:url(base/icon_comment_fff.png)} .content_header .btn_shar{background-image:url(base/icon_share_fff.png)} .content_header .btn_like{background-image:url(base/icon_like_fff.png)} .sub_title[data-depth="3"]{left:calc(50% - 44em);right:calc(50% - 44em)} .content_header .sub_title[data-depth="3"] .sub, .content[data-depth="2"] .content_header .sub_title .sub{color:#dfdfdf;font-size:.6em;font-weight:300} .sub_title[data-depth="1"], .sub_title[data-depth="2"] {position:absolute;z-index:2;top:0;left:0;right:0;box-sizing:content-box;width:100%; padding-top:70px;} .sub_title[data-depth="1"] p, .sub_title[data-depth="2"] p {display:none} .sub_title[data-depth="1"] h1, .sub_title[data-depth="2"] h2 {font-size:1.4em} .content_header{position:absolute;z-index:2;top:0;left:0;right:0;box-sizing:content-box;width:100%; height:220px; border:0;padding-top:140px; background-color:rgba(0,0,0,0.8);color:#fff;text-align:center} .sub_title[data-depth="3"] h3{font-size:2em} .sub_title[data-depth="1"] h1, .sub_title[data-depth="2"] h2{background:url(base/mobile_subtitle_deco.png) no-repeat 50% 100%;padding-bottom:25px;margin-bottom:15px} .sub_title[data-depth="1"] p, .sub_title[data-depth="2"] p, .sub_title[data-depth="3"] p {font-size:1.1428em;margin:10px 0;line-height:1.5em} .content[data-depth="2"] .content_header .sub_title, .sub_title[data-depth="3"] { display:flex;flex-direction:column; justify-content:center; padding:0 20px;font-size:2em;color:#fff} .main .content_header{position:static; height:auto; border-bottom:1px solid #c0c0c0; width:93.75%; margin:0 auto;padding:30px 0; background-color:#fff;color:#58595b} .main .content_header .info {position:static} .main .content_header .info_item:after{border-left:none} .main .content_header .info_item{color:#58595b} .main .content_header .btn_view{background-image:url(base/icon_view.png)} .main .content_header .btn_comt{background-image:url(base/icon_comment.png)} .main .content_header .btn_shar{background-image:url(base/icon_share.png)} .main .content_header .btn_like{background-image:url(base/icon_like.png)} .main .content_header .sub_title[data-depth="3"] .sub, .main .content[data-depth="2"] .content_header .sub_title .sub{color:#444} .main .content_header .sub_title, .main .sub_title[data-depth="3"]{padding-bottom:20px;color:#0aafed;font-weight:bold; padding-top:10px} } @media (max-width:480px){ .main .content_header .sub_title, .main .sub_title[data-depth="3"]{padding-top:30px } } /* 6.2 탭 */ .tablink{box-sizing:border-box;background-repeat:no-repeat;display:block; background-color:#fff;text-align:center} .tablink:link, .tablink:link:hover, .tablink:link:visited, .tablink:active{color:#58595b} .tablink.Tab_on:link, .tablink.Tab_on:link:hover, .tablink.Tab_on:visited, .tablink.Tab_on:active{color:#27aae1} /*.tablink.summary{background-image:url(layout/contents_tab_summary.png)} .tablink.apply, .tablink.Apply{background-image:url(layout/contents_tab_apply.png)} .tablink.location, .tablink.offShop{background-image:url(layout/contents_tab_location.png)} .tablink.cleanOlle{background-image:url(layout/contents_tab_cleanOlle.png)} .tablink.lock{background-image:url(layout/contents_tab_lock.png)} .tablink.member{background-image:url(layout/contents_tab_member.png)}*/ ul.tab_head{position:relative;bottom:-1px;list-style:none;display:flex;justify-content:center;margin-top:30px} ul.tab_head li{display:block;margin-left:3px;margin-right:3px} ul.tab_head li .Tab{display:none} ul.tab_head .tablink{/*padding-left:25px;*/width:150px;height:50px;line-height:50px; border-top-left-radius:4px;border-top-right-radius:4px;border-left:1px solid #d6d6d6;border-right:1px solid #d6d6d6;border-top:1px solid #d6d6d6;border-bottom:1px solid #d6d6d6;background-position:0px -200px;font-size:1.1428em} ul.tab_head .tablink.Tab_on{background-position:0px 0px;border-bottom:1px solid #fff;font-weight:bold;color:#0aafed} ul.tab_head .tablink>span {position:relative; top:-2px; display:inline-block; line-height:20px; vertical-align: middle } .board_view_header ul.tab_head{position:absolute;right:55px;bottom:0px} .step_head{position:relative;display:flex;align-items:center;margin:60px 0;justify-content:center} .step_head .div{display:block;width:30px; height:2px;background-color:#ccc;line-height:2em;overflow:hidden} .step_head .tablink{display:block;width:7.5em;height:7.5em;padding-top:3.5em;line-height:1.3em;border-radius:50%;border:1px solid #808286;background-position:50% -195px;white-space:nowrap} .step_head .tablink>span{text-transform:uppercase;font-size:.857em} .step_head .tablink>strong{display:block;font-weight:bold} .step_head .tablink.Tab_on{border:2px solid #27aae1; background-position:50% 5px} .step_head .tablink.summary { background-image:url(layout/contents_tab_summary.png)} .step_head .tablink.apply { background-image:url(layout/contents_tab_apply.png)} .step_head .tablink.member { background-image:url(layout/contents_tab_member.png)} /* 6.3 콘텐츠 바디 영역 일반 */ .content_body{position:relative;clear:both;width:93.75%;margin-left:auto;margin-right:auto} .content_body .content_body {width:100%} .content_body:nth-child(1n+4){padding-left:3.125%;padding-right:3.125%;margin-top:30px; margin-left:0; margin-right:- } .content_body:last-child{margin-bottom:60px} .content>.close{position:relative; z-index:99; clear:both;display:flex;justify-content:flex-end;align-items:center} .content>.close a{display:block;width:59px;height:59px;border-left:1px solid #e0e0e0;border-top:1px solid #e0e0e0;background-color:#f7f7f7;background-image:url(base/contents_close.png);background-repeat:no-repeat;background-position:50% 50%} .content>.close:first-child { float:right } .content>.close:first-child a{ background-image:url(base/contents_close_2.png);border-bottom:1px solid #e0e0e0; border-top:none} @media (max-width:48.75rem){ .content>.close:first-child {position:absolute;z-index: 9; top:656px; right:0;} } @media (max-width:588px){ .content>.close:first-child {top:599px;} } /* 지도검색 결과 부분 */ .mapSearch_Result{position:relative;width:100%;height:500px;overflow:hidden} /* 6.4 html에디터 출력부분 스타일 */ /* 6.4.1 일반 */ .html_wrap {color:#808285;line-height:1.55em} .html_view, .html_veiw{padding-top:60px;padding-bottom:60px;color:#808285;line-height:1.4em;text-align:justify} .html_view>.html_view { padding-top:0; padding-bottom:0} .html_view a:link, .html_view a:visited {color:#000} .html_view a:hover, .html_view a:active {color:#f38020} .html_view a.color:link, .html_view a.color:visited {color:#0aafed} .html_view a.color:hover, .html_view a.color:active {color:#f38020} .content .html_wrap:first-child{padding-top:60px} .content .html_wrap:last-child{padding-bottom:60px} .html_wrap p, .html_wrap ul, .html_view p, .html_view ul, .html_veiw p, .html_veiw ul{margin:0.5em 0} .html_wrap em, .html_view em{color:#000;font-style:normal} .html_wrap strong, .html_view strong, .html_veiw strong{color:#000;font-weight:bold} .static {position:static !important; float:none !important} /* 6.4.2 페이지 상단 제목 & 리드글 */ .page_subject{margin-bottom:30px;font-size:2em;color:#000; font-weight:400;line-height:1.5em;word-break:keep-all} .page_subject[align="center"] {margin-bottom:60px;text-align:center} .page_subject[align="center"]:nth-child(n+3) {margin-top:80px; padding-top:80px; border-top:1px dashed #ccc} .page_subject strong{font-weight:800} .page_subject.strong { color:#0aafed;font-weight:800; margin-top:60px;} .page_lead { position:relative; font-size:1.285em; line-height:1.5em; color:#808286; margin-top:30px; margin-bottom:30px; text-align:justify } .page_lead:after {content:""; position:absolute; bottom:0} .page_subject[align="center"] + .page_lead { top:-30px} @media (max-width:48.75rem){ .content_header + .content_body .page_subject:nth-child(-n+2), .content_header + .content_body .page_lead:first-child, .content_header + .content_body p.img:nth-child(-n+2) {text-align:left !important; margin-right:80px!important} .main .content_header + .content_body .page_subject:nth-child(-n+2), .main .content_header + .content_body .page_lead:first-child, .main .content_header + .content_body p.img:nth-child(-n+2){text-align:center !important; margin-right:0 !important} } /* 6.4.3 서브섹션 및 서브섹션 리드글 */ .subsection_title{clear:both; min-height:36px;margin-top:30px; margin-bottom:15px;font-size:1.714em;color:#000; font-weight:700;line-height:36px} .subsection_title.strong {color:#0aafed} .subsection_title:before{float:left;display:block;width:46px;height:36px;background-position:50%;background-repeat:no-repeat} .page_lead.center, .section_title.center, .subsection_title.center { text-align:center} .page_lead:last-child { margin-bottom:0; padding-bottom:0} .submin_title {margin-top:20px; margin-bottom:20px;font-size:1.428em;color:#000; font-weight:700; line-height:1.5em} /* 6.4.4 중간 도움말 및 공지 꾸밈 */ .headline_help, .headline_notice{margin-top:1em; color:#000} .headline_help:before, .headline_notice:before{box-sizing:border-box; display:inline-block;width:1.55em;height:1.55em;padding-left:1.55em;background-position:0% 50%;background-repeat:no-repeat;white-space:nowrap;overflow:hidden; vertical-align: middle} .headline_help strong{color:#00adee !important} .headline_notice, .headline_notice strong{color:#f28021 !important} .headline_help:before{content:"";background-image:url(base/icon_h4_help.png)} .headline_notice:before{content:"";background-image:url(base/icon_h4_notice.png)} /* 6.4.5 기본 목록 */ ul.basic>li{position:relative;list-style:none;margin-bottom:0.5em;padding-left:1em} ol.basic>li{position:relative;list-style:decimal-leading-zero inside;margin-bottom:0.5em;} ul.basic>li:before{content:"-";position:absolute;top:0;left:0} .table>li{line-height:1.4em; margin:5px 0} .table>li>span {display:inline-block;margin-right:1em} .table>li>span:last-child{margin-right:0} .basic.center { text-align:center} .basic.center>li:before { position:static} /* 6.4.9 플랙시블 박스 및 배치적 예외사항 */ .page_lead + .html_flex .subsection:nth-child(1) .subsection_title{margin-top:0 } .subs_booths .subsection_title:before{content:"";background-image:url(main/event_icon_booth.png)} .subs_culture .subsection_title:before{content:"";background-image:url(main/event_icon_music.png)} .html_flex>.subsection { margin-bottom:60px; max-width:100%} .html_flex>.subsection.only-img { display:block;margin-bottom:30px; margin-top:60px} .html_flex>.subsection.only-img +* { clear:both} .html_flex>.subsection.only-img .img { display:block; float:left; max-width:33.333%;} .html_flex>.subsection.only-img.col2 .img { max-width:50%} .html_flex>.subsection.only-img .img>img {max-width:100%; height:auto} @media (min-width:1273px){ .html_flex { display:flex; justify-content:flex-start; flex-wrap:wrap} .html_flex>.subsection.only-img { margin-top:0; padding-top:36px} .html_flex>.subsection.only-img .img { display:block; float:none; max-width:100% !important;} .html_flex>.subsection {width:calc(33.33% - 40px); margin-left:60px} .html_flex>.subsection:nth-child(3n+1) {margin-left:0} .page_lead + .html_flex .subsection:nth-child(1) .subsection_title, .page_lead + .html_flex .subsection:nth-child(2) .subsection_title, .page_lead + .html_flex .subsection:nth-child(3) .subsection_title {margin-top:0 } } @media (max-width:580px){ .html_flex>.subsection.only-img {display:block} .html_flex>.subsection.only-img .img {max-width:100% !important;} } /* 6.5 */ /*-------------------------------------------------------------- 7.0 List 각종 목록 스타일 정의 ----------------------------------------------------------------*/ /* 7.1 비순차리스트 */ /* 7.1.1 리스트 기본 형식 */ .item_list li{list-style:none} .item_list li.item{position:relative;display:block;overflow:hidden;} .item_list li.item:last-child {border-bottom:none} /* 순서가 없는 정보-가로배치 */ .item_list.flex{display:flex;justify-content:flex-start;flex-wrap:wrap} table td .item_list.flex li {min-width:calc(50% - 20px); margin:0 10px; text-align:center} @media (max-width:48.75rem){table td .item_list.flex li {min-width:calc(100% - 20px)}} .item_list.flex .item{width:calc(33.333% - 20px);margin-left:30px} .item_list.flex .item:first-child, .item_list.flex .item:nth-child(3n+1){margin-left:0} .item_list.flex .item_title{position:relative;color:#0aafed;font-weight:700;min-height:24px;line-height:24px} .item_list.flex .item_title em {color:#000} .item_list.flex.col2 .item {width:calc(50% - 15px)} .item_list.flex.col2 .item:nth-child(3n+1){margin-left:30px} .item_list.flex.col2 .item:nth-child(2n+1){margin-left:0} .item_list.flex .item_title.x2 {height:auto; margin:5px 0} .item_list.flex .item>p,.item_list.flex .item>div.min_list, .item_list.flex .item>ul {margin-left:30px} .item_list.flex .item.only-img>*{margin-left:0; max-width:calc(100% - 2px)} .item_list.flex dt{margin-top:1em;margin-bottom:.5em;font-weight:bold} .item_list.flex dd{line-height:1.4em;color:#444} .item_list.flex li.mapblit{list-style:none} .item_list.flex .item_btn { text-align:center; min-width:calc(25% - 10px)} .item_list.flex .item_btn>a { position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:140px; height:140px; margin:10px 0; border-radius:50%; background-color:#0aafed; color:#fff; text-align:center } .item_list.flex .item_btn:nth-child(odd) { margin:10px 10px 10px 0} .item_list.flex .item_btn:nth-child(even) { margin:10px 0 10px 10px} .item_list.flex .item_btn>a>span { display:block; line-height:1.3em; margin-bottom:.3em; font-size:.9em} .item_list.flex .item_btn>a>strong { display:block; font-size:1.4em; color:#fff;} .item_list.flex .item_btn>a>span + strong { margin:0 10px} @media (min-width:1273px){ .item_list.w_col2{display:flex; justify-content:space-between; align-content:flex-start; flex-wrap:wrap} .item_list.w_col2>.item{width:calc(50% - 15px)} .item_list.partner.w_col2>.item:nth-child(2){border-top:none} .item_list.flex .item{width:calc(33.333% - 20px);margin-left:30px} .item_list.flex .item:nth-child(3n+1){margin-left:0} .item_list.flex.col2 .item {width:calc(50% - 15px)} .item_list.flex.col2 .item:nth-child(3n+1){margin-left:30px} .item_list.flex.col2 .item:nth-child(2n+1){margin-left:0} .w_block { display:block} .item_list.w_flex{display:flex;justify-content:flex-start;flex-wrap:wrap} .item_list.w_flex .item{width:calc(33.333% - 20px);margin-left:30px} .item_list.w_flex .item:nth-child(3n+1){margin-left:0} .item_list.w_flex.col2 .item{width:calc(50% - 15px)} .item_list.w_flex.col2 .item:nth-child(2n){margin-left:30px} .item_list.w_flex.col2 .item:nth-child(2n+1){margin-left:0} .item_list.w_flex .item_title{position:relative;color:#0aafed;font-weight:700;line-height:24px} } @media (min-width:780px){ .item_list.pc_flex {display:flex;justify-content:flex-start; flex-wrap:wrap} .item_list.pc_flex .item{width:calc(33.333% - 20px);margin-left:30px} .item_list.pc_flex .item:first-child, .item_list.pc_flex .item:nth-child(3n+1){margin-left:0} .item_list.pc_flex .item_title{position:relative;color:#0aafed;font-weight:700;min-height:24px;line-height:24px} .item_list.pc_flex.col2 .item {width:calc(50% - 15px)} .item_list.pc_flex.col2 .item:nth-child(3n+1){margin-left:30px} .item_list.pc_flex.col2 .item:nth-child(2n+1){margin-left:0} .item_list.pc_flex .item_title.x2 {height:auto; margin:5px 0} .item_list.pc_flex .item>p, .item_list.pc_flex .item>ul {margin-left:30px} .item_list.pc_flex .item.only-img>*{margin-left:0; max-width:calc(100% - 2px)} .item_list.pc_flex dt{margin-top:1em;margin-bottom:.5em;font-weight:bold} .item_list.pc_flex dd{line-height:1.4em;color:#444} .item_list.pc_flex li.mapblit{list-style:none} .item_list.pc_flex .item_btn { text-align:center; min-width:calc(25% - 10px)} .item_list.pc_flex .item_btn>a { position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:140px; height:140px; margin:10px 0; border-radius:50%; background-color:#0aafed; color:#fff; text-align:center } .item_list.pc_flex .item_btn:nth-child(odd) { margin:10px 10px 10px 0} .item_list.pc_flex .item_btn:nth-child(even) { margin:10px 0 10px 10px} .item_list.pc_flex .item_btn>a>span { display:block; line-height:1.3em; margin-bottom:.3em; font-size:.9em} .item_list.pc_flex .item_btn>a>strong { display:block; font-size:1.4em; color:#fff;} .item_list.pc_flex .item_btn>a>span + strong { margin:0 10px} } /* Start-추후삭제 .item_list.flex .item_title strong, .item_list.pc_flex .item_title strong{float:left;display:inline-block;width:24px;height:24px;margin-right:6px;border-radius:50%;background-size:100%;background-position:50% 50%;background-repeat:no-repeat;background-color:#0aafed;color:#fff;text-align:center} .item_list.descript_list .item>p strong{display:inline-block;vertical-align:top;width:24px;height:24px;line-height:24px;margin-right:6px;border-radius:12px;background-color:#0aafed;color:#fff;text-align:center} /* End-추후 삭제 */ /* 7.1.2 파트너 */ .item_list.partner{border-top:1px solid #e2e2e2} .item_list.partner>.item{position:relative;display:flex;padding:20px 0;justify-content:space-between; border-top:1px dashed #e2e2e2} .item_list.partner .item_site{position:absolute;top:25px; right:0} .item_list.partner .item_main_img{display:flex;justify-content:center;align-items:flex-start;box-sizing:border-box;width:200px;height:150px;padding:1em 0;margin-right:20px} .item_list.partner .item_main_img a{} .item_list.partner .item_main_img img{max-width:200px; max-height:100%; width:auto;} .item_list.partner .item_main_img>img{border:none} .item_list.partner .item_title{position:absolute;top:20px;left:220px;line-height:42px; color:#000; font-weight:700} .item_list.partner .item_title strong, .item_list.partner .item_text strong{font-weight:bold} .item_list.partner .item_text{width:calc(100% - 220px);padding-top:50px;line-height:1.6em;font-size:1.071em; text-align:justify} .item_list.partner .mappoint{display:inline-block;width:38px; height:38px;margin:0 -2px;line-height:32px;font-size:1.125em; } .item_list.partner.friendship .item_title span { font-weight: lighter; font-size:.9em; word-break:keep-all} .item_list.partner.friendship .item_title strong { color:#0aafed; word-break:keep-all} @media (min-width:1273px){ .item_list.partner .item_main_img{max-height:180px} } @media (max-width:588px){ .item_list.partner .item_title{line-height:25px; margin-bottom:10px; } .item_list.partner.friendship .item_title strong{display:block} } /* 7.1.3 리스트-오디오가이드북*/ .next_folding { position:relative; padding-left:40px;} .next_folding:before { content:""; position:absolute; left:10px; top:calc(50% - 10px); width:20px; height:20px; background-image:url(layout/item_toggle1.png); background-repeat:no-repeat; background-position:-20px 50%} .next_folding.open:before { background-position:0 50%} .item_list.audio { margin-bottom:30px} .item_list.audio li.item { border-bottom:1px solid #e2e2e2} .item_list.audio .item_title { position:relative; padding-top:20px; padding-bottom:10px; line-height:32px;} .item_list.audio .mappoint{ position:relative; top:-5px;width:38px; height:42px;line-height:32px; font-size:.857em } .item_list.audio .mappoint + span {font-size:.857em; color:#808286} .item_list.audio .title { display:inline-block;max-width:calc(100% - 61px - 8em); font-weight:bold; color:#000; overflow:hidden;text-overflow:ellipsis; white-space:nowrap; vertical-align:middle} .item_list.audio .title:after{content:" 올레 오디오가이드북"; font-weight:100} .item_list.audio a.download { position:absolute; top:calc(50% - 16px); right:0; display:block;height:32px; padding-left:23px; font-size:.857em; color:#0aafed; background-image:url(layout/icon_download.png); background-repeat:no-repeat; background-position:0 0} .item_list.audio a.download:hover, .item_list.audio a.download:active {color:#f28021;background-position:0 -100px} .item_list.audio .item_contents{ display:none; border-top:1px dashed #e2e2e2; padding:20px; text-align:center;} .item_list.audio audio {margin-bottom:20px;} .item_list.audio .credit {color:#808286; line-height:1.5em} /* 7.1.4 설명 */ .item_list.descript_list { } .item_list.descript_list .item{margin-top:15px; margin-bottom:15px} .item_list.descript_list .item_title{position:relative;color:#0aafed;font-weight:700;min-height:24px;line-height:24px} .item_list.descript_list .item_title .circleTxt + .block { display:inline-block; width:calc(100% - 40px)} .item_list.descript_list li.item img{border:0px} .item_list.descript_list.flex{justify-content:flex-start} .item_list.descript_list .item>.min_list{ border-left:2px solid #0aafed;margin-top:8px;margin-left:20px;padding-left:10px} .item_list.descript_list .item>p em, .item_list.descript_list .item>div em{color:#0aafed} .item_list.descript_list.w_flex .item:nth-child(n+2){padding-top:20px;border-top:1px dashed #d6d6d6;} @media (min-width:1273px){ .item_list.descript_list.w_flex:not(.col2) .item:nth-child(-n+3){padding-top:0;border-top:none} .item_list.descript_list.w_flex.col2 .item:nth-child(-n+2){padding-top:0;border-top:none} } /* 7.2 순차리스트 */ /* 7.2.1 리스트 기본 형식 */ ul.step_list{display:flex;flex-wrap:wrap} ul.step_list li{ list-style:none; width:calc(33.3% - 20px) ; margin-bottom:20px; margin-left:30px; text-align:left;} ul.step_list li:nth-child(3n + 1){ margin-left:0;} ul.step_list li:last-child div{width:70px;float:left} ul.step_list .circleTxt{ position:absolute; top:0; left:0; background-color:#8dc63f; text-align:center} ul.step_list li .item_title{ position:relative; margin-top:20px; padding-left:34px; color:#000; font-size:1em;line-height:20px} ul.step_list li p{margin-left:35px;margin-top:10px} ul.step_list li p{display:block;position:relative;padding-left:20px;margin-top:5px;margin-left:35px;line-height:20px} ul.step_list li p:before{content:'';background-image:url(layout/blit_steplist.png);width:12px;height:13px;position:absolute;left:0px;top:3px} /* 7.3 정의 리스트 */ /* 7.3.1 리스트 기본 형식 */ dl.define_view{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:flex-start;border-bottom:1px solid #e1e1e1;line-height:20px} dl.define_view dt, dl.define_view dd{padding-top:10px;padding-bottom:10px;border-top:1px solid #e1e1e1} dl.define_view dt:nth-child(1), dl.define_view dd:nth-child(2){border-top:none} dl.define_view dt{width:8em;padding-right:.5em; font-weight:bold;text-align:right} dl.define_view dt em{ color:#0aafed} dl.define_view dd{width:calc(100% - 9em);padding-left:.5em;text-align:left} /* 7.3.2 연혁 */ .item_title .year { font-size:1.5em; font-weight:900;color:#000} dl.history_list {display:flex;justify-content:space-between; align-items:flex-start; flex-wrap:wrap; margin:10px 0 30px} dl.history_list dt, dl.history_list dt + dd { padding-top:10px; border-top:1px solid #e1e1e1 } dl.history_list dt:first-child, dl.history_list dt:first-child + dd { border-top:1px solid #666 } dl.history_list dt {width:3em;padding-right:.5em; color:#000; padding-bottom:10px; font-weight:bold } .item_list.flex dl.history_list dt {margin-top:0; margin-bottom:0} dl.history_list dd {width:calc(100% - 4em); padding-left:4em; padding-bottom:10px;} dl.history_list dt + dd {padding-left:.5em} /* 7.4 특수 리스트 */ /* 7.4.1 올레차트 - 조직도 */ .group{ width:100%; margin-top:30px;} .group .dot{ position:relative; flex-wrap:wrap; display:flex; justify-content:space-between; margin:30px 0px 60px;} .group .name_card + .dot:after{content:''; position:absolute; border-top:1px dashed #929292; height:1px; bottom:-32px; width:calc(100% - 178px); left:89px;} /*.group .dot:nth-child(2):before{width:50%;left:25%;}*/ .group .dot:nth-child(3):before{width:84%; left:8%} .group .top{ color:#fff; font-weight:bold; background-color:#27aae1; border-color:#27aae1!important;} .group .top:before{ display:none;} .group .top:after{ content:''; position:absolute; border-left:1px dashed #929292; width:1px; height:181px; top:63px; left:50%; } .group .name_card{ position:relative; text-align:center; width:170px; height:60px; line-height:60px; margin:0 auto; color:#fff; border:3px solid #929292; font-weight:bold; font-size:17px; border-radius: 5px;} .group .name_card>ul{list-style:none;} .group .dot:nth-child(2) .name_card{background-color:#929292; border-color:#929292;} .group .dot:nth-child(3) .name_card{background-color:#fff; border-color:#27aae1; box-sizing:content-box; margin: 0px;} .group .dot:nth-child(3) .name_card em{ color:#27aae1; } .group .dot:nth-child(3) .name_card em>span { position: relative; top: -3px; display: inline-block; line-height: 18px; vertical-align: middle } .group .dot:nth-child(3) .name_card ul{background-color:#fff; min-height:65px;; line-height:20px; color: #333; padding:15px 0px; box-sizing:content-box; margin:3px;border:1px solid #d5d5d5; border-top:0px; font-weight: normal; font-size: 14px;} .group .dot:nth-child(3) .name_card ul li:nth-child(n+2) { margin-top:8px; } .group .dot:nth-child(2) .name_card:before{border: 0px;} .group .name_card:before{ content:''; position:absolute; border-left:1px dashed #929292; width:1px; height:32px; top:-32px; left:50%;} .group .dot:nth-child(3){width: 100%;margin: 0 auto;z-index: 9;} .group .dot:nth-child(4){width:60.2%;justify-content:space-between;margin:0px;} @media (min-width:1273px){ .group .name_card + .dot:after{ bottom: -57px;} .group .dot:nth-child(2){margin:60px 0px 100px;} .group .top:after{ height:181px; top:63px; left:50%; } .group .name_card:before{height:45px; top:-48px;} } @media (max-width:964px){ .group .name_card + .dot:after{ top: 90px;} .group .dot:nth-child(2){margin:30px 0px 50px ;} .group .dot:nth-child(3) .name_card:before{top:-29px; height: 25px;} } @media (max-width:48.75rem){ .group .dot:nth-child(2){margin:30px 0px 50px ;} } @media (max-width:588px){ .group .name_card{width:100%; box-sizing:border-box;} .group .name_card:before, .group .name_card:after{display:none} .group .dot{margin:10px 0px!important} .group .name_card + .dot:after{display:none;} .group .dot:nth-child(3){justify-content: center; width: 100%;} .group .dot:nth-child(3) .name_card{margin:5px 0px;} .group .dot:nth-child(3) .name_card:nth-child(1), .group .dot:nth-child(3) .name_card:nth-child(2){margin-bottom:120px;} } /* 7.4.2 문의처 */ .contact_list{margin-top:10px; margin-bottom:30px;font-size:1.248em} .subsection_title + .contact_list { margin-top:0} .subsection .contact_list:last-child{margin-top:10px; margin-bottom:0} .contact_item{ position:relative; display:inline-block;margin:0 .5em 10px;line-height:30px;color:#828085;color:#000; text-indent:-30px; padding-left:30px;text-align:left } .contact_item:before { content:""; display:inline-block; width:20px; height:30px; margin-right:10px; background-repeat:no-repeat;background-position:50% 50%;background-size:auto 20px; vertical-align:middle} .contact_item.mail:before{background-image:url(layout/blit_m_mail.png)} .contact_item.tel:before{background-image:url(layout/blit_m_tel.png)} .contact_item.location:before{background-image:url(layout/blit_m_location.png)} .contact_item.time:before{background-image:url(layout/blit_m_time.png)} .contact_item.web:before{background-image:url(layout/blit_m_web.png)} a.contact_item {margin:0 .5em} a.contact_item:before {margin-right:3px; } a.contact_item:link, a.contact_item:visited{text-decoration:underline; font-weight:bold} .contact_list .contact_item a:link,.contact_list .contact_item a:visited{color:#0aafed;font-weight:bold} a.contact_item:hover, a.contact_item:active, .contact_list .contact_item a:hover,.contact_list .contact_item a:active{color:#f38020} .contact_list.block .contact_item {display:block; width:calc(100% - 30px); text-align: center} .contact_list.block .contact_item.location, .contact_list.block .contact_item.time { white-space:normal} /* 7.4.3 앱 리스트 2018.01.17 */ .app_list {margin-top:20px; font-size:.8em;} .app_list>a {position:relative; display:inline-block; width:96px; height:98px; margin-bottom:2em } .app_list>a>span {position:absolute; top:100%; left:0; width:100%; display:block; } /* 7.5 기타 리스트 관련 요소 */ /* 인라인 미니리스트 */ .min_list a {white-space:nowrap} .min_list a:link, .min_list a:visited {color:#0aafed} .min_list a:hover, .min_list a:active {color:#f38020} /* 위치포인트 아이콘 및 블릿 */ .circleTxt{display:inline-block; clear:both;vertical-align:top;width:24px;height:24px;line-height:24px;margin-right:6px;border-radius:12px;background-color:#0aafed;color:#fff !important;text-align:center} .mappoint{ display:inline-block;background-image:url(main/mappoint_booth.png);background-repeat:no-repeat;} .mappoint.course {background-image:url(main/mappoint_course.png)} .mapicon{float:left;display:inline-block;width:24px;height:24px;margin-right:6px;border-radius:50%;background-size:100%;background-position:50% 50%;background-repeat:no-repeat;background-color:#0aafed;color:#fff;text-align:center} .mapblit{position:relative;line-height:1.285em;color:#535353} .mapblit:before {content:"";float:left;display:block;width:1.285em;height:1.285em;margin:0 4px;border-radius:50%;background-size:100%; background-position:50% 50%;background-repeat:no-repeat;background-color:#0aafed;color:#fff;text-align:center} .item_title.mapblit { padding-left:1.5em} .item_title.mapblit:before { position:absolute; left:0; top:0; margin:0} .item_list .mappoint{background-size:auto 100%; background-position:50% 0; color:#fff;font-weight:700;text-align:center!important} .item_list_Legend{display:flex;justify-content:space-between;align-items:center} .item_list_Legend>p{margin-bottom:10px} .item_list_Legend>p>.legend_item{position:static;height:20px; margin-bottom:0;padding-left:30px;padding-top:4px;line-height:16px;font-size:1em;background-size:auto 100%;color:#000;white-space:nowrap} .item_list.flex .item>.traffic_list{margin-left:0;margin-top:20px} /* */ /* 페이지별 후원배너 */ .support_banner{display:flex;margin-top:30px;flex-wrap:wrap; justify-content:flex-start } .support_banner span, .support_banner a{display:block;max-width:33.33%} .support_banner li img{max-width:100%} /* SNS 링크 */ .item_site{display:flex !important;line-height:30px !important} .item_site>a{display:block;width:30px;height:30px;margin-left:8px;border-radius:8px;background-color:#99a;background-position:50%;background-size:100%;background-repeat:no-repeat} .item_site>a.site_ho{background-image:url(../images/common/sns_home.png)} .item_site>a.site_fb{background-image:url(../images/common/sns_facebook.png)} .item_site>a.site_in{background-image:url(../images/common/sns_instagram.png)} .item_site>a.site_tw{background-image:url(../images/common/sns_twitter.png)} .item_site>a.site_yt{background-image:url(../images/common/sns_youtube.png)} .item_site>a.site_ks{background-image:url(../images/common/sns_kakaostory.png)} .item_site>a.site_bl{background-image:url(../images/common/sns_blog.png);background-color:#8bc725} /* 콘텐츠 - 추천하기&공유하기 */ .like_share{clear:both;width:93.75%;height:60px;margin:0 auto;border-top:1px solid #c0c0c0;border-bottom:1px solid #c0c0c0;line-height:60px} .like{float:left;display:flex} .like h3{display:block;font-size:1.286em;padding-right:40px;background-image:url(base/icon_like_3ae.png);background-repeat:no-repeat;background-position:90% 42%} .like span.count{display:block;font-size:0.777em} .like span.count strong{font-size:1.428em;font-weight:bold} .like a.like_too{position:relative;display:block;box-sizing:border-box;width:9.286em;height:30px;margin-top:15px;margin-left:9px;border-radius:5px;border:1px solid #00adee;font-size:0.777em;line-height:30px;color:#58595b;text-align:center;cursor:pointer} .like a.like_too:before{content:"";position:absolute;top:8px;left:-5px;width:5px;height:11px;background-image:url(../images/icon/like_too.png);background-repeat:no-repeat} .like a.like_too strong{color:#0aafed;font-weight:bold} .share{position:relative;display:flex;padding-left:34px;background-image:url(base/icon_share.png);background-repeat:no-repeat;background-position:0% 50%} .like_share>.share {float:right;} .share h3{position:relative;font-size:1.286em;cursor:pointer} .share h3:after{content:"하기"} .share span.count{position:relative;display:block;width:2.000em;height:28px;margin-left:12px;margin-top:16px;border:1px solid #d7d7d7;border-radius:5px;background-repeat:no-repeat;line-height:28px;text-align:center;color:#58595b;font-size:1.429em} .share span.count:before{content:"";position:absolute;top:9px;left:-5px;width:5px;height:11px;background-image:url(base/balloon_left.png);background-repeat:no-repeat} .content>.share{clear:both;float:left; margin:0 0 30px 30px; padding:0 10px 0 44px; line-height:50px; border:1px solid #e2e2e2; border-radius:30px; background-position:10px 50%} .content>.share span.count {margin-top:10px} .content>.share + .close {clear:right; position:relative;top:22px } .share_layer{float:left;position:absolute;bottom:80px;right:0px;z-index:999;display:none;box-sizing:border-box;width:415px;height:188px;border:1px solid #d6d6d6;background-color:#fff} .share_layer .sns_list{display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;padding-top:40px;overflow:hidden} .share_layer .sns_list a{display:block;width:6.428em;color:#525250} .share_layer .sns_list img{float:none;display:block;width:42px;margin:0 auto;padding:0px} .share_layer .sns_list span{display:block;text-align:center;margin-top:5px;font-size:1em;line-height:13px} .share_layer input{float:left;width:calc(100% - 4.857em - 63px);height:30px;margin:30px 0px 0px 30px;padding:3px 7px;border:solid 1px #d7d7d7;box-sizing:border-box;background:#f6f4f4;color:#000000} .share_layer .copy{float:left;box-sizing:border-box;width:4.857em;height:30px;margin-top:30px;border:1px solid #d7d7d7;border-left:0px;line-height:30px;color:#7f7f7f;text-align:center;font-weight:bold;font-size:1em} .m_call_comment{display:none} /* 댓글 */ .comment_wrap{/*clear:both;float:left;*/padding:30px 0 60px;float:none;width:93.75%;margin-left:auto; margin-right:auto} .comment_wrap .close{display:none} .comment{clear:both;padding-bottom:25px;position:relative} .comment h3{float:left;padding-left:27px;padding-bottom:6px;background-image:url(../images/icon/comment.png);background-repeat:no-repeat;background-position:0px 7px} .comment h3 span{margin-left:10px;color:#0aafed;font-weight:bold} .comment .sns_login{float:right;margin-top:4px} .comment .sns_login li{float:left;list-style:none;width:28px;height:28px;text-align:center} .comment .sns_login img{margin-top:3px} .comment .sns_login .balloontext{float:left} .cusPlaceHolder{clear:both;position:relative;box-sizing:border-box;max-width:calc(100% - 70px);height:70px} .cusPlaceHolder textarea{box-sizing:border-box;width:100%;height:70px;border:1px solid #d6d6d6;border-right:none;padding-right:70px;overflow:hidden;resize:none} .cusPlaceHolder .placeholder{position:absolute;left:14px;top:15px;width:100%;height:70px;line-height:70px;font-weight:normal;font-size:1em;color:#808285;line-height:20px} .cusPlaceHolder .placeholder.off{display:none} .logn_color{color:#0aafed} .submitbtn{position:absolute;right:0px;top:38px;box-sizing:border-box;width:70px;height:70px;padding-top:15px;border:1px solid #d6d6d6;background-color:#f6f4f4;font-weight:bold;font-size:1.143em;text-align:center} .submitbtn span{display:block;padding-top:5px;font-weight:normal;font-size:0.857em} .all_comment{clear:both} .all_comment h3{float:left;font-size:1.286em} .all_comment span.refresh{float:right;box-sizing:border-box;width:100px;height:28px;margin-bottom:5px;padding-left:18px;border:1px solid #d7d7d7;background-image:url(../images/icon/refresh.png);background-repeat:no-repeat;background-position:10px 7px;color:#7f7f7f;font-weight:bold;text-align:center;line-height:26px;font-size:1em} .all_comment ul{clear:both;border-top:1px solid #d7d7d7;overflow:hidden} .all_comment li{ position:relative;list-style:none;padding:10px 0px;border-bottom:1px solid #d7d7d7;overflow:hidden} .all_comment li a img{float:right;margin-top:7px;margin-right:7px} input[type=image] { border:none; background:none} .all_comment li .more_ctrl { position:absolute; top:0; right:0; width:30px; height:30px } .all_comment li .comment_ctrl{position:absolute; top:0; right:0; height:40px; line-height: 40px} .all_comment li .comment_ctrl button {position:relative; padding:2px 0; margin:0; float:left;font-size:13px; color:#0aafed;} .all_comment li .comment_ctrl button span { display:inline-block; border-radius:5px;padding:2px 5px; margin:6px 0; height:20px;line-height: 20px;color:#0aafed;} .all_comment li .comment_ctrl button:nth-child(n+2) { margin-left:1px} .all_comment li .comment_ctrl button:nth-child(n+2):before {content:"";position:absolute; display: inline-block; left:-1px; top:12px; width:1px; height:14px; background-color:#f2f2f2} .all_comment li .comment_ctrl button:hover span, .all_comment li .comment_ctrl button:active span { color:#fff; background:#0aafed} button, input[type=button], input[type=image], a {cursor:pointer!important} button.miniBtn { border:none; background:none; width:50px; height:20px; line-height:20px;} .all_comment div.sns_icon{float:left;margin-right:10px} .all_comment div.sns_icon img{margin:0px} .all_comment strong.name{display:inline-block;margin-top:2px;margin-bottom:5px;font-weight:bold;font-size:1em} .all_comment span{display:inline-block;margin-left:20px;font-size:0.857em;color:#808285} .all_comment p{display:block;padding-left:60px} /* 페이지네이션 */ .pagination{text-align:center;margin-top:20px} .pagination a{position:relative;display:inline-block;border:0px;width:2.142em;height:2.142em;padding:0px;background-repeat:no-repeat;background-position:50% 50%;color:#58595b;font-size:1em;line-height:2.142em;overflow:hidden} .pagination a.prev{background-image:url(base/pagination_prev.png);color:#0aafed;font-weight:bold} .pagination a.next{background-image:url(base/pagination_next.png);color:#0aafed;font-weight:bold} .pagination a.page_num.active{background-image:url(base/pagination_active.png);color:#0aafed;font-weight:bold} /* 태그&연관게시물 */ .tag, .link_posts{clear:right;float:right;font-weight:bold;padding-top:45px} .tag span{display:inline-block;padding:5px;margin:3px 4px;border:1px solid #d7d7d7;background-color:#f6f4f4;font-size:1em} .tag h3{padding-bottom:13px;padding-left:27px;background-image:url(../images/icon/sharp.png);background-repeat:no-repeat;background-position:0px 8px} .tag h3 span{margin:0px;padding:0px;border:0px;background-color:#fff;color:#0aafed;font-weight:bold} .link_posts h3{padding-bottom:13px;border-bottom:1px solid #e1e1e1} .link_posts h3 span{font-weight:bold} .link_posts ul{padding-top:5px} .link_posts li{font-size:1em;white-space:nowrap;text-overflow:ellipsis;width:255px;overflow:hidden;line-height:30px} .link_posts h3{border-bottom:1px solid #e1e1e1;background-image:url(../images/icon/link.png);background-repeat:no-repeat;padding-bottom:11px;padding-left:27px;background-position:0px 5px} .link_posts h3 span{font-weight:bold} .link_posts .push ul{padding-top:13px} .link_posts .push li{white-space:nowrap;text-overflow:ellipsis;width:255px;overflow:hidden;line-height:29px} .link_posts .push li span{padding-left:17px;padding-right:20px;font-size:0.857em;font-weight:normal;background-repeat:no-repeat} .link_posts .push li.now{font-weight:bold} .link_posts .push li span.next{background-image:url(../images/icon/next.png);background-position:1px 3px} .link_posts .push li span.Previous{background-image:url(../images/icon/previous.png);background-position:1px 5px} .link_posts .push li span.reply{padding-right:0px;margin-left:80px;background-image:url(../images/icon/reply.png);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:150px;background-position:0px 2px} /*.comment_wrap{width:calc(64% - 10px);margin-left:3.125%} .tag, .link_posts{width:calc(30% - 10px);margin-right:3.125%}*/ /*** 와이드 :1274 px ~ ***/ /*** :780 ~ 964 px ***/ @media (min-width:780px) and (max-width:964px){ /*.comment_wrap{float:none;width:93.75%;margin-right:3.125%} .tag{float:left;width:calc(93.75% - 287px);margin-left:3.125%; margin-right:0} .link_posts{width:267px}*/ } @media (max-width:964px){ ul.step_list li{width:calc(50% - 15px); margin-left:30px;} ul.step_list li:nth-child(3n+1){margin-left:30px;} ul.step_list li:nth-child(2n+1){margin-left:0;} /* 순서가 없는 정보-파트너 */ .item_list.partner .item_site{position:absolute;top:auto;bottom:20px; right:0} .item_list.partner .item_site + .item_main_img + .item_text, .item_list.partner .item_site + .item_text { padding-bottom:50px} } /*** :641 ~ 779 px (66.56% 축소) ***/ @media (max-width:48.75rem){ /* 탭 */ ul.tab_head .tablink{font-size:1.071em;width:125px;height:37px;line-height:37px; background-size:auto 185px;background-position:-3px -148px} ul.tab_head .tablink.Tab_on{background-size:auto 185px;background-position:-3px 0} /* 콘텐츠 바디 영역 */ .content{position:static} .content .like_share{position:fixed;z-index:99;bottom:0;left:0;right:0;width:calc(100% - 20px);height:40px;padding:0 10px;background-color:#808285;line-height:40px} .floatLeft{float:none;width:100%} ul.step_list li{width:100%} .like h3, .like a.like_too span,.share h3, .share span.count:before{display:none} .like a.like_too{order:1;width:auto;height:40px;margin:0;padding-left:30px;padding-right:10px;border:0;font-size:1.286em;line-height:40px} .like a.like_too:before{left:0;width:20px;height:24px;background-image:url(base/icon_like_fff.png)} .like a.like_too strong,.share h3{color:#fff} .like .count{order:2;color:#fff} .like_share>.share{background-image:url(base/icon_share_fff.png)} .like_share .share span.count, .m_call_comment span.count{width:auto;height:40px;margin:0;border:0;line-height:40px;color:#fff;font-size:1.286em} .share_layer{position:fixed;bottom:45px;right:10px;width:280px;height:auto;padding-bottom:20px} .share_layer .sns_list{width:100%;padding-top:20px} .share_layer .sns_list a{width:120px;padding:12px 8px} .share_layer input{width:calc(100% - 4.857em - 43px);margin:20px 0px 0 20px;padding:3px 7px;border:solid 1px #d7d7d7;box-sizing:border-box;background:#f6f4f4;color:#000000} .share_layer .copy{margin-top:20px} .content>.share { margin: 0 0 15px 15px;height:52px; background-position:50% 50%} .content>.share + .close { top:9px} .content>.share h3, .content>.share span.count {display:none} .m_call_comment{float:right;display:block;height:40px;padding-left:30px;padding-right:10px;background-image:url(base/icon_comment_fff.png);background-position:0 50%;background-repeat:no-repeat;line-height:40px} .comment_wrap{position:absolute;z-index:800;top:0;left:0;right:0;bottom:0;display:none;width:calc(100% - 20px);padding:10px;margin:0;background-color:#fff} .comment_wrap.m_show{display:block} .comment_wrap .close{position:absolute;z-index:801;top:0;right:0;display:block; width:40px; height:40px; } .comment_wrap .close a{display:block;width:39px;height:39px;border-top:0;border-bottom:1px solid #e0e0e0;border-left:1px solid #e0e0e0;background-image:url(base/contents_close_2.png); background-size:80px 80px; background-position:-20px -20px} .comment h3{float:none;background-position:0 0} .comment h3 .m-only{display:inline-block;font-weight:700; max-width:9em; vertical-align:bottom;overflow:hidden;text-overflow:ellipsis; white-space:nowrap; margin-right:.5em;} .comment .sns_login{float:none;margin-top:20px;margin-bottom:10px} .all_comment p{padding-left:0} .submitbtn{top:83px} .tag, .link_posts{float:none;width:93.75%; margin-left:3.125%;margin-right:3.125%} .tag h3, .link_posts h3{padding-top:8px;padding-bottom:8px;border-top:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;background-size:1em;background-position:0 50%} .tag h3{margin-bottom:10px} ul.step_list li:nth-child(n){margin-left:0;} .item_list.audio .item_title { white-space:nowrap; padding-right:40px} .item_list.audio .mappoint + span, .item_list.audio a.download span {display:none} .item_list.audio .title { font-size:.857em; max-width:calc(100% - 60px ); over-flow:hidden} .item_list.audio .title:after{content:""} .item_list.audio .item_contents { padding:20px 10px} } @media (min-width:589px) and (max-width:48.75rem){ .item_list.flex{justify-content:space-between} .item_list.flex .item{width:calc(50% - 15px); margin-left:30px} .item_list.flex .item:first-child, .item_list.flex .item:nth-child(2n+1){margin-left:0} .item_list.flex .item:nth-child(2n+2){margin-left:30px} .item_list.flex.col2 .item, .item_list.flex.col2 .item:nth-child(2n+1), .item_list.flex.col2 .item:nth-child(3n+1){width:100%;margin-left:0 } .item_list.flex.withRead .item:first-child { width:100%; margin-left:0} .item_list.flex .item:nth-child(2n+2){margin-left:30px} .item_list.flex .item:nth-child(2n+1){margin-left:0} } @media (max-width:588px){ /* 탭 */ ul.tab_head .tablink{font-size:1em;width:auto; padding:0 7px} .step_head .tablink{display:block;height:4.8em; width:4.8em;padding-top:2.5em;background-position:50% -200px} .step_head .tablink>span{text-transform:uppercase;font-size:.857em} .step_head .tablink>strong{width:1px;height:1px;overflow:hidden} .step_head .tablink.Tab_on{width:7.5em;height:7.5em;padding-top:3.5em;background-position:50% 5px} .step_head .tablink.Tab_on>strong{width:auto;height:auto;overflow:hidden} .item_list.flex{display:block} .item_list.flex .item.only-img{text-align:center} .item_list.flex .item, .item_list.flex.col2 .item, .item_list.flex.col2 .item:nth-child(2n+1), .item_list.flex.col2 .item:nth-child(3n+1){width:100%;margin-left:0 } /* 문의처 */ .contact_list{} .contact_list.block{text-align:left} .contact_list .contact_item{display:inline-block;width:auto; margin:0 0 10px; word-break:keep-all;white-space:normal; text-align:left} /* 순서가 없는 정보-파트너 */ .item_list.partner>.item{display:block; text-align:center} .item_list.partner .mappoint{display:inline-block;position:static;margin:0 0 10px} .item_list.partner .item_main_img{display:flex;justify-content:center;align-items:center;width:100%; padding:0;margin-right:0;border:none} .item_list.partner .item_main_img img {max-height:150px} .item_list.partner .item_title{ position:static;width:100%;left:auto;top:185px;text-align:center} .item_list.partner .item_title em {display:none;} .item_list.partner .item_title.block em {display:block;} .item_list.partner .item_text{width:100%;padding-top:15px} .item_list.partner .item_site + .item_main_img + .item_text, .item_list.partner .item_site + .item_text { padding_bottom:45px} .item_list.partner .item_site{left:0;justify-content:center} /* 페이지별 후원배너 */ .support_banner{display:block} .support_banner span, .support_banner a{margin:0 0 5px;text-align:center;width:100%} } /* 스크롤 리모컨 */ .side_remote { position:fixed; z-index:601; bottom:10px; right:10px; -webkit-transition: .3s;-moz-transition: .3s;transition: .3s;} .side_remote a { position:relative; display:block; height:36px; width:36px; margin:5px 0; border:2px solid #777; border-radius:50%; background-color:#fff; opacity:.7; -webkit-transition: .3s;-moz-transition: .3s;transition: .3s;} .side_remote a:hover, .side_remote a:active { opacity:1} .side_remote a:before { content:""; position:absolute;top:calc(50% - 10px); left:calc(50% - 10px); width:20px; height:20px; background-repeat:no-repeat;} .btn_commlink_top:before { background-image:url(layout/item_toggle1.png); background-position:0 50%} .btn_commlink_bottom:before {background-image:url(layout/item_toggle1.png); background-position:-20px 50%} .btn_commlink_back:before {background-image:url(layout/btn_close.png); background-position:50% 50%} .btn_commlink_close:before {background-image:url(layout/btn_back.png); background-position:50% 50%} @media (max-width:48.75rem){ .side_remote {bottom:43px; } } /*-------------------------------------------------------------- 8.0 게시판 및 게시판 응용 프로그램 ----------------------------------------------------------------*/ /* 8.1 게시판 리스트 */ /* 8.1.3 목록형 */ .Notice td{font-weight:bold;} .Notice td:first-child{color:#0aafed} table.basic, table.bbs_list{width:100%} table.basic thead th, .bbs_list thead th{padding:15px .2em;border-top:1px solid #c0c0c0; border-bottom:1px solid #c0c0c0;vertical-align:middle} table.basic tbody th, table.basic tbody td{position:relative; padding: 15px .2em;padding-right:.2em;border-bottom:1px solid #e1e1e1;vertical-align:middle; text-align:left} table.basic tbody.center th, table.basic tbody.center td, table.basic tbody td.center { text-align:center} table.basic.div_col td:nth-child(n+2),table.basic.div_col th:nth-child(n+2){ border-left:1px dashed #e2e2e2} table.basic.div_col td>ul { width:calc(100% - 20px); margin:0 auto;} .bbs_list tbody td{position:relative; padding-top:10px;padding-bottom:10px; padding-left:.2em;padding-right:.2em;border-bottom:1px solid #e1e1e1;vertical-align:middle;} .bbs_list thead th, .bbs_list tbody td{ width:8em; font-size:.8571em;text-align:center;} .bbs_list tbody tr.Notice td {font-weight:bold} .bbs_list thead th:first-child, .bbs_list tbody td:first-child, .bbs_list thead th:last-child, .bbs_list tbody td:last-child {width:5em} .bbs_list thead th:nth-child(2), .bbs_list tbody td:nth-child(2) {width:calc(100% - 28em);font-size:1em;text-align:justify} .bbs_list.notice thead th:nth-child(2), .bbs_list.notice tbody td:nth-child(2) {width:calc(100% - 19.6em)} .bbs_list.useCategory thead th:nth-child(2), .bbs_list.useCategory tbody td:nth-child(2) {width:8em} .bbs_list.useCategory tbody td:nth-child(2) {color:#777} .bbs_list.useCategory thead th:nth-child(3), .bbs_list.useCategory tbody td:nth-child(3) {width:calc(100% - 36.4em);font-size:1em;text-align:justify} .bbs_list.useCategory.notice thead th:nth-child(3), .bbs_list.useCategory.notice tbody td:nth-child(3) {width:calc(100% - 28em)} .bbs_list tbody td date{display:block; padding:2px;} .bbs_list.entry tbody td:last-child{font-size:1em;color:#0aafed} .comment_vol{display:inline-block;font-size:12px;font-weight:bold;color:#0aafed} .comment_vol:before{content:"["} .comment_vol:after{content:"]"} @media (max-width:964px) and (min-width:780px){ .bbs_list thead th, .bbs_list tbody td{ width:7em;} .bbs_list thead th:nth-child(2), .bbs_list tbody td:nth-child(2) {width:calc(100% - 14.8em)} .bbs_list.notice thead th:nth-child(2), .bbs_list.notice tbody td:nth-child(2) {width:calc(100% - 7.4em)} .bbs_list.useCategory thead th:nth-child(2), .bbs_list.useCategory tbody td:nth-child(2) {width:7em} .bbs_list.useCategory thead th:nth-child(3), .bbs_list.useCategory tbody td:nth-child(3) {width:calc(100% - 22.2em)} .bbs_list.useCategory.notice thead th:nth-child(3), .bbs_list.useCategory.notice tbody td:nth-child(3) {width:calc(100% - 14.8em)} .bbs_list.useCategory.entry thead th:nth-child(3), .bbs_list.useCategory.entry tbody td:nth-child(3) {width:calc(100% - 26.6em)} .bbs_list.useCategory.notice.entry thead th:nth-child(3), .bbs_list.useCategory.notice.entry tbody td:nth-child(3) {width:calc(100% - 19.2em)} .bbs_list th:nth-child(1),.bbs_list td:nth-child(1), .bbs_list th:last-child, .bbs_list td:last-child{display:none} .bbs_list.entry th:last-child, .bbs_list.entry td:last-child{display:table-cell !important; width:4em;} } @media (max-width:48.75rem){ .bbs_list thead th:nth-child(2), .bbs_list tbody td:nth-child(2) {width:calc(100% - 7.4em)} .bbs_list.notice thead th:nth-child(2), .bbs_list.notice tbody td:nth-child(2) {width:100%} .bbs_list.useCategory thead th:nth-child(2), .bbs_list.useCategory tbody td:nth-child(2) {width:7em} .bbs_list.useCategory thead th:nth-child(3), .bbs_list.useCategory tbody td:nth-child(3) {width:calc(100% - 14.8em)} .bbs_list.useCategory.notice thead th:nth-child(3), .bbs_list.useCategory.notice tbody td:nth-child(3) {width:calc(100% - 7.4em)} .bbs_list.useCategory.entry thead th:nth-child(3), .bbs_list.useCategory.entry tbody td:nth-child(3) {width:calc(100% - 19.2em)} .bbs_list.useCategory.notice.entry thead th:nth-child(3), .bbs_list.useCategory.notice.entry tbody td:nth-child(3) {width:calc(100% - 11.8em)} .bbs_list th:nth-child(1),.bbs_list td:nth-child(1), .bbs_list th:last-child, .bbs_list td:last-child, .bbs_list th:nth-child(n+4), .bbs_list td:nth-child(n+4), .bbs_list.notice th:nth-child(3), .bbs_list.notice td:nth-child(3){display:none} .bbs_list.useCategory th:nth-child(4), .bbs_list.useCategory td:nth-child(4), .bbs_list.useCategory.entry th:nth-child(3), .bbs_list.useCategory.entry td:nth-child(3), .bbs_list.useCategory.entry th:nth-child(4), .bbs_list.useCategory.entry td:nth-child(4){display:table-cell} .bbs_list.useCategory.entry.notice th:nth-child(4), .bbs_list.useCategory.entry.notice td:nth-child(4){display:none} .bbs_list.entry th:last-child, .bbs_list.entry td:last-child{display:table-cell !important; width:4em;} } /* 8.1.3 Gallery형 */ .bbs_gallery_list{padding:30px 0 5px;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;border-bottom:1px solid #c0c0c0;} .gal_item{display:block;margin-top:20px; margin-bottom:20px; margin-left:calc(16.66% - 120px); margin-right:calc(16.66% - 120px);width:180px;line-height:20px;text-align:center} .gal_item>a {display:flex;justify-content:center;align-items:flex-end;width:100%; height:180px; } .gal_item>a>img{max-width:180px;max-height:180px;} .gal_item>div strong, .gal_item>span strong {display:block;margin:10px 0 7px;font-weight:bold;font-size:1.286em;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} .gal_item>div span, .gal_item>span div {display:block; font-weight:normal;color:#808285;font-size:0.857em} .gal_item>div span.price {font-weight:bold} .gal_item>div span em, .gal_item>span div em {font-weight:bold;margin-right:5px} .Newsletter .gal_item {margin-bottom:30px} .Newsletter .gal_item>a>img{border:1px solid #d8d8d8;padding:5px} .Newsletter .gal_item>span{display:block;margin:10px auto 7px;width:182px; text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;} @media (min-width:1273px){ .gal_item{margin-left:calc(16.66% - 160px); margin-right:calc(16.66% - 160px);width:240px;} } @media (min-width:964.1px){ .gal_item:nth-child(4-n){margin-top:0px} .gal_item:nth-child(4n+1){margin-left:0} .gal_item:nth-child(4n){margin-right:0} } @media (min-width:780px) and (max-width:964px){ .gal_item{margin-left:calc(25% - 135px); margin-right:calc(25% - 135px)} .gal_item:nth-child(3n+1){margin-left:0} .gal_item:nth-child(3n){margin-right:0} } @media (min-width:520.1px) and (max-width:48.75rem){ .gal_item{margin-left:calc(25% - 120px); margin-right:calc(25% - 120px);width:240px;height:240px} } @media (min-width:400.1px) and (max-width:520px){ .gal_item{margin-left:calc(50% - 180px); margin-right:calc(50% - 180px);width:180px} .gal_item:nth-child(2n+1){margin-left:0} .gal_item:nth-child(2n){margin-right:0} } @media (max-width:400px){ .bbs_gallery_list {display:block} .gal_item{margin-left:auto; margin-right:auto; margin-bottom:30px;width:300px} .gal_item a { height:auto} } /* 8.1.4 반응형 테이블 - 장소리스트 */ /*↓↓↓차후 지울 것 ↓↓↓/**/ .store_header, .store_body li{border-bottom:1px solid #dfdfdf;padding:15px 0px; list-style:none} .store_header em{display:inline-block;font-weight:bold;text-align:left} .store_body em{display:inline-flex; justify-content:flex-start; align-items:center;text-align:left; min-height:38px;} /**/ .responTable>div:nth-child(1), .responTable>div:nth-child(2) li { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #dfdfdf;padding:15px 0px; list-style:none} .responTable>div:nth-child(1) em {display:block;font-weight:bold;text-align:left} .responTable>div:nth-child(2) li>a, .responTable>div:nth-child(2) li>em,.responTable>div:nth-child(2) li>div,.responTable>div:nth-child(2) li>p{display:block;/*display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;*/text-align:left; min-height:38px;} .responTable>div:nth-child(2) a:link, .responTable>div:nth-child(2) li:visited {color:#000;} .store_body em{display:inline-flex; justify-content:flex-start; align-items:center;text-align:left; min-height:38px;} .store_body .mappoint, .item_list .mappoint {display:inline-block;width:38px;height:38px; line-height:32px;font-size:1em; background-size:auto 100%; background-position:50% 0; color:#fff;font-weight:700;text-align:center!important; letter-spacing:-0.02em;white-space:nowrap; overflow:visible;} .store_header .route {width:calc(4.3em + 38px)} .store_body .route{width:4.3em} .store_body .route strong{display:block} .store_header .name, .store_body .name{width:18.5em} .store_body .name{font-weight:700} .store_body a.name:hover, .store_body a.name:active { text-decoration:underline} .store_header .address, .store_body .address{width:calc( 100% - 4.3em - 18.5em - 8em - 58px )} .store_header .tel, .store_body .tel{width:8em} @media (min-width:1273px){ .store_header .route {width:calc(5em + 38px)} .store_body .route{width:5em} .store_header .name, .store_body .name{width:19em} .store_header .address, .store_body .address{width:calc( 100% - 5em - 19em - 8em - 58px )} } @media (max-width:588px){ .responTable>div:nth-child(1).store_header{display:none} .responTable>div:nth-child(2) li { display:block; position:relative} .responTable>div:nth-child(2) li>em{ min-height:24px;} .store_body .name, .store_body a.name:link, .store_body a.name:visited {color:#0aafed !important; font-size:1.114em; } .responTable>div:nth-child(2) li>a.name { min-height:1.5em} .store_body .name, .store_body .address, .store_body .tel{width:calc( 100% - 38px);display:block;padding-left:38px} .store_body .mappoint {position:absolute;} .responTable>div:nth-child(2) li>em.route { display:none} } @media (min-width:780px) and (max-width:964px){ .store_header .route {width:calc(3.7em + 38px)} .store_body .route{width:3.7em} .store_header .name, .store_body .name{width:17em} .store_header .address, .store_body .address{width:calc( 100% - 3.7em - 17em - 8em - 58px )} } @media (min-width:589px) and (max-width:48.75rem){ .store_header .route {width:calc(3.5em + 38px)} .store_body .route{width:3.5em} .store_header .name, .store_body .name{width:9.8em} .store_header .address, .store_body .address{width:calc( 100% - 3.5em - 9.8em - 8em - 58px )} } /* 8.2 상세보기 */ /* 8.2.1 기본형 */ .content_view_header .title{} .board_view_header{position:relative} .board_view_header .back_bt{display:none;width:29px;height:29px;border-radius:50%;border:1px solid #cfcfcf;vertical-align:middle;line-height:29px} .board_view_header .back_bt img{margin-top:6px;margin-left:8px} .board_view_header .title{background-image:url(../images/board/NewsLetter_icon.png);background-repeat:no-repeat;padding-left:30px;font-weight:bold;font-size:1.429em;margin-bottom:17px} .board_view_header .head_bar{display:flex;justify-content:space-between;border-top:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf;padding:10px 0} .board_view_header .name_date{display:flex;justify-content:space-between;line-height:1.5em; padding:10px 0} .board_view_header span.name{display:block;color:#000;position:relative;padding-right:40px} .board_view_header span.name em{font-weight:700;color:#000} .board_view_header span.name:after, .board_view_header a.name:after{display:inline-block;width:34px;height:24px;margin-left:.3em;background-repeat:no-repeat;vertical-align:middle} .memberOlle:after{content:'';background-image:url(../images/board/Board_Name.png)} .board_view_header span.date{display:block; color:#808285;position:relative} .board_view_header .post_title{padding:15px 0;font-size:2em;color:#000; font-weight:700;line-height:36px} /* layout-contents의 subsection_title과 동일 디자인*/ .board_view_header .info{position:absolute;top:15px;right:0;display:flex;height:36px;justify-content:flex-end;align-items:center;flex-wrap:wrap} @media (max-width:964px){ .board_view_header .post_title{text-align:center} .board_view_header .info{position:static;justify-content:center} } .content_body:nth-child(1n+3) .board_view_header{padding-bottom:5px;border-bottom:1px solid #c0c0c0} .content_body:nth-child(1n+3) .board_view_header .info{right:30px} .board_view_header + .board_view_con { padding:30px 0} .board_view_con>div[class=""] {text-align:justify;font-size:1.071em;line-height:1.4em} .board_view_con>div[class=""] table {text-align:left} .board_view_con>div[class=""] h1,.board_view_con>div[class=""] h2,.board_view_con>div[class=""] h3,.board_view_con>div[class=""] h4,.board_view_con>div[class=""] h5,.board_view_con h6 { margin:2em 0 1em} .board_view_con>div[class=""] ul[class=''] { margin:1em 0} .board_view_con>div[class=""] p, .board_view_con>div[class=""] li, .board_view_con>div[class=""] dt, .board_view_con>div[class=""] dd { margin:.5em 0; line-height:1.4em} .board_view_con>div[class=""] strong, .board_view_con>div[class=""] b{ font-weight: bold} .board_view_con>div[class=""] em, .board_view_con>div[class=""] u{ text-decoration: underline} .board_view_con .img{margin:10px auto;max-width:43.214em} .board_view_con .img img{max-width:100%} .board_view_con div#cmt b, .board_view_con div#cmt strong { font-weight: bold} .Attach{border:3px solid #0aafed;max-width:100%; width:450px; min-height:2.857em;margin:30px auto;text-align:left;box-sizing:border-box} .Attach span.count{display:block;height:40px;line-height:40px;padding-left:10px;box-sizing:border-box} .Attach span.count em{color:#0aafed;font-weight:bold} .Attach span.count a{ float:right;padding:9px} .Attach span.count a:before{ content:""; display:block; background-image:url(../images/board/Attachments_Close.png);background-repeat:no-repeat;width:19px;height:19px;} .Attach span.count a.remove:before{background-position:-19px 0px} .Attach span.download{position:relative;border-top:1px dashed #d6d6d6;padding:calc(25px - .75em) 40px calc(25px - .75em) 35px;overflow:hidden;min-height:1.5em;line-height:1.5em;display:block;color:#0aafed;text-decoration:underline} .Attach span.download:before{content:'';position:absolute;background-image:url(../images/board/Attachments_Icon.png);background-repeat:no-repeat;width:14px;height:14px;left:12px;top:19px} .Attach span.download a{position:absolute; top:calc(50% - 20px); right:0; display:block; width:40px; height:40px; line-height:40px; text-align:center; background-color: #fff} .board_view+.btnSet.final{margin:30px 0} .section_title{font-size:2em;display:block;height:80px;line-height:80px;padding-left:40px;box-sizing:border-box;border-top:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf;background-image:url(../images/festival/festival_plus.png);background-repeat:no-repeat;background-position:0px 27px; color:#0aafed; font-weight: bold; } .recommlist_food .section_title {background-image:url(apimap/marker_food_2.png)} .recommlist_accomm .section_title {background-image:url(apimap/marker_accomm_2.png)} .recommlist_view .section_title {background-image:url(apimap/marker_enjoy_2.png)} .infolist_olle .section_title {background-image:url(apimap/marker_courseInfo.png)} .infolist_little .section_title {background-image:url(apimap/marker_courseLittleinfo.png)} .infolist_clean .section_title {background-image:url(apimap/marker_courseCleanInfo.png)} .section_title a{ float:right;background-image:url(../images/festival/program_close.png);background-repeat:no-repeat;width:20px;height:20px;margin-top:30px} .section_title a.remove{background-position:-20px 0px} @media (max-width:48.75rem){ .board_view_header .name_date{display:block} } @media (max-width:588px){ .content_body:nth-child(1n+3) .board_view_header{border-bottom:none} .board_view_header .back_bt{display:block;position:absolute;top:5px} .board_view_header .title{margin:0px;padding-left:35px;background-image:none} .board_view_header .head_bar{display:block;border:0px;padding:0px} .board_view_header .info{border-top:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf;height:36px;margin-top:10px;justify-content:center} .board_view_header .info_item{font-size:0.929em;margin:10px 10px;height:18px;line-height:18px;padding-left:22px} .board_view_header .info_item:after{height:15px;left:-10px;top:1px} .board_view_header .btn_view, .board_view_header .btn_comt, .board_view_header .btn_shar, .board_view_header .btn_like{background-size:18px} .board_view_con .img{padding:9px} .board_view_header + .board_view_con{padding:60px 0 30px} .section_title{font-size:1.429em;height:50px;line-height:50px;background-position:0px 10px} .section_title a{margin-top:13px} } /* 8.2.2 문의하기 */ .view_answer{ padding:30px 0;border-top:1px dashed #e1e1e1} .view_answer:last-child{border-bottom:1px solid #e1e1e1} .answer_header{position:relative;height:30px;line-height:30px;margin-left:60px;overflow:visible} .answer_header .name{font-weight:bold;margin-right:.5em} .answer_header .name+span{color:#808286} .answer_header .sns_icon{position:absolute;left:-60px;top:0;width:50px;height:50px} .answer_body{position:relative;margin-left:60px} .answer_body.html_view{padding-top:0;padding-bottom:0} /* 8.2.3 축제 */ .Festival .board_view_con{padding:30px 0px;} .Festival #program .section_title:first-child{border-top:none} .fastival_summary{ margin:30px 0; padding:30px 0} .fastival_summary .img{padding:23px;margin:0 auto;max-width:43.214em;margin-bottom:20px;border-style:none} .fastival_summary .img img{width:100%} .fastival_summary .location, .fastival_summary .date{ position:relative; margin-bottom:20px;text-align:left;line-height:24px;font-size:1.286em} .fastival_summary .date, .fastival_summary .location {padding-left:calc(35px + 5em)} .fastival_summary .location strong, .fastival_summary .date strong{ position:absolute;left:0; display:inline-block; width:5em;height:24px;padding-left:30px; margin-bottom:10px;font-weight:bold;vertical-align:middle;background-repeat:no-repeat;background-position:0 50%;} .fastival_summary .location strong{background-image:url(layout/blit_m_location.png)} .fastival_summary .date strong{background-image:url(layout/blit_m_date.png)} .fastival_summary .location p, .fastival_summary .date p{line-height:1.2em; } .fastival_summary .location span:nth-child(n+2):before{content:", "} .fastival_summary .board_view_con { margin:30px 0} @media (max-width:588px){ .fastival_summary .location, .fastival_summary .date {font-size:1.0714em; line-height:1.3em} } @media (max-width:420px){ .fastival_summary .location, .fastival_summary .date {padding-left:0;} .fastival_summary .location strong, .fastival_summary .date strong {position:static; display:block; height:1.3em; background-size:auto 1.3em; padding-left:25px; margin-bottom:3px;} } /* 8.2.4 축제 프로그램 */ .program_list{width:100%;margin:0 auto;text-align:left;box-sizing:border-box} .program_list .item_list .item{margin-top:10px; margin-bottom:10px } .program_list .item_list .item:nth-child(n+2){border-top:1px dashed #e2e2e2} .program_list .item_list .item_title{position:absolute;left:calc(17.0295em + 170px);margin-top:20px;margin-bottom:10px; font-weight: bold} .program_list .item_list .item_summary{width:21.429em} .program_list .item_list .item_main_img{position:relative;padding:0 20px; width:138px; height:92px; } .program_list .item_list .item_main_img:after { content:""; position:absolute; top:0; left:20px; z-index:-1;width:138px; height:92px; background-image:url(layout/noimage_600x400.png); background-repeat:no-repeat; background-size:300px 200px; background-position:50% 50%} .program_list .item_list .item_main_img img {width:100%; height:100%} .program_list .item_list .item_text{width:calc(100% - 21.439em - 180px);padding-top:calc(30px + 1.286em)} .program_list .item_list div{margin-top:20px;float:left;display:block} .item_summary .time, .item_summary .location{margin-right:5px;margin-bottom:8px;padding-left:84px;text-indent:-59px;line-height:22px;background-repeat:no-repeat;background-position:0 2px} .item_summary .time strong, .item_summary .location strong{margin-right:5px;font-weight:bold} .item_summary .time{background-image:url(layout/blit_s_time.png)} .item_summary .location{background-image:url(layout/blit_s_location.png)} @media (min-width:780px) and (max-width:964px){ .program_list .item_list .item_title{position:static;padding-top:0} .program_list .item_list .item_summary{width:14.286em} .program_list .item_list .item_text{width:calc(100% - 14.286em - 180px);padding-top:0px} } @media (min-width:589px) and (max-width:48.75rem){ .program_list .item_list .item_title{position:static;padding-top:0} .program_list .item_list .item_summary{width:10em} .program_list .item_list .item_text{width:calc(100% - 10em - 180px);padding-top:0px} .item_summary .time, .item_summary .location{padding-left:20px;text-indent:0} .item_summary .location:last-child{margin-bottom:0px} .item_summary .location strong{display:block;margin:0px} } @media (max-width:588px){ .program_list .item_list .item_title{position:static;padding-top:0} .program_list .item_list .item_summary{width:calc(100% - 140px - 5px);margin-left:5px;margin-top:0px;float:right} .program_list .item_list .item_main_img{float:left;margin:0px;padding:0px; width:132px; height:88px;} .program_list .item_list .item_main_img:after {left:0; width:132px; height:88px;} .program_list .item_list .item_text{width:100%;padding:0px} .program_list .item_list .item_title{display:block;font-size:1.286em;font-weight:bold;margin-top:20px} .item_summary .time, .item_summary .location{padding-left:20px;text-indent:0} .item_summary .location:last-child{margin-bottom:0px} .item_summary .location strong{display:block;margin:0px} } /* 8.2.5 기념품 */ .thumb_info + .html_view, .thumb_info + .detail { padding-top:30px; padding-bottom:30px; line-height:1.4em} .thumb_info{ overflow:hidden;border-bottom:1px solid #e2e2e2;padding:30px 0; height:346px;} .thumb_info .thumb_wrap{float:left;position:relative;display:block;overflow:hidden;box-sizing:border-box; min-width:420px; width:calc(50% - 20px) } .thumb_info .thumb_wrap .thumb{width:100%;height:280px; margin-bottom:10px;display:table;text-align:center;box-sizing:border-box} .thumb_info .thumb_wrap .thumb img{max-width:100%;max-height:280px; margin:0 auto} .thumb_info .thumb_wrap ul{margin:0 auto;display:table;border-spacing:7px 0px;border-collapse:separate} .thumb_info .thumb_wrap li{display:table-cell;border:1px solid #dfdfdf;min-width:6.4em;max-width:calc(25% - 5.5px); height:4.4em;list-style:none;box-sizing:border-box;vertical-align:middle} .thumb_info .thumb_wrap li img{max-width:6em;max-height:4em} .thumb_info .navCtrl { position:absolute; top:50%;left:0;right:0;height:0} .thumb_info .navCtrl a {position:absolute; height:0; width:0; background-color:rgba(0,0,0,.3)} .thumb_info .navCtrl a.prev {left:0} .thumb_info .navCtrl a.next {right:0} .thumb_info .info {position:relative;float:left;text-align:left;margin-left:40px;width:calc(50% - 20px); max-width:calc(100% - 460px); height:100%} .thumb_info .info p{font-weight:bold;font-size:1.429em;border-bottom:1px solid #dfdfdf;padding-bottom:20px} .thumb_info .info dl{margin-top:20px} .thumb_info .info dt{float:left;clear:both;width:5em;font-weight:bold} .thumb_info .info dd{width:calc(100% - 5em - 4px); margin-left:calc(5em + 4px); margin-bottom:20px;} .thumb_info .btnSet{ margin-top:60px; } .thumb_info .btnSet a{display:inline-block; width:120px; } .thumb_info a.btnBuy{background-color:#0aafed;border-radius:5px;width:125px;height:40px;line-height:40px;color:#fff;font-weight:bold;text-align:center} .thumb_info a.btnView{background-color:#fff;border-radius:5px;width:125px;height:40px;line-height:40px;color:#0aafed;font-weight:bold;text-align:center;border:1px solid #0aafed;box-sizing:border-box} @media (max-width:964px){ .thumb_info{height:auto; padding:30px 0 0; } .thumb_info .thumb_wrap{float:none;width:100%;text-align:center} .thumb_info .thumb_wrap .thumb{margin:0 auto 10px} .thumb_info .info{float:none;width:100%;max-width:100%;margin:30px 0px} .thumb_info .info dl {text-align:center;} .thumb_info .info dt{float:none;clear:both;width:100%;font-weight:bold;} .thumb_info .info dd{width:100%; margin-left:0; margin-bottom:20px;} .thumb_info .btnSet{ position:relative;margin-top:30px} } @media (max-width:440px){ .thumb_info .thumb_wrap{min-width:300px} .thumb_info .thumb_wrap .thumb {height:200px} .thumb_info .thumb_wrap ul {width:100%} .thumb_info .thumb_wrap li{min-width:60px} .thumb_info .thumb_wrap li img{max-width:calc(100% - 4px);max-height:40px} } .detail{padding-bottom:30px;position:relative} .detail ul.tab_head{margin:0px;top:-50px} .detail img{display:block;margin:0 auto} .detail .program_list{margin-top:0px} .map_area{background-image:url(../images/eventMemorial/map.jpg);width:100%;height:700px} @media (min-width:780px) and (max-width:964px){ .detail ul.tab_head{margin:0px;top:-50px} } @media (max-width:48.75rem){ ul.tab_head{position:absolute;bottom:-1px;left:0;right:0} } @media (min-width:589px) and (max-width:779px){ .detail{padding:20px 0px} .detail img{max-width:39.286em} .map_area{height:300px} } @media (max-width:588px){ .detail{padding:20px 0px} .detail img{max-width:21.429em} .map_area{height:115px} } @media (max-width:588px){ .detail ul.tab_head{margin:0px;top:-37px;bottom:auto} } /* 8.2.6 볼거리 */ .contSummary{display:flex;margin:20px 0px;justify-content:space-between;align-items:center} .contSummary>ul{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start} .contSummary>ul>li{margin-right:20px;padding:5px 0;min-height:20px;min-height:20px;line-height:20px;font-size:1.1428em;list-style:none;text-align:left} .contSummary>ul>li>.label{position:relative;display:inline-block; padding-right:1.2em; font-weight:bold;} .contSummary>ul>li>.label:after{content:":";position:absolute;top:0;right:.4em} .contSummary input[type=button].btn4{font-size:1.2857em;width:10em;padding:10px} .contPhoto {position:relative;text-align:center;margin:20px 0px;background-color:#222; height:500px; overflow:hidden} .contPhoto div, .contPhoto .looper-inner {display:flex;justify-content:center;align-items:center;width:100%; height:100%} .contPhoto .looper-inner .item {width:100%; height:100%} .contPhoto div img, .contPhoto .looper-inner img{display:block;max-width:100%;max-height:100%; margin:auto} .contPhoto p,.contPhoto nav ul{position:absolute; z-index:5;bottom:0;left:0;right:0;list-style:none;padding:10px 0;height:60px;line-height:70px;background-color:rgba(0,0,0,.7);} .contPhoto p a,.contPhoto nav li{display:inline-block;margin:0 3px; width:85px; height:60px;} .contPhoto p a img,.contPhoto nav li img{width:100%;height:100%} .contPhoto .navCtrl {width:100%; height:0; padding:0; overflow:visible} .contPhoto .navCtrl>a{ position:absolute; bottom:0; box-sizing:border-box; width:35px; height:80px; background-color:rgba(0,0,0,.7); background-repeat:no-repeat; background-position:50%; background-size:20px 20px; padding-top:30px; opacity:.7} .contPhoto .navCtrl>a>span{ color:#fff; font-size:8px;} .contPhoto .navCtrl>a.prev {left:0; background-image:url(base/naviCtrl_prev.png)} .contPhoto .navCtrl>a.next {right:0; background-image:url(base/naviCtrl_next.png)} .contIntro2 dl{padding:20px 0px 15px 0px;border-bottom:1px solid #EFEFEF} .contIntro2 dl dt{float:left;width:20%;font-weight:bold} .contIntro2 dl dd{padding:0px 0px 10px 0px;margin-left:20%} .contIntro2 dl dd.lineBottom{margin-bottom:10px;border-bottom:1px solid #EFEFEF} .contDetaile .html_view {padding-top:10px} @media (min-width:1273px){ .contPhoto { height:600px;} } @media (min-width:965px){ } @media (max-width:964px){ .contSummary{align-items:flex-end} .contSummary>ul{display:block} } @media (min-width:589px) and (max-width:48.75rem){ .contPhoto { height:400px;} } @media (max-width:588px){ .contSummary{display:block} .contSummary>.btnSet{text-align:center;margin:20px 0} .contPhoto{height:300px;padding-bottom:60px} .contPhoto p{padding:5px;height:50px;line-height:50px;background-color:#000} .contPhoto p a{margin:0} .contPhoto p a img{width:72px;height:50px} } /* 8.2 Form UI */ /* 8.2.1 검색폼 */ .boardSearch{clear:Both;display:inline-block;padding:10px 10px;background-color:#f2f2f2;border-radius:5px;margin:30px auto}/* 검색 폼일때 */ .boardSearch.block{display:block} .boardSearch form{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center} .boardSearch .balloontext { position:absolute; left:calc(100% + 20px); top:-13px; width:calc(670px - 100%); height:auto; padding:5px 5px 5px 35px; font-size:1em; text-align:left; line-height:20px} .boardSearch .balloontext:after {top:17.5px;} .boardSearch .balloontext.headline_help:before { position:absolute; left:10px; top:6px; height:20px; width:20px} @media (max-width:779px){ .boardSearch .balloontext {position:absolute; top: 50px; left:0} .boardSearch .balloontext:after { top:-5px; left:95px;background-image:url(base/balloon_top.png); width:10px} .boardSearch.addBalloon + .mapSearch_Result {margin-top:50px} } @media (max-width:588px){ .boardSearch .balloontext {width:300px} .boardSearch.addBalloon + .mapSearch_Result {margin-top:70px} } /* 8.2.2 글쓰기폼 */ .boardWrite{clear:Both} /* 기본 글쓰기 형태, input, select, textarea */ .boardWrite input[type=text], .boardWrite input[type=password], .boardWrite input[type=color], .boardWrite input[type=date], .boardWrite input[type=datetime-local], .boardWrite input[type=email], .boardWrite input[type=month], .boardWrite input[type=number], .boardWrite input[type=range], .boardWrite input[type=search], .boardWrite input[type=tel], .boardWrite input[type=time], .boardWrite input[type=url], .boardWrite input[type=week], .boardWrite textarea, .boardWrite select{ margin:2px 0px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; border:1px solid #d6d6d6;border-radius:0px; } .boardWrite input[type=text], .boardWrite input[type=password], .boardWrite input[type=date], .boardWrite select{/* text, select 기본형태 */ width:99%;height:30px; padding:0px 5px; } .boardWrite input[type=text].readonly{ /* text 가 readonly 일때 */ border:0px;background:#FFF; } /* 8.2.8 폼사이즈 */ /* 입력박스 가로 사이즈 정의, 기본은 모두 100% */ /* pc, 모바일 동일 적용시 */ .txt1, .boardWrite input.txt1, .boardWrite select.txt1, .boardWrite .txt1{width:1.5em} .txt2, .boardWrite input.txt2, .boardWrite select.txt2, .boardWrite .txt2{width:2.5em} .txt3, .boardWrite input.txt3, .boardWrite select.txt3, .boardWrite .txt3{width:3.5em} .txt4, .boardWrite input.txt4, .boardWrite select.txt4, .boardWrite .txt4{width:4.5em} .txt5, .boardWrite input.txt5, .boardWrite select.txt5, .boardWrite .txt5{width:5.5em} .txt6, .boardWrite input.txt6, .boardWrite select.txt6, .boardWrite .txt6{width:6.5em} .txt7, .boardWrite input.txt7, .boardWrite select.txt7, .boardWrite .txt7{width:7.5em} .txt8, .boardWrite input.txt8, .boardWrite select.txt8, .boardWrite .txt8{width:8.5em} .txt9, .boardWrite input.txt9, .boardWrite select.txt9, .boardWrite .txt9{width:9.5em} .txt10, .boardWrite input.txt10, .boardWrite select.txt10, .boardWrite .txt10{width:10.5em} .txt11, .boardWrite input.txt11, .boardWrite select.txt11, .boardWrite .txt11{width:11.5em} .txt12, .boardWrite input.txt12, .boardWrite select.txt12, .boardWrite .txt12{width:12.5em} .txt13, .boardWrite input.txt13, .boardWrite select.txt13, .boardWrite .txt13{width:13.5em} .txt14, .boardWrite input.txt14, .boardWrite select.txt14, .boardWrite .txt14{width:14.5em} .txt15, .boardWrite input.txt15, .boardWrite select.txt15, .boardWrite .txt15{width:15.5em} .txt16, .boardWrite input.txt16, .boardWrite select.txt16, .boardWrite .txt16{width:16.5em} .txt17, .boardWrite input.txt17, .boardWrite select.txt17, .boardWrite .txt17{width:17.5em} .txt18, .boardWrite input.txt18, .boardWrite select.txt18, .boardWrite .txt18{width:18.5em} .txt19, .boardWrite input.txt18, .boardWrite select.txt19, .boardWrite .txt19{width:19.5em} .txt20, .boardWrite input.txt20, .boardWrite select.txt20, .boardWrite .txt20{width:20.5em} .suplus-txt1, .boardWrite input.suplus-txt1, .boardWrite select.suplus-txt1{width:calc(100% - 1.5em)} .suplus-txt2, .boardWrite input.suplus-txt2, .boardWrite select.suplus-txt2{width:calc(100% - 2.5em)} .suplus-txt3, .boardWrite input.suplus-txt3, .boardWrite select.suplus-txt3{width:calc(100% - 3.5em)} .suplus-txt4, .boardWrite input.suplus-txt4, .boardWrite select.suplus-txt4{width:calc(100% - 4.5em)} .suplus-txt5, .boardWrite input.suplus-txt5, .boardWrite select.suplus-txt5{width:calc(100% - 5.5em)} .suplus-txt6, .boardWrite input.suplus-txt6, .boardWrite select.suplus-txt6{width:calc(100% - 6.5em)} .suplus-txt7, .boardWrite input.suplus-txt7, .boardWrite select.suplus-txt7{width:calc(100% - 7.5em)} .suplus-txt8, .boardWrite input.suplus-txt8, .boardWrite select.suplus-txt8{width:calc(100% - 8.5em)} .suplus-txt9, .boardWrite input.suplus-txt9, .boardWrite select.suplus-txt9{width:calc(100% - 9.5em)} .suplus-txt10, .boardWrite input.suplus-txt10, .boardWrite select.suplus-txt10{width:calc(100% - 10.5em)} .suplus-txt11, .boardWrite input.suplus-txt11, .boardWrite select.suplus-txt11{width:calc(100% - 11.5em)} .suplus-txt12, .boardWrite input.suplus-txt12, .boardWrite select.suplus-txt12{width:calc(100% - 12.5em)} .suplus-txt13, .boardWrite input.suplus-txt13, .boardWrite select.suplus-txt13{width:calc(100% - 13.5em)} .suplus-txt14, .boardWrite input.suplus-txt14, .boardWrite select.suplus-txt14{width:calc(100% - 14.5em)} .suplus-txt15, .boardWrite input.suplus-txt15, .boardWrite select.suplus-txt15{width:calc(100% - 15.5em)} .boardWrite input.all10, .boardWrite select.all10{width:10%} .boardWrite input.all20, .boardWrite select.all20{width:20%} .boardWrite input.all30, .boardWrite select.all30{width:30%} .boardWrite input.all40, .boardWrite select.all40{width:40%} .boardWrite input.all50, .boardWrite select.all50{width:50%} .boardWrite input.all60, .boardWrite select.all60{width:60%} .boardWrite input.all70, .boardWrite select.all70{width:70%} .boardWrite input.all80, .boardWrite select.all80{width:80%} .boardWrite input.all90, .boardWrite select.all90{width:90%} @media all and (max-width:48.75rem){ /* 모바일 화면에만 적용시 */ .boardWrite input.m10, .boardWrite select.m10{width:10%} .boardWrite input.m20, .boardWrite select.m20{width:20%} .boardWrite input.m30, .boardWrite select.m30{width:30%} .boardWrite input.m40, .boardWrite select.m40{width:40%} .boardWrite input.m50, .boardWrite select.m50{width:50%} .boardWrite input.m60, .boardWrite select.m60{width:60%} .boardWrite input.m70, .boardWrite select.m70{width:70%} .boardWrite input.m80, .boardWrite select.m80{width:80%} .boardWrite input.m90, .boardWrite select.m90{width:90%} .suplus-m1, .boardWrite input.suplus-m1, .boardWrite select.suplus-m1{width:calc(100% - 1.9em)} .suplus-m2, .boardWrite input.suplus-m2, .boardWrite select.suplus-m2{width:calc(100% - 2.9em)} .suplus-m3, .boardWrite input.suplus-m3, .boardWrite select.suplus-m3{width:calc(100% - 3.9em)} .suplus-m4, .boardWrite input.suplus-m4, .boardWrite select.suplus-m4{width:calc(100% - 4.9em)} .suplus-m5, .boardWrite input.suplus-m5, .boardWrite select.suplus-m5{width:calc(100% - 5.9em)} .suplus-m6, .boardWrite input.suplus-m6, .boardWrite select.suplus-m6{width:calc(100% - 6.9em)} .suplus-m7, .boardWrite input.suplus-m7, .boardWrite select.suplus-m7{width:calc(100% - 7.9em)} .suplus-m8, .boardWrite input.suplus-m8, .boardWrite select.suplus-m8{width:calc(100% - 8.9em)} .suplus-m9, .boardWrite input.suplus-m9, .boardWrite select.suplus-m9{width:calc(100% - 9.9em)} .suplus-m10, .boardWrite input.suplus-m10, .boardWrite select.suplus-m10{width:calc(100% - 10.9em)} .suplus-m11, .boardWrite input.suplus-m11, .boardWrite select.suplus-m11{width:calc(100% - 11.9em)} .suplus-m12, .boardWrite input.suplus-m12, .boardWrite select.suplus-m12{width:calc(100% - 12.9em)} .suplus-m13, .boardWrite input.suplus-m13, .boardWrite select.suplus-m13{width:calc(100% - 13.9em)} .suplus-m14, .boardWrite input.suplus-m14, .boardWrite select.suplus-m14{width:calc(100% - 14.9em)} .suplus-m15, .boardWrite input.suplus-m15, .boardWrite select.suplus-m15{width:calc(100% - 15.9em)} } @media all and (min-width:780px){ .boardWrite input.p1, .boardWrite select.p1{width:1.5em} .boardWrite input.p2, .boardWrite select.p2{width:2.5em} .boardWrite input.p3, .boardWrite select.p3{width:3.5em} .boardWrite input.p4, .boardWrite select.p4{width:4.5em} .boardWrite input.p5, .boardWrite select.p5{width:5.5em} .boardWrite input.p6, .boardWrite select.p6{width:6.5em} .boardWrite input.p7, .boardWrite select.p7{width:7.5em} .boardWrite input.p8, .boardWrite select.p8{width:8.5em} .boardWrite input.p9, .boardWrite select.p9{width:9.5em} .boardWrite input.p10, .boardWrite select.p10{width:10.5em} .boardWrite input.p11, .boardWrite select.p11{width:11.5em} .boardWrite input.p12, .boardWrite select.p12{width:12.5em} .boardWrite input.p13, .boardWrite select.p13{width:13.5em} .boardWrite input.p14, .boardWrite select.p14{width:14.5em} .boardWrite input.p15, .boardWrite select.p15{width:15.5em} .boardWrite input.p16, .boardWrite select.p16{width:16.5em} .boardWrite input.p17, .boardWrite select.p17{width:17.5em} .boardWrite input.p18, .boardWrite select.p18{width:18.5em} .boardWrite input.p19, .boardWrite select.p19{width:19.5em} /* pc 화면에만 적용시 */ .boardWrite input.p20, .boardWrite select.p20{width:20%} .boardWrite input.p30, .boardWrite select.p30{width:30%} .boardWrite input.p40, .boardWrite select.p40{width:40%} .boardWrite input.p50, .boardWrite select.p50{width:50%} .boardWrite input.p60, .boardWrite select.p60{width:60%} .boardWrite input.p70, .boardWrite select.p70{width:70%} .boardWrite input.p80, .boardWrite select.p80{width:80%} .boardWrite input.p90, .boardWrite select.p90{width:90%} .boardWrite input.suplus-p1, .boardWrite select.suplus-p1{width:calc(100% - 1.5em)} .boardWrite input.suplus-p2, .boardWrite select.suplus-p2{width:calc(100% - 2.5em)} .boardWrite input.suplus-p3, .boardWrite select.suplus-p3{width:calc(100% - 3.5em)} .boardWrite input.suplus-p4, .boardWrite select.suplus-p4{width:calc(100% - 4.5em)} .boardWrite input.suplus-p5, .boardWrite select.suplus-p5{width:calc(100% - 5.5em)} .boardWrite input.suplus-p6, .boardWrite select.suplus-p6{width:calc(100% - 6.5em)} .boardWrite input.suplus-p7, .boardWrite select.suplus-p7{width:calc(100% - 7.5em)} .boardWrite input.suplus-p8, .boardWrite select.suplus-p8{width:calc(100% - 8.5em)} .boardWrite input.suplus-p9, .boardWrite select.suplus-p9{width:calc(100% - 9.5em)} } .boardWrite .imgBtn{ display:inline-block;min-width:28px;height:30px;margin:2px;background-position:50% 50%;background-repeat:no-repeat;background-size:auto 28px; vertical-align:middle } .btn-selectDate{background-image:url(../images/icon/icon_month.png)} .boardWrite textarea{ position:relative;top:7px; /* textarea기본형태 */ width:99%;padding:3px 5px;min-height:70px; font-size:1em } .boardWrite input[type=checkbox]{/* checkbox 기본형태 */ display:inline-block;cursor:pointer;margin-top:12px; } .boardWrite input[type=radio]{/* radio기본형태 */ display:inline-block;cursor:pointer;margin-top:12px; } .boardWrite input[type=button]{ /* button 기본형태, 확인/다음 등 */ padding:10px 10px; color:#FFF;font-weight:bold; border:0px;border-radius:3px; background:#0aafed; } input[type=button].btn2, .boardWrite input[type=button].btn2{ /* button 기본형태 2, 주소검색 */ padding:0 5px;line-height:28px; color:#7e7e7e;font-weight:bold; border:1px solid #d6d6d6 ;border-radius:3px; background:#FFF; } input[type=button].btn3, .boardWrite input[type=button].btn3{ /* button 기본형태 3, 초기화 */ padding:8px 8px; color:#0aafed;font-weight:bold; border:0px;border-radius:3px; border:1px solid #0aafed; background:#FFF; } input[type=button].btn4, .boardWrite input[type=button].btn4{ /* button 기본형태 4, 숙소 예약하러 가기 */ padding:5px 5px; color:#FFF;font-weight:bold; border:0px;border-radius:3px; background:#F28020; } /* 8.3 설명그룹 */ .help-group{clear:both;position:relative;padding:10px;border:1px solid #d7d7d7;border-radius:5px;background-color:#f2f2f2} dl + .help-group{ margin:10px 0} .help-inline-group{position:relative;width:auto;padding:0 5px;margin-left:8px;border:1px solid #b2b2b2;border-radius:5px;background-color:#ddd;color:#555} .help-inline-group:before{content:"";position:absolute;top:calc(50% - 6px);left:-5px;width:5px;height:11px;background-image:url(base/balloon_ddd_left.png);background-repeat:no-repeat} .writeRow > label .help-group{display:block;width:10em;margin-left:auto;padding:2px;text-align:center;font-size:.8em} .writeRow > label .help-group:before{content:"";position:absolute;top:-5px;left:calc(50% - 5px);width:11px;height:5px;background-image:url(base/balloon_eee_top.png);background-repeat:no-repeat} .required{color:#ed6d00} .required:before{content:"";display:inline-block;width:16px;height:16px; background-image:url(board/icon_required.png);background-repeat:no-repeat;background-position:50% 0%;background-size:100%;vertical-align:text-bottom} .help-group.required{position:absolute;right:3px;top:3px} /* 입력폼 부제목, 라벨, 폼그룹(div), 인라인구분자(span.div) */ .boardWrite{position:relative} .html_view+.boardWrite{border-top:1px solid #dfdfdf} .boardWrite .writeRow{position:relative;display:flex;clear:both;justify-content:space-between;align-items:center;padding:5px 0px;min-height:38px;border-bottom:1px solid #dfdfdf;line-height:30px} .boardWrite .writeRow>textarea, .boardWrite .writeRow>iframe {width: calc(100% - 20px); margin-left: 10px; margin-bottom:15px;} .boardWrite .writeRowTitle{padding:10px 20px 5px 20px;font-size:1.3em;font-weight:bold;border-bottom:3px solid #27aae1;color:#0aafed}/* 입력폼에서의 부 타이틀 */ .writeRow > label{position:relative;display:block;width:10em;text-align:right;font-weight:bold;}/* 제목부분 */ .writeRow > div{position:relative;width:calc(100% - 10em - 20px);text-align:left}/* input(입력)부분 */ .writeRow > div > label{white-space:nowrap} .writeRow span.div{display:inline-block;margin:0 2px;color:#ccc} /* 입력폼 서브그룹 */ .input-group{display:flex;margin:5px 0;justify-content:flex-start;align-items:center;flex-wrap:wrap} .input-inline-group{display:flex;float:left;margin:5px 10px 5px 0;white-space:nowrap} .input-nowrap-group{display:inline-flex;margin:5px 10px 5px 0;white-space:nowrap} .input-group > input[type=checkbox], .input-group > input[type=radio]{position:relative;top:-5px} .input-group > *, .input-inline-group > *{display:block} .input-group > input + .input-group-addon, .input-group > .input-group-addon + input, .input-inline-group > input + .input-group-addon, .input-inline-group > .input-group-addon + input{border-left:none} /* 상위요소에 따른 설명그룹 맞춤 */ .boardWrite .writeRow .help-group{line-height:1.5em} .boardWrite .writeRow .help-inline-group{min-height:24px;line-height:24px} /* 선택에 따른 추가입력폼 그룹 */ div.addinfo-group{position:relative;width:auto;padding:0 10px;margin-left:10px;border:1px solid #d7d7d7;border-radius:5px;color:#555} div.addinfo-group input[type=text], div.addinfo-group select{margin:0} div.addinfo-group > strong:first-child, div.addinfo-inline-group > strong:first-child, .input-group > strong:first-child, .input-inline-group > strong:first-child{display:inline-block;margin-right:5px;font-weight:bold} /* 부트스트랩 UI 맞춤화 */ .ui-datepicker-trigger {border: none;background: none; padding:0 5px; vertical-align: middle; line-height:28px;} .ui-datepicker-trigger img {max-height:28px} .ui-datepicker-title select {ertical-align: middle;} @media (min-width:1273px){ .input-group > div.addinfo-group:before{content:"";position:absolute;top:calc(50% - 6px);left:-5px;width:5px;height:11px;background-image:url(base/balloon_left.png);background-repeat:no-repeat} } @media (max-width:964px){ } @media (max-width:780px){ .help-group.required{position:static; display:inline-block; margin:20px 0 10px;} .boardWrite .writeRow{display:block} .writeRow > label{position:relative;display:block;width:100%;text-align:left;overflow:visible}/* 제목부분 */ .writeRow > div{ width:100%}/* input(입력)부분 */ .writeRow .addinfo-group span.div{display:none} .writeRow .addinfo-group label{display:block;white-space:nowrap} .m_flex{display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap} .m_flex .input-group{display:block} .input-inline-group{float:none} .writeRow > label .help-group{position:absolute;display:inline-block;margin-left:10px;width:auto;max-width:calc(100% - 12.5em - 20px)} .writeRow > label .help-group:before{top:calc(50% - 6px);left:-5px;width:5px;height:11px;background-image:url(base/balloon_eee_left.png)} .boardWrite .writeRow>textarea, .boardWrite .writeRow>iframe {width:99%; margin-left: 0; margin-bottom:5px;} #smart_editor2 .se2_text_tool { padding: 4px 49px 4px 3px !important} #smart_editor2 .se2_text_tool .se2_multy { bottom:0} #smart_editor2 .se2_text_tool .se2_multy .se2_mn, #smart_editor2 .se2_text_tool .se2_multy .se2_photo { height:100%} } /* 참가비 */ .writeRow .writeBoxType1{width:50%;text-align:right} @media all and (max-width:48.75rem){ .writeRow .writeBoxType1{width:100%;text-align:left} } /* 할인적용 부분 */ .writeRow .writeRowL{float:left;width:55%;margin-right:5%} .writeRow .writeRowR{width:40%;margin-left:60%;line-height:20px} @media all and (max-width:48.75rem){ .writeRow .writeRowL{float:none;width:100%} .writeRow .writeRowR{width:100%;margin:0px} } /* 버튼영역 */ .writeBtn{padding:10px 0px;text-align:center} /*-------------------------------------------------------------- 9.0 페이지별 콘텐츠 개별요소 ----------------------------------------------------------------*/ /* 9.1 메인 콘텐츠 일반 */ .main .content_body{padding-top:0} .content_body_top{margin-top:30px;padding:30px 0;line-height:1.6em;text-align:center} .content_body_top p{margin:10px 0} /* 9.2 메인-지도관련 */ /* 9.3 축제-행사개요 */ .main .content_body .fastival_summary{margin:40px 0} .main .program_list{margin:0 auto 30px} .main .section_title{margin-top:60px} .main .section_title:first-child{border-top:none;margin-top:0} /* 9.3.1 축제-행사장소*/ .fastival_venue .section{padding:30px 0} .fastival_venue .section>.location{ height:24px;line-height:24px; margin-bottom:20px;font-size:1.286em} .fastival_venue .section>.location strong{display:inline-block;font-weight:bold;background-repeat:no-repeat;margin-right:5px;padding-left:30px} .fastival_venue .section>.location strong{background-image:url(layout/blit_m_location.png)} .fastival_venue .section>.img{padding-top:10px} .fastival_venue .item_list.flex .item{padding-bottom:0} .subs_culture{border-top:1px dashed #e6e6e6} .subs_culture li{display:inline-block;margin-right:2em;margin-bottom:1em;line-height:20px;list-style:none} .subs_culture .mapicon{width:20px;height:20px;line-height:20px;background-color:#555} /* 9.3.1 축제- 코스개요, */ .blit-culture:before, .icon-culture{background-image:url(main/mapicon_music_fff.png)} .blit-food:before, .icon-food{background-image:url(main/mapicon_food_fff.png)} .blit-course:before, .icon-course{background-image:url(main/mapicon_course_fff.png)} .blit-courseStart:before, .icon-courseStart{background-image:url(main/mapicon_start_fff.png)} .blit-courseEnd:before, .icon-courseEnd{background-image:url(main/mapicon_end_fff.png)} .blit-stamp:before, .icon-stamp{background-image:url(main/mapicon_stamp_fff.png)} /* */ p.min_list>span, div.min_list>p, .item_list .item>p{display:block;line-height:1.428em;margin-top:5px;color:#808285} .min_list.order_num>span { text-indent:-34px; padding-left:34px} .min_list.order_num>span>* { text-indent:0} .min_list>span.strong, .item_list .item>p.strong{display:block;line-height:1.428em;margin-top:5px;color:#000} .min_list>span>strong, .min_list>p>strong{color:#000} .min_list>span>strong:first-child{font-weight:bold} .traffic_list li{position:relative;display:block;padding-left:30px;padding-bottom:10px;line-height:1.428em;list-style:none;color:#808285;background-image:url(main/traffic_list_bg.png);background-repeat:no-repeat;background-position:12px -3px} .traffic_list li:first-child{background-position:12px 6px} .traffic_list li:last-child{background-position:12px -194px} .traffic_list li:before{content:"";position:absolute;top:0;left:0;width:30px;height:1.428em;background:url(main/traffic_list_dot.png) no-repeat 50% 50%} .traffic_list li>strong, .traffic_list li>b{color:#000;font-weight:bold} .traffic_list time{display:inline-block;color:#0aafed;font-size:0.857em;height:1.428em;white-space:nowrap} .traffic_list time:before{content:"|";display:inline-block;padding:5px;color:#ccc} .img img{ max-width:100%} .main .content_header{position:relative;top:0} .trafficToStart .subsection_title:before{content:"";background-image:url(main/course_icon_trafficstart.png);margin-right:10px} .trafficFromFinish .subsection_title:before{content:"";background-image:url(main/course_icon_trafficend.png);margin-right:10px} .trafficTexi .subsection_title:before{content:"";background-image:url(main/course_icon_traffictax.png);margin-right:10px} @media (max-width:48.75rem){ .page_subject{font-size:1.5em} .content_open .main_slide #myCarousel .item .wrap, .content_open .main_slide #myCarousel .carousel-nav, .content_open .main_category, .content_open .main_tab, .content_open #card_section_01, .content_open #card_section_02{display:none} .content_open .main_slide{height:320px} .content_open .content{position:static} } /* 9.6 코스 */ /* 9.6.1 코스개요 */ .course_summary>p.img{margin-bottom:30px} .course_summary .item_list .item {width:calc(33.333% - 14px);margin-left:0;min-height:1em; margin-bottom:30px;} .course_summary .item_list .item.courselevel{position:relative;padding-right:calc(66.667% + 13px);overflow:visible} .course_summary .item_list .item.lightcourse {width:100%} .course_summary .item_list .item.lightcourse .html_view {margin-left:27px;padding-top:5px; padding-bottom:0} .course_summary .item_list .item.lightcourse .html_view .item_title { color:#000} .course_summary .item_list .item.lightcourse .html_view .min_list span { display:inline-block} .course_summary .item_list .item.lightcourse .html_view .min_list span:nth-child(n+2) { margin-left:10px; padding-left:10px; border-left:1px solid #ddd} .course_summary .item_list .item.courseEnd, .course_summary .item_list .item.courseFood{margin-left:20px;margin-right:calc(33.333% - 14px)} .course_summary .item_list .item>.courselevel_high{position:absolute;right:0;top:0} @media (min-width:1273px){ .course_summary .item_list .item.courselevel{width:calc(25% - 15px);padding-right:25%} .course_summary .item_list .item.lightcourse {order:6} .course_summary .item_list .item.courseStart{position:absolute;left:calc(50% + 5px)} .course_summary .item_list .item.courseEnd{position:absolute;left:calc(75% - 10px)} .course_summary .item_list .item.courseStamp, .course_summary .item_list .item.courseFood{padding-top:2em; width:calc(25% - 10px); margin-top: 48px;margin-right:0;margin-left:16px;padding-bottom:1em} .course_summary .item_list .item>.courselevel_high{position:absolute;right:0;width:calc(50% - 15px);top:0;margin-top:0} } @media (max-width:964px){ .course_summary .page_subject strong{display:block} } @media (min-width:780px) and (max-width:964px){ .course_summary .item_list.flex{justify-content:space-between} .course_summary .item_list .item{width:calc(50% - 10px)} .course_summary .item_list .item.courselevel{padding-right:calc(50% + 10px)} .course_summary .item_list .item>.courselevel_high{left:calc(50% + 10px);margin:0 auto } .course_summary .item_list .item.courseStart, .course_summary .item_list .item.courseEnd {width:100%; margin-left:0;margin-right:0} .course_summary .item_list .item.courseFood{margin-left:0;margin-right:0} } @media (max-width:48.75rem) and (min-width:588px){ .course_summary .item_list.flex .item:nth-child(2n+2) {margin-left: 0} } @media (max-width:48.75rem){ .course_summary .item_list.flex{display:block} .course_summary .item_list .item{width:100%;margin-top:20px} .course_summary .item_list .item.courselevel{padding-right:0;padding-bottom:190px} .course_summary .item_list .item>.courselevel_high{top:auto;bottom:10px;left:0;right:0;margin-left:auto; margin-right:auto;width:298px;} .course_summary .item_list .item.courseEnd, .course_summary .item_list .item.courseFood{margin-left:0;margin-right:0} } .courselevel_high{position:relative;padding-bottom:1.5em;color:#808285;width:300px;height:150px} .courselevel_high>strong{position:absolute;bottom:0;left:0;right:0;text-align:center;font-weight:900} .courselevel_high>p{position:absolute;top:5px;right:5px;font-size:0.857em} .courselevel_high>img{max-width:calc(100% - 10px); max-height:calc(100% - 10px);padding:5px} .courselevel_high .legend01{font-weight:900;color:#f63} .courselevel_high .legend02{font-weight:900;color:#009bdc} /* 9.6.2 코스 시작점 찾아가기/돌아가기 */ .trafficToStart, .trafficFromFinish { padding:0; text-align:left} .trafficToStart{margin-top:60px;} .trafficToStart .item_list.flex .item_title, .trafficFromFinish .item_list.flex .item_title{font-weight:300} .trafficToStart .item_list.flex .item_title em, .trafficFromFinish .item_list.flex .item_title em{font-weight:700} .trafficTexi{margin-bottom:60px; padding:0} .trafficTexi ul{display:flex;justify-content:flex-start;flex-wrap:wrap} .trafficTexi li{display:block;height:1.72em;margin-right:1em;line-height:1.72em;list-style:none;font-size:1.285em;white-space:nowrap} .trafficTexi li>strong{color:#000;font-weight:bold} .trafficTexi li>a{color:#808285} /* 9.6.3 코스-휠체어 올레*/ .lightCourse_sign.html_view { padding-bottom:30px} .lightCourse_sign .item_list.flex .img { margin-right:15px;} .lightCourse_sign .item_list.flex .item_title{color:#f29a2a;font-weight:700;font-size:1.143em;margin-top:5px} .lightCourse_info { padding-bottom:60px} .lightCourse_sign .subsection_title:before, .lightCourse_info .subsection_title:before{content:'';margin:3px 10px 0px 0px;background-image:url(main/course_wheelchair_title_bg.png);width:29px;height:29px; margin-bottom:30px} .lightCourse_info .item_list .item {margin-bottom:30px} .lightCourse_info .item_list .item .html_view { margin-top:-10px; margin-left:38px; padding-top:0; padding-bottom:0} /* 9.6.4 코스 - 오디오북 */ .audioguide .board_view_con{padding:0px} .audioguide .Attach{margin-bottom:0px} .audioList{text-align:center} .audioList audio{margin:0 auto;width:21.429em} .credit textarea{resize:none;width:100%;text-align:center;overflow:visible;margin-top:30px;padding:15px;border:none;font-family:"Nanum Gothic", "Malgun Gothic", "맑은고딕", AppleSDGothic, sans-serif;line-height:1.428em;box-sizing:border-box} @media (min-width:1273px){ .trafficToStart .item_list.flex .item, .trafficFromFinish .item_list.flex .item, .course_summary .item_list .item{width:calc(25% - 15px)} } @media (max-width:964px){ .trafficToStart .item_list.flex .item, .trafficFromFinish .item_list.flex .item{width:calc(50% - 10px)} .trafficToStart .item_list.flex .item:nth-child(2n+1), .trafficFromFinish .item_list.flex .item:nth-child(2n+1){margin-left:0} .trafficToStart .item_list.flex .item:nth-child(2n), .trafficFromFinish .item_list.flex .item:nth-child(2n){margin-left:20px} } @media (max-width:588px){.trafficToStart .item_list.flex .item, .trafficFromFinish .item_list.flex .item{width:100%;margin-left:0}} /* 9.7 서브콘텐츠 개별요소 */ /* 9.7.1 안내 - 공지사항 */ /* 행사&축제 */ #cal_fe {padding-top:60px} /* 9.7.2 안내 - 여행준비*/ /* 준비물 */ .preparePack_wrap{margin-top:60px;margin-bottom:60px;display:flex;flex-wrap:wrap} .item_list.plusIcon .item div{display:inline-block;margin-left:0px;margin-top:8px;vertical-align:top} .item_list.plusIcon .item>div.min_list{width:calc( 100% - 80px);min-height:50px;display:inline-block;margin-left:10px;padding-left:10px} /* 숙소/식당/볼거리 */ /* 패스포트 */ .stamp_list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;margin:30px auto!important} .stamp_list li{ text-align:center;width:calc(16.6% - 20px)} .stamp_list span{height:140px;display:table-cell;vertical-align:middle;width:19.143em} .stamp_list span img{max-width:100%} .stamp_list em{display:block;font-weight:bold} @media (max-width:964px){ /* 준비물 */ .preparePack_wrap div:last-child .item_list.flex .item{width:calc(50% - 14px)} } @media (max-width:588px){ /* 준비물 */ .preparePack_wrap div:last-child .item_list.flex .item{width:100%} .preparePack_wrap .item_list li.item{min-height:auto} } /* 9.7.3 안내 - 여행팁*/ /* 아카자봉 함께 걷기 */ #calendar + .btnSet { max-width:900px; margin:30px auto 0;} #calendar + .btnSet>a,#calendar + .btnSet>input[type=button] { position:relative; padding:10px 10px; min-width:100px} /* 패스포트할인업체 */ .Discount_header, .Discount_body li{border-bottom:1px solid #dfdfdf;padding:0 0 15px;list-style:none} .Discount_header em{display:inline-block;font-weight:bold;text-align:left} .Discount_body em{display:inline-block;text-align:left;vertical-align:top} .Discount_header em.route{text-align:left} .Discount_header, .Discount_body li{display:flex;justify-content:space-around} .Discount_header em, .Discount_body li>*{display:block; margin:0px 5px; line-height: 1.5em; word-break: keep-all;} .Discount_header .route, .Discount_body .route{width:3.8em} .Discount_header .name, .Discount_body .name{width:10.5em;font-weight:bold} .Discount_header .price, .Discount_body .price{width:calc( 100% - 3.8em - 10.5em - 14em);} .Discount_body .discount { font-weight: 600} .Discount_header .address, .Discount_body .address{width:14em;padding:0px;} .Discount_body .address a:nth-child(n+2):before { content:" / "; color:#e2e2e2; white-space:nowrap} .Discount_body .address a{display:block} @media (max-width:964px){ /* 패스포트 할인업체 */ .Discount_header{display:none; text-align:center} .Discount_body li{display:block; text-align:center} .Discount_body .price span, .Discount_body .discount span{display:inline-block;margin-right:10px} .Discount_body .route, .Discount_body .name, .Discount_body .price, .Discount_body .address{width:100%;display:block;margin:4px 8px;padding:0px} .Discount_body .name {font-size:1.2em} } @media (min-width:780px) and (max-width:964px){ /* 패스포트 */ .passport_wrap .floatLeft{float:none;width:100%} .stamp_list li{width:calc(25% - 20px);margin:0px 10px} .stamp_list{width:100%} /* 패스포트 할인업체 */ .Discount_body .route{display:inline-block;color:#0aafed;font-weight:bold} .Discount_body .route strong{display:inline-block} } @media (min-width:780px) and (max-width:964px){ /* 패스포트 */ .passport_wrap .floatLeft{float:none;width:100%} .stamp_list li{width:calc(25% - 20px);margin:0px 10px} .stamp_list{width:100%} /* 패스포트 할인업체 */ .Discount_body .route{display:inline-block;color:#0aafed;font-weight:bold} .Discount_body .route strong{display:inline-block} } @media (min-width:589px) and (max-width:48.75rem){ /* 패스포트 */ .stamp_list li{width:calc(25% - 20px);margin:0px 10px} .stamp_list{width:100%} /* 패스포트 할인업체 */ .Discount_body .route{display:inline-block;color:#0aafed;font-weight:bold} .Discount_body .route strong{display:inline-block} } @media (max-width:588px){ /* 패스포트 */ .stamp_list li{width:calc(50% - 20px);margin:0px 10px} .stamp_list span{width:20.077em} .stamp_list{width:100%} .passport_wrap .page_subject strong{display:block} .passport_wrap div:last-child .item_list.flex .item{width:100%} /* 패스포트 할인업체 */ .program_list .section_title{line-height:50px;border-top:1px solid #dfdfdf!important} } /* 9.7.4 안내 - 제주올레같이하기*/ /* 후원 */ @media (max-width:964px) { .item_list.supportFund_memorial .item { width:100%; margin-left:0} } /* 클린올레 */ #cleanOlle, #cleanInfo{padding:60px 0} #cleanOlle .page_subject, #cleanInfo .page_subject{color:#8dc63f;font-weight:bold; text-align:center} #cleanOlle .subsection_title, #cleanInfo .subsection_title{clear:both;font-weight:bold;font-size:2em;text-align:left;margin:1em 0 0;height:36px;line-height:36px;padding-top:50px} #cleanOlle > p, #cleanOlle .clean_day p, #cleanInfo > p{margin:0.5em 0;color:#808285;line-height:1.55em} #cleanOlle > p > strong, #cleanOlle .clean_day p > strong, #cleanInfo > p > strong{font-weight:bold} #cleanOlle .clean_day{display:flex;justify-content:space-between} #cleanOlle .clean_day > div{width:calc(50% - 10px)} #cleanOlle .step_list li:nth-child(5) img.float_right { position:relative; top:-2em} @media (min-width:964px) { #cleanOlle .step_list {position:relative} #cleanOlle .step_list li:nth-child(2) { position:absolute; left:0; top:130px; margin-left:0} #cleanOlle .step_list li:nth-child(4) {margin-left:30px} #cleanOlle .step_list li:nth-child(5) { position:absolute; left:calc(66.66% - 10px); top:80px;} } @media (min-width:48.75rem) and (max-width:964px) { #cleanOlle .step_list {position:relative} #cleanOlle .step_list li:nth-child(5) { position:absolute; left:calc(50% + 15px); top:250px;} } @media (max-width:48.75rem) { #cleanOlle > p{text-align:center} #cleanOlle .step_list {position:relative} } @media (max-width:588px){ #cleanOlle > p{text-align:center} #cleanOlle .clean_day{display:block} #cleanOlle .clean_day > div{width:100%} } /* 9.7.4 안내 - 안내센터*/ /* 9.7.5 제주올레 - 사람들*/ /* 이사회 */ .advisory {text-align: left; margin-bottom:60px} .advisory table {border-top: 1px solid #e1e1e1;border-left: 1px solid #e1e1e1;} .advisory th, .advisory td {border-bottom: 1px solid #e1e1e1;border-right: 1px solid #e1e1e1;padding:10px 5px;color: #808285;line-height:2em; text-align:left !important} .advisory td>p>span { display:block;font-size:.9em;line-height:1.3em; margin-bottom:.2em;} /* 9.7.6 제주올레 - 한일/하는일 */ /* 문화예술프로젝트 */ #cultureAndArt { padding:60px 0;} #cultureAndArt>div.flex { display:flex; justify-content:space-between } #cultureAndArt>div.flex>div {width:calc(50% - 10px);} /* 9.7.6 제주올레 - 네트워킹 */ /* 우정의 길 */ .Friendship .pic{width:calc(100% - 294px)} .Friendship{ position:relative;width:100%;height:320px;margin:0 auto;margin-top:30px} .Friendship .title{position:absolute;z-index:2;box-sizing:border-box;width:320px;height:320px; border:1px solid #e1e1e1; text-align:center} .Friendship .title h3{font-size:2em;font-weight:bold;margin:47px auto 7px;text-align:center} .Friendship .title span{display:block;margin-bottom:6px;letter-spacing:-0.09em} .Friendship .title a{display:block;color:#259bcc;text-decoration:underline;letter-spacing:-0.09em} .Friendship .title div:nth-child(1){} .Friendship .item_courseinfo span{display:block;width:99px;height:99px;border-radius:50%;background-color:#333333;margin:23px 2px;text-align:center;display:inline-block} .Friendship .item_courseinfo em, .Friendship .title div p:nth-child(1){display:block;color:#fff;margin-top:15px} .Friendship .item_courseinfo strong,.Friendship .title div p:nth-child(2){display:block;color:#0aafed;font-weight:bold;font-size:2.714em;padding-top:7px} .Friendship:first-child{margin-top:0px} .Friendship:nth-child(odd) .title{left:0px;border-right:0px} .Friendship:nth-child(odd) .title:before{background-image:url(../images/Friendship/title_bg.png);background-repeat:no-repeat;background-position:100% 50%;content:'';width:318px;height:318px;position:absolute;left:0px;top:0px;z-index:-1} .Friendship:nth-child(even) .title{right:0px;border-left:0px} .Friendship:nth-child(even) .title:before{background-image:url(../images/Friendship/title_bg.png);background-repeat:no-repeat;background-position:0% 50%;content:'';width:318px;height:318px;position:absolute;left:0px;top:0px;z-index:-1} .Friendship:nth-child(odd) .pic{right:0px;border-left:0px} .Friendship:nth-child(even) .pic{left:0px;border-right:0px} .Friendship:nth-child(odd) .text{right:0px;border-left:0px} .Friendship:nth-child(even) .text{left:0px;border-right:0px} .Friendship .pic{box-sizing:border-box;height:320px;position:absolute;border:1px solid #e1e1e1} .Friendship .pic:after{content:'';background-color:#000;opacity:0.6;max-width:64.643em;height:318px;display:block} .Friendship .text{width: calc(100% - 26px);padding:15px 15px;line-height:21px;color:#fff;height:320px;float:left;box-sizing:border-box;position:absolute;z-index:9;font-size:13px;letter-spacing:-0.05em} .Friendship .text span{display:none} .Friendship .text ul{position:absolute;list-style:none;font-size:13px;line-height:21px} .Friendship .text ul:nth-of-type(1){left:15px;bottom:10px} .Friendship .text ul:nth-of-type(2){bottom:52px;left:280px} .Friendship .text a{position:absolute;background-color:#259bcc;color:#fff;font-weight:bold;font-size:1.214em;width:111px;height:38px;line-height:38px;text-align:center;right:10px;bottom:10px;opacity:0.9} /* 제주올레 - 네트워킹 - 자매의 길 */ .item_list.sisterhood .item_text li>span:nth-child(1){width:22em; color:#000} .item_list.sisterhood .item_text li>span:nth-child(1)>span{display:inline-block; width:5em} .item_list.sisterhood .item:nth-child(3) .item_text li>span:nth-child(1)>span{width:3.5em; margin-right:.5em} .item_list.sisterhood .item_text li>span:nth-child(2){width:4em} .item_list.sisterhood .item_text li>span:nth-child(3){width:6em} @media (max-width:970px){ .item_list.sisterhood .item_text li>span:nth-child(1){width:calc(100% - 3em);} .item_list.sisterhood .item_text ol>li>span:nth-child(2){padding-left:1.8em} } /* 9.7.6 제주올레 - 여행자 센터 */ .item_title.contact_list { margin:0} .item_title.contact_list .time {text-align:left; margin:0} .item_title.contact_list .time>em {white-space:nowrap} #travelerCenter .section_title {border-bottom:none} #travelerCenter .section { padding:30px 0;} #travelerCenter .item_list.partner { border-bottom:1px solid #e2e2e2;} #center_ollestay>.item_list .item table.basic { margin:10px 0; text-align:center} #center_ollestay>.item_list .item:first-child {width:100%; margin-left:0} #center_ollestay>.item_list .item:nth-child(2) {min-width:calc(66.66% - 20px); margin-left:0} #center_sobang .contact_item { margin:0} #center_sobang .item_list .item_title { margin-top:30px} #center_sobang .item_list .item_title:first-child { margin-top:0} @media (min-width:1273px){ .Friendship .text{width:59.571em;padding:20px 20px;font-size:14px;line-height:24px} .Friendship .text ul{font-size:14px;line-height:24px} .Friendship .text ul:nth-of-type(1){left:20px;bottom:10px} .Friendship .text ul:nth-of-type(2){bottom:58px;left:385px} .Friendship .text span{display:block;margin-top:7px} .Friendship .text a{width:146px;height:53px;line-height:53px;font-size:1.429em} } @media (min-width:780px) and (max-width:964px){ .Friendship{width:45.714em;height:532px} .Friendship .pic{top:185px;left:0px;width:45.714em;border:1px solid #e1e1e1!important;height:345px} .Friendship .title:before{background-repeat:no-repeat;background-image:url(../images/Friendship/title_bg.png);content:'';background-position:50% 100%!important;position:absolute;width:45.571em!important;height:210px!important;z-index:9} .Friendship .title{width:45.714em;display:flex;justify-content:center;align-items:center;height:210px} .Friendship .title h3{margin:7px auto} .Friendship:nth-child(odd) .title{border-bottom:0px;border-right:1px solid #e1e1e1} .Friendship:nth-child(even) .title{border-bottom:0px;border-left:1px solid #e1e1e1} .Friendship .text{width:49.231em;top:26px} .Friendship .text span{display:block;margin-top:7px} .Friendship .title div:nth-child(1){display:inline-block} .Friendship .title div:nth-child(2){margin-left:50px} .Friendship .title div:nth-child(1n+2){vertical-align:top;margin-top:7px} .Friendship .pic:after{height:345px} } @media (max-width:48.75rem) { #center_ollestay .contact_item {display:block} #center_ollestay .contact_item strong {display:block; margin-left:30px} } @media (min-width:589px) and (max-width:48.75rem){ .Friendship{width:45.714em;height:532px} .Friendship .pic{top:184px;left:0px;width:45.714em;border:1px solid #e1e1e1!important;height:345px} .Friendship .title:before{background-repeat:no-repeat;background-image:url(../images/Friendship/title_bg.png);content:'';background-position:50% 100%!important;position:absolute;width:45.571em!important;height:210px!important;z-index:9} .Friendship .title{width:45.714em;display:flex;justify-content:center;align-items:center;height:210px} .Friendship .title h3{margin:7px auto} .Friendship:nth-child(odd) .title{border-bottom:0px;border-right:1px solid #e1e1e1} .Friendship:nth-child(even) .title{border-bottom:0px;border-left:1px solid #e1e1e1} .Friendship .text{width:49.231em;top:26px} .Friendship .text span{display:block;margin-top:7px} .Friendship .title div:nth-child(1){display:inline-block} .Friendship .title div:nth-child(2){margin-left:50px} .Friendship .title div:nth-child(1n+2){vertical-align:top;margin-top:7px} .Friendship .pic:after{height:345px} #center_ollestay>.item_list .item:nth-child(n + 2) {width:100%; margin-left:0} } @media (max-width:588px){ td.flex p {width:100%} td.flex p:nth-child(odd){ margin-right:0} #cultureAndArt>div.flex { display:block } #cultureAndArt>div.flex>div {width:100%;} .Friendship{width:22.857em;height:822px} .Friendship .pic{top:295px;left:0px;width:22.857em;border:1px solid #e1e1e1!important;height:525px} .Friendship .title:before{background-repeat:no-repeat;background-image:url(../images/Friendship/title_bg.png);content:'';background-position:50% 100%!important;position:absolute;z-index:9;width:318px;height:318px} .Friendship .title{width:22.857em;height:320px;display:block} .Friendship .title div:nth-child(1){display:block} .Friendship .title div:nth-child(1n+2){margin:23px 2px} .Friendship:nth-child(odd) .title{border-bottom:0px;border-right:1px solid #e1e1e1} .Friendship:nth-child(even) .title{border-bottom:0px;border-left:1px solid #e1e1e1} .Friendship .text{width:24.615em;height:500px;top:23px} .Friendship .text span{display:block;margin-top:7px} .Friendship .pic:after{height:525px} .Friendship .text ul:nth-of-type(1){bottom:10px} .Friendship .text ul:nth-of-type(2){left:15px;bottom:130px} #ganseLounge .ganse_food .item, #ganseLounge .ganse_take .item{ width:100% } } /* 9.8 회원관련 */ .member_login{ margin:60px auto;font-size:1.142em} .member_login>div{position:relative} #missingID>div, #missingPW>div {width:100%;} .member_login .item_title{height:36px;margin-bottom:20px; line-height:36px;font-weight:700;font-size:1.6em;text-align:center} .member_login .item_title + p, .member_login .readTxt{width:100%;line-height:25px;margin-bottom:20px; word-break:keep-all;color:#808285;text-align:center} .member_login input[type=text],.member_login input[type=password]{box-sizing:border-box;height:40px;width:100%;line-height:38px; font-size:1.142em } .member_login>div dt{float:left;width:2em;height:40px;line-height:40px;font-weight:bold} #missingID>div dt, #missingPW>div dt {width:3.5em;} .member_login>div dd{margin-left:2.5em;line-height:40px} #missingID>div dd, #missingPW>div dd{margin-left:3.5em} .member_login>div dt:first-child, .member_login>div dd:nth-child(2){margin-bottom:10px} .member_login>div input[type=button]{color:#FFF;font-weight:bold;border:0px;border-radius:3px;background:#0aafed;font-size:1.142em} #missingID, #missingPW{margin:0 auto;padding:60px 0} #missingID form, #missingPW form{width:300px;margin:0 auto} #missingID input[type=button], #missingPW input[type=button]{display:block;width:100%;margin-top:20px;line-height:50px} .olleLogin form{position:relative;display:flex;padding-bottom:30px} .olleLogin dl{width:calc(100% - 100px);padding-right:10px} .olleLogin dd:last-child{position:absolute;line-height:30px} .olleLogin a{color:#00f;text-decoration:underline;display:inline-block;white-space:nowrap} .olleLogin input[type=button]{width:90px} .snsLogin a{position:relative;display:block;width:calc(100% - 49px);height:38px;padding-left:47px;margin-bottom:10px;line-height:38px;border:1px solid #bbb;border-radius:3px;color:#000;font-weight:bold} .snsLogin a img{position:absolute;top:-1px;left:-1px;width:auto;height:40px;border-radius:3px} .snsLogin a span { display:none; margin-left:.5em} #kakaoLogin .btnSet.final{margin-top:20px;margin-bottom:30px} #kakaoLogin form{width:260px;margin:20px auto} #kakaoLogin label{display:block;line-height:40px} #kakaoLogin label strong{display:inline-block;margin-right:1em;font-weight:bold} .olleJoin{ text-align:center} .olleJoin a{ display:block;box-sizing:border-box;width:100%;max-width:420px;height:2.8em;margin:0 auto;line-height:3em;text-align:center;font-size:2em;border:1px solid #0aafed;border-radius:3px;color:#0aafed;font-weight:bold} @media (min-width:640px){ .member_login { display:flex; justify-content:space-between; flex-wrap:wrap} } @media (min-width:1273px){ .member_login>div{width:calc(38% - 30px);} .member_login>div.snsLogin{width:calc(24% - 30px);} #missingID>div, #missingPW>div {width:100%;} .snsLogin a span { display:inline-block} } @media (min-width:1024px) and (max-width:1273px) { .member_login>div{width:calc(50% - 20px);} .member_login>div.olleJoin{width:100%; margin-top:30px; padding-top:30px;border-top:1px dashed #e2e2e2;} .snsLogin>div{display:flex;justify-content:space-between} .snsLogin>div>div, .snsLogin>div>a { box-sizing:border-box; width:calc(33.33% - 6px)} } @media (min-width:640px) and (max-width:1023.9px){ .member_login>div.olleLogin{width:calc(60% - 20px);} .member_login>div.snsLogin{width:calc(40% - 20px);} .member_login>div.olleJoin{width:100%; margin-top:30px; padding-top:30px;border-top:1px dashed #e2e2e2;} .member_login .m_hidden {display:none} .snsLogin a span { display:inline-block} } @media (max-width:640px){ .member_login>div:nth-child(n+2){width:100%; margin-top:30px; padding-top:30px;border-top:1px dashed #e2e2e2;} } @media (min-width:340.1px) and (max-width:640px){ .snsLogin>div{display:flex;justify-content:space-between} .snsLogin>div>div, .snsLogin>div>a { box-sizing:border-box; width:calc(33.33% - 6px); white-space: nowrap; } .snsLogin>div a { display:block; padding-left:40px; letter-spacing: -0.05em; text-align:center;} } @media (max-width:340px){ .snsLogin a span { display:inline-block} } .term-wrap{margin:30px 0;padding:10px;border:1px solid #e2e2e2;border-radius:5px;background-color:#f5f5f5} .term-wrap>.item_title{margin-bottom:10px;color:#27aae1;font-size:1.6em; font-weight:700} .term-wrap>.termAgree{margin-top:10px;line-height:1.5em;text-align:right} .term-wrap>.termView{box-sizing:border-box;width:100%;height:300px;padding:20px;border:1px solid #ccc;overflow:scroll;line-height:1.5em;background-color:#fff} .termView h5{margin:10px 0;font-size:1.2em;font-weight:bold; line-height:1.5em} .termView dl{margin:1em 0 3em} .termView dt{margin-top:1.5em;font-weight:bold} .termView dd{margin:.8em 0} .termView li{margin:.4em 0;list-style:none} .termView li>ol, .termView li>ul{margin-left:1.5em} .html_view.termView {padding:20px 0;line-height:1.5em} .html_view>.termView h4{color:#27aae1; font-size:1.4em; font-weight:bold; } .html_view>.termView h5, .html_view>.termView dt{ color:#000} #joinTerms>p, #joinCertify>p, #joinProfile>p, #joinResult>p {width:100%;line-height:25px;margin:10px 0;color:#808285;text-align:center} /* 신청내역 상세보기 */ .entryTitle + dd{font-weight:bold} dl.define_view + .view_answer{border-top:none;border-bottom:1px solid #e1e1e1} /* 참가증 프린트 */ .print-only{display:none} .item_list.print{display:flex;justify-content:space-around;flex-wrap:wrap} .item_list.print .item{width:calc(50% - 100px);margin:0 50px 50px;border:0px} .print .subsection_title{text-align:center;color:#0aafed} .item_list.print .item .item_title {line-height:1.2em; word-break:keep-all} .item_list.print .item .item_title strong {color:#808286} .item_list.print .item .item_subtitle { margin:5px 0 10px;font-size:1.4285em; color:#000; font-weight:bold; word-break:keep-all} .item_list.print .item .item_subtitle p { display:inline} .item_list.print .item .item_subtitle strong, .item_list.print .item .min_list>strong{color:#0aafed} .item_list.print .item .min_list { margin-bottom:10px} .print .btnSet{margin-top:30px} .print-only .item_list.print .item .item_title {text-indent:-50px;padding-left:50px} .fastival_linkEvent .item_list.print{justify-content:flex-start;} .fastival_linkEvent .item_list.print .item { text-align:center} @media (max-width:48.75rem){ .print .subsection_title{height:auto;display:block;font-size:1.5em;padding-bottom:15px} .item_list.print .item .item_title em{text-indent:0px;padding-left:0px} .item_list.print .item{width:100%;margin:10px 0px} } @media (max-width:588px){ .item_list.print .item { width:100%} } @media print{ @page a4sheet{size:21.0cm 29.7cm} body{page:a4sheet;page-break-after:always} #header, body>*, #sub_navi, .content_header, .print .btnSet, .m_hidden, #footer{display:none} .content{display:block} .a4{border:5px solid #0598f8;box-sizing:border-box;padding:5px 20px} .print-only{display:block} .a4 .content_body_top {padding:0} .a4 .content_body_top h4 {font-size:1.5em; font-weight:bold} .a4 .content_body_top>.img:first-child {width:310px; margin:0 calc(8cm - 155px); text-align: center} .required:before { content:"※"} .item_list.print .item{width:calc(50% - 10px)} .item_list.print .item:nth-child(2n+1){margin:0 10px 30px 0} .item_list.print .item:nth-child(2n){margin:0 0 30px 10px} .item_list.print .item .item_title em{ font-size:15px} .item_list.print .item .item_title strong{color:#0aafed} .item_list.print .item .min_list{font-size:12px} .print .subsection_title{text-align:center} .print .subsection_title em{font-size:18px;font-weight:normal;color:#0aafed} .screen-only{display:none !important} }