/*
	Copyright 2020 Raonbnp
	http://raonbnp.com, http://raonwebstore.com
*/
@charset "UTF-8";
@import '/_css/common.css'; /* front, admin 공통*/
@import '/_css/member.css'; /* front member 공통*/
@import '/_css/board.css'; /* front member 공통*/
@import 'loading.css';
@import 'fontSet.css';
@import 'basic.css';
@import 'layout.css';


/* 서브공통 */
.s-title {
	text-align:center;
	margin-top:4rem;
}
.s-title span {
	font-size:2rem;
	font-weight:600;
	color:var(--main-color);
}
.s-title h2 {
	font-size:5.4rem;
	font-weight:700;
	color:#222;
}
.sub-wrap {
	position:relative;
	box-sizing:border-box;
	overflow:hidden;
}
.sub-wrap h3.tit {
	text-align:center;
	font-size:3.2rem;
	margin-top:3rem;
	line-height:1.4;
}
.sub-wrap section {
	position:relative;
	box-sizing:border-box;
	overflow:hidden;
}
@media (max-width: 991.98px) {
	.s-title {
		margin-top:2rem;
	}
	.s-title span {
		font-size:1.4rem;
	}
	.s-title h2 {
		font-size:3.2rem;
	}
	.sub-wrap h3.tit {
		font-size:2.2rem;
		margin-top:2rem;
		box-sizing:border-box;
		padding:0 1.5rem;
	}
}
@media (max-width: 575.98px) {
	.sub-wrap h3.tit {
		font-size:2rem;
		margin-top:1rem;
	}
}



/* 인사말 */
.intro-wrap .sec01 {
	margin-top:8rem;
	padding:15rem 0 20rem;
	background:#f3fbff url('../_img/sub/intro_sec01_bg.jpg') no-repeat center bottom / cover;
}
.intro-wrap .sec01 .img {
	border-radius:4rem;
	overflow:hidden;
	padding-bottom:100%;
}
.intro-wrap .sec01 .txt {
	box-sizing:border-box;
	padding:4rem 6rem;
	font-size:2rem;
	font-weight:300;
	color:#555;
}
.intro-wrap .sec01 .txt p {
	margin-bottom:3rem;
}
.intro-wrap .sec01 .txt b {
	color:#222;
	font-weight:600;
}
.intro-wrap .sec01 .txt .sign {
	display:flex;
	align-items:flex-end;
	margin-top:4rem;
}
.intro-wrap .sec01 .txt .sign > p {
	margin-bottom:0;
	color:#222;
	line-height:1;
}
.intro-wrap .sec01 .txt .sign > b {
	font-size:3.2rem;
	font-weight:600;
	line-height:1;
	margin-left:0.5rem;
}
@media (max-width: 991.98px) {
	.intro-wrap .sec01 {
		margin-top:4rem;
		padding:6rem 0 10rem;
		background-size:contain;
	}
	.intro-wrap .sec01 .img {
		border-radius:2rem;
		padding-bottom:50%;
	}
	.intro-wrap .sec01 .txt {
		box-sizing:border-box;
		padding:3rem 0;
		font-size:2rem;
		font-weight:300;
		color:#555;
	}
	.intro-wrap .sec01 .txt p {
		margin-bottom:2rem;
	}
	.intro-wrap .sec01 .txt .sign {
		margin-top:3rem;
	}
	.intro-wrap .sec01 .txt .sign > b {
		font-size:2.6rem;
	}
}


