@charset "utf-8";

/*********************
	Common Style
**********************/
.headWrap,
.lnbwrap {border-bottom:0 !important;}
.inner {position:relative; max-width:1400px; margin:0 auto;}
.inner:after {content:''; display:block; clear:both;}
button {font-family:inherit; font-size:1em;}
.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}
.blind {position:absolute; top:0; left:0; z-index:-9999; text-indent:-999px; overflow:hidden; opacity:0;}

@media (max-width:1024px) {
	.inner {padding:2.5em 1.5em;}
}



/****************************************************************
	Slider Common Style
****************************************************************/
.slider .swiper-slide {width:100%;}
.slider .swiper-slide > a {display:block;}
.slider .swiper-slide img {display:block; max-width:100%; width:100%;}

.fix-scroll .swiper-container {display:block; position:relative;}
.fix-scroll .swiper-wrapper {display:block !important; transform:none !important; -webkit-transform:none !important; height:100% !important; overflow:auto; white-space:nowrap;}
.fix-scroll .swiper-wrapper li {display:inline-block !important; vertical-align:top; transform:none !important; -webkit-transform:none !important; opacity:1 !important;}
.fix-scroll .swiper-wrapper li a {display:block; position:relative;}
.fix-scroll .swiper-wrapper li a:focus:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border:5px solid rgba(0,0,0,.5); z-index:2;}



/****************************************************************
	Main:Common Style
****************************************************************/
#m_conts {position:relative; overflow:hidden;}
.section {position:relative;}
.sec-title {display:block; position:relative; word-break:keep-all; font-size:1.8em; line-height:1.2; font-family:'YdestreetB'; font-weight:600;}
.sec-title-l {display:block; position:relative; word-break:keep-all; font-size:1.8em; line-height:1.2; font-family:'YdestreetL'; font-weight:300;}
.sec-title-l strong {display:inline-block; position:relative; font-family:'YdestreetB';}

@media (min-width:1024px){
	.section {padding-left:1em; padding-right:1em;}
	.section:not(.visualWrap) {padding:4em 0;}
}
@media (max-width:1024px) and (min-width:769px) {
	.section:not(.visualWrap) {padding:2.5em 0;}
}
@media (max-width:768px) {
	.sec-title, 
	.sec-title-l {font-size:1.4em;}
	.sec-title br, 
	.sec-title-l br {display:none;}
}



