@charset "utf-8";

.page_cont {
    position: relative;
}

/* sns
------------------------------------------------------------- */
.sns_box{
	position: absolute;
	left: -100px;
	top: 31px;
	display: flex;
	flex-direction: column;
	height: 218px;
	width: 55px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
}
.sns_item{
	flex-basis: 25%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #E6E6E6;
}
.sns_item:nth-last-child(1){
	border-bottom: none;
}
.sns_item img{
	width: 25px;
}
@media screen and (max-width: 768px) {
	.sns_box{
		display: none;
	}
}

/* contents
------------------------------------------------------------- */
.h1_title {
    line-height: 1.2;
}
.overview-area_image {
    text-align: center;
    margin-bottom: 35px;
}
.overview-area_text {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 768px) {
    .h1_title {
        font-size: 24px;
        padding-bottom: 0;
        margin-bottom: 40px;
    }
    .overview-area_image {
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 25px;
    }
    .overview-area_text {
        max-width: 100%;
        margin-left: 20px;
        margin-right: 20px;
    }
    p {
        font-size: 15px;
    }
}

/* tab
------------------------------------------------------------- */
.tab-area {
    width: 100%;
    margin: 75px auto 0;
    background: #E8F1F2;
}
.tab-container {
    display: flex;
}
.tab-label {
    font-size: 21px;
    font-weight: bold;
    line-height: 1.3;
    text-align:center;
    color: #86939F;
    width: calc(100% / 2);
    background: #E6E6E6;
    border-bottom: 1px solid #86939F;
    padding: 35px 1em 30px;
    cursor: pointer;
    position: relative;
}
.tab-label.active {
    color: #006697;
    background: #E8F1F2;
    border-bottom: 1px solid #E8F1F2;
}
.tab-label.active:before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 20px;
    background: #006697;
    position: absolute;
    left: 0;
    top: 0;
}
.tab-label:first-child {
    border-right: 1px solid #86939F;
}
.cont-box {
    display: none;
}
.cont-box.show {
    display: block;
}
.cont-box-in {
    padding: 45px;
}
.cont-box-in + .cont-box-in {
    padding-top: 25px;
}
.cont-box_title {
    font-size: 24px;
    font-weight: bold;
    color: #006697;
    border-left: 14px solid #006697;
    padding: 0.4em 0 0.2em 0.8em;
    margin-bottom: 2em;
}
.cont-box_subtitle {
    font-size: 22px;
    font-weight: bold;
}
.tab-area .btn_more,
.contain_table-area .btn_more{
    margin: 30px 0 0;
    display: none;
}
.tab-area .btn_more a,
.contain_table-area .btn_more a {
    width: 100%;
    font-size: 16px;
    text-decoration: underline;
    padding: 1.1em;
    box-sizing: border-box;
}
.tab-area .label_red,
.contain_table-area .label_red {
    display: inline-block;
    line-height: 1.2;
    font-weight: bold;
    color: #fff;
    background: #D21900;
    border-radius: 3px;
    padding: 0.1em 0.5em 0 0.5em;
    margin-bottom: 0.2em;
}
.tab-area .label_text_red,
.contain_table-area .label_text_red {
    font-weight: bold;
    color: #D21900;
}
.tab-area .label_text_pink,
.contain_table-area .label_text_pink {
    font-weight: bold;
    color: #FF4597;
}
@media screen and (max-width: 768px) {
    .tab-area {
        margin: 45px auto 40px;
    }
    .tab-area p,
    .contain_table-area p {
        font-size: 14px;
    }
    .tab-label {
        font-size: 18px;
        padding: 20px 1em 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tab-label.active:before {
        height: 15px;
    }
    .cont-box-in {
        padding: 30px 20px;
    }
    .cont-box_title {
        font-size: 20px;
        line-height: 1.2;
        border-left: 7px solid #006697;
        margin-bottom: 1.5em;
    }
    .cont-box_subtitle {
        font-size: 18px;
    }
    .tab-area .label_red,
    .contain_table-area .label_red {
        padding: 0.3em 0.5em 0.1em 0.5em;
        margin-bottom: 0.4em;
    }
    .tab-area .btn_more,
    .contain_table-area .btn_more {
        margin: 25px 0 0;
    }
    .tab-area .btn_more a,
    .contain_table-area .btn_more a {
        font-size: 14px;
        padding: 1.6em;
    }
}

/* seminar-table
------------------------------------------------------------- */
.seminar-table {
    border: 4px solid #D3DEE6;
}
.seminar-table th {
    color: #fff;
    text-align: center;
    background: #6F7A86;
    border-left: 1px solid #D3DEE6;
    line-height: 1.2;
    padding: 5px;
    letter-spacing: 0;
}
.seminar-table-archive th {
    padding: 10px 5px;
}
.seminar-table td {
    font-size: 14px;
    background: #fff;
    border-left: 1px solid #D3DEE6;
    border-top: 1px solid #D3DEE6;
    padding: 10px 5px;
    letter-spacing: 0;
}
.seminar-table th:first-child {
    width: 6%;
}
.seminar-table th:nth-child(2) {
    width: 25%;
}
.seminar-table th:nth-child(3) {
    width: 18%;
}
.seminar-table th:nth-child(4) {
    width: 14%;
}
.seminar-table th:nth-child(5) {
    width: 23%;
}
.seminar-table th:nth-child(6) {
    width: 14%;
}
.seminar-table-archive th:nth-child(4) {
    width: 19%;
}
.seminar-table-archive th:nth-child(5) {
    width: 32%;
}
.seminar-table td.seminar-td_icon {
    text-align: center;
}
.seminar-table td p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}
.seminar-table td a {
    font-size: 14px;
    line-height: 1.5;
}
.seminar-table .icon_daftar,
.seminar-table .icon_youtube {
    width: 34px;
    height: auto;
    opacity: 0.2;
}
.seminar-table a .icon_daftar,
.seminar-table a .icon_youtube,
.seminar-table button .icon_youtube {
    opacity: 1;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3) );
}
.seminar-table_title a {
    text-decoration: underline;
    display: inline-block;
    padding-left: 16px;
    position: relative;
}
.seminar-table_title a:before {
    content: "";
    width: 13px;
    height: 13px;
    background: url(/shared/img/parts/ar_b.svg);
    background-size: contain;
    position: absolute;
    left: 0;
    top: 0px;
    margin-top: 4px;
}
.seminar-table-archive tbody tr{
    display: none;
}
.seminar-table-archive tbody tr.visible {
    display: table-row;
}
@media screen and (max-width: 768px) {
    .seminar-table {
        border: none;
        display: block;
    }
    .seminar-table th,
    .seminar-table thead {
        display: none;
    }
    .seminar-table tr {
        display: block;
        background: #fff;
        padding: 20px 20px;
        margin-bottom: 10px;
        position: relative;
        box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
    }
    .seminar-table td {
        display: block;
        border-left: none;
        border-top: none;
        padding: 0;
        margin-top: 1em;
    }
    .seminar-table td.seminar-td_icon {
        width: 64px;
        padding: 0 5px 5px 0;
        position: absolute;
        right: 10px;
        top: 20px;
        margin-top: 0;
    }
    .seminar-table td.seminar-td_title {
        padding-right: 75px;
        margin-top: 0;
    }
    .seminar-table td.seminar-td_date:before,
    .seminar-table td.seminar-td_location:before,
    .seminar-table td.seminar-td_content:before,
    .seminar-table td.seminar-td_close:before {
        white-space: pre;
        background: #D3DEE6;
        padding: 0.1em 0.5em;
        position: relative;
        top: -0.2em;
    }
    .seminar-table td.seminar-td_date:before {
        content: "Tanggal & waktu\A"; 
    }
    .seminar-table td.seminar-td_location:before {
        content: "Lokasi\A";
    }
    .seminar-table td.seminar-td_content:before {
        content: "Isi Seminar\A";
    }
    .seminar-table td.seminar-td_close:before {
        content: "Batas pendaftaran\A";
    }
    .seminar-table td.seminar-td_date:empty:before,
    .seminar-table td.seminar-td_location:empty:before,
    .seminar-table td.seminar-td_content:empty:before,
    .seminar-table td.seminar-td_close:empty:before {
        content: none;
    }
    .seminar-table .icon_daftar,
    .seminar-table  .icon_youtube {
        width: 64px;
    }
    .seminar-table_title {
        font-size: 16px !important;
        font-weight: bold;
        margin-bottom: 1.2em !important;
    }
    .seminar-table_title a {
        font-size: 16px !important;
        font-weight: bold;
        padding-left: 18px;
    }
    .seminar-table-archive tbody tr.visible {
        display: block;
    }
}

