.main_title_box {
	width: fit-content;
	margin: 80px auto 70px;
}
.main_title_box h1 {
    font-size: 60px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
	line-height: 1;
    letter-spacing: -2px;
    color: #fb0266; 
    background: linear-gradient(to right, #fb0266 5%, #9018ce 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	margin-bottom: 18px;
	text-align: center;
}
.main_title_box h2 {
    font-size: 23px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    position: relative;
    /* text-align: center; */
    width: fit-content;
    /* display: inline-block; */
    margin: 0 auto 65px auto;
}
.main_title_box h2:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -20%;
	transform: translateX(-50%);
	width: 103%;
	height: 56%;
	background-color: #fae10f;
	z-index: -1;
}
.portfolior_menu {
	width: fit-content;
	margin: 0 auto;
	height: 50px;
	line-height: 50px;
} 
.portfolior_menu > ul {}
.portfolior_menu > ul > li {
	float: left; 
	width: fit-content;
	padding: 0 24px;
	position: relative;
	transition: all 0.3s;
}
.portfolior_menu > ul > li:after {
	content: '';
	display: block;
	width: 0;
	height: 2px;
	background-color: #ff266e;
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 80;
	transition: all 0.3s;
}
.portfolior_menu > ul > li:hover:after , .portfolior_menu > ul > li.active:after{
	width: 100%;
	left: 0;
}
.portfolior_menu > ul > li > a {
	display: block;
    font-size: 20px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    letter-spacing: -0.0375em;
	line-height: 2.4;
	position: relative;
	transition: all 300ms;
}
.portfolior_menu > ul > li > .active {
	color: #ff266e;
	font-weight: 700;
	transition: all 300ms;
}
.portfolior_menu > ul > li > a:hover {
	color: #ff266e;
	font-weight: 700;
}
.portfolior_content {
	width: 1300px;
	margin: 0 auto;
	padding: 0 130px;
	box-sizing: border-box;
}
.portfolior_content ul {
	overflow: hidden;
	padding-bottom: 11%;
}
.portfolior_content ul li {
	float: left;
	width: calc(50% - 20px);
	margin-bottom: 40px;
	position: relative;
	cursor: pointer;
	opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s 
	transform: translateY(10vw);
}


/*
.portfolior_content ul li.active {
	opacity: 1;
	transform: translateY(10vw);
}
*/


.portfolior_content ul li:after {
	content: '';
    width: 38%;
    height: 10%;
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 10px 80px 45px #000;
    z-index: -1;
    opacity: 0.8;
}

.portfolior_content ul li.active:nth-of-type(2n+1) {
	opacity: 1;
	transform: translateY(80px);
}
.portfolior_content ul li.active:nth-of-type(2n) {
	opacity: 1;
	transform: translateY(0);
}

.portfolior_content ul li:nth-of-type(2n+1) {
	margin-right: 40px;
	transform: translateY(180px);
	opacity: 0;
    -webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
    transition: opacity 0.7s, -webkit-transform 0.7s;
    transition: transform 0.7s, opacity 0.7s;
    transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s 
}

.portfolior_content ul li:nth-of-type(2n) {
	float: right;
	transform: translateY(100px);
	opacity: 0;
    -webkit-transition: opacity 0.7s, -webkit-transform 0.7s;
    transition: opacity 0.7s, -webkit-transform 0.7s;
    transition: transform 0.7s, opacity 0.7s;
    transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s 
}

.portfolior_content ul li picture {
	position: relative;
	top: 0;
	left: 0;
	width: inherit;
	height: inherit;
	overflow: hidden;
}
.portfolior_content ul li .picture_box {
	overflow: hidden;
}
.portfolior_content ul li picture img {
	max-width: 100%;
	height: auto;
    transform: scale(1.01);
	transition: all 300ms;
}
.portfolior_content ul li picture img.active {
    max-width: 100%;
    height: 100%;
	transition: all 300ms;
    transform: scale(1.05);
}
.portfolior_title {
	position: absolute;
	bottom: 5%;
	left: 5%;
	z-index: 6;
	font-size: 20px;
	font-family: 'Noto Sans KR';
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #fff;
}
.portfolior_content ul li a {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.65s;
    transition: all 0.65s;	
	opacity: 0;
}

