@import url('sub.css'); 

/*** service 공통 ***/
.service_titArea {margin-bottom:60px; text-align:center;}
.service_titArea .subTit {margin-bottom:30px; color:var(--black); font-weight:200;}
.service_titArea .subTit span {font-weight:700; line-height:inherit; letter-spacing:inherit;}
.service_img {width:100%; display:flex; flex-wrap:wrap; gap:0 30px; margin-bottom:80px;}
.service_img figure {width:calc((100% - 60px) / 3);} 
.service_img figure img {max-width:100%;}

.service_info {width:100%; display:grid; grid-template-columns:repeat(3, 1fr); gap:0 10px; }
.service_info figure {position:relative; border:1px solid var(--border); padding:30px; box-sizing:border-box; text-align:center;}
.service_info figure .no {position:absolute; left:50%; top:0; min-width:125px; transform:translateX(-50%); z-index:5; display:inline-block; color:var(--white); font-family:var(--eng); line-height:1; padding:10px 20px; border-radius:var(--borderHf); text-transform:uppercase; background:var(--main); letter-spacing:0.5pt; margin-top:-18px; font-weight:600;}
.service_info figure .fs22 {color:var(--black); font-weight:600; padding:10px 0 20px 0; border-bottom:1px solid var(--border);}
.service_info figure .fs18 {padding-top:20px;}
.service_info figure .fs18 strong {color:var(--black);}

.service_info.two {grid-template-columns:repeat(2, 1fr);}

.service_process {text-align:center; margin-top:120px;}
.service_process .fs40 {margin-bottom:60px; color:var(--black);}
.service_process .process {display:flex; flex-wrap:wrap; gap:20px; height:100%;}
.service_process .process figure {position:relative; padding:45px 30px; box-sizing:border-box; text-align:center; transition:all 0.5s ease-out; background:var(--grayBg);}
.service_process .process.grid4 figure {width:calc((100% - 60px) / 4);}
.service_process .process.grid5 figure {width:calc((100% - 80px) / 5);}
.service_process .process.grid6 figure {width:calc((100% - 100px) / 6);}
.service_process .process figure::after {position:absolute; right:-35px; top:50%; transform:translateY(-50%); z-index:10; width:50px; height:50px; border-radius:var(--borderAll); background:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--icon); content:"arrow_forward"; font-size:20px; line-height:1; color:var(--basic); box-shadow:0 5px 5px rgba(0,0,0,0.1); transition:all 0.5s ease-out;}
.service_process .process figure:last-child::after {display:none;}
.service_process .process figure .icons {margin-bottom:15px; line-height:1;}
.service_process .process figure .icons svg {transition:all 0.5s ease-out;}
.service_process .process figure .fs20 {color:var(--black); font-weight:600; transition:all 0.5s ease-out;}
.service_process .process figure.on {background:var(--Lblue);}
.service_process .process figure.on::after {color:var(--Lblue);}
.service_process .process figure.on .icons svg path {stroke:var(--white);}
.service_process .process figure.on .icons svg .arrow {fill:var(--white);}
.service_process .process figure.on .icons svg .blue, .service_process .process figure.on .icons svg .black  {fill:var(--white); stroke:none;}
.service_process .process figure.on .fs20 {color:var(--white);}


/** 출판 · 교구제작 **/
.service_roll {position:relative; margin-bottom:80px;}
.service_roll .roll_box {position:relative; background:var(--grayBg); padding:30px 30px 50px 30px; box-sizing:border-box;}
.service_roll .roll_box + .roll_box {margin-top:50px;}
.service_roll .roll_list {position:relative; display:flex; width:calc(100% + 30px); margin:0 -15px;}
.service_roll .roll_list figure {position:relative; margin:0 15px;}
.service_roll .roll_list figure img {display:block; max-width:100%;}

.service_roll .teaching .roll_list figure {aspect-ratio:481/680;}
.service_roll .published .roll_list figure {aspect-ratio:1/1;}

.service_roll .roll_list .slick-arrow {position:absolute; bottom:-75px; width:50px; height:50px; background:var(--white); border:1px solid var(--border); text-indent:-222222px; border-radius:100%; z-index:100; transition:all 0.4s ease-out;}
.service_roll .roll_list .slick-arrow::before {position:absolute; left:0; top:0; width:50px; height:50px; display:flex; align-items:center; justify-content:center; font-family:var(--icon); font-size:24px; color:var(--black); opacity:0.5; z-index:3; text-indent:0; transition:all 0.4s ease-out;}
.service_roll .roll_list .slick-arrow:hover {border-color:var(--black);}
.service_roll .roll_list .slick-arrow:hover::before {opacity:1;}

