/* include 공통 CSS */

/************************* 공통 시작*************************/
.inner-1690 {margin: 0 auto; width: 1690rem;}
.inner-1300 {margin: 0 auto; width: 1300rem;}

.m-tit {padding-top:142rem;}
.m-tit h2 {font-size: var(--fz-g); font-weight: 800; text-align: center; letter-spacing: -0.5px; line-height: 1.35;}

ul.pol-list li {margin-bottom: 25rem; padding-left: 48px; position: relative; font-size: var(--fz-f); line-height: 1.5;}
ul.pol-list li:last-child {margin-bottom: 0;}
ul.pol-list li:before {position: absolute; top: 5rem; left: 0; display: inline-block; content:''; width: 16rem; height: 18rem; background:url('./img/pol-icon.svg') no-repeat center / cover;}
ul.pol-list li i {font-style: italic; color: var(--main-purple); font-weight: 800;}

.list-box {display: flex; flex-direction:column; justify-content:center; padding: 0 62rem; height: 960rem; background:url('./img/section08_img01.svg') no-repeat center / cover;}
.list-box div {margin-bottom: 44rem;}
.list-box div:last-child {margin-bottom: 0;}
.list-box div h4 {margin-bottom: 16rem; font-size: var(--fz-e); font-weight: 800; color: var(--main-purple); letter-spacing:-0.5px;}
.list-box div ul.pol-list li {margin-bottom: 5rem; padding-left: 20rem; font-size: var(--fz-h); color: #fff;}
.list-box div ul.pol-list li:before {left: 0; width: 12.13rem; height: 14rem; background:url('./img/pol-icon_purple.svg') no-repeat center / cover;}

.arrow-text {padding-left: calc((100% - 1300rem) / 2); display: flex; flex-direction:column; justify-content: center; width: 50%; height: 330rem; padding-right: 120rem; clip-path: polygon(0 0, 87.5% 0, 100% 50%, 87.5% 100%, 0 100%); background-color: var(--main-skyblue);}
.arrow-text h4 {margin-bottom: 5px; font-size: var(--fz-d); letter-spacing: -0.5px;}
.arrow-text h4 b {font-weight: 800;}
.arrow-text p {margin-top: 20rem; font-size: var(--fz-e); line-height: 1.5;}
.arrow-text p:first-of-type {margin-top: 0;}
.arrow-text p em {font-size: var(--fz-d);}
.arrow-text p b {font-weight: 800;}
.arrow-text ul.pol-list {margin-top: 33rem;}

.hd-box {display: flex; justify-content:space-between; align-items:center;}
.hd-box .top-nav {margin-left: 113rem; display: flex;}
.hd-box .top-nav li {margin:0 25rem;}
.hd-box .top-nav li a {display: flex; align-items:center; height: 80rem; line-height: 1.3; text-transform: uppercase; font-size: var(--fz-a); font-weight: 600; color: var(--black-02); transition:.3s ease all; text-align: center;}
.hd-box .top-nav li a.on {color:var(--main-color);}

.hd-box .hd-btn {display: flex; align-items:center;}
.hd-box .hd-btn ul {display: flex;}
.hd-box .hd-btn ul li a {font-size: var(--fz-a); opacity: 0.3; transition:.3s ease all;}
.hd-box .hd-btn ul li:after {display: inline-block; margin:0 10px; content:''; width: 1px; height: 10px; background-color: #212121; opacity: 0.3;} 
.hd-box .hd-btn ul li:last-child:after {display: none;}
.hd-box .hd-btn ul li a.on {color: var(--main-color); opacity: 1;}
.hd-box .hd-btn ul li a:active, .hd-box .hd-btn ul li a:focus {color: var(--main-color); opacity: 1;}

.hd-box .hd-btn a.hd-inq {margin-left: 25px; display: inline-flex; justify-content:center; align-items: center; width: 150px; height: 35px; font-size: var(--fz-a); font-weight: 500; color: #fff; text-align: center; background-color: var(--main-color);}
@media(min-width:769px){
	.hd-box .hd-btn ul li a:hover {color: var(--main-color); opacity: 1;}
}


#quick-right						{position:fixed; top: 50%; transform:translateY(-50%); right: 22rem;}
#quick-right ul.paging {}
#quick-right ul.paging li {}
#quick-right ul.paging li a	{display: inline-block; margin:5rem 0; width: 10rem; height: 10rem; background-color:var(--main-purple); opacity: 0.5; transition:.5s ease all; border-radius:100%;}
#quick-right ul.paging li a.on		{opacity: 1;}
#quick-btn {position: fixed; right: 20rem; bottom: 20rem; z-index: 100;}
#quick-btn .ask img {width: 40rem;}
#quick-btn .top_btn img {width: 16rem;}

/************************* 공통 끝 *************************/

/************************* theme/head.php 시작*************************/

/************************* theme/head.php 끝*************************/

/************************* title_navi 시작 *************************/

/************************* title_navi 끝 *************************/

/************************* main_inc 시작*************************/
.main-section {padding-bottom: 150rem;}
.main-section.gray {background-color: var(--gray-01);}
.main-section.gray02 {background-color: var(--gray-02);}

.link-box {margin-top: 100rem; display: flex; justify-content:center; align-items:center; text-align: center; height: 100rem; background:url('./img/section03_linkbox.png') no-repeat center / cover;}
.link-box p {font-size: var(--fz-i); color: #fff; line-height: 1.4; letter-spacing: 0;}
.link-box p a {color: #fff; font-weight: 800;}

.table-section .logo-top {margin-bottom: 38rem; display: flex; justify-content:space-between;}
.table-section .size-code {display: flex; justify-content:center; align-items:center; width: 165rem; height: 40rem; font-size: var(--fz-f); color: #fff; background-color: var(--main-purple); text-align: center;}
.table-section .link-box {margin: 0 auto; width: 849rem; clip-path: polygon(50% 0%, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%, 4% 0);}
.table-section .table-wrap {overflow: hidden;}
.table-section .table-wrap table {background-color: rgba(255,255,255,0.9);}
.table-section .table-wrap table tr {border-bottom:1px solid var(--main-yellowgreen2);}
.table-section .table-wrap table tr:first-child {border-top:2px solid var(--main-green);}
.table-section .table-wrap table tr:nth-child(2) {border-bottom:2px solid var(--main-green);}
.table-section .table-wrap table tr th, .table-section .table-wrap table tr td {padding:9rem 24rem; font-size: var(--fz-f); text-align:left;}
.table-section .table-wrap table tr th {font-weight: 800; color: var(--main-purple);}
.table-section .table-wrap table tr th.ct {text-align: center;}
.table-section .table-wrap table tr td.ct {text-align: center;}
.table-section .table-wrap table tr td span {font-size: var(--fz-a); font-weight: 500; line-height: 1.35; color: var(--main-green);}
.table-section .table-wrap table tr td span.black {color: var(--black-01);}
.table-section .table-wrap table tr td span b {font-size: var(--fz-b); font-weight: 800;}
.table-section .table-wrap table tr td img {height: 18rem;}


#page1 {padding-bottom: 0; height: 960px; background:url('./img/bg_section01.jpg') no-repeat center / cover;}
#page1 .main-contents {padding-top: 50rem; display: flex; flex-direction: column; justify-content:center; align-items:center; height: 100%;}
#page1 .main-contents .logo-icon {display: flex; flex-direction:column; justify-content:center; align-items:center; width: 391rem; height: 451rem; background:url('./img/section01_img01.svg') no-repeat center / cover; text-align: center;}
#page1 .main-contents .logo-icon figure {margin-bottom: 30rem;}
#page1 .main-contents .logo-icon p {font-size: var(--fz-b); color: #fff; letter-spacing: 1rem; text-transform: uppercase; line-height: 1.3; letter-spacing: -0.5px;}
#page1 .main-contents .text-box {margin-top: 33rem; text-align: center; color: #fff;}
#page1 .main-contents .text-box h3 {font-size: var(--fz-c); font-weight: 600; letter-spacing:-0.5px;}
#page1 .main-contents .text-box p {margin-top: 8rem; font-size: var(--fz-d);}
#page1 .main-contents .text-box p span {margin:0 8rem;}
#page1 .main-contents .text-box p a {color: #fff;}

#page2 {padding-bottom: 0; height: 960px; background:url('./img/bg_section02.jpg') no-repeat center / cover;}
#page2 .inner-1300 {height: 100%;}
#page2 .main-contents {position: relative; height: 100%;}
#page2 .main-contents .img-wrap {position: absolute; top: 50%; left: -20rem; transform:translateY(-50%); width: 598.5rem; height: 811rem; text-align: center;}
#page2 .main-contents .img-wrap .img-box {display: flex; flex-direction:column; justify-content:center; align-items:center; width: 399rem; height: 464rem;}
#page2 .main-contents .img-wrap .img-box:first-child {position: absolute; left: 0; top: 0; background:url('./img/section02_img01.svg') no-repeat center / cover;}
#page2 .main-contents .img-wrap .img-box:nth-child(2) {position: absolute; right: 0; bottom: 0; background:url('./img/section02_img02.svg') no-repeat center / cover;}
#page2 .main-contents .img-wrap .img-box figure {margin-bottom: 5rem;}
#page2 .main-contents .img-wrap .img-box h4 {margin-top: 15rem; font-size: var(--fz-d); font-weight: 700; text-transform: uppercase;}
#page2 .main-contents .img-wrap .img-box p {margin-top: 12rem; font-size: var(--fz-f); line-height: 1.5;}
#page2 .main-contents .img-wrap .img-box:nth-child(2) h4 {color: #fff;}
#page2 .main-contents .img-wrap .img-box:nth-child(2) p {color: #fff;}
#page2 .main-contents .img-wrap .img-box div.img-deco {position: absolute; left: 50%; bottom: 68rem; transform:translateX(-50%);}

#page3 .main-contents {margin-top: 69rem;}
#page3 .main-contents .main-box {margin-top: 50rem; display: flex; justify-content:space-between; align-items:center;}
#page3 .main-contents .main-box:first-of-type {margin-top: 0;}
#page3 .main-contents .main-box .text-box h4 {margin-bottom: 17rem; font-size: var(--fz-d); font-weight: 800; color: var(--main-purple); letter-spacing:-0.5px;}
#page3 .main-contents .main-box .text-box p {font-size: var(--fz-h); line-height: 1.5;}
#page3 .main-contents .link-box {margin-top: 80rem;}
#page4 .arrow-text {margin-top: 69rem;}
#page4 figure {margin: -115rem auto 0; text-align: center;}

#page5 {background:url('./img/bg_section05.jpg') no-repeat center / cover;}
#page5 .m-tit {padding-top: 151rem;}
#page5 .text-area {margin: 76rem 0 0 auto; width: 50%;}
#page5 .text-area h4 {font-size: var(--fz-j); font-weight: 800; color: var(--main-purple); letter-spacing: -0.5px;}
#page5 .text-area p {margin: 32rem 0 47rem; font-size: var(--fz-b); line-height: 1.5;}
#page5 .text-area h5 {font-size: var(--fz-d);}
#page5 .text-area h5 b {font-weight: 800; color: var(--main-purple);}
#page5 .text-area .pol-list {margin-top: 33rem;}
#page5 .text-area .pol-list li {margin-bottom: 10rem;}
#page5 .link-box {margin-top: 97rem;}

#page6 {background:url('./img/bg_section06.jpg') no-repeat center / cover;}
#page6 .table-wrap {margin-top: 73rem; overflow: hidden;}
#page6 table tr {border-bottom:1px solid rgba(0,0,0,0.2)}
#page6 table tr th {padding:17rem 0; font-size: var(--fz-k); font-weight: 800; line-height: 1.1; color: #fff; text-align:left; letter-spacing: -0.5px; border-right:1px solid rgba(0,0,0,0.2)}
#page6 table tr th:first-child {padding-left: 34rem; padding-right: 34rem; background-color: rgba(56, 56, 56, 0.8); border-left:1px solid rgba(0,0,0,0.2)}
#page6 table tr th:nth-child(2) {padding-left: 27rem; padding-right: 27rem; background-color: rgba(67, 24, 120, 0.8)}
#page6 table tr td {position: relative; padding:26rem 26rem 47.5rem; border-right:1px solid rgba(0,0,0,0.2); vertical-align:top;}
#page6 table tr:last-child td {height: 180rem;}
#page6 table tr td:first-child {border-left :1px solid rgba(0,0,0,0.2)}
#page6 table tr td h4 {margin-bottom: 14rem; font-size: var(--fz-b); font-weight: 800; letter-spacing: -0.5px;}
#page6 table tr td h4.kaki {color: var(--main-kaki);}
#page6 table tr td h4.skyblue {color: var(--main-color);}
#page6 table tr td h4.purple {color: var(--main-purple);}
#page6 table tr td h4.aqua {color: var(--main-aqua);}
#page6 table tr td h4.yellowgreen {color: var(--main-yellowgreen);}
#page6 table tr td h4.magenta {color: var(--main-magenta);}
#page6 table tr:nth-child(2) td figure {height: 93rem;}
#page6 table tr td figure.absolute {position: absolute; top: 50%; left: 26rem; transform:translateY(-50%); width: 511rem;}
#page6 table tr td p {font-size: var(--fz-l); line-height: 1.5;}
#page6 table tr td p em {display: inline-block; font-size: var(--fz-h); font-weight: 600; line-height: 1.35;}
#page6 table tr td ul.pol-list {margin-top: 33rem; padding-left: 6rem;}
#page6 table tr td ul.pol-list li {margin-bottom: 2rem; padding-left: 20rem; font-size: var(--fz-l);}
#page6 table tr td ul.pol-list li:before {width: 11.27rem; height: 13rem;}

#page7 ul {margin-top: 143rem; padding-left: 65rem; display: flex; flex-flow: row wrap; justify-content: space-between;}
#page7 ul li {position: relative; margin-top: 114rem; padding: 73rem 48rem 58rem; width: 570rem; background-color: #fff;}
#page7 ul li:nth-child(-n + 2) {margin-top: 0;}
#page7 ul li figure {position: absolute; left: -65rem; top: -75rem; width: 130rem; height: 150rem;}
#page7 ul li h4 {margin-bottom: 22rem; font-size: var(--fz-e); font-weight: 700; color: var(--main-purple); letter-spacing: -0.5px;}
#page7 ul li p {font-size: var(--fz-h); line-height: 1.5;}
#page7 .arrow-text {margin-top: 80rem; width: calc(100% - 443rem); height: 270rem; clip-path: polygon(0 0, 94.7% 0, 100% 50%, 94.7% 100%, 0 100%);}

#page8 {position: relative; padding-top: 150rem;}
#page8::before {content: ''; display: block; position: absolute; right: 0; top: 0; width: 883px; height: 1261px; background: url('./img/section08_bg01.png') no-repeat center / cover; z-index: -1;}
#page8 .mct-wrap {display: flex; align-items:center;}
#page8 .mct-wrap > div {padding-right: 7%; width: 50%;}
#page8 .mct-wrap .text-box h3 {margin: 55rem 0 34rem; font-size: var(--fz-d); font-weight: 800; line-height: 1.5; letter-spacing: -0.5px;}
#page8 .mct-wrap .text-box p {margin-top: 25rem; font-size: var(--fz-f); line-height: 1.5;}
#page8 .mct-wrap .text-box p:first-of-type {margin-top: 0;}


#page9 {padding-top: 150rem; background:url('./img/bg_section09.jpg') no-repeat center / cover;}

#page10 {padding-top: 150rem; padding-bottom: 0; background:url('./img/bg_section10.jpg') no-repeat center / cover;}
#page10 .inner-1300 {position: relative;}
#page10 .inner-1300 > figure {position: absolute; top: 60rem; right: 0;}
#page10 .bg-area {margin: 0 auto; width: 1092rem; height: 870rem; background:url('./img/section10_img01.svg') no-repeat center / cover;}
#page10 .bg-area figure {padding: 136rem 0 83rem; text-align: center;}
#page10 .bg-area .mct-wrap {display: flex; padding: 0 97rem} 
#page10 .bg-area .mct-wrap .list-box {padding: 0; width: 50%; background:none; height: auto; justify-content: flex-start;}
#page10 .bg-area .mct-wrap .list-box:first-child {padding-right: 40rem;}
#page10 .bg-area .mct-wrap .list-box:nth-child(2) {padding-left: 57rem;}
#page10 .bg-area .mct-wrap .list-box div {margin-bottom: 72rem;}

#page11 {position: relative; padding-top: 150rem; padding-bottom: 200rem; background:url('./img/bg_section11.jpg') no-repeat center / cover;}
#page11 .text-wrap {margin-top:35rem; margin-right: calc((100% - 1300px) / 2); padding-top: 70rem;  padding-left: calc((100% - 1300px) / 2); background-color: rgba(255,255,255,0.9); clip-path: polygon(0% 0%, 88% 0%, 100% 20.5%, 100% 100%, 0% 100%);}
#page11 .text-wrap h3 {font-size: var(--fz-i); font-weight: 800; letter-spacing: -0.5px; color: var(--main-purple);}
#page11 .text-wrap .text-box {padding: 64rem 0 113rem; display: flex; flex-flow:row wrap;}
#page11 .text-wrap .text-box div {padding-right: 60rem; width: 50%;}
#page11 .text-wrap .text-box div p {margin-bottom: 30rem; font-size: var(--fz-f); line-height: 1.5;}
#page11 .text-wrap .text-box div p:last-of-type {margin-bottom: 0;}
#page11 .text-wrap .text-box div p span {font-weight: 700;}
#page11 .link-box {position: absolute; right: calc(((100% - 1300px) / 2) - 38rem); bottom: 150rem; width:849rem; clip-path: polygon(50% 0%, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%, 4% 0);}

#page12 {padding-top: 150rem;}
#page12.table-section .table-wrap table tr.bottom-line.yellowgreen {border-top:2px solid var(--main-yellowgreen3); border-bottom:2px solid var(--main-yellowgreen3);}
#page12.table-section .table-wrap table tr.bottom-line.mainblue {border-top:2px solid var(--main-color); border-bottom:2px solid var(--main-color);}
#page12.table-section .table-wrap table tr.bottom-line2.mainblue {border-bottom:1px solid var(--main-color);}
#page12.table-section .table-wrap table tr.bottom-line.magenta {border-top:2px solid var(--main-magenta); border-bottom:2px solid var(--main-magenta);}
#page12.table-section .table-wrap table tr.bottom-line2.magenta {border-bottom:1px solid var(--main-magenta);}

#page13 {padding-bottom: 140rem; display: flex; align-items:flex-end; background:url('./img/bg_section13.jpg') no-repeat center / cover; height: 960rem;}
#page13 .banner-text {position: relative; width: 100%;}
#page13 .banner-text h3 {padding-top: 30rem; font-size: var(--fz-j); width: 100%; font-weight: 400; color: #fff; background-color: rgba(0,0,0,0.6); height: 161rem; text-align: center; text-transform: uppercase; letter-spacing: -0.5px; line-height: 1.3;}
#page13 .banner-text h3 b {font-weight: 800;}
#page13 .banner-text .link-box {position: absolute; margin: 0; left: 50%; transform:translateX(-50%); bottom: -27.5rem; width: 852rem; height: 55rem; background:linear-gradient(180deg, rgba(96,193,206,1) 0%, rgba(137,124,216,1) 65%, rgba(104,90,189,1) 100%); clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0% 50%);}

#page14 {background:url('./img/bg_section14.jpg') no-repeat center / cover;}
#page14 .form_wrap {width: 750rem;}
#page14 .form_wrap .m-tit {text-align: center;}
#page14 .form_wrap .m-tit p {font-size: var(--fz-b); color: var(--black-05);}
#page14 .form_wrap .form-box {margin-top: 50rem;}
#page14 .form_wrap .form-box input[type="text"] {margin-bottom: 10rem; padding:0 15rem; display: block; width: 100%; height: 45rem; background-color: rgba(255,255,255,0.9); font-size: var(--fz-h); border:1px solid var(--gray-03);}
#page14 .form_wrap .form-box input[type="text"]::placeholder {color: var(--black-06);}
#page14 .form_wrap .form-box textarea {padding:15rem; display: block; width: 100%; height: 150rem; background-color: rgba(255,255,255,0.9); font-size: var(--fz-h); border:1px solid var(--gray-03);}
#page14 .form_wrap > label {margin:25rem 0; display: flex; align-items:center; font-size: var(--fz-h); font-weight: 500;}
#page14 .form_wrap > label input[type="checkbox"] {display: none;}
#page14 .form_wrap > label input[type="checkbox"] + span {position: relative; margin-right: 12rem; display: inline-block; width: 16rem; height: 16rem; border:1px solid var(--gray-03); background-color: #fff;}
#page14 .form_wrap > label input[type="checkbox"]:checked + span {background-color: var(--black-05);}
#page14 .form_wrap > label input[type="checkbox"]:checked + span:after {position: absolute; content:''; display: inline-block; left: 50%; top: 50%; transform:translate(-50%, -50%); width: 10.13rem; height: 7.72rem; background:url('./img/chk_icon.svg') no-repeat center / cover}
#page14 .form_wrap > label a {margin-left: 10rem; color: var(--main-blue);}
#page14 .form_wrap .submit_btn {display: flex; justify-content: center; align-items:center; height: 50rem; background-color: var(--main-yellowgreen4); text-align: center; color: #fff; font-size: var(--fz-f); font-weight: 700; width:100%;}

/************************* main_inc 끝*************************/



/************************* footer_inc 시작 *************************/
.ft-wrap {padding:52rem 0; display: flex; justify-content:space-between; align-items:center;}
.ft-wrap .ft-logo {width: 290rem;}
.ft-wrap .ft-logo img {width: 200rem;}
.ft-wrap .ft-info {width: calc(100% - 290rem);}
.ft-wrap .ft-info div {margin-bottom: 20rem; line-height: 1.6;}
.ft-wrap .ft-info div:last-child {margin-bottom: 0;}
.ft-wrap .ft-info div span {margin-right: 20rem; font-size: var(--fz-f); color: var(--black-02);}
.ft-wrap .ft-info div span small {font-size: var(--fz-h);}
.ft-wrap .ft-info div span b {margin-right: 10rem;}
/************************* footer_inc 끝 *************************/



/************************* left_lnb_inc 시작 *************************/

/************************* left_lnb_inc 끝 *************************/



/************************* ui.totop 시작 *************************/
#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url("./img/ui.totop6.png") no-repeat left top;
}

#toTopHover {
	background:url("./img/ui.totop6.png") no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}
/************************* ui.totop 끝 *************************/