@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&family=Noto+Serif+KR:wght@300;400;700&display=swap');

body {
  font-family: 'Noto Sans KR', sans-serif;
  font-weight: 300;
  color: #666;
  /*line-height: 1.4;*/
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
  color: #000;
  font-weight: 700;
  margin: 0 0 10px;
}

a {
  color: #000;
  font-weight: 500;
  -webkit-transition: 0.2s color;
  transition: 0.2s color;
  cursor: pointer;
}

a:hover, a:focus {
  color: #000;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none
}


/* Skip Navgation */
#skipNav { position:absolute; top:-1000px; left:0; width:100%; height:0; line-height:0; font-size:0; z-index:9999;}
#skipNav a { display:block; width:100%; font-size:0; line-height:0; text-align:center;}
#skipNav a:focus, 
#skipNav a:hover, 
#skipNav a:active { display:block; position:absolute; left:0; top:1000px; height:30px; line-height:30px; font-size:14px; color:#fff; background-color:#35332F;}

.hide {position: absolute;left: 0;top: 0;width: 0;height: 0;overflow: hidden;}
.w-10 { width: 10% !important;}
.w-12 { width: 12% !important;}
.w-15 { width: 15% !important;}

/* 메인팝업 20220829-추가*/
.main_popup {display:none; position:absolute; top:0; left:0; z-index: 99999;}
.main_popup.on {display:block}
.main_popup .in_popup {background-color:#fff;}
.main_popup .in_cont {display:block; /*max-width:450px;*/}
.main_popup .in_cont img {display:block; /*max-width: 100%*/}
.main_popup .close_area { position: relative; height: 50px; line-height: 34px; background: #2a2a2a; display: flex;}
.main_popup .close_area button { text-align: center; color:#fff; width: 50%; font-size: 1rem; background: inherit; border: 0 !important; position: relative;}
.main_popup .close_x:before {position:absolute; top:20px;left:0; width: 1px; height:12px;content:'';background:#fff;}

@media screen and (max-width:750px){
    .main_popup { transform:translate(-50%, -50%); top:50% !important; left:50% !important;}
    .main_popup .in_popup { width:calc(100% - 20px); /*max-width:398px;*/ min-width:300px; margin:0 auto}
    .main_popup .in_cont img { max-width: 100%}
    .main_popup .close_area button { font-size: 0.875rem;}
}

.container { max-width: 1560px !important; position: relative;}
.container.sub-contents { max-width: 1360px !important;}

/* 공통 - header */
.top-menu { background: #6667ab; height: 40px; position: relative;}
.top-menu a { position: relative; color:#fff; font-size: 0.875rem; line-height: 40px; padding-right:20px;}
.top-menu a:after { content: ""; width: 1px; height: 12px; background: #fff; position: absolute; right:10px; top:15px; display: block;}
.top-menu a:last-child:after { display:none;}
.top-util { position: absolute; right:0; top:0; display: flex; justify-items: center;}
.top-util a { color:#fff; padding: 0 0.25rem; width: 105px; text-align: center; position: relative;}
.top-util a:after { display: none;}
.top-util a.log { background:#f9be00;}
.top-util a.lag { background:#4e4f8c}
.top-util a.top-menu-line:after { content: ""; width: 1px; height: 12px; background: #fff; position: absolute; right:0px; top:15px; display: block;}
  #lagSelect { position:absolute; z-index: 10; top:40px; right: 0; background: #fff; width: 105px; border: 1px solid #ddd; text-align: center;}
  #lagSelect a { color:#666; font-size: 0.75rem;}
  #lagSelect li:hover { background: #f2f2f2;}
  #lagSelect li { border-bottom: 1px solid #ddd;}
  #lagSelect li:last-child { border-bottom: 0;}

.cart_num {position: absolute;padding: 0px 3px;top: 4px;right: 12px;min-width: 18px;height: 18px;background: rgb(255, 72, 0);text-align: center;font-size: 9px;color: rgb(255, 255, 255);line-height: 18px;border-radius: 13px;}

.sitemap-area { position: relative;  background: #f2f2f2; padding: 1rem 0 8rem;}
.sitemap-area:after { content: ""; position: absolute; right: 0; bottom:-50px; width: 290px; height: 205px; display: block; background: url(../img/sitemap_bg.png) 0 no-repeat; }
.sitemap-area>div>div { border-radius: 0.5rem; background: #fff; height: 250px;}
  .sitemap_li {margin-top: 1rem;}
  .sitemap_li li { position: relative; padding:0.5rem 0 0.5rem 1rem; font-size: 1.125rem;}
  .sitemap_li li a {color:#666}
  .sitemap_li li a:hover { color:#417cf3; text-decoration: underline;}
  .sitemap_li li:before { content: ''; position: absolute; top: 20px; left: 0; width: 2px; height: 2px; border-radius: 50%; background: #000; }

/* pc - gnb */
.nav-menu { background: #fff; border-bottom: 1px solid #ddd;/* height: 90px;*/}
  .navbar-nav li { position: relative; display: block;}
  .navbar-nav li .depth-drop a { color:#000; border-bottom: 1px dashed #ddd; font-size: 1rem; display: block;}
  .navbar-nav li .depth-drop a:hover { font-weight: 400 !important; text-decoration: underline; color:#00c691}
  .navbar-nav li .depth-drop a:last-child { border-bottom: 0;}
  .navbar-nav li:hover .depth-drop { height: auto; top: 60px; text-align: left; visibility: visible;
		opacity: 1;
		transition: opacity,top 0.5s;
		-o-transition: opacity,top 0.5s;
		-ms-transition: opacity,top 0.5s;
		-moz-transition: opacity,top 0.5s;
		-webkit-transition: opacity,top 0.5s; }
  .navbar-nav li .depth-drop { position: absolute; width: 100%; height: 0; background: #fff; top: 0; opacity: 0; visibility: hidden; border-radius: 5px; box-shadow:2px 3px 4px 0px rgba(0,0,0,0.15);
		transition: opacity,top 0.5s;
		-o-transition: opacity,top 0.5s;
		-ms-transition: opacity,top 0.5s;
		-moz-transition: opacity,top 0.5s;
		-webkit-transition: opacity,top 0.5s; }

.navbar a { padding: 15px; display: block; font-size: 1.375rem; text-align: center;}
.navbar a:hover,
.navbar a.menu_on { font-weight: 700; color:#00c691}
.navbar-nav { flex: 1;}
.navbar-dark .navbar-toggler,
a.icon-link { font-size: 1.5rem !important;  color:#000 !important;}
a.icon-link:hover { color:#000 !important}
a.icon-link.icon-sch { position: absolute; right:55px; top:1.875rem}

#inputForm { width: 100%; background: #417cf3;}
#inputForm .form-inline { justify-content: center;}
#inputForm .form-inline input[type=search] { background: none; border:0 !important; border-radius: 0 !important; border-bottom: 2px solid #fff !important; color:#fff !important}
#inputForm .form-inline input::placeholder { color:#fff !important}
#inputForm .form-inline .top-sch { color:#fff; font-size: 1.5rem;}
#inputForm .form-inline a.top-sch { font-size: 1.875rem;}
#inputForm .keyword { font-size: 0.875rem; color:#fff; padding: 5px 20px; border: 1px solid #fff; border-radius: 30px; display: block; margin: 0.25rem;}
#inputForm .keyword:hover { background:rgba(255,255,255,.2);;}

.mo-gnb { display: none;}

/* 공통 - footer */
#footer { background: #1e1c1b; color:#666; font-size: 0.875rem; /*border-top: 1px solid #666;*/}
#footer a { color:#666}
#footer a:hover { color:#ddd}
#footer .footer-menu { border-bottom: 1px solid rgb(259, 256, 256, 0.25); position: relative;}
#footer .footer-menu a { color:#666; font-weight: 400; text-align: left; position: relative; padding: 1rem;}
#footer .footer-menu a b { color:#fff}
#footer .footer-menu a.site { background: #3e3d3e; position: absolute; right:0; padding: 1rem 1.5rem; width:347px; text-align: left; color:#fff;}
#footer .footer-menu a.site:after { content: "\232A"; position: absolute; right: 1.5rem; top:1rem; font-size: 0.875rem; display: block; transform: rotate(-90deg);}
#footer #siteSelect { position: absolute; background:#3e3d3e; z-index: 1040; right:0; width: 347px; bottom:51px}
#footer #siteSelect li { border-bottom: 1px solid #666; font-size: 1rem; padding: 0 0.75rem; }
#footer #siteSelect li a { display: block; color:#ddd}
#footer .copy-text { position: relative;}
#footer .copy-text p { margin-bottom: 0.3rem;}
#footer .copy-text span { position: relative; padding-right: 1rem;}
#footer	.snsLink a { width: 32px; height:30px; display:block; margin: 0 0.75rem; opacity: 0.6;}
#footer	.snsLink a:nth-child(1) { background:url(../img/sns01.png) center no-repeat; background-size: 100%;}
#footer	.snsLink a:nth-child(2) { background:url(../img/sns02.png) center no-repeat; background-size: 100%;}
#footer	.snsLink a:nth-child(3) { background:url(../img/sns03.png) center no-repeat; background-size: 100%;}
#footer	.snsLink a:nth-child(4) { background:url(../img/sns04.png) center no-repeat; background-size: 100%;}

@media only screen and (max-width: 991px) {

  .d-flex-sm { display: block !important;}
 
  .top-menu a  { font-size: 0.75rem;}
  .top-util a {  width: auto; padding: 0 0.75rem;}

  .sitemap-area h4 { font-size: 1.25rem !important;}
    .sitemap_li li { font-size: 1rem;}

  .navbar a { font-size: 1rem;}
  a.icon-link.icon-sch { right:45px;}

  #footer .footer-menu a.site { margin-right: 0;}
  #footer	.snsLink a { margin: 0 0.25rem;}

}
@media only screen and (max-width: 767px) {

  .top-menu { display: none;}
  a.icon-link.icon-sch { right:65px; top:26px}

  .sitemap-area>div>div { height: auto;}

  /* Mobile - gnb */
  .mo-gnb { display: block;}
  .nav-open-btn { display:block; position:fixed; top: 1.3rem; right:0.5rem; z-index:10000; -webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);}
  .nav-open-btn .line { display:block; width:22px; height:2px; background-color:rgb(0, 0, 0, 0.75); border-radius:5px; margin: 6px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
  .nav-open-btn.active .line {background-color:#fff;}
  .nav-open-btn.active .line:nth-child(2), 
  .nav-open-btn.active .line:nth-child(4) {opacity: 0;}
  .nav-open-btn.active .line:nth-child(1){ -webkit-transform: translateY(8px) rotate(45deg); transform: translateY(8px) rotate(45deg);}
  .nav-open-btn.active .line:nth-child(3){ -webkit-transform: translateY(-8px) rotate(-45deg); transform: translateY(-8px) rotate(-45deg);}
  .nav-open-btn>.cart_num {position: absolute;padding: 0px 3px;top: 3px;right: 0;min-width: 18px;height: 18px;background: rgb(255, 72, 0);text-align: center;font-size: 9px;color: rgb(255, 255, 255);line-height: 18px; border-radius: 13px; }
  .nav-open-btn.active>.cart_num { display: none;}

  .gnb-overlay-bg-m {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgb(0, 0, 0, 0.45); z-index:9998;}
  #gnbM{ display:block; position:fixed; top:0px; right:-80%;width:80%; height:100%;background-color:#fff; z-index:9999; transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); -webkit-transition:all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715); visibility:hidden;}
  #gnbM.open {right:0px; visibility:visible;}

    .gnb-navigation-wrapper {position:relative; height:100%; box-sizing:border-box; padding-top:80px; overflow-y:auto;}
    .header-util-menu-box + .gnb-navigation-wrapper {padding-top:0}
    .header-util-menu-box {position: relative; background: #6667ab; padding: 1rem;}
    .header-util-menu-box .lag-box { position: relative;}
    .header-util-menu-box .lag-box img { width: 100%; height: 100%;}
    .header-util-menu-box .lag-box>a { width: 15%; margin: 0 0.05rem;}
    .header-util-menu-box .lag-box>a>img { border-radius:2px; border: 4px solid #6667ab;}
    .header-util-menu-box .lag-box>a.sel-lag>img { border-color:#c5c6fb;}
    .header-util-menu-box .log-box { position: relative; margin: 1rem 0;}
    .header-util-menu-box .log-box a { position: relative; color:#fff; width: 33.3333%;}
      .cart_num {top: 4px;right: 6px}
    .header-util-menu-box .log-box a:after { content: ""; width: 1px; height: 12px; background: #fff; position: absolute; right:0px; top:6px; display: block;}
    .header-util-menu-box .log-box a:last-child:after { display: none; }
    .gnb-navigation-inner { margin: 1rem; position: relative;}
      /* Mobile :: 1차 메뉴 */
      #navigation { margin-top:15px;}
      #navigation li { text-align: left; border-bottom: 1px solid #ddd; position: relative; padding: 1rem 0;}
      #navigation li > a { position:relative; display: block; color:#000; font-size:1rem; font-weight:400; text-align: left; padding:0 0.5rem !important}
      #navigation li > a:after { content:"\002B"; position: absolute; top:50%; right:1rem; line-height: 0; display: block;}
      /* Mobile :: 2차 메뉴 */
      #navigation > li .gnb-2dep {display:none; margin: 1rem 0 0 0; padding: 0 1rem; border-radius: 5px; background-color:#f2f2f2; }
      #navigation > li .gnb-2dep > a {display:block; color:#666; font-size: 0.9375rem; padding: 1rem 0; border-bottom: 1px dashed #ddd; text-align: left !important;}
      #navigation > li .gnb-2dep > a:last-child { border-bottom:0;}
 
  #footer .footer-menu .d-flex {justify-content:space-between !important;}
  #footer .footer-menu a { padding: 1rem 0.25rem;}
  #footer .footer-menu a.site { display: none;}

}

@media only screen and (max-width: 720px) {

  #gnbM{ right:-100%;width:100%;}
  
  #footer .footer-menu a { text-align: center;}

}

/****** main-page ******/
#main-contents { position: relative; width: 100%; margin-top: 135px;}
#main-contents .main-title { position: absolute; left: 1rem; transform: translate(0,100%); width: 90%; z-index: 99;}
#main-contents .main-title h2,
#main-contents .main-title .tit_sub { color:#fff !important; font-weight: 400 !important; font-size:2rem; font-family: 'Noto Sans KR', sans-serif !important;}
#main-contents .main-title h2>p,
#main-contents .main-title .tit_main { font-size:4.25rem; font-family: 'Noto Serif KR', serif; color:#fff !important; font-weight: 400 !important; line-height: 1.2 !important;}
#main-contents .main-bg { position: relative; width: 100%; height:calc(100vh - 130px); cursor: pointer;}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;}
.swiper-container-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-custom, 
.swiper-pagination-fraction { position: relative !important; color:#fff !important; width: auto !important;}

#vid { width: 100%; height: 100%; object-fit: fill;}

.mainVisual .slide_btn { position: absolute !important; bottom:190px; left:50%; margin-left: -120px;  z-index: 10; width: 240px;}
.mainVisual .slide_btn button { width:40px; height: 40px; border: 0 !important; display: inline-block;}
.mainVisual .slide_btn div { display: inline-block; margin: 0 1rem;}
.mainVisual .swiper-prev { background: url(../img/btn_arrow_prev.png) center no-repeat !important;}
.mainVisual .swiper-next { background: url(../img/btn_arrow_next.png) center no-repeat !important;}
.mainVisual .start { background: url(../img/btn_play.png) center no-repeat !important;}
.mainVisual .stop { background: url(../img/btn_stop.png) center no-repeat !important;}

.main-article { position: absolute; width: 100%; height:180px; left: 0; bottom:0; background-color:rgb(0, 0, 0, 0.65); z-index: 10;}
.main-article div { height: 180px;}
.main-article .noti,
.main-article .event { border-left: 1px solid rgb(259, 256, 256, 0.25); position: relative;}
.main-article .noti a.more:after,
.main-article .event a.more:after { content: "\002B"; color:#fff; display: block; font-size: 2rem; position: absolute; top:1rem; right:1.5rem;}
.main-article h3 { border-radius:36px; color:#fff; font-size: 1.125rem; font-weight: 400; width: 120px; text-align: center; padding: 0.5rem 0; margin: 1.5rem 0;}
.main-article .noti h3 { background: #00c691;}
.main-article .event h3 { background:#3366cc;}
.main-article div ul  {margin-top: 7px;}
.main-article div ul li { position: relative; padding:5px 0 5px 10px; font-size: 1rem;}
.main-article div ul li a { color:#fff; width: 80%;  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display: block;}
.main-article div ul li:before { content: ''; position: absolute; top: 50%; left: 0; width: 2px; height: 2px; border-radius: 50%; background: #fff; }
.itemObject { position: relative;}
.itemObject:after { content: ""; position: absolute; right: 1rem; top:-119px; z-index: 100; background: url(../img/character1.png) 0 0 no-repeat; width:113px;  height: 134px; display: block; background-size: 100%;}
.main-article .goLink>div>a { color:#fff; width: 100%; height: 100%; display: block;}
.main-article .goLink>div>a>p { padding-top: 7rem;}
.main-article .goLink>div:after {content: ""; position: absolute; top:25%; left:50%; margin-left: -33px; width:67px;  height: 45px; display: block; cursor: pointer;}
.main-article .goLink-1 {background: #f26f00;}
.main-article .goLink-1:after { background: url(../img/goLink-01.png) 0 0 no-repeat;}
.main-article .goLink-2 {background: #00c691;}
.main-article .goLink-2:after { background: url(../img/goLink-02.png) 0 0 no-repeat;}
.main-article .goLink-3 {background: #417cf3;}
.main-article .goLink-3:after {background: url(../img/goLink-03.png) 0 0 no-repeat;}

@media only screen and (max-width: 991px) {

  #main-contents .main-title h2,
  #main-contents .main-title .tit_sub {  font-size:1.5rem;}
  #main-contents .main-title h2>p,
  #main-contents .main-title .tit_main { font-size:3.25rem;}

  .main-article .goLink>div>a { font-size: 0.75rem;}

}

@media only screen and (max-width: 767px) {

  #main-contents { margin-top: 90px;}
  .main-article { position: relative; background-color:#fff; height: 540px;}
  .main-article div ul li a { color:#000;}
  .main-article div ul li:before {background: #000;}

  .main-article .goLink>div>a { font-size: 1rem;}
  
}

@media only screen and (max-width: 720px) {

  #main-contents .mainVisual { height:240px; position: relative;}
  #main-contents .mainVisual:after { content: ""; position: absolute; right: 1rem; bottom:-20px; z-index: 100; background: url(../img/character1.png) 0 0 no-repeat; width:98px;  height: 122px; display: block; background-size:100%;}

  #main-contents .main-title { transform: translate(0,30%);}
  #main-contents .main-title h2,
  #main-contents .main-title .tit_sub { font-size:1rem;}
  #main-contents .main-title h2>p,
  #main-contents .main-title .tit_main { font-size:1.5rem;}
  #main-contents .main-bg { height:240px;}	
  .mainVisual .slide_btn { display: none;}
  
  .main-article .event { border-top: 1px dashed #ddd;}
  .main-article .noti a.more:after,
  .main-article .event a.more:after {color:#000; top:1.5rem}
  .main-article div ul li a { width: 100%;}
  .itemObject:after { display: none;}

  .main-article .goLink-1:after { background: url(../img/goLink-01-mo.png) 0 0 no-repeat; background-size: 100%;}
  .main-article .goLink-2:after { background: url(../img/goLink-02-mo.png) 0 0 no-repeat; background-size: 100%;}
  .main-article .goLink-3:after {background: url(../img/goLink-03-mo.png) 0 0 no-repeat; background-size: 100%;}

}

/****** sub-page ******/
#subVisual { position: relative; width: 100%; padding-top: 135px;}
#subVisual .sub-bg { position: relative; height:240px; border-bottom: 1px solid #ddd;}					
#subVisual .sub-bg.sub-bg1 {background: url(../img/sub_bg1.jpg) center no-repeat; background-size: cover;}
#subVisual .sub-bg.sub-bg2 {background: url(../img/sub_bg2.jpg) center no-repeat; background-size: cover;}
#subVisual .sub-bg.sub-bg3 {background: url(../img/sub_bg3.jpg) center no-repeat; background-size: cover;}
#subVisual .sub-bg.sub-bg4 {background: url(../img/sub_bg4.jpg) center no-repeat; background-size: cover;}
#subVisual .sub-bg.sub-bg-other {background: url(../img/sub_bg5.jpg) center no-repeat; background-size: cover;}
#subVisual .sub-title { position: absolute;left: 50%;top: 35%;transform: translate(-50%,-35%);width: 100%; height: 376px;}
#subVisual .sub-title h2 { color:#fff !important; font-weight: 400 !important; margin: 5rem 0 0; position: absolute; left: 50%; top: 35%; transform: translate(-50%, -35%);}
#subVisual .sub-title h2.other-h2 { margin: 6rem 0 0;}

/* 공통 2depth 메뉴 */
#subVisual .sub-title .depth-menu { bottom:1px; left:0; height: auto; position: absolute; z-index: 10; background: #fff; padding: 0 !important; margin: 0 !important;}
#subVisual .sub-title .depth-menu div { color:#000; display: block; font-size: 1.125rem; border-left: 1px solid #ddd; padding: 0;}
#subVisual .sub-title .depth-menu div:first-child { border-left:0;}
#subVisual .sub-title .depth-menu div.menu-active { border-top: 4px solid #00c691;}
#subVisual .sub-title .depth-menu div:hover a,
#subVisual .sub-title .depth-menu div.menu-active a { color: #00c691; font-weight: 700;}
#subVisual .sub-title .depth-menu div a { display: block; padding: 1.25rem 0 !important;}

.locationWrap { border-bottom: 1px solid #ddd;}
.locationWrap .location a { font-size: 0.875rem; color:#666; position: relative; padding-right: 16px;}
.locationWrap .location a.on { color:#000; font-weight: 700;}
.locationWrap .location a:last-child { padding-right: 0;}
.locationWrap .location a:after { content: "\232A"; font-size: 0.75rem; color:#666; position: absolute; top: 2px; right: 0;}
.locationWrap .location a:last-child:after { display: none;}

.contWrap { position: relative; min-height: 536px;}
.contWrap.pt-5 { padding-top: 1rem !important;} /*20220707 추가*/
.contWrap b { color:#000; font-weight: 700;}
.contWrap h4 { font-size:1.5rem; font-weight: 400 !important;}
.contWrap h4>b { font-weight: 400 !important; color:#417cf3;}
.contWrap h5 { font-size:1.125rem; color:#417cf3; font-weight: 400 !important;}

.bullet_li {margin-top: 8px;}
.bullet_li li { position: relative; padding:0.25rem 0 0.25rem 0.5rem; font-size: 0.875rem; color: #000;}
.bullet_li li:before { content: ''; position: absolute; top: 13px; left: 0; width: 2px; height: 2px; border-radius: 50%; background: #000; }
.bullet_li li b { color:#417cf3 !important; font-weight: 400 !important;}

.bullet_li-lg li { position: relative; padding:0.25rem 0 0.25rem 0.5rem; font-size: 1rem;}
.bullet_li-lg li:before { content: ''; position: absolute; top: 16px; left: 0; width: 2px; height: 2px; border-radius: 50%; background: #000; }

/* 공통 - 기본 오브젝트 */
.text-line {position: relative; font-size: 0.875rem; border-radius:5px; padding: 0.5rem;}
.line-neon { border:1px solid #28d39c; color:#28d39c;background: #fff !important;}
.line-orange { border: 1px solid #f15116; color:#f15116}
.bg-gray { background: #f8f8f8;}
.bg-neon { border:1px solid #28d39c !important; background: #28d39c !important; color: #fff !important;}
.bg-blue { border:1px solid #417cf3 !important; background: #417cf3 !important; color: #fff !important;}
.btn-line { background: #fff !important; color: #666 !important; border: 1px solid #ddd;}
.text-pink { color: #eb278f !important;}
.text-neon { color: #28d39c !important;}
.text-blue { color: #417cf3 !important;}
.text-orange {color:#f15116 !important}
.point-tag { border-radius: 35px; background: #417cf3; color: #fff; padding: 0.25rem 1.125rem; margin-right: 0.5rem; }
.btn-dark { background: #222 !important;}

/* 공통 탭메뉴 */
.tabMenu_faq_pc li { margin-right: 0.25rem;}
.tabMenu_faq_pc li:last-child { margin-right: 0;}
.tabMenu_faq_pc { border-bottom: 4px solid #417cf3;}
.tabMenu_faq_pc button { border:1px solid #ddd; border-bottom: 0 !important; padding: 0.75rem 0; background: #fff !important; width: 100%;  border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius:0 !important; border-bottom-right-radius: 0 !important;}
.tabMenu_faq_pc button:last-child { margin-right: 0;}
.tabMenu_faq_pc button.active { border:1px solid #417cf3; color:#fff !important; background: #417cf3 !important;}
.tabMenu_faq_mo { display: none;}

/* 전북투어패스안내 */
.jbtourpass-area { position: relative; text-align: center;}
.jbtourpass-area .title { font-size: 2.5rem; color:#000; font-family: 'Noto Serif KR', serif; padding-top: 1.5rem;}
.jbtourpass-area .title>b { color: #1f65f1; font-weight: 400 !important;}
.jbtourpass-area .txt-info { font-size: 1.125rem; color:#666}
.jbtourpass-area .txt-info>b { font-weight: 400 !important; color:#000}
.jbtourpass-area img { width: 100%;}
.jbtourpass-area .card-box { border: 1px solid #ddd; border-radius: 0.5em; overflow: hidden;}

.jbtourpass-area>div>dl { position:relative;}
.jbtourpass-area>div>dl	dt { font-size: 1.5rem; font-weight: 400 !important; font-family: 'Noto Serif KR', serif; color:#000;}
.jbtourpass-area>div>span { display: inline-block; border-radius: 50%; width:100%; max-width: 275px; height: 275px;}
.jbtourpass-area>div:nth-child(1)>span { background:#ecf5fb url(../img/character_img1.jpg) center no-repeat;}
.jbtourpass-area>div:nth-child(2)>span { background:#ecf5fb url(../img/character_img2.jpg) center no-repeat;}
.jbtourpass-area>div:nth-child(3)>span { background:#ecf5fb url(../img/character_img3.jpg) center no-repeat;}

.jbtourpass-area ul	li { position: relative; display: inline-block; vertical-align: top;}
.jbtourpass-area ul	li span { letter-spacing:0; display:block; margin: 0.5rem;}
.jbtourpass-area ul	li i { position:relative; height:70px; display:block; margin:15px 0 10px 0;}
.jbtourpass-area ul	li i::after { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:70px; height:100%; border-radius:50%;}
.jbtourpass-area ul.main-color li:nth-child(1) i::after{ background-color:#F9BE00;}
.jbtourpass-area ul.main-color li:nth-child(2) i::after{ background-color:#D7001F;}
.jbtourpass-area ul.sub-color	li:nth-child(1)	i::after{ background-color:#89BD1A;}
.jbtourpass-area ul.sub-color	li:nth-child(2)	i::after{ background-color:#0080CC;}
.jbtourpass-area ul.sub-color	li:nth-child(3)	i::after{ background-color:#F4B2B4;}
.jbtourpass-area ul.bg-color li:nth-child(1) i::after{ background-color:#C4C8C7;}
.jbtourpass-area ul.bg-color li:nth-child(2) i::after{ background-color:#FFFFFF; border:1px solid #e0e0e0;}

/* 투어패스구매 */
.mobile-btn-area { display:none;}
.product-area { position: relative;}
.product-area .best-item img { width: 100%;}
.product-area .best-item .price-area .title { font-size: 1.25rem; position: relative; color:#000;}
.product-area .best-item .price-area .title .sub-title { font-size: 1.125rem; color:#417cf3}
.product-area .best-item .price-area .btn-down { background: #000; border-radius: 0; color:#fff; font-size: 0.75rem; padding: 0.375rem 0.5rem;}
.product-area .best-item .price-area p.item1 { color:#f15116; font-size: 1.75rem;}
.product-area .best-item .price-area p.item2 s { color:#999; font-size: 1.25rem;}
.product-area .best-item .price-area p.item2 b { font-size: 1.625rem;}

.product-area .basic-item img { width: 100%;}
.product-area .basic-item .price-area .title { font-size: 1rem;}
.product-area .basic-item .price-area p.item1 { color:#f15116; font-size: 1.25rem;}
.product-area .basic-item .price-area p.item2 s { color:#999; font-size:1rem;}
.product-area .basic-item .price-area p.item2 b { font-size: 1.25rem;}

/* 상세 - 딜페이지 */
.product-area .detail-item img { width: 100%;}
.product-area .detail-item .price-area .title { font-size: 1.25rem; position: relative; color:#000;}
.product-area .detail-item .price-area .title .sub-title { font-size: 1.125rem; color:#417cf3}
.product-area .detail-item .price-area .btn-down { background: #000; border-radius: 0; color:#fff; font-size: 0.75rem; padding: 0.375rem 0.5rem;}
.product-area .detail-item .price-area p.item1 { color:#f15116; font-size: 1.75rem;}
.product-area .detail-item .price-area p.item2 s { color:#999; font-size: 1.25rem;}
.product-area .detail-item .price-area p.item2 b { font-size: 1.625rem;}
.option-area { position: relative;}
  .opt-select { position: relative; border-bottom: 1px solid #ddd;}
  .opt-select select { width: 100%; border: 1px solid #ddd; padding: 1rem 0.5rem; border-radius: 0.25rem;}
  .opt-select .opt-list { height: 174px; overflow-y: scroll;}
  .opt-select .opt-item { border-top: 1px solid #ddd; position: relative;}
  .opt-select .opt-item b { color:#000;}
  .opt-select .opt-item a { position: absolute; top:0.5rem; right:0; font-size: 1rem;}
  .opt-select .opt-item button,
  .opt-select .opt-item input { border-radius: 0 !important; width: 36px; height: 36px; border: 1px solid #ddd !important; background: #fff;}
  .opt-select .opt-item button { background: #f1f2f4;}
  .opt-select .opt-item .opt-price { font-size: 1.5rem; color:#000; font-weight: 700;}
  .total-price dt { color:#000 !important}
  .total-price dd { color: #00c691; font-size: 2.25rem; font-weight: 700;}
.product-detail img { max-width: 100%;}
.product-detail .detail-more {display: block;width: 100%;height: 58px;border: 1px solid #000;font-size: 1.125rem; color: #000; position: relative; border-radius: 0 !important;}
.product-detail .detail-more:after { position: absolute; right: 0; bottom: 58px; left: 0; height: 160px; background: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(#fff)); background: linear-gradient(180deg,hsla(0,0%,100%,0),#fff); content: "";}

/* 지도검색 */
.map-area { position: relative; background: #417cf3; border: 8px solid #417cf3;}
.map-area select { width: 180px; border:1px solid #86adfa; background:#417cf3; color:#fff; padding:6px 0.25rem; border-radius: 0.25rem;}
.map-area .input-line { border:1px solid #86adfa; background:#417cf3; color:#fff; border-radius: 0.25rem;}
.map-area input { background:#417cf3; padding: 0.25rem 0 0.25rem 0.5rem; border: 0 !important; color:#fff;}
.map-area input::placeholder { color:#fff !important;}
.map-area button,
.map-area button:hover { color:#fff;}
.map-open { position: absolute; right:0; top:0; border-radius: 0.25rem; background: #1f65f1; color:#fff; padding: 8px 2rem 8px 1rem;}
.map-open:after { font-family: 'FontAwesome'; font-style: normal; font-size: 1rem; content: "\2212"; color: #fff; position: absolute; right: 10px; }
.map-open.collapsed:after { content: " \002B";}
.map-open:hover,
.map-open:focus,
.map-open:active,
.map-open.collapsed { color:#fff}
.map-area .mapApi{ position: relative; width: 100%; height: 550px; background-color: #ECF5FB; overflow: hidden;}

/*20220707 (지역별 선택박스) 추가*/
.select2-container--default .select2-selection--single { background-color: #417cf3 !important; border: 1px solid #86adfa !important;}
.select2-container--default .select2-selection--single .select2-selection__placeholder {color: #fff !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 6px !important; right: 8px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #fff transparent transparent transparent !important;}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #fff transparent !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered {color: #fff !important;}

.store-area .basic-item { border-bottom: 1px solid #ddd; margin-bottom: 1rem;}
.store-area .basic-item>a>p {overflow: hidden; width: 100%; height: 0; padding-top: 113.2%; position: relative;}
.store-area .basic-item img { width: 100%; position: absolute; top: 0; left: 0;}
.store-area .basic-item .title { font-size: 1rem; color:#000 !important;}
.store-area .basic-item .title2 { font-size: 1.25rem; position: relative; color:#000;}
.store-area .basic-item .tag-zone { border-radius: 1rem; padding: 0.25rem 1rem; color:#fff; font-size: 0.75rem; background: #00c691; margin:0.1rem 0.25rem 0.1rem 0; display: inline-block;}
.tag-pink { background: #fc5296 !important;}

/* 1:1문의 - 게시판 목록 */
.tag-notice { border-radius: 3px; padding: 0.25rem 0.5rem; font-size: 0.75rem;}
table caption { position: absolute; top: -99999px; left: -99999px; line-height: 0;}
.board-table { position: relative; border-top: 2px solid #000; text-align: center;}
.board-table thead { position: relative; color:#000;}
.board-table thead th { border-bottom:1px solid #000 !important; font-weight: 400; padding: 1rem 3px;}
.board-table thead th:first-child,
.board-table tbody td:first-child{ width: 50px;}
/*.board-table thead th:last-child,
.board-table tbody td:last-child { width: 100px;}*/
.board-table tbody td.title { width: 50%; text-align: left;}
.board-table tbody th { position: relative; vertical-align: middle !important; text-align: left; border-bottom:1px solid #ddd; color:#000!important; font-weight: 400; width: 15%; padding: 2rem 3px;}
.board-table tbody td { border-bottom: 1px solid #ddd; padding: 2rem 3px; color:#666; vertical-align: middle; position: relative;}
.board-table tbody td a { position: relative; /*width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;*/}
.board-table tbody td a:hover { text-decoration: underline; color:#417cf3}
  .cart-total { border-bottom: 1px solid #000; color:#000 !important}
  .cart-total th { text-align: left; vertical-align: middle;}
  .cart-total b { font-size: 2rem; color:#f15116;}

/* 1:1문의 - 게시판 상세 */
.boardView-table { position: relative; border-top: 2px solid #000;}
.boardView-table img { max-width: 100%;}
.boardView-table .view-body {position: relative; }
.boardView-table .view-body>li { border-bottom: 1px solid #ddd; padding: 2rem 3px; margin: 0 !important; color:#000; position: relative;}
.boardView-table .view-body li.board-title { font-size:1.375rem; font-weight: 400;}
.boardView-table .view-body li.li-element { padding: 0.75rem 3px; font-size: 0.875rem; color:#666}
.boardView-table .view-body li.li-element>div { min-width:150px}
.boardView-table .view-body li.editorWrap { color:#666;}
.boardView-table .view-body li.editorWrap>div { margin: 0 1rem;}
.boardView-table .view-body li.answerWrap>div { margin: 0 1rem 0 3rem;}
.boardView-table .view-body li.answerWrap .answer-arrow { position: absolute; top:2rem; left:1.5rem}
.boardView-table .view-body li.answerWrap { color:#00c691;}

.uploader-wrap .qna-uploader { padding: 1rem; border: 1px dashed #ddd; background: #fafafa; vertical-align: middle; color: #7d7d7d; position: relative;}
.uploader-wrap .uploader-list a { font-size: 0.875rem; }

/* 자주하는질문 */
.accordion .card { border:0; border-radius: 0; background: #fff; margin-bottom: 0 !important; }
.accordion>.card>.card-header { background: #fff; border-bottom: 1px solid #ddd; margin-bottom: 0;}
.accordion>.card>.card-header button { font-weight: 700; line-height: 0; position: relative; padding: 0 1.5rem 0 0;}
.accordion>.card>.card-header button>p { font-size: 1rem; font-weight: 500; padding:0.75rem; line-height: 1.4;}
.accordion>.card>.card-header button,
.accordion>.card>.card-header button:hover { text-decoration: none; display: block; font-size: 1rem; color:#2a2a2a; background: inherit;}
.accordion>.card>.card-header button:focus { box-shadow: none;}
.accordion>.card>.card-header button:after { font-family: 'FontAwesome'; font-style: normal; font-size: 1.5rem; content: "\f106"; color: #417cf3; position: absolute; right: 0.75rem; top:50%}
.accordion>.card>.card-header .collapsed { font-weight: 400;}
.accordion>.card>.card-header .collapsed:after { content: "\f107";}
.accordion .card-body { color:#2a2a2a; background:#f8f8f8; padding: 0.5rem 0;}
.accordion .card-body pre { font-family:'Noto Sans KR', sans-serif; margin: 0 1rem; font-size: 1rem !important; word-wrap: break-word; word-break: keep-all; white-space: pre-wrap; line-height: 1; color:#417cf3 !important;}
.accordion .card-body pre p,
.accordion .card-body p { margin: 0 !important; color:#417cf3; line-height: 1.4}

/* 이벤트 */
.event-area { position: relative;}
.event-area>div>a { border: 1px solid #ddd;}
.event-area>div>a:hover .btn-line { color:#fff !important; background: #417cf3 !important; border: 1px solid #1f65f1 !important;}
.event-area img { width: 100%;}
.event-area .title { font-size: 1.125rem; position: relative; color:#000; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;  word-wrap: break-word; overflow:hidden; text-overflow:ellipsis; line-height:1.2em; height:2.4em;}

/* 장바구니 */
.cart-item img { width: 100%;}
.cart-item .title { font-size: 1.125rem; position: relative; color:#000; font-weight: 700;}
.cart-item .title .sub-title { font-size: 1rem; color:#417cf3; font-weight: 300;}
.cart-item .title .item-text { font-size: 0.875rem; font-weight: 300;}
.cart-opt { position: relative; font-weight: 700; color:#eb278f;}
.cart-opt p { font-size: 1.25rem; color:#000; font-weight: 700;}
.cart-opt button,
.cart-opt input { border-radius: 0 !important; width: 36px; height: 36px; border: 1px solid #ddd !important; background: #fff;}
.cart-opt button { background: #f1f2f4;}
  .cart-price { font-size: 1.5rem !important; width:120px;}

  .table_li:before { content: ""; position: absolute; width: 59px; height: 22px; display: block; background: url(../img/tooltip-bg.png) 0 0 no-repeat;  top:-22px; right:0; z-index: 10;}
  .table_li li { position: relative; padding:0.25rem 0; font-size: 0.875rem; }
  .table_li li b { color:#417cf3 !important; font-weight: 400 !important;}

.agreeBox { position: relative; height: 250px; overflow-y: scroll; border: 1px solid #ddd;}
.agreeBox .etc { font-size: 0.875rem !important;}
.checkbox_box input[type=checkbox] { width: 18px; height: 18px;}

.p_same { font-size: 0.875rem;}

/* 통합검색 */
#totalForm { width: 100%; background: #f8f8f8; border-bottom: 3px solid #417cf3; padding: 1.5rem 1rem; margin-bottom: 1.5rem;}
#totalForm .form-inline { justify-content: center; border: 1px solid #000; background: #fff; height: 50px;}
#totalForm .form-inline input[type=search],
#totalForm .form-inline select { border:0 !important; background: none; height: 48px; padding-right: 3rem;}
#totalForm .form-inline button { border-radius: 0;}

.totalSearch-area	h4 small { font-size:1.125rem; color:#666;}
.totalSearch-area	ul.result-list { border-top: 2px solid #000;}
.totalSearch-area	ul.result-list li { margin:1rem 0; border-bottom: 1px solid #ddd;}
.totalSearch-area	ul.result-list li dt a	{ color:#222; text-decoration:underline;}
.totalSearch-area	ul li	dl { margin:1rem 0;}
.totalSearch-area	ul li	dl dt { margin-bottom:0.5rem;}
.totalSearch-area	ul li	dl dd	{ color:#666; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap: break-word; overflow:hidden; text-overflow:ellipsis; line-height:1.2em; height:2.4em;}
.totalSearch-area	ul li	i { font-size:1rem; color:#417cf3; margin-right:0.5rem;}
.totalSearch-area	.list_info,
.totalSearch-area	.list_info a { font-size:0.875rem; color:#949494; text-decoration:none; display:block;}
.totalSearch-area	.list_info a:hover { text-decoration:underline;}
.totalSearch-area	.list_info span	{ letter-spacing:0; display:block;}


/* 공통 - 페이지넘버 */
.page-item:first-child .page-link,
.page-item:last-child .page-link { border-radius: 50% !important; border:1px solid #ddd !important; line-height: 1; text-align: center;}
.page-link { color:#000 !important; border: 0; border-radius: 50%; margin: 0 0.2rem; width: 36px; height: 36px; padding: 0.5rem 0 !important; text-align: center;}
.page-link:hover { background: #f2f2f2;}
.page-item.active .page-link { background-color: #ddd; border-color: #ddd;}


/* 공통 - 모달창 */
.modal-content .modal-header { border-bottom: 0 !important;}
.modal-content .modal-header a { font-size: 1.5rem;}
.modal-content .modal-body .bg-e h2 { position: relative; padding-top: 8rem;}
.modal-content .modal-body .bg-e h2:before { content:""; position: absolute; top:0; left:50%; margin-left: -43px; width: 72px; height: 108px; display: block; background: url(../img/ico-log.png) 0 0 no-repeat; background-size: 100%;}
.modal-content .modal-footer { border-top: 0 !important; justify-content: space-between;}
.modal-content h2 { font-size: 1.375rem !important;}
.modal-content h3 { font-size: 1.375rem !important; font-weight: 400 !important;}
.bg-e { background: #eee; border:1px solid #eee; border-radius: 0.3rem;}
.bg-e b { font-weight: 700; color:#2a2a2a; text-decoration: underline;}

.modal-content.modal-store { height: 450px; overflow-y: scroll;}
.modal-content.modal-store .title { font-size: 1.25rem !important; font-weight: 400 !important; color:#000;}
.modal-content.modal-store .tag-zone { border-radius: 1rem; padding: 0.25rem 1rem; color:#fff; font-size: 0.75rem; background: #00c691; margin-right: 0.25rem;}
.modal-content.modal-store img { width: 100%;}
.modal-content.modal-store .map-area { height:250px;}

.carousel-indicators li { width: 10px; height: 10px; border-radius: 50%;}
.carousel-control-prev-icon,
.carousel-control-next-icon { width: 40px; height: 40px;}
.carousel-control-prev-icon { background-image: url(../img/carousel-prev.png);}
.carousel-control-next-icon { background-image: url(../img/carousel-next.png);}


@media (min-width: 576px) {
 
  .modal-dialog { max-width: 750px;}

}

/*이용약관*/
.etc { position: relative; color: #666; padding:0 1rem;}
.etc .policy h4,
.etc .policy .title,
.etc .policy dl dt { margin:2rem 0 1rem; font-size: 1.25rem; color:#2a2a2a; font-weight: 400;}
.etc .policy h5 { margin: 1rem 0 0.5rem; font-size: 1.125rem; color:#1f65f1; font-weight: 400;}
.etc .policy h6 { margin:1.5rem 0 0; }
.etc .policy table { margin: 12px 0 0 0; border-bottom: 1px solid #ddd; border-top: 2px solid #171717; table-layout: fixed; width: 100%; font-size: 0.875rem;}
.etc .policy table caption {position: absolute;left: 0;top: 0;width: 0;height: 0;overflow: hidden;}
.etc .policy table thead th { height: 38px; font-size: 0.875rem; padding: 0 10px; color: #000; text-align: center; vertical-align: middle; border-bottom: 1px solid #ddd;}
.etc .policy table tbody th { font-size: 0.875rem; font-weight: 700; padding: 10px; color: #000; text-align: center; vertical-align: middle; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; background: #eee;}
.etc .policy table tbody tr td { border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; word-break: break-all; vertical-align: middle; padding: 10px; position: relative;}
.etc .policy table tbody tr td a,
.etc .policy table tbody tr td a:hover,
.etc .policy table tbody tr td a:active,
.etc .policy table tbody tr td button { border-radius: 3px; background: #1f65f1; color:#fff; border: 1px solid #1f65f1; text-align: center; font-size: 0.75rem; padding: 4px 8px; line-height: 1.4; display: inline-block;}
.etc .policy table tbody th:last-child,
.etc .policy table tbody tr td:last-child { border-right: none;}
	.policy ul li { padding: 0 0 8px 0; line-height: 1.6;}
  .policy ul li p { margin: 0 !important;}
  .policy ul li>ul { margin-left: 1rem;}
	.policy a,
	.policy a:active { text-decoration: underline; color:#1f65f1;}

  .etc .policy dl.dl-box { border:1px solid #ddd; background: #f8f8f8; padding: 0 1.25rem 1.25rem; margin-top: 1.5rem;}



@media only screen and (max-width: 991px) {

  #subVisual .sub-title .depth-menu a { font-size: 1rem;}
  .locationWrap { display: none !important;}
  .form-control { flex: 1;}
  .text-line { padding: 0.25rem 0.5rem;}

  .product-area .best-item .price-area .title { font-size: 1rem;}
  .product-area .best-item .price-area .title .sub-title { font-size: 0.875rem;}
  .product-area .best-item .price-area p.item1 { font-size: 1.125rem;}
  .product-area .best-item .price-area p.item2 s { font-size: 0.875rem;}
  .product-area .best-item .price-area p.item2 b { font-size:1.125rem;}

  .product-area .basic-item .price-area p.item2 s { font-size: 0.875rem;}

  .tabMenu_faq_mo { display: block;}
  .tabMenu_faq_mo .btn-faq { border: 1px solid #4683f4; background:#4683f4; color:#fff; font-weight: 700; text-align: left;}
  .tabMenu_faq_mo .btn-faq::after { position: absolute !important; right:0.75rem !important; top:50% !important;}
  .tabMenu_faq_mo .dropdown-menu { border: 1px solid #4683f4;}
  .tabMenu_faq_mo .dropdown-menu .dropdown-item:hover { background:#4683f4 !important; color:#fff !important;}
  .tabMenu_faq_pc { display: none;}

  .board-li { position: relative; border-top: 2px solid #000; margin-bottom: 1rem;}
  .board-li>li { position: relative; border-bottom:1px solid #ddd;}
  .board-li li ol li { padding: 0.25rem 0;  font-size: 0.875rem;}
  .board-li li ol li img { max-width: 100%;}
  .board-li li ol li:first-child { font-size: 1rem !important; color:#000;}
  
}

@media only screen and (max-width: 767px) {

  #subVisual { padding-top: 95px;}
  #subVisual .sub-bg { height: 176px;}
  #subVisual .sub-title { height: 271px;}
  #subVisual .sub-title h2 {  margin: 3rem 0 0; font-size: 1.75rem;}
  #subVisual .sub-title h2.other-h2 { margin: 5rem 0 0;}
  #subVisual .sub-title .depth-menu a { font-size:0.875rem;}

  .map-open,
  .map-area .mapApi { display: none;}
  .map-area select { width: 150px;}
  .map-area .input-line { width: 100%;}

  .product-area .best-item .price-area { padding-left: 0 !important;}
  .product-area .detail-item .price-area .title { font-size: 1.125rem;}
  .product-area .detail-item .price-area .title .sub-title { font-size: 0.875rem;}

  .option-area { display: none;}
  .mobile-btn-area { display: flex; position: fixed; width: 100%; bottom:0; z-index: 99; background: #fff; padding: 1rem; box-shadow:0 0 4px 0 #e0e0e0; height: auto;}
  #optBox { position: absolute; z-index: 100; left:0; bottom:0; background: #fff; border-bottom: 1px solid #ddd; box-shadow:0px -4px 5px -4px #e0e0e0;}
  #optBox .btn-close { position: absolute; top:-26px; left:50%; margin-left: -36px; width: 76px; height: 26px; font-size: 1rem; color:#000; text-align: center; background: #fff; border-top: 1px solid #efefef; border-left: 1px solid #efefef; border-right: 1px solid #efefef; border-bottom: none;}

  .table_li:before { display: none;}

  .boardView-table .view-body li { padding: 0.75rem 3px;}
  .boardView-table .view-body li.answerWrap .answer-arrow { top:0.75rem;}

  .accordion>.card>.card-header { padding: 0.75rem 0;}

  .d-mo-none { display: none !important;}
  
}

@media only screen and (max-width: 480px) {

  #subVisual .sub-title .depth-menu div.menu-active { border-top:0; background: #00c691;}
  #subVisual .sub-title .depth-menu div.menu-active a { color: #fff;}

  .jbtourpass-area .title { font-size: 2rem;}

  .input-date { width: 25%;}
  .board-table tbody th { width: 22%;}

  .accordion-section .panel-default .panel-body pre,
  .accordion .card-body pre { margin: 0;}

  .boardView-table .view-head>div>div,
  .boardView-table .view-body>div>div { padding: 0 1rem;}
  .boardView-table .view-body li.board-title { font-size:1.125rem;}

  #totalForm .form-inline input[type=search],
  #totalForm .form-inline select { padding-right: 0;}

  .modal-content .modal-body .bg-e h2 { padding-top: 5.5rem;}
  .modal-content .modal-body .bg-e h2:before { margin-left: -30px; width: 52px; height: 78px;}

  .opt-select .opt-item a { right:0.75rem;}

}