@charset "euc-kr";
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');

/********************************************************************************************************************************
* Basic SET
********************************************************************************************************************************/

/*----- bootstrap Reset ----------------------------------------*/
/* ¹ÝÀÀÇü ²ô±â */
.container {
	position: relative;
	width: 1200px !important;
	min-width: 1200px !important; max-width: none !important;
	padding: 0;
/*	border-left: 1px dotted red; border-right: 1px dotted red;	*/
	}
header, article, footer {min-width: 1200px !important; max-width: none !important; padding: 0;}

/*----- modal css Reset -----*/
/*
¸ð´Þâ bg ½ºÅ©·Ñ¹Ù ³ª¿À°Ô
.modal-backdrop {overflow-y: scroll !important;}
*/
.modal-dialog {bottom: 0; min-height: 93%; margin: 1.5em auto;}
.modal-open .modal {background: rgba(0,0,0, 0.1);}
.modal-wp {
	position: relative; bottom: 0;
	width: 1220px; min-height: 100%;
	margin-left: -302px;
	}

.modal-content {position: absolute; top: 0; bottom: 0;}
	.modal-content .modal-header {
		height: 40px;
		padding: 5px 20px 0 0;
		border: none;
		}
	.modal-content .modal-header button.close {
		display: inline-block;
		position: absolute; top: -16px; right: -15px;
		width: 44px; height: 44px;
		margin: 0 0 0 0; padding: 0 0 2px 2px;
		font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important;
		font-size: 34px; color: #fff; line-height: 0px; font-weight: 300;
		border-radius: 100%;
		background-color: #000 !important;
		outline: none;
		opacity: 1;
		transition: all 0.3s;
		}
	.modal-content .modal-header button.close:hover {background-color: #ff643c !important;}

.modal-body {
	position: relative; bottom: 0;
	width: 100%; min-height: 100%;
	margin: 0 auto; padding: 0 2px 5px 0;
	background: #fff;
	overflow: hidden;
	}
	.modal-body iframe {position: absolute; top: 0; bottom: 0; width: 100%; min-height: 100%;}


/*----- modal contents Css Set -----*/
.cnt-field .top {
	position: relative;
	margin: 0 0 50px 0; padding: 0 0 20px 0;
	border-bottom: 1px dotted #777;
	}
	.cnt-field .top .title {
		display: block;
		position: relative;
		margin: 0 0 35px 0; padding: 0 0 0 0px;
		font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important;
		font-size: 34px; letter-spacing: -1.5px; line-height: 1.3em; font-weight: 600;
		}
		.cnt-field .top .title::before {
			content: "";
			display: none;
			position: absolute; top: 22px; left: 0;
			width: 3px; height: 32px;
			margin: -12px 0 0 0;
			background: #2f2e2e;
			}
	.cnt-field .top .etc {
		position: relative;
		font-size: 110%; color: #888; font-weight: normal;	
		}
		.cnt-field .top .etc .origin {color: #666;}
		.cnt-field .top .etc h6 {
			display: block;
			margin: 0 0 10px 0;
			font-weight: normal;
			}
		.cnt-field .top .etc.press h6 {margin-bottom: 0px;}
		.cnt-field .top .etc h6 span.ps { vertical-align: top;}
		.cnt-field .top .etc .count strong {color: #444;}
		.cnt-field .top .etc .count i {margin: 0 6px 2px 0; color: #db4545; vertical-align: text-bottom;}
		.cnt-field .top .tag {margin: 20px 0 0 0;}
		.cnt-field .top .tag .keyword-sch {
			display: inline-block;
			position: relative;
			height: 26px;
			margin: 0 6px 6px 0; padding: 0 15px;
			font-size: 12px; color: #fff; letter-spacing: -0.5px; line-height: 26px; text-align: center; text-decoration: none !important;
			border-radius: 40px;
			background: #91979e;
			}
		.cnt-field .top .etc .print-Btn {
			display: inline-block;
			position: absolute; top: 10px; right: 0;
			height: 28px;
			padding: 0 10px;
			font-size: 13px; color: #fff; line-height: 28px; text-decoration: none !important; text-align: center;
			border-radius: 3px;
			background: #333;
			}



/********************************************************************************************************************************
* °øÅë
********************************************************************************************************************************/
.comm-frame {clear: both; position: relative; min-width: 1200px; padding: 90px 0 120px 0;}

/*----- title -----*/
.comm-frame .title {position: relative; margin: 0 0 45px 0; padding: 0; text-align: center; z-index: 1;}
	.comm-frame .title .icon {
		display: block;
		margin: -35px auto -5px auto;
		width: 43px; height: 43px;
		font-size: 1px; color: transparent; line-height: 1px;
		background: url('../../images/tit_ic2.png') no-repeat 0 0;
		}
	.comm-frame .title.white .icon	{background-image: url('../../images/tit_ic.png');}

	.comm-frame .title h1 {
		display: inline-block;
		position: relative;
		font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic';
		font-size: 44px; color: #111; letter-spacing: -3px; line-height: 130%; font-weight: 500;
		}
		.comm-frame .title.white h1, .comm-frame .title.white2 h1 {color: #fff;}
		.comm-frame .title strong {display: inline-block; margin: 0 0 0 2px; font-weight: 700;}
		.comm-frame .title h1 .eng {display: inline-block; margin: 0 0 2px 0; font-size: 120%; letter-spacing: -3px; vertical-align: text-bottom;}

		.comm-frame .title.sign h1::before {
			content: "[";
			position: absolute; top: 2px; left: -30px;
			font-size: 130%; color: #e94e1b; font-weight: 700;
			}
		.comm-frame .title.sign h1::after {
			content: "]";
			position: absolute; top: 2px; right: -30px;
			font-size: 130%; color: #e94e1b; font-weight: 700;
			}

	.comm-frame .title h2 {
		display: block;
		margin: 5px 0 0 0; padding: 0 0 10px 0;
		font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic' sans-serif;
		font-size: 16px; color: #888; letter-spacing: 0px; line-height: 140%; font-weight: 300;
		}
		.comm-frame .title.white h2 {color: rgba(255,255,255, 0.7);}

/*----- sub title -----*/
.comm-frame .sub-title {
	clear: both;
	position: relative;
	margin: 0 0 14px 0;
	font-family: 'Noto Sans KR', 'Noto Sans', '¸¼Àº °íµñ', 'Malgun Gothic';
	font-size: 32px; color: #444; letter-spacing: -1.5px; line-height: 120%; font-weight: 700;
	overflow: hidden;
	}
	.comm-frame .sub-title.line {margin-bottom: 20px; padding: 0 0 12px 0; border-bottom: 2px solid #6060b8;}

	.comm-frame .sub-title .more {
		clear: both;
		display: inline-block;
		position: absolute; top: 18px; right: 2px;
		height: 20px;
		font-size: 14px; color: #999; letter-spacing: -0.5px; line-height: 20px; font-weight: 400; text-decoration: none;
		}
	.comm-frame .sub-title .more i {margin: 0 5px 2px 0; font-size: 13px; color: #aaa; vertical-align: text-bottom; transition: all 0.3s;}
	.comm-frame .sub-title .more:hover, .comm-frame .sub-title .more:hover i {color: #5f64ea;}

	.comm-frame .sub-title span.stxt {
		display: inline-block;
		position: relative;
		margin: 0 0 0 18px;
		font-size: 13px; color: #999; letter-spacing: -0.2px; line-height: 150%; font-weight: 400;
		}
		.comm-frame .sub-title span.stxt:before {content: ""; position: absolute; top: 5px; left: -12px; width: 1px; height: 10px; background: #d7d7d7;}



/********************************************************************************************************************************
* Main Visual
********************************************************************************************************************************/
.tax-Banner-wp {
	position: relative; 
	min-width: 1200px !important; max-width: none !important;
	height: 980px; 
	margin: 0 0 0px 0; 
	text-align: center; 
	background: #212bff;
	overflow: hidden;
	z-index: 1;
	}

	.tax-Banner-wp h1 {position: relative; margin: 160px 0 0 0; z-index: 3;}

	/*----- Navi -----*/
	.tax-Banner-wp .navi {position: absolute; bottom: 90px; left: 50%; width: 1140px; margin: 0 auto 0 -570px; z-index: 10;}
		.tax-Banner-wp .navi ul {float: left; width: 100%;}
		.tax-Banner-wp .navi li {float: left; padding: 0 10px 20px 10px;}
			.tax-Banner-wp .navi li a {
				display: block;
				position: relative; bottom: 0;
				height: 70px;
				padding: 22px 0 0 0px;
				font-family: 'Noto Sans KR', 'Noto Sans', sans-serif;
				font-size: 21px; color: #fff; letter-spacing: -1px; line-height: 110%; font-weight: 500; text-decoration: none !important; text-align: center;
				border: 1px solid rgba(255,255,255, 0.8); border-radius: 12px;
				/*background: #fff url('../../images/navi_ic.png') no-repeat 230px center;*/
				box-shadow: 0 0 0 0 rgba(255,255,255, 0.4);
				transition: 0.2s all, box-shadow 0.3s ease-in-out;
				z-index: 11;
				}
				.tax-Banner-wp .navi li a:hover {
					bottom: 2px; 
					color: #090a7a; font-weight: 700; 
					background: #fff;					
					background-color: #fff;
					box-shadow: 0 0 0 20px transparent;
					}
				.tax-Banner-wp .navi li a.two {padding-top: 15px;}
				.tax-Banner-wp .navi li:nth-child(5) a { letter-spacing: -1.6px;}

				.tax-Banner-wp .navi li a::after {
					content: "";
					position: absolute; bottom: -13px; left: 50%;
					width: 0; height: 0;
					margin: 0 0 0 -13px;
					border: 13px solid;
					border-color: #fff transparent transparent transparent;
					transition: 0.1s ease-in-out all;
					opacity: 0;
					z-index: 10;
					}
					.tax-Banner-wp .navi li a:hover::after {bottom: -25px; transition: 0.2s ease-in-out 0.1s all; opacity: 1;}

				.tax-Banner-wp .navi li a span.num {
					display: block;
					position: absolute; top: -10px; left: -10px;
					width: 30px; height: 30px;
					padding: 0 1px 0 0;
					font-size: 13px; color: #fff; letter-spacing: -0.5px; line-height: 29px; font-weight: 500; text-align: center;
					border-radius: 100%;
					background: #e420d4;
					transition: 0.2s all;
					}
					.tax-Banner-wp .navi li a:hover span.num {color: #090a7a; background: #00d7ff;}
	
	/* video */
	.tax-Banner-wp video {
		position : absolute; bottom: 0; left: 0; right: 0;
		width : 100%; height : auto;
		z-index : 1;
		}
	.tax-Banner-wp .dot {display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0, 0.05) url('../../images//main_visual_dot3.png') repeat; z-index: 2;}
	
	@media screen and (max-width: 1280px) {
		.tax-Banner-wp video {width : 1280px; height : auto; bottom: 130px;}
		}



/********************************************************************************************************************************
* STEP1. ¿ì¸® ±â¾÷Àº ¾îµð¿¡? Áß¼Ò¡¤Áß°ß±â¾÷ ¹üÀ§ È®ÀÎÇϱâ
********************************************************************************************************************************/
section.step1-wp {background: #f0f0f0;}

	section.step1-wp .scope-list {display: table; table-layout: fixed; width: 100%; padding: 0 30px;}
		section.step1-wp .scope-list .column {display: table-cell; padding: 0 5px; vertical-align: middle;}

		section.step1-wp .scope-list a {
			display: block;
			position: relative;
			height: 205px;
			padding: 30px 0px 0px 30px;
			font-size: 22px; color: #fff; letter-spacing: -1px; line-height: 150%; font-weight: 400; text-decoration: none !important;
			background: #190fcc;
			overflow: hidden;
			}
			section.step1-wp .scope-list a::before {content: ""; display: block; position: absolute; top: -100px; right: -180px; width: 400px; height: 400px; border-radius: 100%; background: rgba(255,255,255, 0.08);}
			
			section.step1-wp .scope-list a .num {
				display: block;
				margin: 0 0 15px 0;
				width: 44px; height: 44px;
				padding: 0 1px 0 0;
				font-size: 25px; color: #190fcc; letter-spacing: -2px; line-height: 43px; font-weight: 900; text-align: center;
				border-radius: 100%;
				background: #fff;
				}
			section.step1-wp .scope-list a strong {display: block; margin: 4px 0 0 0; font-size: 42px; letter-spacing: -2px; font-weight: 700;}
				section.step1-wp .scope-list a strong u {color: #2df6f4; text-decoration: none;}
			
			section.step1-wp .scope-list a .pic {position: absolute; top: 52px; right: 40px;}



/********************************************************************************************************************************
* STEP2. Àû¿ë¹ÞÀ» ¼ö ÀÖ´Â ¼¼Á¦Áö¿øÁ¦µµ È®ÀÎÇϱâ
********************************************************************************************************************************/
section.step2-wp {padding-bottom: 80px; background: url('../../images/step2_bg.png') no-repeat 0 0, url('../../images/step2_bg2.png') no-repeat right bottom; background-color: #423ef9;}
	section.step2-wp .container {position: relative; z-index: 2;}
	section.step2-wp .title {margin-bottom: 60px;}
	
	/*----- °¨¸é ¹èÁ¦ µî Âü°í»çÇ× -----*/
	section.step2-wp .system-box {position: relative; margin: 0px 0 12px 0; padding: 20px 30px 14px 30px; border-radius: 12px; background: #fff;}
		section.step2-wp .system-box h1 {
			position: absolute; top: -24px; left: 50%; 
			width: 360px; height: 48px;
			margin: 0 0 0 -180px;
			font-size: 34px; color: #ffff; letter-spacing: -1.5px; line-height: 46px; font-weight: 700; text-align: center;
			border-radius: 48px;
			background: linear-gradient(90deg, #d211e5 0%, #0c0ead 70%);
			}

		section.step2-wp .system-box li a {
			display: block;
			padding: 0 0 0 35px;
			font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important;
			font-size: 24px; color: #333; letter-spacing: -0.5px; line-height: 150%; font-weight: 600;
			white-space: nowrap; text-overflow: ellipsis;
			background: url('../../images/speech_bubble.png') no-repeat 0 8px;
			transition: 0.2s all;
			}
		section.step2-wp .system-box li a:hover {color: #2a25fd; text-decoration: none;}
		
		section.step2-wp .system-box li span {display: inline-block; position: relative; z-index: 2;}
		section.step2-wp .system-box li span::after {
			content: "";
			display: block;
			position: absolute; bottom: 3px; left: 0;
			width: 100%; height: 8px;
			background: rgba(244,136,49,0.3);	
		/*	background: #fff100;	*/
			z-index: -1;
			}		
		section.step2-wp .system-box .system-list [data-title]:hover::before {top: 36px; left: 60px;}
		section.step2-wp .system-box .system-list [data-title]:hover::after {left: 70px;}

		section.step2-wp .guide-txt {margin: 0px 0 50px 10px; font-size: 13px; color: rgba(255,255,255, 0.8);}

	/*----- ÄÜÅÙÃ÷ List -----*/
	section.step2-wp .system-list {clear: both;}
		section.step2-wp .system-list .box {margin-bottom: 30px;}

		section.step2-wp .system-list .box h1 {
			display: block;
			margin: 0 0 10px 0;
			font-size: 30px; color: #fff; letter-spacing: -2px; line-height: 130%; font-weight: 700;
			}
			section.step2-wp .system-list .box h1 .num {
				display: inline-block;
				height: 28px;
				margin: 0 5px 5px 0px; padding: 0 9px 0 8px;
				font-size: 20px; color: #fff; letter-spacing: -1px; line-height: 26px; font-weight: 900; text-align: center; vertical-align: text-bottom;
				border-radius: 4px;
				background: #e420d4;
				}
		
		section.step2-wp .system-list .box .list {
			position: relative;
			min-height: 100%; 
			padding: 20px 35px 20px 35px; 
			border-radius: 12px; 
			background: #fff; 
			transition: 0.3s all;
			}			

			section.step2-wp .system-list .box .list li {
				padding: 0 0 0 24px;
				background-repeat: no-repeat;
				background-position: 0 8px;
				background-size: 15px 15px;
				transition: 0.2s all;
				}
				section.step2-wp .system-list .box:nth-child(1) .list li, section.step2-wp .system-list .box:nth-child(6) .list li {background-image: url('../../images/fr1_stage_ic1.png');}
				section.step2-wp .system-list .box:nth-child(2) .list li, section.step2-wp .system-list .box:nth-child(7) .list li {background-image: url('../../images/fr1_stage_ic2.png');}
				section.step2-wp .system-list .box:nth-child(3) .list li, section.step2-wp .system-list .box:nth-child(8) .list li {background-image: url('../../images/fr1_stage_ic5.png');}
				section.step2-wp .system-list .box:nth-child(4) .list li, section.step2-wp .system-list .box:nth-child(9) .list li {background-image: url('../../images/fr1_stage_ic4.png');}
				section.step2-wp .system-list .box:nth-child(5) .list li, section.step2-wp .system-list .box:nth-child(10) .list li {background-image: url('../../images/fr1_stage_ic3.png');}
				section.step2-wp .system-list .box .list li:hover {background-image: url('../../images/fr1_stage_ic_hover.png');}

				section.step2-wp .system-list .box .list li a {
					display: block;
					position: relative;
					width: 100%;
					padding: 3px 0 3px 0;
					font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important;
					font-size: 17px; color: #333; letter-spacing: -0.2px; line-height: 130%; font-weight: 400;
					white-space: nowrap; text-overflow: ellipsis;
					transition: 0.2s all;
					}
				section.step2-wp .system-list .box .list li a:hover {color: #2a25fd; text-decoration: none;}

				section.step2-wp .system-list .box .list li a .ic {
					display: none;
					position: relative;
					width: 12px; height: 12px;
					margin: 0 0 0 9px;
					vertical-align: middle;
					background: url('../../images/fr1_modal_ic2.png') no-repeat 0 0;
					background-size: 12px 12px;	
					}
				section.step2-wp .system-list .box .list li a:hover .ic {display: inline-block; animation: ic_modal_Ani 0.6s infinite;}
				@keyframes ic_modal_Ani {50% {transform: translateX(4px);}}

			section.step2-wp .system-list .box .list.half		{float: left; width: 100%;}
			section.step2-wp .system-list .box .list.half li	{float: left;	width: 50%;}
			
			/* bar */
			section.step2-wp .system-list .box .list .bar {display: block; position: absolute; top: -1px; right: -1px; width: 45px; height: 45px; border-radius: 12px; overflow: hidden;}
			section.step2-wp .system-list .box .list .bar::after {content: ""; position: absolute; top: 0px; right: -50px; width: 100px; height: 30px; background: #0c0ead; transform: rotate(45deg); transition: 0.3s all;}
				section.step2-wp .system-list .box:hover .list .bar::after {background: #e420d4;}

/* tooltip */
.system-list [data-title] {position: relative !important;}
	.system-list [data-title]:hover::before {
		content: attr(data-title);
		display: inline-block;
		position: absolute; top: 30px; left: 30px;
		max-width: 1000px;
		padding: 9px 14px 10px 14px;
		font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important;
		font-size: 13px !important; color: #fff; letter-spacing: -0.2px; line-height: 120%; font-weight: 200; white-space: normal;
		border-radius: 5px;
		background: #2929a7;	/* #352188 */
		box-shadow: 3px 3px 8px 0 rgba(0,0,0, 0.4);
		animation: data_title_Ani 0.3s linear 0.5s both;
		z-index: 10;
		}
		.system-list [data-title]:hover::after {content: ''; display: block; position: absolute; bottom: -2px; left: 40px; border: 6px solid transparent; border-bottom: 6px solid #2929a7; animation: data_title_Ani 0.3s linear 0.5s both;}

		@keyframes data_title_Ani {
			0%	 {opacity: 0;}
			100% {opacity: 1;}
			}



/********************************************************************************************************************************
* STEP3. °ü·Ã Çؼ³À» ÅëÇØ Àü¼¼Àü·« ¼¼¿ì±â
********************************************************************************************************************************/
section.step3-wp {position: relative; background: #fff url('../../images/tax_strategy_bg2.png') no-repeat 50% bottom; background-size: 100% auto;}
	
	section.step3-wp .title {margin-bottom: 55px;}

	section.step3-wp .silder-wrap {overflow: hidden;}
		section.step3-wp .silder-wrap .swiper-container {margin: 0 -20px 0 0;}
/*
		section.step3-wp .silder-wrap  .new-card-List li {background: transparent !important;}
		section.step3-wp .silder-wrap  .new-card-List li a {background: #fff !important;}
*/
		section.step3-wp .swiper-slide .kind-Icon {padding: 10px 0 0 0 !important; font-size: 9px !important; line-height: 100%;}
		section.step3-wp .swiper-slide .kind-Icon.vod {padding: 15px 0 0 0 !important;}

	/* ÆÄÀÏºÏ */
	section.step3-wp .sub-title.filebook {margin-top: 0px;}

	section.step3-wp .filebook-wp {
		clear: both;
		margin: 0 0 10px 0; padding: 30px 15px 40px 15px;
	/*	border: 1px solid #ddd;	*/
		background: #fff;
		}
		section.step3-wp .filebook-wp ul {float: left; width: 100%;}
		section.step3-wp .filebook-wp li {
			float: left;
			text-align: center;
			}
		section.step3-wp .filebook-wp a {display: block; padding: 0 30px; text-decoration: none !important;}
		
		section.step3-wp .filebook-wp .thumbs {position: relative;}
			section.step3-wp .filebook-wp .thumbs::after {
						content: "¹«·á";
						display: block;
						position: absolute; top: 0px; left: 30px;
						width: 30px; height: 30px;
						font-size: 10px; color: #fff; letter-spacing: -1px; line-height: 30px; text-align: center;
						border-radius: 100%;
						background: #e05555;
						transform: scale(1);
						box-shadow: 3px 6px 6px 0 rgba(0,0,0, 0.2);
						}
		section.step3-wp .filebook-wp .subj {
			display: -webkit-box;
			margin: 10px 0 0 0;
			font-family: 'Noto Sans KR', 'Noto Sans', sans-serif !important;
			font-size: 16px; letter-spacing: -0.3px; line-height: 140%; font-weight: 400; text-align: left;
			word-wrap: break-word; text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			transition: all 0.2s;
			}
			section.step3-wp .filebook-wp a:hover .subj {color: #5f64ea;}

		section.step3-wp .filebook-wp .etc {
			margin: 12px 0 0 0; padding: 0 4px 0 0;
			font-size: 14px; color: #777; text-align: left;
			}
			section.step3-wp .filebook-wp .etc .price {float: right;}