/* -------------- each other content background color effect!! -------------- */

.list_cj {
    background: rgba(0,128,198,0.9);
}
.list_sejin {
    background: rgba(20,40,160,0.9);
}
.list_oluxe {
    background: rgba(188,148,120,0.9);
}
.list_selfinhouse {
    background: rgba(255,122,64,0.9);
}
.list_hyunwoo {
    background: rgba(49,55,153,0.9);
}
.list_artgrs {
    background: rgba(0,0,0,0.9);
}
.list_ysbarogr {
    background: rgba(15,76,129,0.9);
}
.list_mweb {
    background: rgba(241,207,74,0.9);
}
.list_allfish {
    background: rgba(23,105,255,0.9);
}
.list_turtlat {
    background: rgba(47,245,104,0.9);
}
.list_ysbaro {
    background: rgba(41,43,132,0.9);
}
.list_dyum {
    background: rgba(136,136,136,0.9);
}
.list_khd {
    background: rgba(89,77,45,0.9);
}
.list_idfarm {
    background: rgba(147,13,29,0.9);
}
.list_badai {
    background: rgba(31,225,195,0.9);
}
.list_themost {
    background: rgba(230,176,191,0.9);
}
.list_aquapalace {
    background: rgba(17,177,230,0.9);
}
.list_danaeul {
    background: rgba(64,78,45,0.9);
}
.list_friendmove {
    background: rgba(22,137,247,0.9);
}
.list_credicene {
    background: rgba(244,208,8,0.9);
}
.list_besteee {
    background: rgba(18,53,97,0.9);
}
.list_welldent {
    background: rgba(78,178,255,0.9);
}
.list_ora {
    background: rgba(175,142,186,0.9);
}
.list_chungna {
    background: rgba(0,40,66,0.9);
}
.list_skylaw {
    background: rgba(48,112,152,0.9);
}
.list_centum {
    background: rgba(105,122,133,0.9);
}
.list_badasopung {
    background: rgba(110,194,110,0.9);
}
.list_studybom {
    background: rgba(236,112,127,0.9);
}
.list_migafood {
    background: rgba(22,170,157,0.9);
}
.list_at {
    background: rgba(10,100,38,0.9);
}
.list_hillstate {
    background: rgba(93,42,42,0.9);
}
.list_micon {
    background: rgba(33,107,245,0.9);
}
.list_moncher-bebe {
    background: rgba(78,91,115,0.9);
}
.list_3daygukbap {
    background: rgba(195,22,28,0.9);
}
.list_dessert39homepage {
    background: rgba(240,83,94,0.9);
}
.list_drhitec{
    background: rgba(99,192,171,0.9);
}
.list_skmanhole{
    background: rgba(28,92,223,0.9);
}
.list_tsang{
    background: rgba(200,173,116,0.9);
}
.list_patentschool{
    background: rgba(89,89,247,0.9);
}
.list_sshine{
    background: rgba(115,190,206,0.9);
}
.list_ssocle{
    background: rgba(0,219,194,1);
}
.list_onmom{
    background: rgba(216,159,160,0.9);
}
.list_hinvest {
	background: rgba(25,39,81,0.9);
}
.list_cloverlounge {
	background: rgba(2,100,93,0.9);
}
.list_pixarmaker {
	background: rgba(0,26,222,0.9);
}
.list_dmould {
	background: rgba(104,104,104,0.9);
}
.list_itspc {
	background: rgba(150,40,229,0.9);
}
.list_s5city {
	background: rgba(226,38,106,0.9);
}
.list_haewaram {
	background: rgba(40,183,188,0.9);
}
.list_oganegolf {
	background: rgba(39,144,106,0.9);
}
.list_herebudongsan {
	background: rgba(146,0,12,0.9);
}


.ssocle_back{
	background: url('/images/main/main_portfolio_ssocle.gif') no-repeat center cover;
}