.service_roll .roll_list .slick-prev {right:55px;}
.service_roll .roll_list .slick-prev::before {content: "\e5cb";}
.service_roll .roll_list .slick-next {right:0;}
.service_roll .roll_list .slick-next::before {content: "\e5cc";}


/*******************************************************************************
    @media 1640px
*******************************************************************************/
@media all and (max-width:1640px){

.service_info figure .fs18 br {display:none;}


}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){

/** 출판 · 교구제작 **/
.service_roll .roll_list {width:calc(100% + 20px); margin:0 -10px;}
.service_roll .roll_list figure {margin:0 10px;}

}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/*** service 공통 ***/
.service_titArea {margin-bottom:40px;}
.service_titArea .subTit {margin-bottom:20px;}
.service_img {gap:0 20px; margin-bottom:60px;}
.service_img figure {width:calc((100% - 40px) / 3);}

.service_process .process.grid5 figure {width:calc((100% - 40px) / 3);}
.service_process .process.grid6 figure {width:calc((100% - 40px) / 3);}

.service_info figure {padding:20px;}
.service_info figure .fs22 {padding:10px 0 15px 0;}
.service_info figure .fs18 {padding-top:15px;}

.service_process {margin-top:80px;}
.service_process .fs40 {margin-bottom:40px;}
.service_process .process figure {padding:35px 20px;}
.service_process .process figure .icons svg {width:60px; height:auto;}

.publishing .service_process .process figure:nth-child(3)::after {top:auto; right:auto; bottom:-35px; left:50%; transform:translateX(-50%) translateY(0); content: "arrow_downward";}
.publishing .service_process .process figure:nth-child(4) {order:6;} 
.publishing .service_process .process figure:nth-child(5) {order:5;} 
.publishing .service_process .process figure:nth-child(4)::after {right: auto; left:-35px; content: "arrow_back";}
.publishing .service_process .process figure:nth-child(5)::after {right: auto; left:-35px; content: "arrow_back";}
.publishing .service_process .process figure:last-child {order:4;} 

.rental .service_process .process {justify-content:flex-end;}
.rental .service_process .process figure:nth-child(3)::after {top:auto; right:auto; bottom:-35px; left:50%; transform:translateX(-50%) translateY(0); content: "arrow_downward";}
.rental .service_process .process figure:nth-child(4) {order:6;} 
.rental .service_process .process figure:nth-child(5) {order:5;} 
.rental .service_process .process figure:nth-child(4)::after {right: auto; left:-35px; content: "arrow_back";}
.rental .service_process .process figure:nth-child(5)::after {right: auto; left:-35px; content: "arrow_back";}
.rental .service_process .process figure:last-child {order:4;} 

/** 출판 · 교구제작 **/
.service_roll {margin-bottom:60px;}
.service_roll .roll_box {padding:20px 20px 40px 20px;}
.service_roll .roll_box + .roll_box {margin-top:40px;}

.service_roll .roll_list .slick-arrow {bottom:-60px; width:40px; height:40px;}
.service_roll .roll_list .slick-arrow::before {width:40px; height:40px; font-size:24px;}
.service_roll .roll_list .slick-prev {right:45px;}

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/*** service 공통 ***/
.service_titArea {margin-bottom:30px;}
.service_titArea .subTit {margin-bottom:15px;}
.service_img {gap:10px 0; margin-bottom:40px; flex-direction:column;}
.service_img figure {width:100%;} 

.service_info {grid-template-columns: repeat(1, 1fr); gap:25px 0;}
.service_info figure {padding:15px 10px;}
.service_info figure .no {min-width: 105px; padding:8px 10px; margin-top: -14px;}
.service_info figure .fs22 {padding:10px 0 5px 0;}
.service_info figure .fs18 {padding-top:10px;}
.service_info.two {grid-template-columns:repeat(1, 1fr);}

.service_process {margin-top:50px;}
.service_process .process {gap:10px;}
.service_process .process.grid4 figure {width:calc((100% - 10px) / 2);}
.service_process .process.grid5 figure {width:calc((100% - 20px) / 3);}
.service_process .process.grid6 figure {width:calc((100% - 20px) / 3);}

