@charset "utf-8";
/* ========================================
   BAGUS Framework 2.0
======================================== */

.sitemap_tree{margin:70px 0 0}

/* Group */
.sitemap_group{margin:0 0 80px}
.sitemap_group:last-child{margin-bottom:0}
.sitemap_group .red{margin-left:-8px}

/* Tree */
.tree,.tree ul{margin:0;padding:0}
.tree{position:relative}
.tree>li{margin:0 0 25px;padding:0 0 0 28px;position:relative}

/* Main Marker */
.tree>li:before{content:"";width:9px;height:9px;position:absolute;top:.55em;left:3px;background:#fff;border:2px solid #777;border-radius:50%}

/* Main Link */
.tree>li>a{color:#333;font-size:1.05rem;font-weight:500;line-height:1.7;text-decoration:none;transition:color .25s}
.tree>li>a:hover{color:#777;text-decoration:underline}

/* Explanation */
.tree>li>p{font-size:.95rem;margin:6px 0 0;line-height:1.8;color:#777}

/* Child Tree */
.tree ul{border-left:1px solid #ddd;margin:20px 0 0 -19px;padding:5px 0 0 28px}
.tree ul li{margin:0 0 14px;padding:0 0 0 20px;position:relative}
.tree ul li:last-child{margin-bottom:0}

/* Branch */
.tree ul li:before{content:"";width:14px;height:1px;position:absolute;top:.85em;left:-28px;background:#ddd}

/* Child Marker */
.tree ul li:after{content:"";width:5px;height:5px;position:absolute;top:.78em;left:0;background:#999;border-radius:50%}
.tree ul li a{font-size:.95rem;font-weight:400;text-decoration:none;line-height:1.7;color:#555;transition:color .25s}
.tree ul li a:hover{text-decoration:underline;color:#222}

/*     Smartphone 560px
----------------------------------------*/
@media screen and (max-width:560px){

.sitemap_group .first{display:block}

}

/*     Smartphone 440px
----------------------------------------*/
@media screen and (max-width:440px){

.sitemap_group .second{display:block;margin-left:-8px}
.sitemap_group .third{display:block}

}

/*     Smartphone 360px
----------------------------------------*/
@media screen and (max-width:360px){

.tree>li>a{font-size:.95rem}
.tree>li>p,.tree ul li a{font-size:.9rem}

}

/*     Smartphone 320px
----------------------------------------*/
@media screen and (max-width:320px){

.tree>li>a{font-size:.9rem}
.tree>li>p,.tree ul li a{font-size:.85rem}

}