/* ============== SubTop start ============== */
/* 이미지 */
#subPage .subTop .bg_img{background: url(/img/subTop/cardiology.jpg) no-repeat center right 30% / cover;}
#boardHeader .subTop .bg_img{background: url(/img/subTop/community.jpg) no-repeat center right 30% / cover;}

.subTop .subtop_inner{margin-top: 4rem;}
.subTop .subtop_inner h1{padding: 5rem 0;}
.subTop .subtop_inner .bg_img{width: 100%; max-height: 430px; height: 30vw; min-height: 280px;}
.subTop .subtop_inner .bg_img .square{width: 6rem; height: 6rem; background: rgba(var(--pointcolor-rgb), 0.95); position: absolute; top: -3rem; right: 0;}
/* ============== SubTop end ============== */





/* ============== 연구회소개 / 인사말 ============== */
.subconts01 .inner{display: flex; align-items: flex-start; justify-content: space-between;}
.subconts01 .inner .txtbox{width: 60%;}
.subconts01 .inner .txtbox > p{line-height: 1.7;}
.subconts01 .inner .txtbox .name span{color: #acacac;}
.subconts01 .inner .imgbox{width: 40%; padding-left: 2%;}


@media (max-width: 768px){
	.subconts01 .inner{flex-wrap: wrap;}
	.subconts01 .inner .txtbox{width: 100%;}
	.subconts01 .inner .imgbox{width: 100%; padding-left: 0; margin-top: 5rem;}
}




/* ============== 연구회소개 / 회칙 ============== */
.subconts02{}
.subconts02 .tit:after{display: block; content: ''; width: 100%; height: 1px; background: #ddd; margin: .75rem auto;}
.tit > h2:before{display: block; content: ''; width: 2rem; height: 2rem; background: var(--pointcolor); position: absolute; top: 0; left: 0; z-index: -1;}

.subconts02 .txt_list:after{display: block; content: ''; width: 100%; height: 1px; background: #ddd; margin: 5rem auto 0;}
.subconts02 .txt_list h4{width: 20rem;}
.subconts02 .txt_list > img{position: absolute; right: 0; bottom: 15%;}
.subconts02 .txt_list .rul{align-items: flex-start; justify-content: space-between;}
.subconts02 .txt_list .rul .inner{width: 80%;}
.subconts02 .txt_list .rul .inner p{line-height: 1.7;}


@media (max-width: 768px){
	.subconts02 .txt_list:after{margin: 3rem auto 0;}
	.subconts02 .txt_list .rul{flex-wrap: wrap;}
	.subconts02 .txt_list h4{width: 100%;}
	.subconts02 .txt_list .rul .inner{width: 100%; padding-left: 0; margin: 2rem 0;}
}




/* ============== 연구회소개 / 임원진 ============== */
.subconts03{}
.subconts03 .tit > h2{width: 50%; letter-spacing: -2px; line-height: 1.3;}
.subconts03 .tit > p{width: 50%; line-height: 1.7;}

.subconts03 .circle{border: 15px solid var(--pointcolor); border-radius: 50%; width: 18rem; height: 18rem; position: relative; margin: auto;}
.subconts03 .circle .owner{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.subconts03 .circle .owner > small{color: #acacac;}

.subconts03 .vice .box{width: 40%; border-radius: 5em; margin-left: -1.5rem; padding: 2rem 1rem; mix-blend-mode: multiply;}
.subconts03 .vice .box:first-child{margin-left: 0;}
.subconts03 .vice .point-bg{background: rgba(var(--pointcolor-rgb), 0.85);}
.subconts03 .vice .tit-bg{background: rgba(var(--titcolor-rgb), 0.85);}

.subconts03 .member{align-items: flex-start; justify-content: space-between;}
.subconts03 .member .mb_left{width: 32%;}
.subconts03 .member .mb_center{width: 32%; flex-direction: column;}
.subconts03 .member .mb_right{width: 32%;}
.subconts03 .member .box{width: 100%; display: flex; align-items: center; padding: 2rem;}
.subconts03 .member .box > small{width: 5rem; margin-right: 2.5rem; display: block;}
.subconts03 .member .box > p{width: 80%;}

@media (max-width: 768px){
	.subconts03 .tit{flex-wrap: wrap;}
	.subconts03 .tit > h2{width: 100%;}
	.subconts03 .tit > p{width: 100%; margin-left: 0.625rem; margin-top: 2rem;}

	.subconts03 .circle{width: 22rem; height: 22rem; border: 10px solid var(--pointcolor);}

	.subconts03 .vice{flex-wrap: wrap;}
	.subconts03 .vice .box{width: 100%; margin-left: 0; margin-top: .5rem;}

	.subconts03 .member{flex-wrap: wrap;}
	.subconts03 .member .mb_left{width: 100%; margin-bottom: 3rem;}
	.subconts03 .member .mb_center{width: 100%; flex-direction: column; margin-bottom: 3rem;}
	.subconts03 .member .mb_right{width: 100%;}
}



/* ============== 연구회소개 / 회원입회 ============== */
.subconts04{}
.subconts04 .tit{width: 45%;}
.subconts04 .tit > h2{letter-spacing: -2px; line-height: 1.3;}

.subconts04 .txtbox{width: 55%;}
.subconts04 .txtbox > p{line-height: 1.7; letter-spacing: -1px;}
.subconts04 .txtbox .list{padding: 3rem 1.75rem;}
.subconts04 .txtbox .list .check > p{line-height: 1.7; letter-spacing: -1px;}
.subconts04 .txtbox .list .download{display: flex; justify-content: flex-end;}
.subconts04 .txtbox .list .download a{background: var(--pointcolor); width: 11rem; display: flex; align-items: center; justify-content: center; padding: .5rem 0;}
.subconts04 .txtbox .list .download a:hover{background: #f20000; box-shadow:1px 1px 4px rgba(222,39,38,0.4);}

@media (max-width: 768px){
	.subconts04 .container{flex-wrap: wrap;}
	.subconts04 .tit{width: 100%;}
	.subconts04 .txtbox{width: 100%;/*  margin-left: 0.625rem; */ margin-top: 2rem;}
	.subconts04 .txtbox .list .download a{width: 15rem; padding: .85rem 0;}
	.subconts04 .txtbox .list .download img{width: 13%;}
}



/* ============== 연구회소개 / 심장혈관영상연구회란? ============== */
.subconts05{}
.subconts05 .tit{width: 50%;}
.subconts05 .tit > h2{letter-spacing: -2px; line-height: 1.3;}

.subconts05 .txtbox{width: 50%;}
.subconts05 .txtbox > p{line-height: 1.7; letter-spacing: -1px;}

@media (max-width: 1400px){
	.subconts05 .tit .imgbox{width: 90%;}
}

@media (max-width: 768px){
	.subconts05 .container{flex-wrap: wrap;}
	.subconts05 .tit{width: 100%;}
	.subconts05 .tit .imgbox{width: 100%;}
	.subconts05 .tit .imgbox > img{margin: auto;}
	.subconts05 .txtbox{width: 100%; margin-top: 3rem;}
}



/* ============== 연구회소개 / 연혁 ============== */
/* 역대회장소개 */
.subconts06{}
.subconts06 .tit:after{display: block; content: ''; width: 100%; height: 1px; background: #ddd; margin: .75rem auto;}

.subconts06 .owner_wrap{}
.subconts06 .owner_wrap .years{display: flex; align-items: flex-start; justify-content: space-between;}
.subconts06 .owner_wrap .years .leftbox{width: 40%; position: relative;}
.subconts06 .owner_wrap .years .leftbox > span{width: 13rem; height: 13rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 5px 5px 10px rgb(0 0 0 / 15%); }
.subconts06 .owner_wrap .years .leftbox:after{display: block; content: ''; width: 24rem; height: 1px; background: var(--pointcolor); position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: -1;}

.subconts06 .owner_wrap .list_wrap{width: 60%;}
.subconts06 .owner_wrap .list_wrap .list{align-items: center; justify-content: space-between;}
.subconts06 .owner_wrap .list_wrap .list .date{width: 20rem; padding: .75rem; border-radius: 2em; display: flex; align-items: center; justify-content: center;}
.subconts06 .owner_wrap .list_wrap .list .date.no01{border: 1px solid var(--pointcolor);}
.subconts06 .owner_wrap .list_wrap .list .name{width: 60%; display: flex; align-items: center; justify-content: flex-start; padding-left: 3rem;}

@media (max-width: 768px){
	.subconts06 .owner_wrap .years{flex-wrap: wrap;}
	.subconts06 .owner_wrap .years .leftbox{width: 100%; display: flex; justify-content: center;}
	.subconts06 .owner_wrap .years .leftbox:after{width: 1px; height: 18rem; left: 50%; top: 0; bottom:0; transform: translateX(-50%);}

	.subconts06 .owner_wrap .list_wrap{width: 100%; margin-top: 8rem;}
	.subconts06 .owner_wrap .list_wrap .list .date{width: 30rem;}
	.subconts06 .owner_wrap .list_wrap .list .name{width: 50%;}
}

@media (max-width: 576px){
	.subconts06 .owner_wrap .list_wrap .list .date{width: 20rem;}
	.subconts06 .owner_wrap .list_wrap .list .name{width: 55%; padding-left: 2rem;}
}


/* 연혁리스트 */
.subconts07{}
.subconts07 .no01{position: absolute; top: 15%; right: 0;}
.subconts07 .no02{position: absolute; bottom: 25%; left: 0;}
.subconts07 .titimg{background: url(/img/sub/img04.jpg)no-repeat center center / cover; width: 100%; height: 28vw; max-height: 480px; min-height: 240px; display: flex; align-items: center; justify-content: center;}
.subconts07 .titimg .tittxt{border: 7px solid var(--pointcolor); padding: 6rem 1rem; width: 36rem;}

.subconts07 .hst_wrap{}
.subconts07 .hst_wrap:before{height: calc(100% + 50px); content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 1px; background: #d6d6d6;}

.subconts07 .hst_wrap .hst_inner{width: 100%;}
.subconts07 .hst_wrap .hst_inner .hst_box{display: flex; max-width: 1210px; margin: auto; align-items: flex-start;}

.subconts07 .hst_wrap .hst_inner .hst_box .yearleft{width: 50%;}
.subconts07 .hst_wrap .hst_inner .hst_box .yearleft > h1{transition: all .3s ease; text-align: left; position: relative;}
.subconts07 .hst_wrap .hst_inner .hst_box .yearleft > h1::after{position: absolute; top: 50%; right: 0; transform: translateY(-50%); content: ''; height: 1px; width: 12rem; background: var(--pointcolor); transition: all .3s ease; transition-delay: .3s;}

.subconts07 .hst_wrap .hst_inner .hst_box .listright{width: 50%; padding-left: 3rem; padding-top: 1.65rem; position: relative;}
.subconts07 .hst_wrap .hst_inner .hst_box .listright::before{content: ''; width: 10px; height: 10px; background: var(--pointcolor); border-radius: 50%; display: block; position: absolute; top: 2.2rem; left: -5px;}
.subconts07 .hst_wrap .hst_inner .hst_box .listright .listitem{display: flex; justify-content: space-between;}
.subconts07 .hst_wrap .hst_inner .hst_box .listright .listitem > span{width: 10rem; display: block; letter-spacing: -1px;}
.subconts07 .hst_wrap .hst_inner .hst_box .listright .listitem > p{width: 22rem;}

.subconts07 .hst_wrap .hst_inner .hst_box .listleft{width: 50%; text-align: right; padding-right: 3rem; padding-top: 1.65rem; position: relative;}
.subconts07 .hst_wrap .hst_inner .hst_box .listleft::before{content: ''; width: 10px; height: 10px; background: var(--titcolor); border-radius: 50%; display: block; position: absolute; top: 2.2rem; right: -5px;}
.subconts07 .hst_wrap .hst_inner .hst_box .listleft .listitem{display: flex; justify-content: space-between;}
.subconts07 .hst_wrap .hst_inner .hst_box .listleft .listitem > span{width: 10rem; display: flex; justify-content: flex-end; text-align: left; letter-spacing: -1px;}
.subconts07 .hst_wrap .hst_inner .hst_box .listleft .listitem > p{width: 22rem;}

.subconts07 .hst_wrap .hst_inner .hst_box .yearright{width: 50%; text-align: right;}
.subconts07 .hst_wrap .hst_inner .hst_box .yearright > h1{transition: all .3s ease; position: relative;}
.subconts07 .hst_wrap .hst_inner .hst_box .yearright > h1::after{position: absolute; top: 50%; left: 0; transform: translateY(-50%); content: ''; height: 1px; width: 12rem; background: var(--titcolor); transition: all .3s ease; transition-delay: .3s;}


@media (max-width: 1200px){
	.subconts07 .hst_wrap .hst_inner .hst_box{width: 100%;}
}

@media (max-width: 1024px){
	.subconts07 .titimg .tittxt{padding: 4rem 1rem;}
	.subconts07 .hst_wrap .hst_inner .hst_box .yearleft > h1, .subconts07 .hst_wrap .hst_inner .hst_box .yearright > h1{line-height: 1.05;}
}

@media (max-width: 768px){
	.subconts07 .titimg .tittxt{border: 5px solid var(--pointcolor);}

	.subconts07 .hst_wrap .hst_inner .hst_box .listright .listitem, .subconts07 .hst_wrap .hst_inner .hst_box .listleft .listitem{flex-wrap: wrap;}
	.subconts07 .hst_wrap .hst_inner .hst_box .listright .listitem > span, .subconts07 .hst_wrap .hst_inner .hst_box .listleft .listitem > span{width: 100%;}
	.subconts07 .hst_wrap .hst_inner .hst_box .listright .listitem > p, .subconts07 .hst_wrap .hst_inner .hst_box .listleft .listitem > p{width: 100%;}
	.subconts07 .hst_wrap .hst_inner .hst_box .listleft .listitem > span{order: -1;}
}

@media (max-width: 576px){
	.subconts07 .no01{width: 20%;}
	.subconts07 .no02{width: 20%;}

	.subconts07 .hst_wrap .hst_inner .hst_box .yearleft > h1, .subconts07 .hst_wrap .hst_inner .hst_box .yearright > h1{line-height: 1;}
	.subconts07 .hst_wrap .hst_inner .hst_box .yearleft > h1::after, .subconts07 .hst_wrap .hst_inner .hst_box .yearright > h1::after{width: 8rem;}
	.subconts07 .hst_wrap .hst_inner .hst_box .listleft::before{width: 7px; height: 7px; right: -3.5px;}
	.subconts07 .hst_wrap .hst_inner .hst_box .listright::before{width: 7px; height: 7px; left: -3.5px;}
}

@media (max-width: 480px){
	.subconts07 .titimg .tittxt{width: auto;}
	.subconts07 .hst_wrap .hst_inner .hst_box .yearleft > h1::after, .subconts07 .hst_wrap .hst_inner .hst_box .yearright > h1::after{width: 3rem;}
}