﻿
.area_main .jumbotron {height:655px; position:relative; background:url("../img/base_jumbotron.jpg") no-repeat; background-size:cover;}
.area_main .jumbotron .contents {width:100%; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); text-align:center;}
.area_main .jumbotron .title {margin-bottom:10px;}
.area_main .jumbotron .body {margin-bottom:80px; font-size:24px; font-weight:300; text-align:center; color:#fff;}
.area_main .jumbotron .box_search {display:inline-block; position:relative; border-radius:35px; background-color:#fff; box-shadow:0px 3px 6px rgba(0,0,0,0.3); overflow:hidden; border:5px solid #372918;}
.area_main .jumbotron .box_search .m-input-select {float:left; border:none; border-radius:35px 0 0 35px;}
.area_main .jumbotron .box_search select {width:160px; padding:18px 25px; border:none; background-color:#fff;}

.area_main .jumbotron .box_search input {width:420px; padding:19px 15px; float:left;}
.area_main .jumbotron .box_search .input_search_btn {width:62px; height:62px; position:relative; top:1px; float:left;}
.area_main section {padding:80px 0;}
.area_main .section-title {margin-bottom:80px; font-size:44px; font-weight:600; text-align:center; color:#fc9a0e;}
.area_main .section-title-sub {display:block; margin-top:30px; font-size:24px; text-decoration: underline;}
.area_main .quicks {position:fixed; top:150px; right:20px; z-index:3; transition:right .3s;}
.area_main .quicks.active {right:-100px;}
.area_main .quick {display:block; width:83px; height:83px; margin-bottom:15px; position:relative; border-radius:100%; background-color:rgba(0,0,0,0.6); box-shadow:0px 3px 6px rgba(0,0,0,0.16); }
.area_main .quick .text {display:none; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.area_main .quick img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.area_main .quick:hover {background-color:#f7a836;}
.area_main .quick:hover img {display:none;}
.area_main .quick:hover .text {display:block; font-weight:500;}

.swiper.type01 {position:relative;}
.swiper.type01 .swiper-top {padding-right:630px; position:absolute; top:0; right:0; z-index:2;}
.swiper.type01 .swiper-title {margin-bottom:40px; position:relative; font-size:30px; text-align:right;}
.swiper.type01 .swiper-subtitle {display:block; font-size:24px; color:#7e7e7e;}
.swiper.type01 .swiper-title:after {content:"◀"; position:absolute; top:46%; right:-40px; transform:translateY(-50%); font-size:20px; color:#948274;}
.swiper.type01 .swiper-btns {text-align:right;}
.swiper.type01 .swiper-btn {display:inline-block; width:49px; height:49px; margin-bottom:40px; position:relative; background-color:#948274; border-radius:100%; transition:background-color .3s; cursor:pointer;}
.swiper.type01 .swiper-btn:hover {background-color:#fc9a0e;}
.swiper.type01 .swiper-btn img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

.area_main #section01 {background:url("../img/base_index01.jpg");}
.area_main #section01 .align-item {width:20%;}
.area_main #section01 .align-item .wrap_box_ratio {background:transparent; border-radius:100%;}
.area_main #section01 .align-item .wrap_box_ratio img {width:100%;}
.area_main #section01 .align-item a {display:block; position:relative; border-radius:100%; border:5px solid transparent; transition: all .3s;}
.area_main #section01 .align-item a:hover {border-color:#ffbb19; background-color:rgba(0,0,0,0.6);}
.area_main #section01 .align-item a:hover .title {color:#ffbb19;}
.area_main #section01 .align-item a:hover .count {color:#ffbb19;}
.area_main #section01 .align-item a:hover .count .point {font-size:50px; color:#ffbb19;}
.area_main #section01 .align-item a:after {content:""; width:100%; height:100%; position:absolute; top:0; left:0; background-color:rgba(0,0,0,0.3); border-radius:100%; z-index:1; opacity:1; transition:all .3s;}
.area_main #section01 .align-item a:hover:after {opacity:1; background-color:rgba(0,0,0,0.5);}
.area_main #section01 .align-item .texts {width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-align:center; transition:transform .3s; z-index:2;}
.area_main #section01 .align-item .title {font-size:24px; color:#fff; transition: color .3s, font-size .3s;}
.area_main #section01 .align-item .count {font-size:20px; font-weight:500; color:#fff; transition: color .3s;}
.area_main #section01 .align-item .count .point {font-size:40px; font-weight:500; color:#fff; transition: color .3s, font-size .3s;}

@media screen and (max-width:1200px){
    .area_main #section01 .align-item {width:25%;}
    .area_main .section-title-sub {margin-top:20px; font-size:20px;}
}

@media screen and (max-width:750px){
    .area_main .quicks {top:auto; bottom:30px;}
    .area_main .quick {width:60px; height:60px;}
    .area_main .quick img {width:20px;}
    .area_main .quick .text {font-size:12px;}
    .area_main .section-title-sub {margin-top:5px; font-size:16px;}
    .area_main #section01 .align-items {margin:0;}
    .area_main #section01 .align-item {width:33.33%; padding:0px;}
    .area_main #section01 .align-item .title {font-size:16px;}
    .area_main #section01 .align-item .count {font-size:16px;}
    .area_main #section01 .align-item .count .point {font-size:18px;}
    .area_main #section01 .align-item a:hover .count .point {font-size:18px;}
}

@media screen and (max-width:500px){
}


.area_main #section02 .align-items {margin:-5px; min-height:380px; position:relative; bottom:-47px;}
.area_main #section02 .align-items .empty {display:block; width:100%; height:100%; position:absolute; left:0; top:0;}
.area_main #section02 .align-items .empty-wrap {width:100%; height:100%; position:absolute; top:0; left:0; background-color:#f4f4f4;}
.area_main #section02 .align-items .empty-content {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.area_main #section02 .align-items .empty img {width:auto;}
.area_main #section02 .align-items .empty .m-ratioBox-wrap {padding-top:54%; border:none;}
.area_main #section02 .align-items .empty-title {font-size:18px;}
.area_main #section02 .align-item {width:33.33%; padding:5px;}
.area_main #section02 .align-item .wrap_box_ratio {padding-top:128%; border:1px solid #e1e1e1;}
.area_main #section02 .align-item .wrap_box_ratio img {width:100%; height:auto; top:50%; transform:translate(-50%, -50%);}
.area_main #section02 .align-item .wrap_box_ratio:after {top:40%;}
.area_main #section02 .align-item .box_text {width:100%; padding:15px 20px; position:absolute; bottom:0px; left:0; z-index:1; background-color:rgba(50,43,28,0.7);}
.area_main #section02 .align-item .box_text .title {margin-bottom:3px; font-size:20px; color:#fff;}
.area_main #section02 .align-item .box_text .body {color:#b7b7b7;}
.area_main #section02 .swiper-container {padding-top:125px; padding-bottom:66px;}
.area_main #section02 .wrap_box_ratio {display:block;}
.area_main #section02 .swiper-slide {padding-right:630px; position:relative;}
.area_main #section02 .swiper-slide .map {width:510px; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.area_main #section02 .swiper {position:relative;}

@media screen and (max-width:1500px) {
    .swiper.type01 .swiper-top {width:100%; padding-right:0;}
    .swiper.type01 .swiper-title {margin-bottom:20px; text-align:left;}
    .swiper.type01 .swiper-btns {text-align:left;}

    .area_main .jumbotron .title {width:500px;}
    .area_main .jumbotron {height:600px;}
    .area_main #section02 .swiper-slide .map {width:250px; right:0; top:-127px; transform:none; z-index:-1;}
    .area_main #section02 .swiper-slide {padding-right:0;}
    .area_main #section02 .align-items {min-height:auto;}
    .area_main #section02 .align-items .empty {min-height:300px; position:static;}
    .area_main #section02 .align-item .wrap_box_ratio {padding-top:127%;}
    .area_main #section02 .align-item .box_text {position:relative;}
}

@media screen and (max-width:750px) {
    .area_main .jumbotron {height:300px;}
    .area_main .jumbotron .title {width:80%;}
    .area_main .jumbotron .contents {padding:0 20px;}
    .area_main .jumbotron .body {margin-bottom:30px; font-size:18px; padding:0 20px;}
    .area_main .jumbotron .box_search {display:block; padding-left:160px; padding-right:54px; position:relative;}
    .area_main .jumbotron .box_search .m-input-select {position:absolute; top:0; left:0;}
    .area_main .jumbotron .box_search select {padding:15px; padding-left:20px;}
    .area_main .jumbotron .box_search input {width:100%; padding:15px; padding-right:0;}
    .area_main .jumbotron .box_search:after {width:23px; height:23px; background-size:100%;}
    .area_main .jumbotron .box_search .input_search_btn {width:54px; height:54px; position:absolute; top:0; right:0;}
    .area_main .jumbotron .box_search .input_search_btn img {position:relative; top:1px;}

    .area_main section {padding:50px 0;}
    .area_main .section-title {margin-bottom:40px; font-size:24px;}

    .swiper.type01 .swiper-title {margin-bottom:10px; font-size:20px;}
    .swiper.type01 .swiper-btn {width:40px; height:40px;}
    .swiper.type01 .swiper-top {top:55px;}

    .area_main #section02 .align-item {width:50%;}
}
@media screen and (max-width:500px) {
    .area_main .jumbotron .box_search {padding-left:112px; padding-right:40px;}
    .area_main .jumbotron .box_search select {width:112px; padding:15px 5px; padding-left:20px; font-size:14px;}
    .area_main .jumbotron .box_search input {padding-left:5px; font-size:14px; border-left:1px solid #e1e1e1;}
    .area_main #section02 .align-items {white-space: nowrap; overflow-x:auto;}
    .area_main #section02 .align-item {display:inline-block; width:283px; float:none;}
    .area_main #section02 .align-item .box_text .title {white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
    .area_main #section02 .align-item .box_text .body {white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
    .area_main #section02 .align-item .wrap_box_ratio {padding-top:98%;}
    .area_main #section02 .wrap_1200 {padding:0; padding-left:20px;}
    .area_main #section02 .swiper-slide .map {width:235px; right:10px;}
    .area_main #section02 .align-item:last-child {margin-right:20px;}
    .area_main #section02 .align-items .empty {min-height:400px;}
    .area_main #section02 .align-items .empty-content {margin-left:20px;}
    .area_main #section02 .align-items .empty-wrap {left:-20px;}
    .area_main .jumbotron .box_search .input_search_btn {width:40px; height:54px;}
    .area_main .jumbotron .box_search .input_search_btn img {width:18px;}

}

.area_main #section03 {background:url("../img/base_index02.jpg") no-repeat;}
.area_main #section03 .wrap_tabs {margin-top:20px;}
.area_main #section03 .swiper-top {padding-right:0; position:static;}
.area_main #section03 .swiper-top .swiper-title {margin-bottom:0;}
.area_main #section03 .swiper-top .swiper-subtitle {margin-bottom:50px; text-align:right;}
.area_main #section03 .swiper-top .swiper-btn {margin-bottom:0;}
.area_main #section03 .align-items {margin:-5px;}
.area_main #section03 .align-item {padding:5px;}
.area_main #section03 .align-item .wrap_box_ratio {padding-left:40px; padding-top:50%;}
.area_main #section03 .swiper-title {margin-bottom:50px;}
.area_main #section03 .swiper.type01 {width:55%; padding-right:70px; float:left;}
.area_main #section03 .video {width:45%; padding-top:24%; float:right;}
.area_main #section03 .video iframe {width:100%; height:100%;}
.area_main #section03 .swiper.type01 .swiper-btns {margin-bottom:52px;}
.area_main #section03 .swiper-slide {cursor:pointer;}
.area_main #section03 .swiper-slide .title {width:100%; margin-top:15px; font-size:20px; white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
.area_main #section03 .swiper-slide .wrap_box_ratio {padding-top:70%;}
.area_main #section03 .swiper-container {margin-left:-90px;}
.area_main #section03 .date {opacity:0;}

@media screen and (max-width:1500px) {
    .area_main #section03 .wrap_tabs {padding:0 20px;}
    .area_main #section03 .swiper.type01 {width:100%; padding-right:0; float:none;}
    .area_main #section03 .swiper-top .swiper-subtitle {text-align:left;}
    .area_main #section03 .swiper-container {margin-left:0;}
    .area_main #section03 .video {width:100%; padding-top:56%; float:none;}
    .area_main #section03 .swiper-top .swiper-subtitle {margin-bottom:10px;}
    .area_main #section03 .swiper.type01 .swiper-btns {position:absolute; top:0; right:0;}
}

@media screen and (max-width:1024px) {
    .swiper.type01 .swiper-title:after {display:none;}
    .area_main #section03 .swiper-slide .title {font-size:16px;}
    .area_main #section03 .swiper-top .swiper-subtitle {font-size:16px;}
}

@media screen and (max-width:750px) {
    .swiper.type01 .swiper-title {width:50%; font-size:18px}
    .area_main #section03 .wrap_tabs {margin-top:10px;}
    .area_main #section03 .swiper-slide .title {margin-top:5px; font-size:14px;}
}

.area_main .companies {text-align:center; border-top:1px solid #d8d8d8;}
.area_main .companies .company {display:inline-block; width:200px; padding:45px 0; position:relative;}
.area_main .companies .company img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.area_main .companies .company:nth-child(1) img {padding-top:3px;}
.area_main .companies .company:nth-child(2) img {padding-top:3px;}
.area_main .companies .company:nth-child(5) img {padding-bottom:5px;}
.area_main .companies .company:nth-child(6) img {padding-top:15px;}

@media screen and (max-width:500px){
    .area_main .companies {white-space: nowrap; overflow-x:auto;}
    .area_main .companies .company {width:40%; padding:35px 0;}
}

.area_list .box_align .m-guide-total {width:100%; float:left;}
.area_list .box_align .m-guide-total-title {margin-right:7px; font-size:20px; font-weight:600; color:#5c422d;}
.area_list .box_align .m-guide-total-btn {padding:4px 14px; float:right; font-size:14px; font-weight:300; color:#fff; background-color:#5c422d; border-radius:3px;}
.area_list .box_align .m-guide-total-btn img {width:11px; margin-left:5px;}
.area_list .box_align .m-selects {margin-bottom:10px;float:right;}
.area_list .box_align .m-select {display:inline-block;}

@media screen and (max-width:768px){
    .area_list .box_align .m-guide-total {padding-top:0;}
    .area_list .box_align .m-guide-total-title {font-size:16px;}
    .area_list .box_align .m-guide-total-btn {padding:4px 8px; font-size:12px;}
}

fieldset .m-input-radios {margin-bottom:10px;}
fieldset .m-input-radio.type02 label {padding-left:20px;}
fieldset .m-input-radio span {font-size:14px;}
fieldset .m-input-radio.type02 {margin-left:0; margin-right:20px;}
fieldset .m-input-radio.type02 label:before {top:58%;}
.m-search.type03 .m-search-input-wrap {display:inline-block; float:none;}
.m-search-types {display:block; text-align:right; margin-top:-29px;}
.m-search-type {width:25px; height:25px; margin-left:10px; position:relative; opacity:.5; transition: opacity .3s;}
.m-search-type:hover {opacity:1;}
.m-search-type.active {opacity:1;}
.m-search-type img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

@media screen and (max-width:768px){
    .m-search.type03 {padding-bottom:10px; margin-bottom:10px;}
}

.m-table th {font-weight:500; background-color:#f8f7f6; border-top:2px solid #a89a8e;}
.m-table tr {border-bottom:1px solid #a89a8e;}
.m-table .category {display:inline-block; margin-bottom:2px; padding:2px 7px; font-size:14px; background-color:#938579; opacity:0.5; color:#fff; white-space: nowrap;}
.m-table .category.active {opacity:1;}
.btn-icon {display:inline-block; content:""; width:25px; height:25px; margin:0 5px; position:relative; opacity:0.5; transition:opacity .3s;}
.btn-icon:hover {opacity:1;}
.btn-icon.active {opacity:1;}
.btn-icon:after {content:""; width:20px; height:20px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.btn-icon.btn-folder {background:url("../img/icon_folder.png") no-repeat; background-position:center;}
.btn-icon.btn-menus {background:url("../img/icon_menus.png") no-repeat; background-position:center;}
.btn-icon.btn-description {background:url("../img/icon_description.png") no-repeat; background-position:center;}
.btn-icon.btn-notice {background:url("../img/icon_notice.png") no-repeat; background-position:center;}
.btn-icon.btn-preface {width:14px; background:url("../img/icon_preface.png") no-repeat; background-position:center; background-size:100%;}

.box-thumbnails {margin:0 -3px;}
.box-thumbnails .align-item {width:20%; padding:3px; margin-bottom:15px;}
.box-thumbnails .align-item a {display:block; white-space: nowrap; overflow:hidden; text-overflow:ellipsis;}
.box-thumbnails .align-item .wrap_box_ratio {padding-top:67%;}
.box-thumbnail {border:1px solid #d9d9d9;}
.box-thumbnail-texts {padding:20px;}
.box-thumbnail-texts-title {min-height:68px; padding-bottom:15px; margin-bottom:15px; text-decoration: underline; border-bottom:1px solid #d9d9d9;}
.box-thumbnail-texts-sub:after {display:block; content:""; clear:both;}
.box-thumbnail-texts-sub p {float:left; font-size:14px; color:#909090;}
.box-thumbnail-texts-sub .icons {margin-top:10px; float:right;}

@media screen and (max-width:1500px){
    .box-thumbnails .align-item {width:25%;}
}

@media screen and (max-width:1200px){
    .box-thumbnails .align-item {width:33.33%;}
    .m-search-types {margin-top:10px;}
}

@media screen and (max-width:750px){
    .box-thumbnails .align-item {width:50%;}
    .box-thumbnail-texts {padding:10px;}
    .box-thumbnail-texts-sub p {float:none;}
    .box-thumbnail-texts-sub .icons {display:block; margin-top:5px; float:none; text-align:right;}
    .box-thumbnail-texts-sub .btn-icon {margin:0;}
}

@media screen and (max-width:500px){
    .box-thumbnails {position:relative; white-space:nowrap; overflow-x:auto; overflow-y:hidden; border-right:1px solid rgba(0,0,0,0.05); border-left:1px solid rgba(0,0,0,0.05);}
    .box-thumbnails .align-item {display:inline-block; width:85%; margin-bottom:0; float:none;}
}

.pop.type-blank .pop-header {padding:20px; position:relative; background-color:#edebe7;}
.pop.type-blank .pop-header-btn {position:absolute; right:20px; top:51%; transform:translateY(-50%);}
.pop.type-blank .pop-header img {position:relative;}
.pop.type-blank .pop-header .text {margin-left:10px; font-size:23px; font-weight:600; }
.pop.type-blank .pop-body {padding:30px 20px;}
.pop.type-blank .title {padding:0; margin-bottom:20px; font-weight:500; background-color:transparent; border-bottom:none;}
.pop.type-blank #sidebar .title {padding:0; margin-bottom:20px; background-color:transparent; border-bottom:none;}
.pop.type-blank #sidebar {display:block; width:100%; padding:0; position:static; box-shadow:none;}
.pop.type-blank #sidebar .link {border-bottom:none;}
.pop.type-blank #sidebar.active {display:block; }
.pop.type-blank #sidebar .sidebar-wrap > .box_link > .link {background-color:transparent;}
.pop.type-blank #sidebar .sidebar-wrap {border-right:none;}
.pop.type-blank #sidebar .text {font-size:14px;}
.pop.type-blank #sidebar .sidebar-wrap > .box_link > .link {padding:3px 25px; padding-left:35px;}
.pop.type-blank #sidebar .link:before {top:10px;}

.pop.type-blank .wrap_box_ratio {max-width:345px; margin:0 auto; margin-bottom:35px; padding-top:0; border-right:1px solid #cecece;}
.pop.type-blank .wrap_box_ratio:after {display:none;}
.pop.type-blank .wrap_box_ratio .box_ratio {position:static;}
.pop.type-blank .wrap_box_ratio img {position:static; transform:none;}

.comment.type01 {margin-top:20px;}
.comment.type01 .highlight {font-weight:600;}
strong {color:#ce0000;}
.highlight {background-color:#ffeeb4; color:#ce0000;}

.search-result {display:block; padding:17px 5px; border-bottom:1px solid #e1e1e1;}
.search-result:first-child {border-top:2px solid #a89a8e;}
.search-result-title {margin-bottom:10px; font-size:18px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.search-result-title:before {top:12px;}
.search-result-title .highlight {font-size:18px;}
.search-result-category {display:inline-block; margin-right:20px; margin-left:17px;}
.search-result-categories {margin-bottom:10px;}
.search-result-body { margin-left:17px; font-size:14px; color:#515151; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.search-result-body .highlight {font-size:14px;}

@media screen and (max-width:500px){
    .search-result-title {font-size:16px;}
    .search-result-title .highlight {font-size:16px;}
    .search-result-category {margin-right:5px;}
}

.details-top { padding-bottom:25px; border-bottom:1px solid #ebebeb;}
.details-top-title {display:inline-block; margin:10px 0; font-size:26px; font-weight:600;}
.details-top-title:before {content:""; display:inline-block; width:20px; height:22px; margin-right:10px; background:url("../img/icon_book.png") no-repeat; background-size:cover;}
.details-top-tags {display:inline-block; margin-left:20px; position:relative; top:6px; background-color:#edebe7;}
.details-top-tags:after {content:""; display:block; clear:both;}
.details-top-tag {position:relative;}
.details-top-tag:before {content:""; width:1px; height:18px; position:absolute; left:0; top:6px; background-color:#c1c1c1;}
.details-top-tag:first-child:before {display:none;}
.details-top-tag {padding:4px 15px; float:left;}
.details-top-btns {margin:10px 0; float:right;}
.details-top-btn {padding:6px 20px; font-size:16px; color:#fff; background-color:#6d635c; border-radius:2px;}
.details-top-btn:before {display:inline-block; content:""; width:18px; height:18px; margin-right:10px; position:relative; top:2px;}
.details-top-btn.btn-folder:before {background:url("../img/icon_folder_white.png") no-repeat; background-position:center; background-size:cover;}
.details-top-btn.btn-menus:before {background:url("../img/icon_menus_white.png") no-repeat; background-position:center; background-size:cover;}
.details-top-btn.btn-description:before {background:url("../img/icon_description_white.png") no-repeat; background-position:center; background-size:cover;}
.details-top-btn.btn-notice:before {background:url("../img/icon_notice_white.png") no-repeat; background-position:center; background-size:cover;}
.details-top-btn.btn-preface:before {background:url("../img/icon_preface_white.png") no-repeat; background-position:center; background-size:cover;}
.details-table {margin-bottom:35px; position:relative;}
.details-table-btn {height:17px; padding:6px 14px; position:absolute; bottom:-16px; right:0; background-color:#f7f5f1; border:1px solid #ebebeb;}
.details-table-btn img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.details-table-btn.active img {transform:translate(-50%, -50%) rotate(180deg);}
.details-infos-title {margin-bottom:30px; padding:10px 15px; padding-left:35px; font-size:18px; color:#444; background-color:#ffeeb4;}
.details-infos-title:before {left:15px; top:16px;}
.details-infos-body {margin-bottom:50px; white-space: pre-line;}
.details-infos-body .point {display:inline-block; position:relative; text-decoration: underline; cursor:pointer;}
.details-infos-pop {display:none; position:absolute; top:28px; right:0;  box-shadow:4px 4px 0px rgba(0,0,0,0.16); border: 1px solid #948274; z-index:1;}
.details-infos-pop-title {padding:10px 13px; position:relative; color:#fff; background-color:#948274;}
.details-infos-pop-title img {width:17px; position:absolute; right:13px; top:14px;}
.details-infos-pop-body {padding:10px 13px; background-color:#fff;}

.mark01 {background-color:#eb6400;}
.mark02 {background-color:#338700;}
.mark03 {background-color:#4558ea;}
.mark04 {background-color:#8f36ea;}
.mark05 {background-color:#ed0d22;}
.mark06 {background-color:#f4c300;}
.mark07 {background-color:#3b488d;}
.mark08 {background-color:#6dc03b;}

.mark-texts {max-height:410px; padding:20px; overflow-y:auto; background-color:#f5f5f5;}
.mark-text {padding:7px 0; padding-left:70px; padding-right:25px; position:relative; border-bottom:2px dotted #ccc;}
.mark-text:last-child {border-bottom:none;}
.mark-text-tag {padding:1px 3px; position:absolute; top:7px; left:0; font-size:14px; color:#fff;}
.mark-text-title .point {font-weight:500;}
.mark-text-button {position:absolute; top:7px; right:0;}

@media screen and (max-width:500px){
    .details-infos-title {display:block; font-size:16px;}
    .details-infos-body {font-size:14px;}
    .details-infos-body .point {font-size:14px;}
    .details-infos-body img {width:100%;}
    .details-top-title {font-size:22px;}
    .details-top-tags {margin-left:0;}
    .details-top-btns {margin-top:10px; float:left;}
    .details-top-btn {padding:4px 5px; font-size:14px;}
    .details-top-btn:before {width:12px; height:12px; margin-right:6px;}
    .details-top-title:before {position:relative; top:2px;}
    .details-infos-pop {width:300px !important; position:fixed; top:50% !important; left:50% !important; transform:translate(-50%, -50%);}
    .details-infos-pop-title img {width:16px; top:12px;}

    .mark-text {padding-left:60px;}
    .mark-text-tag {font-size:12px;}
}

.details-category-title {padding:9px 20px; padding-left:37px; font-weight:500; background-color:#f8f7f6;}
.details-category-title:before {top:18px; left:22px;}
.details-category-body {padding:8px 0; padding-right:5px; padding-left:60px; border-bottom:1px solid #e1e1e1;}
.details-category-body:before {top:17px; left:38px;}

.medium {font-weight:500;}

.section.type01 {padding:100px 0; position:relative;}
.section.type01.bg-skin:after {width:300%; height:100%; position:absolute; top:0; left:50%; transform:translateX(-50%); content:""; background-color:#f8f8f6; z-index:-1;}
.section.type01 .section-left {position:absolute; left:0; top:100px;}
.section.type01 .section-left .section-title {font-size:22px; font-weight:600;}
.section.type01 .section-right {padding-left:205px;}

.area_introCenter #section01 .body {font-size:20px; font-weight:300;}
.area_introCenter #section01 .body .medium {font-size:20px;}
.area_introCenter #section01 .flags {display:flex; margin-top:70px; justify-content: space-between; flex-wrap:wrap;}
.area_introCenter #section01 .flag {}
.area_introCenter #section01 .flag .text {margin-top:20px; text-align:center; font-size:18px; color:#6d635c;}
.area_introCenter #section02 .year {margin-bottom:40px; font-size:36px; font-weight:500; color:#6d635c;}
.area_introCenter #section02 .day {margin-bottom:20px; padding-left:70px; position:relative;}
.area_introCenter #section02 .day:last-child {margin-bottom:0;}
.area_introCenter #section02 .day .date {position:absolute; left:0; top:0; font-size:20px; font-weight:600; color:#6d635c;}
.area_introCenter #section02 .day .body {font-size:20px; font-weight:300;}
.area_introCenter #section03 .box {margin-bottom:70px;}
.area_introCenter #section03 .box .img {display:block; width:100%; margin-bottom:20px;}
.area_introCenter #section03 .box:last-child {margin-bottom:0px;}
.area_introCenter #section03 .box .title {margin-bottom:20px; font-size:20px; font-weight:600;}
.area_introCenter #section03 .box .body {margin-bottom:7px; font-size:16px;}

@media screen and (max-width:1200px) {
    .section.type01 {padding:60px 0;}
    .section.type01 .section-right {padding-left:160px;}
}

@media screen and (max-width:768px) {
    .section.type01 {padding:30px 0;}
    .section.type01 .section-left {margin-bottom:10px; position:static; top:auto;}
    .section.type01 .section-left .section-title {font-size:20px; text-align:center;}
    .section.type01 .section-right {padding-left:0;}

    .area_introCenter #section01 .body {text-align: justify;}
    .area_introCenter #section01 .body {font-size:16px;}
    .area_introCenter #section01 .body .medium {font-size:16px;}
    .area_introCenter #section01 .flag {width:50%; margin:10px 0; text-align:center;}
    .area_introCenter #section01 .flag .img {display:inline-block;}
    .area_introCenter #section02 .year {margin-bottom:10px; font-size:18px; text-align:left;}
    .area_introCenter #section02 .day {margin-bottom:10px;}
    .area_introCenter #section02 .day .date {font-size:16px;}
    .area_introCenter #section02 .day .body {font-size:16px;}
    .area_introCenter #section03 .box .title {margin-bottom:10px; font-size:16px;}
    .area_introCenter #section03 .box {margin-bottom:30px;}
}