.service_process .fs40 {margin-bottom:30px;}
.service_process .process figure {padding:25px 15px;}
.service_process .process figure .icons {margin-bottom:10px;}
.service_process .process figure .icons svg {width:50px; height:auto;}
.service_process .process figure::after {right: -25px; width: 40px; height: 40px; font-size: 20px;}

.education .service_process .process figure:nth-child(2)::after {top:auto; right:auto; bottom:-25px; left:50%; transform:translateX(-50%) translateY(0); content: "arrow_downward";}
.education .service_process .process figure:nth-child(3) {order:4;} 
.education .service_process .process figure:nth-child(3)::after {right: auto; left:-25px; content: "arrow_back";}
.education .service_process .process figure:nth-child(4) {order:3;} 

.publishing .service_process .process figure:nth-child(3)::after {bottom:-25px;}
.publishing .service_process .process figure:nth-child(4)::after {left:-25px;}
.publishing .service_process .process figure:nth-child(5)::after {left:-25px;}

.rental .service_process .process figure:nth-child(3)::after {bottom:-25px;}
.rental .service_process .process figure:nth-child(4)::after {left:-25px;}
.rental .service_process .process figure:nth-child(5)::after {left:-25px;}

/** 출판 · 교구제작 **/
.service_roll {margin-bottom:50px;}
.service_roll .roll_box {padding:20px 20px 30px 20px;}
.service_roll .roll_list {width:calc(100% + 10px); margin:0 -5px;}
.service_roll .roll_list figure {margin:0 5px;}

.service_roll .roll_list .slick-arrow {bottom:-50px; width:40px; height:40px;}
.service_roll .roll_list .slick-arrow::before {width:40px; height:40px; font-size:24px;}
.service_roll .roll_list .slick-prev {right:43px;}

}


/*******************************************************************************
    @media ~480px             
*******************************************************************************/
@media all and (max-width:480px){

.service_titArea .subTit br {display:none;}

.service_process .process.grid5 figure {width:calc((100% - 10px) / 2);}
.service_process .process.grid6 figure {width:calc((100% - 10px) / 2);}

.education .service_process .process figure:nth-child(2)::after {top:auto; right:auto; bottom:-25px; left:50%; transform:translateX(-50%) translateY(0); content: "arrow_downward";}
.education .service_process .process figure:nth-child(3) {order:4;} 
.education .service_process .process figure:nth-child(3)::after {right: auto; left:-25px; content: "arrow_back";}
.education .service_process .process figure:nth-child(4) {order:3;} 

.publishing .service_process .process figure:nth-child(2)::after {top:auto; right:auto; bottom:-25px; left:50%; transform:translateX(-50%) translateY(0); content: "arrow_downward";}
.publishing .service_process .process figure:nth-child(3) {order:4;} 
.publishing .service_process .process figure:nth-child(3)::after {transform: translateX(0) translateY(-50%); top:50%; left:-25px; content: "arrow_back";}
.publishing .service_process .process figure:nth-child(4) {order:3;} 
.publishing .service_process .process figure:nth-child(4)::after {transform: translateX(-50%) translateY(0); bottom:-25px; left:50%; top:auto; content: "arrow_downward";}
.publishing .service_process .process figure:nth-child(5) {order:5;} 
.publishing .service_process .process figure:nth-child(5)::after {transform: translateX(0) translateY(-50%); bottom:auto; left:auto; right:-25px; content: "arrow_forward";}
.publishing .service_process .process figure:last-child {order:6;} 

.rental .service_process .process {justify-content:flex-start;}
.rental .service_process .process figure:nth-child(2)::after {top:auto; right:auto; bottom:-25px; left:50%; transform:translateX(-50%) translateY(0); content: "arrow_downward";}
.rental .service_process .process figure:nth-child(3) {order:4;} 
.rental .service_process .process figure:nth-child(3)::after {transform: translateX(0) translateY(-50%); top:50%; left:-25px; content: "arrow_back";}
.rental .service_process .process figure:nth-child(4) {order:3;} 
.rental .service_process .process figure:nth-child(4)::after {transform: translateX(-50%) translateY(0); bottom:-25px; left:50%; top:auto; content: "arrow_downward";}
.rental .service_process .process figure:nth-child(5) {order:5;} 


/** 출판 · 교구제작 **/
.service_roll .roll_box {padding:15px 15px 30px 15px;}

}