@charset "utf-8";

/************************************** import **************************************/
/* common css */
@import url("../common/common.css");

/* component css */
@import url("../common/component.css");

/* layout css */
@import url("../common/layout.css");

/* layout css */
@import url("../common/board.css");


/************************************** header **************************************/

.header-container:before { height: 335px; background-position: center -225px; }

@media (max-width: 1200px) {
    .header-container:before { background-position: top center; background-size: 100%; }
}

@media (max-width: 420px) {
    .header-container:before { background-position: center 30px; background-size: 120%; }
}

/************************************** sub title **************************************/

.banner-text-wrap .search-ui-sub { width: 640px; margin: 0 auto; padding-top: 60px; }
.banner-text-wrap .banner-text .main-tit { padding-top: 20px;}

@media (max-width: 768px) {
    .banner-text-wrap .search-ui-sub { width:100%;}
}
@media (max-width: 500px) {
    .banner-text-wrap .search-ui-main { padding-top: 40px; }
}


/************************************** sub side menu / right common **************************************/
aside.left-side {width:276px;margin-right:30px;float:left; border-top:1px solid #000; padding:23px 20px;}
aside.left-side h2.side-tit {font-size:1.6rem; color:#73789a; font-weight:700; padding-bottom:25px;}
aside.left-side ul li {position:relative; margin-bottom:15px;}
aside.left-side ul li a {font-size:1.5rem; font-weight:600; display:block; transition: color .3s ease}
aside.left-side ul li:before {position:absolute; top:-1px; left:1px; background:#ebe7f9; width:0; height:32px; content:''; transition: width .3s ease, border-radius .3s ease; z-index:-1;}
aside.left-side ul li.select:before,
aside.left-side ul li:hover:before {width:100%; border-radius:5px 20px 20px 5px}
aside.left-side ul li.select a,
aside.left-side ul li:hover a {color:var(--theme-color)}
aside.left-side ul li span.material-icons { padding:6px 8px; background:#ebe7f9; color:  var(--theme-color); border-radius:5px; margin-right:15px; }
.right-cont {width:calc( 100% - 306px); float:left;}

/* sub tit */
.right-cont .cont-sub-tit {font-size:1.5rem; color:#303030; font-weight:600; padding-bottom:15px}


@media(max-width:1200px) {
    aside.left-side {width:220px; padding:20px 0;}
    .right-cont {width: calc(100% - 250px);}   
}
@media(max-width:768px) {
    aside.left-side, .right-cont {float:none; width:100%}
    aside.left-side {border-bottom:1px solid #a3a3a3;}
    aside.left-side h2.side-tit {font-size:1.4rem; display:none;}
    aside.left-side ul li {float:left; width: calc(50% - 8px); margin-right:15px; margin-bottom:0;}
    aside.left-side ul li:nth-child(1),aside.left-side ul li:nth-child(2) {margin-bottom:10px;}
    aside.left-side ul li:nth-child(even) {margin-right:0;}
    aside.left-side ul li span.material-icons {margin-right:8px; font-size:1.8rem;}
    aside.left-side ul li.select:before,
    aside.left-side ul li:hover:before {border-radius: 5px;}
    aside.left-side ul li a {font-size:1.4rem;}
    .right-cont {padding:20px 0;}
    .right-cont .cont-sub-tit {text-align: center; font-size:1.4rem;}
}
@media(max-width:500px) {
    aside.left-side {padding:15px 0;}
    aside.left-side ul li a {font-size:1.3rem;}
    aside.left-side ul li span.material-icons {margin-right:5px; padding:5px; font-size:1.7rem;}
    aside.left-side ul li:before {height:27px}
}