:root{ /*Color*/ --color-point-blue : #056ba6; --color-light-blue : #2fa9ef; --color-medium-blue : #0672b0; --color-red : #f0331a; --color-white : #fff; --color-light-white: #f8f7f6; --color-light-grey : #999999; --color-medium-grey : #525252; --color-background-grey: #e9e4e2; --color-light-black : #323232; --color-black : #121212; --color-chrome : #ffcd40; --color-edge : #2ec2da; /*Box background*/ --box-background-blue : rgba(0,34,51,0.9); --box-background-black : rgba(0,0,0,0.6); --box-background-transparency : rgba(255,255,255,0.1); --dot-background-grey : rgba(255,255,255,0.5); /* Border */ --border-transparency-grey:rgba(255,255,255,0.2); --border-transparency-white:rgba(255,255,255,0.4); /*Point Font*/ --font-mons : 'Montserrat', sans-serif; /*Font weight*/ --weight-black : 900; --weight-extrabold : 800; --weight-bold : 700; --weight-semi-bold : 600; --weight-medium : 500; --weight-regular : 400; --weight-light : 300; --weight-extralight : 200; --weight-thin : 100; /*animation duration*/ --animation-quick-duration : all 0.2s ease; --animation-duration : all 0.3s ease; --animation-late-duration : all 0.5s ease; } .point_chrome{color : #ffcd40;} .point_edge{color : #2ec2da;} /* all */ html{font-size : 10px;} body{color : var(--color-white); font-weight : var(--weight-regular); overflow-y : auto;} .overlay_on{overflow-y : hidden;} .inner{max-width: 1200px; margin : 0 auto; width : 100%;} .flex_wrap{width : 100%; height : 100vh; display : flex; flex-direction : column; align-items : center; justify-content : center;} /* 디자인 관련*/ .scroll_icon{position : absolute;left : 50%; bottom : 40px; transform : translateX(-50%);} .scroll_icon p{position : relative;} .scroll_icon p::before{content : ''; display : block; width : 2px; height : 60px; background : grey; position : absolute; top : 0; left : 50%; transform : translateX(-50%);} .scroll_icon p::after {content :''; display:block; width:2px; height:20px; background:#fff; position:absolute; top:0; left:50%; transform:translateX(-50%); animation-name: scrollbar; animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: linear;} .scroll_icon h6{margin-top : 70px; font-size :1.6rem; font-weight : var(--weight-light);} /* last section scroll */ .scroll_icon.last_scroll p::after{top:40px;animation-name: lastscrollbar; animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: linear;} .kiosklogo{text-align : center;} .kiosklogo p{font-size : 4rem; font-weight :var(--weight-light); margin-top : 10px;} .kiosklogo p span{font-weight : var(--weight-bold);} /* ********************** SKIN ********************** */ header{position : fixed;width : 100%; height :auto; border-bottom : 1px solid var(--border-transparency-grey); transition : var(--animation-duration); z-index : 10;} header.on{background : var(--box-background-black);} header.main_header{position : fixed; z-index : 10;top: 0; left : 0;} header .inner{position : relative;} header .logo{position:absolute; top : 25px; left : 0;} header .logo h1 a{width : 170px; height : 40px; text-indent: -9999px;background : url(../img/logo.png)no-repeat center / cover; display : block;} header .nav{display : flex;align-items: center; justify-content : center;} header .nav .gnb{display : flex; align-items : center; justify-content : center; width : auto; margin : 0 auto; transition : var(--animation-duration);} header .nav .gnb.hidden{opacity : 0; visibility: hidden;} header .nav .gnb > li{position : relative;} header .nav .gnb > li > a{color : var(--color-white); line-height : 90px; padding : 0 30px; font-weight : var(--weight-bold); font-size : 1.8rem;} /*header dep2*/ header .nav .gnb > li .dep2{position : absolute; top : 100%; left : 0; padding : 40px 30px; background-color : var(--box-background-black); transition : var(--animation-late-duration); opacity : 0; visibility: hidden;} header .nav .gnb > li .dep2 li{margin-bottom : 15px; background-color : var(--color-white); border-radius : 20px; transition : var(--animation-duration);} header .nav .gnb > li .dep2 li.mb0{margin-bottom : 0;} header .nav .gnb > li .dep2 li:nth-child(5n){margin-bottom : 0;} /* header .nav .gnb > li .dep2 li a{width : 250px; height : 35px; line-height :35px; padding-left : 15px;display : block;font-size : 1.8rem; background : url(../img/overlay_arrw.png)no-repeat 95% 50%; color : var(--color-light-black); transition : var(--animation-duration); position : relative;z-index : 1; display : flex; align-items : center; justify-content : space-between;} */ header .nav .gnb > li .dep2 li a{width : 250px; height : 35px; line-height :35px; padding : 0 15px;display : block;font-size : 1.8rem; color : var(--color-light-black); transition : var(--animation-duration); position : relative;z-index : 1; display : flex; align-items : center; justify-content : space-between;} header .nav .gnb > li .dep2 li a::after{content :''; width : 0%; height : 100%; display : block; position : absolute; top : 0; left : 0; border-radius : 20px; opacity : 0; visibility: hidden; z-index : -1;transition : 0.4s;} header .nav .gnb > li::after{content:''; width : 0%; height : 3px; background-color : var(--color-light-blue); position : absolute; bottom : -3px;left : 50%; transform:translateX(-50%);opacity :0; transition : var(--animation-duration);} header .nav .gnb > li .dep2.flexdeps{display : flex;} header .nav .gnb > li .dep2.flexdeps .left_box{margin-right : 30px;} /* overlay */ header .nav .overlay_nav{position : absolute; top: 50%; transform : translateY(-50%); right : 0;display : flex; align-items : center; justify-content: flex-end;} header .nav .overlay_nav > span{font-size : 1.8rem; font-weight : var(--weight-bold); margin-right : 10px; display : block;} header .nav .overlay_nav .menu_btn{text-indent : -9999px; position : relative; width : 36px;height : auto; cursor : pointer;} header .nav .overlay_nav .menu_btn span{width : 36px; height : 4px; border-radius : 2px; background-color : var(--color-white); display : block; transition : var(--animation-duration);} header .nav .overlay_nav .menu_btn span:nth-child(2){margin : 8px 0;} /*open*/ header .nav .overlay_nav .menu_btn.open span{position : absolute;} header .nav .overlay_nav .menu_btn.open span:first-child{transform : rotate(45deg);} header .nav .overlay_nav .menu_btn.open span:nth-child(2){display : none;} header .nav .overlay_nav .menu_btn.open span:last-child{transform : rotate(135deg);} footer{background-color : var(--color-black);} footer .inner{display : flex; position : relative;padding : 40px 0; } footer .inner .footerlogo{min-width : 220px;} footer .inner .footerinfo{width : calc(100% - 220px);} footer .inner .footerinfo p{line-height : 1.3;} footer .inner .footerinfo p span{font-size : 1.6rem; margin-right : 10px;} footer .inner .footerinfo p span small{color : var(--color-light-grey); font-size : 1.6rem;} footer .inner .footerinfo p span small a{color : var(--color-light-grey);} footer .inner .footerinfo h6{font-size : 1.6rem; font-weight : var(--weight-light); color : #787878;margin-top : 5px;} footer .inner .top_btn{width : 56px; height : 56px; border-radius : 50%; background-color : var(--color-point-blue); line-height : 56px; text-align : center; position : absolute; right : -112px; top : -28px; cursor : pointer; z-index : 8;} .overlay{position : fixed; top : 0; left : 0; width : 100vw; height : 100vh; opacity : 0; visibility: hidden; display : flex; background : url(../img/overlay_bg.png)no-repeat 50% / cover; align-items: center; transition : var(--animation-late-duration); z-index : 9;} .overlay .inner{display : flex; justify-content: space-between; height : 100%; position : absolute; top : 200px; left : 50%; transform : translateX(-50%);} .overlay .inner .flex_item_wrap{width : calc(25% - (150px / 4));} .overlay .inner .flex_item_wrap h6{font-size : 3rem; font-weight : var(--weight-bold); color : var(--color-light-blue); margin-bottom : 30px;} .overlay .inner .flex_item_wrap h6 a{color : var(--color-light-blue);} .overlay .inner .flex_item_wrap ul li{width : 100%; background-color : var(--color-white); border-radius : 20px; padding : 10px 20px; margin-bottom : 10px; transition : var(--animation-duration); opacity : 0;} .overlay .inner .flex_item_wrap ul li:last-child{margin-bottom : 0;} .overlay .inner .flex_item_wrap ul li a{display : block;font-size : 1.8rem; color : var(--color-light-black); background : url(../img/overlay_arrw.png)no-repeat 100% 50%; transition : var(--animation-duration);} .overlay.visible{opacity : 1; visibility: visible;} .overlay.visible .flex_item_wrap h6 {animation : fadeInLeft 0.5s ease forwards;} .overlay.visible .flex_item_wrap ul li{animation : fadeInTop 0.5s ease forwards; cursor : pointer;} .overlay.visible .flex_item_wrap ul li:nth-child(1){animation-delay: 0.73s;} .overlay.visible .flex_item_wrap ul li:nth-child(2){animation-delay: 0.76s;} .overlay.visible .flex_item_wrap ul li:nth-child(3){animation-delay: 0.79s;} .overlay.visible .flex_item_wrap ul li:nth-child(4){animation-delay: 0.82s;} .overlay.visible .flex_item_wrap ul li:nth-child(5){animation-delay: 0.85s;} .overlay.visible .flex_item_wrap ul li:nth-child(6){animation-delay: 0.88s;} .overlay.visible .flex_item_wrap ul li:nth-child(7){animation-delay: 0.91s;} /* ********************** Intro ********************** */ .intro_wrap{height : 100vh; width : 100%;background : url(../img/intro_bg.png)no-repeat center center / cover; overflow-y:hidden;} .intro_wrap .contents_wrap .top_box{text-align : center;} .intro_wrap .contents_wrap .top_box h1{width : 420px; height : 150px;text-indent : -9999px; background:url(../img/intro_logo.png)no-repeat 50% 50% / cover; margin : 0 auto;} .intro_wrap .contents_wrap .top_box span{font-size : 2rem; display : inline-block; margin-top : 10px;} .intro_wrap .contents_wrap .bottom_box{display : flex; align-items : flex-start; justify-content: space-between; margin-top : 100px;} .intro_wrap .contents_wrap .bottom_box > div{ width : calc(50% - 40px);} .intro_wrap .contents_wrap .bottom_box .text_wrap{padding : 80px 0; position : relative;} .intro_wrap .contents_wrap .bottom_box h6{font-weight : var(--weight-bold); font-size : 3rem; margin-bottom : 20px;} .intro_wrap .contents_wrap .bottom_box a{color : var(--color-white);display : flex; justify-content : space-between; align-items : center; padding : 20px 25px; background-color : var(--color-point-blue); border-radius : 25px; width : 160px;} .intro_wrap .contents_wrap .bottom_box a span{font-weight : var(--weight-bold); font-size : 1.8rem;} .intro_wrap .contents_wrap .bottom_box .left_box .text_wrap{padding-left : 250px; background:url(../img/intro_left_bg.png)no-repeat center / contain;} .intro_wrap .contents_wrap .bottom_box .left_box .text_wrap .intro_atm{position : absolute; top: -160px;left : -10px;} .intro_wrap .contents_wrap .bottom_box .right_box{margin-top : 100px;} .intro_wrap .contents_wrap .bottom_box .right_box .text_wrap{padding-right : 250px; background:url(../img/intro_right_bg.png)no-repeat center / contain; text-align : right;} .intro_wrap .contents_wrap .bottom_box .right_box .text_wrap .intro_kiosk{position : absolute; top: -220px;right : -5px;} .intro_wrap .contents_wrap .bottom_box .right_box a{margin : 0 0 0 auto;} /* IE에서만 작동되는 팝업 */ .intro_popup{display : none;} .intro_popup.on{display : block;position : fixed; top : 100px; left : 200px;background : #fff; width : 450px; height : auto; background : url(../img/intro_popup_bg.jpg)no-repeat 50% / cover; } .intro_popup .intro_popup_exit{ display : flex; align-items : center; justify-content : flex-end; padding : 10px 0;} .intro_popup .intro_popup_exit img{width : 20px; margin-right : 15px; cursor : pointer;} .intro_popup .popup_wrap{width : 100%; height : 100%;padding : 40px 0; position : relative;} .intro_popup .popup_wrap::before{content : ''; display : block; position : absolute; left : 50%; top : 20px; transform : translateX(-50%); width : 90%; height : 1px; background-color : rgba(255,255,255,0.7);} .intro_popup .popup_wrap::after{content : ''; display : block; position : absolute; left : 50%; bottom : 20px; transform : translateX(-50%); width : 90%; height : 1px; background-color : rgba(255,255,255,0.7);} .intro_popup .popup_wrap .icon_wrap{display : flex; align-items: center; justify-content : center; margin-bottom : 20px;} .intro_popup .popup_wrap .icon_wrap li{margin-right : 20px;} .intro_popup .popup_wrap .icon_wrap li:last-child{margin-right : 0;} .intro_popup .popup_wrap .icon_wrap li img{width : 60px;} .intro_popup .popup_wrap h3{line-height : 1.3;color : #fff; font-weight : var(--weight-bold); font-size : 2rem; text-align : center;} /* ********************** Main ********************** */ #mobilepage{display : none;} .mainpage .s1 .slick-track{height : 100vh; position : relative;} .mainpage .s1 .slick-arrow{position : absolute; left : 50%; bottom : 0;} .mainpage .s1 .slick-dots{position : absolute; left : 50%; bottom : 24.7685vh; transform : translateX(-50%);display : flex; align-items : center;} .mainpage .s1 .slick-dots li{padding : 0 15px; transition : var(--animation-duration);} .mainpage .s1 .slick-dots li button{text-indent : -9999px; width : 12px; height :12px; border-radius : 50%; background-color : var(--dot-background-grey); cursor : pointer;} .mainpage .s1 .slick-dots li.slick-active button{background-color : var(--color-white);} .mainpage .s1 .main_slide .slide_items.first{background:url(../img/main_sec01_01_bg.png)no-repeat center / cover;} .mainpage .s1 .main_slide .slide_items.second{background:url(../img/main_sec01_02_bg.png)no-repeat center / cover;} .mainpage .s1 .main_slide .slide_items.third{background:url(../img/main_sec01_03_bg.png)no-repeat center / cover;} .mainpage .s1 .main_slide .slide_items{display : flex; justify-content : center; align-items : center;} .mainpage .s1 .main_slide .slide_items .text_wrap{display : flex; flex-direction : column; justify-content: center; align-items: center;} .mainpage .s1 .main_slide .slide_items .text_wrap > img{margin : 0 auto;} .mainpage .s1 .main_slide .slide_items .text_wrap h3{font-size : 6.5rem; font-weight : var(--weight-bold); margin-top : 15px;} .mainpage .s1 .main_slide .slide_items .text_wrap h3 .mobile_br{display : none;} .mainpage .s1 .main_slide .slide_items .text_wrap p{font-size : 2rem;margin-top : 30px; line-height : 1.5; margin-bottom : 40px; text-align : center;} .mainpage .s1 .main_slide .slide_items .text_wrap a{display : block; text-align : center; width : 250px; height : 50px; line-height : 50px;border-radius : 25px; background-color : var(--color-point-blue); color : var(--color-white); font-family : var(--font-mons); font-size : 1.6rem; font-weight : var(--weight-bold); margin-bottom : 60px;} .mainpage .s2{background : url(../img/main_sec02_bg.png)no-repeat center / cover;} .mainpage .s2 .tabbox{display : flex; align-items : center; justify-content : space-between; margin-top : 120px;} .mainpage .s2 .tabbox .tabitem_box{display : flex; align-items : center; flex-wrap : wrap; width : calc(50% - 25px); justify-content : space-between;} .mainpage .s2 .tabbox .tabitem_box .left_box{margin-right : 40px;} .mainpage .s2 .tabbox .tabitem_box dl{display : flex; align-items : center; margin-bottom : 15px; width :calc(50% - 20px);} .mainpage .s2 .tabbox .tabitem_box dl dt{margin-right : 15px; } .mainpage .s2 .tabbox .tabitem_box dl dd a{width : 200px; height : 50px; border-radius : 25px; background-color : var(--color-white); color : var(--color-point-blue); display : block; line-height : 50px; text-align : center; font-weight : var(--weight-bold); font-size : 1.6rem; cursor : pointer; transition : var(--animation-duration);} .mainpage .s2 .tabbox .tabitem_box dl.active dd a{background-color : var(--color-point-blue); color : var(--color-white);} .mainpage .s2 .tabbox .tabimg_box{width : calc(50% - 25px);} .mainpage .s2 .tabbox .tabimg_box .imgbox{ position : relative; padding : 100px 50px; z-index : 3;} .mainpage .s2 .tabbox .tabimg_box .imgbox::before{z-index : -1;content: "";position: absolute;width: 100%; height : 100%; top:0; left : 0;transform : scale(0);border : 4px solid var(--color-point-blue);animation : boxAnimation 1.5s ease forwards; animation-delay : 0s; box-sizing : border-box;} .mainpage .s2 .tabbox .tabimg_box .imgbox span::after{content : ''; display : block; width : 100%; height : 10px; background-color : rgba(255,255,255,0.1); position : absolute; bottom : 5px; left : 0; z-index : -1;} .mainpage .s2 .tabbox .tabimg_box .imgbox a{display : block; width : 150px; height : 50px; border-radius : 25px; line-height : 50px; text-align : center; background-color : var(--color-point-blue); color : var(--color-white); font-size : 1.6rem; font-weight : var(--weight-bold); margin-top : 30px;} .mainpage .s2 .tabbox .tabimg_box .imgbox.active span{font-size : 3rem; font-weight : var(--weight-bold); color : var(--color-light-blue);position : relative; z-index : 1; animation : opacityControl 2s ease forwards; animation-delay : 0s;} .mainpage .s2 .tabbox .tabimg_box .imgbox.active a{animation: slick-animationY 1.5s linear forwards;animation-delay: 0s;} .mainpage .s2 .tabbox .tabimg_box .imgbox.active img{position : absolute; top : 50%; right : 70px; transform : translateY(-50%); animation : fadeInTopTrans 1s ease-in forwards;} .mainpage .s2 .tabbox .tabimg_box .imgbox#t5 img{right : 50px;} .mainpage .s3{background : url(../img/main_sec03_bg.png)no-repeat center / cover;} .mainpage .s3 .solution_item{display : flex; margin-top : 60px; flex-wrap: wrap; justify-content : center; width : 100%;} .mainpage .s3 .solution_item.mobile{display : none;} .mainpage .s3 .solution_item li{border : 1px solid var(--color-white); background-color : var(--box-background-transparency); width : 33.3333%; text-align : center; height : 280px; transition : var(--animation-duration); position : relative;} .mainpage .s3 .solution_item li:nth-child(n+4){border-top : 0;} .mainpage .s3 .solution_item li a{display : block;font-weight : var(--weight-bold); font-size : 2rem; color : var(--color-white); width : 100%; height : 100%; padding : 20px; transition: var(--animation-duration);} .mainpage .s3 .solution_item li a div{display : flex; flex-direction : column; justify-content : center; width : 100%; height : 100%; position : relative;} .mainpage .s3 .solution_item li h6{margin-top : 30px; } .mainpage .s3 .solution_item li:last-child h6{margin-top : 15px;} .mainpage .s3 .solution_item li p{font-size : 1.7rem; color : var(--color-point-blue); font-weight : var(--weight-regular); opacity : 0; transition : var(--animation-duration);} .mainpage .s3 .solution_item li .viewmore_blue{width : 7px; height : 12px; background: url(../img//viewmore_blue.png)no-repeat 50% 50%;display : inline-block; margin-left : 10px;} .mainpage .s3 .solution_item li .left_top{ position:absolute; left:0; top:0; width:3px; height:0; transition:0.5s all; background:var(--color-point-blue); } .mainpage .s3 .solution_item li .right_top{ position:absolute; right:0; top:0; width:0; height:3px; transition:0.5s all; background:var(--color-point-blue); } .mainpage .s3 .solution_item li .right_bottom{ position:absolute; right:0; bottom:0; width:3px; height:0; transition:0.5s all; background:var(--color-point-blue); } .mainpage .s3 .solution_item li .left_bottom{ position:absolute; left:0; bottom:0; width:0px; height:3px; transition:0.5s all; background:var(--color-point-blue); } .mainpage .s4{background : url(../img/main_sec04_bg.png)no-repeat center / cover;} .mainpage .s4 .contactus{ display : flex; flex-direction : column; align-items : center; justify-content : center;} .mainpage .s4 .contactus .contact_text{text-align : center;} .mainpage .s4 .contactus .contact_text h5{margin-top : 10px; font-size : 4rem; font-weight : var(--weight-bold);} .mainpage .s4 .contactus .contact_text a{display : flex; align-items : center; justify-content : space-between; width : 280px; height : 70px; background-color : rgba(255,255,255,0.2); border-radius : 35px; padding : 0 30px; font-size : 2rem; font-weight: var(--weight-bold); color : var(--color-white); line-height : 70px;margin-top : 40px; transition : var(--animation-duration);} /* ****************************** FULLPAGE ANIMATION ******************************** */ body.fp-viewing-1st #fullpage .s1 .main_slide .slide_items.slick-active .text_wrap > img{width : 380px; animation : fadeInTop 1s ease forwards; } body.fp-viewing-1st #fullpage .s1 .main_slide .slide_items.slick-active .text_wrap h3{animation : fadeInTop 2s ease forwards;} body.fp-viewing-1st #fullpage .s1 .main_slide .slide_items.slick-active .text_wrap p{opacity : 0;animation : fadeInTop 2s ease forwards; animation-delay : 0.5s;} body.fp-viewing-1st #fullpage .s1 .main_slide .slide_items.slick-active .text_wrap a{opacity : 0;animation : fadeInTop 2s ease forwards; animation-delay : 1s;} /* @media all and (min-width : 1025px){ */ body.fp-viewing-2nd #fullpage .s2 .kiosklogo h3{ opacity :0;animation : fadeInTop 1s ease forwards; animation-delay : 0.5s;} body.fp-viewing-2nd #fullpage .s2 .kiosklogo p{opacity : 0;animation : fadeInTop 1s ease forwards; animation-delay : 0.5s;} body.fp-viewing-2nd #fullpage .s2 .tabbox .tabitem_box dl{opacity : 0;animation : fadeInopacity 1s ease forwards;} body.fp-viewing-2nd #fullpage .s2 .tabbox .tabitem_box dl:nth-child(1){animation-delay : 0.7s;} body.fp-viewing-2nd #fullpage .s2 .tabbox .tabitem_box dl:nth-child(2){animation-delay : 0.85s;} body.fp-viewing-2nd #fullpage .s2 .tabbox .tabitem_box dl:nth-child(3){animation-delay : 1s;} body.fp-viewing-2nd #fullpage .s2 .tabbox .tabitem_box dl:nth-child(4){animation-delay : 1.15s;} body.fp-viewing-2nd #fullpage .s2 .tabbox .tabitem_box dl:nth-child(5){animation-delay : 1.3s;} body.fp-viewing-2nd #fullpage .s2 .tabbox .tabitem_box dl:nth-child(6){animation-delay : 1.45s;} body.fp-viewing-2nd #fullpage .s2 .tabbox .tabitem_box dl:nth-child(7){animation-delay : 1.6s;} body.fp-viewing-2nd #fullpage .s2 .tabbox .tabimg_box{opacity :0; animation : fadeInLateLeft 1s ease forwards; animation-delay: 1.5s } body.fp-viewing-3rd #fullpage .s3 .kiosklogo h3{ opacity :0;animation : fadeInTop 1s ease forwards; animation-delay : 1s;} body.fp-viewing-3rd #fullpage .s3 .kiosklogo p{opacity : 0;animation : fadeInTop 1s ease forwards; animation-delay : 1s;} body.fp-viewing-3rd #fullpage .s3 .solution_item li{opacity :0; animation : fadeInRight 1s ease forwards; animation-delay : 1.5s;} body.fp-viewing-3rd #fullpage .s3 .solution_item li a div i{opacity :0; animation : fadeInopacity 1s ease forwards; animation-delay : 2.5s;} body.fp-viewing-3rd #fullpage .s3 .solution_item li a div h6{opacity :0; animation : fadeInTop 0.75s ease forwards; animation-delay : 3s;} body.fp-viewing-4th #fullpage .s4 .contactus .contact_text i img{opacity :0; animation : fadeInTop 1s ease forwards; animation-delay : 0.5s;} body.fp-viewing-4th #fullpage .s4 .contactus .contact_text h5{opacity :0;animation : fadeInTop 1s ease forwards; animation-delay : 1s;margin-top : 10px; font-size : 4rem; font-weight : var(--weight-bold);} body.fp-viewing-4th #fullpage .s4 .contactus .contact_text a{opacity :0;animation : fadeInTop 1s ease forwards; animation-delay : 1s;display : flex; align-items : center; justify-content : space-between; width : 280px; height : 70px; background-color : rgba(255,255,255,0.2); border-radius : 35px; padding : 0 30px; font-size : 2rem; font-weight: var(--weight-bold); color : var(--color-white); line-height : 70px;margin-top : 40px; transition : var(--animation-duration);} /* } */ /* ****************************** SUB ALL CSS ******************************** */ .contents_wrap{padding : 120px 0 130px; overflow : hidden; width: 100%; height : auto;} .contents_wrap .sub_logo_title{text-align : center;} .contents_wrap .sub_logo_title img{width : 190px;} .contents_wrap .sub_logo_title p{font-size : 4rem; font-weight : var(--weight-light); margin-top : 10px;} .contents_wrap .sub_logo_title p span{margin-left : 5px;font-weight :var(--weight-bold);} .sub_visual_wrap{width : 100%; height : 450px;padding-top : 100px; display : flex; align-items : center; justify-content : center; position : relative;} .sub_visual_wrap .text_box{text-align : center;} .sub_visual_wrap .text_box h3{font-size : 5rem; font-weight : var(--weight-bold); margin-bottom : 20px;} .sub_visual_wrap .text_box span{font-size : 1.8rem; display : block;} .sub_visual_wrap .text_box span.sub04_subtitle{line-height : 1.2;} .sub_visual_wrap .overflow_wrap{position : absolute; bottom : 0; left : 50%; transform : translate(-50%,50%); width : 100%;} .sub_visual_wrap .tab_box{ display : flex; align-items : center; border-radius : 30px; margin : 0 auto; width : fit-content;} .sub_visual_wrap .tab_box li{background-color : var(--color-point-blue);} .sub_visual_wrap .tab_box li:first-child{border-radius : 30px 0 0 30px;} .sub_visual_wrap .tab_box li:last-child{border-radius : 0 30px 30px 0;} .sub_visual_wrap .tab_box li a{display : block;padding : 20px 30px; color : var(--color-white);font-size : 1.8rem; font-weight :var(--weight-bold); transition: var(--animation-duration);} .sub_visual_wrap .tab_box li.on a{border-radius : 30px; background-color : rgba(255,255,255,0.3);} /* ****************************** SUB 01 ******************************** */ /* ALL */ .sub01 .sub_visual_wrap{ background : url(../img/sub01_bg.png)no-repeat 50% / cover; } /* ***** Sub 01 01***** */ .sub01 .sub01_01_wrap{background : url(../img/sub01_01_bg.png)no-repeat center / cover;} .sub01 .sub01_01_wrap .sub01_flex_wrap li{display : flex; align-items : center; justify-content : space-between; margin-top : 50px;} .sub01 .sub01_01_wrap .sub01_flex_wrap li img{width : 490px;} .sub01 .sub01_01_wrap .sub01_flex_wrap li .sub01_text{width : calc(100% - 540px); margin-left : 50px;} .sub01 .sub01_01_wrap .sub01_flex_wrap li .sub01_text p{font-size : 1.8rem; line-height : 1.5; word-break : keep-all;} .sub01 .sub01_01_wrap .sub01_flex_wrap li:first-child{position : relative; left : -50px;} .sub01 .sub01_01_wrap .sub01_flex_wrap li:nth-child(2) .sub01_text{margin-right : 50px;} .sub01 .sub01_01_wrap .sub_title{font-size : 3.6rem; font-weight: var(--weight-bold); text-align: center;} .sub01 .sub01_01_wrap .sub01_wwd_box{margin-top : 150px; text-align : center; padding : 60px 90px; background-color : rgba(6,6,6,0.45);} .sub01 .sub01_01_wrap .sub01_wwd_box h4{font-size : 3.6rem; font-weight :var(--weight-bold);} .sub01 .sub01_01_wrap .sub01_wwd_box span{font-size : 2rem; font-weight :var(--weight-bold); color : var(--color-light-blue); margin-top : 20px; display : block;} .sub01 .sub01_01_wrap .sub01_wwd_box p{font-size : 2rem; line-height : 1.5; margin-top : 60px;} .sub01 .sub01_01_wrap .sub01_wwd_box p:last-child{margin-top : 30px;} /* ***** Sub 01 02***** */ .sub01 .sub01_02_wrap{background-color : #002233;} .sub01 .sub01_02_wrap .history_wrap{padding : 70px 90px; background : url(../img/sub01_02_object01.png)no-repeat 50% / cover; border : 4px solid var(--color-light-blue); margin-top : 80px;} .sub01 .sub01_02_wrap .history_wrap li{padding-bottom : 40px; margin-bottom : 40px; border-bottom : 1px solid var(--border-transparency-white); text-align : center;} .sub01 .sub01_02_wrap .history_wrap li:last-child{padding-bottom : 0; margin-bottom : 0; border-bottom : 0;} .sub01 .sub01_02_wrap .history_wrap li span{width :180px; height : 50px; line-height : 50px; border-radius : 25px; background-color : var(--color-point-blue);font-size : 3rem; font-weight :var(--weight-bold); display : inline-block;} .sub01 .sub01_02_wrap .history_wrap li h6{margin-top : 30px; font-size : 2rem; font-weight :var(--weight-bold);} .sub01 .sub01_02_wrap .history_wrap li h6 small{font-size : 1rem; vertical-align: top;} /* ***** Sub 01 03***** */ .sub01 .sub01_03_wrap{background-color : #002233;} .sub01 .sub01_03_wrap .changingmarket{margin-top : 60px; text-align : center;} .sub01 .sub01_03_wrap .changingmarket span{display : inline-block; font-weight : var(--weight-bold);background-color : rgba(47,139,269,0.1); font-size : 2.4rem; color : var(--color-light-blue); padding : 10px 30px; border-radius : 25px;} .sub01 .sub01_03_wrap .changingmarket p{font-size : 1.8rem; line-height : 1.5; margin-top : 60px;} .sub01 .sub01_03_wrap .map_wrap{margin-top : 300px;} .sub01 .sub01_03_wrap .map_wrap .map_box{position : relative;} .sub01 .sub01_03_wrap .map_wrap .map_text_box{padding : 100px 60px 70px; background-color : var(--color-white); border : 3px solid var(--color-medium-blue); text-align : center; width : 1000px; position:absolute; top : 0; left : 50%; transform : translate(-50%,-50%);} .sub01 .sub01_03_wrap .map_wrap .map_text_box h4{font-size : 3rem; font-weight : var(--weight-bold); position : absolute;top: 0; left : 50%; transform : translate(-50%,-50%); width : 700px; height :80px; border-radius : 40px; line-height : 80px; background-color : var(--color-medium-blue);} .sub01 .sub01_03_wrap .map_wrap .map_text_box h4 .tabletbr{display : none;} .sub01 .sub01_03_wrap .map_wrap .map_text_box h4 span{font-size : 1.8rem; font-weight : var(--weight-regular);} .sub01 .sub01_03_wrap .map_wrap .map_text_box h5{font-size : 3rem; font-weight : var(--weight-bold); color : var(--color-medium-blue);} .sub01 .sub01_03_wrap .map_wrap .map_text_box p{line-height : 1.5; margin-top : 20px; font-size : 1.8rem; color : var(--color-light-black);} /* ****************************** SUB 02 ******************************** */ /* ALL */ .sub02 .sub_visual_wrap{ background : url(../img/sub02_bg.png)no-repeat 50% / cover; } .sub02 .kioskwrap{display : flex; align-items : center; justify-content : space-between;} .sub02 .kioskwrap > div{width : calc(50% - 50px);} .sub02 .kioskwrap .info_box h2{font-size : 4rem; font-weight : var(--weight-bold); color:var(--color-light-blue);} .sub02 .kioskwrap .info_box h2 span{font-size : 2.6rem;} .sub02 .kioskwrap .info_box p{font-size : 1.8rem; margin-top : 30px; line-height : 1.5;} .sub02 .kioskwrap .info_box .solution_title{font-size : 2rem; font-weight : var(--weight-bold); margin-top : 60px;} .sub02 .kioskwrap .info_box .solution_item{margin-top : 25px; display : flex; align-items : center; justify-content : space-between;} .sub02 .kioskwrap .info_box .solution_item.oneitem li{width : 100%;} .sub02 .kioskwrap .info_box .solution_item.twoitems li{width : calc(50% - 15px);} .sub02 .kioskwrap .info_box .solution_item.threeitems li{width : calc(33.3333% - 20px);} .sub02 .kioskwrap .info_box .solution_item.fouritems li{width : calc(25% - 10px);} .sub02 .kioskwrap .info_box .solution_item li{background-color : var(--color-white); border-radius : 10px; padding : 7px; height : 140px; transition : var(--animation-duration);} .sub02 .kioskwrap .info_box .solution_item li a{display : block; border-radius : 10px;height : 100%; transition : var(--animation-duration); border : 2px solid var(--color-white);} .sub02 .kioskwrap .info_box .solution_item li a div{padding : 15px 0; display : flex; justify-content : center; align-items : center; flex-direction : column; height : 100%;} .sub02 .kioskwrap .info_box .solution_item li a div .tabletitem{display : none;} .sub02 .kioskwrap .info_box .solution_item li a div.pt25{padding-top : 25px;} .sub02 .kioskwrap .info_box .solution_item li a div h6{color : var(--color-point-blue); font-size : 1.8rem; line-height : 1.5; font-weight : var(--weight-bold); margin-top : 15px; transition : var(--animation-duration); text-align : center;} .sub02 .kioskwrap .info_box .solution_item li a div h6.cms{margin-top : 0; font-size : 2.6rem;} .sub02 .kioskwrap .info_box .button_wrap{margin-top : 60px; display : flex; align-items : center; justify-content : space-between;} .sub02 .kioskwrap .info_box .button_wrap a{display : flex; justify-content : center; align-items : center; width : calc(50% - 10px); text-align : center; height : 70px;line-height : 1.3; border-radius : 10px; background-color : var(--color-point-blue); color: var(--color-white); font-size : 1.8rem; font-weight: var(--weight-bold); transition : var(--animation-duration); cursor : pointer;} .sub02 .kioskwrap .info_box .button_wrap a:first-child{margin-right : 20px;} .sub02 .kioskwrap .info_box .button_wrap a.nohover:hover{background-color : var(--color-point-blue); color : var(--color-white);} .sub02 .kioskwrap .slide_box {position : relative; padding : 0 90px;} .sub02 .kioskwrap .slide_box .model_slide{z-index: 1;} .sub02 .kioskwrap .slide_box .model_slide::after{content:''; display : block; width : 100%; height : 280px;border : 3px solid var(--color-point-blue); position : absolute; top : 50%; left : 50%; transform : translate(-50%,-50%); z-index : -1; box-sizing : border-box;} .sub02 .kioskwrap .slide_box .model_slide .img_wrap{width : 100%; margin : 0 auto;} .sub02 .kioskwrap .slide_box .model_slide .img_wrap img{margin : 0 auto;} .sub02 .kioskwrap .slide_box .slick-arrow{text-indent : -9999px; width : 50px; height : 50px; border-radius : 50%; border : 2px solid var(--color-point-blue); background-color : transparent; cursor : pointer; position : absolute; top : 50%; transform : translateY(-50%); transition : var(--animation-duration);} .sub02 .kioskwrap .slide_box .slick-prev{background : url(../img/sub02_slide_prev.png)no-repeat 50%; left : -90px;} .sub02 .kioskwrap .slide_box .slick-next{background : url(../img/sub02_slide_next.png)no-repeat 50%; right : -90px;} .sub02 .kioskwrap .slide_box .slick-dots{position : absolute; bottom : -40px; left : 50%; transform : translateX(-50%); display : flex; align-items : center; justify-content : center;} .sub02 .kioskwrap .slide_box .slick-dots li{margin : 0 5px; width : 16px; height : 16px; border-radius : 50%; background-color : var(--color-white); text-indent : -9999px; cursor : pointer;} .sub02 .kioskwrap .slide_box .slick-dots li.slick-active{background-color : var(--color-point-blue);} /* ***** Sub 02 bg***** */ .sub02 .sub02_01_wrap{background : url(../img/sub02_01_bg.png)no-repeat 50% / cover;} .sub02 .sub02_02_wrap{background : url(../img/sub02_02_bg.png)no-repeat 50% / cover;} .sub02 .sub02_03_wrap{background : url(../img/sub02_03_bg.png)no-repeat 50% / cover;} .sub02 .sub02_04_wrap{background : url(../img/sub02_04_bg.png)no-repeat 50% / cover;} .sub02 .sub02_05_wrap{background : url(../img/sub02_05_bg.png)no-repeat 50% / cover;} .sub02 .sub02_06_wrap{background : url(../img/sub02_06_bg.png)no-repeat 50% / cover;} .sub02 .sub02_07_wrap{background : url(../img/sub02_07_bg.png)no-repeat 50% / cover;} /* ***** Sub 02 pdf***** */ .pdf_item_wrap{width : 100%; height : 100vh; position : fixed; top : 0; left : 0; z-index : 10; display : none;} .pdf_item_wrap .pdf_item_dim{width : 100%; height : 100%; background-color : rgba(0,0,0,0.5);} .pdf_item_wrap .pdf_item{max-width : 1000px; width : 100%; margin : 0 auto; height : 100vh; overflow-y : scroll; background-color : var(--color-white); color : var(--color-black);position : fixed; top : 0; left : 50%; transform : translateX(-50%); padding : 40px 30px; font-size : 1.8rem; line-height : 1.3;} .pdf_item_wrap .pdf_item .top_box{border-bottom : 2px solid var(--color-light-black); padding-bottom : 40px; margin-bottom : 40px; text-align : right;} .pdf_item_wrap .pdf_item .top_box .close_btn{background-color : transparent; cursor : pointer;} /* ****************************** SUB 03 ******************************** */ /* ALL */ .sub03 .sub_visual_wrap{ background : url(../img/sub03_bg.png)no-repeat 50% / cover; } .sub03 .contents_wrap{background-color : #002233;} .sub03 .object_wrap{padding : 60px 0; width : 100%; height : auto; display : flex; align-items : center; justify-content : center;} .sub03 .object_wrap .icon_box{padding : 20px; background-color : var(--color-point-blue);margin-right : 50px;} .sub03 .object_wrap .icon_box .img_border_wrap{width : 145px; height : 145px; line-height : 141px; text-align : center; border : 2px solid var(--color-white); box-sizing : border-box;} .sub03 .object_wrap .icon_box .img_border_wrap .mobile_icon{display : none;} .sub03 .object_wrap .text_box{width : 480px;} .sub03 .object_wrap .text_box .sub03_text_title{font-size : 2.6rem; color : var(--color-light-blue); font-weight : var(--weight-bold);} .sub03 .object_wrap .text_box p{margin-top : 30px; font-size : 1.8rem; line-height : 1.4;} .sub03 .balloon_box{margin : 50px auto 30px; background : url(../img/sub03_balloon.png)no-repeat 50% / contain; width : 300px;height : 90px; text-align : center;} .sub03 .balloon_box .balloon_title{font-size : 2rem; line-height : 60px;} .sub03 .balloon_box .balloon_title span{font-weight : var(--weight-bold);} .sub03 .gradient_wrap .gradient_wrapper{display : flex; align-items : center; justify-content : space-between; position : relative; width : 100%;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item{background-color : var(--color-white); width : calc(25% - 15px); text-align : center; height : 300px;} .sub03 .gradient_wrap .gradient_wrapper.oneitem{justify-content : center;} .sub03 .gradient_wrap .gradient_wrapper.oneitem .gradient_item{width : 50%; margin-right: 0 !important;} .sub03 .gradient_wrap .gradient_wrapper.twoitems .gradient_item{width : calc(50% - 10px);} .sub03 .gradient_wrap .gradient_wrapper.threeitems .gradient_item{width : calc(33.3333% - 40px / 3);} .sub03 .gradient_wrap .gradient_wrapper.fiveitems .gradient_item{width : calc(20% - 80px / 5);} .sub03 .gradient_wrap .gradient_wrapper .gradient_item a{display : flex;align-items: center;justify-content: center; position : relative; height : 100%;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .mobileitem{display : none;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .gradient_dim{position : absolute; top : 0; left : 0; width : 100%; height : 100%; background: rgb(5,113,176,0.9);background: linear-gradient(145deg, rgba(5,113,176,0.9) 0%, rgba(4,66,143,0.9) 100%, rgba(4,66,143,0.9) 100%); padding : 40px; opacity:0; transition : var(--animation-duration);} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .gradient_dim span{font-size : 1.8rem; font-weight :var(--weight-bold); color : var(--color-point-blue); display : inline-block;padding : 8px 14px; border-radius : 15px; background-color : var(--color-white);} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .gradient_dim h5{margin-top : 60px; font-weight : var(--weight-bold);font-size : 1.8rem; color : var(--color-white); position : relative;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .gradient_dim h5::after{content:'';display : block; width : 0; height : 10px; position : absolute; bottom : -25px; left : 50%; transform : translateX(-50%); background : url(../img/sub03_item_after.png)no-repeat 50% / cover; transition : var(--animation-late-duration);} /* sub03 01 */ .sub03 .sub03_01_wrap .object_wrap{background : url(../img/sub03_01_boxbg.png)no-repeat center / cover;} /* sub03 02 */ .sub03 .sub03_02_wrap .object_wrap{background : url(../img/sub03_02_boxbg.png)no-repeat center / cover;} /* sub03 03 */ .sub03 .sub03_03_wrap .object_wrap{background : url(../img/sub03_03_boxbg.png)no-repeat center / cover;} /* sub03 04 */ .sub03 .sub03_04_wrap .object_wrap{background : url(../img/sub03_04_boxbg.png)no-repeat center / cover;} /* sub03 04 slide */ .sub03 .gradient_wrap .gradient_wrapper .slick-list{margin : 0 -10px;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item.slick-slide{background-color : transparent; padding : 0 10px;} .sub03 .gradient_wrap .gradient_wrapper.itemslide{display : block;} .sub03 .gradient_wrap .gradient_wrapper.itemslide .gradient_item a{background-color : var(--color-white);} .sub03 .gradient_wrap .gradient_wrapper.itemslide .slick-arrow{position : absolute; top : -60px; right : 0; text-indent : -9999px; width : 50px;height : 50px; border-radius : 50%; border : 2px solid var(--color-point-blue); background-color : transparent; cursor : pointer; transition : var(--animation-duration)} .sub03 .gradient_wrap .gradient_wrapper.itemslide .slick-prev{background : url(../img/sub02_slide_prev.png)no-repeat 50%; right : 60px;} .sub03 .gradient_wrap .gradient_wrapper.itemslide .slick-next{background : url(../img/sub02_slide_next.png)no-repeat 50%;} /* sub03 05 */ .sub03 .sub03_05_wrap .object_wrap{background : url(../img/sub03_05_boxbg.png)no-repeat center / cover;} /* ****************************** SUB 04 ******************************** */ /* sub04 01 */ .sub04 .sub_visual_wrap{ background : url(../img/sub04_bg.png)no-repeat 50% / cover; } .sub04 .sub_visual_wrap .tab_box li{border-radius : 30px;} .sub04 .contents_wrap{background-color : #002233;} .sub04 .support_wrapper{display : flex; justify-content : space-between; align-items :flex-start; margin-top : 60px;} .sub04 .support_wrapper > div{width : calc(50% - 25px); border : 2px solid var(--color-medium-blue); padding : 60px 30px;} .sub04 .support_wrapper > div.right_box{margin-top : 60px;} .sub04 .support_wrapper > div .support_cate{font-size : 1.8rem; font-weight :var(--weight-bold); display : flex; align-items : center;} .sub04 .support_wrapper > div .support_cate i{margin-right : 5px;} .sub04 .support_wrapper > div p{margin : 20px 0 30px;font-size : 3rem; font-weight :var(--weight-bold); color : var(--color-light-blue); line-height : 1.2;} .sub04 .support_wrapper > div .icon_box{display : flex; align-items : center; justify-content : flex-start;} .sub04 .support_wrapper > div .icon_box > div{display : flex; align-items : center;} .sub04 .support_wrapper > div .icon_box i{margin-right : 10px;} .sub04 .support_wrapper > div .icon_box i img{width : 16px;} .sub04 .support_wrapper > div .icon_box span{margin-right : 20px; font-size : 1.8rem; } .sub04 .support_wrapper > div .icon_box .form_toggle_btn{cursor : pointer;} .sub04 .support_wrapper > div .icon_box button{background : url(../img/plusbtn.png)no-repeat 50% 50% / cover; cursor : pointer; width : 37px; height : 37px;} .sub04 .support_wrapper > div .icon_box button.on{background : url(../img/minusbtn.png)no-repeat 50% 50% / cover;} .sub04 #form{display : none;} .sub04 #form.on{display : block;} .sub04 .label_wrap{background-color : #f5f5f5; padding : 100px 60px;border-radius : 30px; position : relative; margin-top : 140px;} .sub04 .label_wrap .form_title{position : absolute; top : 0; left : 50%;transform : translate(-50%,-50%); font-size : 3rem; font-weight :var(--weight-bold); border-radius : 40px; padding : 25px 0; background-color : var(--color-medium-blue); display : block; width : 600px; text-align : center;} .sub04 .label_wrap p{color : var(--color-light-black); font-size : 2rem; font-weight : var(--weight-bold);} .sub04 .label_wrap span{color : var(--color-light-black); font-size : 1.8rem;} .sub04 .label_wrap input{box-sizing : border-box;} .sub04 .label_wrap input[type="checkbox"]{width : 16px; height : 16px; border : 1px solid var(--color-light-grey); background-color : var(--color-white);} .sub04 .label_wrap input[type="checkbox"]:checked{background : url(../img/input_checked.png)no-repeat 50% / cover; border : 0;} .sub04 .label_wrap .red_star{color : var(--color-red); font-size : 2rem;} .sub04 .label_wrap .flex_field{display : flex; align-items : center; justify-content: space-between; flex-wrap :wrap;} .sub04 .label_wrap .flex_field div{display : flex; width : calc(50% - 25px); flex-wrap : wrap; margin-bottom: 30px;} .sub04 .label_wrap .flex_field div p{width : 100%; margin-bottom : 20px;} .sub04 .label_wrap .flex_field div.twoinput{justify-content : space-between;} .sub04 .label_wrap .flex_field div.twoinput input{width : calc(50% - 10px);} .sub04 .label_wrap .flex_field input{border : 1px solid #d2d2d2; border-radius : 5px; background-color : var(--color-white); height : 60px; padding-left : 20px; font-size : 1.6rem; color : var(--color-light-grey); width : 100%;} .sub04 .label_wrap .flex_field input:focus{outline : none;} .sub04 .label_wrap .flex_field input::placeholder{font-size : 1.6rem; color : var(--color-light-grey);} .sub04 .label_wrap .radio_field div{display : flex; flex-wrap : wrap; align-items : center;} .sub04 .label_wrap .radio_field div:nth-of-type(1) p{margin-bottom : 40px;} .sub04 .label_wrap .radio_field div.subject_box{width : 100%;} .sub04 .label_wrap .radio_field div.subject_box p{margin : 50px 0 20px;} .sub04 .label_wrap .radio_field div p{width : 100%;} .sub04 .label_wrap .radio_field div p.howcan{margin : 40px 0;} .sub04 .label_wrap .radio_field label{color : var(--color-light-black); font-size : 1.8rem; margin-right : 20px; cursor : pointer;} .sub04 .label_wrap .radio_field label.screen-hidden{margin-right : 0;} .sub04 .label_wrap .radio_field input[type="checkbox"]{margin-right : 10px;} .sub04 .label_wrap .radio_field input[type="text"]{width : 100%; height : 60px; border : 1px solid #d2d2d2; border-radius : 5px; background-color : var(--color-white); padding-left : 20px; font-size : 1.8rem; color : var(--color-light-grey);} .sub04 .label_wrap .radio_field input[type="text"]:focus{outline : none;} .sub04 .label_wrap .txt_field{margin-top : 50px;} .sub04 .label_wrap .txt_field p{margin-bottom : 20px;} .sub04 .label_wrap .txt_field textarea{width : 100%; height : 250px; resize : none; border : 1px solid #d2d2d2; border-radius : 5px; font-size : 1.6rem; color : var(--color-light-grey); padding : 20px; box-sizing : border-box;} .sub04 .label_wrap .txt_field textarea:focus{outline : none;} .sub04 .label_wrap .question_box{display : flex; align-items : center; justify-content : center; margin-top : 30px;} .sub04 .label_wrap .question_box button{background-color : #2c8fc2;border : 1px solid #2c8fc2; display : block; border-radius : 30px; padding : 20px 30px; font-size : 2rem; font-weight : var(--weight-bold); color : var(--color-white); transition : var(--animation-duration);cursor : pointer;} .sub04 .form_complete_wrap{background-color : #f5f5f5; padding : 50px 0;border-radius : 30px; position : relative; margin-top : 140px;} .sub04 .form_complete_wrap h4{color : var(--color-point-blue); font-size : 3rem; text-align : center; font-weight : var(--weight-bold);} /* ****************************** KEYFRAMES ******************************** */ @keyframes scrollbar { from {top:0;} to {top:40px;} } @keyframes lastscrollbar{ from {top : 40px;} to {top : 0;} } @keyframes fadeInLeft{ 0% {opacity : 0; transform : translateX(50%);} 100% {opacity : 1; transform : translateX(0);} } @keyframes fadeInLateLeft{ 0%{opacity : 0; transform : translateX(100%);} 100%{opacity : 1; transform : translateX(0);} } @keyframes fadeInTop{ 0% {opacity : 0; transform : translateY(100%);} 100% {opacity : 1; transform : translateY(0);} } @keyframes fadeInopacity{ 0% {opacity : 0;} 100% {opacity : 1;} } @keyframes fadeInRight{ 0%{ opacity :0; transform : translateX(100%);} 100%{opacity : 1; transform : translateX(0);} } @keyframes fadeInTopTrans{ 0%{transform : translateY(-30%);} 100%{transform : translateY(-50%);} } @keyframes slick-animationY{ 0%{opacity : 0;transform : translateY(-100%);} 100% {opacity : 1; transform : translateY(0);} } @keyframes boxAnimation{ 0%{} 100%{ transform : scale(1); /* background-size: 200% 4px, 4px 400%, 4px 400%, 55% 4px, 55% 4px; background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%; transform: scaleX(1) rotate(180deg); transition-delay: 0s, 0.2s, 0.4s; */ } } @keyframes opacityControl{ 0%{opacity : 0;} 100%{opaicyt : 1;} } /* ****************************** HOVER ******************************** */ @media all and (min-width : 1024px){ /* skin */ header .nav .gnb > li:hover::after{opacity : 1; width : 100%; left : 0; transform: none; z-index : 10;} header .nav .gnb > li:hover .dep2{opacity : 1; visibility: visible; z-index : 10;} header .nav .gnb > li .dep2 li:hover a{z-index : 10; color : var(--color-white);} header .nav .gnb > li .dep2 li a:hover::after{width : 100%;opacity : 1; visibility: visible;background : var(--color-light-blue);} /* header .nav .gnb > li .dep2 li:hover{background-color : var(--color-light-blue);} header .nav .gnb > li .dep2 li:hover a{background : url(../img/overlay_arrw_on.png)no-repeat 95% 50%; color : var(--color-white); z-index : 10;} */ /* all */ .overlay .inner .flex_item_wrap ul li:hover{background-color : var(--color-light-blue);} .overlay .inner .flex_item_wrap ul li:hover a{color : var(--color-white); background : url(../img/overlay_arrw_on.png)no-repeat 98% 50%;} /* main */ #fullpage .s2 .tabbox .tabitem_box dl dd a:hover{background-color : var(--color-point-blue); color : var(--color-white);} #fullpage .s3 .solution_item li:hover{background-color : var(--color-white);} #fullpage .s3 .solution_item li:hover h6{color : var(--color-point-blue);} #fullpage .s3 .solution_item li:hover a div p{opacity : 1; margin-top : 15px;} #fullpage .s3 .solution_item li:hover .left_top{height:100%;} #fullpage .s3 .solution_item li:hover .right_top{width:100%;} #fullpage .s3 .solution_item li:hover .right_bottom{height:100%;} #fullpage .s3 .solution_item li:hover .left_bottom{width:100%;} body.fp-viewing-4th #fullpage .s4 .contactus .contact_text a:hover{background-color : var(--color-point-blue);} /* Sub 02 */ .sub02 .kioskwrap .info_box .solution_item li:hover{background-color : var(--color-point-blue);} .sub02 .kioskwrap .info_box .solution_item li:hover a{ border : 2px solid var(--color-white);} .sub02 .kioskwrap .info_box .solution_item li:hover a div h6{color : var(--color-white);} .sub02 .kioskwrap .info_box .button_wrap a:hover{background-color : var(--color-white); color : var(--color-point-blue);} .sub02 .kioskwrap .info_box .button_wrap .nohover:hover{background-color : var(--color-point-blue); color : var(--color-white);} .sub02 .kioskwrap .slide_box .slick-prev:hover{background : var(--color-point-blue) url(../img/sub02_slide_prev_on.png)no-repeat 50%;} .sub02 .kioskwrap .slide_box .slick-next:hover{background : var(--color-point-blue) url(../img/sub02_slide_next_on.png)no-repeat 50%;} /* Sub 03 */ .sub03 .gradient_wrap .gradient_wrapper .gradient_item:hover .gradient_dim{opacity:1;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item:hover .gradient_dim h5::after{width : 56px;} .sub03 .gradient_wrap .gradient_wrapper.itemslide .slick-prev:hover{background : var(--color-point-blue) url(../img/sub02_slide_prev_on.png)no-repeat 50%;} .sub03 .gradient_wrap .gradient_wrapper.itemslide .slick-next:hover{background : var(--color-point-blue) url(../img/sub02_slide_next_on.png)no-repeat 50%;} /* Sub 04 */ .sub04 .label_wrap .question_box button:hover{background-color : var(--color-white); border : 1px solid #2c8fc2; color : #2c8fc2; } } /* ****************************** RESPONSIVE ******************************** */ @media all and (max-width : 1600px){ footer .inner .top_btn{right : 50px;} } @media all and (max-width : 1400px){ #fp-nav{display : none;} .sub01 .sub01_01_wrap .sub01_flex_wrap li:first-child{left : -20px;} } @media all and (max-width : 1200px){ /* all */ .inner{width : 89.5%;} header .nav .gnb > li{opacity : 0; visibility: hidden; text-indent : -9999px;} .scroll_icon{display : none;} .overlay .inner .flex_item_wrap{width : calc(25% - 10px);} .overlay .inner .flex_item_wrap ul li a{font-size : 1.5vw;}/* 18 */ /* Intro */ .intro_wrap .contents_wrap .top_box h1{width : 35vw; height : 12.500vw;}/* 420,150 */ .intro_wrap .contents_wrap .bottom_box > div{width : calc(50% - 0.833vw);}/* 10 */ .intro_wrap .contents_wrap .bottom_box > div >div > img{width : 16.667vw;}/* 200 */ .intro_wrap .contents_wrap .bottom_box .text_wrap{padding : 6.667vw 0;}/* 80 */ .intro_wrap .contents_wrap .bottom_box .left_box .text_wrap{padding-left : 18.333vw;}/* 220 */ .intro_wrap .contents_wrap .bottom_box .left_box .text_wrap .intro_atm{ top : -13.333vw;}/* 160 */ .intro_wrap .contents_wrap .bottom_box .right_box .text_wrap{padding-right : 17.500vw;}/* 210 */ .intro_wrap .contents_wrap .bottom_box .right_box .text_wrap .intro_kiosk{ top : -18.333vw}/* 220 */ .intro_wrap .contents_wrap .bottom_box h6{font-size : 2.500vw; margin-bottom : 1.667vw;}/* 30,20 */ .intro_wrap .contents_wrap .bottom_box a{width : 13.333vw; padding : 1.667vw 2.083vw;}/* 160,20,25 */ .intro_wrap .contents_wrap .bottom_box .right_box a{width : 15vw;}/* 180 */ .intro_wrap .contents_wrap .bottom_box a span{font-size : 1.5vw;}/* 18 */ /* ********************** Main ********************** */ body.fp-viewing-1st #fullpage .s1 .main_slide .slide_items.slick-active .text_wrap > img{width : 31.667vw}/* 380 */ .mainpage .s1 .main_slide .slide_items .text_wrap h3{font-size : 5.417vw;}/* 65 */ .mainpage .s1 .main_slide .slide_items .text_wrap p{margin : 2.500vw 0 3.333vw; font-size : 1.667vw;}/* 30,40 */ .mainpage .s2 .tabbox .tabitem_box{width : calc(60% - 10px);} .mainpage .s2 .tabbox .tabitem_box dl{justify-content : space-between;width : calc(50% - 10px);} .mainpage .s2 .tabbox .tabitem_box dl dt{margin-right : 5px;} .mainpage .s2 .tabbox .tabimg_box{width : calc(40% - 10px);} .mainpage .s2 .tabbox .tabimg_box .imgbox{padding : 80px 30px;}/* 100, 50 */ .mainpage .s2 .tabbox .tabimg_box .imgbox.active img{width : 23%; right : 15px;} .mainpage .s2 .tabbox .tabimg_box .imgbox.active span{font-size : 2.5vw;}/* 40 */ .mainpage .s2 .tabbox .tabimg_box .imgbox#t5 img{right : 15px;} .mainpage .s3 .solution_item li{height : 25vw;}/* 300 */ .mainpage .s3 .solution_item li a{padding : 1.667vw;}/* 20 */ /* ****************************** SUB 01 ******************************** */ /* ALL */ /* ***** Sub 01 01***** */ .sub01 .sub01_01_wrap .sub01_flex_wrap li img{width : 350px;} .sub01 .sub01_01_wrap .sub01_flex_wrap li .sub01_text{margin-left : 30px; width : calc(100% - 380px)} /* ***** Sub 01 01***** */ .sub01 .sub01_03_wrap .map_wrap .map_text_box{width : 90%;} .sub01 .sub01_03_wrap .map_wrap .map_text_box p br{display : none;} .sub01 .sub01_03_wrap .map_wrap .map_text_box h4{width : 62.500vw;height : auto; padding : 20px 0; line-height : 1;} .sub01 .sub01_03_wrap .map_wrap .map_text_box h4 .tabletbr{display : block;} /* ****************************** SUB 02 ******************************** */ .sub02 .kioskwrap .slide_box .model_slide .img_wrap img{height : 500px;} /* sub02 popup */ .pdf_item_wrap .pdf_item{width : 80%;} /* ****************************** SUB 04 ******************************** */ .sub04 .support_wrapper > div.left_box .icon_box{flex-direction : column; justify-content: center; align-items : stretch;} .sub04 .support_wrapper > div.left_box .icon_box > div:first-child{margin-bottom : 10px;} .sub04 .label_wrap .flex_field div{width : calc(50% - 10px);margin-bottom : 20px;} .sub04 .label_wrap .radio_field .help_box{flex-direction : column; justify-content : center; align-items : stretch;} .sub04 .label_wrap .radio_field .help_box .label_box{margin-bottom : 10px;} } @media all and (max-width : 1024px){ /* intro popup */ .intro_popup.on{display : none;} /* ********************** overlay ********************** */ .overlay{display : block; padding-top : 120px;} .overlay .inner{display : block; transform : none; position : static; overflow-y : scroll; padding : 0 40px 120px; width : 100%;} .overlay .inner .flex_item_wrap{width : 100%; margin-bottom : 20px;} .overlay .inner .flex_item_wrap h6{margin-bottom : 15px;} .overlay .inner .flex_item_wrap ul{display : flex;flex-wrap : wrap; align-items : center; justify-content : flex-start; width : 100%;} .overlay .inner .flex_item_wrap ul li{width : calc(33.333% - 20px / 3); padding : 15px 20px; margin-right : 10px;} .overlay .inner .flex_item_wrap ul li a{font-size : 1.758vw;}/*18*/ .overlay .inner .flex_item_wrap ul li:nth-child(3n){margin-right : 0;} .overlay .inner .flex_item_wrap ul li:last-child{margin-bottom : 10px;} /* ********************** Main ********************** */ #fullpage{display : none;} #mobilepage{display : block;} #mobilepage .s1 .main_slide .slide_items.slick-active .text_wrap > img{ width : 31.667vw;animation : fadeInTop 1s ease forwards; } #mobilepage .s1 .main_slide .slide_items.slick-active .text_wrap h3{animation : fadeInTop 2s ease forwards;} #mobilepage .s1 .main_slide .slide_items.slick-active .text_wrap p{opacity : 0;animation : fadeInTop 2s ease forwards; animation-delay : 0.5s;} #mobilepage .s1 .main_slide .slide_items.slick-active .text_wrap a{opacity : 0;animation : fadeInTop 2s ease forwards; animation-delay : 1s;} .mainpage .section{height : auto !important; padding : 100px 0;} .mainpage .section.s2{padding : 100px 0 200px; background : url(../img/m_main_sec02_bg.jpg)no-repeat 50% / cover;} .mainpage .section.s3{background : url(../img/m_main_sec03_bg.jpg)no-repeat 50% / cover;} .mainpage .section.s4{background : url(../img/m_main_sec04_bg.jpg)no-repeat 50% / cover;} .mainpage .section.s1, .mainpage .section.s5{padding : 0;} .mainpage .s1 .slick-track{height : 700px;} .mainpage .s1 .slick-dots{bottom : 160px;} .mainpage .s1 .main_slide .slide_items .text_wrap p{font-size : 1.953vw;} .mainpage .s1 .main_slide .slide_items .text_wrap a{width : 26.367vw; height : 5.859vw; line-height : 5.859vw; font-size : 1.953vw;} .mainpage .s2 .tabbox{flex-direction : column; margin-top : 80px;} .mainpage .s2 .tabbox .tabitem_box{width : 100%;justify-content : center; align-items : center;} .mainpage .s2 .tabbox .tabitem_box dl{width : auto; margin-right : 10px; margin-bottom : 10px;} .mainpage .s2 .tabbox .tabitem_box dl dd a{width : 26.367vw; height : 5.859vw; line-height : 5.859vw; font-size : 1.953vw;}/* 270,60,20*/ .mainpage .s2 .tabbox .tabitem_box dl dt{display : none;} .mainpage .s2 .tabbox .tabimg_box{width : 75%; display : flex; justify-content : flex-end; margin-top : 9.766vw;} .mainpage .s2 .tabbox .tabimg_box .imgbox{width : 100%;} .mainpage .s2 .tabbox .tabimg_box .imgbox.active span{font-size : 3rem;} .mainpage .s2 .tabbox .tabimg_box .imgbox.active img{width : 20%;} .mainpage .s3 .solution_item{flex-wrap : wrap;} .mainpage .s3 .solution_item.pc{display : none;} .mainpage .s3 .solution_item.mobile{display : flex; margin-top : 80px;} .mainpage .s3 .solution_item.mobile .mobilesolicon{display : none;} .mainpage .s3 .solution_item li{width : 50%; height : auto; } .mainpage .s3 .solution_item li:nth-child(1), .mainpage .s3 .solution_item li:nth-child(3){border-right : 0;} .mainpage .s3 .solution_item li:nth-child(3){border-top : 0;} .mainpage .s3 .solution_item li a{padding : 30px;} .mainpage .s3 .solution_item li:nth-child(4) a i{padding : 15px 0;} .mainpage .s3 .solution_item li p{opacity : 1; color : var(--color-point-white);margin-top : 20px;} .mainpage .s3 .solution_item li .viewmore_blue{background : url(../img/viewmore_white.png)no-repeat 50% / cover;} .mainpage .s4 .contactus .contact_text a{width : 27.344vw; height : 6.836vw; line-height : 6.836vw;padding : 0 2.930vw; font-size : 1.953vw;}/* 280,70,30,20*/ /* ****************************** SUB 01 ******************************** */ /* ***** Sub 01 01***** */ .sub01 .sub01_01_wrap .sub01_flex_wrap li{flex-direction : column; align-items : center; } .sub01 .sub01_01_wrap .sub01_flex_wrap li:first-child{position : static;} .sub01 .sub01_01_wrap .sub01_flex_wrap li:nth-child(2) img{order : 1;} .sub01 .sub01_01_wrap .sub01_flex_wrap li:nth-child(2) div{order : 2;} .sub01 .sub01_01_wrap .sub01_flex_wrap li .sub01_text{margin-left : 0; margin-top : 30px; width : 100%;} .sub01 .sub01_01_wrap .sub01_flex_wrap li:nth-child(2) .sub01_text{margin-right : 0;} .sub01 .sub01_01_wrap .sub01_flex_wrap li img{width : 500px;} /* ****************************** SUB 02 ******************************** */ /* ALL */ .sub02 .sub_visual_wrap .overflow_wrap{overflow-x : scroll; padding : 0 50px;} .sub02 .sub_visual_wrap .overflow_wrap .tab_box{width : 850px;} .sub02 .kioskwrap{flex-wrap : wrap;} .sub02 .kioskwrap .info_box{width : 100%;} .sub02 .kioskwrap .slide_box{margin : 60px auto 60px; width : 70%;} .sub02 .kioskwrap .info_box .solution_item li a div .hoveritem{display : none;} .sub02 .kioskwrap .info_box .solution_item li a div .tabletitem{display : block;} /* ****************************** SUB 03 ******************************** */ .sub03 .sub_visual_wrap .overflow_wrap{overflow-x : scroll;} .sub03 .sub_visual_wrap .tab_box{width : 1050px; display : flex; justify-content : center;} .sub03 .object_wrap{padding : 60px; flex-wrap : wrap;} .sub03 .object_wrap .icon_box{margin-right : 0;} .sub03 .object_wrap .text_box{width : 100%; margin-top : 40px; text-align : center;} .sub03 .gradient_wrap .gradient_wrapper{flex-wrap : wrap;justify-content : center;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item{width : calc(50% - 20px);} .sub03 .gradient_wrap .gradient_wrapper .gradient_item:nth-child(odd){margin-right : 40px;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item:nth-child(-n+2){margin-bottom : 40px;} .sub03 .gradient_wrap .gradient_wrapper.twoitems .gradient_item{width : calc(50% - 20px);} .sub03 .gradient_wrap .gradient_wrapper.threeitems .gradient_item{width : calc(50% - 20px);} .sub03 .gradient_wrap .gradient_wrapper.threeitems .gradient_item:nth-child(3){margin-right : 0;} .sub03 .gradient_wrap .gradient_wrapper.fiveitems .gradient_item{width : calc(50% - 20px);} .sub03 .gradient_wrap .gradient_wrapper.fiveitems .gradient_item:nth-child(n+3):nth-child(-n+4){margin-bottom : 40px;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .gradient_dim{opacity : 1; height : 30%; top : unset; bottom : 0; display : flex; justify-content :space-between; padding : 10px; align-items : center;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .gradient_dim h5{margin-top : 0;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .gradient_dim h5::after{display : none;} .sub03 .gradient_wrap .gradient_wrapper.itemslide .slick-list .slick-track .slick-slide{margin : 0 !important;} /* ****************************** SUB 04 ******************************** */ .sub04 .support_wrapper{flex-wrap : wrap;} .sub04 .support_wrapper > div{width : 100%;} .sub04 .support_wrapper > div.right_box{margin-top : 30px;} } @media all and (max-width : 768px){ /* 디자인관련 */ .kiosklogo h3 img{width : 29.948vw;}/* 230 */ .kiosklogo p{font-size : 6.510vw; margin-top : 2.604vw;}/* 50,20 */ /* ********************** SKIN ********************** */ /* header */ header{border-width : 0.260vw;}/* 2 */ header .logo{top : 3.906vw;}/* 30 */ header .logo h1 a{width : 28.646vw; height : 6.510vw;}/* 220,50 */ header .nav .overlay_nav > span{font-size : 3.646vw;}/* 28 */ header .nav .gnb > li > a{line-height : 14.323vw;}/* 110 */ /* menu btn */ header .nav .overlay_nav .menu_btn{width : 5.469vw;}/* 42 */ header .nav .overlay_nav .menu_btn span{width : 5.469vw; height : 0.651vw;}/* 42,5 */ header .nav .overlay_nav .menu_btn span:nth-child(2){margin : 1.302vw 0;}/* 10 */ /* footer */ footer .inner{flex-direction : column; align-items : center; justify-content : center; padding : 7.813vw 0;} /* 60 */ footer .inner .footerlogo{min-width : auto;} footer .inner .footerlogo img{width : 28.646vw; height : 6.510vw;}/* 220,50 */ footer .inner .footerinfo{margin-top : 5.208vw; width : 100%;}/* 40 */ footer .inner .footerinfo p{text-align: center;} footer .inner .footerinfo p span{font-size : 3.385vw;}/* 26 */ footer .inner .footerinfo p span small{font-size : 3.385vw;}/* 26 */ footer .inner .footerinfo p br{display : none;} footer .inner .footerinfo h6{font-size : 3.385vw; margin-top : 2.604vw; text-align : center;}/* 26,20 */ footer .inner .top_btn{width : 8.464vw; height : 8.464vw; line-height : 8.464vw; top : -4.167vw; right : 0;}/* 65,-32 */ footer .inner .top_btn img{width : 2.865vw;}/* 22 */ /* overlay */ .overlay{padding-top : 23.438vw;}/* 180 */ .overlay .inner{padding : 0 5.208vw 15.625vw;}/* 40,120 */ .overlay .inner .flex_item_wrap{margin-bottom : 3.906vw;}/* 30 */ .overlay .inner .flex_item_wrap h6{font-size : 5.208vw; margin-bottom : 3.255vw;}/* 4,25 */ .overlay .inner .flex_item_wrap ul li{width : calc(50% - 1.302vw); margin-right : 2.604vw; margin-bottom : 2.604vw; padding : 2.604vw; border-radius : 3.255vw;}/* 10,20,25 */ .overlay .inner .flex_item_wrap ul li:nth-child(3n){margin-right : 2.604vw;}/* 20 */ .overlay .inner .flex_item_wrap ul li:nth-child(2n){margin-right : 0;} .overlay .inner .flex_item_wrap ul li:last-child{margin-bottom : 2.604vw;}/* 20 */ .overlay .inner .flex_item_wrap ul li a{font-size : 3.385vw;}/* 26 */ /* ****************************** SUB ALL CSS ******************************** */ .contents_wrap{padding : 19.531vw 0;}/* 150 */ .contents_wrap .sub_logo_title img{width : 28.646vw;}/* 220 */ .contents_wrap .sub_logo_title p{font-size : 6.510vw; margin-top : 1.953vw;}/* 50,15 */ .contents_wrap .sub_logo_title p span{margin-left : 1.953vw;}/* 15 */ .sub_visual_wrap{height : 71.615vw; padding-top : 14.323vw;}/* 550,110 */ .sub_visual_wrap .text_box h3{font-size : 7.813vw;margin-bottom : 3.906vw;}/* 60,30 */ .sub_visual_wrap .text_box span{font-size : 3.646vw;}/* 28 */ .sub_visual_wrap .tab_box li a{font-size : 3.646vw; padding : 3.255vw 4.557vw;}/* 28,25,35 */ .sub_visual_wrap .tab_box li.on a{border-radius : 4.557vw;}/* 35 */ .sub_visual_wrap .tab_box li:first-child{border-radius : 4.557vw 0 0 4.557vw;}/* 35 */ .sub_visual_wrap .tab_box li:last-child{border-radius : 0 4.557vw 4.557vw 0;}/* 35 */ /* Intro */ .intro_wrap{background : url(../img/m_intro_bg.jpg)no-repeat 50% / cover;} .intro_wrap .inner{height : 100%;} .intro_wrap .contents_wrap{display : flex; justify-content : center; flex-direction : column; height : 100%; padding : 0;} .intro_wrap .contents_wrap .top_box h1{width : 42.969vw; height : 15.625vw;}/* 330,120 */ .intro_wrap .contents_wrap .top_box span{font-size : 3.906vw;}/* 30 */ .intro_wrap .contents_wrap .bottom_box{flex-direction : column; align-items : center; justify-content : center; margin-top : 10.417vw;}/* 80 */ .intro_wrap .contents_wrap .bottom_box > div{width : 80%;} .intro_wrap .contents_wrap .bottom_box > div >div > img{width : 18.229vw;}/* 140 */ .intro_wrap .contents_wrap .bottom_box .text_wrap{padding : 7.813vw 0;}/* 60 */ .intro_wrap .contents_wrap .bottom_box .left_box .text_wrap{padding-left : 22.135vw;}/* 170 */ .intro_wrap .contents_wrap .bottom_box .left_box .text_wrap .intro_atm{ top : -6.510vw;}/* 50 */ .intro_wrap .contents_wrap .bottom_box .right_box .text_wrap{padding-right : 22.135vw;}/* 170 */ .intro_wrap .contents_wrap .bottom_box .right_box .text_wrap .intro_kiosk{ top : -13.021vw;}/* 100 */ .intro_wrap .contents_wrap .bottom_box h6{font-size : 4.427vw; margin-bottom : 3.255vw;}/* 34,25 */ .intro_wrap .contents_wrap .bottom_box a{width : 26.042vw; padding : 2.604vw 3.255vw; border-radius : 3.906vw;}/* 200,20,25,30 */ .intro_wrap .contents_wrap .bottom_box .right_box{margin-top : 6.510vw;}/* 50 */ .intro_wrap .contents_wrap .bottom_box .right_box a{width : 28.646vw;}/* 220 */ .intro_wrap .contents_wrap .bottom_box a span{font-size : 3.385vw;}/* 26 */ /* ********************** Main ********************** */ .mainpage .s1 .main_slide .slide_items.first{background : url(../img/m_main_sec01_01.jpg)no-repeat 50% / cover;} .mainpage .s1 .main_slide .slide_items.second{background : url(../img/m_main_sec01_02.jpg)no-repeat 50% / cover;} .mainpage .s1 .main_slide .slide_items.third{background : url(../img/m_main_sec01_03.jpg)no-repeat 50% / cover;} body #mobilepage .s1 .main_slide .slide_items .text_wrap > img{width : 45.573vw;}/* 350 */ .mainpage .s1 .main_slide .slide_items .text_wrap h3{font-size : 8.464vw; text-align : center; margin-top : 3.255vw;}/* 65,25 */ .mainpage .s1 .main_slide .slide_items .text_wrap h3 .mobile_br{display : block;} .mainpage .s1 .main_slide .slide_items .text_wrap p{font-size : 3.906vw; margin : 5.208vw auto 6.510vw;}/* 30,40,50 */ .mainpage .s1 .main_slide .slide_items .text_wrap a{width : 39.063vw; height : 8.464vw; line-height : 8.464vw; margin-bottom: 7.813vw; font-size : 3.385vw; border-radius : 3.906vw;}/* 300,65,65,60,26,30 */ .mainpage .s1 .slick-track{height : 117.188vw;}/* 900 */ .mainpage .s1 .slick-dots{bottom : 13.021vw;}/* 100 */ .mainpage .s1 .slick-dots li{padding : 0 2.604vw;}/* 20 */ .mainpage .s1 .slick-dots li button{width : 2.344vw; height : 2.344vw;}/* 18 */ .mainpage .section.s2{padding : 15.625vw 0 23.438vw;}/* 120,180 */ .mainpage .s2 .tabbox{margin-top : 10.417vw;}/* 80 */ .mainpage .s2 .tabbox .tabitem_box dl{margin-right : 1.953vw; margin-bottom : 1.953vw;}/* 15 */ .mainpage .s2 .tabbox .tabitem_box dl:nth-child(2n){margin-right : 0;} .mainpage .s2 .tabbox .tabitem_box{justify-content : center;} .mainpage .s2 .tabbox .tabitem_box dl dd a{width : 41.667vw; height : 9.115vw; line-height : 9.115vw; font-size : 3.385vw; border-radius : 4.557vw;}/* 320,70,26,35 */ .mainpage .s2 .tabbox .tabimg_box{width : 90%; margin-top : 15.625vw; justify-content : center;}/* 120 */ .mainpage .s2 .tabbox .tabimg_box .imgbox{padding : 13.021vw 5.859vw;}/* 100,45 */ .mainpage .s2 .tabbox .tabimg_box .imgbox::before{border-width : 1.042vw;}/* 80 */ .mainpage .s2 .tabbox .tabimg_box .imgbox.active span{font-size : 5.208vw;}/* 40 */ .mainpage .s2 .tabbox .tabimg_box .imgbox span::after{height : 1.953vw;bottom : 0.977vw;}/* 15,7.5 */ .mainpage .s2 .tabbox .tabimg_box .imgbox a{width : 26.042vw; height : 7.813vw; line-height : 7.813vw; border-radius : 3.906vw; font-size : 3.125vw; margin-top : 5.208vw;}/* 200,60,30,24,40 */ .mainpage .s2 .tabbox .tabimg_box .imgbox.active img{width : 23%; right: 7.813vw;}/* 60 */ .mainpage .section.s3{padding : 15.625vw 0;}/* 120 */ .mainpage .s3 .solution_item.mobile .pcsolicon{display : none;} .mainpage .s3 .solution_item.mobile .mobilesolicon{display : inline-block; width : 13.021vw;}/* 100 */ .mainpage .s3 .solution_item.mobile{border-width : 0.260vw; margin-top : 13.021vw;}/* 2,100 */ .mainpage .s3 .solution_item li:nth-child(even){border-width : 0.260vw;}/* 2 */ .mainpage .s3 .solution_item li:nth-child(-n+2){border-width : 0.260vw;}/* 2 */ .mainpage .s3 .solution_item li h6{font-size :3.646vw;}/* 28 */ .mainpage .s3 .solution_item li h6{margin-top : 3.255vw;}/* 25 */ .mainpage .s3 .solution_item li:last-child h6{margin-top : 3.255vw;}/* 25 */ .mainpage .s3 .solution_item li:nth-child(4) a i{padding : 0;} .mainpage .s3 .solution_item li a i{display : flex; align-items : center; justify-content : center; height : 13.672vw;}/* 105 */ .mainpage .s3 .solution_item li p{margin-top : 3.906vw; font-size : 3.385vw;}/* 30,26 */ .mainpage .s3 .solution_item li .viewmore_blue{width : 1.302vw; height : 1.953vw; margin-left : 2.604vw;}/* 10,15,20 */ .mainpage .section.s4{padding : 15.625vw 0;}/* 120 */ .mainpage .s4 .contactus .contact_text i img{width : 28.646vw;}/* 220 */ .mainpage .s4 .contactus .contact_text h5{font-size : 6.510vw; margin-top : 1.953vw;}/* 50,15 */ .mainpage .s4 .contactus .contact_text a{margin : 5.208vw auto 0; width : 41.667vw; height : 9.766vw; border-radius : 5.208vw; font-size :3.385vw;}/* 40,320,75,40,26 */ .mainpage .s4 .contactus .contact_text a span img{width : 1.302vw;}/* 10 */ /* ****************************** SUB 01 ******************************** */ .sub01 .sub_visual_wrap {background : url(../img/m_sub01_bg.jpg)no-repeat 50% / cover;} /* ***** Sub 01 01***** */ .sub01 .sub01_01_wrap .sub_title{font-size : 5.990vw;}/* 46 */ .sub01 .sub01_01_wrap .sub01_flex_wrap li{margin-top : 7.813vw;}/* 60 */ .sub01 .sub01_01_wrap .sub01_flex_wrap li img{width : 78.125vw;}/* 600 */ .sub01 .sub01_01_wrap .sub01_flex_wrap li .sub01_text{margin-top : 5.208vw;}/* 40 */ .sub01 .sub01_01_wrap .sub01_flex_wrap li .sub01_text p{font-size : 3.646vw;}/* 28 */ .sub01 .sub01_01_wrap .sub01_wwd_box{margin-top : 13.021vw; padding : 5.208vw 7.813vw;}/* 100,40,60 */ .sub01 .sub01_01_wrap .sub01_wwd_box h4{font-size : 5.990vw;}/* 46 */ .sub01 .sub01_01_wrap .sub01_wwd_box span{font-size : 3.906vw; margin-top : 3.906vw;}/* 30*/ .sub01 .sub01_01_wrap .sub01_wwd_box p{font-size : 3.906vw; margin-top : 7.813vw;}/* 30,60 */ .sub01 .sub01_01_wrap .sub01_wwd_box p:last-child{margin-top : 7.813vw;}/* 60 */ /* ***** Sub 01 02***** */ .sub01 .sub01_02_wrap .history_wrap{border-width : 0.781vw; margin-top : 13.021vw; padding : 9.115vw 6.510vw;}/* 6,100,70,50 */ .sub01 .sub01_02_wrap .history_wrap li{padding-bottom : 6.510vw; margin-bottom : 6.510vw; border-width : 0.260vw;}/* 50,2 */ .sub01 .sub01_02_wrap .history_wrap li h6{margin-top : 5.208vw; font-size : 3.906vw; line-height : 1.3;}/* 40,30 */ .sub01 .sub01_02_wrap .history_wrap li span{width : 28.646vw; height : 7.813vw; line-height : 7.813vw; border-radius : 3.255vw; font-size : 5.208vw;}/* 220,60,60,25,40 */ /* ***** Sub 01 03***** */ .sub01 .sub01_03_wrap .changingmarket{margin-top: 10.417vw;}/* 80 */ .sub01 .sub01_03_wrap .changingmarket span{font-size : 4.427vw; padding : 2.604vw 4.557vw; border-radius : 4.557vw;}/* 34,20,35 */ .sub01 .sub01_03_wrap .changingmarket p{font-size : 3.646vw; margin-top : 10.417vw;}/* 28,80 */ .sub01 .sub01_03_wrap .changingmarket p br{display : none;} .sub01 .sub01_03_wrap .map_wrap{margin-top : 58.594vw;}/* 450 */ .sub01 .sub01_03_wrap .map_wrap .map_text_box{border-width : 0.781vw; padding : 15.625vw 3.906vw 9.115vw;}/* 6,120,30,70 */ .sub01 .sub01_03_wrap .map_wrap .map_text_box h4{width : 58.594vw; padding : 3.906vw 0; font-size : 5.208vw; border-radius : 5.208vw;}/* 450,30,40,40 */ .sub01 .sub01_03_wrap .map_wrap .map_text_box h4 span{font-size : 3.646vw;}/* 28 */ .sub01 .sub01_03_wrap .map_wrap .map_text_box h5{font-size : 5.208vw;}/* 40 */ .sub01 .sub01_03_wrap .map_wrap .map_text_box p{margin-top: 3.906vw;font-size : 3.646vw;}/* 30,28 */ .sub01 .sub01_03_wrap .map_wrap .map_box iframe{height : 104.167vw;}/* 800 */ /* ****************************** SUB 02 ******************************** */ /* ALL */ .sub02 .sub_visual_wrap{background : url(../img/m_sub02_bg.jpg)no-repeat 50% / cover;} .sub02 .sub_visual_wrap .overflow_wrap{overflow-x : scroll; padding : 0 6.510vw;}/* 50 */ .sub02 .sub_visual_wrap .overflow_wrap .tab_box{width : 156.250vw;}/* 1200 */ .sub02 .kioskwrap .slide_box{margin : 10.417vw auto; width : 80%; padding : 0 10.417vw;}/* 80 */ .sub02 .kioskwrap .slide_box .model_slide::after{height : 45.573vw; border-width : 0.781vw;}/* 350,6 */ .sub02 .kioskwrap .slide_box .model_slide .img_wrap img{height : 78.125vw;}/* 600 */ .sub02 .kioskwrap .slide_box .slick-arrow{width : 7.813vw; height : 7.813vw; border-width : 0.521vw;}/* 60,4 */ .sub02 .kioskwrap .slide_box .slick-next{right : -15.625vw;background : url(../img/m_sub02_slide_next.png)no-repeat 50%; background-size : 2.083vw;}/* 120,16 */ .sub02 .kioskwrap .slide_box .slick-prev{left : -15.625vw;background : url(../img/m_sub02_slide_prev.png)no-repeat 50%; background-size : 2.083vw;}/* 120,16 */ .sub02 .kioskwrap .slide_box .slick-dots{bottom : -7.813vw;}/* 60 */ .sub02 .sub02_05_wrap .kioskwrap .slide_box .slick-dots{bottom : 0;} .sub02 .kioskwrap .slide_box .slick-dots li{margin : 0 1.302vw; width : 2.604vw; height : 2.604vw;}/* 10,20 */ .sub02 .kioskwrap{flex-wrap : wrap;} .sub02 .kioskwrap .info_box{width : 100%;} .sub02 .kioskwrap .info_box h2{font-size : 6.510vw;}/* 50 */ .sub02 .kioskwrap .info_box p{font-size : 3.646vw; margin-top : 5.208vw;}/* 28,40 */ .sub02 .kioskwrap .info_box p br{display : none;} .sub02 .kioskwrap .info_box .solution_title{font-size : 3.906vw; margin-top : 10.417vw;}/* 30,80 */ .sub02 .kioskwrap .info_box .solution_item{margin-top : 4.557vw; justify-content : center; flex-wrap : wrap;}/* 35 */ .sub02 .kioskwrap .info_box .solution_item li{ height : 26.042vw; border-radius : 1.953vw;}/* 200,15 */ .sub02 .kioskwrap .info_box .solution_item li:nth-child(even){margin-left : 2.604vw;}/* 20 */ .sub02 .kioskwrap .info_box .solution_item li:nth-child(3){margin-top : 2.604vw;}/* 20 */ .sub02 .kioskwrap .info_box .solution_item li:nth-child(4){margin-top : 2.604vw;}/* 20 */ .sub02 .kioskwrap .info_box .solution_item li a div{padding : 2.604vw 0;}/* 20 */ .sub02 .kioskwrap .info_box .solution_item li a div.pt25{padding-top: 3.906vw;}/* 30 */ .sub02 .kioskwrap .info_box .solution_item li a div h6{font-size : 3.646vw; margin-top : 2.604vw;}/* 28,20 */ .sub02 .kioskwrap .info_box .solution_item li a div h6.cms{font-size : 4.688vw;}/* 36 */ .sub02 .kioskwrap .info_box .solution_item li a div .tabletitem{width : 7.813vw;}/* 60 */ .sub02 .kioskwrap .info_box .solution_item.oneitem li{width : 100%;} .sub02 .kioskwrap .info_box .solution_item.twoitems li{width : calc(50% - 2.604vw);}/* 20 */ .sub02 .kioskwrap .info_box .solution_item.threeitems li{width : calc(50% - 2.604vw);}/* 20 */ .sub02 .kioskwrap .info_box .solution_item.fouritems li{width : calc(50% - 2.604vw);}/* 20 */ .sub02 .kioskwrap .info_box .button_wrap{margin-top : 10.417vw;}/* 80 */ .sub02 .kioskwrap .info_box .button_wrap a:first-child{margin-right : 2.604vw;}/* 20 */ .sub02 .kioskwrap .info_box .button_wrap a{width : calc(50% - 1.302vw); height : 15.625vw; font-size : 3.646vw; border-radius : 1.953vw;}/* 10,120,28,15 */ /* sub02 pop up */ .pdf_item_wrap .pdf_item{padding : 3.906vw 5.208vw; font-size : 3.646vw; }/* 30,40,28 */ .pdf_item_wrap .pdf_item .top_box{border-bottom : 0.521vw solid var(--color-light-black); padding-bottom : 6.510vw; margin-bottom :6.510vw;}/* 4,50 */ .pdf_item_wrap .pdf_item .top_box .close_btn{width : 4.557vw;}/* 35 */ /* ****************************** SUB 03 ******************************** */ .sub03 .sub_visual_wrap{background : url(../img/m_sub03_bg.jpg)no-repeat 50% / cover;} .sub03 .sub_visual_wrap .tab_box{width : 195.313vw; justify-content : stretch; padding : 0 6.510vw;} .sub03 .object_wrap{padding : 7.813vw 6.510vw;}/* 60,50 */ .sub03 .object_wrap .icon_box{padding : 3.255vw;}/* 25 */ .sub03 .object_wrap .icon_box .img_border_wrap{width : 23.438vw; height : 23.438vw; border-width : 0.521vw; line-height : 22.396vw;}/* 180,180,4,172 */ .sub03 .object_wrap .icon_box .img_border_wrap .pc_icon{display : none;} .sub03 .object_wrap .icon_box .img_border_wrap .mobile_icon{display : inline-block; width : 13.021vw;}/* 100 */ .sub03 .object_wrap .text_box{margin-top: 7.813vw;}/* 60 */ .sub03 .object_wrap .text_box .sub03_text_title{font-size : 4.688vw;}/* 36 */ .sub03 .object_wrap .text_box p{font-size : 3.646vw; margin-top: 5.208vw;}/* 28,40 */ .sub03 .object_wrap .text_box p br{display : none;} .sub03 .object_wrap .text_box p br.text_br{display : block;} .sub03 .balloon_box{background : url(../img/m_sub03_balloon.png)no-repeat 50% / cover; width : 58.594vw; height : 15.625vw; margin : 10.417vw auto 6.510vw;}/* 450,120,80,50 */ .sub03 .balloon_box .balloon_title{font-size : 3.906vw; line-height: 10.417vw;}/* 80 */ .sub03 .gradient_wrap .gradient_wrapper .gradient_item{width : calc(50% - 2.604vw);height : 52.083vw;}/* 20,400 */ .sub03 .gradient_wrap .gradient_wrapper .gradient_item:nth-child(odd){margin-right : 5.208vw;}/* 40 */ .sub03 .gradient_wrap .gradient_wrapper .gradient_item:nth-child(-n+2){margin-bottom : 5.208vw;}/* 40 */ .sub03 .gradient_wrap .gradient_wrapper .gradient_item .pcitem{display : none;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .mobileitem{display : inline-block; width : 13.021vw;}/* 100 */ .sub03 .gradient_wrap .gradient_wrapper .gradient_item .mobileitem.recimg{width : 23.438vw;}/* 180 */ .sub03 .gradient_wrap .gradient_wrapper .gradient_item .mobileitem.recimg2{width : 19.531vw;}/* 150 */ .sub03 .gradient_wrap .gradient_wrapper .gradient_item .mobileitem.recimg3{width : 11.719vw;}/* 90 */ .sub03 .gradient_wrap .gradient_wrapper .gradient_item .gradient_dim{height : 40%; flex-direction : column; justify-content : center;} .sub03 .gradient_wrap .gradient_wrapper.fiveitems .gradient_item:nth-child(n+3):nth-child(-n+4){margin-bottom : 5.208vw;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .gradient_dim span{font-size : 3.646vw; padding : 1.302vw 2.083vw; border-radius : 2.604vw;}/* 28,10,16,20 */ .sub03 .gradient_wrap .gradient_wrapper .gradient_item .gradient_dim h5{margin-top: 1.953vw; font-size : 3.646vw;}/* 15,28 */ .sub03 .gradient_wrap .gradient_wrapper.oneitem .gradient_item img{width :20.833vw }/* 160 */ .sub03 .gradient_wrap .gradient_wrapper.itemslide .slick-arrow{width : 7.813vw; height : 7.813vw; border-width : 0.521vw; top : -10.417vw;} .sub03 .gradient_wrap .gradient_wrapper.itemslide .slick-prev{background : url(../img/m_sub02_slide_prev.png)no-repeat 50%; background-size : 2.083vw; right : 9.766vw;} .sub03 .gradient_wrap .gradient_wrapper.itemslide .slick-next{background : url(../img/m_sub02_slide_next.png)no-repeat 50%; background-size : 2.083vw;} /* ****************************** SUB 04 ******************************** */ .sub04 .sub_visual_wrap{background : url(../img/m_sub04_bg.jpg)no-repeat 50% / cover;} .sub04 .sub_visual_wrap .tab_box li{border-radius : 4.557vw;}/* 35 */ .sub_visual_wrap .tab_box li.on a{border-radius : 4.557vw;}/* 35 */ .sub04 .support_wrapper > div{border-width : 0.521vw; padding : 9.115vw 4.557vw;}/* 4,70,35 */ .sub04 .support_wrapper > div .support_cate{font-size : 3.646vw;}/* 28 */ .sub04 .support_wrapper > div .support_cate i img{width : 4.427vw}/* 34 */ .sub04 .support_wrapper > div p{margin : 3.906vw 0 5.208vw; font-size : 5.208vw;}/* 30,40,40 */ .sub04 .support_wrapper > div.left_box .icon_box > div:first-child{margin-bottom : 2.604vw;}/* 20 */ .sub04 .support_wrapper > div.right_box{margin-top : 5.208vw;}/* 40 */ .sub04 .support_wrapper > div .icon_box i img{width : 3.385vw;}/* 26 */ .sub04 .support_wrapper > div .icon_box span{margin-right : 2.604vw; margin-left : 2.604vw; font-size : 3.646vw;}/* 20,28 */ .sub04 .support_wrapper > div .icon_box button{width : 6.510vw; height : 6.510vw;}/* 50 */ .sub04 .label_wrap{padding : 15.625vw 5.208vw; margin-top : 18.229vw; border-radius : 3.906vw;}/* 120,40,140,30 */ .sub04 .label_wrap .form_title{font-size : 5.208vw; border-radius : 5.208vw; padding : 3.255vw 0; width : 71.615vw;}/* 40,25,550 */ .sub04 .label_wrap .red_star{font-size : 3.906vw;}/* 30 */ .sub04 .label_wrap .flex_field div{width : 100%; margin-bottom : 5.208vw;}/* 40 */ .sub04 .label_wrap .flex_field div p{font-size : 3.906vw; margin-bottom : 3.906vw;}/* 30 */ .sub04 .label_wrap .flex_field input{border-width : 0.260vw; border-radius : 1.042vw; height : 10.417vw; padding-left : 3.255vw; font-size : 3.385vw;}/* 2,8,80,25,26 */ .sub04 .label_wrap .flex_field input::placeholder{font-size : 3.385vw;}/* 26 */ .sub04 .label_wrap p{font-size : 3.906vw;}/* 30 */ .sub04 .label_wrap .radio_field div.subject_box p{margin : 9.115vw 0 5.208vw;}/* 70,40 */ .sub04 .label_wrap .radio_field div:nth-of-type(1) p{margin-bottom : 6.510vw;}/* 50 */ .sub04 .label_wrap input[type="checkbox"]{width : 3.125vw; height : 3.125vw; border-width : 0.260vw;}/* 24,2 */ .sub04 .label_wrap input[type="checkbox"]:checked{background : url(../img/m_input_checked.png)no-repeat 50% / cover;} .sub04 .label_wrap .radio_field input[type="text"]{height : 10.417vw; border-width : 0.260vw; border-radius : 1.042vw; padding-left : 3.255vw; font-size : 3.646vw;}/* 80,2,8,25,28 */ .sub04 .label_wrap .radio_field label{font-size : 3.646vw; margin-right : 3.906vw;}/* 28,30 */ .sub04 .label_wrap .radio_field .help_box .label_box{margin-bottom : 2.604vw;}/* 20 */ .sub04 .label_wrap .radio_field div p.howcan{margin : 6.510vw 0;}/* 50 */ .sub04 .label_wrap .txt_field{margin-top : 7.813vw;}/* 60 */ .sub04 .label_wrap .txt_field p{margin-bottom : 3.906vw;}/* 30 */ .sub04 .label_wrap .txt_field textarea{height : 58.594vw; border-width : 0.260vw; border-radius : 1.042vw; padding : 3.906vw; font-size : 3.385vw;}/* 450,2,8,30,26 */ .sub04 .label_wrap .question_box{margin-top : 5.208vw;}/* 40 */ .sub04 .label_wrap .question_box button{border-width : 0.260vw; border-radius : 5.208vw; padding : 3.255vw 5.208vw; font-size : 3.906vw;}/* 2,40,25,40,30 */ .sub04 .form_complete_wrap{margin-top : 18.229vw; border-radius : 3.906vw; padding : 6.510vw 0;} .sub04 .form_complete_wrap h4{font-size : 5.208vw;} } @media all and (max-width : 500px){ /* 디자인관련 */ .kiosklogo h3 img{width : 115px;} .kiosklogo p{font-size : 2.5rem; margin-top : 10px;} /* ********************** SKIN ********************** */ /* header */ header{border-width : 1px;} header .logo{top : 15px;} header .logo h1 a{width : 110px; height : 25px;} header .nav .overlay_nav > span{font-size : 1.4rem;} header .nav .gnb > li > a{line-height : 55px;} /* menu btn */ header .nav .overlay_nav .menu_btn{width : 21px;} header .nav .overlay_nav .menu_btn span{width : 21px; height : 3px;} header .nav .overlay_nav .menu_btn span:nth-child(2){margin : 5px 0;} /* footer */ footer .inner{padding : 30px 0;} footer .inner .footerlogo img{width : 110px; height : 25px;} footer .inner .footerinfo{margin-top : 20px;} footer .inner .footerinfo p span{font-size : 1.3rem;} footer .inner .footerinfo p span small{font-size : 1.3rem;} footer .inner .footerinfo h6{font-size : 1.3rem;margin-top: 10px;} footer .inner .top_btn{width : 32px; height : 32px; line-height : 26px; top : -16px;} footer .inner .top_btn img{width : 11px;} /* overlay */ .overlay{padding-top : 90px;} .overlay .inner{padding : 0 20px 60px;} .overlay .inner .flex_item_wrap{margin-bottom : 15px;} .overlay .inner .flex_item_wrap h6{font-size : 2rem; margin-bottom : 13px;} .overlay .inner .flex_item_wrap ul li{width : 100%; margin-right : 0; margin-bottom : 10px; padding : 10px; border-radius : 13px;} .overlay .inner .flex_item_wrap ul li:nth-child(3n){margin-right : 0} .overlay .inner .flex_item_wrap ul li:last-child{margin-bottom : 10px;} .overlay .inner .flex_item_wrap ul li a{font-size : 1.5rem;} /* Intro */ .intro_wrap .contents_wrap .top_box h1{width : 180px; height : 65px;} .intro_wrap .contents_wrap .top_box span{font-size : 1.5rem;} .intro_wrap .contents_wrap .bottom_box{margin-top : 60px;} .intro_wrap .contents_wrap .bottom_box > div{width : 100%;} .intro_wrap .contents_wrap .bottom_box > div >div > img{width : 80px;} .intro_wrap .contents_wrap .bottom_box .text_wrap{padding : 30px 0;} .intro_wrap .contents_wrap .bottom_box .left_box .text_wrap{padding-left : 100px; background-size : cover; background:url(../img/m_intro_left_bg.png)no-repeat left 50%;} .intro_wrap .contents_wrap .bottom_box .left_box .text_wrap .intro_atm{ top : -35px;} .intro_wrap .contents_wrap .bottom_box .right_box .text_wrap{padding-right : 90px; background-size : cover;background:url(../img/m_intro_right_bg.png)no-repeat right 50%;} .intro_wrap .contents_wrap .bottom_box .right_box .text_wrap .intro_kiosk{ top : -50px;} .intro_wrap .contents_wrap .bottom_box h6{font-size : 1.7rem;margin-bottom : 13px;} .intro_wrap .contents_wrap .bottom_box a{width : 100px; padding : 10px 13px; border-radius : 15px;} .intro_wrap .contents_wrap .bottom_box .right_box{margin-top : 40px;} .intro_wrap .contents_wrap .bottom_box .right_box a{width : 120px;} .intro_wrap .contents_wrap .bottom_box a span{font-size : 1.4rem;} /* ********************** Main ********************** */ body #mobilepage .s1 .main_slide .slide_items .text_wrap > img{width : 150px;} .mainpage .s1 .main_slide .slide_items .text_wrap h3{font-size : 3rem; margin-top : 10px;} .mainpage .s1 .main_slide .slide_items .text_wrap p{font-size : 1.4rem; margin : 20px auto 25px;} .mainpage .s1 .main_slide .slide_items .text_wrap a{width : 150px;height : 30px; line-height : 30px;margin-bottom: 30px; font-size : 1.3rem; border-radius : 15px;} .mainpage .s1 .slick-track{height : 450px;} .mainpage .s1 .slick-dots{bottom : 50px;} .mainpage .s1 .slick-dots li{padding : 0 6px;} .mainpage .s1 .slick-dots li button{width : 10px; height : 10px;} .mainpage .section.s2{padding : 60px 0 90px;} .mainpage .s2 .tabbox{margin-top : 40px;} .mainpage .s2 .tabbox .tabitem_box dl{margin-right : 8px; margin-bottom : 8px; width : calc(50% - 8px);} .mainpage .s2 .tabbox .tabitem_box dl dd{width : 100%;} .mainpage .s2 .tabbox .tabitem_box dl dd a{width : 100%; height : 35px; line-height : 35px; font-size : 1.2rem; border-radius : 18px;} .mainpage .s2 .tabbox .tabimg_box{margin-top : 16vw;} .mainpage .s2 .tabbox .tabimg_box .imgbox{padding : 50px 30px;} .mainpage .s2 .tabbox .tabimg_box .imgbox::before{border-width : 4px;} .mainpage .s2 .tabbox .tabimg_box .imgbox.active span{font-size : 1.8rem;} .mainpage .s2 .tabbox .tabimg_box .imgbox span::after{height : 8px; bottom : 3px;} .mainpage .s2 .tabbox .tabimg_box .imgbox a{width : 100px; height : 30px; line-height : 30px; border-radius : 15px; font-size : 1.2rem; margin-top : 20px;} .mainpage .s2 .tabbox .tabimg_box .imgbox.active img{width : 23%; right : 30px;} .mainpage .section.s3{padding : 60px 0; overflow-x : hidden;} .mainpage .s3 .solution_item.mobile{border-width : 1px; margin-top : 50px;} .mainpage .s3 .solution_item li{width : 100%; border-bottom : 1px solid var(--color-white);} .mainpage .s3 .solution_item li:nth-child(1), .mainpage .s3 .solution_item li:nth-child(3){border-right : 1px solid var(--color-white);} .mainpage .s3 .solution_item li:nth-child(2){border-top : 0;} .mainpage .s3 .solution_item li h6{font-size :1.6rem;} .mainpage .s3 .solution_item li h6{margin-top : 13px;} .mainpage .s3 .solution_item li a{padding : 20px;} .mainpage .s3 .solution_item li a i{height : auto;} .mainpage .s3 .solution_item li p{margin-top : 10px; font-size : 1.4rem;} .mainpage .s3 .solution_item li .viewmore_blue{width : 7px; height : 10px; margin-left : 10px;} .mainpage .section.s4{padding : 60px 0;} .mainpage .s4 .contactus .contact_text i img{width : 110px;} .mainpage .s4 .contactus .contact_text h5{font-size : 2.5rem; margin-top : 8px;} .mainpage .s4 .contactus .contact_text a{margin : 20px auto 0; width : 160px; height : 32px; border-radius : 20px; font-size :1.3rem;} .mainpage .s4 .contactus .contact_text a span img{width : 5px;} /* ****************************** SUB ALL CSS ******************************** */ /* ALL */ .contents_wrap{padding : 75px 0;} .contents_wrap .sub_logo_title img{width : 110px;} .contents_wrap .sub_logo_title p{font-size : 2.5rem; margin-top : 8px;} .contents_wrap .sub_logo_title p span{margin-left : 8px;} .sub_visual_wrap{height : 275px; padding-top : 55px;} .sub_visual_wrap .text_box h3{font-size : 3rem; margin-bottom : 15px;} .sub_visual_wrap .text_box span{font-size : 1.4rem;} .sub_visual_wrap .tab_box li a{font-size : 1.4rem; padding : 13px 18px;} .sub_visual_wrap .tab_box li.on a{border-radius : 18px;} .sub_visual_wrap .tab_box li:first-child{border-radius : 18px 0 0 18px} .sub_visual_wrap .tab_box li:last-child{border-radius : 0 18px 18px 0;} /* ****************************** SUB 01 ******************************** */ /* ***** Sub 01 01***** */ .sub01 .sub01_01_wrap .sub_title{font-size : 2.3rem;} .sub01 .sub01_01_wrap .sub01_flex_wrap li{margin-top : 40px;} .sub01 .sub01_01_wrap .sub01_flex_wrap li img{width : 100%;} .sub01 .sub01_01_wrap .sub01_flex_wrap li .sub01_text{margin-top : 20px;} .sub01 .sub01_01_wrap .sub01_flex_wrap li .sub01_text p{font-size : 1.4rem;} .sub01 .sub01_01_wrap .sub01_wwd_box{margin-top : 50px; padding : 20px 30px;} .sub01 .sub01_01_wrap .sub01_wwd_box h4{font-size : 2.3rem;} .sub01 .sub01_01_wrap .sub01_wwd_box span{font-size : 1.5rem; margin-top : 15px;} .sub01 .sub01_01_wrap .sub01_wwd_box p{font-size : 1.5rem; margin-top : 30px;} .sub01 .sub01_01_wrap .sub01_wwd_box p:last-child{margin-top : 30px;} /* ***** Sub 01 02***** */ .sub01 .sub01_02_wrap .history_wrap{border-width : 3px; margin-top : 50px;padding : 35px 25px;} .sub01 .sub01_02_wrap .history_wrap li{padding-bottom : 25px; margin-bottom : 25px; border-width : 1px;} .sub01 .sub01_02_wrap .history_wrap li h6{margin-top : 20px; font-size : 1.5rem;} .sub01 .sub01_02_wrap .history_wrap li span{width : 110px;height : 30px; line-height : 30px;border-radius : 13px; font-size : 2rem;} /* ***** Sub 01 03***** */ .sub01 .sub01_03_wrap .changingmarket{margin-top: 40px;} .sub01 .sub01_03_wrap .changingmarket span{font-size : 1.7rem; padding : 10px 18px; border-radius : 18px;} .sub01 .sub01_03_wrap .changingmarket p{font-size : 1.4rem; margin-top : 40px;} .sub01 .sub01_03_wrap .map_wrap{margin-top : 225px;} .sub01 .sub01_03_wrap .map_wrap .map_text_box{border-width : 3px; padding : 60px 15px 35px;} .sub01 .sub01_03_wrap .map_wrap .map_text_box h4{width : 225px;padding : 15px 0; font-size : 2rem; border-radius : 20px;} .sub01 .sub01_03_wrap .map_wrap .map_text_box h4 span{font-size : 1.4rem;} .sub01 .sub01_03_wrap .map_wrap .map_text_box h5{font-size : 2rem;} .sub01 .sub01_03_wrap .map_wrap .map_text_box p{margin-top: 15px; font-size : 1.4rem;} .sub01 .sub01_03_wrap .map_wrap .map_box iframe{height : 400px;} /* ****************************** SUB 02 ******************************** */ /* ALL */ .sub02 .sub_visual_wrap .overflow_wrap{padding : 0 25px;} .sub02 .sub_visual_wrap .overflow_wrap .tab_box{width : 600px;} .sub02 .kioskwrap .slide_box{margin : 40px auto; padding : 0 40px;} .sub02 .kioskwrap .slide_box .model_slide::after{height : 175px; border-width : 3px;} .sub02 .kioskwrap .slide_box .model_slide .img_wrap img{height : 300px;} .sub02 .kioskwrap .slide_box .slick-arrow{width : 30px; height: 30px; border-width : 2px;} .sub02 .kioskwrap .slide_box .slick-next{right : -60px; background-size : 8px;} .sub02 .kioskwrap .slide_box .slick-prev{left : -60px; background-size : 8px;} .sub02 .kioskwrap .slide_box .slick-dots{bottom : -60px;} .sub02 .kioskwrap .slide_box .slick-dots li{margin : 0 5px; width : 10px; height : 10px;} .sub02 .kioskwrap .info_box h2{font-size : 2.5rem;} .sub02 .kioskwrap .info_box p{font-size : 1.4rem; margin-top : 20px;} .sub02 .kioskwrap .info_box .solution_title{font-size : 1.5rem; margin-top : 40px;} .sub02 .kioskwrap .info_box .solution_item{margin-top : 18px;} .sub02 .kioskwrap .info_box .solution_item li{ height : 100px; border-radius: 8px;} .sub02 .kioskwrap .info_box .solution_item li:nth-child(even){margin-left : 10px;} .sub02 .kioskwrap .info_box .solution_item li:nth-child(3){margin-top : 10px;} .sub02 .kioskwrap .info_box .solution_item li:nth-child(4){margin-top : 10px;} .sub02 .kioskwrap .info_box .solution_item li a div{padding : 10px 0;} .sub02 .kioskwrap .info_box .solution_item li a div.pt25{padding-top: 15px;} .sub02 .kioskwrap .info_box .solution_item li a div h6{font-size : 1.4rem; margin-top : 10px;} .sub02 .kioskwrap .info_box .solution_item li a div h6.cms{font-size : 1.8rem;} .sub02 .kioskwrap .info_box .solution_item li a div .tabletitem{width : 30px;} .sub02 .kioskwrap .info_box .solution_item.twoitems li{width : calc(50% - 10px);} .sub02 .kioskwrap .info_box .solution_item.threeitems li{width : calc(50% - 10px);} .sub02 .kioskwrap .info_box .solution_item.fouritems li{width : calc(50% - 10px);} .sub02 .kioskwrap .info_box .button_wrap{margin-top : 40px;} .sub02 .kioskwrap .info_box .button_wrap a:first-child{margin-right : 10px;} .sub02 .kioskwrap .info_box .button_wrap a{width : calc(50% - 5px);height : 50px; font-size : 1.4rem; border-radius : 8px;} /* sub02 pop up */ .pdf_item_wrap .pdf_item_dim .pdf_item{padding : 15px 20px; font-size : 1.4rem;} .pdf_item_wrap .pdf_item_dim .pdf_item .top_box{border-bottom : 2px solid var(--color-light-black); padding-bottom : 25px; margin-bottom: 25px;} .pdf_item_wrap .pdf_item_dim .pdf_item .top_box .close_btn{width : 18px;} /* ****************************** SUB 03 ******************************** */ .sub03 .sub_visual_wrap .tab_box{width : 750px; padding : 0 25px;} .sub03 .object_wrap{padding : 30px 25px;} .sub03 .object_wrap .icon_box{padding : 13px;} .sub03 .object_wrap .icon_box .img_border_wrap{width : 90px; height : 90px; border-width : 2px; line-height : 86px;} .sub03 .object_wrap .icon_box .img_border_wrap .mobile_icon{width : 50px;} .sub03 .object_wrap .text_box{margin-top: 30px;} .sub03 .object_wrap .text_box .sub03_text_title{font-size : 1.8rem;} .sub03 .object_wrap .text_box p{font-size : 1.4rem; margin-top : 20px;} .sub03 .balloon_box{width : 225px; height : 60px; margin : 40px auto 25px;} .sub03 .balloon_box .balloon_title{font-size : 1.5rem; line-height : 40px;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item{height : 200px; width : 100%; margin-bottom : 20px;} .sub03 .gradient_wrap .gradient_wrapper.twoitems .gradient_item{width : 100%;} .sub03 .gradient_wrap .gradient_wrapper.threeitems .gradient_item{width : 100%;} .sub03 .gradient_wrap .gradient_wrapper.fiveitems .gradient_item{width : 100%;} .sub03 .gradient_wrap .gradient_wrapper.fiveitems .gradient_item:nth-child(n+3):nth-child(-n+4){margin-bottom : 20px;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item:nth-child(n+3){margin-top : 0;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item:nth-child(-n+2){margin-bottom : 20px;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item:nth-child(odd){margin-right : 0;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item:last-child{margin-bottom : 0;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .mobileitem{width : 50px;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .mobileitem.recimg{width : 90px;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .mobileitem.recimg2{width : 75px;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .mobileitem.recimg3{width : 46px;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .gradient_dim span{font-size : 1.4rem;padding : 5px 8px; border-radius : 10px;} .sub03 .gradient_wrap .gradient_wrapper .gradient_item .gradient_dim h5{margin-top: 8px; font-size : 1.4rem;} .sub03 .gradient_wrap .gradient_wrapper.oneitem .gradient_item img{width : 80px;} .sub03 .gradient_wrap .gradient_wrapper.itemslide .slick-arrow{width : 30px; height : 30px; border-width : 2px; top : -35px;} .sub03 .gradient_wrap .gradient_wrapper.itemslide .slick-prev{right : 35px;} /* ****************************** SUB 04 ******************************** */ .sub04 .sub_visual_wrap .tab_box li{border-radius : 18px;} .sub_visual_wrap .tab_box li.on a{border-radius : 18px;} .sub04 .support_wrapper > div{border-width : 2px; padding : 35px 18px;} .sub04 .support_wrapper > div .support_cate{font-size : 1.4rem;} .sub04 .support_wrapper > div .support_cate i{margin-right : 10px;} .sub04 .support_wrapper > div .support_cate i img{width : 17px;} .sub04 .support_wrapper > div p{margin : 15px 0 20px; font-size : 2rem;} .sub04 .support_wrapper > div.left_box .icon_box > div:first-child{margin-bottom : 10px;} .sub04 .support_wrapper > div.right_box{margin-top : 20px;} .sub04 .support_wrapper > div .icon_box i img{width : 13px;} .sub04 .support_wrapper > div .icon_box span{margin-left : 10px; font-size : 1.4rem;} .sub04 .support_wrapper > div .icon_box button{width : 25px; height : 25px;} .sub04 .label_wrap{padding : 60px 20px; margin-top : 70px; border-radius : 15px;} .sub04 .label_wrap .form_title{font-size : 2rem; border-radius : 20px; padding : 13px 0; width : 230px;} .sub04 .label_wrap .red_star{font-size : 1.5rem;} .sub04 .label_wrap .flex_field div{margin-bottom : 20px;} .sub04 .label_wrap .flex_field div.twoinput input{width : calc(50% - 5px);} .sub04 .label_wrap .flex_field div p{font-size : 1.5rem; margin-bottom : 15px;} .sub04 .label_wrap .flex_field input{border-width : 1px; border-radius : 4px; height : 40px; padding-left : 13px; font-size :1.3rem;} .sub04 .label_wrap .flex_field input::placeholder{font-size : 1.3rem;} .sub04 .label_wrap p{font-size : 1.5rem;} .sub04 .label_wrap .radio_field div.subject_box p{margin : 35px 0 20px;} .sub04 .label_wrap .radio_field div:nth-of-type(1) p{margin-bottom : 25px;} .sub04 .label_wrap input[type="checkbox"]{width : 12px; height : 12px; border-width : 1px;} .sub04 .label_wrap .radio_field input[type="text"]{height : 40px; border-width : 1px; border-radius : 4px; padding-left : 13px; font-size :1.4rem;} .sub04 .label_wrap .radio_field label{font-size : 1.4rem; margin-right : 15px;} .sub04 .label_wrap .radio_field .help_box .label_box{margin-bottom : 10px;} .sub04 .label_wrap .radio_field div p.howcan{margin : 25px 0;} .sub04 .label_wrap .txt_field{margin-top : 30px;} .sub04 .label_wrap .txt_field p{margin-bottom : 15px;} .sub04 .label_wrap .txt_field textarea{height : 225px; border-width : 1px; border-radius : 4px; padding : 15px; font-size :1.3rem;} .sub04 .label_wrap .question_box{margin-top : 20px;} .sub04 .label_wrap .question_box button{border-width : 1px; border-radius : 20px; padding : 13px 20px; font-size : 1.5rem;} }