@charset "utf-8";
/* CSS Document */

#main_container {position:relative;width:100%;margin:0 auto;padding-top:11rem;box-sizing:border-box}

.section01 {position:relative;width:100%;height:74.5rem}
.visual_list {overflow:hidden;height:100%}
.visual_list li {position:absolute;align-items:center;width:100%;height:100%;opacity:0;z-index:0;}
.visual_list li.on{display:flex;z-index:1;}
.visual_list li .visual_img {position:absolute;top:0;left:0;width:100%;height:100%}
.visual_list li .visual_img img {width:100%;height:100%;object-fit:cover}
.visual_list li .visual_txt_wrap {display:flex;justify-content:flex-end;width:100%;max-width:1400px;margin:0 auto;text-align:right;z-index:5}
.visual_list li .visual_txt_wrap * {opacity: 0;}
.visual_list li .visual_txt_wrap .visual_txt {width:80rem}
.visual_list li .visual_txt_wrap .visual_txt p {margin-top:2rem;color:#fff;font-size:5rem;font-weight:600;word-break:keep-all}
.visual_list li .visual_txt_wrap .visual_txt span {display:block;margin-top:2.5rem;color:#fff;font-size:2.4rem;font-weight:500;line-height:1.5;word-break:keep-all}
.visual_list li .visual_txt_wrap .visual_txt a {display:inline-block;height:4rem;margin-top:2.5rem;padding:0 3.8rem 0 2rem;background:#fff url(../../img/portal/main/visual_detail.png)no-repeat right 2rem center;background-size:.8rem;color:#333;font-size:1.6rem;border-radius:24px;line-height:3.8rem}
.visual_prev {position:absolute;top:50%;left:1rem;transform:translateY(-50%);width:4.9rem;height:7.9rem;background:url(../../img/portal/main/visual_prev.png)no-repeat;background-size:4.9rem;text-indent:-9999px}
.visual_next {position:absolute;top:50%;right:1rem;transform:translateY(-50%);width:4.9rem;height:7.9rem;background:url(../../img/portal/main/visual_next.png)no-repeat;background-size:4.9rem;text-indent:-9999px}
.visual_control {position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;z-index:2}
.visual_control .visual_dot {width:1.4rem;height:1.4rem;background:#fff;border-radius:50%;text-indent:-9999px}
.visual_control .visual_dot.on {width:3rem;height:1.4rem;background:#17a3dd;border-radius:36px}
.visual_control .visual_pause {width:1.4rem;height:1.4rem;background:#575757 url(../../img/portal/main/visual_pause.png)no-repeat center center;border-radius:50%;background-size:.6rem;text-indent:-9999px}
.visual_control .visual_play {width:1.4rem;height:1.4rem;background:#575757 url(../../img/portal/main/visual_play.png)no-repeat center center;border-radius:50%;background-size:.6rem;text-indent:-9999px}
.visual_control button {margin-left:1rem}
.visual_control button:first-child {margin-left:0}

.section02 {position:relative;width:100%;padding:8rem 0}
.sc02_wrap {width:100%;max-width:1400px;margin:0 auto}
.video_wrap {display:flex;align-items:center}
.video_wrap .video_info {order:2;width:calc(100% - 83rem);padding:0 6rem;box-sizing:border-box;opacity:0}
.video_wrap .video_info h3 {color:#333;font-size:4.8rem;font-weight:600;word-break:keep-all}
.video_wrap .video_info p {margin-top:2rem;color:#333;font-size:2rem;font-weight:500;line-height:1.3;word-break:keep-all}
.video_wrap .video_info a {display:inline-block;height:4.5rem;margin-top:3.7rem;padding:0 3.8rem 0 2rem;background:#1377dc url(../../img/portal/main/btn_detail.png)no-repeat right 2rem center;background-size:.8rem;border-radius:24px;color:#fff;font-size:1.6rem;line-height:4.3rem;box-sizing:border-box}
.video_wrap .video_box {overflow:hidden;width:83rem;height:46.7rem;border-radius:12px;opacity:0}

.section03 {position:relative;width:100%;padding:8rem 0}
.section03:before {content:"";position:absolute;bottom:0;left:0;width:100vw;height:35rem;background:#fcfcf0;z-index:-1}
.sc03_wrap {width:100%;max-width:1480px;margin:0 auto;opacity:0}
.sc03_wrap h3 {color:#333;font-size:4.8rem;font-weight:600;text-align:center}
.sc03_wrap p {margin-top:2rem;color:#333;font-size:2rem;font-weight:500;line-height:1.3;text-align:center;word-break:keep-all}
.sc03_wrap .note_list_wrap {position:relative;margin-top:2.7rem}
.sc03_wrap .note_list_wrap ul {overflow:hidden;display:flex;flex-wrap:wrap;justify-content:space-between;height:37.1rem;padding:0 4rem;box-sizing:border-box}
.sc03_wrap .note_list_wrap ul li {width:calc((100% - 8rem)/3);margin:1rem 0 0 4rem;display:none}
.sc03_wrap .note_list_wrap ul li.active{display:block}
.sc03_wrap .note_list_wrap ul li:first-child {margin:1rem 0 0 0}
.sc03_wrap .note_list_wrap ul li.bg1 a {background:url(../../img/portal/sub/note_bg1.jpg)no-repeat;background-size:cover}
.sc03_wrap .note_list_wrap ul li.bg2 a {background:url(../../img/portal/sub/note_bg2.jpg)no-repeat;background-size:cover}
.sc03_wrap .note_list_wrap ul li.bg3 a {background:url(../../img/portal/sub/note_bg3.jpg)no-repeat;background-size:cover}
.sc03_wrap .note_list_wrap ul li.bg4 a {background:url(../../img/portal/sub/note_bg4.jpg)no-repeat;background-size:cover}
.sc03_wrap .note_list_wrap ul li.bg5 a {background:url(../../img/portal/sub/note_bg5.jpg)no-repeat;background-size:cover}
.sc03_wrap .note_list_wrap ul li.bg6 a {background:url(../../img/portal/sub/note_bg6.jpg)no-repeat;background-size:cover}
.sc03_wrap .note_list_wrap ul li a {position:relative;overflow:hidden;display:block;padding:3rem;border-radius:12px;box-sizing:border-box}
.sc03_wrap .note_list_wrap ul li a h1 {color:#fff;font-size:2.4rem;font-weight:600}
.sc03_wrap .note_list_wrap ul li a .note_txt {overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;height:16.8rem;margin-top:3rem;color:#fff;font-size:1.8rem;line-height:1.5;word-break:break-word}
.sc03_wrap .note_list_wrap ul li a .note_user {position:relative;display:block;margin-top:5rem;color:#fff;font-size:2rem;padding-left:2.5rem}
.sc03_wrap .note_list_wrap ul li a .note_user:before {content:"";position:absolute;top:50%;left:0;width:2rem;height:2rem;margin-top:-1rem;background:url(../../img/portal/sub/icon_date.png)no-repeat;background-size:2rem}
.sc03_wrap .note_list_wrap ul li a .note_user strong {margin-left:2rem}


.sc03_wrap .note_list_wrap .note_prev {display:block;position:absolute;top:50%;left:0;transform:translateY(-50%);width:2rem;height:3.8rem;background:url(../../img/portal/main/arrow_prev.png)no-repeat;background-size:2rem;text-indent:-9999px}
.sc03_wrap .note_list_wrap .note_next {display:block;position:absolute;top:50%;right:0;transform:translateY(-50%);width:2rem;height:3.8rem;background:url(../../img/portal/main/arrow_next.png)no-repeat;background-size:2rem;text-indent:-9999px}
.sc03_wrap .btn_more {display:block;margin-top:4rem;text-align:center}
.sc03_wrap .btn_more a {display:inline-block;height:4rem;padding:0 3rem;background:#d3e2a3;border-radius:24px;color:#4c6400;font-size:1.6rem;line-height:3.8rem;box-sizing:border-box}
.sc03_wrap .btn_more a:hover {background:#8fab34;color:#fff}

.section04 {position:relative;width:100%;padding:8rem 0}
.section04:before {content:"";position:absolute;bottom:0;left:0;width:100vw;height:35rem;background:#e4f5ff;z-index:-1}
.sc04_wrap {width:100%;max-width:1400px;margin:0 auto;opacity:0}
.sc04_wrap h3 {color:#333;font-size:4.8rem;font-weight:600;text-align:center}
.sc04_wrap .board_tab {width:100%;margin-top:3.6rem;text-align:center}
.sc04_wrap .board_tab ul {font-size:0}
.sc04_wrap .board_tab ul li {display:inline-block;margin-left:2rem}
.sc04_wrap .board_tab ul li:first-child {margin-left:0}
.sc04_wrap .board_tab ul li button {display:inline-block;height:5rem;padding:0 4rem;background:#eee;border-radius:24px;color:#666;font-size:1.8rem;line-height:4.8rem;box-sizing:border-box}
.sc04_wrap .board_tab ul li.active button {background:#1286d9;color:#fff}
.sc04_wrap .tab_content {position:relative;margin-top:4rem}
.sc04_wrap .tab_content .board_tab_item {display:none}
.sc04_wrap .tab_content .board_tab_item.active {display:block}
.sc04_wrap .tab_content .board_tab_item .board_wrap {display:flex;align-items:center;width:100%;margin-top:1.5rem;padding:2rem 0;border:1px solid #dedede;border-radius:8px;background:#fff}
.sc04_wrap .tab_content .board_tab_item .board_wrap .board_date {width:16rem;text-align:center}
.sc04_wrap .tab_content .board_tab_item .board_wrap .board_date h4 {color:#1470bf;font-size:2.8rem;font-weight:600}
.sc04_wrap .tab_content .board_tab_item .board_wrap .board_date span {display:block;margin-top:.6rem;color:#555;font-size:1.6rem}
.sc04_wrap .tab_content .board_tab_item .board_wrap .board_cont {width:calc(100% - 22rem);padding-right:10rem;box-sizing:border-box}
.sc04_wrap .tab_content .board_tab_item .board_wrap .board_cont a {overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;color:#333;font-size:1.8rem;font-weight:500}
.sc04_wrap .tab_content .board_tab_item .board_wrap .board_cont a .new {display:inline-block;width:2rem;height:2rem;margin-right:.9rem;background:#ee3b65;border-radius:50%;color:#fff;font-size:1.2rem;font-weight:normal;line-height:1.8rem;text-align:center;vertical-align:top}
.sc04_wrap .tab_content .board_tab_item .board_wrap .board_cont a:hover {color:#1286d9;text-decoration:underline}
.sc04_wrap .tab_content .board_tab_item .board_wrap .board_cont p {overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;margin-top:1rem;color:#555;font-size:1.6rem}
.sc04_wrap .tab_content .board_tab_item .board_wrap .board_detail {width:6rem}
.sc04_wrap .tab_content .board_tab_item .board_wrap .board_detail a {display:block;width:2rem;height:1.8rem;background:url(../../img/portal/main/board_view.png)no-repeat;background-size:2rem;text-indent:-9999px}
.sc04_wrap .tab_content .board_tab_item .btn_more {display:block;margin-top:4rem;text-align:center}
.sc04_wrap .tab_content .board_tab_item .btn_more a {display:inline-block;height:4rem;padding:0 3rem;background:#000;border-radius:24px;color:#fff;font-size:1.6rem;line-height:3.8rem;box-sizing:border-box}
.sc04_wrap .tab_content .board_tab_item .btn_more a:hover {background:#0d63a0;color:#fff}

.section05 {position:relative;width:100%;padding:8rem 0}
.section05:before {content:"";position:absolute;bottom:0;left:0;width:100vw;height:35rem;background:#f9f7f3;z-index:-1}
.sc05_wrap {width:100%;max-width:1480px;margin:0 auto;opacity:0}
.sc05_wrap h3 {color:#333;font-size:4.8rem;font-weight:600;text-align:center}
.sc05_wrap .story_tab {width:100%;margin-top:3.6rem;text-align:center}
.sc05_wrap .story_tab ul {font-size:0}
.sc05_wrap .story_tab ul li {display:inline-block;margin-left:2rem}
.sc05_wrap .story_tab ul li:first-child {margin-left:0}
.sc05_wrap .story_tab ul li button {display:inline-block;height:5rem;padding:0 4rem;background:#eee;border-radius:24px;color:#666;font-size:1.8rem;line-height:4.8rem;box-sizing:border-box}
.sc05_wrap .story_tab ul li.active button {background:#f19e0e;color:#fff}
.sc05_wrap .tab_content {position:relative;margin-top:4rem}
.sc05_wrap .tab_content .story_tab_item {display:none}
.sc05_wrap .tab_content .story_tab_item.active {display:block}
.sc05_wrap .tab_content .story_tab_item .story_list {display:flex;justify-content:space-between;padding:0 4rem;box-sizing:border-box;flex-wrap:wrap;}
.sc05_wrap .tab_content .story_tab_item .story_list li {width:calc((100% - 12rem)/4);padding-top:2rem;display:none}
.sc05_wrap .tab_content .story_tab_item .story_list li.active{display:block}
.sc05_wrap .tab_content .story_tab_item .story_list li a {position:relative;overflow:hidden;display:block;background:#fff;border-radius:8px;}
.sc05_wrap .tab_content .story_tab_item .story_list li a .story_thumb{height:32rem}
.sc05_wrap .tab_content .story_tab_item .story_list li a .story_thumb img {width:100%;height:100%;object-fit:cover}
.sc05_wrap .tab_content .story_tab_item .story_list li a .story_tit {padding:2.1rem 2rem 2.2rem 2rem;box-sizing:border-box}
.sc05_wrap .tab_content .story_tab_item .story_list li a .story_tit span {overflow:hidden;display:block;text-overflow:ellipsis;white-space:nowrap;color:#333;font-size:1.8rem;font-weight:500}
.sc05_wrap .tab_content .story_tab_item .story_list li a:hover {transform:translateY(-20px);background:#f19e0e;box-shadow:0 5px 5px rgba(0, 0, 0, .15)}
.sc05_wrap .tab_content .story_tab_item .story_list li a:hover span {color:#fff}
.sc05_wrap .tab_content .story_tab_item .btn_more {display:block;margin-top:4rem;text-align:center}
.sc05_wrap .tab_content .story_tab_item .btn_more a {display:inline-block;height:4rem;padding:0 3rem;background:#f4e79c;border-radius:24px;color:#9e7c00;font-size:1.6rem;line-height:3.8rem;box-sizing:border-box}
.sc05_wrap .tab_content .story_tab_item .btn_more a:hover {background:#d8bd1f;color:#fff}
.sc05_wrap .tab_content .story_tab_item .story_prev {display:block;position:absolute;top:40%;left:0;transform:translateY(-40%);width:2rem;height:3.8rem;background:url(../../img/portal/main/arrow_prev.png)no-repeat;background-size:2rem;text-indent:-9999px}
.sc05_wrap .tab_content .story_tab_item .story_next {display:block;position:absolute;top:40%;right:0;transform:translateY(-40%);width:2rem;height:3.8rem;background:url(../../img/portal/main/arrow_next.png)no-repeat;background-size:2rem;text-indent:-9999px}

.visual_list li.on{
  -webkit-animation: faderight 1s alternate;
  animation: faderight 1.5s alternate;
  -webkit-animation-name: faderight;
  animation-name: faderight;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
}

.visual_list li{
  -webkit-animation: fadeoutleft 1s alternate;
  animation: fadeoutleft 1.5s alternate;
  -webkit-animation-name: fadeoutleft;
  animation-name: fadeoutleft;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
}

.video_wrap.on .video_box {
  -webkit-animation: faderight 1s alternate;
  animation: faderight 1.5s alternate;
  -webkit-animation-name: faderight;
  animation-name: faderight;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
}

.video_wrap.on .video_info {
  -webkit-animation: fadeleft 1s alternate;
  animation: fadeleft 1.5s alternate;
  -webkit-animation-name: fadeleft;
  animation-name: fadeleft;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
}

.visual_list li.on .visual_txt_wrap * {
  -webkit-animation: fadeleft 1.5s alternate;
  animation: fadeleft 1.5s alternate;
  -webkit-animation-name: fadeleft;
  animation-name: fadeleft;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
}

.visual_list li.on .visual_txt_wrap .visual_logo {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.visual_list li.on .visual_txt_wrap .visual_txt p {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.visual_list li.on .visual_txt_wrap .visual_txt span {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.visual_list li.on .visual_txt_wrap .visual_txt a {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.sc03_wrap.on {
  -webkit-animation: fadeUp 1.5s alternate;
  animation: fadeUp 1.5s alternate;
  -webkit-animation-name: fadeUp;
  animation-name: fadeUp;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
}

.sc04_wrap.on {
  -webkit-animation: fadeUp 1.5s alternate;
  animation: fadeUp 1.5s alternate;
  -webkit-animation-name: fadeUp;
  animation-name: fadeUp;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
}

.sc05_wrap.on {
  -webkit-animation: fadeUp 1.5s alternate;
  animation: fadeUp 1.5s alternate;
  -webkit-animation-name: fadeUp;
  animation-name: fadeUp;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
}

@-webkit-keyframes fadeoutleft {
  0% {
  	-webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 1;
  }
  100% {
     -webkit-transform: translate(-50px, 0px);
    transform: translate(-50px, 0px);
    opacity: 0;
  }
}

@keyframes fadeoutleft {
  0% {
  	-webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50px, 0px);
    transform: translate(-50px, 0px);
    opacity: 0;
  }
}

@-webkit-keyframes fadeleft {
  0% {
    -webkit-transform: translate(-50px, 0px);
    transform: translate(-50px, 0px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 1;
  }
}

@keyframes fadeleft {
  0% {
    -webkit-transform: translate(-50px, 0px);
    transform: translate(-50px, 0px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 1;
  }
}

@-webkit-keyframes faderight {
  0% {
    -webkit-transform: translate(50px, 0px);
    transform: translate(50px, 0px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 1;
  }
}

@keyframes faderight {
  0% {
    -webkit-transform: translate(50px, 0px);
    transform: translate(50px, 0px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    opacity: 1;
  }
}

@-webkit-keyframes fadeUp {
    0% {
    	 -webkit-transform: translate3d(0, 100%, 0);
    	  transform: translate3d(0, 100%, 0);
    	  opacity: 0;
    }
    100% {
    	-webkit-transform: translateZ(0);
    	transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes fadeUp {
    0% {
    	 transform: translate3d(0, 100%, 0);
    	 opacity: 0;
    }
    100% {
    	 transform: translateZ(0);
    	 opacity: 1;
    }
}