.portfolior_content ul li a.active
{
    opacity: 1;
}

/* ------- title z-index: 5 have to small z-index size important! -------- */
.portfolior_hidden {
	width: 100%;
	height: inherit;
	z-index: 5;
    transition: opacity 450ms;
    display: table;
    text-align: center;
}
.portfolior_hidden_inside {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
	height: inherit;
	position: relative;
}
.portfolior_hidden_title {
    font-family: 'Noto Sans KR';
    font-size: 40px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.35;
	width: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    top: 50%;
}
.portfolior_hidden_type {
	position: absolute;
	bottom: 5%;
	right: 5%;
	z-index: 6;
	font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.05em;
    color: #fff;
}
.portfolior_icon {
	position: absolute;
	top: 5%;
	right: 6%;
	z-index: 5;
	width: 5%;
	display: block;
}
.portfolior_icon svg {
	max-width: 100%;
	display: block;
}

/*
.list_button {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.list_button > .list_button_inside {
	width: fit-content;
	position: relative;
	margin: 0 auto;
	text-align: center;
}
.list_button > .list_button_inside > ul {
	overflow: hidden;
}
.list_button > .list_button_inside > ul > li {
	float: left;
	height: 40px;
	display: table;
}
.list_button > .list_button_inside > ul > li > a {
	display: table-cell;
	vertical-align: middle;
	border-radius: 3px;
	text-align: center;
	width: 40px;
	height: inherit;
	position: relative;
}
.list_button > .list_button_inside > ul > li > a:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background-color: #fe266e;
	width: 0;
	height: 2px;
	transition: all 0.3s;
}
.list_button > .list_button_inside > ul > li.active > a:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background-color: #fe266e;
	width: 100%;
	height: 2px;
	transition: all 0.3s;
}
.list_button > .list_button_inside > ul > li > a:hover:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background-color: #fe266e;
	width: 100%;
	height: 2px;
	transition: all 0.3s;
}
.list_button > .list_button_inside > ul > li > a > .list_button_left {
	display: block;
	width: 8px;
	height: 13px;
	line-height: 40px;
	margin: 0 auto;
	position: relative;
}
.list_button .list_button_inside > ul > li > a > .list_button_right {
	display: block;
	width: 8px;
	height: 13px;
	transform: rotate(180deg);
	line-height: 40px;
	margin: 0 auto;
	position: relative;
}

.list_button .list_button_inside > ul > li > a > .list_button_left > svg, .list_button > .list_button_inside > ul > li > a > .list_button_right > svg {
	display: block;
	max-width: 100%;
}
.list_button .list_button_inside > ul > li > a > .list_button_left > svg.active .company_button_cls-1 {
	fill: red;
}
.list_button .list_button_inside > ul > li > a > .list_button_right > svg.active .company_button_cls-1 {
	fill: red;
}
.list_button > .list_button_inside > ul > li > a > .active {
	color: #fe266e !important;
}
.list_button > .list_button_inside > ul > li > a > .list_number {
    font-size: 18px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    line-height: 40px;
	color: #1c1c1c;
	transition: all 0.3s;
	transform: translateY(-2%);
}

.list_button > .list_button_inside > ul > li > a > .list_number:after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background-color: #fe266e;
	width: 0;
	height: 2px;
	transition: all 0.3s;
}
.list_button > .list_button_inside > ul > li > a > .list_number:hover {
	color: #fe266e;
}
*/

.paging_area {
	width: fit-content;
	margin: 0 auto;
	text-align: center;
	height: 40px;
	padding: 30px 0;
}
.paging_area a, .paging_area span.first_prev, .paging_area span.last_prev {
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 3px;
	display: table-cell;
	vertical-align: middle;
	float: left;
	background-color: #fff;
	box-shadow: 0 5px 10px rgb(17 20 39 / 10%);
	font-family: 'Noto Sans KR';
	font-weight: 700;
	font-size: 16px;
	color: #1c1c1c;
	margin-right: 10px;
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
}