/* 경영철학 */
.story-wrap .sec01 {
	margin-top:8rem;
	padding:15rem 0 20rem;
	background:#f3fbff url('../_img/sub/story_sec01_bg.jpg') no-repeat center bottom / cover;
}
.story-wrap .sec01 .img {
	text-align:center;
}
.story-wrap .sec01 ul {
	list-style:none;
	padding-left:0;
	margin-top:10rem;
}
.story-wrap .sec01 ul > li:not(li:last-child){
	margin-bottom:4rem;
}
.story-wrap .sec01 ul > li > a {
	position:relative;
	display:flex;
	align-items:center;
	padding:4rem;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 1rem 0 2rem rgba(0, 0, 0, .1);
}
.story-wrap .sec01 ul > li > a::after {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border: 3px solid transparent;
	border-radius: 1rem;
	background-image: linear-gradient(#fff, #fff), 
	linear-gradient(to right top, #0274b8 0%,  #20b177 100%);
	background-origin: border-box;
	background-clip: content-box, border-box;
	opacity: 0;
	transition: all .5s;
}
.story-wrap .sec01 ul > li > a:hover::after {
	opacity: 1;
}
.story-wrap .sec01 ul > li > a .icon,
.story-wrap .sec01 ul > li > a .txt {
	position:relative;
	z-index:1;
}
.story-wrap .sec01 ul > li > a .icon {
	margin-right:2rem;
}
.story-wrap .sec01 ul > li > a .txt {
	display:flex;
	align-items:center;
	color:#555;
	font-size:2rem;
	font-weight:300;
}
.story-wrap .sec01 ul > li > a .txt strong {
	font-size:2.4rem;
	font-weight:600;
	margin-right:6rem;
	color:#222;
}
@media (max-width: 991.98px) {
	.story-wrap .sec01 {
		margin-top:4rem;
		padding:4rem 0 8rem;
		background-size:contain;
	}
	.story-wrap .sec01 ul {
		margin-top:4rem;
	}
	.story-wrap .sec01 ul > li:not(li:last-child){
		margin-bottom:2rem;
	}
	.story-wrap .sec01 ul > li > a {
		display:block;
		padding:3rem;
		text-align:center;
	}
	.story-wrap .sec01 ul > li > a .icon {
		margin-right:0;
	}
	.story-wrap .sec01 ul > li > a .icon > img {
		max-width:8rem;
	}
	.story-wrap .sec01 ul > li > a .txt {
		display:block;
		font-size:1.8rem;
	}
	.story-wrap .sec01 ul > li > a .txt strong {
		font-size:2rem;
		margin-right:0;
		display:block;
		margin:1rem 0 0.5rem;
	}
}
@media (max-width: 767.98px) {
	.story-wrap .sec01 .img > img {
		max-width:20.8rem !important;
	}
}



/* 플랜전략 공통 */
.business-wrap p {
	font-size:2rem;
	line-height:1.6;
	color:#555;
}
.business-wrap .flex {
	display:flex;
}
.business-wrap .flex h3 {
	font-size:3.4rem;
	font-weight:700;
	color:#222;
	width:28%;
}
.business-wrap .flex .rt {
	width:72%;
}
.business-wrap .flex .rt span.info {
	display:block;
	font-size:2rem;
	color:var(--main-color);
}
.business-wrap .box-style-01 > [class^='col-'] {
	margin-bottom:2rem;
}
.business-wrap .box-style-01 .box {
	box-sizing:border-box;
	padding:5rem;
	border-radius:1rem;
	background:#fff;
	height:100%;
} 
.business-wrap .box-style-01 .box span {
	display:block;
	font-size:1.6rem;
	font-weight:600;
	color:var(--main-color);
}
.business-wrap .box-style-01 .box p.tit {
	font-size:2.4rem;
	font-weight:700;
	color:#222;
	margin-top:0;
}
.business-wrap .box-style-01 .box p {
	font-size:1.8rem;
	margin-top:1rem;
}
@media (max-width: 991.98px) {
	.business-wrap p {
		font-size:1.8rem;
	}
	.business-wrap .flex {
		display:block;
	}
	.business-wrap .flex h3 {
		font-size:2.4rem;
		width:100%;
		text-align:center;
		margin-bottom:2rem;
	}
	.business-wrap .flex .rt {
		width:100%;
	}
	.business-wrap .flex .rt span.info {
		font-size:1.8rem;
	}
	.business-wrap .box-style-01 > [class^='col-'] {
		margin-bottom:1rem;
	}
	.business-wrap .box-style-01 .box {
		padding:3rem;
		height:auto;
	} 
	.business-wrap .box-style-01 .box span {
		font-size:1.4rem;
	}
	.business-wrap .box-style-01 .box p.tit {
		font-size:2rem;
	}
	.business-wrap .box-style-01 .box p {
		font-size:1.6rem;
	}
}
@media (max-width: 575.98px) {
	.business-wrap .box-style-01 .box p.tit {
		font-size:2rem;
	}
	.business-wrap .box-style-01 .box p {
		margin-top:0.5rem;
	}
}

.business-wrap .box-style-02 > [class^='col-'] {
	margin-bottom:2rem;
}
.business-wrap .box-style-02 .box {
	box-sizing:border-box;
	padding:5rem;
	border-radius:1rem;
	background:#f3fbff;
} 
.business-wrap .box-style-02 .box p.tit {
	font-size:2.4rem;
	font-weight:700;
	color:#222;
	display:flex;
	align-items:center;
	margin-top:0;
}
.business-wrap .box-style-02 .box p.tit > span.num {
	font-size:2.2rem;
	font-weight:600;
	color:var(--main-color);
	text-decoration:underline;
	text-underline-offset : 5px;
	display:inline-block;
	margin-right:1.5rem;
}
.business-wrap .box-style-02 .box p {
	font-size:1.8rem;
	margin-top:2rem;
}
.business-wrap .box-style-02 .box ul {
	list-style:none;
	padding-left:0;
	margin-top:2rem;
}
.business-wrap .box-style-02 .box ul > li {
	position:relative;
	padding-left:1.5rem;
	font-size:1.8rem;
	color:#555;
}
.business-wrap .box-style-02 .box ul > li:before {
	content:"";
	position:absolute;
	left:0;
	top:1.1rem;
	width:3px;
	height:3px;
	border-radius:50%;
	background:#222;
}
@media (max-width: 991.98px) {
	.business-wrap .box-style-02 > [class^='col-'] {
		margin-bottom:1rem;
	}
	.business-wrap .box-style-02 .box {
		padding:3rem;
	} 
	.business-wrap .box-style-02 .box p.tit {
		font-size:2rem;
	}
	.business-wrap .box-style-02 .box p.tit > span.num {
		font-size:1.8rem;
		margin-right:1rem;
	}
	.business-wrap .box-style-02 .box p {
		font-size:1.6rem;
		margin-top:1rem;
	}
	.business-wrap .box-style-02 .box ul {
		margin-top:1rem;
	}
	.business-wrap .box-style-02 .box ul > li {
		padding-left:1.2rem;
		font-size:1.6rem;
	}
	.business-wrap .box-style-02 .box ul > li:before {
		top:1rem;
	}
}


.business-wrap .box-style-012 .box {
	display:flex;
	box-sizing:border-box;
}
.business-wrap .box-style-012 .box .top {
	height:max-content;
	width:21%;
}
.business-wrap .box-style-012 .box .img {
	background:#f4f4f4;
	border-radius:1.2rem;
	overflow:hidden;
}
.business-wrap .box-style-012 .box .img > img {
	width:100%;
}
.business-wrap .box-style-012 .box .mobile-info {
	display:none;
}
.business-wrap .box-style-012 .box .inner {
	padding-left:5rem;
	padding-top:2rem;
	width:79%;
}
@media (max-width: 1199.98px) {
	.business-wrap .box-style-012 .box .inner {
		padding-top:0;
	}
}
@media (max-width: 991.98px) {
	.business-wrap .box-style-012 .box .top {
		width:20%;
	}
	.business-wrap .box-style-012 .box .img {
		border-radius:1rem;
	}
	.business-wrap .box-style-012 .box .inner {
		padding-left:3rem;
		width:80%;
	}
}
@media (max-width: 575.98px) {
	.business-wrap .box-style-012 .box {
		display:block;
	}
	.business-wrap .box-style-012 .box .top {
		width:100%;
		display:flex;
		align-items:center;
	}
	.business-wrap .box-style-012 .box .top .img {
		width:24%;
		margin-right:2rem;
	}
	.business-wrap .box-style-012 .box .mobile-info {
		display:block;
	}
	.business-wrap .box-style-012 .box .inner {
		padding-left:0;
		width:100%;
		margin-top:1rem;
	}
	.business-wrap .box-style-012 .box .inner span,
	.business-wrap .box-style-012 .box .inner p.tit {
		display:none;
	}
}



.business-wrap .sec01 {
	padding:8rem 0 12rem;
}
.business-wrap .sec01 .img {
	padding-bottom:30%;
	border-radius:30rem;
}
.business-wrap .sec01 .flex {
	margin-top:12rem;
}
.business-wrap .sec02 {
	background:#f1fafe url("../_img/sub/story_sec01_bg.jpg") no-repeat center bottom / cover;
	padding:12rem 0;
}
.business-wrap .sec03 {
	padding:12rem 0;
}
@media (max-width: 991.98px) {
	.business-wrap .sec01 {
		padding:4rem 0 6rem;
	}
	.business-wrap .sec01 .flex {
		margin-top:4rem;
	}
	.business-wrap .sec02,
	.business-wrap .sec03{
		padding:6rem 0;
	}
}


/* 파생상품/마진 */
.derivatives-wrap .sec01 span.info:nth-of-type(1){
	margin-top:3rem;
}
@media (max-width: 991.98px) {
	.derivatives-wrap .sec01 span.info:nth-of-type(1){
		margin-top:2rem;
	}
}



/* 게시판 공통 */
.board-wrap {
	padding-bottom:12rem;
}
.board-wrap > .container {
	margin-top:6rem;
}
@media (max-width: 991.98px) {
	.board-wrap {
		padding-bottom:6rem;
	}
	.board-wrap > .container {
		margin-top:3rem;
	}
	.board-wrap #board_list_wrap #board_list_gallery > ul > li.col-gn-4 {
		width:calc(100%/3);
	}
	#board_btn_wrap {
		margin-top:2rem;
	}
}
@media (max-width: 575.98px) {
	.board-wrap #board_list_wrap #board_list_gallery > ul {
		margin-left:-1rem;
		margin-right:-1rem;
	}
	.board-wrap #board_list_wrap #board_list_gallery > ul > li.col-gn-4 {
		width:calc(100%/2);
		padding-left:1rem;
		padding-right:1rem;
	}
}



/* footer */
.etc-wrap {
	padding:6rem 0 12rem;
}
@media (max-width: 991.98px) {
	.etc-wrap {
		padding:4rem 0 6rem;
	}
}

.email-wrap #user_guide_sec .block_area .tit, 
.email-wrap #user_guide_sec .block_area strong {
	display:block;
	font-size:2rem;
	font-weight:600;
	color:#222;
	margin-bottom:1rem;
}