/* vocabulary-table
------------------------------------------------------------- */
.vocabulary-table {
    border: 4px solid #D3DEE6;
}
.vocabulary-table th {
    color: #fff;
    text-align: center;
    background: #6F7A86;
    border-left: 1px solid #D3DEE6;
    line-height: 1.2;
    padding: 10px;
    letter-spacing: 0;
}
.vocabulary-table td {
    font-size: 14px;
    background: #fff;
    border-left: 1px solid #D3DEE6;
    border-top: 1px solid #D3DEE6;
    padding: 10px;
    letter-spacing: 0;
}
.vocabulary-table th:first-child {
    width: 32%;
}
.vocabulary-table th:nth-child(2) {
    width: 18%;
}
.vocabulary-table th:nth-child(3) {
    width: 50%;
}
.vocabulary-table td p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}
.vocabulary-table td a,
.vocabulary-table td button {
    display: inline-block;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    color: #0093cb;
    text-decoration: underline;
    position: relative;
}
.vocabulary-table_title a,
.vocabulary-table_title button,
.vocabulary-table .label_text_pink{
    padding-left: 32px;
}
.vocabulary-table_title a:before {
    content:"";
    display: block;
    width: 23px;
    height: 23px;
    background: url("/indonesia/shared/img/icon/icon_artikel.svg");
    background-size: contain;
    position: absolute;
    left: 0;
    top: 0;
}
.vocabulary-table_title button:before {
    content:"";
    display: block;
    width: 23px;
    height: 23px;
    background: url("/indonesia/shared/img/icon/icon_youtube.svg");
    background-size: contain;
    position: absolute;
    left: 0;
    top: 0;
}
.vocabulary-table tbody tr{
    display: none;
}
.vocabulary-table tbody tr.visible {
    display: table-row;
}
@media screen and (max-width: 768px) {
    .vocabulary-table {
        border: none;
        display: block;
    }
    .vocabulary-table th,
    .vocabulary-table thead {
        display: none;
    }
    .vocabulary-table tr {
        display: block;
        background: #fff;
        padding: 20px 20px;
        margin-bottom: 10px;
        position: relative;
        box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1);
    }
    .vocabulary-table td {
        display: block;
        border-left: none;
        border-top: none;
        padding: 0;
        margin-top: 1em;
    }
    .vocabulary-table td.vocabulary-td_title {
        margin-top: 0;
    }
    .vocabulary-table td.vocabulary-td_date:before,
    .vocabulary-table td.vocabulary-td_content:before {
        white-space: pre;
        background: #D3DEE6;
        padding: 0.1em 0.5em;
        position: relative;
        top: -0.2em;
    }
    .vocabulary-table td.vocabulary-td_date:before {
        content: "Tanggal Publikasi\A";
    }
    .vocabulary-table td.vocabulary-td_content:before {
        content: "Keterangan\A";
    }
    .vocabulary-table td.vocabulary-td_date:empty:before,
    .vocabulary-table td.vocabulary-td_content:empty:before {
        content: none;
    }
    .vocabulary-table .label_text_pink{
        padding-left: 0;
    }
    .vocabulary-table_title {
        font-size: 16px !important;
        font-weight: bold;
        margin-bottom: 1.2em !important;
    }
    .vocabulary-table_title a,
    .vocabulary-table_title button {
        font-size: 16px !important;
        font-weight: bold;
    }
    .vocabulary-table tbody tr.visible {
        display: block;
    }
}