.paging_area span.first_prev:after, .paging_area span.last_prev:after, .paging_area a:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: -1%;
	width: 0;
	height: 2px;
	/*
	transform: translateX(-50%);
	*/
	background-color: #ff266e;
	transition: all 0.3s;
}
.paging_area span.first_prev:hover:after, .paging_area span.last_prev:hover:after, .paging_area a:hover:after {
	width: 100%;
}
.paging_area span.first_prev, .paging_area span.last_prev {
	width: 40px;
	height: 40px;
	border-radius: 3px;
	display: table-cell;
	vertical-align: middle;
	float: left;
	font-size: 16px;
	color: #1c1c1c;
	margin-right: 10px;
	transition: all 0.3s;
	position: relative;
}
.paging_area span.first_prev .first_prev_inside, .paging_area span.last_prev .last_prev_inside {
	width: 14px;
	display: table-cell;
	vertical-align: middle;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	transition: all 0.3s;
}
.paging_area span.first_prev .first_prev_inside svg, .paging_area span.last_prev .last_prev_inside svg {
	max-width: 100%;
	display: block;
}
.paging_area span.first_prev svg {
	transform: rotate(180deg);
}
.paging_area a:hover {
	color: #ff266e;
}
.paging_area span.last_prev .last_prev_inside svg g .cls-1.active {
	fill: #ff266e !important;
}
.paging_area span.first_prev .first_prev_inside svg g .cls-1.active {
	fill: #ff266e !important;
} 

