:root{
	--main-color:#0b43a9;
	--main-color-dark:#0d193b;
	--main-color-white:#fff;
	--main-color-black:#000;
	--main-color-lightgreen:#e8f1f1;
	--main-color-lightgreen2:rgba(26,120,116,0.2);
}

body{width:100%; font-size:20px; position:relative; letter-spacing: -1px;}
.fc01{color:var(--main-color);}
.mob_br{display:none;}
.hidden{display:none;}

/*************** header *******************/
#header{z-index:10000; position:fixed; top:0; left:0; width:100%; padding:15px 0;transition: background 0.3s ease;}
/* 스크롤 시 배경 적용 클래스 */
#header.scrolled {
  background: rgba(0, 0, 0, 0.5); /* 검은색 반투명 */
}
#header .layout{ display:flex; justify-content: space-between; align-items: center; }
#header #logo a{display:flex;  align-items: center; }
#header #logo a .logoTxt{font-size:1rem; display:flex; flex-direction: column; margin-left:15px;}
#header #logo a .logoTxt .cate{font-size:1.1rem; color:#ffcc00; margin-bottom:-5px;}
#header #logo a .logoTxt .name{font-size:1.6em; color:var(--main-color-white);}
#header #nav{ display:flex;}
#header #nav li{margin-right:30px;}
#header #nav li:last-child{margin-right:0;}
#header #nav li a{position:relative; padding:10px 20px; font-size:1.125em; white-space: nowrap; color:var(--main-color-white);}

#header .header_right{display:flex; align-items: center; background: var(--main-color); padding:10px 30px 5px; border-radius: 50px;}
#header .header_right .number{display:flex; flex-direction: column; align-items: center;}
#header .header_right .number p{background:url(../img/fixed_btn01.png) no-repeat; background-size: 14%; background-position: left center;}
#header .header_right .number span{font-size:0.8em; color:rgba(255,255,255,0.8);}
#header .header_right .number p{font-size:1.2em; color:var(--main-color-white); font-weight:bold; padding-left:25px;}
#header .mob_nav .sns{display:none;}
.main{}
.section{position:relative; width:100%; overflow: hidden;}



