@charset "utf-8";

/*=============================================================
의료원 소개
=============================================================== */
.ptp001 {
	font-family: var(--font-family-base); font-size: 1.7rem; line-height: 1.6;
	.tab_aria_03 { display: block; }
	.con > p { margin-bottom: 20px; }
	.flex_01 { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
	.flex_01 > li { display: flex; flex-direction: column; align-items: center; width: calc(100%/3 - 14px); gap: 10px;}
	.flex_001 { display: flex; justify-content: center; gap: 2rem; }
	.flex_001 > li { text-align: center; width: auto; }
	.flex_02 > li { display: flex; flex-direction: column; align-items: center; }
	.flex_04 { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
	.flex_04 > li { display: flex; flex-direction: column; align-items: center; width: calc(100%/4 - 15px); gap: 10px;}
	.flex_01 > li > img,
	.flex_001 > li > img,
	.flex_02 > li > img,
	.flex_04 > li > img { border-radius: 14px; }
	.flex_05 { display: flex; justify-content: center; width: 80%; gap: 20px; margin: 20px auto; }
	.flex_05 .item_01 { display: flex; flex-direction: column; gap: 20px; width: calc(30% - 10px); }
	.flex_05 .item_02 { display: flex; flex-direction: row; gap: 20px; width: calc(60% - 10px); }
	.flex_05 .item_01 > li, 
	.flex_05 .item_02 > li { display: flex; }
	.flex_05 .item_01 > li > img, 
	.flex_05 .item_02 > li > img { border-radius: 14px; }
	.iframe_box { width: 50%; text-align: center; margin: 0 auto 20px auto; }
	.iframe_box > iframe { display: block; width: 100%; height: fit-content; object-fit: cover; aspect-ratio: 16/9; }
	@media screen and (max-width: 800px){
		.flex_05 { width: 100%; }
		.iframe_box { width: 80%; }
	}
	@media screen and (max-width: 600px){
		.tab_aria_03 > .tab_list > li { width: 50%; }
		.flex_01 > li { width: calc(100%/2 - 10px); font-size: 1.4rem; }
		.flex_04 > li { width: calc(100%/2 - 10px); }
		.flex_05 { flex-direction: column; }
		.flex_05 .item_01 { width: 100%; flex-direction: row; }
		.flex_05 .item_02 { width: 100%; flex-direction: row; }
		.iframe_box { width: 100%; } 
	}
	@media screen and (max-width: 420px){
		.tab_aria_03 > .tab_list { flex-direction: column; }
		.tab_aria_03 > .tab_list > li { width: 100%; }
		.flex_01 > li { width: 100%; }
		.flex_001 { flex-direction: column; }
		.flex_001 > li { width: 100%; }
		.flex_04 > li { width: 100%; }
		.flex_05 .item_01 { flex-direction: column; }
		.flex_05 .item_02 { flex-direction: column; }
	}
}


/*=============================================================
의료원장 인사말
=============================================================== */
.greeting {
	.gree_top {
		position: relative; font-family: var(--font-family-base);
		.flex { 
			display: flex; align-items: center; justify-content: center;
			> .top { font-size: 3.0rem; }
			> .top > p:first-child { margin-bottom: 50px; }
			> .img_box { display: flex; }
		}
		&::after { position: absolute; display: block; content: ''; bottom: 0; left: 0; width: 100%; height: 500px; background: url('../img/sub_02_bg.png') center bottom no-repeat; z-index: -1; }

	}
	@media screen and (max-width: 1200px){
		.gree_top .flex > .top { width: 60%; font-size: 2.4rem; word-break: keep-all;}
		.gree_top .flex > .top > p > b > br { display: none; } 
		.gree_top .flex > .img_box { width: 40%; }
	}
	@media screen and (max-width: 800px){
		.gree_top .flex > .top { font-size: 2.0rem; }
	}
	@media screen and (max-width: 600px){
		.gree_top .flex { flex-direction: column-reverse; }
		.gree_top .flex > .top { width: 100%; font-size: 1.8rem; background: var(--hl-white); padding: 10px; margin: 0 10px 20px;}
		.gree_top .flex > .top > p:first-child { margin-bottom: 30px; }
		.gree_top .flex > .img_box { width: 60%; }
	}
	.gree_con > p { font-size: 1.7rem; line-height: 1.8; }
}

/*=============================================================
HI - ptp003
=============================================================== */
.ptp003 {
	.tab_aria_03 { display: block; }
	@media screen and (max-width: 600px){
		.tab_aria_03 > .list__5 > li { width: calc(100% / 2); }
	}
	/* 심볼마크 */
	.tab_01 {
		.tit { font-size: 2.0rem; font-weight: 500; }
		.flex { display: flex; align-items: center;}
		.flex > ul { display: flex; justify-content: center; align-items: flex-end; width: 50%; gap: 30px;}
		.flex > ul:first-child { border-right: 1px solid #ccc; }
		.flex > ul > li:first-child { display: flex; flex-direction: column; align-items: center; }
		.pink { color: #ea6175; }
		.gray { color: #727171; }
		@media screen and (max-width: 800px){
			.flex > ul { flex-direction: column; gap: 20px; }
			.flex > ul > li { display: flex; flex-direction: column; align-items: center; width: 100%; }
		}
		@media screen and (max-width: 500px){
			.flex { flex-direction: column; }
			.flex > ul { width: 100%; }
			.flex > ul:first-child { padding-bottom: 20px; margin-bottom: 20px; border-right: none; border-bottom: 1px solid #ccc; }
		}
	}
	/* 한림체 */
	.tab_02 {
		.tit_01 { font-size: 2.6rem; padding: 20px 10px; text-align: center; font-weight: 600; margin-bottom: 20px; border-bottom: 2px solid #ea6175; margin-top: 50px; background: var(--hl-gray-10);}
		.img_border { text-align: center; border: 1px solid var(--hl-gray-30); padding: 10px 50px; }
		.flex_01 { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
		.flex_01 > img:last-child { padding: 20px 152px; }
		.flex_01 > img { border: 1px solid var(--hl-gray-30); padding: 10px 50px; background: var(--hl-white-fixe);}
		@media screen and (max-width: 900px){
			.flex_01 > img:last-child { padding: 20px; }
		}
	}
	/* 시그니처 */
	.tab_03 {
		.flex_01 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 50px;}
		.flex_01 > img { border: 1px solid var(--hl-gray-30); padding: 20px; background: var(--hl-white-fixe);}
		@media screen and (max-width: 460px){  
			.btn { width: 100%; margin-bottom: 10px; }
		}
	}
	/* 엠블렘 */
	.tab_04 { 
		.flex_01 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 50px; }
	}
	/* HI히스토리 */
	.tab_05 {
		.flex_01 { display: flex; align-items: center; gap: 20px; margin-bottom: 50px; font-size: 1.8rem; }
		.img_border { text-align: center; border: 1px solid var(--hl-gray-30); padding: 10px 50px; background: var(--hl-white-fixe); }
		@media screen and (max-width: 1024px){  
			.flex_01 { flex-wrap: wrap; word-break: keep-all; line-height: 1.7;}
		}
		@media screen and (max-width: 400px){  
			.flex_01 { font-size: 1.6rem; }
		}
	}
}


/*=============================================================
연혁
=============================================================== */
.milestones {
	.tab_aria_03 { display: block; word-break: keep-all; }
	.tBox { margin-bottom: 50px; }
	.w_scroll {   
		scroll-snap-type: x mandatory; /* 가로 스크롤 영역에 스냅 적용 */
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch; 
	}
	.tab_list { scroll-padding-inline: 50%; }
	@media screen and (max-width: 420px){
		.tab_list a { scroll-margin-inline: 50%; /* 스크롤 시 중앙 위치 보정 */}
	}

	> .tab_ct > .title {
		position: sticky; font-size: 4.0rem; color: #ff6407; top: 45px; background: #fff;
		&::before { position: absolute; display: inline-block; content: ''; bottom: 0; left: 0; width: 96px; height: 3px; background: #ff6407; }
		&:nth-of-type(1) { z-index: 1;}
		&:nth-of-type(2) { z-index: 2;}
		&:nth-of-type(3) { z-index: 3;}
		&:nth-of-type(4) { z-index: 4;}
		&:nth-of-type(5) { z-index: 5;}
		&:nth-of-type(6) { z-index: 6;}
		&:nth-of-type(7) { z-index: 7;}
		&:nth-of-type(8) { z-index: 8;}
		&:nth-of-type(9) { z-index: 9;}
		&:nth-of-type(10) { z-index: 10;}
	}
	> .tab_ct > .year {
		position: relative; width: calc(100% - 50px); margin-left: 50px; padding: 20px 0 20px 20px; display: flex; flex-wrap: wrap;
		> .date { position: relative; width: 12%; min-width: 100px; padding: 5px 0; font-size: 1.8rem;}
		> .desc { width: 88%; padding: 5px 0;}
		&::before { position: absolute; display: inline-block; content: ''; bottom: 0; left: 0; width: 1px; height: 100%; border-left: 1px dashed #ff6407; }
		&:last-child::after { position: absolute; display: inline-block; content: ''; bottom: 0; left: -15px; width: 30px; height: 2px; background: #ff6407; }
	}

	@media screen and (max-width: 1024px){
		> .tab_ct > .title { top: 110px; }
	}
	@media screen and (max-width: 800px){
		> .tBox_02 > .body_m { word-break: normal; }
		> .tab_ct > .title { 
			font-size: 3.0rem; 
			&::before { width: 73px; }
		}
		> .tab_ct > .year {
			flex-direction: column; margin-left: 37px; padding: 20px 0 20px 10px;
			> .date { width: 100%; padding: 0;}
			> .desc { width: 100%; margin-bottom: 10px;}
		}
	}
	@media screen and (max-width: 420px){
		.tab_aria_03 > .tab_list { flex-direction: column; }
		.tab_aria_03 > .tab_list > li { width: 100%; }
	}
}

:root[color-theme="dark"] {
	.milestones > .tab_ct > .title { background: #000;}
}

/*=============================================================
안전보건경영방침
=============================================================== */
.policy {
	.policy_top {
		position: relative; margin-bottom: 50px;
		&::after { position: absolute; display: block; content: ''; bottom: 0; left: 0; width: 100%; height: 500px; background: url('../img/sub_02_bg.png') center bottom no-repeat; z-index: -1; }
	}
	.policy_top > img { position: absolute; left: 100px; bottom: 0; animation-duration: 2s;}
	.policy_top .policy_title { position: relative; font-size: 3.0rem; font-weight: 500; text-align: center; padding: 0 0 70px 0; }
	.policy_list { 
		> ul {
			display: flex; flex-wrap: wrap; 
			> li {
				width: calc(100%/4); margin-block: 0 40px; padding: 0 20px 0 20px; border-left: 1px solid #6691bd;
				&:nth-of-type(4),
				&:nth-of-type(8) { border-right: 1px solid #6691bd; }
				> span { font-size: 5.0rem; color: #6691bd; font-weight: 500; line-height: 1.0;  display: block; margin-bottom: 20px; }
			}
		}
	}
	.policy_bottom { font-size: 2.6rem; text-align: center; margin-block: 30px; font-weight: 600; }
	@media screen and (max-width: 800px){
		.policy_top .policy_title { font-size: 2.4rem; }
		.policy_top .policy_title > br { display: none; }
	}
	@media screen and (max-width: 600px){
		.policy_list > ul > li { 
			width: 100%; 
			&:nth-of-type(4),
			&:nth-of-type(8) { border-right: none; }
			> span { font-size: 4.0rem; }
		}
		.policy_top {
			.policy_title { font-size: 2.0rem; }
			> img { left: 0; }	
		}
	}

}


/***************************************************
가치체계
***************************************************/
.valuesystem {
	> .section_area:not(:last-child) { margin-bottom: 70px; }
    > .section_area .tit { position: relative; font-size: clamp(2rem, 8vw, 4rem); color: #ff6407; text-align: center; margin-bottom: 30px;}
    > .section_area .tit::after { position: absolute; content: ''; display: block; border: 1px solid #ff6407; width: 100px; left: 50%; margin-left: -50px; margin-top: 10px; }
    > .section_area .sub_text > p { font-size: 2.4rem; text-align: center; line-height: 1.5; }

    @media screen and (max-width: 800px) {
        /* > .con_area > .tit { font-size: 2.8rem; }  */
    }
    @media screen and (max-width: 420px) {
		> .section_area.section_area:not(:last-child) { margin-bottom: 50px; }
        > .section_area .sub_text > p { font-size: 2.0rem; }
    }

    .con_03 {
		> .tit { margin-bottom: 40px; }
        > .con_area .box_area { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;}
        > .con_area .box_area > li { text-align: center; width: calc(100%/3 - 20px); padding: 30px 20px; background: #edf6fc; border-radius: 10px; box-sizing: border-box; }
        > .con_area .box_area > li > h3 { font-size: 2.2rem; font-weight: 500; color: #307ec2; background: none; padding:0; margin-bottom: 20px; }
        > .con_area .box_area > li > p { text-align: center; }

        @media screen and (max-width: 1000px) {
            > .con_area .box_area > li { width: calc(100%/2 - 10px); }
            > .con_area .box_area > li:last-child { width: 100%; }
        }
        @media screen and (max-width: 600px) {
            > .con_area .box_area > li { padding: 20px 14px; }
            > .con_area .box_area > li > p { word-break: keep-all; }
            > .con_area .box_area > li > p > br { display: none; }
        }
        @media screen and (max-width: 420px) {
            > .con_area .box_area > li { width: 100%; }
        }
    }
    .con_04 {
        > .tit { margin-bottom: 70px; }
        > .tit > p { text-align: center; font-size: 3.0rem; font-weight: 500; }
        > .con_area { display: flex; gap: 20px;}
        > .con_area .box_area { display: flex; flex-direction: column; align-items: center; width: 33%; }
        > .con_area .circle { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; 
            width: 200px; height: 200px; border-radius: 50%; outline: 14px solid rgba(255, 100, 7, 0.2); background-color: rgb(255, 100, 7); margin-bottom: 80px; }
        > .con_area .circle::after { position: absolute; content: ''; display: block; background: #ff6407; width:1px; height: 80px; left: 50%; bottom: -80px;}
        > .con_area .circle > p:first-child { font-size: 4.0rem; color: #fff; font-weight: 600; transition: all 0.3s; }
        > .con_area .circle > p:last-child  { font-size: 1.8rem; color: #fff; transition: all 0.3s;}
        > .con_area .box_area > ul { display: flex; flex-direction: column; justify-content: center; background: #fff6f0; border-radius: 10px; width: 100%; }
        > .con_area .box_area > ul > li:first-child { border-radius: 10px 10px 0 0; }
        > .con_area .box_area > ul > li:nth-child(odd)  { text-align: center; font-size: 2.2rem; font-weight: 500; padding: 16px 10px; color: #ff6407; background: rgba(255, 100, 7, 0.1);}
        > .con_area .box_area > ul > li:nth-child(even) { text-align: center; font-size: 1.6rem; padding: 20px 10px; min-height: 112px; word-break: keep-all; color: #333;}
        @media screen and (max-width: 1000px) {
            > .con_area { flex-direction: column; }
            > .con_area .circle { width: 30%; height: auto; margin-bottom: 0; border-radius: 0; outline: none; }
            > .con_area .circle::after { display: none; }
            > .con_area .box_area { flex-direction: row; width: 100%; height: 100%; align-items: stretch;}
            > .con_area .box_area > ul { width: 70%; justify-content: flex-start; border-radius: 0; }
            > .con_area .box_area > ul > li:first-child { border-radius: 0; }
            > .con_area .box_area > ul > li:nth-child(even) { min-height: auto; }
            > .con_area .box_area > ul > li:nth-child(even) > br { display: none; }
        }
        @media screen and (max-width: 600px) {
            > .tit > p { font-size: 2.0rem; }
            > .con_area .circle > p:first-child { font-size: 2.6rem; }
            > .con_area .circle > p:last-child  { text-align: center; word-break: keep-all; }
            > .con_area .box_area > ul > li:nth-child(odd) { font-size: 1.8rem; }
            > .con_area .box_area > ul > li:nth-child(even){ font-size: 1.4rem; padding: 10px; }
        }
    }
}
:root[color-theme="dark"] {
	.valuesystem .con_03 > .con_area .box_area > li { background: var(--hl-gray-10); }
}

/*=============================================================
의료원 발전사
=============================================================== */
.history {
	> .tab_ct { position: relative; }
	> .tab_ct > .title {
		position: relative; font-size: 3.0rem;
		&::before { position: absolute; display: inline-block; content: ''; bottom: -10px; left: 0; width: 100px; height: 3px; background: #ff6407; }
	}
	> .tab_ct > .sub_title { position: absolute; top: 80px; font-size: 1.8rem; margin-left: 50px; background: var(--hl-gray-10); padding: 10px 20px; }
	> .tab_ct > .year {
		position: relative; padding: 20px; margin-left: 50px; display: flex; flex-wrap: wrap; padding-top: 100px;
		> .date { position: relative; width: 16%; min-width: 100px; padding: 4px; font-size: 1.8rem;}
		> .desc { width: 84%; padding: 4px; }
		&::before { position: absolute; display: inline-block; content: ''; bottom: -10px; left: 0; width: 1px; height: 100%; border-left: 1px dashed #ff6407; }
		&:last-child::after { position: absolute; display: inline-block; content: ''; bottom: -10px; left: -15px; width: 30px; height: 2px; background: #ff6407; }
	}

	@media screen and (max-width: 800px){
		> .tab_ct > .title { 
			font-size: 2.5rem; 
			&::before { width: 70px; }
		}
		> .tab_ct > .sub_title { margin-left: 35px; }
		> .tab_ct > .year {
			flex-direction: column; margin-left: 35px;
			> .date { width: 100%; }
			> .desc { width: 100%; }
		}
	}
	@media screen and (max-width: 460px){
		> .tab_ct > .year { padding-top: 110px; }
	}
	@media screen and (max-width: 380px){
		> .tab_ct > .title { font-size: 2.0rem; }
		> .tab_ct > .sub_title { font-size: 1.6rem; margin-left: 10px; top: 60px;}
		> .tab_ct > .year { margin-left: 10px; padding-top: 90px; } 
	}
}

.his_tab_aria {
	margin-bottom: 30px; font-family: var(--font-family-base);
	.tab_list { 
		width: 100%; 
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 40px; -webkit-overflow-scrolling: touch;
		> li { scroll-snap-align: start; }
		&.set_2 { display: flex; }
		&.set_2 > li { width: 20%; min-width: 200px; }
		&.set_4 { display: grid; grid-template-columns: repeat(4, minmax(320px, auto)); }
		&.set_6 { display: grid; grid-template-columns: repeat(6, minmax(150px, auto)); }
		/* &.set_8 { display: grid; grid-template-columns: repeat(8, 1fr); word-break: keep-all; } */
		&.set_8 { display: flex; word-break: keep-all; }
		&.set_8 > li { flex-grow: 1; }
		> li > a { 
			display: flex; height: 100%; font-size: 1.7rem; font-weight: bold; color: var(--hl-gray-60); text-align: center;
			padding: 10px; border-bottom: 3px solid var(--hl-point-10); line-height: 1.3; align-items: center; justify-content: center;
			transition: all 0.3s;
			&.on,
			&:active, 
			&:hover,
			&[aria-selected="true"] {
				color: var(--hl-point);
				border-bottom: 3px solid var(--hl-point); 
			}
		}
		@media screen and (max-width: 1000px){
			width: 100%; white-space: nowrap; overflow: auto; padding-bottom: 10px; padding-right: 30px;
			&.set_8 > li { width: auto; }
		}
		@media screen and (max-width: 400px){
			&.set_4 { grid-template-columns: repeat(4, minmax(200px, auto)); white-space: initial; text-wrap: balance; }	
			
		}
	}
} 
:root[color-theme='dark'] { 
	.his_tab_aria .tab_list > li > a { 
		color: var(--hl-gray-40); border-bottom: 3px solid var(--hl-gray-20);
		&.on,
		&:active, 
		&:hover,
		&[aria-selected="true"] {
			color: var(--hl-white-fixe);
			border-bottom: 3px solid var(--hl-white-fixe); 
		}
	}
}


/*=============================================================
지속가능경영 - 경영목표
=============================================================== */
.ptp300 {
	font-family: var(--font-family-base);
	> .con { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 80px; }
	> .con .tit { display: inline-block; font-size: 2.2rem; padding: 10px 50px; border-radius: 100px; margin-bottom: 40px; }
	> .con_01 .tit { background: #ea6077; color: #fff; box-shadow: 0px 9px 20px 0px rgba(141, 30, 104, 0.3); }
	> .con_02 .tit { background: #44546a; color: #fff; box-shadow: 0px 9px 20px 0px rgba(68, 84, 106, 0.3); }
	> .con_03 .tit { background: #595959; color: #fff; box-shadow: 0px 9px 20px 0px rgba(89, 89, 89, 0.3); }
	> .con_01 > p { width: 80%; text-align: center; font-weight: 500; font-size: 2.6rem; padding: 20px; border: 1px solid #ea6077; border-radius: 100px; background: var(--hl-white); word-break: keep-all;}
	> .con::before { position: absolute; content: ''; display: block; width: 730px; height: 155px; top: 10px; left: 50%; transform: translateX(-50%); z-index: -1; }
	> .con_01::before,
	> .con_02::before,
	> .con_03::before { background: url('../img/ptp300_bg_00.png') center no-repeat; }
	> .con > .flex { display: flex; gap: 20px; width: 100%;}
	> .con > .flex > li { width: calc(100%/3 - 13px); text-align: center; }
	> .con > .flex > li > p { font-size: 2.0rem; word-break: keep-all; }
	> .con_02 > .flex > li > p:nth-of-type(1) { font-weight: 500; border-radius: 10px 10px 0 0; padding: 14px 10px; color: var(--hl-white-fixe); background: #44546a; }
	> .con_02 > .flex > li > p:nth-of-type(2) { padding: 14px 10px; border: 1px solid #44546a; border-radius: 0 0 10px 10px; background: var(--hl-white); }
	> .con_03 > .flex > li > p:nth-of-type(1) { font-weight: 500; border-radius: 10px 10px 0 0; padding: 14px 10px; color: var(--hl-white-fixe); background: #595959; }
	> .con_03 > .flex > li > p:nth-of-type(2) { padding: 14px 10px; border: 1px solid #595959; border-radius: 0 0 10px 10px; background: var(--hl-white); }
	> .con_04 .table_box { font-size: 1.8rem; }
	> .con_04 .table_box > thead > tr > th { background: var(--hl-icegray-60); color: var(--hl-white);}
	> .con_04 .table_box th { padding: 10px; background: var(--hl-icegray-10); border: 4px solid var(--hl-white);}
	> .con_04 .table_box td { border-bottom: 4px solid var(--hl-white); }
	> .con_04 .table_box .flex { display: flex; gap: 4px; }
	> .con_04 .table_box .flex > li { font-size: 1.6rem; width: calc(100% / 5 - (0.4rem * 4 / 5)); padding: 10px; align-content: center; background: var(--hl-gray-10);}
	> .con_05 > .year { position: relative; display: flex; flex-wrap: wrap; width: 100%; padding-left: 20px; }
	> .con_05 > .year > .date { position: relative; width: 12%; min-width: 100px; padding: 5px 0; font-size: 1.8rem;}
	> .con_05 > .year > .desc { width: 88%; padding: 5px 0; }
	> .con_05 > .year > .desc > ul { padding-bottom: 0; }
	@media screen and (max-width: 1024px){
		> .con::before { width: 100%; }
		> .con_01 > p { font-size: 2.2rem; }
		> .con > .flex > li > p { font-size: 1.7rem; }
	}
	@media screen and (max-width: 600px){
		> .con > .flex > li > p:nth-of-type(2) { word-break: normal; }
		> .con > .flex > li > p > br { display: none; }
		> .con_01 > p { width: 100%; font-size: 2.0rem;}
		> .con_04 .table_box { font-size: 1.6rem; }
		> .con_04 .table_box th { padding: 10px 4px; }
		> .con_04 .table_box .flex { flex-wrap: wrap; }
		> .con_04 .table_box .flex > li { font-size: 1.4rem; width: calc(100% / 3 - (0.4rem * 2 / 3)); padding: 10px 4px;} 
		> .con_05 > .year > .date { width: 100%; }
		> .con_05 > .year > .desc { width: 100%; }
	}
	@media screen and (max-width: 450px){
		> .con > .flex { flex-direction: column; }
		> .con > .flex > li { width: 100%; }
		> .con > .flex > li > p > br { display: block; }
		> .con_04 .table_box .flex > li { width: calc(100% / 2 - (0.4rem * 1 / 2));} 
	}
}

/*=============================================================
지속가능경영 - 환경경영
=============================================================== */
.ptp301 {
	font-family: var(--font-family-base);
	.con_01 > .flex { display: flex; flex-wrap: wrap; gap: 40px 20px; }
	.con_01 > .flex > .flex_list { width: calc(100%/3 - 15px); display: flex; flex-direction: column; }
	.con_01 > .flex > .flex_list > img { border-radius: 10px 10px 0 0; }
	.con_01 > .flex > .flex_list > .con_t { display: flex; flex-direction: column; text-align: center; 
		word-break: keep-all; padding: 16px; border-radius: 0 0 10px 10px; background: var(--hl-gray-10);}
	.con_01 > .flex > .flex_list > .con_t > p:nth-of-type(1) { font-size: 1.8rem; font-weight: bold; padding-bottom: 10px; border-bottom: 1px dashed #aaa;}
	.con_01 > .flex > .flex_list > .con_t > p:nth-of-type(2) { font-size: 1.7rem; padding-top: 10px; min-height: 115px; }
	@media screen and (max-width: 800px){
		.con_01 > .flex > .flex_list { width: calc(100%/2 - 10px); }
	}
	@media screen and (max-width: 500px){
		.con_01 > .flex > .flex_list { width: 100%; }
	}
}

/*=============================================================
지속가능경영 - 사회책임경영
=============================================================== */
.ptp302 {
	font-family: var(--font-family-base);
	.body_p { font-size: 1.8rem; line-height: 1.6; }
	.con_01 > .flex { display: flex; justify-content: center; justify-content: space-around; }
	.con_01 > .flex > li { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 250px; height: 250px; border: 10px solid #f9dadf; border-radius: 50%; background: var(--hl-secondary-5);}
	.con_01 > .flex > li > p { font-size: 2.2rem; font-weight: 500; }
	.con_01 > .flex > li > p > b { color: #ed6c84; font-size: 2.5rem; }

	.con_02 > .flex { display: flex; gap: 20px; }
	.con_02 > .flex > li:nth-of-type(1) > img { display: block; }
	.con_02 > .flex > li:last-child { width: 100%; font-size: 1.7rem; }
	.con_02 > .flex_02 { display: flex; gap: 20px; }
	.con_02 > .flex_02 > li { width: calc(100% / 2 - (2rem * 1 / 2));}
	.con_02 > .flex_02 > li > img { display: block; width: 100%; border-radius: 10px; }
	.con_02 > .flex_02 > li:last-child { width: 100%; font-size: 1.8rem; line-height: 1.6; }

	.con_03 > .flex { display: flex; justify-content: center; gap: 20px; }
	.con_03 > .flex > li > img { display: block; width: 100%; border-radius: 10px;}
	.list_01 > li { margin-bottom: 10px; }

	@media all and (max-width:1024px){ 
		.con_02 > .flex_02 { flex-wrap: wrap; }
	}
	@media all and (max-width:800px){ 
		.con_01 > .flex > li { width: calc((100% - 2rem) / 3); aspect-ratio: 1/1; height: auto; }
		.con_01 > .flex > li > p { font-size: 1.8rem; }
		.con_03 > .flex { flex-wrap: wrap; }
		.con_03 > .flex > li { width: calc(100% / 2 - (2rem * 1 / 2)); }
	}
	@media all and (max-width:600px){ 
		.con_01 > .flex { flex-wrap: wrap; gap: 20px; }
		.con_01 > .flex > li { width: 200px; height: 200px; }
		.con_01 > .flex > li > p { font-size: 1.6rem; }
		.con_02 > .flex { flex-direction: column; align-items: center; } 
		.con_02 > .flex_02 { justify-content: center; }
		.con_02 > .flex_02 > li > img { max-width: 100%; }
	}
	@media all and (max-width:400px){ 
		.con_02 > .flex_02 > li { width: 100%; }
		.con_03 > .flex > li { width: 100%; }
	}

	/* 그래프 */
	.chart_area { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; height: 350px; padding: 70px 20px 60px 20px; border: 4px double #ddd; }
	.chart_area > .tit { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; text-align: right; font-size: 1.3rem; width: 60px; padding-right: 10px; border-right: 1px dashed #777; }
	.chart_area .bar_color { position: absolute; left: 0; top: 0; width: 100%; background: var(--hl-gray-10); padding: 5px 5px 5px 50px; text-align: right; }
	.chart_area .bar_color > span { position: relative; margin-right: 50px; }
	.chart_area .bar_color > span::before { position: absolute; content: ''; display: block; top: 3px; left: 0; width: 20px; height: 20px; margin-left: -30px; }
	.chart_area .bar_color > span:nth-of-type(1)::before { /* background: #8a6aff; */ background: #9b5fa3;}
	.chart_area .bar_color > span:nth-of-type(2)::before { /* background: #30d97d; */ background: #ed6c84;}
	.chart_area .bar_color > span:nth-of-type(3)::before { /* background: #f5dc12; */ background: #ffcc00;}
	.chart_area .bar_color > span:nth-of-type(4)::before { /* background: #f57412; */ background: #f9a51b;}
	.chart_area .bar_color > span:nth-of-type(5)::before { /* background: #2881ff; */ background: #03b9ac;}
	.chart_area.active > ul:nth-of-type(1) .graph .graph_bar { transition-delay: 0.2s; }
	.chart_area.active > ul:nth-of-type(2) .graph .graph_bar { transition-delay: 0.3s; }
	.chart_area.active > ul:nth-of-type(3) .graph .graph_bar { transition-delay: 0.4s; }
	.chart_area.active > ul:nth-of-type(4) .graph .graph_bar { transition-delay: 0.5s; }
	.chart_area.active > ul:nth-of-type(5) .graph .graph_bar { transition-delay: 0.6s; }
	.chart_area.active .chart_box .item_con { opacity: 1; }

	.chart_box {
		display:-webkit-flex; display:-ms-flex; display:-o-flex; display:flex; flex: 1; 
		-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
		position: relative; padding: 0 40px; height:100%; border-bottom:1px solid #d3d3d3;
	}
	.chart_box .text_box { position: absolute; width: 100%; bottom: -43px; text-align: center; }
	.chart_box .item_con { flex: 1; position: relative; opacity: 0; transition: all 0.3s; }
	.chart_box .item_con .graph {
		display:-webkit-flex; display:-ms-flex; display:-o-flex; display:flex; 
		-webkit-box-orient:vertical; -webkit-box-direction:reverse; -ms-flex-direction:column-reverse; flex-direction:column-reverse; 
		position:relative; margin:0 auto; text-align: center; padding:0; width:60px; height:100%; background: var(--hl-gray-10); border-radius:3px 3px 0 0; overflow: hidden;
	}
	.chart_box .item_con .graph .graph_bar { display:block; position:relative; margin-bottom:-4px; padding-top:4px; box-sizing:content-box; width:100%; height: 0; border-radius:3px 3px 0 0; transition: all 0.5s; }
	.chart_box .item_con .graph .graph_tex { position: absolute; top: 10px; left: 10px; font-size: 1.4rem; /* writing-mode: tb-rl; */ width: 40px; z-index: 10; }
	.chart_box .graph .graph_bar.data1 { /* background:#8a6aff; */ background: #9b5fa3;}
	.chart_box .graph .graph_bar.data2 { /* background:#30d97d; */ background: #ed6c84;}
	.chart_box .graph .graph_bar.data3 { /* background:#f5dc12; */ background: #ffcc00;}
	.chart_box .graph .graph_bar.data4 { /* background:#f57412; */ background: #f9a51b;}
	.chart_box .graph .graph_bar.data5 { /* background:#2881ff; */ background: #03b9ac;}

	@media all and (max-width:1279px){ 
		.chart_box .item_con .graph { width: 35px; }
		.chart_box .item_con .graph .graph_tex { top: 10px; left: 10px; writing-mode: tb-rl; width: 20px; }
		.chart_area { overflow: auto; }
		.chart_area .bar_color { min-width: 880px; text-align: center; }
		.chart_area::-webkit-scrollbar { width: 100%; height: 4px; }
		.chart_area::-webkit-scrollbar-track { background-color: #eee; border-radius: 2px; }
		.chart_area::-webkit-scrollbar-thumb { background-color: #aab2ca; border-radius: 2px; }
		.chart_area::-webkit-scrollbar-thumb { background-color: #aab2ca; border-radius: 2px; margin: 0 20px; }
	}
	@media all and (max-width:1000px){ 
		.chart_box { gap: 6px; padding: 0 30px;}
		.chart_area > .tit { width: 60px; }
		.chart_area > .tit > span { display: inline-block; width: 60px; }
	}
}
:root[color-theme='dark'] { 
	.ptp302 .con_01 > .flex > li { background: none; }
}



/*=============================================================
지속가능경영 - 지배구조
=============================================================== */
.ptp303 {
	font-family: var(--font-family-base);
	.con_01, .con_02 { margin-bottom: 50px; }
	.con_01 > .flex { display: flex; gap: 20px; width: 100%;}
	.con_01 > .flex > li { width: calc(100%/3 - 13px); text-align: center; }
	.con_01 > .flex > li > p { word-break: keep-all; }
	.con_01 > .flex > li > p:nth-of-type(1) { font-size: 2.0rem; font-weight: 500; border-radius: 10px 10px 0 0; padding: 14px 10px; color: var(--hl-white-fixe); background: #44546a; }
	.con_01 > .flex > li > p:nth-of-type(2) { font-size: 1.8rem; padding: 14px 10px; border: 1px solid #44546a; border-radius: 0 0 10px 10px; background: var(--hl-white); }
	.con_02 > .flex { display: flex; justify-content: space-between; gap: 50px; }
	.con_02 > .flex > li { position: relative; width: calc(100%/5 - 40px); padding: 20px 10px; text-align: center; align-content: center; color: var(--hl-point-70); border-radius: 10px; border: 1px solid var(--hl-point-70); }
	.con_02 > .flex > li:not(:last-child)::after { position: absolute; content: ''; display: block; top: calc(50% - 15px); right: -40px; width: 30px; height: 30px; background: url('../img/icon_arrow_01.png') no-repeat; }
	.con_02 > .flex > li > b { font-size: 1.8rem; }
	.con_03 > .flex { display: flex; justify-content: space-between; gap: 20px; }
	.con_03 > .flex > li { width: calc(100%/5 - 16px); }
	.con_03 > .flex > li > img { display: block; margin: 0 auto; }
	.con_03 > .flex > li > p { word-break: keep-all; text-align: center; padding: 16px 10px; font-weight: 500; background: var(--hl-gray-10); }
	@media screen and (max-width: 1024px){
		.con_02 > .flex { flex-wrap: wrap; justify-content:flex-start; }
		.con_02 > .flex > li { width: calc(100%/3 - 50px); }
		.con_03 > .flex { flex-wrap: wrap; }
		.con_03 > .flex > li { width: calc(100%/3 - 15px); }
	}
	@media screen and (max-width: 600px){
		.con_01 > .flex { flex-direction: column; }
		.con_01 > .flex > li { width: 100%; }
		.con_02 > .flex > li { width: calc(100%/2 - 50px); }
		.con_03 > .flex > li { width: calc(100%/2 - 10px); }
	}
	@media screen and (max-width: 420px){
		.con_02 > .flex > li { width: 100%;}
		.con_02 > .flex > li:not(:last-child)::after { top: auto; bottom: -40px; right: 0; left: calc(50% - 15px); transform: rotate(90deg); }
	}
}
:root[color-theme='dark'] { 
	.ptp303 .con_02 > .flex > li { color: var(--hl-white-fixe); }
}

/*=============================================================
지속가능경영 - 지속가능경영 보고서
=============================================================== */
.ptp304 {
	.acco_flex { display: flex; gap: 20px; }
	.acco_flex > .left  { width: 200px; }
	.acco_flex > .right { width: 70%;}
	.acco_flex > .right > p { margin-bottom: 10px; }
	.acco_header > .btn_accordion { display: flex; justify-content: space-between; }
	.acco_header > .btn_accordion > .date { font-size: 1.6rem; font-weight: 400; color: var(--hl-gray-70); margin-right: 50px; }
	@media screen and (max-width: 600px){
		.acco_flex { flex-direction: column; align-items: center;}
		.acco_flex > .right { width: 100%; }
		.acco_header > .btn_accordion { flex-direction: column; }
	}
}

/*=============================================================
역사관 - 주춧돌과 응전의 정신
=============================================================== */
.ptp005_tab01 {
	font-family: var(--font-family-base);
	.tab_aria_03 { display: block; word-break: keep-all; }
	> .tab_ct { position: relative; }
	> .tab_ct > .tBox { 
		text-align: center; padding: 30px 10px; margin-bottom: 30px;
		.t1 { font-size: clamp(2.2rem, 6vw, 3.0rem); font-weight: 600; margin-bottom: 20px;  }
		.t2 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 500; color: var(--hl-gray-70); text-wrap: balance; word-break: keep-all;}
	}
	> .tab_ct > .title {
		position: sticky; font-size: 3.6rem; top: 45px; word-break: keep-all; padding: 10px 0; background: var(--hl-white);
		&::before { position: absolute; display: inline-block; content: ''; bottom: 0; left: 0; width: 52px; height: 3px; background: #ff6407; }
		&.size_01::before { width: 70px; }
		&:nth-of-type(1) { z-index: 1;}
		&:nth-of-type(2) { z-index: 2;}
		&:nth-of-type(3) { z-index: 3;}
		&:nth-of-type(4) { z-index: 4;}
		&:nth-of-type(5) { z-index: 5;}
		&:nth-of-type(6) { z-index: 6;}
		&:nth-of-type(7) { z-index: 7;}
		&:nth-of-type(8) { z-index: 8;}
		&:nth-of-type(9) { z-index: 9;}
		&:nth-of-type(10) { z-index: 10;}
	}
	> .tab_ct > .year {
		position: relative; padding: 30px 0 30px 20px; margin-left: 25px;
		&.size_01 { margin-left: 32px; }
		&::before { position: absolute; display: inline-block; content: ''; bottom: 0; left: 0; width: 1px; height: 100%; border-left: 1px dashed #ff6407; }
		&:last-child::after { position: absolute; display: inline-block; content: ''; bottom: 0; left: -15px; width: 30px; height: 2px; background: #ff6407; }
		.sub_title { position: relative; display: block; font-size: 2.2rem; font-weight: 500; margin-bottom: 14px; }
		.sub_title::after { position: absolute; display: block; content: '●'; left: -25px; top: 8px; font-size: 1.2rem; color: #ff6407; }
		.text { margin-bottom: 10px; }
		.img_box { display: inline-flex; flex-direction: column; max-width: 400px; text-align: center; margin-bottom: 30px;}
		.img_box > img { border-radius: 10px 10px 0 0; }
		.img_box > span { word-break: keep-all; padding: 10px; border-radius: 0 0 10px 10px; background: var(--hl-gray-20); }
		.flex__04 { display: flex; gap: 10px; flex-wrap: wrap; }
		.flex__04 .img_box { width: 290px; }
		.w_250 { max-width: 250px; }
		.w_200 > img { display: block; width: fit-content; height: 260px; }
		.w_200 > span { width: 200px; }
	}
	
	@media screen and (max-width: 800px){
		> .tab_ct > .title { 
			font-size: 2.5rem; top: 110px; padding: 15px 0;
			&::before { width: 35px; }
			&.size_01::before { width: 50px; }
		}
		> .tab_ct > .year { margin-left: 18px; }
		> .tab_ct > .year.size_01 { margin-left: 24px; }
		> .tab_ct > .year .flex__04 .img_box { margin-bottom: 10px; }
		> .tab_ct > .year .flex__04 .img_box { width: calc(100%/2 - 5px); }
	}
	@media screen and (max-width: 420px){
		> .tab_ct > .title { font-size: 2.3rem; }
		> .tab_ct > .year { padding: 30px 0 30px 14px; }
		> .tab_ct > .year .sub_title::after { left: -19px; }
		> .tab_ct > .year .w_250 { width: 100%; max-width: 100%; }
		> .tab_ct > .year .img_box { width: 100%; }
		> .tab_ct > .year .flex__04 .img_box { width: 100%; }
		.tab_aria_03 > .tab_list { flex-direction: column; }
		.tab_aria_03 > .tab_list > li { width: 100%; }
	}
}

/* 지속가능경영 - 보이지 않는 따듯한 울림 */
.ptp305 {
	> .year {
		> .tBox { font-weight: 500; }
		.quotes_01 { font-size: 2.4rem; font-weight: 500; padding-left: 10px; margin-bottom: 20px; border-left: 3px solid var(--hl-gray-30); }
		.flex_01 { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } 
		.flex_01 .bg_01 { border-radius: 10px; }

		.flex_02 { display: flex; gap: 20px; align-items: flex-start; }
		.flex_02 > img { width: 40%; }
		.flex_02 > .flex_t { width: 60%; }
		.flex_04 { display: flex; flex-wrap: wrap; gap: 20px; }
		.flex_04 > .img_box { width: calc(100% / 4 - (2rem * 3 / 4)); margin-bottom: 20px !important; max-width: 100% !important;}
		.flex_04 > .img_box > img { border-radius: 10px !important; }

		@media screen and (max-width: 1024px){
			.flex_02 { flex-direction: column; }
			.flex_02 > img { width: 50%; }
			.flex_02 > .flex_t { width: 100%; }
		}
		@media screen and (max-width: 800px){
			.flex_01 .bg_01 { display: none; }
			.flex_02 > img { width: 70%; }
			.flex_04 > .img_box { width: calc(100% / 2 - (2rem * 1 / 2)); margin-bottom: 0 !important;}
		}
		@media screen and (max-width: 420px){
			.flex_02 > img { width: 100%; }
			.flex_04 > .img_box { width: 100%; }
		}
	}
}

/*=============================================================
역사관 - 발전사
=============================================================== */
.ptp005_tab02 {
	font-family: var(--font-family-base);
	.tab_aria_03 { display: block; word-break: keep-all; }
	> .tab_ct { position: relative; }
	> .tab_ct > .tBox { font-weight: 500; margin-top: 10px;}
	> .tab_ct > .tBox_06 { 
		text-align: center; padding: 30px 10px; margin-bottom: 30px;
		.t1 { font-size: clamp(2.2rem, 6vw, 3.0rem); font-weight: 600; margin-bottom: 20px;  }
		.t2 { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 500; color: var(--hl-gray-70); text-wrap: balance; word-break: keep-all;}
	}
	> .tab_ct > .title { font-size: 3.6rem; top: 45px; word-break: keep-all; padding: 10px 0; background: var(--hl-white); }
	> .tab_ct > .year {
		position: relative; margin: 0 0 50px 10px; 
		.sub_title { position: relative; display: block; font-size: 2.2rem; font-weight: 500; padding-left: 20px; margin-bottom: 14px; }
		.sub_title::after { position: absolute; display: block; content: '●'; left: 0; top: 8px; font-size: 1.2rem; color: var(--hl-point); }
		.text { margin-bottom: 10px; }
		.img_box { display: inline-flex; flex-direction: column; max-width: 400px; text-align: center; margin-bottom: 30px;}
		.img_box > img { border-radius: 10px 10px 0 0; }
		.img_box > span { word-break: keep-all; padding: 10px; border-radius: 0 0 10px 10px; background: var(--hl-gray-20); }
		.flex__04 { display: flex; gap: 10px; flex-wrap: wrap; }
		.flex__04 .img_box { width: 290px; min-width: calc(100% / 4 - (1rem * 3 / 4));}
		.w_250 { max-width: 250px; }
		.w_220 { max-width: 220px; }
		.w_300 { max-width: 300px; }
		.w_200 > img { display: block; width: fit-content; height: 260px; }
		.w_200 > span { width: 200px; }
		.min_h70 { min-height: 70px; }
		.min_h100 { min-height: 100px; }
	}
	
	@media screen and (max-width: 800px){
		> .tab_ct > .title { font-size: 2.5rem; top: 110px; padding: 15px 0; }
		> .tab_ct > .year .flex__04 .img_box { margin-bottom: 10px; }
		> .tab_ct > .year .flex__04 .img_box { width: calc(100% / 2 - (1rem * 1 / 2));; }
	}
	@media screen and (max-width: 420px){
		> .tab_ct > .title { font-size: 2.3rem; }
		> .tab_ct > .year .flex__04 .img_box { width: 100%; }
		> .tab_ct > .year .w_250 { width: 100%; max-width: 100%; }
		> .tab_ct > .year .w_220 { width: 100%; max-width: 100%; }
		> .tab_ct > .year .w_300 { width: 100%; max-width: 100%; }
		> .tab_ct > .year .min_h70 { min-height: auto; }
		> .tab_ct > .year .min_h100 { min-height: auto; }
		> .tab_ct > .year .img_box { width: 100%; }
		.tab_aria_03 > .tab_list { flex-direction: column; }
		.tab_aria_03 > .tab_list > li { width: 100%; }
	}
}



/*=============================================================
국제교류기관
=============================================================== */
.affiliations {
	> .aff_area {
		.aff_list {
			display: flex; flex-wrap: wrap; gap: 20px;
			> li {
				display: flex; flex-direction: column; width: calc(100%/3 - 20px); border: 1px solid #ddd; justify-content: space-between;
				.btn_logo { padding: 20px; transition: all 0.3s;}
				.btn_link {
					position: relative; padding: 15px 20px; min-height: 80px; border-top: 1px dashed #ccc; transition: all 0.3s;
				}
				.btn_logo:hover, .btn_logo:active, .btn_logo:focus { padding-left: 10%; }
				.btn_link:hover, .btn_link:active { background: var(--hl-point); color: #fff; }
				.btn_link::after { position: absolute; display: block; content: ''; right: 40px; bottom: 10px; width: 30px; height: 30px; opacity: 0; transition: all 0.5s; background: url('../img/btn_right.svg') no-repeat; }
				.btn_link:hover::after, .btn_link:active::after { opacity: 1; transform: translateX(30px); }
			}
		}
		@media screen and (max-width: 1000px){
			.aff_list > li { width: calc(100%/2 - 10px); }
		}
		@media screen and (max-width: 500px){
			.aff_list > li { width: 100%; }
		}
	}
}



/*=============================================================
산하기관 ptp100
=============================================================== */
.ptp100 {
	font-family: var(--font-family-base); font-size: 1.7rem; line-height: 1.6;
	.con > p { margin-bottom: 20px; }
	.flex { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 50px;}
	.flex > img { display: block; width: 250px; border-radius: 10px; }
	.flex_01 { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-bottom: 50px; }
	.flex_01 > li { width: 35%; }
	.flex_01 > li > img { display: block; border-radius: 10px; }
	.flex_02 { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-bottom: 50px; }
	.flex_02 > li { width: calc(100% / 3 - (2rem * 2 / 3)); }
	.flex_02 > li > img { display: block; width: 100%; border-radius: 10px; }
	.flex_03 { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-bottom: 50px; }
	.flex_03 > li { width: calc(100%/4 - 15px); }
	.flex_03 > li > img { display: block; width: 100%; border-radius: 10px; }
	.flex_04 { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 50px; }
	.flex_04 > img { display: block; border-radius: 10px; }
	.flex_04 > p { margin-bottom: 20px; }
	
	@media screen and (max-width: 1024px){
		.flex_01 > li { width: calc(100%/2 - 10px); }
		.flex_04 { flex-direction: column; }
	}
	@media screen and (max-width: 600px){
		.flex { flex-direction: column; align-items: center; }
		.flex_03 > li { width: calc(100%/2 - 20px); }
	}
	@media screen and (max-width: 420px){
		.flex > img { width: 100%; }
		.flex_01 > li { width: 100%; }
		.flex_02 > li { width: 100%; }
		.flex_03 > li { width: 100%; }
	}
}
.ptp104 {
	font-family: var(--font-family-base); font-size: 1.7rem; line-height: 1.6;
	.ptp104_tit { font-size: clamp(2rem, 4vw, 3rem); word-break: keep-all; padding: 30px 0; margin-bottom: 40px; border-bottom: 4px solid var(--hl-point-20);}
	.img_area { display: flex; justify-content: center; gap: 20px; width: 70%; margin: 0 auto; }
	.img_area > .item_01 { display: flex; width: calc(70% - 10px); }
	.img_area > .item_02 { display: flex; width: calc(30% - 10px); flex-direction: column; justify-content: space-between; gap: 10px;  }
	.img_area > ul > li > img { display: flex; border-radius: 14px; }
	
	.con_area .all_item { display: flex; gap: 20px; border-bottom: 1px solid var(--hl-gray-20); margin-bottom: 30px; }
	.con_area .all_item:last-child { border: none; margin-bottom: 0; }
	.con_area .all_item .left  { width: 25%; }
	.con_area .all_item .right { width: 75%; }
	.con_area .all_item .right li:nth-of-type(2) { display: flex; gap: 20px; margin: 20px 0 30px 0;}
	.con_area .all_item .right li:nth-of-type(2) > img { width: calc(100%/2 - 10px); border-radius: 10px; }

	@media screen and (max-width: 1024px){
		.img_area { width: 100%; }
	}
	@media screen and (max-width: 600px){
		.img_area { flex-direction: column; }
		.img_area > .item_01 { width: 100%; }
		.img_area > .item_02 { width: 100%; flex-direction: row; }
		.con_area .all_item { flex-direction: column; gap: 0; }
		.con_area .all_item .left  { width: 100%; }
		.con_area .all_item .left li:nth-of-type(2) {display: none;}
		.con_area .all_item .right { width: 100%; }
	}
	@media screen and (max-width: 420px){
		> .img_area > .item_02 { flex-direction: column; gap: 20px; }
		> .img_area > .item_02 > li > img { width: 100%; }
		.con_area .all_item .right li:nth-of-type(2) { flex-direction: column; }
		.con_area .all_item .right li:nth-of-type(2) > img { width: 100%; }
	}
}

/*=============================================================
건강매거진
=============================================================== */
.health_info {
	/* 검색창 */
	> .search_area { width: 100%; margin-bottom: 50px; }
	> .search_area > .sch_input { margin: 0 auto; }

	.health_con {
		--minWidth: calc(100%/4 - 20px);
		display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--minWidth)) ,1fr)); gap: 40px 20px;
		.item > a { position: relative; display: block; text-decoration: none; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: all 0.3s; }
		.item .youtube_img { position: relative; overflow: hidden; width: 100%; height: 180px; border-radius: 10px 10px 0 0; }
		.item .youtube_img::before { position: absolute; display: block; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); transition: all 0.5s; z-index: 1;}
		.item .youtube_img > img { width: 100%; height: 180px; object-fit: cover; object-position: top; transition: all 0.5s; }
		.item .t_box { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 170px; padding: 0 10px; border-radius: 0 0 10px 10px; }
		.item .t_box .t_tit { position: absolute; left: 0px; top: 0; font-size: 1.5rem; color: #fff; background: rgb(255, 100, 7); padding: 5px 10px; min-width: 80px; transition: all 0.5s; z-index: 2;}
		.item .t_box .t_tex { height: 74px; font-size: 1.8rem; font-weight: 500; margin-top: 40px; padding: 10px 0 0 0; word-break: keep-all; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
		.item .t_box .t_date { text-align: center; color: var(--hl-gray-60); padding: 20px 0; }
		.item > a:hover {
			display: block; border-radius: 10px; transform: translateY(-20px); box-shadow: 0 6px 16px rgba(0,0,0,0.15);
			/* border: 1px solid #ff6407; -webkit-box-shadow: 0 10px 30px rgba(255, 100, 7, 0.2); box-shadow: 0 10px 30px rgba(255, 100, 7, 0.2); */
			.youtube_img::before { background: rgba(0,0,0,0.0); }
			.youtube_img > img { transform: scale(120%); }
			.t_box .t_tit { min-width: 100%; }
		}
		@media screen and (max-width: 1280px) {
			grid-template-columns: repeat(3, minmax(min(100%, var(--minWidth)), 1fr)); 
		}
		@media screen and (max-width: 800px) {
			grid-template-columns: repeat(2, minmax(min(100%, var(--minWidth)), 1fr));
		}
		@media screen and (max-width: 480px) {
			grid-template-columns: repeat(1, minmax(min(100%, var(--minWidth)), 1fr)); 
		}
	}
}
:root[color-theme='dark']{
	.health_con .item .t_box { background: var(--hl-gray-10); }
}

/*=============================================================
의료원 소식
=============================================================== */
.news_info {
	.input_group > .form_select { width: 30%; }
	.table_area > .style_01 th { padding: 10px; border-left: none; }
	.table_area > .style_01 td { padding: 10px; border-left: none; }
	.table_area > .style_01 td:first-child { text-align: center; }
	.table_area > .style_01 td .num { display: none; }
	.table_area > .style_01 td .badge { margin-right: 10px; }
	.table_area > .style_01 .title a { display: block; font-weight: 500; padding: 15px 0; }
	.table_area > .style_01 .title a > img { vertical-align: middle; }
	.table_area > .style_01 .title .badge { margin-left: 0; }
	.table_area > .style_01 .date { color: var(--hl-gray-60); text-align: center; }
	.table_area > .style_01 .date span { display: inline-flex; }

	@media screen and (max-width: 800px){
		.table_area > .style_01 colgroup { display: none; }
		.table_area > .style_01 tr { display: flex; flex-direction: column; border-bottom: 1px solid var(--hl-gray-30); }
		.table_area > .style_01 th { display: none; padding: 10px; }
		.table_area > .style_01 td { display: block; width: 100%; padding: 10px 0; border-bottom: none;}
		.table_area > .style_01 .title { padding: 0; }
		.table_area > .style_01 .title a { line-height: 2.0; padding: 10px 0; }
		.table_area > .style_01 td:first-child { text-align: left; }
		.table_area > .style_01 td .num { display: inline-flex; }
		.table_area > .style_01 td .badge { min-width: 73px; text-align: center; margin-left: 0; }
		.table_area > .style_01 .date { text-align: left; }
	}
	@media screen and (max-width: 600px){
		.input_group { flex-direction: column; }
		.input_group > .form_select { width: 100%; }
		.input_group > .sch_input { width: 100%; }
	}
}
:root[color-theme='dark'] {
	.news_info .input_group > .sch_input > input  { background: var(--hl-gray); border: 1px solid #fff;}
	.news_info .table_area > .style_01 th { background-color: var(--hl-gray-10); border-bottom: 1px solid var(--hl-gray-20);}
	.news_info .table_area > .style_01 td { border-bottom: 1px solid var(--hl-gray-20); }
}

/*=============================================================
입찰공고
=============================================================== */
.notice_info {
	.input_group > .form_select { width: 30%; }
	.input_group > .btn_flex { display: flex; justify-content: flex-end; width: 20%; }
	.table_area .align_01 > tr > td { padding: 10px; }
	.table_area .align_01 > tr > td:nth-of-type(1),
	.table_area .align_01 > tr > td:nth-of-type(2),
	.table_area .align_01 > tr > td:nth-of-type(4),
	.table_area .align_01 > tr > td:nth-of-type(5) { text-align: center; }
	.table_area .align_01 > tr > .title > a { display: flex; padding: 10px; }
	/* 공고마감일때 */
	.table_area tr.dim { color: var(--hl-gray-50); background: var(--hl-gray-5);}
	.table_area tr.dim .date { color: var(--hl-gray-50); }
	@media screen and (max-width: 800px){
		.table_area .align_01 > tr > .title { padding: 0; }
	}
	@media screen and (max-width: 600px){
		.input_group { flex-direction: column; }
		.input_group > .form_select { width: 100%; }
		.input_group > .sch_input { width: 100%; }
		.input_group > .btn_flex { width: 100%; }
		.table_area .align_01 > tr > td { padding: 20px 6px; }
	}
}
:root[color-theme='dark'] {
	.notice_info .input_group > .sch_input > input  { background: var(--hl-gray); border: 1px solid #fff;}
	.notice_info .table_area > .style_01 th { background-color: var(--hl-gray-10); border-bottom: 1px solid var(--hl-gray-20);}
	.notice_info .table_area > .style_01 td { border-bottom: 1px solid var(--hl-gray-20); }
}



/*=============================================================
공통 - 공지사항 상세페이지 
=============================================================== */
.news_detail {
	font-family: var(--font-family-base);
	.detail_title { padding: 20px 0; border-top: 2px solid var(--hl-gray-80); border-bottom: 1px solid var(--hl-gray-80);}
	.detail_title > .tit { margin-bottom: 16px; }
	.detail_title > .info { display: flex; }
	.detail_con { 
		padding: 50px 0; border-bottom: 2px solid var(--hl-gray-80);
		.center{ text-align: center;}
		.skip,.accessibility { position: absolute; top: 0; left: 0; padding: 0; margin: 0; border: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; font: 0/0 Dotum;line-height: 0; display: none;}
		.detail_con dl, ol, ul, li { list-style: inherit; }
		.detail_con a > img { display: inline-block; }
		.point { color:#5c78e5; font-weight: 500; }
		.point1 { color:#1c5f80; display: inline-block; width: 75px; letter-spacing: -0.1em; }
		.point2 { color:#f85100; }
		.point3 { color:#5c78e5; } 
		.point4 { color:#d90036; }
	}
	/* 한림 IDEA PLATFORM */
	.detail_title > .info > .qa_flex { display: flex; flex-wrap: wrap; gap: 20px; }
	.detail_con .qa_con .q_box { font-size: 1.7rem; line-height: 1.7; margin: 0 0 50px 10px; }
	.detail_con .qa_con .a_box { font-size: 1.7rem; line-height: 1.7; margin-left: 10px; padding: 20px; border-radius: 10px; background: var(--hl-icegray-5);}
	/* End - 한림 IDEA PLATFORM  */
	.detail_file { padding: 20px; background: var(--hl-gray-10); border-bottom: 2px solid var(--hl-gray-80);}
	.detail_file > .file_list > li { margin-bottom: 10px; }
	.page_list { margin: 30px 0; }
	.page_list .prev { display: flex; border-top: 1px solid var(--hl-gray-20); border-bottom: 1px solid var(--hl-gray-20); font-size: 1.8rem; } 
	.page_list .next { border-top: none; } 
	.page_list .prev > b { display: inline-flex; justify-content: center; width: 8rem; padding: 15px; }
	.page_list .prev > a { display: block; width: 90%; padding: 15px; }
	.page_list .prev > a:hover { text-decoration: underline; }

	@media screen and (max-width: 800px){
		.detail_file > .file_list > li > a { height: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 10px 40px 10px 10px; white-space: initial;}
	}
	@media screen and (max-width: 500px){
		.btn_area > .btn { width: 50%; }
		.detail_con .qa_con .q_box { font-size: 1.6rem; }
		.detail_con .qa_con .a_box { font-size: 1.6rem; padding: 10px; }
	}
	@media screen and (max-width: 360px){
		.detail_title > .info { font-size: 1.4rem; }
	}
	:root[color-theme="dark"] {
		.detail_con table th { color: var(--hl-white); }
		.detail_con table td { color: var(--hl-white); }
	}
	
}


/*=============================================================
자선진료사업
=============================================================== */
.establish {
	> .flex { display: flex; gap: 20px; }
	> .flex > .con_left { width: 300px; }
	> .flex > .con_right { width: auto; }
	@media screen and (max-width: 800px){
		> .flex { flex-direction: column; }
		> .flex:nth-of-type(1) { flex-direction: column-reverse; }
	}
} 

/*=============================================================
한림인민원발급서비스
=============================================================== */
.hallym_service { 
	> .tab_aria_03 { display: block !important; }
	> .tab_aria_03 .tab_list > li { width: calc(100%/4); }
	.table_area .best_list { display: flex; align-items: flex-start;}
	.table_area .best_list > img { margin: 2px 5px 0 0; }
}
.pcview { display: inline-block; }
.moview { display: none;}

@media screen and (max-width: 800px){
	.hallym_service > .tab_aria_03 .tab_list > li { width: calc(100%/2); }
	.pcview {display: none; }
	.moview { display: inline-block;}
}

/*=============================================================
국제학술심포지엄_사전등록
=============================================================== */
.tab_aria_06 {
	margin-bottom: 10px;
	> ul { 
		width: 100%; display: flex; flex-wrap: wrap;
		> li { 
			text-align: center; margin: 0 -1px -1px 0;  border: 1px solid #ddd; 
			> a {
				position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; 
				font-size: 2.0rem; color:var(--hl-text); font-weight: 500; text-align: center; padding: 14px 30px; transition: all 0.3s;
				&.on,
				&:active, 
				&:hover,
				&[aria-selected="true"] {
					background: var(--hl-point); color: var(--hl-white-fixe);
				}
				&.on:focus {
					outline-offset: -0.4rem;
					outline: 2px solid var(--hl-white-fixe);
				}
			}
		}
	}
} 

.confirm_01 {
	margin: 30px 0; border-top: 2px solid var(--hl-gray-50); border-bottom: 2px solid var(--hl-gray-50);
	> dl { 
		display: flex; align-items: center;
		> dt { display: flex; width: 25%; height: 70px; text-align: center; align-items: center; justify-content: center; border-bottom: 1px solid var(--hl-icegray-20); background: var(--hl-icegray-5); }
		> dd { display: flex; align-items: center; width: 75%; height: 70px; padding: 10px; border-bottom: 1px solid var(--hl-icegray-20); }
		> dd > input { min-width: 300px; }
		&:last-child > dt { border-bottom: none; }
		&:last-child > dd { border-bottom: none; }
	}
	@media screen and (max-width: 600px) {
		> dl { flex-direction: column; align-items: flex-start; }
		> dl > dt { width: 100%; height: 56px; border-bottom: none; }
		> dl > dd { width: 100%; }
		> dl > dd > input { width: 100%; min-width: auto;}
	}
}

.flex_right { display: flex; flex-wrap: wrap; justify-content: flex-end; }

/* 사전등록 - type1 */
.table_area {
	.type1 .flex_add input { margin-bottom: 10px; }
	.type1 .flex { display: flex; gap: 10px; }
	.type1 tr th { width: 25%; }
	.type1 .input_group > .form_select { width: 120px; }
	.type1 .input_group > input { width: 120px; }
	.type1 .chk_area { width: 100%; display: flex; flex-wrap: wrap; gap: 20px; }

	@media screen and (max-width: 600px){
		.type1 tr th { display: block; width: 100%; }
		.type1 tr td { display: block; width: 100%; border-left: none; padding-bottom: 20px;}
		.type1 tr td > input { width: 100%; }
		.type1 .flex_add { display: flex; flex-wrap: wrap; gap: 10px;}
		.type1 .flex_add input { width: calc(100%/2 - 5px); margin-bottom: 0; }
		.type1 .flex_add input:nth-of-type(3),
		.type1 .flex_add input:nth-of-type(4) { width: 100%; }
		.type1 .flex_add > br { display: none; }
		.type1 .flex_tel { display: flex; justify-content: space-between; }
		.type1 .flex_tel input { width: calc(100%/3 - 20px);}
	}
	@media screen and (max-width: 420px){
		.type1 .input_group > .form_select { width: auto; }
		.type1 .flex_tel input { width: calc(100%/3 - 6px); }
	}
}


/*=============================================================
한림IDEA PLATFORM
=============================================================== */
.btn_like { display: inline-flex; }
.btn_like > button { width: 28px; height: 24px; display: block; font-size: 11px; color:#fff; padding-top: 1px; background: url('../img/icon_like_n.png') no-repeat;}
.btn_like > span { font-weight: 500; cursor: pointer; }

/* 파일첨부 */
.file_upload_con { display: flex; align-items: center; width: 100%; gap: 10px;}
.file_upload_con > input[type="file"] { display: none; }
.file_upload_con .file_name { flex-grow: 1; padding: 5px 14px; line-height: 40px; height: 50px; border-radius: 8px; background: var(--hl-icegray-10); overflow: hidden; } 
.guidelines { display: block; width: 100%; }

@media screen and (max-width:500px) { 
	.file_upload_con { flex-direction: column; align-items: flex-end; }
	.file_upload_con .file_name { width: 100%; }
}

/*=============================================================
한림모바일 앱
=============================================================== */
/* 고객가이드 앱 */
.tab_aria_07 {
	margin-bottom: 50px;
	> ul { 
		width: 100%;
		display: flex; flex-wrap: wrap;
		&.list__2 > li { width: calc(100%/2); }
		&.list__3 > li { width: calc(100%/3); }
		&.list__4 > li { width: calc(100%/4); }
		&.list__5 > li { width: calc(100%/5); }
		&.list__6 > li { width: calc(100%/6); }
		> li { 
			text-align: center; margin: 0 -1px -1px 0;  border: 1px solid #ddd; 
			> a {
				position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; 
				font-size: 2.0rem; color:var(--hl-text); font-weight: 500; text-align: center; word-break: keep-all; padding: 14px 10px; transition: all 0.3s;
				&.on,
				&:active, 
				&:hover,
				&[aria-selected="true"] {
					background: var(--hl-point); color: var(--hl-white-fixe);
				}
				&.on:focus {
					outline-offset: -0.4rem;
					outline: 2px solid var(--hl-white-fixe);
				}
			}
		}
		@media screen and (max-width: 800px){
			&.list__4 > li { width: calc(100%/2); }
			&.list__5 > li,
			&.list__6 > li { width: calc(100%/3); }
		}
		@media screen and (max-width: 420px){
			&.list__3 > li,
			&.list__4 > li { width: 100%; }
			&.list__3 > li > a ,
			&.list__4 > li > a { font-size: 1.8rem; padding: 10px 5px; }
			&.list__5 > li,
			&.list__6 > li { width: calc(100%/2); }
		}
	}
} 

.ptp408_tab01 {
	font-family: var(--font-family-base);
	.flex_icon { display: flex; align-items: center; gap: 15px; }
	> .flex_01 { display: flex; justify-content: space-between; }
	> .flex_01 > .tBox { width: calc(100%/2 - 10px); background: var(--hl-gray-10); }
	> .flex_01 > .tBox > .tit { font-size: 1.8rem; font-weight:500; padding: 10px 0; margin-bottom: 10px; border-bottom: 1px dashed var(--hl-icegray-20); }
	> .con_01:not(:last-child) { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px dashed var(--hl-gray-30); }
	> .con_01 > .flex_02 { display: flex; justify-content: space-between; gap: 20px; }
	> .con_01 > .flex_02 > .left { min-width: 270px; width: 22%; }
	> .con_01 > .flex_02 > .right { width: 77%; font-size: 1.7rem;}
	> .con_01 > .flex_02 > .right > ul { padding: 15px; margin-bottom: 20px; border-radius: 10px; background: var(--hl-gray-10);}

	@media screen and (max-width: 600px) {
		> .flex_01 { flex-direction: column; }
		> .flex_01 > .tBox { width: 100%;}
		> .con_01 > .flex_02 > .left { display: none; }
		> .con_01 > .flex_02 > .right { width: 100%; }
	}
}


/*=============================================================
회원가입 - 5개병원 회원가입 - 사용하지 않음
=============================================================== */
.hospital_area {
	--minWidth: calc(100%/5 - 20px);
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--minWidth)) ,1fr));  gap: 2rem; 
	> .link { display: flex; flex-direction: column; gap: 10px; background: var(--hl-gray-10); padding: 10px; border-radius: 14px; }
	> .link > .photo { width: 220px; height: 190px; overflow: hidden; border-radius: 10px; }
	> .link > .photo > img { width: 100%; aspect-ratio: 16/14; object-fit: cover; transition: all 0.3s; }
	> .link > h3 { text-align: center; font-size: 2.0rem; padding: 10px 0;}
	> .link > .hospi_add { min-height: 5rem; }
	> .link > .btn { width: 100%; }
	@media screen and (max-width: 1280px) {
		grid-template-columns: repeat(3, minmax(min(100%, var(--minWidth)), 1fr)); 
		> .link > .photo { width: 100%; }
		> .link > .btn { max-width: 100%; }
	}
	@media screen and (max-width: 750px) {
		grid-template-columns: repeat(2, minmax(min(100%, var(--minWidth)), 1fr));
	}
	@media screen and (max-width: 520px) {
		grid-template-columns: repeat(1, minmax(min(100%, var(--minWidth)), 1fr));
		> .link > .photo { width: 240px; margin: 0 auto; }
		> .link > .hospi_add { min-height: auto; text-align: center;}
		> .link > .col_03 { text-align: center; margin-bottom: 10px; }
	}
}

/*=============================================================
한림의료헌장 
=============================================================== */
.ptp940 {
	position: relative;
	&::after { position: absolute; display: block; width: 100%; height: 300px; content: ''; left: 0; top: 25%; background: url('../img/ptp940_bg_02.png') center no-repeat; }
	> .tit { position: relative; font-size: 5.0rem; margin-bottom: 80px; }
	> .tit::before { position: absolute; display: block; width: 100%; height: 30px; content: ''; left: 0; bottom: -30px; background: url('../img/ptp940_bg_01.svg') center no-repeat; transition: all 0.3s;  }
	> .con_01 { display: flex; flex-direction: column; align-items: center; }
	> .con_01 > li { display: inline-flex; font-size: 2.8rem; font-weight: 500; padding: 0 0 10px 0; margin-bottom: 20px; word-break: keep-all;}
	> .con_01 > li:last-child { margin-bottom: 0; }
	> .con_02 { font-size: 2.1rem; word-break: keep-all; }
	> .con_03 { font-size: 1.8rem; padding: 16px; background: var(--hl-gray-10); word-break: keep-all; }
	@media screen and (max-width: 800px) {
		&::after { background-size: contain; }
		> .tit { font-size: 3.0rem; }
		> .tit::before { width: 70%; left: 15%; }
		> .con_01 > li { text-wrap: balance; font-size: 2.0rem;}
		> .con_02 { font-size: 1.8rem; }
		> .con_03 { font-size: 1.6rem; }
	}
}



/*=============================================================
개인정보처리방침 - 주요 개인정보 처리 표시 라벨링
=============================================================== */
.privacyPolicy {
	font-family: var(--font-family-base);
	.text_box { font-size: 1.7rem; padding: 20px; border:1px solid var(--hl-point); margin-bottom: 30px; background: var(--hl-white); }
	.list_box { padding: 20px; background: var(--hl-gray-10); margin-bottom: 20px; }
	.list_box > .list { display: flex; flex-wrap: wrap; gap: 10px;}
	.list_box > .list > li { width: calc(100%/2 - 5px); }
	.list_box > .list > li > a { display: flex; padding: 5px 20px; border-radius: 50px; background: var(--hl-white); transition: all 0.3s;}
	.list_box > .list > li > a:hover { text-decoration: underline; color: var(--hl-white-fixe); background: var(--hl-point);}
}

.labeling { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; margin-bottom: 30px; gap: 20px; 
	.flip { position: relative; perspective: 1100px; width: calc(100%/6 - 20px); height: 240px;}
	.card { position: relative; width: 100%; height: 100%; transition: all 0.4s; transform-style: preserve-3d;}
	.card .front, 
	.card .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden;}
	.flip:hover .card { transform: rotateY(180deg);}
	.card .front { background: #eff4ff; }
	.card .front .front_list { text-align: center; padding-top: 30px; }
	.card .front .front_list .front_title { font-size: 2.0rem; margin-top: 20px; }
	.card .back { background: #616e94; transform: rotateY(180deg); }
	.card .back .back_list { padding: 10px; color: #fff; text-align: center; font-size: 1.5rem;}
	.card .back .back_list p { margin-bottom: 10px; text-align: left; }
	.card .back .back_list p:last-child { margin-bottom: 0; }
	.card .back .back_list .back_title { font-size: 1.6rem; padding-bottom: 5px; color: #fff; border-bottom: 1px dashed #eff4ff; margin-bottom: 10px;}
}
@media all and (max-width:1280px) {
	.labeling .flip { width: calc(100%/3 - 15px); }
}

@media all and (max-width:1024px) { 
	.mt65 { margin-top: 65px; }
}

@media all and (max-width:620px) {
	.privacyPolicy .list_box { padding: 10px; }
	.privacyPolicy .list_box > .list > li { width: auto; }
	.labeling .flip { width: calc(100%/2 - 10px); }
	.labeling .flip:active .card { transform: rotateY(180deg); }
}
@media all and (max-width:420px) {
	.labeling .flip { width: 100%; }
	.privacyPolicy .list_box > .list > li { width: 100%; }
}

.agree_field { 
	margin-bottom: 30px;
	> .agreebox { padding: 10px; background: var(--hl-gray-5); border-top: 3px solid var(--hl-point-90);}
	> .agreebox > p { margin-bottom: 10px; word-break: keep-all; }
}