.portfolior_inside_button_cls-1 {
	fill: #ff266e !important;
}
/*
.prev_btn, .next_btn {
	background-color: #ff266e !important;
	color: #fff !important;
}
*/
.current {
	background-color: #ff266e !important;
	color: #fff !important;
	transition: all 0.3s;
}



	@media screen and (max-width:1300px) {
		.main_title_box {
			margin: 7% auto 5%;
		}
		.main_title_box h1 {
			font-size: 5vw;
			letter-spacing: -0.045em;
			margin-bottom: 3.8%;
		}
		.main_title_box h2 {
			font-size: 1.7vw;
			letter-spacing: -0.0375em;
			margin: 0 auto 10% auto;
		}
		.portfolior_menu > ul > li {
			padding: 0 2vw;
		}
		.portfolior_menu > ul > li > a {
			font-size: 1.5vw;
		}
		.portfolior_content {
			width: 80%;
			padding: 0% 5%;
		}
		.portfolior_content ul {
			margin-bottom: 0;
			padding-bottom: 9%;
		}
		.portfolior_content ul li:after {
			box-shadow: 0 7px 41px 45px #000;
			bottom: 16.5%;
		}

		.portfolior_content ul li:nth-of-type(2n) {
			margin-bottom: 2%;
			width: calc(50% - 1%);
			transform: translateY(4.5%);
		}
		.portfolior_content ul li:nth-of-type(2n+1) {
			margin-right: 2%;
			transform: translateY(9%);
			transform: translateY(13.5%);
		}

		.portfolior_content ul li.active:nth-of-type(2n) {
			margin-bottom: 2%;
			width: calc(50% - 1%);
			transform: translateY(0);
		}
		.portfolior_content ul li.active:nth-of-type(2n+1) {
			width: calc(50% - 1%);
			margin-right: 2%;
			margin-bottom: 2%;
			transform: translateY(9%);
		}

		/*
		.portfolior_content ul li:nth-of-type(2n) {
			margin-bottom: 2%;
			width: calc(50% - 1%);
		}
		.portfolior_content ul li:nth-of-type(2n+1) {
			margin-right: 2%;
			transform: translateY(9%);
		}
		*/


		.portfolior_title {
			font-size: 1.5vw;
		}
		.portfolior_hidden_title {
			font-size: 2.8vw;
			width: 55%;
		}
		.portfolior_hidden_type {
			font-size: 1.3vw;
		}
	}

	@media screen and (max-width:1100px) {
		.portfolior_content {
			width: 100%;
			padding: 0 5%;
		}
		.portfolior_menu {
			height: 37px;
		}
		.portfolior_hidden_title {
			width: 41%;
		}
	}

	@media screen and (max-width:900px) {
		.main_title_box {
			margin: 7% auto 3%;
		}
		.main_title_box h1 {
			font-size: 4.5vw;
		}
		.main_title_box h2 {
			font-size: 1.8vw;
			margin: 0 auto 7% auto;
		}
		.portfolior_menu > ul > li > a {
			font-size: 2vw;
		}
	}

	@media screen and (max-width:800px) {
		.portfolior_menu > ul > li > a {
			font-size: 1.8vw;
		}

	}

	@media screen and (max-width:600px) {
		.main_title_box {
			margin: 30vw auto 6vw;
		}
		.main_title_box h1 {
			font-size: 8.5vw;
			margin-bottom: 2.7vw;
		}
		.main_title_box h2 {
			font-size: 3.5vw;
			margin: 0 auto 7vw auto; 
		}
		.portfolior_menu > ul > li > a {
			font-size: 3vw;
		}
		.portfolior_content ul li.active {
			float: none;
			margin-right: 0;
			margin-bottom: 5%;
			width: 100%;
		}


		/*
		.portfolior_content ul li:nth-of-type(2n) {
			margin-bottom: 2%;
			width: calc(50% - 1%);
			transform: translateY(4.5%);
		}
		.portfolior_content ul li:nth-of-type(2n+1) {
			margin-right: 2%;
			transform: translateY(9%);
			transform: translateY(13.5%);
		}

		.portfolior_content ul li.active:nth-of-type(2n) {
			margin-bottom: 2%;
			width: calc(50% - 1%);
			transform: translateY(0);
		}
		.portfolior_content ul li.active:nth-of-type(2n+1) {
			width: calc(50% - 1%);
			margin-right: 2%;
			margin-bottom: 2%;
			transform: translateY(9%);
		}
		*/


		.portfolior_content ul li.active:nth-of-type(2n) {
			width: 100%;
			float: none;
			transform: translateY(0);
		}
		.portfolior_content ul li.active:nth-of-type(2n+1) {
			width: 100%;
			margin-right: 0;
			transform: translateY(0);
		}



		.portfolior_title {
			font-size: 3.5vw;
			width: 55%;
		}
		.portfolior_hidden_title {
			font-size: 7vw;
			width: 50%;
		}
		.portfolior_hidden_type {
			font-size: 3vw;
			font-weight: 700;
		}

		.paging_area span.first_prev, .paging_area span.last_prev, .paging_area a {
			width: 35px;
			height: 35px;
			line-height: 35px;
			margin-right: 6px;
		}
		.paging_area span.first_prev .first_prev_inside, .paging_area span.last_prev .last_prev_inside {
			width: 11px;
		}
		.paging_area {
			padding: 5px 0;
		}
	}

	@media screen and (max-width:450px) {
		.portfolior_title {
			font-size: 4vw;

		}
		.portfolior_hidden_type {
			font-size: 3.2vw;
			font-weight: 700;
		}
		.main_title_box h1 {
			font-size: 9vw;
		}
		.portfolior_menu {
			height: 40px;
			line-height: 40px;
		}
		.portfolior_menu > ul > li > a {
			font-size: 3.5vw;
		}
		.portfolior_content ul li:after {
			box-shadow: 0 6px 33px 45px #000;
			bottom: 19.5%;
			width: 40%;
		}	
	}

	@media screen and (max-width:400px) {
		.main_title_box {
			margin: 36vw auto 6vw;
		}
		.main_title_box h2 {
			font-size: 4vw;
		}
		.portfolior_menu {
			height: 35px;
		}
		.portfolior_menu > ul > li > a {
			font-size: 3.9vw;
		}
		.portfolior_hidden_title {
			width: 61%;
		}
	}

	@media screen and (max-width:350px) {
		.portfolior_content ul {
			padding-bottom: 11%;
		}
		.paging_area span.first_prev, .paging_area span.last_prev, .paging_area a {
			width: 30px;
			height: 30px;
			line-height: 30px;
			margin-right: 4px;
		}
	}