@charset "UTF-8";

@media screen and (max-width:640px){
    .linksInner li span { min-width: 140px; }
}

/*--------------------------------------------------------------------
	arcface
--------------------------------------------------------------------*/

/*solutionSection*/
#solutionSection { text-align: center; margin-top: 40px; }
#solutionSection ul { display: flex; justify-content: center; }
#solutionSection ul li { display: flex; border: 2px solid #297091; border-radius: 10px; width: 17.1%; margin: 15px; padding: 20px; align-items: center; justify-content: center; }
#solutionSection ul li p { line-height: 1.6; }
#solutionSection ul li p span { font-weight: bold; color: #297091; }
#solutionSection ul + p { font-weight: bold; font-size: 180%; }

/*introSection*/
#introSection { text-align: center; }
#introSection #introImg { display: flex; justify-content: center; margin-top: 80px; }
#introSection #introImg div { width: 17%; border-radius: 10px; overflow: hidden; margin: 0 15px; }
#introSection p { margin-top: 80px; font-size: 150%; line-height: 2.2; }

.featuresList2 .imgBox p { text-align: center; margin-top: 5px; }
.featuresList2 .imgBox p .moniLogo { max-width: 38px !important; }

/*networkSection*/
#networkSection h3 { margin-top: 60px; }
#networkSection div { width: 90%; max-width: 802px; margin: 50px auto 0; }

/*methodSection*/
#methodSection { width: 90%; max-width: 980px; margin: 0 auto; text-align: center; }
#methodSection ul { display: flex; justify-content: space-between; margin-top: 50px; }
#methodSection ul li { width: 48%; text-align: center; }
#methodSection ul li .imgBox img { border-radius: 10px; }
#methodSection ul li .infoBox { margin-top: 10px; }
#methodSection ul li .infoBox h4 { font-size: 140%; }
#methodSection ul li .infoBox p { margin-top: 5px; }

@media screen and (max-width:640px){
    /*networkSection*/
    #networkSection h3 { margin-top: 40px; }
    #networkSection div { margin: 30px auto 0; }
    
    /*methodSection*/
    #methodSection ul { display: block; margin-top: 30px; }
    #methodSection ul li { width: 100%; }
    #methodSection ul li .infoBox h4 { font-size: 120%; }
    #methodSection ul li + li { margin-top: 30px; }
}

/*alRoomSection*/
#alRoomSection .moniLogo { width: 80px; margin: 0 10px; }

@media screen and (max-width:640px){
    /*alRoomSection*/
    #alRoomSection .moniLogo { width: 50px; margin: 0 5px; }
}

/*Arc LINK Room*/
.topIcon + p { margin-top: 50px; }

#flowList { display: flex; justify-content: space-between; margin-top: 60px; }
#flowList li { width: 22%; background: #fff; border-radius: 10px; position: relative; }
#flowList li::after { position: absolute; content: ""; display: block; left: -12%; top: 58%; width: 10px; height: 25px; background-color: #297091; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#flowList li:nth-child(1)::after { display: none; }
#flowList li .iconBox { padding: 50px 30px 30px; text-align: center; color: #297091; font-size: 120%; font-weight: bold; }
#flowList li .iconBox img { margin-bottom: 15px; }
#flowList li h4 { background: #297091; padding: 10px; text-align: center; width: 100%; color: #fff; font-size: 130%; }
#flowList li p { padding: 15px 25px 20px; }

/*licenseArea*/
.licenseArea { text-align: left; font-size: 90%; margin-top: 60px; }
.licenseArea h5 { font-size: 100%; }
.licenseArea p { font-size: 100%; }
.licenseArea a { margin-top: 5px; display: inline-block; padding-left: 12px; position: relative; text-decoration: none; }
.licenseArea a::before { position: absolute; content: ""; display: block; left: 0; top: 0.3em; width: 5px; height: 8px; background-color: #297091; clip-path: polygon(0 0, 0% 100%, 100% 50%); }


@media screen and (max-width:940px){
    /*solutionSection*/
    #solutionSection { width: 90%; margin: 0 auto; }
    #solutionSection ul { flex-wrap: wrap; justify-content: space-between; }
    #solutionSection ul li { width: 48%; margin: 20px 0 0; }
    #solutionSection ul + p { font-size: 140%; }
}

@media screen and (max-width:640px){
    
    /*introSection*/
    #introSection #introImg { flex-wrap: wrap; margin-top: 30px; }
    #introSection #introImg div { width: 45%; margin: 2%; }
    #introSection p { margin: 20px auto 0 ; font-size: 120%; width: 90%; text-align: left; }
    #introSection p + div { margin-top: 30px; }
    
    .featuresList2 p { margin-top: 20px; }

    /*Arc LINK Room*/
    .topIcon + p { margin-top: 20px; }
    .topIcon + p.bTxt { margin-top: 0; }
    

    #flowList { display: block; margin-top: 30px; }
    #flowList li { width: 100%; margin-top: 14%; }
    #flowList li::after { left: 50%; transform: translateX(-50%); top: -10%; width: 25px; height: 10px; clip-path: polygon(50% 100%, 0 0, 100% 0); }
    #flowList li .iconBox { padding: 30px 27%; font-weight: bold; }

}