/* contain_table-area
------------------------------------------------------------- */
.contain_table-area {
    padding: 75px 0 45px;
}
.contain_table-area + .contain_table-area {
    padding-top: 25px;
}
.seminar-table-work td {
    padding: 10px;
}
.seminar-table-work th:first-child {
    width: 6%;
}
.seminar-table-work th:nth-child(2) {
    width: 38%;
}
.seminar-table-work th:nth-child(3) {
    width: 18%;
}
.seminar-table-work th:nth-child(4) {
    width: 24%;
}
.seminar-table-work th:nth-child(5) {
    width: 14%;
}
.seminar-table-work-archive th:first-child {
    width: 6%;
}
.seminar-table-work-archive th:nth-child(2) {
    width: 51%;
}
.seminar-table-work-archive th:nth-child(3) {
    width: 19%;
}
.seminar-table-work-archive th:nth-child(4) {
    width: 24%;
}

.seminar-table-work-archive tbody tr{
    display: none;
}
.seminar-table-work-archive tbody tr.visible {
    display: table-row;
}
@media screen and (max-width: 768px) {
    .contain_table-area {
        margin-top: 35px;
        padding: 25px 20px 30px;
        background: #e8f1f2;
    }
    .contain_table-area + .contain_table-area {
        margin-top: 0;
    }
    .contain_table-area:last-child {
        margin-bottom: 40px;
    }
    .seminar-table-work td {
        padding: 0;
    }
    .seminar-table-work-archive tbody tr.visible {
        display: block
    }
}