/****************************************************************
	Main:Visual
****************************************************************/
.visualWrap {position:relative; padding:0 4em;}
.visualWrap .visual-inner .txt_box {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); padding-bottom:1em; color:#fff; text-shadow:0em 0em 1.5em rgba(0,0,0,0.15); z-index:5;}
.visualWrap .visual-inner .txt_box h2 {font-family:'YdestreetB'; font-size:2.6em;}
.visualWrap .visual-inner .txt_box em {color:#FFF48E;}
.visualWrap .visual-inner .txt_box p {font-family:'YdestreetL'; font-size:1.4em; margin-bottom:0.5em;}

.visualSlider {display:block; position:relative; width:100%; height:29em; background:green; margin:0 auto; overflow:hidden; border-radius:1.1em;}
.visualSlider .control {display:block; position:absolute; border-radius:9em; z-index:2;}
.visualSlider .control > * {display:inline-block; position:relative; vertical-align:middle; bottom:auto; left:auto; right:auto; top:auto; margin-left:1em; }
.visualSlider .control .bar {height:2px; display:inline-block; overflow:hidden; border-radius:1em; background:rgba(0,0,0,0.4);}
.visualSlider .control .bar .swiper-pagination-progressbar-fill {background:#fff;}
.visualSlider .control .pager > * {display:inline-block; position:relative; vertical-align:middle; margin:2px;}
.visualSlider .control .btn_box {display:inline-block; background:rgba(0,0,0,0.3); padding:0.25em 0.75em; border-radius:2em;}
.visualSlider .control button {overflow:hidden; font-size:1em; width:1.25em; height:1.2em; vertical-align:middle; text-indent:-9999px;}
.visualSlider .control button.prev {background:url(../images/main/ico_prev_w.svg) no-repeat;}
.visualSlider .control button.next {background:url(../images/main/ico_next_w.svg) no-repeat;}
.visualSlider .control button.stop {background:url(../images/main/ico_pause_w.svg) no-repeat;}
.visualSlider .control button.play {display:none; background:url(../images/main/ico_play_w.svg) no-repeat;}
.visualSlider .slider {display:block; position:relative; height:100%; border-radius:.8em; overflow:hidden;}
.visualSlider .slider .swiper-container {}
.visualSlider .slider .swiper-container,
.visualSlider .slider .swiper-wrapper,
.visualSlider .slider .swiper-slide {height:100%;}
.visualSlider .slider .swiper-slide {}
.visualSlider .slider .swiper-slide > * {display:block;}
.visualSlider .slider .swiper-slide a {text-align:center; line-height:34em;}

.visualSlider .slider .swiper-slide {background-position:center !important; background-size:cover !important;}
.visualSlider .slider .swiper-slide.img01 {background:url(../images/main/img_main_visual01.jpg) no-repeat;}
.visualSlider .slider .swiper-slide.img02 {background:url(../images/main/img_main_visual02.jpg) no-repeat;}
.visualSlider .slider .swiper-slide.img03 {background:url(../images/main/img_main_visual03.jpg) no-repeat;}
.visualSlider .slider .swiper-slide.img04 {background:url(../images/main/img_main_visual04.jpg) no-repeat; background-position:top 0 right 20% !important;}

@media all and (min-width:1480px){
	.visualWrap {padding:0 4em;}
}
@media (max-width:1700px) and (min-width:1480px){
	.visualWrap {padding:0 2em;}
}
@media (max-width:1480px) and (min-width:1024px){
	.visualWrap {min-width:1400px; padding:0;}
}

@media all and (min-width:1025px){
	.visualWrap .visual-inner .txt_box {width:1400px;}
	.visualWrap .visual-inner .txt_box p {font-size:1.4em; font-weight:500; margin-bottom:0.8em; color:#fff;}
	.visualSlider .control {width:1400px; display:block; position:absolute; left:50%; bottom:4em; height:2em; transform:translate(-50%, 0);}
	.visualSlider .control .bar {width:25em;}
}
@media all and (max-width:1024px){
	.visualWrap {width:94%; padding:0 3%;}
	.visualWrap .visual-inner .txt_box {width:100%; padding:0 10em 2em 10em; text-align:center;}
	.visualSlider .control {width:84%; left:8%; bottom:1em; text-align:center;}
	.visualSlider .control > * {margin:0;}
}
@media all and (max-width:768px){
	.visualSlider {height:20em;}
	.visualWrap .visual-inner .txt_box h2 {font-size:1.5em;}
	.visualWrap .visual-inner .txt_box p {font-size:1em;}
}


/****************************************************************
	side link
****************************************************************/
.side-link a {color:#fff; box-sizing:border-box; text-align:center;}
.side-link a span {position:relative; display:block; }
.side-link a:nth-child(1) {background:url('../images/main/bg_side_link_gr.svg') center no-repeat; background-size:cover;}
.side-link a:nth-child(2) {background:url('../images/main/bg_side_link_bk.svg') center no-repeat; background-size:cover;}
.side-link a:nth-child(1) span:after {content:''; display:inline-block; width:0.9em; height:0.9em; background:url('../images/main/ico_sidelink01.svg') center no-repeat; background-size: cover;}
.side-link a:nth-child(2) span:after {content:''; display:inline-block; width:0.9em; height:0.9em; background:url('../images/main/ico_sidelink02.svg') center no-repeat; background-size: cover;}

@media all and (min-width:1025px){
	.side-link {position:fixed; top:7.5em; right:0; width:3.2em; height:29em; border-radius:1em 0 0 1em; overflow:hidden; z-index:10;}
	.side-link a {display:block; width:100%; height:17.25em; font-size:0.85em; font-weight: 400; color:#fff; word-break:normal; line-height:1.2;}
	.side-link a:nth-child(1) {padding:2.7em 1.2em;}
	.side-link a:nth-child(2) {padding:1.7em 1.2em;}
	.side-link a:nth-child(1) span:after {margin-top:0.5em;}
	.side-link a:nth-child(2) span:after {margin-top:0.5em;}
}
@media all and (max-width:1024px){
	.side-link {display: none;}
}



/****************************************************************
	section02
****************************************************************/
.section02 {background:url('../images/main/bg_illust.svg') center bottom 0% no-repeat; background-size:100%;}
.section02 .inner {position:relative;}
.section02:after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg, rgba(219, 242, 255, 0.00) 0%, #ECF8FF 25%); z-index:-1;}

.section02 .box {position:relative; padding:2em; box-shadow:5px 5px 20px 0px rgba(138, 162, 190, 0.30);}
.section02 .box .tit {font-family:'YdestreetB'; font-size:1.8em; color:#fff; line-height:120%;}
.section02 .box .sub {font-family:'YdestreetL'; font-size:0.85em; color:rgba(255,255,255,0.9); margin-top:0.5em;}
.section02 .box a {display:block; position:absolute; top:1.5em; right:1.5em; width:2.4em; height:2.4em; background:url('../images/main/ico_plus.svg')center no-repeat; border-radius:1em; text-indent:-9999em;}
.section02 .box.notice {background:url('../images/main/bg_box_notice.svg')center top 0% no-repeat; background-size:cover; border-radius:1em;}
.section02 .box.market {background:url('../images/main/bg_box_market.svg')center top 0% no-repeat; background-size:cover; border-radius:1em;}

.section02 ul.list li {background:#fff; border:3px solid rgba(0,0,0,0); border-radius:1em; box-shadow:0px 0px 20px 0px rgba(106, 165, 198, 0.10); transition:all 0.3s;}
.section02 ul.list.notice li:hover,
.section02 ul.list.notice li:focus {border:3px solid #00AF90; box-shadow:0px 0px 20px 0px rgba(106, 165, 198, 0.5);}
.section02 ul.list.market li:hover,
.section02 ul.list.market li:focus {border:3px solid #14A5F8; box-shadow:0px 0px 20px 0px rgba(106, 165, 198, 0.5);}

.section02 ul.list li .txt {padding:2.3em 1.6em;}
.section02 ul.list li .txt .date {display:inline-block; font-size:0.85em; padding:0.3em 0.7em; border-radius:2em;}
.section02 ul.list.notice li .txt .date {color:#00AF90; background:rgba(0, 175, 144, 0.10);}
.section02 ul.list.market li .txt .date {color:#14A5F8; background:rgba(20, 165, 248, 0.10);}
.section02 ul.list li .txt .tit {font-size:1.1em; font-weight:700; line-height:140%; color:#333; height:2.8em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin:1em 0 0.5em 0;}
.section02 ul.list li .txt .sub {font-size:0.85em; font-weight:400; line-height:140%; color:#777; height:2.55em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.section02 ul.list li .bottom {font-size:0.85em; font-weight:700; padding:1.2em 1.6em; border-top:1px solid #E3E8EC; text-align:right;}

@media (min-width:1025px) {
	.section02 .box,
	.section02 ul.list li {width:16.75em; height:16.75em; box-sizing:border-box;}
	
	.section02 .box.notice {float:left;}
	.section02 .box.market {float:right;}
	
	
	.section02 ul.list {}
	.section02 ul.list.notice {float:left; width:52.25em; margin-left:1em;}
	.section02 ul.list.market {float:right; width:52.25em; margin-right:1em;}
	.section02 ul.list.notice li {float:left; margin:0 1em 1em 0;}
	.section02 ul.list.market li {float:right; margin:0 0 0 1em;}
	.section02 ul.list li:nth-child(3) {margin-right:0;}
	.section02 ul.list li:nth-child(n+4) {margin-bottom:0;}
}
@media (max-width:1024px) and (min-width:768px) {
	.section02 .box.notice {background-position-y:0% !important; box-sizing:border-box;}
	.section02 .box.market {box-sizing:border-box;}
	.section02 .box .tit {font-size:1.6em;}
	
	.section02 .box.market {width:44.5%;
    height:16.7em;
    position:absolute;
    bottom:4.5em;
    right:2em;}
    
	.section02 ul.list {overflow:hidden; margin:1.5em 0;}
	.section02 ul.list li {float:left; width:48%; box-sizing:border-box; margin:0.5em 1%;}
}
@media (max-width:768px) {
	.section02 .box {width:100%; box-sizing:border-box; min-height:10em;}
	.section02 .box .tit {font-size:1.4em;}
	
	.section02 ul.list {margin:1em 0;}
	.section02 ul.list li {margin-bottom:0.5em;}
	.section02 ul.list li .txt, .section02 ul.list li .bottom {padding:1.2em;}
}


/****************************************************************
	section03
****************************************************************/
.section03:after {content:''; position:absolute; left:-3.2em; bottom:-9.9em; width:17.55em; height:17.55em; background:url('../images/main/obj_cirlce.svg') no-repeat; background-size:cover; z-index:-1;}
.section03 .sec-title-l {margin-bottom:0.85em;}
.section03 .sec-title-l:after {content:''; position:absolute; right:0; width:1.306em; height:1.583em; background:url('../images/main/ico_bubble.png') no-repeat; background-size:cover;}
.section03 .sec-title-l strong {color:#14A5F8;}

.section03 .quick-menu ul li {background:#FFF; border:1px solid #E3E8EC; border-radius:0.5em; box-shadow:0px 0px 30px 0px rgba(160, 183, 195, 0.15); box-sizing:border-box; overflow:hidden; transition:all 0.6s; transition-delay:1s;}
.section03 .quick-menu ul li a {display:block; width:100%; height:100%; padding:1.9em 2em 1.9em 1.4em; box-sizing:border-box; transition:all 0.3s;}

.section03 .quick-menu ul li:nth-child(1) a {background:url('../images/main/ico_info01.png') right 1.1em bottom 1.4em no-repeat; background-size:5em 5em;}
.section03 .quick-menu ul li:nth-child(2) a {background:url('../images/main/ico_info02.png') right 1.1em bottom 1.4em no-repeat; background-size:5em 5em;}
.section03 .quick-menu ul li:nth-child(3) a {background:url('../images/main/ico_info03.png') right 1.1em bottom 1.4em no-repeat; background-size:5em 5em;}
.section03 .quick-menu ul li a .tit {font-family:'YdestreetB'; font-size:1.1em; color:#333;}
.section03 .quick-menu ul li a .sub {font-size:0.85em; font-weight:400; color:#777;}

.section03 .quick-menu ul li:hover,
.section03 .quick-menu ul li:focus {box-shadow:0px 0px 30px 0px rgba(160, 183, 195, 0.3);}
.section03 .quick-menu ul li:hover a,
.section03 .quick-menu ul li:focus a {background-position:right 1.1em bottom 2em;}

.section03 .popup-wrap {border-radius:0.7em; border:1px solid #E3E8EC; background:#FFF; box-shadow:0px 4px 20px 0px rgba(160, 183, 195, 0.15); box-sizing:border-box;}
.section03 .popup-wrap:after {content:''; position:absolute; right:-2.85em; top:-2.4em; width:6.2em; height:7.3em; background:url('../images/main/obj_cirlce_grad.svg'); z-index:-1;}
.section03 .popup-wrap h3 {display:inline-block; position:absolute; left:0; font-family:'YdestreetB'; z-index:3;}
.popupSlider {display:block; position:relative; width:100%; margin:0 auto;}
.popupSlider .control {display:block; position:absolute; right:0; bottom:-2.75em; height:2.75em; z-index:3; text-align:center;}
.popupSlider .control > * {display:inline-block; position:relative; vertical-align:middle; bottom:auto; left:auto; right:auto; top:auto; height:100%; line-height:2.5em;}
.popupSlider .control .pager {width:auto; margin-right:1em; font-weight:700;}
.popupSlider .control .pager > * {display:inline-block; padding:0 0.5em; position:relative; vertical-align:middle; margin:0 0.05em;}
.popupSlider .control .pager .swiper-pagination-current {color:#03B494;}
.popupSlider .control .pager .dot {color:#CCCCCC;}
.popupSlider .control .pager .swiper-pagination-total {color:#CCCCCC;}
.popupSlider .control button {overflow:hidden; font-size:1em; width:2em; height:2em; vertical-align:middle; text-indent:-9999px;}
.popupSlider .control button.prev {background:url(../images/main/ico_prev.svg) center no-repeat;}
.popupSlider .control button.next {background:url(../images/main/ico_next.svg) center no-repeat;}
.popupSlider .control button.stop {background:url(../images/main/ico_pause.svg) center no-repeat;}
.popupSlider .control button.play {display:none; background:url(../images/main/ico_play.svg) center no-repeat;}
.popupSlider .slider {display:block; position:relative; height:100%; border-radius:.45em; overflow:hidden;}
.popupSlider .slider .swiper-container {}
.popupSlider .slider .swiper-container,
.popupSlider .slider .swiper-wrapper,
.popupSlider .slider .swiper-slide {height:100%;}
.popupSlider .slider .swiper-slide {}
.popupSlider .slider .swiper-slide > * {display:block;}
.popupSlider .slider .swiper-slide a {text-align:center; height:100%;}

@media (min-width:1025px) {
	.section03 .sec-title br, 
	.section03 .sec-title-l br {display:none;}
	.section03 .sec-title-l:after {top:0em;}
	
	.section03 .quick-menu {height:18em;}
	.section03 .quick-menu {margin-right:29em;}
	.section03 .quick-menu ul li {float:left; width:32%; height:14.5em;}
	.section03 .quick-menu ul li:nth-child(2) {margin:0 2%;}
	
	.section03 .popup-wrap {position:absolute; right:0; top:0; width:25.6em; height:100%; padding:0.75em 0.75em 2.75em 0.75em;}
	.section03 .popup-wrap h3 {bottom:-2em;}
	.section03 .popupSlider {height:14.5em;}
}
@media (max-width:1024px) and (min-width:768px) {
	.section03 .quick-menu ul {overflow:hidden; margin-bottom:2em;}
	.section03 .quick-menu ul li {float:left; width:32%; height:14.5em;}
	.section03 .quick-menu ul li:nth-child(2) {margin:0 2%;}
	.section03 .popup-wrap h3 {bottom:-2em;}
}
@media (max-width:768px) {
	.section03 .sec-title br, 
	.section03 .sec-title-l br {display:block;}
	.section03 .sec-title-l:after {bottom:-0.25em; width:1.1em; height:1.38em;}
	.section03 .quick-menu ul {margin:1em 0;}
	.section03 .quick-menu ul li {margin-bottom:0.5em;}
	.section03 .quick-menu ul li a {min-height:10em; padding:1.9em 7em 1.9em 1.4em;}
	.section03 .popup-wrap {margin:3em 0 1em 0;}
	.section03 .popup-wrap h3 {top:-2em;}
}



/****************************************************************
	section04
****************************************************************/
.section04 {background:url('../images/main/obj_gradbox.svg') top 0 right 0 no-repeat;}
.section04:after {content:''; position:absolute; left:11.5em; bottom:0em; width:15.3em; height:11.15em; background:url('../images/main/obj_cha.svg') left 0 top 0 no-repeat; background-size:cover; z-index:3;}

.section04 .title-wrap .sec-title em {position:relative; color:#03B494;}
.section04 .title-wrap .sec-title em:after {content:''; position:absolute; top:0.1em; right:-0.25em; width:7px; height:7px; border-radius:1em; background:#03B494;}
.section04 .title-wrap a {display:inline-block; font-family:'YdestreetL'; font-weight:300; font-size:0.85em; padding:0.8em 1.8em; background:#333; color:#fff; margin-top:1em; border-radius:2em;}

.section04 .terms-list li {color:#fff; border-radius:1em; overflow:hidden; transition:all 0.3s;}
.section04 .terms-list li:nth-child(1) {background:url('../images/main/img_terms01.jpg') center center no-repeat; background-size:cover;}
.section04 .terms-list li:nth-child(2) {background:url('../images/main/img_terms02.jpg') center center no-repeat; background-size:cover;}
.section04 .terms-list li:nth-child(3) {background:url('../images/main/img_terms03.jpg') center center no-repeat; background-size:cover;}

.section04 .terms-list li div {display:block; width:100%; height:100%; box-sizing:border-box; transition:all 0.5s;}
.section04 .terms-list li.on {box-shadow:0px 0px 20px 0px rgba(106, 165, 198, 0.10);}
.section04 .terms-list li.on div {padding:4.4em 3.4em; background:url('../images/main/bg_terms.svg');}
.section04 .terms-list li.on div .tit {font-family:'YdestreetB'; font-weight:600; font-size:1.9em; margin-bottom:0.4em;}
.section04 .terms-list li.on div .sub {position:relative; font-family:'YdestreetL'; font-weight:300; font-size:0.85em; line-height:140%;}
/*.section04 .terms-list li.on div .sub:after {content:''; position:absolute; left:0em; bottom:-3em; width:2.353em; height:2.353em; background:#fff url(../images/main/ico_next.svg) center no-repeat; background-size:1.4em; border-radius:2em;}*/
.section04 .terms-list li:not(.on) div {background:rgba(0,0,0,0.3);}
.section04 .terms-list li:not(.on) div p {word-break:break-all;}
	
@media (min-width:1025px) {
	.section04 .inner {overflow:hidden;}
	.section04 .inner > * {float:left;}
	
	.section04 .title-wrap {width:12.95em;}
	
	.section04 .terms-list {width:57.05em;}
	.section04 .terms-list li {float:left; width:7.99em; height:21em;}
	.section04 .terms-list li:nth-child(2) {margin:0 0.9em;}
	.section04 .terms-list li.on {width:39.25em;}
	.section04 .terms-list li.on div {background-size:48.25em 25.2em; background-position:top -2em left -4em;}
	
	.section04 .terms-list li:not(.on) div {padding:3em; background:rgba(0,0,0,0.3);}
	.section04 .terms-list li:not(.on) div .tit {position:relative; font-family:'YdestreetL'; font-weight:300; font-size:1.1em; writing-mode:vertical-rl; text-orientation:sideways;}
	.section04 .terms-list li:not(.on) div .tit:after {content:''; position:absolute; right:-0.25em; bottom:-3em; width:1.818em; height:1.818em; background:url(../images/main/ico_next_w.svg) center no-repeat; background-size:1.2em; border:1px solid rgba(255,255,255, 0.5); border-radius:2em;}
	.section04 .terms-list li:not(.on) div .sub {display:none;}
}
@media (max-width:1024px) {
	.section04:after {left:0; right:0; width:8.5em; height:5.5em;}
	
	.section04 .title-wrap a {display:none;}
	.section04 .terms-list {margin:1em 0;}
	.section04 .terms-list li {margin-bottom:0.5em;}
	.section04 .terms-list li div {min-height:12em;}
	.section04 .terms-list li div .tit {font-family:'YdestreetB'; font-weight:600; font-size:1.1em; margin-bottom:0.5em;}
	.section04 .terms-list li div .sub {position:relative; font-size:0.85em; font-weight:300; color:rgba(255, 255, 255, 0.8);}
	/*.section04 .terms-list li div .sub:after {content:''; position:absolute; right:0em; bottom:-2.5em; width:1.818em; height:1.818em; background:url(../images/main/ico_next_w.svg) center no-repeat; background-size:1.2em; border:1px solid rgba(255,255,255, 0.5); border-radius:2em;}*/
	.section04 .terms-list li div .sub br {display:none;}
	
	.section04 .terms-list li:not(.on) div {padding:2em 1em;}
}