@charset "UTF-8";

/* include */
@import url('./popup.css');

/* common */
@media all and (min-width:769px){
	.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide, .swiper-wrapper{height:100% !important;}
}
.swiper-slide.hide{display:none;}

.swiper-pagination{display:inline-block; position:relative; text-align:center;}
.swiper-pagination-bullet{display:inline-block; position:relative; width:12px; height:12px; margin:0 6px; background:#fff; border:none; border-radius:2px; opacity:.4; vertical-align:middle; transition:0.3s;}
.swiper-button-prev:after, .swiper-button-next:after{font-family:inherit; font-size:0;}
.swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{opacity:1;}
.swiper-pagination-bullet-active{background:#fff; opacity:1;}
.swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{}

.swiper-button-prev, .swiper-button-next{display:inline-block; position:absolute; width:36px; height:36px; top:50%; left:auto; right:auto; margin:0; margin-top:-18px; padding:0; border:none; border-radius:16px; transition:.2s;}
.swiper-button-prev{background:#f7f7f7 url('../images/ico_arrow_left_dark.png') no-repeat left 48% top 49% / 25%;}
.swiper-button-next{background:#f7f7f7 url('../images/ico_arrow_right_dark.png') no-repeat right 48% top 49% / 25%;}
.swiper-button-prev:focus, .swiper-button-prev:hover{background-color:#e4e4e4;}
.swiper-button-next:focus, .swiper-button-next:hover{background-color:#e4e4e4;}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{background-position:center bottom !important; opacity:1;}

.autoplay-progress{position:absolute; width:5em; height:2px; top:.75em; left:0; background-color:#ddd; z-index:10;}
.autoplay-progress svg{--progress:0; position:absolute; width:100%; top:0; left:0; z-index:10; stroke-width:4px; stroke:#333; fill:none; stroke-dashoffset:calc(100 * (1 - var(--progress))); stroke-dasharray:100;}

@keyframes marquee_origin{0%{transform:translateX(0);} 50%{transform:translateX(-100%);} 50.01%{transform:translateX(100%);} 100%{transform:translateX(0);}}
@keyframes marquee_clone{0%{transform:translateX(0);} 100%{transform:translateX(-200%);}}
.marquee.origin{animation:marquee_origin 80s linear 0s infinite normal forwards running;}
.marquee.clone{animation:marquee_clone 80s linear 0s infinite normal none running;}
.marqueeW:hover .marquee{animation-play-state:paused;}


#mainVisual{clear:both; display:block; position:relative; width:100%; height:auto; /*height:calc(100vh - 88px);*/ margin:0 auto; padding:0; background:transparent; z-index:1;}
#mainVisual .videoW{position:relative; display:block; width:100%; /*height:100%;*/ padding-bottom:56.25%; /*aspect-ratio:16 / 9;*/ background:#000; overflow:hidden;}
#mainVisual .videoW video{position:absolute; width:100%; height:100%; top:0; left:0; /*object-fit:cover;*/}
#mainVisual .scrolldown{display:block; position:absolute; width:auto; bottom:0; left:50%; transform:translateX(-50%); cursor:default;}
#mainVisual .scrolldown span{display:block; position:relative;}
#mainVisual .scrolldown span.txt{width:max-content; right:-50%; margin-right:-.155em; color:#fff; font-size:1em; font-weight:500; letter-spacing:-.015em; text-transform:uppercase; transform:translateX(-50%);}
#mainVisual .scrolldown span.line{margin-top:1em; padding-top:3em; text-align:center;}
#mainVisual .scrolldown span.line:before{content:''; position:absolute; width:2px; height:3em; top:0; left:50%; margin-left:-1px; background:#fff; animation:scrolldown 1.2s cubic-bezier(1, 0, 0, 1) infinite;}

/* contents */
#mainContents{clear:both; position:relative; width:100%; margin:0 auto; padding:0; background:#000; word-break:keep-all; z-index:1;}
#mainContents .inner{padding:0 6.25em;}
#mainContents .flexW{display:flex; flex-wrap:wrap;}
#mainContents .conTitle{margin:0 0 1.75em;}
#mainContents .conTitle h2{color:#fff; font-size:3em; font-weight:700; text-align:left; text-transform:uppercase;}

#mainContents .area01,
#mainContents .area02{clear:both; position:relative; width:100%; margin:0 auto; padding:0; background:transparent; overflow:hidden;}

#mainContents .area01{padding:6.25em 0;}
#mainContents .area01 .object.circle{position:absolute; width:220px; top:-5em; right:-3.75em; opacity:.2; z-index:-1;}
#mainContents .area01 .object.circle svg{width:100%; height:100%; animation:object-circle-rotate 30s linear infinite;}
#mainContents .area01 .object.circle svg text{fill:#fff; font-size:4.25em; font-weight:400; text-transform:uppercase; letter-spacing:.5938em;}
@keyframes object-circle-rotate{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}

#mainContents .area01 .researchW{background:transparent;}
#mainContents .area01 .researchW .itemW{display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(4, 1fr);}
#mainContents .area01 .researchW .itemW .item{display:block; position:relative; width:100%; overflow:hidden;}
#mainContents .area01 .researchW .itemW .item.type1{background:#003770;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner{height:100%;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-wrapper{z-index:1;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide{background:#003770;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .imgW {width: 100%;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .imgW img {width: 100%;}
/* #mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .imgW{position:absolute; width:100%; top:5em; left:0; text-align:center; z-index:2;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .imgW img{width:100%; max-width:fit-content;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW{position:relative; width:100%; top:50%; left:0; padding:0 3.25em; color:#fff; transform:translateY(-50%);}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW p{line-height:1.5; word-break:keep-all;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW p.ti{font-size:2.375em; font-weight:600; text-align:center;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW ul.list.circle{width:fit-content; margin:3em auto 0; font-size:1.25em;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW ul.list.circle li{position:relative; margin:0 auto 1.125em; padding-left:1em;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW ul.list.circle li:last-child{margin:0 auto;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW ul.list.circle li:before{content:''; display:inline-block; position:absolute; width:.333em; height:.333em; top:.5em; left:0; background:#8dc63f; border-radius:50%;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW ul.list.circle li p{font-weight:500; text-align:left;} */
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .bgBox{position:absolute; width:100%; bottom:5em; left:0; text-align:center;}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .bgBox .pager{}
#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .bgBox .pager .swiper-pagination{bottom:0;}
#mainContents .area01 .researchW .itemW .item.type2{}
#mainContents .area01 .researchW .itemW .item.type2 a{display:block; display:flex; flex-wrap:wrap;}
#mainContents .area01 .researchW .itemW .item.type2 a .imgW{flex:1 1 100%; position:relative; width:100%; height:auto; aspect-ratio:1; background:#eee url('../images/logo_saint_grayscale.png') no-repeat center center; overflow:hidden;}
#mainContents .area01 .researchW .itemW .item.type2 a .imgW:before{content:''; display:block; position:absolute; width:100%; height:100%; top:0; left:0; background:linear-gradient(135deg, #0092db 0%, #00a1e9 100%); opacity:0; z-index:1;}
#mainContents .area01 .researchW .itemW .item.type2 a .imgW:after{content:''; display:block; position:absolute; width:2.5em; height:2.5em; top:50%; left:50%; margin:-1.25em auto auto -1.25em; background:url('../images/ico_more_light.png') no-repeat center / auto; opacity:0; z-index:1;}
#mainContents .area01 .researchW .itemW .item.type2 a .imgW img{position:relative; width:100%; height:100%; top:50%; transform:translateY(-50%); object-fit:cover;}
#mainContents .area01 .researchW .itemW .item.type2 a .imgW i.ico.arrow.top{display:block; position:absolute; width:0; height:0; bottom:0; left:50%; margin-left:-20px; border:20px solid transparent; border-bottom-color:#fff; z-index:2;}
#mainContents .area01 .researchW .itemW .item.type2 a .txtW{flex:1 1 100%; position:relative; width:100%; height:auto; aspect-ratio:1; padding:1.438em 1.5em; background:#fff; overflow:hidden; z-index:1;}
#mainContents .area01 .researchW .itemW .item.type2 a .txtW:after{content:''; display:block; position:absolute; width:100%; height:100%; top:0; left:0; background:linear-gradient(0deg, #fff 0%, transparent 75%);}
#mainContents .area01 .researchW .itemW .item.type2 a .txtW p{display:block; width:100%; height:auto;}
#mainContents .area01 .researchW .itemW .item.type2 a .txtW p strong{}
#mainContents .area01 .researchW .itemW .item.type2 a .txtW p.listTitle{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; max-height:6em; line-height:1.5; font-size:1.375em; overflow:hidden; text-overflow:ellipsis; white-space:inherit;}
#mainContents .area01 .researchW .itemW .item.type2 a .txtW p.listContents{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height:3em; line-height:1.5; margin:.75em 0 0; color:#666; font-size:1.125em; overflow:hidden; text-overflow:ellipsis;}
#mainContents .area01 .researchW .itemW .item.type2 a .txtW p.more{}
#mainContents .area01 .researchW .itemW .item.type2 a:focus,
#mainContents .area01 .researchW .itemW .item.type2 a:hover{}
#mainContents .area01 .researchW .itemW .item.type2 a:focus .imgW:before,
#mainContents .area01 .researchW .itemW .item.type2 a:hover .imgW:before{opacity:.8;}
#mainContents .area01 .researchW .itemW .item.type2 a:focus .imgW:after,
#mainContents .area01 .researchW .itemW .item.type2 a:hover .imgW:after{opacity:1;}
#mainContents .area01 .researchW .itemW .item.type2 a:focus .imgW i.ico.arrow.top,
#mainContents .area01 .researchW .itemW .item.type2 a:hover .imgW i.ico.arrow.top{border-bottom-color:#022137;}
#mainContents .area01 .researchW .itemW .item.type2 a:focus .txtW,
#mainContents .area01 .researchW .itemW .item.type2 a:hover .txtW{background:#022137;}
#mainContents .area01 .researchW .itemW .item.type2 a:focus .txtW:after,
#mainContents .area01 .researchW .itemW .item.type2 a:hover .txtW:after{background:linear-gradient(0deg, #022137 0%, transparent 75%);}
#mainContents .area01 .researchW .itemW .item.type2 a:focus .txtW p.listTitle,
#mainContents .area01 .researchW .itemW .item.type2 a:hover .txtW p.listTitle{color:#fff;}
#mainContents .area01 .researchW .itemW .item.type2 a:focus .txtW p.listContents,
#mainContents .area01 .researchW .itemW .item.type2 a:hover .txtW p.listContents{color:#acacac;}
#mainContents .area01 .researchW .itemW .item.type2.big{}
#mainContents .area01 .researchW .itemW .item.type2.big a .imgW{aspect-ratio:4 / 3;}
#mainContents .area01 .researchW .itemW .item.type2.big a .txtW{aspect-ratio:4 / 1;}
#mainContents .area01 .researchW .itemW .item.type2.big a .txtW p.listTitle{-webkit-line-clamp:2; max-height:3em;}
#mainContents .area01 .researchW .itemW .item.type2.big a .txtW p.listContents{-webkit-line-clamp: 1; max-height: 1.5em;}
#mainContents .area01 .researchW .itemW .item.type2.reverse{}
#mainContents .area01 .researchW .itemW .item.type2.reverse a .imgW{order:2;}
#mainContents .area01 .researchW .itemW .item.type2.reverse a .imgW i.ico.arrow.top{bottom:auto; top:0; border-bottom-color:transparent; border-top-color:#fff;}
#mainContents .area01 .researchW .itemW .item.type2.reverse a:focus .imgW i.ico.arrow.top,
#mainContents .area01 .researchW .itemW .item.type2.reverse a:hover .imgW i.ico.arrow.top{border-top-color:#022137;}
#mainContents .area01 .researchW .itemW .item.type2.reverse a .txtW{order:1;}
#mainContents .area01 .researchW .itemW .item.item01{grid-column:1 / 2; grid-row:1 / 3;}
#mainContents .area01 .researchW .itemW .item.item02{grid-column:2 / 3; grid-row:1 / 3;}
#mainContents .area01 .researchW .itemW .item.item03{grid-column:3 / 4; grid-row:1 / 3;}
#mainContents .area01 .researchW .itemW .item.item04{grid-column:4 / 5; grid-row:1 / 3;}
#mainContents .area01 .researchW .itemW .item.item05{grid-column:1 / 2; grid-row:3 / 5;}
#mainContents .area01 .researchW .itemW .item.item06{grid-column:2 / 4; grid-row:3 / 5;}
#mainContents .area01 .researchW .itemW .item.item07{grid-column:4 / 5; grid-row:3 / 5;}

#mainContents .area02{padding:0 0 6.25em;}
#mainContents .area02 .flexW{flex-wrap:nowrap; justify-content:space-between; gap:6.25em;}
#mainContents .area02 .noticeW{flex:1 1 50%; width: 50%; max-width: calc(50% - 3.125em); position:relative;}
#mainContents .area02 .noticeW .conTitle{}
#mainContents .area02 .noticeW .conTitle h2{}
#mainContents .area02 .noticeW ul.board.notice{ width:100%;}
#mainContents .area02 .noticeW ul.board.notice li{display:block; position:relative; width:100%; border-bottom:1px solid #ddd; overflow:hidden;}
#mainContents .area02 .noticeW ul.board.notice li a{display:block; width:100%; height:100%; padding:1.75em 2.5em; background:#fff;}
#mainContents .area02 .noticeW ul.board.notice li a .listInfo{display:inline-block; width:100%; line-height:1.25; vertical-align:bottom;}
#mainContents .area02 .noticeW ul.board.notice li a .listInfo p{float:none; vertical-align:middle; transition:.3s;}
#mainContents .area02 .noticeW ul.board.notice li a .listInfo p.listTitle{float:left; width:80%; padding:0 1em 0 0; font-size:1.25em; font-weight:700; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:0s;}
#mainContents .area02 .noticeW ul.board.notice li a .listInfo p.listDate{float:right; color:#808080; font-size:1em; text-align:right; transform:translateY(.125em);}
#mainContents .area02 .noticeW ul.board.notice li a:focus,
#mainContents .area02 .noticeW ul.board.notice li a:hover{background:#f0f7ff; border-color:#c0dfff;}
#mainContents .area02 .noticeW ul.board.notice li a:focus p.listTitle,
#mainContents .area02 .noticeW ul.board.notice li a:hover p.listTitle{background:linear-gradient(90deg,#056fb8 0%, #00a1e9 100%); -webkit-background-clip:text; background-clip:text; color:#056fb8; color:transparent;}
#mainContents .area02 .noticeW .btnBox{position:absolute; top:0; right:-.5em;}
#mainContents .area02 .noticeW .btnBox a.more{display:inline-block; padding:.5em;}
#mainContents .area02 .noticeW .btnBox a.more .ico.more.light{display:inline-block; position:relative; width:20px; height:20px; top:50%; right:0; /*margin-top:-10px;*/ opacity:1; z-index:5;}
#mainContents .area02 .noticeW .btnBox a.more .ico.more.light:before,
#mainContents .area02 .noticeW .btnBox a.more .ico.more.light:after{content:''; display:block; position:absolute; width:20px; height:2px; top:50%; margin-top:-1px; background:#fff; transition:.3s;}
#mainContents .area02 .noticeW .btnBox a.more .ico.more.light:after{transform:rotate(90deg);}
#mainContents .area02 .noticeW .btnBox a.more:focus .ico.more.light:before,
#mainContents .area02 .noticeW .btnBox a.more:hover .ico.more.light:before{transform:rotate(90deg);}
#mainContents .area02 .noticeW .btnBox a.more:focus .ico.more.light:after,
#mainContents .area02 .noticeW .btnBox a.more:hover .ico.more.light:after{transform:rotate(180deg);}
#mainContents .area02 .bannerW{flex:1 1 50%; width: 50%; max-width: calc(50% - 3.125em);}
#mainContents .area02 .bannerW i.ico.arrow.right{width:16px; height:7px;}
#mainContents .area02 .bannerW i.ico.arrow.right.light{background:url('../images/ico_arrow_right_light.png') no-repeat center / 100%; opacity: .4;}
#mainContents .area02 .bannerW i.ico.arrow.right.lightblue{background:url('../images/ico_arrow_right_lightblue.png') no-repeat center / 100%;}
#mainContents .area02 .bannerW .seminar{position:relative; min-height:18.5em; margin:0 auto .75em;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar{}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-wrapper{}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide{}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a{display:block; height:100%; padding:1.75em; background:#00a1e9; border:1px solid #30baff; border-radius:2px; transition:border-color .3s;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW{display:flex; flex-wrap:wrap; gap:4em; position:relative; width:100%;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW div{display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:space-between; align-items:flex-start; width:100%;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW div:first-child{min-height:10.375em;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW span.tag{flex:0 0 auto; display:inline-block; padding:.5333em .8em .5em; background:#056fb8; border-radius:5em; color:#fff; font-size:.938em; font-weight:700; text-transform:uppercase;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p{flex:1 1 100%; position:relative; line-height:1.3; color:#fff; text-align:left;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.ti{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; max-height:3.5em; margin:.75em auto; color:#fff; font-size:1.75em; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:inherit;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.speaker{width:100%; margin:0; color:#90e2ff; font-size:1em; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.date{flex:1 0 auto; line-height:1; color:#c0e8fa; font-size:1.5em; font-weight:700;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.more{flex:1 0 auto; align-self:center; line-height:1; color:#60d0ff; font-size:.875em; text-align:right; text-transform:uppercase; transition:.3s;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.more i.ico.arrow.right{display:inline-block; margin-bottom:.1em; margin-left:.85em; transition:.3s;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.more:after{content:''; clear:both; display:inline-block;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a:focus,
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a:hover{background:#30baff; background:linear-gradient(135deg, #00a1e9 0%, #30baff 100%); border-color:#60d0ff;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a:focus p.more,
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a:hover p.more {margin-right:.375em;}

#mainContents .area02 .bannerW .seminar .swiper-main-seminar .bgBox{position:absolute; top:1.75em; right:1.75em;}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .bgBox .pager{}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .bgBox .pager .swiper-pagination{}
#mainContents .area02 .bannerW .seminar .swiper-main-seminar .bgBox .pager .swiper-pagination .swiper-pagination-bullet{width:.5em; height:.5em; margin:0 3px;}
#mainContents .area02 .bannerW .quick{}
#mainContents .area02 .bannerW .quick .booking{}
#mainContents .area02 .bannerW .quick .booking a{display:block; padding:1.75em; background:#004283; border:1px solid #00559e; border-radius:2px; transition:border-color .3s;}
#mainContents .area02 .bannerW .quick .booking a .txtW{display:flex; justify-content:space-between; align-items:center; position:relative; width:100%;}
#mainContents .area02 .bannerW .quick .booking a .txtW p{position:relative; line-height:1.3; color:#fff; text-align:left; transition: .3s;}
#mainContents .area02 .bannerW .quick .booking a .txtW p.ti{margin:0; color:#fff; font-size:1.75em; font-weight:700;}
#mainContents .area02 .bannerW .quick .booking a .txtW p.more i.ico.arrow.right{display:inline-block; margin-bottom:.1em; margin-left:.85em;}
#mainContents .area02 .bannerW .quick .booking a .txtW p.more:after{content:''; clear:both; display:inline-block;}
#mainContents .area02 .bannerW .quick .booking a:focus,
#mainContents .area02 .bannerW .quick .booking a:hover{background:#00559e; background:linear-gradient(135deg, #004283 0%, #00559e 100%); border-color:#0062ae;}
#mainContents .area02 .bannerW .quick .booking a:focus .txtW p.more,
#mainContents .area02 .bannerW .quick .booking a:hover .txtW p.more {margin-right:.375em;}

@media all and (max-width:1740px){
	#mainContents .inner{padding:0 5.5em;}

	#mainContents .area01{padding:5.5em 0;}
	/* #mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .imgW{top:4em;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW p.ti{font-size:2em;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW ul.list.circle{margin:1.5em auto 0;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW ul.list.circle li{margin:0 auto 1em;} */
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .bgBox{bottom:4em;}

	#mainContents .area02 .flexW{gap:5.5em;}
	#mainContents .area02 .bannerW .quick .booking a{padding:1.5em 1.75em;}
}

@media all and (max-width:1599px){
	#mainContents .inner{padding:0 4em;}

	#mainContents .area01{padding:4em 0 5em;}
	/* #mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .imgW img{width:40%;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW{padding:0 3em;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW p.ti{font-size:1.875em;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW ul.list.circle{margin:1.25em auto 0; font-size:1.125em;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW ul.list.circle li{margin:0 auto .75em;} */

	#mainContents .area01 .researchW .itemW .item.type2 a .txtW:after{background:linear-gradient(0deg, #fff 0%, transparent 50%);}
	#mainContents .area01 .researchW .itemW .item.type2 a:focus .txtW:after,
	#mainContents .area01 .researchW .itemW .item.type2 a:hover .txtW:after{background:linear-gradient(0deg, #022137 0%, transparent 50%);}

	#mainContents .area02{padding:0 0 5em;}
	#mainContents .area02 .flexW{gap:4em;}
	#mainContents .area02 .noticeW ul.board.notice li a{padding:1.5em 2em;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW{gap:3em;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.date{font-size:1.313em;}
	#mainContents .area02 .bannerW .quick .booking a{padding:1.25em 1.75em;}
}

@media all and (max-width:1440px){
	#mainContents .inner{padding:0 3.5em;}

	#mainContents .area01{padding:3.5em 0 5.25em;}
	/* #mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .imgW{top:3em;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW{padding:0 2em;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW ul.list.circle{margin:1.125em auto 0;} */
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .bgBox{bottom:3em;}

	#mainContents .area02{padding:0 0 5.25em;}
	#mainContents .area02 .flexW{gap:3.5em;}
	#mainContents .area02 .noticeW ul.board.notice{gap:0 .75em;}
	#mainContents .area02 .noticeW ul.board.notice li a{padding:1.5em 1.75em;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW{gap:2em;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.ti{max-height:3em; font-size:1.5em;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.date{flex:1 1 100%;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.more{flex:1 1 100%; margin-top:1.25em;}
	#mainContents .area02 .bannerW .quick .booking a .txtW p.ti{font-size:1.5em;}
}

@media all and (max-width:1279px){
	#mainContents{min-width:960px;}
	#mainContents .inner{padding:0 2.5em;}

	#mainContents .area01{padding:2.5em 0 5em;}
	/* #mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .imgW{top:2em;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .imgW img{width:32%;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW{padding:0 1.75em;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW p.ti{font-size:1.438em;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW ul.list.circle{margin:1em auto 0; font-size:1em;} */
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .bgBox{bottom:2em;}
	#mainContents .area01 .researchW .itemW .item.type2 a .imgW{background-size:40%;}

	#mainContents .area01 .researchW .itemW .item.type2 a .txtW p.listTitle{font-size:1.25em;}
	#mainContents .area01 .researchW .itemW .item.type2 a .txtW p.listContents{font-size:1em;}

	#mainContents .area02{padding:0 0 5em;}
	#mainContents .area02 .flexW{flex-wrap:wrap; gap:2.5em;}
	#mainContents .area02 .noticeW{flex:1 1 100%; max-width:100%;}
	#mainContents .area02 .bannerW{flex:1 1 100%; max-width:100%;}
	#mainContents .area02 .bannerW .seminar{min-height:auto;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.date{flex:0 1 auto;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.more{flex:0 1 auto; margin-top:0;}
}

@media all and (max-width:1023px){
	#mainVisual .scrolldown span.txt{font-size:.75em;}
	#mainVisual .scrolldown span.line{height:2em; padding-top:2em;}
	#mainVisual .scrolldown span.line:before{height:2em;}

	#mainContents{min-width:100%;}
	#mainContents .conTitle h2{font-size:2.5em;}

	#mainContents .area01 .researchW .itemW{display:flex; flex-wrap:wrap;}
	#mainContents .area01 .researchW .itemW .item{flex:1 1 50%; width:100%;}
	#mainContents .area01 .researchW .itemW .item.item01{flex:1 1 100%;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide {aspect-ratio: 1; position: relative;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .imgW {}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .imgW img {position: absolute; left: 50%; top: 50%;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide.bg01 .imgW img {transform: translate(-50%, -50%)}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide.bg02 .imgW img {transform: translate(-50%, -45%)}
	/* #mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW{padding:7.5em 2.5em 5em;} */
	#mainContents .area01 .researchW .itemW .item.type2.big a .imgW{aspect-ratio:1 / 1;}
	#mainContents .area01 .researchW .itemW .item.type2.big a .txtW{aspect-ratio:1 / 1;}
	#mainContents .area01 .researchW .itemW .item.type2.big a .txtW p.listTitle{-webkit-line-clamp:2; max-height:3em;}
	#mainContents .area01 .researchW .itemW .item.type2.reverse a .imgW{order:1;}
	#mainContents .area01 .researchW .itemW .item.type2.reverse a .imgW i.ico.arrow.top{bottom:0; top:auto; border-bottom-color:#fff; border-top-color:transparent;}
	#mainContents .area01 .researchW .itemW .item.type2.reverse a:focus .imgW i.ico.arrow.top,
	#mainContents .area01 .researchW .itemW .item.type2.reverse a:hover .imgW i.ico.arrow.top{border-bottom-color:#022137; border-top-color:transparent;}
	#mainContents .area01 .researchW .itemW .item.type2.reverse a .txtW{order:2;}
}

@media all and (max-width:768px){
	.swiper-container-autoheight, .swiper-container-autoheight .swiper-slide{height:auto;}
	.autoplay-progress{width:4em;}

	#mainVisual .scrolldown span.line{height:1em; padding-top:1em;}
	#mainVisual .scrolldown span.line:before{height:1em;}

	#mainContents{font-size:15px;}
	#mainContents .conTitle h2{font-size:2em;}

	#mainContents .area01 .object.circle{z-index:0;}
	#mainContents .area01 .object.circle svg text{font-size:4.5em;}
	/* #mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW p br{display:none;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW p br.mobile{display:inline;} */

	#mainContents .area02 .noticeW ul.board.notice{display:block;}
	#mainContents .area02 .noticeW ul.board.notice li.list04{border-radius:0;}

	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.ti{font-size:1.25em;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.speaker{font-size:.875em;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.date{font-size:1em;}
	#mainContents .area02 .bannerW .quick .booking a .txtW p.ti{font-size:1.25em;}
}

@media all and (max-width:580px){
	#mainVisual .scrolldown{display:none;}

	#mainContents .inner{padding:0 1em;}

	#mainContents .area01{padding:1em 0 4em;}
	/* #mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .imgW img{width:28%;}
	#mainContents .area01 .researchW .itemW .item.type1 .swiper-main-banner .swiper-slide .txtW{padding:6.25em 2.5em 5em;} */
	#mainContents .area01 .researchW .itemW .item.type2 a .txtW p.listTitle{font-size:1.063em;}
	#mainContents .area01 .researchW .itemW .item.type2 a .txtW p.listContents{font-size:.938em;}

	#mainContents .area02{padding:0 0 4em;}
	#mainContents .area02 .flexW{flex-wrap:wrap; gap:2em;}
	#mainContents .area02 .noticeW ul.board.notice li a{padding:1em 1.25em;}
	#mainContents .area02 .noticeW ul.board.notice li a .listInfo p.listTitle{width:100%; margin:0 auto .625em; font-size:1.063em;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.ti{font-size:1.25em;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.date{flex:1 1 100%;}
	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW p.more{flex:1 1 100%; margin-top:1.25em;}
}

@media all and (max-width:480px){
	.autoplay-progress{width:3em;}

	#mainContents{font-size:14px;}

	#mainContents .area01 .object.circle{width:160px;}
	#mainContents .area01 .object.circle svg text{letter-spacing:.6em;}
	#mainContents .area01 .researchW .itemW{gap:.5em; background:transparent;}
	#mainContents .area01 .researchW .itemW .item{flex:1 1 100%;}
	#mainContents .area01 .researchW .itemW .item.type2 a .txtW,
	#mainContents .area01 .researchW .itemW .item.type2.big a .txtW{aspect-ratio:auto;}

	#mainContents .area02 .bannerW .seminar .swiper-main-seminar .swiper-slide a .txtW div:first-child{min-height:8em;}
}

@media all and (max-width:319px){
}

/* ie hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){
}