/*************** 고정메뉴 *******************/
.fixed{z-index:10000; position:fixed; bottom:0; left:0; background: url(../img/fixed_bg.jpg) no-repeat; background-size:cover; width:100%; padding:15px 0 10px;} 
.fixed .layout{position:relative; display:flex; justify-content: space-between; align-items: center;}
.fixed .layout .text_l{position:relative;}
.fixed .layout .text_l .top{position:absolute; top:-40px; left:0;   animation: floatUpDown 2s ease-in-out infinite;}
.fixed .layout .text_l .top span{position:relative;  background:#0069e8; border-radius: 50px; padding:10px; display:inline-block;}
.fixed .layout .text_l .top span:before{position:absolute;bottom:-16px; left:80px; content:''; width:0; height:0; border-top:8px solid #0069e8; border-right:8px solid #0069e8; border-bottom:8px solid transparent;  border-left:8px solid transparent; }
.fixed .layout .text_l .bot{padding-left:100px; display: flex; flex-direction: column; align-items: flex-end;}
.fixed .layout .text_l .bot .hashtag{display:flex;}
.fixed .layout .text_l .bot .hashtag span{color:#ceecfd; margin:0 5px -10px 20px; font-size:0.9em;}
.fixed .layout .btnWrap{display:flex;}
.fixed .layout .btnWrap a[class*="btn_"]{padding:15px 25px; box-shadow: 10px 10px 10px rgba(0,0,0,0.3); border-radius: 10px;}
.fixed .layout .btnWrap .btn_01{background: #2286ff; animation: colorChange 3s ease-in-out infinite;
  transition: transform 0.2s; margin-right:20px;}
.fixed .layout .btnWrap .btn_01 span{color:var(--main-color-white);}
.fixed .layout .btnWrap .btn_01 span:before{background:url(../img/fixed_btn01.png) no-repeat; background-size: contain;}
.fixed .layout .btnWrap .btn_02 span:before{background:url(../img/fixed_btn02.png) no-repeat; background-size: contain;}
.fixed .layout .btnWrap a[class*="btn_"] span:before{position:absolute; left:0; top:50%; width:30px; height:30px; transform: translateY(-50%); content:'';}

@keyframes colorChange {
  0%   { background-color: #2286ff; } 
  50%  { background-color: #0057bf; } 
  100% { background-color: #2286ff; }
}

.fixed .layout .btnWrap .btn_02{background:#fae100;}
.fixed .layout .btnWrap .btn_02 span{color:var(--main-color-black);}
.fixed .layout .btnWrap a[class*="btn_"] span{padding-left:35px; position: relative;}
@keyframes floatUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}



/*************** footer *******************/
#footer{position:relative; padding:60px 0 200px; background:#102748;}
#footer .ft_logo{margin-bottom:50px;}
#footer .ft_logo img{opacity: 0.6;}
#footer ul{display:flex; flex-wrap: wrap; width:60%;}
#footer ul li{margin:0 45px 5px 0; display:flex;}
#footer ul li .tit{font-weight:bold; color:var(--main-color-white); margin-right:15px; white-space: nowrap;}
#footer ul li .cont{color:#a8b2c2;}
#footer .copyright{color:rgba(255, 255, 255, 0.3); margin-top:20px;}


.layout{width:100%; max-width:1400px; margin:0 auto;}

.fp-warning, .fp-watermark{display:none!important;}

/* sec01 */
.sec01{background:url(../img/main_bg.jpg) no-repeat; background-size: cover; height:100vh;}
.sec01 .layout{display:flex; flex-direction:column; align-items: center;     height: calc(100vh - 130px);
    justify-content: center;}
.sec01 .top{ margin-bottom:40px;background: #08244E;
background: linear-gradient(30deg,rgba(8, 36, 78, 1) 0%, rgba(11, 67, 169, 1) 100%); color:var(--main-color-white); padding:10px 15px; font-size:1.6em;}
.sec01 .slogan{display:flex; flex-direction: column;align-items: center;}
.sec01 .change{color:var(--main-color-white); margin-top:10px; text-align: center;}
.sec01 .change p{text-shadow: 10px 10px 10px rgba(0,0,0,0.3); font-size:2.5em; height:100px;}
.sec01 .change p strong{font-size:2em;}
.pd_r{display:inline-block; padding:0 10px;}

/* 초기에는 다 숨김 */
.sec01 .top,
.sec01 .slogan img {
    opacity: 0;
}
/*
.sec01 .change {
    position: relative;
    overflow: hidden;
    transform: none; 
}

.sec01 .change p {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    transform: none;
}

.sec01 .change p.active {
    opacity: 1;
    position: relative;
}*/
/* sec02 */
.sec02{display:flex; background:url(../img/lawyer_content.png) repeat-y;}
.sec02 .sec02_l{width:calc(50% - 50px);}
.sec02 .sec02_l .lawyer_img{display:flex; justify-content: flex-end; position:relative; background:url(../img/lawyer_bg.png) no-repeat; background-size:cover; overflow: hidden; padding-top:70px; border-radius: 0 0 150px 0;}
.sec02 .sec02_l .lawyer_img img{margin-right:80px;}
.sec02 .sec02_l .lawyer_img p{position:absolute; top:50px; right:-50px; transform:rotate(90deg) translateX(50%); color:rgba(255,255,255,0.5); letter-spacing: 5px; text-transform: uppercase; font-size:0.9em;}
.sec02 .sec02_l .lawyer_name{display:flex; justify-content: flex-end; margin-right:70px; align-content: center; align-items: center; margin-top:70px;}
.sec02 .sec02_l .lawyer_name .title{display:flex; flex-direction: column; justify-content: space-between; margin-right:40px;}
.sec02 .sec02_l .lawyer_name .title p{font-size:1.9em; line-height: 1.2em;     display: flex; align-items: center; justify-content: space-between;}
.sec02 .sec02_l .lawyer_name .title p.line{}
.sec02 .sec02_l .lawyer_name .title p.lineTxt .line{width:70px; height:1px; display:inline-block; background:#222;}

.sec02 .sec02_r{width:calc(50% + 100px);}
.sec02 .sec02_r .top{background:var(--main-color-white); padding:80px 0;}
.sec02 .sec02_r .top .wrap{display:flex; flex-direction: column; padding:0 100px; position:relative; margin-left:50px; background:url(../img/deco.png) no-repeat center; background-size:contain; }
.sec02 .sec02_r .top .wrap p{color:var(--main-color-dark);}
.sec02 .sec02_r .top .wrap .tit1{font-size:1.2em; text-align: center;}
.sec02 .sec02_r .top .wrap .tit2{font-size:2.2em; text-align: center;}
.sec02 .sec02_r .bot{margin:100px 0 120px 50px;}

.conLst{display:flex; flex-direction: column; margin-bottom:30px;}
.conLst li{position: relative; padding-left:15px; font-size:1.025em; margin-bottom:5px; word-break: keep-all;}
.conLst li:before{position:absolute; top:13px; width:4px; height:4px; border-radius: 30px; background:#222; content:''; left:0;}
.conLst.no_dot li{padding-left:0;}
.conLst.no_dot li:before{display:none;}


/* sec03 */
.sec03 {
  background: url(../img/js_bg.jpg) no-repeat;
  height: 100vh;
  overflow: hidden;
}
.sec03 .layout {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.sec03 .layout .sec03_l {
  display: flex;
  flex-direction: column;
  padding: 200px 0;
}
.sec03 .layout .sec03_l,
.sec03 .layout .sec03_r {
  width: 50%;
}
.sec03 .layout .sec03_l .top .fc01 {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 20px;
}
.sec03 .layout .sec03_l .top .big {
  font-size: 2.5em;
  line-height: 1.3em;
  color: var(--main-color-black);
  margin-bottom: 60px;
}
.sec03 .layout .sec03_r {
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  height:100%;
}

/* masonry */
.masonry-wrap {
  position: relative;
  width: calc(50% - 20px);
}
.masonry-wrap.mt50 {
  margin-top: -100px; /* 지그재그 효과 */
}
.masonry {
  width: 100%;
}

.masonry li {
  width: 100%;
  margin-bottom: 50px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.masonry img {
  width: 100%;
  display: block;
}


.sec03 .conLst li{font-weight:bold; font-size: 1.125em;}

/* sec04 */
.sec04{padding:140px 0; background:var(--main-color-black) url(../img/effect_bg.jpg) no-repeat; background-size: cover;}
.sec04 .layout{display:flex; flex-direction: column; align-items: center;}
.sec04 .layout .title{margin-bottom:110px; display:flex; flex-direction: column; align-items: center;}
.sec04 .layout .title .top{color:var(--main-color-white); font-size:1.4em; margin-bottom:15px; font-weight: bold; padding:8px 30px; border-top:1px solid rgba(255,255,255,0.3); border-bottom:1px solid rgba(255,255,255,0.3); display:inline-block;}
.sec04 .layout .title .top + p{color:var(--main-color-white); font-size:3em; text-align: center;}
.sec04 .layout ul{display:flex; justify-content:space-between; flex-wrap: wrap;}
.sec04 .layout ul li{position: relative; width:calc(50% - 35px); margin-bottom:70px; transition: all 0.3s;}
.sec04 .layout ul li:hover,
.sec05 .layout .lastBx:hover{box-shadow: 0 0 20px rgba(0,0,0,0.3); transform: translateY(-20px);}
.sec04 .layout ul li .icon{position:absolute; top:-15px; right:30px; background: var(--main-color); padding:15px;}
.sec04 .layout ul li .icon img{transition:all 0.3s;}
.sec04 .layout ul li:hover .icon img{transform:rotateY(360deg);}
.sec04 .layout ul li .cont{background: var(--main-color-white); padding:50px;}
.sec04 .layout ul li .cont h3{font-size:2.1em; color:var(--main-color); margin-bottom:20px;}
.sec04 .layout ul li .cont h3 + p{font-size:1.1em;}
.sec04 .layout ul li .cont h3 + p strong{font-size:1.2em;}

/* sec05 */
.sec05{padding:150px 0; background:url(../img/last_bg.png) no-repeat; background-attachment: fixed;}
.sec05 .layout{padding:0 50px; display:flex; justify-content: space-between;}
.sec05 .layout .lastBx{display:flex; flex-direction: column; width:calc(50% - 35px); height:100%;  transition: all 0.3s; border-radius: 20px;}
.sec05 .layout .lastBx .top{position:relative; border-radius: 20px 20px 0 0; overflow: hidden;}
.sec05 .layout .lastBx .top img{width:100%;}
.sec05 .layout .lastBx .top .tit{position:absolute; padding:10px 25px; top:0; left:50%; transform:translateX(-50%); background:#102c56; border-radius:0 0 30px 30px; }
.sec05 .layout .lastBx .top .tit span{position: relative; color:var(--main-color-white); padding:0 20px; font-size:1.3em;}
.sec05 .layout .lastBx .top .tit span:before,
.sec05 .layout .lastBx .top .tit span:after{content:''; transform: translateY(-50%);position:absolute; top:50%; width:6px; height:6px; border-radius: 50%; background: var(--main-color-white);}
.sec05 .layout .lastBx .top .tit span:before{left:0; }
.sec05 .layout .lastBx .top .tit span:after{right:0;}
.sec05 .layout .lastBx .top .tit span strong{color:#ffe292;}
.sec05 .layout .lastBx .bot{min-height:310px; background: var(--main-color-white); padding:50px 40px; border-radius: 0 0 20px 20px; }


.checkLst{display:flex; flex-direction: column;}
.checkLst li{padding-left:45px; background:url(../img/check.jpg) no-repeat top left; margin-bottom:40px; word-break: keep-all; font-size:1.1em;}
.checkLst li:last-child{margin-bottom:0;}



@media screen and (max-width: 1400px) {
	.conTit2{font-size:2.2em;}

	.layout{ max-width:94%;}
		body{font-size:18px;}

.sec02 .sec02_r .top{padding:60px 0;}
		.sec02 .sec02_l .lawyer_name .title + img{width:35%; max-width:188px;}
		.sec02 .sec02_l .lawyer_name{margin-top:50px; margin-right:20px;}


	/* sec05 */
	.sec05 .layout{padding:0;}
	.sec05 .layout .lastBx .bot{padding:40px 30px;}
	.checkLst li{padding-left:35px; font-size:1.1em; margin-bottom:30px; }

	.fixed .layout{max-width:98%;}
	.fixed .layout .btnWrap a[class*="btn_"]{padding:10px 15px;}
	.fixed .layout .btnWrap .btn_01{margin-right:10px;}

	#header #logo a img{width:150px;}
	#header #nav li{margin-right:20px;}
	#header #nav li a{padding:10px 15px;}
	#header .header_right{padding:10px 10px 5px; border-radius: 10px;}
	#header #logo a .logoTxt .name{font-size:1.4em;}

.sec02 .sec02_r,
.sec02 .sec02_l{width:50%;}
.sec02 .sec02_r .top .wrap{padding:0 60px; margin-left:30px;}
.sec02 .sec02_r .top .wrap .tit2{font-size:2em; word-break: keep-all;}
.sec02 .sec02_r .bot{margin:70px 0 100px 50px;}
.sec02 .sec02_l .lawyer_img img{width:70%;}
.conLst li:before{width:3px; height:3px;}
.sec02 .sec02_l .lawyer_img{border-radius: 0 0 100px 0;}
.fixed .layout .text_l .top{top:-60px;}
.fixed .layout .text_l .bot{padding-left:0;}

.fixed .layout .btnWrap a[class*="btn_"] span:before{width:20px; height:20px;}
.fixed .layout .btnWrap a[class*="btn_"] span{padding-left:25px; word-break: keep-all; display:inline-block; width:100%;}

.sec03 .layout .sec03_l{width:60%;} 
.sec03 .layout .sec03_r{width:40%;}

.masonry li{margin-bottom:20px;}
.sec03 .layout .sec03_l .top .big{font-size:2.6em;}

}



@media screen and (max-width:1024px) {
#header .layout{max-width:96%;}
	.mobBr{display:none;}
	/*************** footer *******************/
	#footer{padding:40px 0 260px;}
	#footer ul{width:100%;}
	#footer ul li{margin:0 60px 8px 0;}
	#footer .ft_logo{margin-bottom:40px;}
	#footer .ft_logo img{width:33%; max-width:209px;}


.sec01 .top{margin-bottom:30px; padding:5px 15px; font-size:1.5em;}



	/* sec05 */
.sec05 .layout .lastBx{width:calc(50% - 20px);}
.checkLst li{font-size:1em;}
.sec04{padding:120px 0; background-position: top right; background-size:contain;}
.sec04 .layout .title .top{font-size:1.2em;}
.sec04 .layout .title{margin-bottom:80px;}
.sec04 .layout .title .top + p{font-size:2.7em;}
.sec04 .layout ul li{width:calc(50% - 20px); margin-bottom:40px;}
.sec04 .layout ul li .cont{padding:40px 30px 30px;}
.sec04 .layout ul li .cont h3{font-size:1.6em;}
.sec04 .layout ul li .cont h3 + p{font-size:1em; word-break: keep-all;}
.sec04 .layout ul li .cont h3 + p strong{font-size:1.1em;}
.sec04 .layout ul li .icon{right:15px; top:-20px;}
.sec04 .layout ul li .icon img{width:50px; height:50px;}
#header #nav{display:none;}

.sec02 .sec02_r .top .wrap{padding:0 30px;}
.sec02 .sec02_r .top .wrap .tit2{font-size:1.5em;}
.sec02 .sec02_l .lawyer_img p{font-size:0.8em; right:-60px; top:30px;}
.sec02 .sec02_l .lawyer_img{padding-top:40px;}
.sec02 .sec02_r .top{padding:40px 0;}
.sec02 .sec02_r .top .wrap{margin:0 20px;}
.sec02 .sec02_r .bot{margin:30px 30px 50px;}
.sec02 .sec02_l .lawyer_name{margin-top:30px; margin-right:0;}
.sec02 .sec02_l .lawyer_name .title p{font-size:1.4em;}
.sec02 .sec02_l .lawyer_name .title{margin-right:20px;}
.sec02 .sec02_l .lawyer_name .title p.lineTxt .line{width:40px;}
.sec02 .sec02_r .top .wrap .tit1{font-size:1em;}

.sec01 .change p{font-size:2em;}
.sec01 .change p strong{font-size:1.7em;}
.fixed{padding:20px 0;}
.fixed .layout{flex-direction: column;}
.fixed .layout .btnWrap{width:96%;    justify-content: center; margin-top:20px; justify-content: space-between;}
.fixed .layout .btnWrap a[class*="btn_"]{width:calc(50% - 5px); }
.fixed .layout .btnWrap .btn_01{margin-right:20px;}
.fixed .layout .text_l .top span img{transform: scale(0.9);}
.fixed .layout .text_l .top span{padding:5px;}
.fixed .layout .btnWrap a[class*="btn_"]{padding:10px 5px; text-align: center;}

.sec03 .layout .sec03_l .top .big{font-size:2em;}

.sec05 .layout .lastBx .bot{min-height:auto;}
}






@media screen and (max-width: 768px) {
		body{font-size:16px;}
			/*************** footer *******************/
				#footer{padding:40px 0 200px;}
		#footer ul{flex-direction: column;}
		#footer ul li{margin:0 0 8px 0;}


.sec01{background:url(../img/main_bg_mob.jpg) no-repeat; background-size: 100%; height:auto;}

.sec01 .slogan img{width:70%; max-width:442px;}
.sec01 .change p{font-size:1.6em; word-break: keep-all;}
.sec01 .change p strong{font-size:1.3em;}
.sec01 .top{font-size:1.3em;}


		.sec02{flex-direction: column;}
		.sec02 .sec02_r, .sec02 .sec02_l{width:100%;}
		.sec02 .sec02_l .lawyer_img{border-radius: 0;}
		.sec02 .sec02_l .lawyer_img img{width:50%; margin:0 auto;}

/* sec05 */
.sec05 .layout{flex-direction: column;}
.sec05 .layout .lastBx{width:90%; margin:0 auto;}
.sec05 .layout .lastBx:first-child{margin-bottom:50px;}
.checkLst li{font-size:1.125em;}
.sec04{padding:100px 0 50px;}
.sec04 .layout ul li{width:100%;}


.sec04 .layout .title .top + p{font-size:2em;}
.sec04 .layout .title{margin-bottom:50px;}
.sec04 .layout ul li{ margin-bottom:20px;}
.sec04 .layout ul li .cont{padding:30px 100px 30px 30px;}
.sec04 .layout ul li .icon{top:50%; right:0; transform: translateY(-50%);}
.sec04 .layout ul li .cont h3{font-size:1.4em; margin-bottom:10px;}
.sec04 .layout ul li .icon img{width:40px; height:40px;}

.sec05{padding:60px 0;}
.sec05 .layout .lastBx .bot{padding:30px 20px;}
.checkLst li{margin-bottom:20px; }
.sec02 .sec02_l .lawyer_name{justify-content: center; margin-top:50px;}
.sec02 .sec02_r .top{background:none; padding:0; margin:40px auto ;}
.sec02 .sec02_r .top .wrap{padding:0;}
.sec02 .sec02_r .top .wrap .tit1{font-size:1.2em;}
.sec02 .sec02_r .top .wrap .tit2{font-size:1.6em;}

.conLst li{padding-left:10px;}
.conLst li:before{top:10px;}
.sec02 .sec02_r .top .wrap{margin:0 10px; padding:0 20px;}
.sec02 .sec02_r .bot{margin:20px 20px 40px;}

.fixed .layout .text_l .bot{    align-items: center;}
.fixed .layout .text_l .bot img{width:76%; margin-top:15px;}
.fixed .layout .btnWrap{margin-top:10px;}
.fixed .layout .text_l .top span img{transform: scale(0.7);}

.fixed .layout .btnWrap .btn_01{margin-right:0;}

.fixed .layout .text_l .top{width:35%; top:-34px;}
	.fixed .layout .btnWrap a[class*="btn_"] span:before{left:10px;}


	.sec03 .layout{flex-direction: column; height:auto;}
	.sec03{height:auto;}
	.sec03 .layout .sec03_l{width:100%; padding:80px 10px;}
	.sec03 .layout .sec03_r{display:none;}
	.fixed{padding:10px 0;}
	.sec05{background:#ccc;}
  .fixed .layout .btnWrap a[class*="btn_"]{padding:8px 5px;}
  .fixed .layout .text_l .top span:before{
        border-top:5px solid #0069e8;
    border-right: 5px solid #0069e8;
    border-bottom: 5px solid transparent;
    border-left: 5px solid transparent;
    left:60px; bottom:-9px;
  }
  .sec05 .layout .lastBx .top .tit span{padding:0 10px;}
  .sec03 .layout .sec03_l .top .big{font-size:1.65em;}
}



@media screen and (max-width: 425px) {

	.sec04 .layout .title .top{font-size:1.1em; padding:8px 20px;}
	.sec04 .layout .title .top + p{font-size:1.8em; word-break: keep-all;}
	.sec04 .layout ul li .cont{padding:20px 90px 20px 20px;}

	.sec02 .sec02_l .lawyer_img img{width:70%;}


	#header #logo a img{width:110px;}
	#header #logo a .logoTxt{margin-left:10px;}
	#header #logo a .logoTxt .name{font-size:1em;}
	#header .header_right .number p{background:none; padding:0; font-size:1em;}
	#header #logo a .logoTxt .cate{font-size:0.9rem;}
	#header{padding:10px 0;}

	.sec01 .top{font-size:1.125em; margin-bottom:20px;}
	.sec01 .change p{font-size:1.2em;}

	.fixed .layout .text_l .bot img{width:90%;}

.fixed .layout .text_l .top span img{transform: none;}
}